/* =====================================================================
   Stiftung Johana - Theme 2026 (schlank, ohne Bootstrap/jQuery)
   Farben und Schriften 1:1 aus dem Original uebernommen.
   Inhalte/Bilder/Texte bleiben unveraendert, nur die Huelle ist neu.
   ===================================================================== */

/* ---- Lokale Schriften (DSGVO-sicher, keine Google-CDN) ---- */
@font-face{font-family:'Open Sans';font-weight:400;font-style:normal;font-display:swap;
  src:url('../fonts/OpenSans-Regular.ttf') format('truetype');}
@font-face{font-family:'Open Sans';font-weight:600;font-style:normal;font-display:swap;
  src:url('../fonts/OpenSans-SemiBold.ttf') format('truetype');}
@font-face{font-family:'Questrial';font-weight:400;font-style:normal;font-display:swap;
  src:url('../fonts/Questrial-Regular.ttf') format('truetype');}

/* ---- Farbpalette ---- */
:root{
  --rot:#b51f2a;         /* Signalrot der Stiftung */
  --anthrazit:#292928;   /* dunkel */
  --text:#3a3a38;        /* Fliesstext */
  --grau:#6b6b69;        /* gedaempft */
  --offwhite:#f2f2ed;    /* warmes Hell */
  --linie:#e6e6e1;       /* feine Trennlinien */
  --weiss:#ffffff;
}

/* ---- Reset / Grundlage ---- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;font-family:'Open Sans',Arial,sans-serif;font-size:17px;line-height:1.7;
  color:var(--text);background:var(--weiss);}
#wrapper{overflow-x:hidden;} /* verhindert Querscrollen durch randlosen Hero */
img{max-width:100%;height:auto;display:block;}
/* Screenreader-Only (z.B. "Navigation ueberspringen") - sichtbar ausblenden */
.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;}
a{color:var(--rot);text-decoration:none;transition:color .2s;}
a:hover{color:var(--anthrazit);}
h1,h2,h3,h4{font-family:'Questrial','Open Sans',sans-serif;font-weight:400;color:var(--anthrazit);
  line-height:1.25;margin:0 0 .5em;}
h1{font-size:2.3rem;}
h2{font-size:1.8rem;}
h3{font-size:1.35rem;}
p{margin:0 0 1.1em;}
hr{border:0;border-top:1px solid var(--linie);margin:2rem 0;}

/* ---- Leichtes Raster (ersetzt Bootstrap-Spalten, floatbasiert wie das Original) ---- */
[class*="col-lg-"],[class*="col-sm-"],[class*="col-xs-"]{
  float:left;width:100%;padding:0 15px;min-height:1px;}
.container,.container_fluid{max-width:1180px;margin:0 auto;padding:0 22px;}
.container::after,.container_fluid::after,.topbarMain::after,.mod_article::after,
.content-text::after,.footercontainer .container::after,.row::after{content:"";display:block;clear:both;}

@media(min-width:768px){
  .col-sm-3{width:25%;}.col-sm-4{width:33.3333%;}.col-sm-6{width:50%;}
  .col-sm-7{width:58.3333%;}.col-sm-8{width:66.6667%;}.col-sm-9{width:75%;}.col-sm-12{width:100%;}
}
@media(min-width:992px){
  .col-lg-3{width:25%;}.col-lg-4{width:33.3333%;}.col-lg-5{width:41.6667%;}.col-lg-6{width:50%;}
  .col-lg-7{width:58.3333%;}.col-lg-8{width:66.6667%;}.col-lg-9{width:75%;}.col-lg-12{width:100%;}
}
/* Inhaltsbereich: alle Spalten buendig am linken Rand (keine Einrueckung) */
#main [class*="col-lg-"],#main [class*="col-sm-"],#main [class*="col-xs-"]{padding-left:0;}

/* ===================== KOPFBEREICH ===================== */
#header{background:var(--weiss);position:relative;z-index:50;}
#header .inside{max-width:1180px;margin:0 auto;padding:0 22px;}
.topbartop{background:var(--weiss);}
.topbarMain{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;}
.logo{float:none;width:auto;padding:0;}
.logo img{max-height:74px;width:auto;}

