/* Template for Trachsel Hutter Flattich Rechtsanwälte AG © admotion */

:root {
    --hellblau: #e9ecf1;
    --blau: #1F4D8B;
}



html 
{
   height:			100%;
}


body
{
    height:         100%;
    margin:			0px;
    padding:		0px;
    font-family:	'DM Sans';
    font-weight:	300;
    font-size:		18px;
    line-height:	160%;
    letter-spacing:	0.02em;
}




#system-message { margin: 0px; }
img { height: auto; max-width: 100%; vertical-align: middle; border: 0px; }

#header { margin: 0px 30px; display: flex; flex-wrap: wrap; justify-content: space-between; padding: 0px 0px 10px 0px; }
#logo { width: 80%; }

#menu { position: absolute; top: 10px; z-index: 9999; width: 100%; transition: .2s ease-out; }
.shrink #menu { position: fixed; background: #ffffff; width: 100%; top: 0; height: 50px; padding: 11px 0px 0px 0px;}

.items-leading { background: var(--hellblau); }

.items-leading .blog-item { border-bottom: 0px !important; }
.blog-item { border-bottom: 1px solid #bebebe; }
.blog-item:last-child { border-bottom: 0px solid #bebebe; }

.blogeintraege { margin: 0px 30px; padding: 30px 0px; }
.item-image {  margin: 0px 0px 20px 0px; }

.items-leading .blogeintraege { position: relative; }

#adressbox { display: none; }

#text ul { margin: 0px; padding: 0px; }
#text li { margin: 0px; padding: 8px 0px; list-style: none; border-bottom: 1px solid #bebebe; }

footer { background: var(--hellblau); }
#footer { margin: 0px 30px; padding: 50px 0px; }
#adresse { margin: 0px 0px 40px 0px; }
#container-bottom { background: var(--blau); color: rgb(255,255,255,.5); }
#bottom { margin: 0px 30px; padding: 30px 0px; }

#footerbild p { margin: 0px; }


.kontakt { border-top: 1px solid var(--blau); border-bottom: 1px solid var(--blau); text-transform: uppercase; letter-spacing: 0.12em; font-size: 18px; padding: 10px 40px; display: inline-block; margin: 25px 0px 0px 0px; }
.titelohneabstand { padding: 0px; }

.link { color: #000000; font-family: 'DM Serif Display'; font-weight: 400; font-size: 22px; display: inline-block; position: relative; margin-top: 20px; padding: 10px 0px 10px 45px; transition: .3s ease-out; }
.link:hover { color: var(--blau);}
.link::before { content: ""; position: absolute; top: 19px; left: 0px; width: 28px; height: 12px; background: url(../images/paragraph.png) no-repeat scroll 0 0px; background-size: 28px 12px; transition: transform .3s ease-out; }
.link:hover::before { background: url(../images/paragraph-blau.png) no-repeat scroll 0 0px; background-size: 28px 12px; transform: rotate(90deg); }

.back-to-top { font-size: 0; background: url(../images/totop.png) no-repeat scroll 0 0; background-size: 30px 19px; width: 30px; height: 19px; bottom: 20px; right: 15px; position: fixed; left: 50%; margin: 0px 0px 0px -15px; }




figure { margin: 0px; padding: 0px; }

h1 { margin: 0px 0px 20px 0px; padding: 0px; font-size: 30px; line-height: 120%; font-weight: 400; letter-spacing: 0.02em; color: var(--blau); font-family: 'DM Serif Display'; } 
h2 { margin: 0px 0px 20px 0px; padding: 0px; font-size: 25px; line-height: 120%; font-weight: 400; letter-spacing: 0.02em; color: var(--blau); font-family: 'DM Serif Display'; } 
h3 { margin: 0px 0px 10px 0px; padding: 30px 0px 0px 0px; font-size: 25px; line-height: 120%; font-weight: 400; letter-spacing: 0.02em; font-family: 'DM Serif Display'; } 
h4 { margin: 0px 0px 10px 0px; padding: 0px; font-size: 25px; line-height: 120%; font-weight: 400; letter-spacing: 0.02em; font-family: 'DM Serif Display'; } 

h4 a { font-weight: 400 !important; }



.dienstleistungen { background: var(--hellblau); padding: 15px 30px; margin: 0px 0px 30px 0px; }
.publikationen { background: var(--hellblau); padding: 30px; margin: 0px 0px 30px 0px; }
.team { background: var(--hellblau); padding: 20px 30px 20px 30px; }

.team h3 { padding: 0px; }
.publikationen h3 { padding: 0px; }
.dienstleistungen h3 { padding: 0px; }
.wf-columns { gap: 50px; }


.dienstleistungen li:last-child { border-bottom: 0px !important; padding: 8px 0px 0px 0px !important; }
.publikationen li:last-child { border-bottom: 0px !important; padding: 8px 0px 0px 0px !important; }
.team li:last-child { border-bottom: 0px !important; padding: 8px 0px 0px 0px !important; }


#webdesign { position: fixed; right: 0; width: 18px; background: var(--blau); padding: 5px 2px 5px 2px; bottom: 50px; }
#webdesign p { margin: 0px; }

a { text-decoration: none; outline: none; color: var(--blau); font-weight: 600; }
a:hover { text-decoration: none; outline: none; }
a:focus { text-decoration: none; outline: none; }


p { margin: 0px 0px 10px 0px; }

.clear { line-height: 0; }

table { margin: 0px 0px 10px 0px; width: 100%; }
td { border-bottom: 1px solid #bebebe; padding: 8px 0px; }

strong { font-weight: 600; }


@media(min-width:500px)
{
    #logo { width: 400px; }
}




@media(min-width:800px)
{
    #header { margin: 0px 7%; }
    #menu { top: 44px; }

    .items-leading .blogeintraege { margin: 0px 50px; }

    .blogeintraege { padding: 50px 0px; display: flex; align-items: center; gap: 50px; margin: 0px 50px; }
    .item-image { flex: 1; margin: 0px; }
    .item-content { flex: 1; }   

    #footer { margin: 0px 50px; }
    #bottom { margin: 0px 50px; }
}




@media(min-width:1100px)
{
    #header { padding: 0px 0px 40px 0px; }
    #logo { width: 600px; }
    .items-leading .blogeintraege { margin: 0px 80px; }
    .blogeintraege { padding: 80px 0px; margin: 0px 80px; }

    .hauptbeitraege:nth-child(odd) .blogeintraege { flex-direction: row-reverse; }
    .hauptbeitraege:first-child .blogeintraege { border-left: 1px solid #bebebe; }
    .hauptbeitraege:first-child .blogeintraege .inhalt { padding-left: 50px; } 

    #footer { display: flex; flex-wrap: wrap; justify-content: space-between; }
    #bottom { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 20px 0px 10px 0px; }
    #adresse { margin: 0px; }
    #infos { text-align: right;}

    .publikationen { padding: 40px; margin: 0px 0px 50px 0px; }
    .dienstleistungen { padding: 20px 40px; margin: 0px 0px 50px 0px; }
    .team { padding: 30px 40px 40px 40px; }

    #footer { margin: 0px 80px; }
    #bottom { margin: 0px 80px; }

    h1 { font-size: 40px; margin: 0px 0px 25px 0px; }
    h2 { font-size: 35px; margin: 0px 0px 30px 0px; }
    h3 { margin: 0px 0px 20px 0px; padding: 40px 0px 0px 0px; }
}



@media(min-width:1300px)
{
    #adressbox { display: block; background: var(--blau); color: #ffffff; position: absolute; left: 50%; bottom: 0; padding: 20px 30px 20px 30px; margin-left: 25px; z-index: 9999; }
    #adressbox p { margin: 0px; }
    #adressbox a { color: #ffffff; }
}




@media(min-width:1400px)
{
    #header { margin: 0px 10%; }
    #menu { top: 130px; width: auto; right: 10%; position: absolute; transition: 0s ease-out;}
    .shrink #menu { position: absolute; top: 130px; width: auto; }

    .blogeintraege { gap: 100px; margin: 0px 10%; }
    .hauptbeitraege:first-child .blogeintraege .inhalt { padding-left: 100px; } 

    #footer { margin: 0px 10%; }
    #bottom { margin: 0px 10%; }

    .wf-columns { gap: 100px; }

    #adressbox { margin-left: 50px; }
}




@media(min-width:1800px)
{
    #header { margin: 0px 15%; }

    #footer { margin: 0px 15%; }
    #bottom { margin: 0px 15%; }
}