/* ============================================================
   CDU Baltmannsweiler – schlankes Frontend 2026
   Nachbau der Optik des alten 585-square-Themes, ohne Bootstrap/jQuery.
   Design-Tokens (aus altem design.css):
   - monochrom: Weiss #fff, Anthrazit #212324 / #111115, Footer #09090b, Grau #707070/#96969c
   - Schrift: Roboto (Body, 300) + Roboto Slab (Headlines, lokal, DSGVO)
   - Header weiss + sticky (.fixedTop), Logo links, Navi rechts (uppercase)
   - Grosser Bild-Hero mit 54px-Headline, dunkler Footer
   Eingebunden ueber tl_layout id6 head. Cache-Buster ?v= bei jeder Aenderung hochzaehlen.
   ============================================================ */

/* ---------- Fonts (lokal aus files/585-square/fonts/) ---------- */
@font-face{font-family:'Roboto Slab';font-weight:300;font-style:normal;font-display:swap;
  src:url('../fonts/roboto/RobotoSlab-Light.ttf') format('truetype');}
@font-face{font-family:'Roboto Slab';font-weight:400;font-style:normal;font-display:swap;
  src:url('../fonts/roboto/RobotoSlab-Regular.ttf') format('truetype');}
@font-face{font-family:'Roboto Slab';font-weight:600;font-style:normal;font-display:swap;
  src:url('../fonts/roboto/RobotoSlab-SemiBold.ttf') format('truetype');}
@font-face{font-family:'Roboto Slab';font-weight:700;font-style:normal;font-display:swap;
  src:url('../fonts/roboto/RobotoSlab-Bold.ttf') format('truetype');}

:root{
  --anthrazit:#212324; --schwarz:#111115; --footer:#09090b;
  --grau:#707070; --hellgrau:#e8e8e7; --linie:rgba(0,0,0,.12);
  --weiss:#fff; --text:#1a1a1a; --orange:#f68b1f;
  --container:1170px; --serif:'Roboto Slab',Georgia,serif;
  --sans:'Segoe UI',Roboto,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
}

/* ---------- Reset / Basis ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.6;
  color:var(--text);background:#fff;overflow-x:hidden;}
img{max-width:100%;height:auto;display:block;}
a{color:var(--anthrazit);text-decoration:none;transition:opacity .25s,color .25s;}
a:hover{opacity:.65;}
h1,h2,h3,h4,h5,h6{font-family:var(--serif);margin:0 0 .5em;line-height:1.2;color:var(--anthrazit);}
h1{font-size:36px;font-weight:600;}
h2{font-size:23px;font-weight:600;}
h3{font-size:21px;font-weight:400;}
h4{font-size:16px;text-transform:uppercase;font-weight:600;letter-spacing:.03em;}
p{margin:0 0 1em;}
ul,ol{margin:0 0 1em;padding-left:1.2em;}
hr{border:0;border-top:1px solid var(--linie);margin:2.5em 0;}
/* Contao Screenreader-/Skip-Links unsichtbar (framework-CSS ist entfernt) */
.invisible{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}

