/* Template for Hundeschule Oetwil am See © codesigns */


:root {
    --hellblau: #a8c3d0;
    --blau: #5089a2;
    --dunkelblau: #336c85;
}


html 
{
   height:			100%;
}


body
{
    height:         100%;
    margin:			0px;
    padding:		0px;
    font-family:	'Poppins';
    font-weight:	300;
    font-size:		18px;
    display:        flex;
    flex-direction: column;
    line-height:	160%;
    letter-spacing:	0.02em;
}



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


header { background: var(--hellblau); border-bottom: 10px solid var(--blau); position: fixed; width: 100%; z-index: 998; }
#header { display: flex; flex-wrap: wrap; gap: 15px; padding: 20px 30px 0px 20px; align-items: end; }

#logo { width: 100px; margin-bottom: -1px; }

#container-menu { display: none; position: fixed; background: var(--hellblau); z-index: 999; top: 91px; left: 0; right: 0; }
#menu { padding: 30px; }
#menu-small { width: 32px; height: 20px; position: relative; margin: 0px 0px 34px auto; }

#content { padding: 90px 0px 0px 0px; }

#footerbild { position: relative ;}
#titelbild p { margin: 0px; }

#wasserzeichen { position: absolute; bottom: 7px; right: 10px; z-index: 999; color: #ffffff80; font-size: 12px; font-weight: 500; line-height: 150%; text-align: right;}
#wasserzeichen a { color: #ffffff80; }



.st0 { fill: var(--blau); transition: .3s linear; }
svg { display: block; }

#claim { font-size: 16px; padding: 0px 0px 10px 0px; line-height: 160%; width: 150px; color: var(--dunkelblau); }
#claim a { color: var(--dunkelblau); font-weight: 300; }
#claim p { margin: 0px; }

#icons { display: none; }
#icons path:hover { fill: var(--dunkelblau); }


#text ul { margin: 20px 0px 25px 0px; padding: 0px; }
#text ul li { background: url(../images/list.svg) no-repeat scroll 0 12px; background-size: 4px 4px; list-style: none; margin: 0px; padding: 0px 0px 0px 20px; }

#text ol { margin: 0px 0px 20px 18px; padding: 0px; }
#text ol li { padding: 0px 0px 0px 5px; }
.kursdetails .mod-list { display: grid; grid-template-columns: 1fr; }
.kursdetails .mod-list li { background: none !important; margin: 0px !important; padding: 0px !important; border: 1px solid var(--hellblau); }
.kursdetails .mod-list li:nth-child(1) { border-bottom: 0px; }
.kursdetails .mod-list li:nth-child(2) { border-bottom: 0px; }
.kursdetails .mod-list li:nth-child(3) { border-bottom: 0px; }
.kursdetails .mod-list li:nth-child(4) { border-bottom: 0px; }
.kursdetails .mod-articles-item-content { padding: 30px 30px 20px 30px; }
.kursdetails .mod-articles-item-content ul li { border: 0px !important; background: url(../images/list.svg) no-repeat scroll 0 12px !important; background-size: 4px 4px !important; padding: 0px 0px 0px 20px !important; }
.kursdetails .mod-list li h3 { margin-bottom: 20px; }

section { flex: 1; }
#text { padding: 50px 30px 50px 30px; }

.com-content-category-blog { display: flex; flex-wrap: wrap; flex-direction: column; gap: 50px; }
.item-image { padding: 0px 0px 30px 0px; }

#container-zitat { background: var(--blau); margin-top: 10px; color: var(--blau);}
#zitat { padding: 18px 30px 16px 30px; }
.zitat { font-size: 18px; line-height: 130%; font-weight: 300; letter-spacing: 0.02em; color: var(--hellblau); margin: 0px; } 
.autor { font-size: 16px; font-weight: 300; letter-spacing: 0.02em; padding-left: 5px; }



footer { background: var(--hellblau); position: relative; }
#footer { padding: 40px 30px; display: grid; grid-template-columns: 1fr; gap: 30px; }
#hunde { position: absolute; width: 180px; right: 30px; bottom: -1px; }



