/* ==========================================================================
   BDS Baltmannsweiler , theme2026  (Contao 5.7, ohne Bootstrap/jQuery)
   Aufgewertete, luftige Fassung. Farben & Masse als CSS-Variablen.
   ========================================================================== */

:root{
  --blau:#003871;
  --blau-hell:#0a5aa8;
  --blau-dunkel:#002a55;
  --anthrazit:#2b2b2b;
  --text:#454b4a;
  --text-hell:#6b706f;
  --weiss:#ffffff;
  --grau-flaeche:#f4f6f8;   /* helle Section-Flaeche */
  --grau-linie:#e4e7ea;
  --maxbreite:1200px;
  --pad:24px;
  --radius:0;
  /* Gemeinsame Hoehe der Aufmacher von Home, Werbebanner und Klingenaecker-Fest.
     Massgeblich ist das Startseiten-Banner (1920x876), das bewusst ungeschnitten
     stehen soll: 876/1920 = 45.62vw. Damit ist es nie beschnitten, und die beiden
     Fotos (1500x1000) zeigen einen Streifen von 684 der 1000 Bildpunkte. */
  --hero-hoehe:clamp(240px,45.62vw,900px);
  --schatten:0 6px 24px rgba(0,40,85,.09);
  --schatten-klein:0 2px 10px rgba(0,40,85,.07);
  --font:"Roboto","Roboto Regular",system-ui,-apple-system,Segoe UI,Arial,sans-serif;
}

/* --- Schriften lokal (DSGVO) ----------------------------------------------- */
@font-face{font-family:"Roboto";src:url("../fonts/Roboto-Light.ttf") format("truetype");font-weight:300;font-display:swap;}
@font-face{font-family:"Roboto";src:url("../fonts/Roboto-Regular.ttf") format("truetype");font-weight:400;font-display:swap;}
@font-face{font-family:"Roboto";src:url("../fonts/Roboto-Medium.ttf") format("truetype");font-weight:500;font-display:swap;}
@font-face{font-family:"Roboto";src:url("../fonts/Roboto-Bold.ttf") format("truetype");font-weight:700;font-display:swap;}
@font-face{font-family:"Roboto Light";src:url("../fonts/Roboto-Light.ttf") format("truetype");font-weight:300;font-display:swap;}
@font-face{font-family:"Roboto Regular";src:url("../fonts/Roboto-Regular.ttf") format("truetype");font-weight:400;font-display:swap;}

/* --- Reset / Basis --------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{margin:0;font-family:var(--font);font-weight:400;font-size:17px;line-height:1.7;color:var(--text);background:var(--weiss);-webkit-font-smoothing:antialiased;overflow-x:hidden;}
img{max-width:100%;height:auto;display:block;}
a{color:var(--blau);text-decoration:none;transition:color .18s;}
a:hover{color:var(--blau-hell);}
p{margin:0 0 1.1rem;}
ul,ol{padding-left:1.3em;}
li{margin-bottom:.35rem;}
.invisible{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* --- Typografie ------------------------------------------------------------ */
h1,h2,h3,h4{font-weight:500;line-height:1.18;color:var(--anthrazit);margin:0 0 .7em;}
h1{font-size:2.5rem;text-transform:uppercase;letter-spacing:.01em;}
h2{font-size:1.7rem;text-transform:uppercase;letter-spacing:.01em;position:relative;}
h3{font-size:1.3rem;color:var(--blau);}
/* dezente blaue Akzentlinie unter H2 im Content */
main .ce_text h2::after,main .rte h2::after{content:"";display:block;width:52px;height:3px;background:var(--blau);border-radius:2px;margin-top:.5rem;}
main .inside a{color:var(--blau);font-weight:500;}
main .inside a:hover{text-decoration:underline;}
hr,.devider{border:0;border-top:1px solid var(--grau-linie);margin:2.6rem 0;height:0;}

/* --- Container / Grid ------------------------------------------------------ */
.container{width:100%;max-width:var(--maxbreite);margin:0 auto;padding:0 var(--pad);}
.row{display:flex;flex-wrap:wrap;margin:0 -14px;}
.row>[class*="col-"]{padding:0 14px;width:100%;}
@media(min-width:768px){
  .row>.col-sm-1{width:8.333%}.row>.col-sm-2{width:16.66%}.row>.col-sm-3{width:25%}.row>.col-sm-4{width:33.33%}
  .row>.col-sm-5{width:41.66%}.row>.col-sm-6{width:50%}.row>.col-sm-7{width:58.33%}.row>.col-sm-8{width:66.66%}
  .row>.col-sm-9{width:75%}.row>.col-sm-10{width:83.33%}.row>.col-sm-11{width:91.66%}.row>.col-sm-12{width:100%}
}
@media(min-width:992px){
  .row>.col-lg-1{width:8.333%}.row>.col-lg-2{width:16.66%}.row>.col-lg-3{width:25%}.row>.col-lg-4{width:33.33%}
  .row>.col-lg-5{width:41.66%}.row>.col-lg-6{width:50%}.row>.col-lg-7{width:58.33%}.row>.col-lg-8{width:66.66%}
  .row>.col-lg-9{width:75%}.row>.col-lg-10{width:83.33%}.row>.col-lg-11{width:91.66%}.row>.col-lg-12{width:100%}
}