/* Hauptnavigation */
nav.mainnavi{float:none;width:auto;padding:0;margin-left:auto;}
.mainnavi ul.level_1{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  align-items:center;gap:2px;}
.mainnavi ul.level_1 > li{position:relative;}
.mainnavi .level_1 a,.mainnavi .level_1 span.submenu,.mainnavi .level_1 strong{
  display:block;padding:10px 16px;font-size:1rem;color:var(--anthrazit);
  border-radius:4px;transition:color .2s,background .2s;text-decoration:none;}
.mainnavi .level_1 a:hover,.mainnavi .level_1 span:hover{color:var(--rot);background:var(--offwhite);}
.mainnavi .level_1 a.active,.mainnavi .level_1 a.trail,
.mainnavi .level_1 strong.active,.mainnavi .level_1 span.trail{
  color:var(--rot);font-weight:600;}
.mainnavi .level_1 a.active{box-shadow:inset 0 -3px 0 var(--rot);}

/* Untermenues */
.mainnavi ul.level_2{list-style:none;margin:0;padding:6px 0;position:absolute;left:0;top:100%;
  min-width:210px;background:var(--anthrazit);border-radius:0 0 6px 6px;box-shadow:0 8px 20px rgba(0,0,0,.18);
  display:none;z-index:60;}
.mainnavi li:hover > ul.level_2{display:block;}
.mainnavi ul.level_2 a,.mainnavi ul.level_2 span{color:#fff;padding:9px 18px;border-radius:0;}
.mainnavi ul.level_2 a:hover{background:var(--rot);color:#fff;}

/* Menueleiste: PERMANENT oben fixiert (aus dem Seitenfluss raus). Der Platz dafuer
   wird einmalig per JS exakt reserviert (body padding-top) und bleibt konstant.
   Beim Scrollen schrumpft nur die Leiste selbst -> das Dokument bewegt sich nie,
   also kein Zucken, auch nicht waehrend sanfter Scroll-Animationen. */
body{padding-top:104px;} /* Fallback, JS misst den exakten Wert */
.topbarMain{position:fixed;top:0;left:0;right:0;z-index:100;background:#fff;
  padding:14px max(22px,calc(50vw - 568px));transition:padding .22s ease,box-shadow .22s ease;}
.topbarMain .logo img{transition:max-height .22s ease;}
body.stuck .topbarMain{padding:7px max(22px,calc(50vw - 568px));
  box-shadow:0 2px 12px rgba(0,0,0,.12);}
body.stuck .topbarMain .logo img{max-height:44px;}

/* Hamburger (mobil) - nutzt vorhandenes .button-menu */
.button-menu{display:none;cursor:pointer;padding:10px 14px;border:1px solid var(--linie);
  border-radius:5px;color:var(--anthrazit);font-size:1.5rem;line-height:1;background:var(--weiss);}
.button-menu::before{content:"\2261";} /* Hamburger-Zeichen */
.overlay-menu{display:none;} /* alte Overlay-/Such-Box ausblenden */

/* Banner-Bild auf Unterseiten: randlos ueber die volle Breite */
#header .mod_article{position:relative;width:100vw;margin-left:calc(50% - 50vw);}
#header .mod_article .inside,#header .mod_article figure{margin:0;width:100%;}
#header .mod_article figure img{width:100%;height:auto;display:block;}

/* ===================== INHALT ===================== */
#container{background:var(--weiss);}
#main{max-width:1180px;margin:0 auto;padding:34px 22px 10px;}
#main .inside{width:100%;}
/* Gleichmaessige vertikale Abstaende (ein Rhythmus statt gemischter Margins) */
.mod_article{margin:0;}
.mod_article + .mod_article{margin-top:0;}
.content-text,.ce_text,.content-gallery,.content-headline{margin:0 0 2.9rem;}

/* ===================== BILDERGALERIE (Contao 5: content-gallery) ===================== */
/* minmax(0,1fr) statt 1fr verhindert den Spalten-Kollaps auf 0; width:100% erzwingt volle Breite */
.content-gallery ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;
  width:100%;list-style:none;margin:0;padding:0;}
.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;padding:0;min-width:0;list-style:none;float:none;
  aspect-ratio:4/3;overflow:hidden;}