#container-boxen { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--hellblau); }
.box { padding: 40px 30px; }
.box .button { margin-top: 20px; }

#box2 { border-top: 1px solid var(--hellblau); }
#box3 { border-top: 1px solid var(--hellblau); border-bottom: 1px solid var(--hellblau); }


#container-bottom { background: var(--blau); }
#bottom { font-size: 16px; color: #ffffff50; padding: 10px 30px; }
#bottom p { margin: 0px; }


h1 { margin: 0px 0px 20px 0px; padding: 0px; font-size: 23px; line-height: 130%; font-weight: 600; letter-spacing: 0.02em; color: var(--blau); } 
h2 { margin: 0px 0px 20px 0px; padding: 0px; font-size: 23px; line-height: 130%; font-weight: 600; letter-spacing: 0.02em; color: var(--blau); } 
h3 { margin: 0px 0px 10px 0px; padding: 0px; font-size: 20px; line-height: 120%; font-weight: 500; letter-spacing: 0.01em; } 
h4 { margin: 0px 0px 30px 0px; padding: 0px; font-size: 20px; line-height: 120%; font-weight: 500; letter-spacing: 0.01em; color: var(--blau); } 
h5 { margin: 0px 0px 30px 0px; padding: 0px; font-size: 20px; line-height: 120%; font-weight: 500; letter-spacing: 0.01em; } 
h6 { margin: 0px 0px 10px 0px; padding: 20px 0px 0px 0px; font-size: 18px; line-height: 120%; font-weight: 600; letter-spacing: 0.01em; } 

p + h3 { padding: 30px 0px 0px 0px; }
ol + h3 { padding: 30px 0px 0px 0px; }


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

.button { display: inline-block; margin-top: 0px; background: url(../images/link.svg) no-repeat scroll 0 9px; background-size: 6px 10px; padding: 0px 0px 0px 14px; color: var(--dunkelblau); transition: .3s linear; }
.button:hover { color: var(--blau); }