/* ---------- leichtes Grid (ersetzt Bootstrap-Grid, mobile-first) ----------
   flex-basis + max-width; spezifische col-Regeln stehen NACH der Default-Regel
   (gleiche Spezifitaet -> spaetere gewinnt), Media-Queries in Reihenfolge xs<sm<lg. */
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 22px;}
.row{display:flex;flex-wrap:wrap;margin:0 -15px;}
[class*="col-"]{padding:0 15px;box-sizing:border-box;flex:0 0 100%;max-width:100%;}
.col-xs-1{flex-basis:8.333%;max-width:8.333%;} .col-xs-2{flex-basis:16.666%;max-width:16.666%;}
.col-xs-3{flex-basis:25%;max-width:25%;} .col-xs-4{flex-basis:33.333%;max-width:33.333%;}
.col-xs-5{flex-basis:41.666%;max-width:41.666%;} .col-xs-6{flex-basis:50%;max-width:50%;}
.col-xs-8{flex-basis:66.666%;max-width:66.666%;} .col-xs-10{flex-basis:83.333%;max-width:83.333%;}
.col-xs-12{flex-basis:100%;max-width:100%;}
@media(min-width:768px){
  .col-sm-3{flex-basis:25%;max-width:25%;} .col-sm-4{flex-basis:33.333%;max-width:33.333%;}
  .col-sm-5{flex-basis:41.666%;max-width:41.666%;} .col-sm-6{flex-basis:50%;max-width:50%;}
  .col-sm-7{flex-basis:58.333%;max-width:58.333%;} .col-sm-8{flex-basis:66.666%;max-width:66.666%;}
  .col-sm-12{flex-basis:100%;max-width:100%;}
}
@media(min-width:992px){
  .col-lg-1{flex-basis:8.333%;max-width:8.333%;} .col-lg-2{flex-basis:16.666%;max-width:16.666%;}
  .col-lg-3{flex-basis:25%;max-width:25%;} .col-lg-4{flex-basis:33.333%;max-width:33.333%;}
  .col-lg-5{flex-basis:41.666%;max-width:41.666%;} .col-lg-6{flex-basis:50%;max-width:50%;}
  .col-lg-7{flex-basis:58.333%;max-width:58.333%;} .col-lg-8{flex-basis:66.666%;max-width:66.666%;}
  .col-lg-9{flex-basis:75%;max-width:75%;} .col-lg-10{flex-basis:83.333%;max-width:83.333%;}
  .col-lg-12{flex-basis:100%;max-width:100%;}
}
.clearfix::after{content:"";display:table;clear:both;}
/* Container mit direkten Spalten-Kindern nebeneinander (Team/Bild-Reihen ohne .row-Klasse) */
#main .mod_article:has(> [class*="col-"]),
#main .ce_text:has(> [class*="col-"]),
#main .rte:has(> [class*="col-"]){display:flex;flex-wrap:wrap;margin-left:-15px;margin-right:-15px;}
#main .mod_article:has(> [class*="col-"]) > *:not([class*="col-"]){flex:0 0 100%;max-width:100%;}
/* Bilder fuellen ihre Spaltenbreite */
#main [class*="col-"] figure{display:block;width:100%;margin:0 0 18px;}
#main [class*="col-"] figure>a{display:block;width:100%;}
#main [class*="col-"] img{width:100%;height:auto;}

/* ---------- Header / Topbar (weiss) ----------
   Vorerst im normalen Fluss (der Hero-Slider steckt in der Header-Section -> ein
   fixierter #header waere zu hoch). Mitscrollende Leiste kommt als Verfeinerung. */