.content-gallery figure,.content-gallery a{display:block;width:100%;height:100%;margin:0;}
.content-gallery img{width:100%;height:100%;object-fit:cover;display:block;}
@media(max-width:767px){.content-gallery ul{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:479px){.content-gallery ul{grid-template-columns:1fr;}}
.rte>*:last-child{margin-bottom:0;}
figure{margin:0 0 1rem;}
figure img{border-radius:0;}     /* Bilder mit scharfen Ecken */
figcaption{font-size:.9rem;color:var(--grau);padding-top:.4rem;}

/* Bild-Text-Elemente (Contao-Standardklassen) */
.media{overflow:hidden;}
@media(min-width:768px){
  .media--left figure,.media--right figure{max-width:46%;margin-bottom:0;}
  .media--left figure{float:left;margin-right:28px;}
  .media--right figure{float:right;margin-left:28px;}
  .media--above figure{margin-bottom:1rem;}
}

/* Farbige Abschnitts-Hintergruende aus dem Original */
.InsideOut,.dark-bg{background:var(--anthrazit);color:#fff;}
.InsideOut h1,.InsideOut h2,.InsideOut h3,.dark-bg h1,.dark-bg h2,.dark-bg h3{color:#fff;}
.InsideOut a,.dark-bg a{color:#fff;text-decoration:underline;}
.light-bg{background:var(--rot);color:#fff;}
.light-bg h1,.light-bg h2,.light-bg h3{color:#fff;}
.grey{background:var(--offwhite);}
.redborder figure{border-bottom:4px solid var(--rot);}

/* Ueberschrift mit rotem Akzent (wie im Original h1) */
#main h1{position:relative;padding-bottom:.4rem;}
#main h1::after{content:"";display:block;width:64px;height:3px;background:var(--rot);
  margin-top:.5rem;border-radius:2px;}

/* Buttons */
.btn,a.btn,input.submit,button.submit,.ce_form button{
  display:inline-block;background:var(--rot);color:#fff;border:1px solid var(--rot);
  padding:11px 24px;border-radius:5px;font-size:1rem;cursor:pointer;transition:.2s;text-decoration:none;}
.btn:hover,a.btn:hover,input.submit:hover,button.submit:hover,.ce_form button:hover{
  background:var(--anthrazit);border-color:var(--anthrazit);color:#fff;}

/* ===================== FORMULAR (Kontakt) ===================== */
.ce_form .formbody{display:flex;flex-wrap:wrap;gap:16px;}
.ce_form .widget{flex:1 1 100%;margin:0;}
.ce_form .widget-text,.ce_form .widget-select,.ce_form .widget-textarea{flex:1 1 260px;}
.ce_form label{display:block;font-weight:600;margin-bottom:.3rem;color:var(--anthrazit);}
.ce_form input.text,.ce_form textarea,.ce_form select{
  width:100%;padding:11px 13px;border:1px solid var(--linie);border-radius:5px;
  font:inherit;color:var(--text);background:var(--weiss);}
.ce_form input.text:focus,.ce_form textarea:focus,.ce_form select:focus{
  outline:none;border-color:var(--rot);box-shadow:0 0 0 2px rgba(181,31,42,.15);}
.ce_form textarea{min-height:150px;resize:vertical;}
.ce_form .widget-submit{flex:1 1 100%;}
.mandatory{color:var(--rot);}

/* ===================== HERO-SLIDER (randlos, Foto + roter Kasten unten) ===================== */
/* randlos ueber volle Breite, auch wenn im zentrierten Container */
.slider-Bg{position:relative;width:100vw;margin-left:calc(50% - 50vw);
  background:url('../../bilder/web_DSC4898_slider.jpg') center center / cover no-repeat;}
.ce_sliderStart,.content-slider{position:static!important;overflow:visible!important;
  width:auto!important;height:auto!important;transform:none!important;}
/* Kasten sitzt UNTEN, damit er die Gesichter frei laesst */
.slider-wrapper{position:relative;min-height:520px;display:flex;align-items:flex-end;
  padding:44px 6% 56px;overflow:hidden;}
.slider-wrapper > .content-text{display:none;max-width:560px;margin:0;
  background:var(--rot);color:#fff;padding:30px 38px;box-shadow:0 6px 24px rgba(0,0,0,.22);}
.slider-wrapper > .content-text:first-of-type{display:block;}
.slider-wrapper .content-text .rte,.slider-wrapper .content-text *{color:#fff!important;}
/* Pfeile ausgeblendet - nur ein Slide, kein Durchrotieren */
.slider-control{display:none!important;}
.slider-control-x{position:absolute;top:22px;right:6%;z-index:4;display:flex;gap:6px;}
.slider-control a{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
  background:var(--anthrazit);color:#fff;font-size:0;line-height:1;transition:background .2s;}
.slider-control a:hover{background:#000;}
.slider-prev::before{content:'\2039';font-size:1.6rem;}
.slider-next::before{content:'\203A';font-size:1.6rem;}
.slider-menu{display:none;}
@media(max-width:767px){
  .slider-wrapper{min-height:340px;padding:22px 16px 30px;}
  .slider-wrapper > .content-text{max-width:100%;padding:22px 22px;}
  .slider-control{top:12px;right:12px;}
}

/* ===================== FUSSBEREICH ===================== */
#footer{background:var(--anthrazit);color:rgba(255,255,255,.82);margin-top:40px;}
#footer .inside,#footer .footercontainer{width:100%;}
#footer .footercontainer{padding:52px 0 26px;}
#footer .container{max-width:1180px;margin:0 auto;padding:0 22px;}
#footer h1,#footer h2,#footer h3,#footer h4{color:#fff;}
#footer a{color:#fff;}
#footer a:hover{color:var(--rot);}
#footer .mod_navigation ul{list-style:none;margin:0;padding:0;}
#footer .mod_navigation a{display:inline-block;padding:4px 0;}
#footer img{display:inline-block;}
#footer .content-image img{max-height:120px;width:auto;}
/* Copyright-Zeile ueber die volle Breite, nicht neben die Spalten gequetscht */
.clearfix{clear:both;}
.clearfix::after{content:"";display:block;clear:both;}
#footer .copyright{clear:both;float:none;width:100%;text-align:center;
  border-top:1px solid rgba(255,255,255,.14);margin-top:26px;padding-top:20px;font-size:.94rem;}
#footer .copyright p{margin:0;}

/* Nach-oben-Button (ersetzt das entfernte jQuery, schwebend unten rechts) */
.scrolltop{position:fixed;right:20px;bottom:20px;z-index:80;width:auto;padding:0;float:none;margin:0;}
.scrolltop a{display:flex;align-items:center;justify-content:center;width:46px;height:46px;
  background:var(--rot);color:#fff;box-shadow:0 3px 12px rgba(0,0,0,.28);transition:background .2s;}
.scrolltop a::before{content:'\2191';font-size:1.5rem;line-height:1;}
.scrolltop a:hover{background:var(--anthrazit);color:#fff;}

/* ===================== RESPONSIVE ===================== */
@media(max-width:991px){
  body{font-size:16px;}
  h1{font-size:1.9rem;}h2{font-size:1.5rem;}
  .button-menu{display:inline-block;}
  .mainnavi ul.level_1{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;
    background:var(--weiss);border-top:3px solid var(--rot);box-shadow:0 12px 24px rgba(0,0,0,.12);
    padding:8px 0;gap:0;z-index:70;}
  body.nav-open .mainnavi ul.level_1{display:flex;}
  .mainnavi .level_1 a,.mainnavi .level_1 span.submenu{padding:12px 22px;border-radius:0;}
  .mainnavi ul.level_2{position:static;display:block;background:var(--offwhite);box-shadow:none;}
  .mainnavi ul.level_2 a{color:var(--anthrazit);}
  .media--left figure,.media--right figure{float:none;max-width:100%;margin:0 0 1rem;}
}
@media(max-width:575px){
  #main{padding:24px 16px;}
  .logo img{max-height:60px;}
}

/* Skip veraltete Klassen, die ins Leere zeigen */
.container_fluid{padding-left:0;padding-right:0;}