/* ------------------------------------------------- */
/* Individualisierendes CSS für Single Template Site */
/* (c) 2025 Wolfgang Schütte, büro punkt.            */
/* ------------------------------------------------- */

body { background-color: #36653b; font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif; font-weight: 400; font-size: 20px; line-height: 30px; letter-spacing: -0px; color: #565656; min-width: 320px; }
html { background-color: #36653b; }
h1,h2 { text-transform: uppercase; font-size: 38px; line-height: 44px; font-weight: 400; color: #36653b; margin-bottom: 25px; position: relative; left: -2px; letter-spacing: 0px; }
h1 b, h2 b { font-weight: bold; letter-spacing: 0px; }
h3 { text-transform: none; font-size: 38px; line-height: 44px; font-weight: 400; color: #565656; margin-bottom: 25px; position: relative; left: -2px; letter-spacing: 0px;  }
h4 { text-transform: uppercase; font-size: 28px; line-height: 34px; color: #36653b; font-weight: 400; margin: 0px 0px 0px 0px; }
h5 { font-size: 25px; line-height: 33px; color: #36653b; font-weight: 200; text-transform: uppercase; }
h6 { font-size: 14px; font-weight: 200; margin: -10px 0px 0px 0px; line-height: 20px; }

.termin { font-weight:bold; color: #007658; position: relative; left: -16px; }
.glink { font-size: 24px; line-height: 34px; color: #a4b2db; font-weight: 200; text-transform: uppercase; }
.glink:hover, .glink.aktiv { color: #36653b;}

#alternative { display: none; }
   
a { color: black; }
         
#content { background-color: white; padding-bottom: 100px; box-sizing: border-box; -moz-box-sizing: border-box; }
#content a { color: #36653b; }
#content a:hover { text-decoration: underline; }
#kopfzeile { background-color: #ffffff; height: 205px; padding: 28px 0px 20px 0px; top: 20px; border-color: #36653b; }

.wrapper { background-color: white; margin-top: 0px; }
#kopfzeile .innerwrapper .menu { text-align:left; height: auto; font-weight: 400; font-size: 20px; line-height: 38px; text-transform: uppercase; color: #000000; width: 100%; letter-spacing: 0px; bottom: -15px; left: -5px; padding: 0px 0px 0px 0px; }
#kopfzeile .innerwrapper .menu ul { margin-right: 18px; }
#kopfzeile .innerwrapper .menu ul li { margin-left: 40px; }
#kopfzeile .innerwrapper .mobilemenu { font-weight: 400; font-size: 20px; margin: 0px; line-height: 20px; text-transform: uppercase; color: #000000; letter-spacing: 0px; border-style: solid; border-width: 1px 1px 1px 0px; border-color: white; background-color: #36653b; position: absolute; width: 285px; }
#kopfzeile .innerwrapper .mobilemenu ul li { margin: 15px 0px 15px 28px; }
#kopfzeile .innerwrapper .mobilemenu a:link, #kopfzeile .innerwrapper .mobilemenu a:visited { color: white !important; }
#kopfzeile .innerwrapper .mobilemenu a:hover, #kopfzeile .innerwrapper .mobilemenu a.aktiv { color: rgba(255,255,255,0.5) !important; }
#kopfzeile .innerwrapper .logo { max-width: 550px; height: auto; top: inherit; bottom: 38px; left: 20px; position: absolute; }
#kopfzeile .innerwrapper .logo_right { max-width: 200px; height: auto; top: inherit; bottom: 38px; right: 14px; position: absolute; }

#logoinvertmiddle { width: 100%; max-width: 350px; margin: 0 auto; margin-top: 15px; }
#logoinvertright { width: 100%; max-width: 230px; }

#kopfzeile .innerwrapper .slogan { display: none; }

#kopfzeile .innerwrapper .imprint { font-size: 14px; top: -25px; }

#kopfzeile a { color: #000000; }
#kopfzeile a:hover { color: #36653b;}
#kopfzeile a.aktiv, #kopfzeile .aktiv { color: #36653b; }
#footer { color: white; background-color: #36653b; padding: 40px 0px 0px 0px; font-weight: 500; font-size: 16px; line-height: 22px; box-sizing: border-box; -moz-box-sizing: border-box; }
#footer .innerwrapper { text-align: left; }
#footer a .aktiv { color: white !important; }

.platzhalter { background-color: #eef5fd; height: 100%; }

.modul_bildleiste { width: 100%; padding: 0px; background-color: #d0d1d1; margin-top: 0px; margin-bottom: 81px; height: 520px; }
.leistenbild {width: 100%; max-width: 100%; left: 0px; }
.modul_fliesstext { padding: 0px 0px 20px 0px; background-color: #ffffff;  }
.modul_slider { padding: 0px 0px 20px 0px; background-color: #ffffff; margin: 0px; }
.modul_kontakt { padding: 0px 0px 50px 0px; background-color: #ffffff; margin: 0px; }
.modul_bildergalerie { padding: 0px 0px 20px 0px; background-color: #ffffff; margin: 0px; }
.modul_bildteppich { width: 100%; overflow-x: hidden; }

.modul_bildleiste .textbox h3 { color: black; letter-spacing: 0px; text-transform: uppercase; }
.modul_bildleiste:first-of-type { margin-top: -200px; height: 735px; }

.bild { margin-top: 10px; border-radius: 0px; }
.bildbox { margin-top: 10px; }
.bildbox { height: 320px !important; }

.tabelle.dreispaltig .bildbox { border-radius: 0px 0px 0px 0px; }
.tabelle.zweispaltig .bildbox { border-radius: 0px 0px 0px 0px; height: 480px !important;}
.tabelle.zweispaltiggrossklein .bildbox { border-radius: 0px 0px 0px 0px; }
.tabelle.zweispaltigkleingross .bildbox { border-radius: 0px 0px 0px 0px; }

#footer .tabelle { }
#footer .spalte.rechts { display: table-cell; text-align: right; padding-left: 10px; width: 250px; vertical-align: bottom; }
#footer .spalte.links { display: table-cell; text-align: left; padding-right: 10px; vertical-align: bottom; }
#footer .spalte.mitte { display: table-cell; text-align: center; width: 370px; }

#footer a:link, #footer a:visited { color: white; opacity: 1 }
#footer .copyright { display: inline-block; position: relative; top: -5px; }
#footer .copyright ul { margin-left: -50px; }
#footer a:hover, #footer a:active { color: rgba(255,255,255,0.5) !important; }
#footer .partner { display: inline-block; text-transform: uppercase; }

.fancyinput, .fancytextarea, .fancyselect { font-size: 16px; line-height: 24px; font-weight: 200; }

.fancybutton { color: #36653b; border-color: #36653b; font-size: 16px; line-height: 24px; font-weight: 400; }
.fancybutton:hover { background-color: #36653b; color: white; }

#cookie_hinweis .fancybutton { color: white; border-color: white; font-size: 16px; line-height: 24px; font-weight: 400; }
#cookie_hinweis .fancybutton:hover { background-color: white; color: #36653b; }

#openmenubutton:hover { color: #36653b; cursor: pointer; }
#openmenubutton .aktiv a { color: #36653b; }
.error { color: #e62a3f; }

#cookie_hinweis { color: white; background-color: #8eaa8b; }
            
.abschnittstrenner hr { background-color: #36653b;}

.modul_kontakt { color: #36653b; }

.top { margin: 0px auto; position: relative; top: -60px; }



.slick-dots li button { border-color: #36653b; opacity: 0.6; }
.slick-dots li button:hover, .slick-dots li.slick-active button { 
        background-color:  #36653b; border-color:  #36653b;
        opacity: 0.3;
}

.fadeleft { display: none; }
.faderight { display: none; }

.platzhalter {
    background-color: #dfdfdf;
}

@media (max-width: 1100px) {
    #kopfzeile .innerwrapper .logo { right: 20px; }
}

@media (max-width: 1080px) {
    .modul_bildleiste .textbox {
        margin-left: 0px; padding-left: 20px;
    }
}

@media (max-width: 1024px) {
    #logoinvertmiddle { position: relative; left: 90px; }
}

@media (max-width: 970px) {
    #kopfzeile .innerwrapper .menu { letter-spacing:-0.5px; }
}

@media (max-width: 925px) {
    #kopfzeile .innerwrapper .menu { letter-spacing:-1px; }
    
}

@media (max-width: 890px) {
    #kopfzeile .innerwrapper .menu { letter-spacing:-0.5px; font-size: 18px; }
    #logoinvertmiddle { position: relative; left: 250px; }
}

@media (max-width: 840px) {
    #kopfzeile .innerwrapper .menu { letter-spacing:-0.5px; font-size: 18px; }
    #kopfzeile .innerwrapper .menu ul li { margin-left: 29px; }
    #kopfzeile .innerwrapper .menu ul { margin-left: 10px; }
    #kopfzeile .innerwrapper .logo { max-width: 500px; }
}

@media (max-width: 800px) {
    .tabelle.dreispaltig, .tabelle.dreispaltig .zeile, .tabelle.dreispaltig .spalte { display: block; width: 100%; }  
    .break { display: none; }
}

@media (max-width: 799px) {
    #kopfzeile .innerwrapper .menu { letter-spacing:-1px; font-size: 18px; }
}

@media (max-width: 775px) {
    #logoinvert { width: 100%; max-width: 275px; }
    #kopfzeile .innerwrapper .menu ul li { margin-left: 20px; }
    .termin { left: -6px; }
    #kopfzeile .innerwrapper .logo { max-width: 420px; }
}

@media (max-width: 750px) {
    .break { display: block; }
    #kopfzeile { max-height: 200px; }
    #content { padding-top: 150px; }
    .modul_bildleiste { height: 450px; }
    .tabelle.zweispaltigkleingross, .tabelle.zweispaltigkleingross .zeile, .tabelle.zweispaltigkleingross .spalte { display: block; width: 100% !important; }  
    #kopfzeile .innerwrapper .menu { letter-spacing:-0.5px; font-size: 16px; } 
}

@media (max-width: 720px) {
    #logoinvertmiddle { left: inherit; }
    #footer .tabelle, #mapwrap .tabelle { display: table !important;}
    #footer .zeile, #mapwrap .zeile { display: table-row !important;}
    #footer .spalte, #mapwrap .spalte { display: table-cell !important;}
    .tabelle.dreispaltig .spalte, .tabelle.zweispaltig .spalte, .tabelle.zweispaltiggrossklein .spalte, .tabelle.zweispaltigkleingross .spalte, .tabelle.einspaltig .spalte { margin-bottom: 0px; }
    #footer .copyright  { text-align: center; width: 100%; padding: 0px 0px 0px 22px; } 
    #footer .tabelle { display: block !important;}
    #footer .zeile { display: block !important;}
    #footer .spalte.links { display: block !important;}
    #footer .spalte.rechts { display: none !important;}
    #footer .spalte.mitte { display: none !important;}
    #footer .partner { width: 100%; text-align: center; }
    #logoinvert { width: 100%; max-width: 300px; position: relative; top:-30px; margin-left: -10px;}
    .top { top: 0px; }
    #alternative { display: block; margin-top: 20px; }
    #logoinvertmiddle { display: block; width: 100%; max-width: 480px; margin: 0 auto; margin-bottom: 40px; }
    #logoinvertright { display: block; width: 100%; max-width: 223px; margin: 0 auto; margin-bottom: 15px; }
}

@media (max-width: 675px) {
    #kopfzeile .innerwrapper .imprint { text-align: left; padding-left: 0px; right: inherit; left: -20px; }
    #kopfzeile .innerwrapper .logo_right { max-width: 150px; bottom: inherit; top: -15px;  }
    #kopfzeile { height: 145px; }
    #kopfzeile .innerwrapper .menu { text-align: right; bottom: inherit; top: 87px; }
    #kopfzeile .innerwrapper .logo { bottom: -3px; }
    #openmenubutton { bottom: 16px; right: 25px; }
    #kopfzeile .innerwrapper .mobilemenu { top: 116px; left: 0px; }
    #logoinvert { width: 100%; max-width: 230px; margin-top: 30px; }
    .top { margin-right: -50px;  margin: 0px auto; }
    .modul_bildleiste { height: 400px; }
    .termin { position: relative; top: -16px; left: 345px; font-size:20px; }
    #kopfzeile { top: 0px; }
}

@media (max-width: 625px) {
    #kopfzeile .innerwrapper .logo { max-width: 355px; }
    #kopfzeile .innerwrapper .logo_right { max-width: 125px; }
    .termin { top: -25px; left: 280px; font-size:20px; }
    #kopfzeile { height: 135px; }
    #openmenubutton { bottom: 26px; }
    #kopfzeile .innerwrapper .mobilemenu { top: 106px; left: 0px; }
}

@media (max-width: 600px) {
    #content { padding-top: 150px; }
    .tabelle.dreispaltig .spalte, .tabelle.zweispaltig .spalte, .tabelle.zweispaltiggrossklein .spalte, .tabelle.zweispaltigkleingross .spalte, .tabelle.einspaltig .spalte { margin-bottom: 0px; }
    #logoinvertmiddle { display: block; width: 100%; max-width: 400px; margin: 0 auto; margin-bottom: 40px; }
    #logoinvertright { display: block; width: 100%; max-width: 185px; margin: 0 auto; margin-bottom: 15px; }
}

@media (max-width: 530px) {
    #kopfzeile .innerwrapper .logo { max-width: 300px; }
    #kopfzeile { height: 120px; }
    .termin { top: -41px; left: 225px;  }
    #kopfzeile .innerwrapper .logo_right { max-width: 115px; }
    #openmenubutton { bottom: 42px; right: 23px; }
    #kopfzeile .innerwrapper .mobilemenu { top: 91px; left: 0px; }
}

@media (max-width: 500px) {
    .modul_bildleiste { height: 300px; margin-top: 0px;}
    .modul_bildleiste .textbox { padding-right: 20px; width: 100%; }
    .modul_bildleiste .textbox h3 { letter-spacing: 0px; font-size: 30px; line-height: 38px; }
}

@media (max-width: 475px) {
    #kopfzeile .innerwrapper .imprint { font-size: 12px; letter-spacing: -0.5px; }
    #kopfzeile .innerwrapper .imprint ul li { margin-right: 10px;}
    #kopfzeile .innerwrapper .logo { max-width: 235px; bottom: -7px; }
    #kopfzeile { height: 95px; }
    #kopfzeile .innerwrapper .mobilemenu { top: 66px; left: 0px; }
    .termin { top: -58.5px; left: 183px; font-size: 15px; letter-spacing: -0.5px; }
    #kopfzeile .innerwrapper .logo_right { max-width: 90px; top: -20px; }
    #openmenubutton { bottom: 62px; right: 23px; }
    #logoinvertmiddle { display: block; width: 100%; max-width: 300px; margin: 0 auto; margin-bottom: 30px; }
    #logoinvertright { display: block; width: 100%; max-width: 140px; margin: 0 auto; margin-bottom: 10px; }
}

@media (max-width: 400px) {
    #kopfzeile .innerwrapper { padding: 0px 10px 0px 10px;}
    #kopfzeile .innerwrapper .imprint { width: 100%; text-align: center; font-size: 12px; letter-spacing: -0.2px; padding: 0px; margin: 0px; right: inherit; left: inherit; position: static; margin-top: -25px; }
    #kopfzeile .innerwrapper .imprint ul { margin-left: -30px; }
    #kopfzeile .innerwrapper .logo { width: 100%; max-width: 300px; height: auto; bottom: inherit; right: inherit; margin: 0 auto; margin-top: 3px; position: static; padding: 0px 10px 0px 10px; }
    #kopfzeile .innerwrapper .logo_right { position: absolute; max-width: 91px; left: 50%; top: 80px; margin-left: 52px; }
    .termin { position: absolute; left: 50%; margin-left: 64px !important; font-size: 18px; top: -65px; display: inline; }
    #kopfzeile { height: 167px; position: absolute !important; width: 100%; }
    #kopfzeile .innerwrapper .menu { top: 107px; bottom: inherit; text-align: center; padding: 0px; margin: 0px; width: 100%; }
    #openmenubutton { bottom: inherit; right: inherit; left: -113px; top: -9px; position: relative; }
    #kopfzeile .innerwrapper .mobilemenu { top: 138px; width: 100%; border-width: 0px 0px 1px 0px; text-align: center; padding: 0px; }
    #kopfzeile .innerwrapper .mobilemenu ul { margin-left: -25px; }
    
    .modul_bildleiste { height: 300px !important; margin-top: 17px !important;}
    .modul_bildleiste .textbox h3 { letter-spacing: 0px; font-size: 26px; line-height: 34px; }
    .modul_kontakt a { letter-spacing: -0.5px;}
    h4 { letter-spacing: -0.5px; }
    h1,h2 { letter-spacing: -0.5px; }
}

@media (max-width: 320px) {
    #content { max-width: 320px; }
}