/* =========================================================
   Sportring Barsinghausen e.V. – WBCE Template "sportring2026"
   ========================================================= */

:root{
  --bg:#f6f7ef;
  --surface:#ffffff;
  --surface-2:#edf0e3;
  --surface-3:#e4e9d7;
  --ink:#1c2417;
  --ink-soft:#4d5843;
  --ink-faint:#7c8570;
  --green-900:#1f3410;
  --green-700:#345c16;
  --green-600:#48781d;
  --green-500:#5c9527;
  --green-tint:#e7efd9;
  --sage:#7fa66b;
  --yellow:#eeb90a;
  --yellow-ink:#4a3900;
  --border:#dbe0cd;
  --border-strong:#c4cdb0;
  --shadow: 0 1px 2px rgba(31,52,16,.06), 0 8px 24px -12px rgba(31,52,16,.18);
  --radius-s: 6px;
  --radius-m: 12px;
  --radius-l: 20px;
  --maxw: 1560px;
}

*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Public Sans', -apple-system, 'Segoe UI', sans-serif;
  font-size:16px;
  line-height:1.6;
}
h1,h2,h3,h4{
  font-family:'Archivo','Public Sans',sans-serif;
  color:var(--green-900);
  font-weight:700;
  line-height:1.15;
  margin:1.4em 0 .5em;
}
/* :first-of-type statt :first-child, da WBCE vor jedem Abschnitt ein
   leeres <a class="section_anchor"> einfuegt (Sprungmarke fuer die
   Backend-Bearbeitung) - das waere sonst das eigentliche erste Element
   und die Ueberschrift bekaeme trotzdem ihren oberen Abstand. */
h1:first-of-type,h2:first-of-type,h3:first-of-type{margin-top:0;}
p{margin:0 0 1em; color:var(--ink-soft);}
a{color:var(--green-600);}
/* Die WBCE-Sprungmarke selbst darf keine eigene Zeile/Hoehe erzeugen -
   sonst entsteht optisch eine Leerzeile vor jeder Ueberschrift/jedem
   Absatz, obwohl im Quellcode keine ist. */
a.section_anchor{display:block; height:0; margin:0; padding:0; line-height:0; overflow:hidden;}
img{max-width:100%; height:auto; display:block;}
ul,ol{color:var(--ink-soft);}
:focus-visible{outline:3px solid var(--yellow); outline-offset:2px; border-radius:4px;}

.skip-link{
  position:absolute; left:1rem; top:-3rem;
  background:var(--yellow); color:var(--yellow-ink);
  padding:.6rem 1rem; border-radius:var(--radius-s);
  font-weight:700; z-index:200; transition:top .15s ease; text-decoration:none;
}
.skip-link:focus{top:1rem;}

