/* ------------------------------------------------- */
/* Individualisierendes CSS für Single Template Site */
/* (c) 2025 Wolfgang Schütte                         */
/* ------------------------------------------------- */

body { background-color: #b2322b; font-family: 'Roboto', Arial, Helvetica, sans-serif; font-weight: 400; font-size: 20px; line-height: 30px; letter-spacing: -0px; color: #000000; min-width: 320px; padding-top: 200px; }
html { background-color: #b2322b; }


h1 { text-transform: uppercase; font-family: 'Red Hat Display'; font-size: 48px; line-height: 54px; font-weight: 900; color: #b2322b; margin-bottom: 50px; position: relative; left: -2px; letter-spacing: 1px; text-shadow: 3px 3px 0px rgb(0,0,0); }
h1 small { text-shadow: none; color: black; font-size: 34px; line-height: 40px; }

h2 { text-transform: uppercase; font-family: 'Red Hat Display'; font-size: 38px; line-height: 44px; font-weight: 900; color: #000000; margin-bottom: 25px; position: relative; left: -2px; letter-spacing: 0px; }
h1 b, h2 b { font-weight: bold; letter-spacing: 0px; }

h2 { text-transform: none; font-family: 'Red Hat Display'; font-size: 38px; line-height: 44px; font-weight: 900; color: #000000; margin-bottom: 25px; position: relative; left: -2px; letter-spacing: 0px; }
h3 { text-transform: none; font-family: 'Red Hat Display'; font-size: 28px; line-height: 34px; color: #000000; font-weight: 800; margin: 0px 0px 0px 0px; }
h4 { text-transform: none; font-family: 'Red Hat Display'; font-size: 24px; line-height: 32px; color: #000000; font-weight: 800; margin: 0px 0px 0px 0px; }
h5 { font-size: 25px; line-height: 33px; color: #000000; font-weight: 200; background-color: yellow; display: block; width: 180px; padding: 10px 20px 10px 20px; margin: 0 auto; border-radius: 64px; margin-bottom: 20px; }

h6 { font-size: 14px; font-weight: 200; margin: -10px 0px 0px 0px; line-height: 20px; }

h4 small { font-weight: 600; }

.glink { font-size: 24px; line-height: 34px; font-weight: 200; text-transform: uppercase; text-decoration: underline; }
.glink:hover, .glink.aktiv { color: #706F6F;}
 
a { color: black; }
         
#content { background-color: white; margin-top: -100px; padding-bottom: 100px; box-sizing: border-box; -moz-box-sizing: border-box; }
#content a { color: #b2322b; opacity: 0.6; }
#content a:hover { text-decoration: underline; opacity: 1; }
#kopfzeile { background-color: #b2322b; height: 130px; padding: 28px 0px 20px 0px; top: 0px; box-sizing: border-box; -moz-box-sizing: border-box; max-height: 130px; border-width: 0px 0px 1.5px 0px; border-style: solid; border-color: white; box-shadow: 0px 6px 0px 0px #b2322b, 0px 6px 15px 4px white; }

.wrapper { background-color: white; margin-top: 0px; }
#kopfzeile .innerwrapper { max-width: inherit;}
#kopfzeile .innerwrapper .menu { text-align:left; height: auto; font-weight: 700; font-size: 20px; line-height: 38px; text-transform: uppercase; color: white; width: 100%; letter-spacing: 0px; bottom: 0px; left: 0px; padding: 0px 0px 0px 0px; }
#kopfzeile .innerwrapper .menu ul { margin-right: 18px; }
#kopfzeile .innerwrapper .menu ul li { margin-left: 30px; }
#kopfzeile .innerwrapper .mobilemenu { font-weight: 400; font-size: 20px; margin: 0px; line-height: 20px; text-transform: uppercase; color: white; letter-spacing: 0px; border-style: solid; border-width: 1px; border-color: white; background-color: #706F6F; position: absolute; width: 240px; }
#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.7) !important; }
#logo { max-width: 320px; height: auto; top: inherit; top: 0px; right: 30px; position: absolute; }
.logo { width: 100%; max-width: 320px; display: inherit; top: 0px; margin: 0px; }
#kopfzeile .innerwrapper .slogan { display: none; }

#kopfzeile .innerwrapper .imprint { display: none }

#kopfzeile a { color: rgba(255,255,255,1); }
#kopfzeile a:hover { color: rgba(255,255,255,0.7);}
#kopfzeile a.aktiv, #kopfzeile .aktiv { color: gba(255,255,255,0.7); }
#footer { height: auto; color: white; background-color: #b2322b; padding: 50px 0px 0px 0px; font-weight: 500; font-size: 16px; line-height: 22px; box-sizing: border-box; -moz-box-sizing: border-box; margin: 0px 0px 0px 0px !important; border-width: 1.5px 0px 0px 0px; border-style: solid; border-color: white; box-shadow: 0px -6px 0px 0px #b2322b;}
#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;   }
.modul_slider { padding: 0px 0px 20px 0px;  margin: 0px; }
.modul_kontakt { padding: 0px 0px 50px 0px; margin: 0px; }
.modul_bildergalerie { padding: 0px 0px 20px 0px; margin: 0px; }
.modul_bildteppich { width: 100%; overflow-x: hidden; }

.hintergrund { background-color: #c5c4c4; }

.modul_bildleiste .textbox { background-color: transparent }
.modul_bildleiste .textbox h3 { color: #b2322b; text-shadow: 2px 2px 0px rgba(0,0,0,1); letter-spacing: 0px; text-transform: uppercase; }
.modul_bildleiste:first-of-type { margin-top: -175px; height: 520px; }

.modul_bildleiste .textbox h3 small {
    display: inline-block; margin-bottom: 0px;
}

#content sub { display: block; margin-bottom: -8px;}

.bild { margin-top: 10px; border-radius: 0px; margin-bottom: 0px !important; display: block;}
.bildbox { margin-top: 10px; margin-bottom: -30px; }
.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; }

.tabelle.dreispaltig .tabelle { height: auto;}

#footer .tabelle { }
#footer .spalte.rechts { display: table-cell; text-align: left; font-size: 24px; line-height: 30px; padding-left: 10px; width: 240px; 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: 0.5; }
#footer .copyright { display: inline-block; position: relative; width: 100%; text-align: center; margin-top: -50px; margin-bottom: 75px; font-weight: normal;}
#footer .copyright ul { margin-left: -50px; font-weight: 800; }
#footer a:hover, #footer a:active { opacity: 1 !important; }
#footer .partner { display: inline-block; text-transform: none; width: 100%; max-width: 100%; font-weight: normal; margin-bottom: 15px;}

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

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

#cookie_hinweis .fancybutton { color: #706F6F; border-color: #706F6F; font-size: 16px; line-height: 24px; font-weight: 400; }
#cookie_hinweis .fancybutton:hover { background-color: #706F6F; color: #C5C4C4; }

#openmenubutton { color: white; text-transform: uppercase; }
#openmenubutton:hover { opacity: 0.7; cursor: pointer; }
#openmenubutton .aktiv a { opacity: 0.7; }

.error { color: #e62a3f; }

#cookie_hinweis { color: #706F6F; background-color: #C5C4C4; }
            
.abschnittstrenner hr { background-color: #b2322b; width: 65%; margin: 0 auto; height: 1.5px;}

.modul_kontakt { color: #706F6F; }

.top { margin: 0px auto; margin-top: -65px; }

.sonderabstand { display: block; height: 0px; margin-top: -30px; }

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

.tabelle.dreispaltig .tabelle ul li {
    margin-bottom: 5px; font-size: 16px; line-height: 20px; background-position: 0px 5px !important;
}

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

.platzhalter {
    background-color: white;
    border-style: solid; border-width: 1px;
    border-color: #6f706f;
}

nowrap { white-space: nowrap; }

@media (max-width: 1280px) {
    #content { margin-top: -150px; }
}

@media (max-width: 1100px) {
    #logo { right: 20px; }
    #content { margin-top: -200px; }
}

@media (max-width: 870px) {
    #kopfzeile .innerwrapper .menu { display: none; }
    #kopfzeile .innerwrapper .mobilemenu { top: 126px; }
    #logo { max-width: 320px; height: auto; top: inherit; right: inherit; left: 50%; margin-left: -160px; position: absolute; }
}

@media (max-width: 830px) {
    .top { margin-right: -50px;  margin: 0px auto; }
    .modul_bildleiste { height: 450px;}
    #kopfzeile { top: 0px;}
    .modul_bildleiste:first-of-type { margin-top: -245px !important; }
    
}

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


@media (max-width: 750px) {
    .break { display: block; }
    .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) {
    #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; }
    .top { top: 0px; }
}


@media (max-width: 600px) {
    .tabelle.dreispaltig .spalte, .tabelle.zweispaltig .spalte, .tabelle.zweispaltiggrossklein .spalte, .tabelle.zweispaltigkleingross .spalte, .tabelle.einspaltig .spalte { margin-bottom: 0px; }
    
}

@media (max-width: 520px) {
    #kopfzeile .imprint { width: 220px !important; }
}

@media (max-width: 500px) {
    #kopfzeile .innerwrapper { padding: 0px 10px 0px 10px;}
    #kopfzeile .innerwrapper .imprint { width: 100% !important; text-align: center; padding: 0px; margin: 0px; right: inherit; left: inherit; position: static; margin-top: -25px; }
    #kopfzeile .innerwrapper .imprint ul { margin-left: -30px; }
    #logo { width: 300px !important; max-width: 300px; height: 100%; bottom: inherit; right: inherit; margin: 0 auto; margin-top: 3px; position: static; padding: 0px 10px 0px 10px; }
    #kopfzeile { height: 208px; position: absolute !important; width: 100%; }
    #kopfzeile .innerwrapper .menu { top: 107px; bottom: inherit; text-align: center; padding: 0px; margin: 0px; width: 100%; }
    #kopfzeile .innerwrapper .mobilemenu { top: 180px; width: 100%; border-width: 1px 0px 1px 0px; text-align: center; padding: 0px; margin: 0px; right: 0px; }
    #kopfzeile .innerwrapper .mobilemenu ul { margin-left: -25px; }
}


@media (max-width: 400px) {
    .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; }
}