/* --- Kopf / Menueleiste (luftig, Logo mit Abstand) ------------------------- */
header#header{position:sticky;top:0;z-index:1000;background:var(--weiss);box-shadow:var(--schatten-klein);}
header#header .inside{max-width:var(--maxbreite);margin:0 auto;}
.bangb1{background:var(--weiss);}
.topbar{padding:0 var(--pad);}
.topbar .container{padding:0;}
.topbar .row{align-items:center;margin:0;min-height:96px;}
.logo,.logo.content-image{margin:0;display:flex;align-items:center;}
.logo img{height:64px;width:auto;}

/* Desktop-Navigation: Hauptmenue horizontal, Untermenues als Hover-Dropdown */
nav.mod_navigation ul{list-style:none;margin:0;padding:0;}
nav.mainnavi>ul{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:.15rem;}
nav.mainnavi>ul>li{position:relative;}
nav.mainnavi a,nav.mainnavi strong{display:block;padding:.55rem .85rem;color:var(--anthrazit);font-weight:500;font-size:.9rem;text-transform:uppercase;letter-spacing:.02em;border-radius:0;white-space:nowrap;text-decoration:none;transition:background .18s,color .18s;}
nav.mainnavi a:hover,nav.mainnavi a.trail{color:var(--blau);background:var(--grau-flaeche);}
nav.mainnavi a.active,nav.mainnavi strong.active,nav.mainnavi>ul>li>strong{background:var(--blau);color:#fff;}
nav.mainnavi ul ul{position:absolute;top:calc(100% + 6px);right:0;min-width:230px;background:#fff;box-shadow:var(--schatten);border-radius:var(--radius);padding:.4rem 0;display:none;z-index:1100;}
nav.mainnavi>ul>li:hover>ul{display:block;}
nav.mainnavi ul ul a,nav.mainnavi ul ul strong{padding:.6rem 1.2rem;text-transform:none;font-size:.95rem;font-weight:400;white-space:normal;border-radius:0;color:var(--anthrazit);background:none;}
nav.mainnavi ul ul a:hover{background:var(--grau-flaeche);color:var(--blau);}

/* Hamburger + Overlay (mobil) */
.button-menu{display:none;flex-direction:column;justify-content:center;gap:5px;width:46px;height:46px;cursor:pointer;padding:10px;background:transparent;border:0;}
.button-menu span{display:block;height:3px;background:var(--anthrazit);border-radius:2px;transition:.25s;}
.overlay-menu{position:fixed;inset:0;background:var(--anthrazit);z-index:1200;transform:translateX(100%);transition:transform .32s ease;overflow-y:auto;padding:5rem 1.6rem 2rem;}
body.menu-open .overlay-menu{transform:translateX(0);}
body.menu-open{overflow:hidden;}
.overlay-menu nav.mod_navigation ul{flex-direction:column;gap:.1rem;}
.overlay-menu nav.mod_navigation ul ul{padding-left:1rem;}
.overlay-menu nav.mod_navigation a,.overlay-menu nav.mod_navigation strong{display:block;padding:.85rem .4rem;color:#fff;font-size:1.1rem;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.12);text-decoration:none;}
.overlay-menu a:hover,.overlay-menu a.active,.overlay-menu a.trail,.overlay-menu strong{color:#8fc0ff;}
.overlay-close{position:absolute;top:1.3rem;right:1.5rem;width:42px;height:42px;cursor:pointer;background:transparent;border:0;}
.overlay-close::before,.overlay-close::after{content:"";position:absolute;top:20px;left:7px;width:28px;height:3px;background:#fff;border-radius:2px;}
.overlay-close::before{transform:rotate(45deg);}
.overlay-close::after{transform:rotate(-45deg);}
@media(max-width:991px){nav.mainnavi{display:none;}.button-menu{display:flex;}.topbar .row{min-height:74px;}.logo img{height:52px;}}
@media(min-width:992px){.overlay-menu{display:none;}}

/* --- Inhaltsbereich -------------------------------------------------------- */
main#main{display:block;}
main .inside{max-width:var(--maxbreite);margin:0 auto;padding:3rem var(--pad) 3.5rem;}
.mod_article{margin-bottom:2rem;}
.mod_article:last-child{margin-bottom:0;}
main .ce_text,main .content-text{max-width:820px;}
main .ce_text.col-lg-7,main .ce_text[class*="col-"]{max-width:none;}

/* --- Hero / grosses Aufmacher-Bild ----------------------------------------- */
.content-slider,.slider-wrapper{position:relative;}
.content-slider img,.dark-slider img{width:100%;border-radius:0;box-shadow:none;}
.slider-control{display:none;}
.dark-slider .content-text,.dark-slider .rte{margin-top:1.4rem;}
.full-width{width:100vw;margin-left:calc(50% - 50vw);}

/* Hero: erstes Aufmacher-Bild einer Unterseite voll-breit + Titel als Overlay */
main .inside>.mod_article:first-child>.media--above{position:relative;width:100vw;max-width:none;margin-left:calc(50% - 50vw);margin-top:-3rem;margin-bottom:2.6rem;}
main .inside>.mod_article:first-child>.media--above figure{position:relative;margin:0;line-height:0;}
main .inside>.mod_article:first-child>.media--above figure img{width:100vw;height:var(--hero-hoehe);object-fit:cover;object-position:center 22%;}
main .inside>.mod_article:first-child>.media--above figure::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,25,55,.20),rgba(0,25,55,.48));}
main .inside>.mod_article:first-child>.media--above .rte{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:0 var(--pad);z-index:2;margin:0;}
main .inside>.mod_article:first-child>.media--above .rte h1{color:#fff;text-align:center;margin:0;font-size:clamp(1.9rem,4.2vw,3.3rem);text-shadow:0 2px 26px rgba(0,0,0,.5);line-height:1.15;}
main .inside>.mod_article:first-child>.media--above .rte h1::after{display:none;}

/* Werbebanner-Seite: Das Schild ist fast quadratisch und passte in den flachen
   Standard-Aufmacher nicht hinein , auf einem 1920er Schirm wurde die Unterkante
   samt "faellt Werbung auf!" abgeschnitten. Deshalb waechst die Hoehe hier mit
   der Fensterbreite (34vw), dadurch bleibt der sichtbare Bildstreifen konstant
   bei rund 510 von 1000 Bildpunkten. Das Schild (132..612) liegt damit mittig
   drin, mit je 15 Punkten Luft. Klasse am Artikel eintragen: hero-banner. */
main .inside>.mod_article.hero-banner>.media--above figure img{
  object-position:center 9%;
}

/* Startseiten-Icon-Banner-Slider: voll-breit, Banner ganz sichtbar, Text weiss links im Freiraum */
main .inside>.mod_article:first-child .ce_sliderStart{position:relative;width:100vw;margin-left:calc(50% - 50vw);margin-top:-3rem;margin-bottom:2.6rem;}
main .inside>.mod_article:first-child .ce_sliderStart .dark-slider,
main .inside>.mod_article:first-child .ce_sliderStart .content-slider,
main .inside>.mod_article:first-child .ce_sliderStart .slider-wrapper{max-width:none;margin:0;}
main .inside>.mod_article:first-child .ce_sliderStart figure{margin:0;line-height:0;}
main .inside>.mod_article:first-child .ce_sliderStart figure img{width:100vw;height:var(--hero-hoehe);object-fit:cover;box-shadow:none;}
/* Auf dem Handy greift die Untergrenze von 240px. Das Startseiten-Banner wuerde
   dabei seitlich beschnitten , dort bleibt es deshalb bei seiner echten Hoehe. */
@media(max-width:767px){
  main .inside>.mod_article:first-child .ce_sliderStart figure img{height:auto;}
}
main .inside>.mod_article:first-child .ce_sliderStart .rte{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:0 max(var(--pad),calc(50vw - var(--maxbreite)/2 + var(--pad)));z-index:3;}
main .inside>.mod_article:first-child .ce_sliderStart .rte .col-lg-7{width:100%;max-width:520px;padding:0;}
main .inside>.mod_article:first-child .ce_sliderStart .rte,
main .inside>.mod_article:first-child .ce_sliderStart .rte *{color:#fff;}
main .inside>.mod_article:first-child .ce_sliderStart .rte h1,
main .inside>.mod_article:first-child .ce_sliderStart .rte h2{text-transform:uppercase;color:#fff;}
main .inside>.mod_article:first-child .ce_sliderStart .rte h1::after,
main .inside>.mod_article:first-child .ce_sliderStart .rte h2::after{display:none;}

/* --- Bilder / Galerie ------------------------------------------------------ */
figure{margin:0;}
.ce_image img,figure img{border-radius:0;box-shadow:none;}
.content-gallery ul{list-style:none;margin:0;padding:0;display:grid;gap:16px;width:100%;grid-template-columns:repeat(3,minmax(0,1fr));}
.content-gallery--cols-2 ul{grid-template-columns:repeat(2,minmax(0,1fr));}
.content-gallery--cols-4 ul{grid-template-columns:repeat(4,minmax(0,1fr));}
.content-gallery li{margin:0;}
.content-gallery li figure,.content-gallery li a{display:block;height:100%;overflow:hidden;border-radius:var(--radius);}
.content-gallery li img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;border-radius:var(--radius);transition:transform .4s ease;box-shadow:none;}
.content-gallery li a:hover img{transform:scale(1.05);}
@media(max-width:700px){.content-gallery ul,.content-gallery--cols-3 ul,.content-gallery--cols-4 ul{grid-template-columns:repeat(2,minmax(0,1fr));}}

/* --- Buttons / Formulare --------------------------------------------------- */
.btn,.submit,button.submit,input.submit,a.button{display:inline-block;background:var(--blau);color:#fff!important;padding:.85rem 1.6rem;border:0;border-radius:var(--radius);font-family:inherit;font-size:1rem;font-weight:500;cursor:pointer;text-transform:uppercase;letter-spacing:.02em;text-decoration:none!important;transition:transform .15s,box-shadow .15s,background .15s;box-shadow:var(--schatten-klein);}
.btn:hover,.submit:hover,a.button:hover{background:var(--blau-dunkel);transform:translateY(-2px);box-shadow:var(--schatten);}
input,textarea,select{font-family:inherit;font-size:1rem;padding:.7rem .8rem;border:1px solid var(--grau-linie);border-radius:0;width:100%;max-width:100%;background:#fff;transition:border-color .18s;}
input:focus,textarea:focus,select:focus{outline:0;border-color:var(--blau);}
label{display:block;margin:.7rem 0 .25rem;font-weight:500;color:var(--anthrazit);}

/* --- Footer ---------------------------------------------------------------- */
footer#footer{background:var(--anthrazit);color:rgba(255,255,255,.75);padding:3rem 0 2.5rem;margin-top:3rem;font-size:.97rem;}
footer#footer .inside{max-width:var(--maxbreite);margin:0 auto;padding:0 var(--pad);}
footer#footer a{color:#cfe0f5;}
footer#footer a:hover{color:#fff;}
footer#footer nav.mod_navigation ul{display:flex;flex-wrap:wrap;gap:.3rem 1.4rem;}
footer#footer nav.mod_navigation a,footer#footer nav.mod_navigation strong{color:rgba(255,255,255,.75);text-transform:none;padding:.2rem 0;text-decoration:none;}
footer#footer nav.mod_navigation a:hover{color:#fff;}

/* --- Nach-oben-Button ------------------------------------------------------ */
.scrolltop-btn{position:fixed;right:22px;bottom:22px;width:48px;height:48px;background:var(--blau);color:#fff;border:0;border-radius:50%;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s,transform .2s,background .2s;z-index:900;display:flex;align-items:center;justify-content:center;box-shadow:var(--schatten);}
.scrolltop-btn.show{opacity:1;visibility:visible;}
.scrolltop-btn:hover{background:var(--blau-dunkel);transform:translateY(-3px);}
.scrolltop-btn::before{content:"";width:12px;height:12px;border-left:3px solid #fff;border-top:3px solid #fff;transform:rotate(45deg);margin-top:4px;}
.col-lg-1.scrolltop{display:none;}

/* --- Text links, Bilder rechts untereinander -------------------------------
   Fuer Startseiten-Bloecke wie "Aktiv vor Ort". Die Bootstrap-Reste (col-lg-6)
   greifen hier nicht, weil sie einen .row-Container braeuchten , deshalb ein
   eigenes Raster. Klasse im Backend beim Artikel eintragen: bds-textbilder. */
.bds-textbilder{display:grid;grid-template-columns:1fr 1fr;column-gap:32px;row-gap:20px;align-items:start;}
.bds-textbilder>.content-text{grid-column:1;grid-row:1 / span 2;max-width:none;}
.bds-textbilder>.content-image{grid-column:2;margin:0;}
.bds-textbilder>.content-image figure{margin:0;}
.bds-textbilder>.content-image img{width:100%;height:auto;}
@media(max-width:767px){
  .bds-textbilder{grid-template-columns:1fr;row-gap:16px;}
  .bds-textbilder>.content-text,.bds-textbilder>.content-image{grid-column:1;grid-row:auto;}
}

/* --- Alt-Theme-Reste zaehmen ----------------------------------------------- */
.pull-left{float:none;}
.bangb1_clone{display:none;}