/* ---------- Utility bar ---------- */
.utility-bar{background:var(--green-900); color:#dcecc4; font-size:.8rem;}
.utility-bar .wrap{max-width:var(--maxw); margin:0 auto; padding:.45rem 2.5rem;}

/* ---------- Header / nav ---------- */
.site-header{position:sticky; top:0; z-index:100; background:var(--surface); border-bottom:1px solid var(--border); box-shadow:var(--shadow);}
.header-inner{max-width:var(--maxw); margin:0 auto; padding:0 2.5rem; display:flex; align-items:center; gap:2.5rem; min-height:84px;}
.brand{display:flex; align-items:center; margin-right:auto;}
.brand-logo{height:52px; width:auto; display:block;}

nav.primary{display:flex; align-self:stretch;}
nav.primary ul.nav-list{list-style:none; margin:0; padding:0; display:flex; align-self:stretch; gap:.15rem;}
nav.primary li.nav-item{position:relative; display:flex;}
nav.primary a.nav-link{
  display:flex; align-items:center; height:84px; padding:0 1rem;
  font-family:'Archivo',sans-serif; font-weight:600; font-size:.95rem;
  color:var(--ink); text-decoration:none; border-bottom:3px solid transparent;
}
nav.primary a.nav-link:hover,
nav.primary li.nav-item:hover > a.nav-link,
nav.primary a.nav-link.current,
nav.primary a.nav-link.trail{
  color:var(--green-700); border-bottom-color:var(--green-500);
}

ul.nav-dropdown{
  position:absolute; top:100%; left:0; z-index:20;
  background:var(--surface); border:1px solid var(--border); border-radius:0 0 var(--radius-m) var(--radius-m);
  box-shadow:var(--shadow); min-width:240px; padding:.5rem; margin:0; list-style:none;
  display:none; flex-direction:column;
}
li.nav-item:hover > ul.nav-dropdown{display:flex;}
ul.nav-dropdown a.nav-link{
  height:auto; padding:.6rem .75rem; border-radius:var(--radius-s); border-bottom:none;
}
ul.nav-dropdown a.nav-link:hover{background:var(--green-tint);}

.nav-toggle{display:none; align-items:center; justify-content:center; width:42px; height:42px; border:1px solid var(--border); border-radius:var(--radius-s); background:var(--surface); cursor:pointer; color:var(--ink);}

/* ---------- Breadcrumb ---------- */
.breadcrumb-bar{border-bottom:1px solid var(--border); background:var(--surface-2);}
.breadcrumb{max-width:var(--maxw); margin:0 auto; padding:.7rem 2.5rem; font-size:.82rem; color:var(--ink-faint); display:flex; align-items:center; gap:.4rem; flex-wrap:wrap;}
.breadcrumb .crumb,.breadcrumb .crumb-home{display:inline-flex;}
.breadcrumb .crumb-sep{opacity:.6;}
.breadcrumb a{color:var(--ink-faint); text-decoration:none;}
.breadcrumb a:hover{color:var(--green-600); text-decoration:underline;}
.breadcrumb .current{color:var(--ink-soft); font-weight:600;}

/* ---------- Top banner (Bild aus dem alten Kopfbereich) ----------
   Hoehe skaliert jetzt mit der Fensterbreite (vw statt fixer px-Werte):
   vorher war die Hoehe auf jedem Bildschirm fest (z. B. 300px), wodurch
   auf sehr breiten Monitoren viel mehr vom Bild senkrecht weggeschnitten
   wurde als auf einem normalen Bildschirm - ein und dasselbe Foto zeigte
   je nach Fensterbreite mal mehr, mal (auf breiten Monitoren) fast nur
   noch Himmel. Mit vw-Hoehe bleibt der sichtbare Bildausschnitt (Anteil
   des Fotos) bei jeder Fensterbreite ungefaehr gleich. */
.top-banner{position:relative; width:100%; height:clamp(150px, 15.6vw, 420px); overflow:hidden; background:var(--green-900);}
/* background-position:center 45% als Kompromiss zwischen "ganz oben"
   (schneidet Huegel/Ort/Turm unten ab) und "ganz unten/Bildmitte
   65%" (schneidet die Turmspitze oben ab) - zeigt bei normaler
   Fensterbreite sowohl die Turmspitze als auch Huegel/Ort darunter. */
.top-banner .banner-slide{position:absolute; inset:0; background-size:cover; background-position:center 45%; opacity:0;}
.top-banner::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,25,8,0) 45%, rgba(15,25,8,.45) 100%);}
.top-banner.single .banner-slide{opacity:1;}
.top-banner.slider .banner-slide{animation:bannerFade 18s ease-in-out infinite;}
.top-banner.slider .banner-slide:first-child{opacity:1;}
@keyframes bannerFade{
  0%{opacity:1;}
  30%{opacity:1;}
  38%{opacity:0;}
  96%{opacity:0;}
  100%{opacity:1;}
}
@media (prefers-reduced-motion: reduce){
  .top-banner.slider .banner-slide{animation:none; opacity:0;}
  .top-banner.slider .banner-slide:first-child{opacity:1;}
}

/* ---------- Page layout ----------
   Feste Bereichsnamen (grid-template-areas) statt Positions-Zaehlung:
   dadurch landet jeder Bereich immer an seinem Platz, unabhaengig davon,
   ob Unternavigation und/oder rechte Spalte ueberhaupt vorhanden sind. */
.page-wrap{max-width:var(--maxw); margin:0 auto; padding:2.6rem 2.5rem 5rem;}
.layout{
  display:grid;
  grid-template-columns:230px minmax(0,1fr) 320px;
  grid-template-areas:"side main rail";
  gap:2.6rem; align-items:start;
}
.layout.no-side{grid-template-columns:minmax(0,1fr) 320px; grid-template-areas:"main rail";}
.layout.no-rail{grid-template-columns:230px minmax(0,1fr); grid-template-areas:"side main";}
.layout.no-side.no-rail{grid-template-columns:minmax(0,1fr); grid-template-areas:"main";}
.side-nav{grid-area:side;}
main.content{grid-area:main;}
aside.rail{grid-area:rail;}

/* ---------- Side nav ---------- */
.side-nav{position:sticky; top:106px;}
.side-nav .side-title{font-family:'Archivo',sans-serif; font-weight:800; font-size:1.02rem; color:var(--green-900); margin:0 0 .9rem; padding:0 .2rem;}
.side-nav ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.2rem; border-left:2px solid var(--border);}
.side-nav a.side-link{display:block; padding:.55rem .9rem; margin-left:-2px; border-left:2px solid transparent; text-decoration:none; color:var(--ink-soft); font-size:.92rem; font-weight:500;}
.side-nav a.side-link:hover{color:var(--green-700); background:var(--surface-2);}
.side-nav a.side-link.current,
.side-nav a.side-link.trail{color:var(--green-700); border-left-color:var(--green-500); font-weight:700; background:var(--green-tint);}

/* ---------- Content ---------- */
main.content{min-width:0;}

/* Gemeinsame Inhaltskarte: dieselbe helle, abgerundete Karte wie bisher
   nur auf der Startseite ("Hero") gibt es jetzt auf JEDER Seite um den
   Hauptinhalt (Block 1) herum - inklusive allem, was Module/Plugins
   dort ausgeben, da sie einfach mit in denselben Block gerendert
   werden. Die Breite richtet sich nach der jeweiligen Grid-Spalte
   (main.content), nicht nach einer festen Zeichenbreite - dadurch wird
   auch bei viel Platz nicht mehr vorzeitig umgebrochen. */