.name { font-size: 23px; line-height: 130%; font-weight: 600; letter-spacing: 0.02em; color: var(--blau); } 
.funktion { font-size: 20px; font-weight: 300; color: #000000; padding-left: 5px; } 

.about { display: grid; grid-template-columns: 1fr; }
.about.wf-columns { gap: 20px;} 

.blacklink { color: #000000; font-weight: 300; }

strong { font-weight: 600; }

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

table { margin: 0px 0px 10px 0px; width: 100%; }

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



.responsiveContainer iframe { width: 100%; height: 400px; }





@media(min-width:550px)
{
    #header { gap: 20px; padding: 30px 50px 0px 40px; }
    #logo { width: 120px; }

    #claim { font-size: 17px; padding: 0px 0px 12px 0px; width: auto; }

    #menu-small { margin: 0px 0px 38px auto; }
    #container-menu { top: 109px; }

    #content { padding: 110px 0px 0px 0px; position: relative; }
    #text { padding: 50px; }
    
    #footer { padding: 40px 50px; }
    #hunde { right: 50px; }

    #bottom { padding: 10px 50px; display: flex; flex-wrap: wrap; justify-content: space-between;}

    .box { padding: 50px; }
}





@media(min-width:720px)
{
    header { border-bottom: 0px; }
    #header { margin: 0px auto; width: 600px; padding: 30px 0px 0px 0px; }

    #icons { position: absolute; width: 20px; top: 196px; left: 20px; display: flex; gap: 20px; flex-direction: column; }

    #container-menu { display: flex; position: static; background: var(--blau); flex-wrap: wrap; justify-content: end; }
    #menu { margin: 0px auto; width: 600px; padding: 0px; height: 40px; }
    #menu-small { display: none; }

    #content { padding: 147px 0px 0px 0px; }
    #text { margin: 0px auto; width: 600px; padding: 42px 0px 50px 0px; }

    .contact { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }

    .items-leading .blog-item { display: flex; flex-wrap: wrap; gap: 40px; }
    .item-content { flex: 1; display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center;}
    .item-image { flex: 1; padding: 8px 0px 0px 0px; }

    #container-boxen { grid-template-columns: 1fr 1fr; }
    .box .moduletable,
    .box .moduletable .mod-custom { height: 100%; }
    .box .moduletable .mod-custom { display: flex; flex-wrap: wrap; flex-direction: column; justify-content: space-between; }
    .box .moduletable .mod-custom p:last-child { margin-top: auto; }

    #box2 { border-top: 0px solid var(--hellblau); border-bottom: 0px solid var(--hellblau); border-left: 1px solid var(--hellblau); }
    #box3 { border-top: 1px solid var(--hellblau); border-bottom: 0px solid var(--hellblau); }
    #box4 { border-top: 1px solid var(--hellblau); border-left: 1px solid var(--hellblau); }

    #zitat { margin: 0px auto; width: 600px; padding: 10px 0px 0px 0px; height: 42px; box-sizing: border-box; }

    #footer { margin: 0px auto; width: 600px; padding: 60px 0px; }
    #hunde { width: 200px; right: 50px; }
    #wasserzeichen { font-size: 15px; bottom: 15px; right: 20px; }

    #bottom { margin: 0px auto; width: 600px; padding: 10px 0px; }

}



@media(min-width:1020px)
{
    #header { width: 900px; padding: 40px 0px 0px 0px; gap: 20px; }
    #logo { width: 150px; }
    #claim { font-size: 20px; padding: 0px 0px 15px 0px; line-height: 150%; }

    #menu { width: 900px; }

    #icons { top: 252px; }

    .about { grid-template-columns: 1fr 1fr; }
    .about.wf-columns { gap: 50px; } 

    #content { padding: 175px 0px 0px 0px; }
    #text { width: 900px; padding: 70px 0px; }
    .com-content-category-blog { gap: 70px; }

    .items-leading .blog-item { gap: 50px; }

    .contact { gap: 50px; }
    .kursdetails .mod-list { grid-template-columns: 1fr 1fr; }
    .kursdetails .mod-list li:nth-child(1) { border-bottom: 0px; grid-column: 1 / -1; }
    .kursdetails .mod-list li:nth-child(2) { border-bottom: 0px; border-right: 0px; }
    .kursdetails .mod-list li:nth-child(3) { border-bottom: 0px; }
    .kursdetails .mod-list li:nth-child(4) { border-bottom: 1px solid var(--hellblau); border-right: 0px; }
    .kursdetails .mod-articles-item-content { padding: 40px 40px 30px 40px; }

    #zitat { width: 900px; }

    #footer { width: 900px; grid-template-columns: 1fr 2fr; gap: 50px; }

    #bottom { width: 900px; }

    h1 { margin: 0px 0px 30px 0px; font-size: 26px; } 
    h2 { font-size: 26px; } 
    h3 { font-size: 22px; }
    h4 { font-size: 22px; }
}



@media(min-width:1320px)
{
    #header { width: 1200px; }
    #menu { width: 1200px; }
    #icons { top: 262px; }

    #text { width: 1200px; padding: 80px 0px; }
    .com-content-category-blog { gap: 60px; }
    
    #zitat { width: 1200px; }

    #footer { width: 1200px; }
    #hunde { right: 100px; }

    .about.wf-columns { gap: 100px; } 
    .kursdetails .mod-articles-item-content { padding: 50px 50px 40px 50px; }

    #bottom { width: 1200px; }

    #container-boxen { grid-template-columns: 1fr 1fr 1fr 1fr; }
    .box { padding: 50px; }
    #box2 { border-right: 1px solid var(--hellblau); }
    #box3 { border-right: 0px solid var(--hellblau); border-top: 0px solid var(--hellblau); }
    #box4 { border-top: 0px solid var(--hellblau); border-top: 0px solid var(--hellblau); }
}