#header{position:relative;z-index:100;background:#fff;}
/* Header-Banner-Artikel der Unterseiten (Text) in den Container; Slider bleibt randlos */
#header .inside>.mod_article{max-width:var(--container);margin:0 auto;padding:26px 22px;}
#header .inside>.mod_article:has(.ce_sliderStart){max-width:none;padding:0;}
.topbartop{background:var(--anthrazit);color:rgba(255,255,255,.82);font-size:13px;line-height:1.3;}
.topbartop a{color:#fff;}
.topbartop .container{padding-right:0;}
.topbartop .row{display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;height:46px;}
/* Kinder der Leiste ohne Aussenabstand: .contact-top erbt sonst 22px von .content-text,
   der Button steckt in einem nackten <p> mit 1em – beides drueckt die Inhalte aus der 46px-Zeile */
.topbartop .row>*{margin:0;}
.topbartop .contact-top{flex:1 1 auto;max-width:none;padding:0;}
.topbartop .contact-top .rte{margin:0;}
/* Kontaktzeile als Flex: Icons exakt mittig zum Text (font-size:0-Boxen haben
   keine verlaessliche Baseline -> kein vertical-align-Gefrickel) */
.topbartop .contact-top p{margin:0;display:flex;align-items:center;height:46px;
  line-height:normal;white-space:nowrap;}
/* oranger "Kontaktieren Sie uns"-Button, rechts bündig */
.topbartop .btn-top{display:flex;align-items:center;height:46px;background:var(--orange);color:#fff;
  padding:0 22px;text-transform:uppercase;font-size:13px;font-weight:600;letter-spacing:.02em;white-space:nowrap;
  transform:none!important;animation:none!important;}
.topbartop .btn-top:hover{background:#111;opacity:1;}
/* Kontakt-Icons oben UND im Footer (FontAwesome-Ersatz als weisse SVGs, ohne FA-Font).
   Ein einziger Regelblock; die fruehere Doppel-Implementierung (.topbartop .fa::before)
   zeichnete das Icon zweimal uebereinander. */
.contact-top .fa,#footer .fa{display:inline-block;width:15px;height:14px;font-size:0;font-style:normal;
  vertical-align:-2px;margin-right:5px;background:no-repeat center/contain;}
.contact-top .fa-phone,#footer .fa-phone{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23fff' d='M493.4 24.6l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6 49.6c-36 76.7-98.9 140.5-177.2 177.2l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48C3.9 366.5-2 378.1.6 389.4l24 104C27.1 504.2 36.7 512 48 512c256.1 0 464-207.5 464-464 0-11.2-7.7-20.9-18.6-23.4z'/%3E%3C/svg%3E");}
.contact-top .fa-envelope-o,#footer .fa-envelope-o{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23fff' d='M464 64H48C21.5 64 0 85.5 0 112v288c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zm0 48v40.8c-22.4 18.3-58.2 46.7-134.6 106.5-16.8 13.2-50.2 45.1-73.4 44.7-23.2.4-56.6-31.5-73.4-44.7C106.2 199.5 70.4 171.1 48 152.8V112h416zM48 400V214.4c22.9 18.3 55.4 43.9 104.9 82.6 21.9 17.2 60.1 55.2 103.1 55 42.7.2 80.5-37.2 103.1-54.9 49.5-38.8 82-64.4 104.9-82.7V400H48z'/%3E%3C/svg%3E");}
.topbar{background:#fff;box-shadow:0 4px 12px -8px rgba(0,0,0,.25);}
.topbar .row{align-items:center;flex-wrap:wrap;}
/* Logo oben links, nur so breit wie noetig (Grid-Spalte ueberschreiben) */
.logo{flex:0 0 auto;max-width:none;padding:12px 0;}
.logo img{max-height:56px;width:auto;}
/* Such-Overlay im Kopf ausblenden (war jQuery-Klick-Overlay) */
.overlay-search,.topbar .ce_form{display:none;}
/* Hauptnavigation: eigene Zeile unter dem Logo, volle Breite, rechtsbuendig (wie Original) */
.mainnavi{flex:0 0 100%;max-width:100%;}
.mainnavi .level_1{list-style:none;margin:0;padding:0 0 6px;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;}
.mainnavi .level_1>li{position:relative;}
.mainnavi .level_1>li>a,.mainnavi .level_1>li>strong{
  display:block;padding:8px 11px;font-family:var(--serif);font-size:13px;font-weight:400;
  text-transform:uppercase;color:var(--anthrazit);letter-spacing:.01em;white-space:nowrap;}
.mainnavi .level_1>li>strong,.mainnavi .level_1>li>strong.active,.mainnavi .level_1>li>strong.trail,
.mainnavi .level_1>li>a.active,.mainnavi .level_1>li>a.trail{color:var(--orange);}
.mainnavi .level_1>li>a:hover{color:var(--orange);opacity:1;}
/* Untermenue */
.mainnavi .level_2{list-style:none;margin:0;padding:6px 0;position:absolute;top:100%;right:0;left:auto;
  min-width:210px;background:#fff;box-shadow:0 8px 20px -6px rgba(0,0,0,.28);z-index:120;display:none;}
.mainnavi .level_1>li:hover>.level_2,.mainnavi .level_1>li:focus-within>.level_2{display:block;}
.mainnavi .level_2>li>a,.mainnavi .level_2>li>strong{display:block;padding:8px 16px;font-size:14px;text-transform:none;font-family:var(--sans);}
.mainnavi .level_2>li>a:hover{background:#f4f4f2;opacity:1;}

/* Scroll-Zustand: Menuleiste fixiert + kompakt (JS reserviert den Platz am Elternteil) */
body.stuck .topbar{position:fixed;top:0;left:0;right:0;z-index:200;
  box-shadow:0 5px 16px -8px rgba(0,0,0,.4);animation:slideDown .3s ease;}
body.stuck .topbar .logo{padding:6px 0;}
body.stuck .topbar .logo img{max-height:40px;}
@keyframes slideDown{from{transform:translateY(-100%);}to{transform:translateY(0);}}

/* Nach-oben-Pfeil */
.scroll-top-btn{position:fixed;bottom:26px;right:26px;width:48px;height:48px;
  background:var(--orange);color:#fff;border:0;cursor:pointer;z-index:250;
  opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s,background .25s;
  display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.3);}
.scroll-top-btn svg{width:20px;height:20px;fill:#fff;}
body.scrolled .scroll-top-btn{opacity:1;visibility:visible;}
.scroll-top-btn:hover{background:var(--anthrazit);}

/* ---------- Hamburger / Mobile-Overlay ----------
   Markup: <div class="button-menu"><em class="fa fa-navicon"></em></div> (Topbar)
   und im Overlay dasselbe mit em.fa-times. Icons als data-URI-SVG (kein FA-Font). */
.button-menu{display:none;}
.button-menu em{display:block;width:26px;height:22px;font-size:0;line-height:0;background:no-repeat center/contain;}
.button-menu em.fa-navicon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23212324' d='M0 96c0-17.7 14.3-32 32-32h384c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zm0 160c0-17.7 14.3-32 32-32h384c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zm448 160c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32h384c17.7 0 32 14.3 32 32z'/%3E%3C/svg%3E");}
.button-menu em.fa-times{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23ffffff' d='M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3l105.4 105.3c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z'/%3E%3C/svg%3E");}
.overlay-menu{display:none;}

/* ---------- Hero / Slider ----------
   Struktur: .ce_sliderStart .content-text > figure(Bild) + .rte(Text).
   Bild bleibt im Fluss (gibt Hoehe), Text liegt als Overlay darueber. */
.ce_sliderStart,.ce_sliderStart .content-slider,.ce_sliderStart .slider-wrapper,
.ce_sliderStart .content-text{position:relative;}
.ce_sliderStart figure{margin:0;}
.ce_sliderStart figure img{width:100%;height:clamp(300px,46vh,520px);object-fit:cover;display:block;}
.ce_sliderStart .content-text .rte{position:absolute;inset:0;z-index:2;display:flex;
  flex-direction:column;justify-content:center;align-items:flex-start;text-align:left;
  color:#fff;padding:40px max(22px,calc(50vw - 585px));
  background:linear-gradient(90deg,rgba(0,0,0,.62),rgba(0,0,0,.34) 40%,rgba(0,0,0,.06) 62%,transparent 78%);}
.ce_sliderStart .rte *{color:#fff;}
.ce_sliderStart .rte h1,.ce_sliderStart .rte h2,.ce_sliderStart .rte h3,
.ce_sliderStart .rte h4,.ce_sliderStart .rte p{max-width:520px;}
.ce_sliderStart .rte h1{font-size:clamp(28px,4.2vw,48px);font-weight:600;text-transform:uppercase;
  text-shadow:0 2px 12px rgba(0,0,0,.6);margin-bottom:.35em;}
.ce_sliderStart .rte h2,.ce_sliderStart .rte h3,.ce_sliderStart .rte h4{font-weight:400;text-shadow:0 1px 8px rgba(0,0,0,.55);}
.ce_sliderStart .rte p{text-shadow:0 1px 8px rgba(0,0,0,.6);}
/* nur ein Slide -> alte Swipe-Steuerung ausblenden */
.slider-control{display:none;}

/* ---------- Inhalt ---------- */
#main{padding:40px 0 60px;}
#main .inside{max-width:var(--container);margin:0 auto;padding:0 22px;}
/* Headlines generell linksbuendig (Wunsch Nicole) */
#main h1,#main h2,#main h3,#main h4{text-align:left;}
#header .inside>.mod_article,#header .inside>.mod_article *{text-align:left;}
/* Breadcrumb-Zeile ausgeblendet (Wunsch Nicole 03.08.) */
.mod_breadcrumb{display:none;}
.mod_article{margin-bottom:30px;}
.ce_text,.content-text{margin-bottom:22px;}
figure.image_container{margin:0 0 20px;}
/* "Erfahren, kompetent, zuverlaessig"-Kasten rechts neben den Text */
#main img[src*="kreuz_slogan"]{float:right;max-width:300px;margin:2px 0 16px 30px;}
@media(max-width:600px){#main img[src*="kreuz_slogan"]{float:none;margin:0 auto 16px;}}
/* Struktur-Marker (fa-map-marker) als oranges Kaestchen mit weissem Pin (FA-Ersatz) */
#main .fa-map-marker{display:block;width:30px;height:30px;margin:0;flex:0 0 30px;font-size:0;line-height:0;
  background-color:var(--orange);background-repeat:no-repeat;background-position:center;background-size:15px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23ffffff' d='M172.3 501.7C27 291 0 269.4 0 192 0 86 86 0 192 0s192 86 192 192c0 77.4-27 99-172.3 309.7-9.5 13.8-29.9 13.8-39.4 0zM192 272c44.2 0 80-35.8 80-80s-35.8-80-80-80-80 35.8-80 80 35.8 80 80 80z'/%3E%3C/svg%3E");}
#main .rte:has(> p > .fa-map-marker){display:flex;align-items:flex-start;gap:14px;}
#main .rte:has(> p > .fa-map-marker) > p{margin:0;flex:0 0 auto;}

/* Buttons / mehr-Links */
.more a,.back a,a.more,.ce_hyperlink a{display:inline-block;padding:9px 18px;background:var(--anthrazit);
  color:#fff;text-transform:uppercase;font-size:12px;letter-spacing:.04em;}
.more a:hover,a.more:hover{opacity:.8;}

/* ---------- Formulare (Contao-Kern-Markup, z.B. Kontaktformular) ---------- */
#main form .widget{margin:0 0 18px;max-width:560px;}
#main form label{display:block;font-weight:600;font-size:14px;margin-bottom:6px;}
#main form input[type=text],#main form input[type=email],#main form input[type=tel],
#main form input[type=url],#main form input[type=number],#main form select,#main form textarea{
  width:100%;padding:10px 12px;border:1px solid var(--linie);background:#fff;font:inherit;color:var(--text);}
#main form input:focus,#main form select:focus,#main form textarea:focus{
  outline:2px solid var(--orange);outline-offset:0;border-color:var(--orange);}
#main form textarea{min-height:160px;resize:vertical;}
#main form button[type=submit],#main form input[type=submit]{display:inline-block;padding:11px 22px;
  background:var(--anthrazit);color:#fff;border:0;cursor:pointer;text-transform:uppercase;
  font-size:12px;letter-spacing:.04em;transition:background .25s;}
#main form button[type=submit]:hover,#main form input[type=submit]:hover{background:var(--orange);}
#main form p.error{color:#c0392b;font-size:13px;margin:0 0 6px;}
#main form .mandatory{color:var(--orange);}

/* ---------- News (Aktivitaeten): 3-spaltige Kacheln ---------- */
.mod_newslist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;align-items:stretch;}
.mod_newslist .layout_latest{padding:0;border-bottom:0;display:flex;flex-direction:column;}
.mod_newslist .layout_latest .info{color:var(--grau);font-size:13px;margin-bottom:8px;}
.mod_newslist .layout_latest figure{margin:0 0 12px;}
.mod_newslist .layout_latest figure img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;}
.mod_newslist .layout_latest h2,.mod_newslist .layout_latest h3{font-size:19px;margin:0 0 8px;line-height:1.25;}
.mod_newslist .layout_latest h2 a,.mod_newslist .layout_latest h3 a{color:var(--anthrazit);}
.mod_newslist .layout_latest .ce_text{font-size:15px;margin-bottom:14px;}
.mod_newslist .layout_latest .more{margin-top:auto;}
.news_full .info,.mod_newslist time{color:var(--grau);font-size:13px;}
@media(max-width:991px){.mod_newslist{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;}}
@media(max-width:600px){.mod_newslist{grid-template-columns:1fr;gap:24px;}}

/* ---------- Footer ---------- */
#footer,.mod_article.footer,.footercontainer{background:var(--footer);color:rgba(255,255,255,.75);}
#footer{padding:55px 0 30px;}
#footer .inside{max-width:var(--container);margin:0 auto;padding:0 22px;}
#footer a{color:#fff;}
#footer h1,#footer h2,#footer h3,#footer h4{color:#fff;font-weight:300;}
#footer .footercontainer{padding:0;}
.footersocials a,.socialIcons a{color:#96969c;margin:0 5px;}

/* ---------- Responsive ---------- */
@media(max-width:991px){
  .topbartop{display:none;} /* wie im Original-Theme: Kontaktleiste mobil ausgeblendet */
  .mainnavi{display:none;}
  .button-menu{display:flex;align-items:center;justify-content:center;margin-left:auto;cursor:pointer;width:44px;height:40px;}
  .overlay-menu{display:block;position:fixed;inset:0;background:rgba(17,17,21,.98);z-index:300;
    padding:80px 24px 24px;transform:translateX(100%);transition:transform .3s;overflow-y:auto;}
  body.menu-open .overlay-menu{transform:none;}
  body.menu-open{overflow:hidden;}
  .overlay-menu .button-menu{position:absolute;top:16px;right:18px;margin:0;}
  .overlay-menu .level_1,.overlay-menu .level_2{list-style:none;margin:0;padding:0;}
  .overlay-menu a,.overlay-menu strong{display:block;color:#fff;padding:12px 4px;font-family:var(--serif);
    text-transform:uppercase;font-size:18px;border-bottom:1px solid rgba(255,255,255,.12);}
  .overlay-menu .level_2 a{text-transform:none;font-family:var(--sans);font-size:15px;padding-left:18px;opacity:.85;}
}
@media(max-width:767px){
  h1{font-size:28px;}
}