.card-box{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg,var(--green-tint) 0%, var(--bg) 100%);
  border:1px solid var(--border); border-radius:var(--radius-l);
  padding:3rem 3rem 3.5rem; margin-bottom:2rem;
}
.prose{max-width:1200px; font-size:1.02rem;}
.prose h2{font-size:1.7rem;}
.prose h3{font-size:1.2rem;}
.prose table{border-collapse:collapse; width:100%; margin:1.2em 0;}
.prose table th,.prose table td{border-bottom:1px solid var(--border); padding:.6em .5em; text-align:left;}

/* ---------- Hero (Startseite) ----------
   Das eigentliche Foto steht jetzt oben im .top-banner (Slider); die
   Hero-Karte nutzt dieselbe .card-box wie alle anderen Seiten, nur mit
   groesserer Ueberschrift. */
.hero-copy{position:relative; z-index:1; max-width:1200px;}
.hero-copy h1,.hero-copy h2{font-size:clamp(2rem,3vw,2.8rem); letter-spacing:-.01em;}
.hero-copy p{font-size:1.1rem;}
.hero-copy a.btn,.hero-copy a{
  display:inline-flex; align-items:center; gap:.5rem;
}

/* ---------- Rechte Spalte ----------
   Ein durchgehendes Kaertchen aus Block 2 (oben) + Block 3 (unten) -
   entspricht der frueheren "rightbox" (z. B. Sponsoren-Logos, Kontakt).
   Erscheint auf JEDER Seite, sobald einer der beiden Bloecke gefuellt
   ist. Mehrere h3-Ueberschriften werden automatisch durch eine
   Trennlinie optisch abgesetzt; sind Block 2 UND Block 3 gefuellt,
   setzt .rail-divider eine zusaetzliche Trennlinie dazwischen. */
aside.rail{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-m);
  padding:1.3rem 1.4rem; box-shadow:var(--shadow);
}
aside.rail h3,aside.rail h4{font-size:.95rem; margin:0 0 .7rem;}
aside.rail h3 ~ h3,aside.rail h3 ~ h4{margin-top:1.3rem; padding-top:1.2rem; border-top:1px solid var(--border);}
aside.rail p{font-size:.86rem; margin-bottom:.5rem;}
aside.rail ul{list-style:none; margin:0; padding:0; font-size:.86rem;}
aside.rail li{padding:.3rem 0;}
aside.rail img{margin:0 auto .8rem;}
aside.rail .rail-divider{margin:1.3rem 0; border-top:1px solid var(--border);}
@media (min-width:1181px){
  aside.rail{position:sticky; top:106px;}
}

/* ---------- Footer ---------- */
footer.site-footer{background:var(--green-900); color:#dcecc4; margin-top:3rem;}
.footer-bottom .wrap{max-width:var(--maxw); margin:0 auto; padding:1.1rem 2.5rem; display:flex; justify-content:space-between; font-size:.78rem; color:#9fbf80; flex-wrap:wrap; gap:.5rem;}
footer.site-footer a{color:#c8dcae;}

/* ---------- Responsive ----------
   Ab hier wird grundsaetzlich einspaltig gestapelt: Unternavigation
   oben, Hauptinhalt, rechte Spalte (Sponsoren/Kontakt) unten - alle
   Bereiche bleiben sichtbar und erreichbar, nichts wird versteckt. */
@media (max-width:1180px){
  .layout,.layout.no-rail,.layout.no-side,.layout.no-side.no-rail{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"side" "main" "rail";
  }
  .side-nav{position:static; margin-bottom:2rem;}
  .side-nav ul{flex-direction:row; flex-wrap:wrap; border-left:none; gap:.4rem;}
  .side-nav a.side-link{border:1px solid var(--border); border-radius:999px; margin-left:0;}
  .side-nav a.side-link.current,.side-nav a.side-link.trail{border-color:var(--green-500);}
  aside.rail{margin-top:.5rem;}
}
@media (max-width:880px){
  .header-inner{padding:0 1.2rem;}
  nav.primary{display:none; width:100%; order:3;}
  nav.primary.open{display:block;}
  .header-inner{flex-wrap:wrap;}
  .nav-toggle{display:flex; margin-left:auto;}
  nav.primary ul.nav-list{flex-direction:column; padding:.5rem 0 1rem;}
  nav.primary a.nav-link{height:auto; padding:.7rem .2rem; border-bottom:1px solid var(--border);}
  ul.nav-dropdown{position:static; display:block; box-shadow:none; border:none; padding:0 0 .4rem 1rem; min-width:0;}
  li.nav-item:hover > ul.nav-dropdown{display:block;}

  .page-wrap{padding:2rem 1.2rem 3.5rem;}
  .hero-copy{padding:2.2rem 1.4rem 2.6rem;}
  .utility-bar .wrap,.footer-bottom .wrap{padding-left:1.2rem; padding-right:1.2rem;}
}