/* ==========================================================================
   Vereins-Vorlage — Mix aus gastro.elven-commerce.de und physio.elven-commerce.de
   Gastro:  hero-full mit Scrim, Statusleiste, Zeilenliste, überlappender Kasten
   Physio:  Eyebrow mit Strich, Kennzahlenband, Zeilen mit Rundbild, heller Footer
   ========================================================================== */

@font-face{font-family:'Archivo';font-style:normal;font-weight:500 800;font-stretch:100%;font-display:swap;src:url('/assets/fonts/archivo-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500 800;font-stretch:100%;font-display:swap;src:url('/assets/fonts/archivo-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/worksans-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/worksans-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;width:100%;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;width:100%;}

:root{
  --paper:#f5f6f9;
  --paper-warm:#eef0f5;
  --ink:#0a1530;
  --ink-soft:#4a5568;
  --navy:#0a1530;
  --blue:#2355b0;
  --blue-light:#4a8fff;
  --sky:#b8cfef;
  --akzent:#caa53d;
  --akzent-ink:#3a2a08;
  --line:rgba(10,21,48,.18);
  --font-display:'Archivo', system-ui, sans-serif;
  --font-body:'Work Sans', system-ui, sans-serif;
  --radius:14px;
}

img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
button{font:inherit;border:none;background:none;cursor:pointer;}

h1,h2,h3{font-family:var(--font-display);font-weight:700;margin:0 0 .45em;color:var(--navy);line-height:1.12;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;}
h1{font-size:clamp(2rem,7vw,3.4rem);font-weight:800;letter-spacing:-.02em;}
h2{font-size:clamp(1.6rem,4vw,2.4rem);letter-spacing:-.015em;}
h3{font-size:clamp(1.05rem,2.4vw,1.3rem);}
p{margin:0 0 .9em;color:var(--ink-soft);}

.container{width:100%;max-width:1180px;margin:0 auto;padding:0 28px;}
section{padding:44px 0;}
@media(min-width:900px){ section{padding:64px 0;} }

/* Eyebrow mit Strich — Physio-Handschrift */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;color:var(--blue);font-weight:700;margin-bottom:10px;font-family:var(--font-body);}
.eyebrow::before{content:"";width:20px;height:2px;background:var(--blue);display:inline-block;flex-shrink:0;}

.section-head{max-width:56ch;margin-bottom:26px;}
.section-link{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--navy);margin-top:22px;}
.section-link::after{content:"→";}
.section-link:hover{color:var(--blue);}

.reveal{opacity:0;transform:translateY(12px);transition:opacity .5s ease, transform .5s ease;}
.reveal.in{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto;}*{animation:none !important;transition:none !important;}}
:focus-visible{outline:3px solid var(--blue-light);outline-offset:2px;}

.dark-band{background:var(--navy);color:var(--paper);}
.dark-band h1,.dark-band h2,.dark-band h3{color:var(--paper);}
.dark-band p{color:rgba(245,246,249,.72);}
.dark-band .eyebrow{color:var(--akzent);}
.dark-band .eyebrow::before{background:var(--akzent);}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 24px;border-radius:999px;font-weight:700;font-size:.98rem;border:1px solid transparent;cursor:pointer;}
.btn-call{background:var(--navy);color:var(--paper);}
.btn-call:hover{background:var(--blue);}
.btn-ghost{background:transparent;color:var(--navy);border-color:var(--navy);}
.btn-ghost:hover{background:var(--navy);color:var(--paper);}
.dark-band .btn-ghost{color:var(--paper);border-color:rgba(245,246,249,.6);}
.dark-band .btn-ghost:hover{background:var(--paper);color:var(--navy);}

/* ---- Navigation (Physio-Struktur) ---- */
.nav{position:sticky;top:0;z-index:50;background:rgba(245,246,249,.96);border-bottom:1px solid var(--line);}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;max-width:1180px;margin:0 auto;}
.brand{font-family:var(--font-display);font-weight:800;font-size:1.2rem;color:var(--navy);letter-spacing:-.01em;}
.brand span{color:var(--blue);}
.nav-links{display:none;gap:22px;}
.nav-links a{font-size:.92rem;font-weight:600;color:var(--ink);}
.nav-links a:hover{color:var(--blue);}
.nav-call{display:none;align-items:center;gap:8px;background:var(--navy);color:var(--paper);padding:10px 18px;border-radius:999px;font-weight:600;font-size:.88rem;white-space:nowrap;}
.burger{padding:6px;display:flex;flex-direction:column;gap:5px;}
.burger span{width:22px;height:2px;background:var(--navy);display:block;transition:transform .2s, opacity .2s;}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.mobile-menu{display:none;flex-direction:column;padding:4px 20px 16px;border-top:1px solid var(--line);max-height:78vh;overflow-y:auto;}
.mobile-menu.open{display:flex;}
.mobile-menu a{padding:12px 4px;color:var(--ink);font-weight:600;border-bottom:1px solid var(--line);}
.mobile-menu .menu-gruppe{padding:18px 4px 4px;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);font-weight:700;border:0;}
.mobile-menu .nav-call{display:flex;justify-content:center;margin-top:14px;}
@media(min-width:900px){
  .nav-links{display:flex;}
  .nav-call{display:inline-flex;}
  .burger{display:none;}
  .mobile-menu{display:none !important;}
}

/* ---- Hero: Gastro-Prinzip ---- */
.home-hero{position:relative;overflow:hidden;min-height:72vh;display:flex;align-items:flex-end;}
.home-hero-bg{position:absolute;inset:-20px;background:linear-gradient(135deg, var(--blue) 0%, var(--navy) 55%, var(--blue-light) 130%);filter:blur(2px);}
.home-hero-bg img{width:100%;height:100%;object-fit:cover;filter:none;}
.home-hero-scrim{position:absolute;inset:0;background:linear-gradient(0deg, rgba(10,21,48,.95) 0%, rgba(10,21,48,.55) 40%, rgba(10,21,48,.2) 100%);}
.home-hero-content{position:relative;z-index:1;padding:120px 0 52px;width:100%;color:#fff;}
.hero-rule{width:56px;height:3px;background:var(--akzent);margin-bottom:20px;}
.hero-kicker{display:block;font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--akzent);margin-bottom:14px;}
.home-hero h1{color:#fff;max-width:15ch;margin-bottom:16px;}
.home-hero .lead{color:rgba(255,255,255,.84);font-size:1.02rem;max-width:46ch;margin-bottom:26px;}
.hero-ctas{display:flex;flex-direction:column;gap:10px;align-items:stretch;}
.hero-ctas .btn{width:100%;}
@media(min-width:640px){
  .hero-ctas{flex-direction:row;}
  .hero-ctas .btn{width:auto;}
}
@media(min-width:900px){ .home-hero{min-height:78vh;} .home-hero-content{padding:150px 0 64px;} }

/* ---- Statusleiste (Gastro) ---- */
.heute-bar{background:#071026;color:#fff;border-top:1px solid rgba(255,255,255,.1);padding:0;}
.heute-inner{display:flex;flex-direction:column;gap:14px;padding-top:18px;padding-bottom:18px;}
.heute-item{display:flex;align-items:center;gap:11px;font-size:.92rem;color:rgba(255,255,255,.82);}
.heute-item strong{color:#fff;font-weight:600;}
.heute-dot{width:9px;height:9px;border-radius:50%;background:var(--akzent);flex-shrink:0;box-shadow:0 0 0 4px rgba(202,165,61,.22);}
.heute-link{color:var(--akzent);font-weight:700;white-space:nowrap;}
.heute-link:hover{text-decoration:underline;}
@media(min-width:860px){ .heute-inner{flex-direction:row;align-items:center;justify-content:space-between;gap:32px;} }

/* ---- Kennzahlenband (Physio-Trustbar) ---- */
.trustbar{padding:24px 0;background:linear-gradient(135deg,#1e3f74,#4a7fd4);}
.trust-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 16px;}
.trust-num{font-family:var(--font-display);font-size:1.7rem;color:#fff;font-weight:800;line-height:1;}
.trust-label{font-size:.8rem;color:rgba(255,255,255,.85);font-weight:600;margin-top:4px;}
@media(min-width:640px){ .trust-grid{grid-template-columns:repeat(4,1fr);} }

/* ---- Spieltag ---- */
.spieltag-grid{display:grid;gap:14px;}
@media(min-width:820px){ .spieltag-grid{grid-template-columns:1fr 1fr;gap:20px;} }
.spiel-karte{border:1px solid rgba(255,255,255,.18);border-radius:var(--radius);padding:22px 20px;background:rgba(255,255,255,.04);}
.spiel-label{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--akzent);font-weight:700;margin-bottom:16px;}
.spiel-paarung{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;}
.spiel-team{font-family:var(--font-display);font-weight:700;font-size:1rem;color:#fff;min-width:0;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;}
.spiel-team.gast{text-align:right;}
.spiel-ergebnis{font-family:var(--font-display);font-weight:800;font-size:1.8rem;color:#fff;white-space:nowrap;line-height:1;}
.spiel-ergebnis.offen{color:rgba(255,255,255,.4);font-size:1.4rem;}
.spiel-meta{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.14);font-size:.85rem;color:rgba(255,255,255,.62);display:flex;flex-wrap:wrap;gap:5px 16px;}

/* ---- Abteilungen: Zeilenliste (Gastro-Herkunft) ---- */
.abt-list{margin-top:28px;border-top:1px solid var(--line);}
.abt-row{display:grid;grid-template-columns:auto 1fr;column-gap:20px;row-gap:2px;align-items:baseline;padding:22px 4px;border-bottom:1px solid var(--line);transition:background .18s ease;}
.abt-row:hover{background:#fff;}
.abt-zahl{font-family:var(--font-display);font-size:clamp(1.8rem,5.5vw,2.7rem);line-height:1;color:var(--akzent);font-weight:800;white-space:nowrap;}
.abt-name{font-family:var(--font-display);font-size:1.14rem;font-weight:700;color:var(--navy);}
.abt-was{grid-column:2;color:var(--ink-soft);font-size:.92rem;}
.abt-teams{grid-column:2;margin-top:10px;display:flex;flex-wrap:wrap;gap:6px;}
.abt-team-chip{font-size:.78rem;font-weight:600;padding:5px 12px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--ink-soft);}
.abt-team-chip:hover{border-color:var(--blue);color:var(--blue);}

/* ---- Mannschaftszeilen (Physio-Therapeutenzeile) ---- */
.team-list{display:flex;flex-direction:column;gap:12px;margin-top:26px;}
.team-row{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;display:flex;align-items:center;gap:16px;}
.team-row:hover{border-color:var(--blue);}
.team-kreis{flex-shrink:0;width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#1e3f74,#b8cfef);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);color:#fff;font-weight:800;font-size:1.1rem;}
@media(min-width:900px){ .team-kreis{width:80px;height:80px;font-size:1.3rem;} }
.team-row-info{flex:1;min-width:0;}
.team-row-info h3{font-size:1.02rem;margin:0 0 2px;}
.team-row-liga{color:var(--blue);font-weight:700;font-size:.78rem;margin-bottom:2px;}
.team-row-ort{font-size:.85rem;color:var(--ink-soft);margin:0;}
.team-row-pfeil{flex-shrink:0;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--navy);font-weight:700;transition:background .15s ease,color .15s ease;}
.team-row:hover .team-row-pfeil{background:var(--navy);color:#fff;border-color:var(--navy);}

/* ---- Termine ---- */
.termin-list{border-top:1px solid var(--line);margin-top:26px;}
.termin-row{display:grid;grid-template-columns:auto 1fr;column-gap:20px;padding:20px 4px;border-bottom:1px solid var(--line);align-items:start;}
.termin-tag{text-align:center;min-width:58px;}
.termin-tag strong{display:block;font-family:var(--font-display);font-size:1.8rem;font-weight:800;line-height:1;color:var(--blue);}
.termin-tag span{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);}
.termin-inhalt{min-width:0;}
.termin-inhalt h3{margin:0 0 4px;}
.termin-meta{font-size:.85rem;color:var(--ink-soft);margin:0 0 6px;}
.termin-inhalt p{font-size:.92rem;margin:0;}

/* ---- News als Foto-Karten im Streifen (Physio-Prinzip) ---- */
.news-strip{display:flex;gap:12px;overflow-x:auto;padding-bottom:10px;margin-top:26px;}
.news-card{flex-shrink:0;width:min(74vw,290px);position:relative;border-radius:var(--radius);overflow:hidden;height:250px;display:block;background:linear-gradient(135deg,#1e3f74,#b8cfef);}
.news-card > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.news-scrim{position:absolute;inset:0;background:linear-gradient(180deg, rgba(10,21,48,.04) 30%, rgba(10,21,48,.92));}
.news-text{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:18px;min-width:0;}
.news-text .datum{display:block;font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;color:var(--akzent);font-weight:700;margin-bottom:5px;}
.news-text h3{color:#fff;font-size:1.02rem;margin:0 0 4px;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;}
.news-text p{color:rgba(255,255,255,.8);margin:0;font-size:.85rem;}
@media(min-width:900px){
  .news-strip{overflow-x:visible;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
  .news-card{width:auto;height:280px;}
}

/* ---- Verein: überlappender Zweispalter (Gastro) ---- */
.haus-grid{display:grid;}
.haus-photo{aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;background:linear-gradient(135deg,#17335f,#93b5e0);}
.haus-photo img{width:100%;height:100%;object-fit:cover;}
.haus-text{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px;margin:-34px 16px 0;position:relative;z-index:1;}
.haus-text h2{margin-bottom:14px;}
.haus-facts{margin-top:22px;border-top:1px solid var(--line);padding-top:16px;display:flex;flex-wrap:wrap;gap:10px 24px;}
.haus-fact{font-size:.85rem;color:var(--ink-soft);}
.haus-fact strong{display:block;font-family:var(--font-display);font-size:1.3rem;font-weight:800;color:var(--blue);line-height:1.2;}
@media(min-width:900px){
  .haus-grid{grid-template-columns:1.05fr .95fr;align-items:center;}
  .haus-photo{aspect-ratio:4/4.2;}
  .haus-text{margin:0 0 0 -80px;padding:44px 40px;box-shadow:0 24px 60px rgba(10,21,48,.14);}
}

/* ---- Vorstand als Foto-Karten ---- */
.leute-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px;}
@media(min-width:900px){ .leute-grid{grid-template-columns:repeat(4,1fr);} }
.leute-card{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:3/4;display:block;background:linear-gradient(135deg,#1e3f74,#b8cfef);}
.leute-card > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%;}
.leute-scrim{position:absolute;inset:0;background:linear-gradient(180deg, rgba(10,21,48,.05) 40%, rgba(10,21,48,.92));}
.leute-text{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:16px;}
.leute-text h3{color:#fff;font-size:.98rem;margin:0 0 2px;}
.leute-text p{color:rgba(255,255,255,.8);margin:0;font-size:.82rem;}

/* ---- Trainingszeiten als Tabelle (Physio-hours-table) ---- */
.zeit-table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);margin-top:22px;}
.zeit-table td{padding:12px 16px;font-size:.9rem;border-bottom:1px solid var(--line);}
.zeit-table tr:last-child td{border-bottom:none;}
.zeit-table td:first-child{font-weight:700;font-family:var(--font-display);}
.zeit-table td:last-child{text-align:right;color:var(--ink-soft);font-weight:600;}

/* ---- Sponsoren als Zeilenband ---- */
.sponsor-band{border-top:1px solid var(--line);margin-top:26px;}
.sponsor-zeile{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding:15px 4px;border-bottom:1px solid var(--line);}
.sponsor-name{font-family:var(--font-display);font-weight:700;font-size:1.02rem;min-width:0;overflow-wrap:break-word;color:var(--navy);}
.sponsor-stufe{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap;}
.sponsor-zeile.haupt .sponsor-name{font-size:1.4rem;}
.sponsor-zeile.haupt .sponsor-stufe{color:var(--akzent);font-weight:700;}

/* ---- Widget-Slot ---- */
.widget-slot{border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:44px 24px;text-align:center;margin-top:22px;}
.widget-slot .eyebrow{margin-bottom:10px;}
.widget-slot p{max-width:46ch;margin-left:auto;margin-right:auto;margin-bottom:0;}

.page-header{padding:36px 0 8px;}
.page-header h1{max-width:18ch;}
.page-header p{max-width:52ch;margin-top:6px;}
@media(min-width:900px){ .page-header{padding:52px 0 12px;} }

.breadcrumb{font-size:.8rem;color:var(--ink-soft);margin-bottom:14px;}
.breadcrumb a{color:var(--blue);font-weight:600;}

/* ---- Abschlussband (Physio cta-end) ---- */
.cta-end{background:linear-gradient(135deg,#1e3f74,#4a7fd4);padding:44px 0;border-top:3px solid var(--ink);margin-top:32px;}
.cta-end-inner{display:flex;flex-direction:column;gap:16px;align-items:flex-start;}
.cta-end h2{font-size:1.35rem;margin-bottom:4px;color:#fff;}
.cta-end p{margin:0;color:rgba(255,255,255,.88);}
.cta-end .btn{width:100%;background:#fff;color:var(--navy);}
.cta-end .btn:hover{background:var(--paper-warm);}
@media(min-width:640px){
  .cta-end-inner{flex-direction:row;justify-content:space-between;align-items:center;}
  .cta-end .btn{width:auto;}
}

/* ---- Footer hell (Physio) ---- */
footer{background:var(--paper-warm);border-top:3px solid var(--ink);padding-top:36px;}
.footer-grid{display:grid;grid-template-columns:1fr;gap:26px;padding-bottom:26px;}
.footer-logo{font-family:var(--font-display);font-weight:800;font-size:1.15rem;color:var(--navy);margin-bottom:6px;}
.footer-brand p{font-size:.86rem;margin:0 0 4px;color:var(--ink-soft);}
.footer-label{display:block;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);font-weight:700;margin-bottom:10px;}
.footer-col{display:flex;flex-direction:column;gap:7px;}
.footer-col a{font-size:.88rem;color:var(--ink);font-weight:500;}
.footer-col a:hover{color:var(--blue);}
.footer-bottom{border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px;padding:14px 0 20px;font-size:.78rem;color:var(--ink-soft);}
@media(min-width:640px){
  .footer-grid{grid-template-columns:1.3fr 1fr 1fr 1fr;}
  .footer-bottom{flex-direction:row;justify-content:space-between;align-items:center;}
}

/* ---- Nächster Termin: Leiste mit Hierarchie ---- */
.naechster{background:#071026;color:#fff;padding:0;border-top:1px solid rgba(255,255,255,.1);}
.n-inner{display:grid;grid-template-columns:auto 1fr;column-gap:18px;row-gap:16px;align-items:center;padding-top:22px;padding-bottom:22px;}
.n-datum{display:flex;flex-direction:column;align-items:center;justify-content:center;width:66px;height:66px;border-radius:12px;background:var(--akzent);color:var(--akzent-ink);flex-shrink:0;}
.n-tag{font-family:var(--font-display);font-size:1.7rem;font-weight:800;line-height:1;}
.n-monat{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;margin-top:2px;}
.n-mitte{min-width:0;}
.n-label{display:block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--akzent);font-weight:700;margin-bottom:4px;}
.n-titel{font-family:var(--font-display);font-size:1.12rem;font-weight:700;color:#fff;margin:0 0 3px;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;}
.n-ort{font-size:.86rem;color:rgba(255,255,255,.62);margin:0;}
.n-rechts{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;gap:18px;border-top:1px solid rgba(255,255,255,.12);padding-top:16px;}
.n-cd{display:flex;gap:14px;}
.n-cd-block{text-align:center;min-width:44px;}
.n-cd-zahl{display:block;font-family:var(--font-display);font-size:1.4rem;font-weight:800;color:#fff;line-height:1;}
.n-cd-label{display:block;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-top:4px;}
.n-link{color:var(--akzent);font-weight:700;white-space:nowrap;font-size:.9rem;}
.n-link:hover{text-decoration:underline;}
.n-leer{color:rgba(255,255,255,.6);font-size:.95rem;padding:22px 0;}
@media(min-width:900px){
  .n-inner{grid-template-columns:auto 1fr auto auto;column-gap:26px;padding-top:20px;padding-bottom:20px;}
  .n-rechts{grid-column:auto;border-top:0;padding-top:0;gap:26px;}
}

/* ---- Kennzahlen freigestellt im Zickzack ---- */
.zahlen{padding-top:78px;padding-bottom:78px;}
.z-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px 18px;align-items:end;}
@media(min-width:820px){ .z-grid{grid-template-columns:repeat(4,1fr);gap:20px;} }
.z-spalte{min-width:0;}
.z-num{font-family:var(--font-display);font-size:clamp(2.4rem,6vw,3.6rem);font-weight:800;line-height:1;color:var(--navy);letter-spacing:-.02em;opacity:0;transform:translateY(10px);transition:opacity .5s ease, transform .5s ease;}
.z-num.akzent{color:var(--blue);}
.z-label{font-size:.84rem;color:var(--ink-soft);font-weight:600;}
.z-spalte.oben .z-label{margin-bottom:8px;}
.z-spalte.unten .z-label{margin-top:8px;}
.z-v0{padding-bottom:0;}
.z-v1{padding-bottom:34px;}
.z-v2{padding-bottom:10px;}
.z-v3{padding-bottom:48px;}
@media(min-width:820px){
  .z-v1{padding-bottom:56px;}
  .z-v3{padding-bottom:78px;}
}
@media (prefers-reduced-motion: reduce){ .z-num{opacity:1 !important;transform:none !important;} }

/* ---- Kennzahlen auf dunklem Grund ---- */
.zahlen{background:var(--navy);}
.zahlen .z-num{color:#fff;}
.zahlen .z-num.akzent{color:var(--akzent);}
.zahlen .z-label{color:rgba(255,255,255,.58);}

/* ---- Zickzack um die Mittelachse statt an der Unterkante ---- */
.z-grid{align-items:center;}
.z-v0,.z-v1,.z-v2,.z-v3{padding-bottom:0;}
.z-v0{transform:translateY(28px);}
.z-v1{transform:translateY(-28px);}
.z-v2{transform:translateY(18px);}
.z-v3{transform:translateY(-40px);}
@media(min-width:820px){
  .z-v0{transform:translateY(30px);}
  .z-v1{transform:translateY(-26px);}
  .z-v2{transform:translateY(16px);}
  .z-v3{transform:translateY(-42px);}
}
.zahlen{padding-top:96px;padding-bottom:96px;}

/* ---- Zahlengruppe horizontal zentriert statt volle Breite ---- */
.zahlen .z-grid{max-width:760px;margin-left:auto;margin-right:auto;justify-items:center;text-align:center;}
@media(min-width:820px){ .zahlen .z-grid{gap:0 40px;} }

/* ---- Äußere Zahlen weiter nach außen (nur Desktop, mobil ist 2x2) ---- */
@media(min-width:820px){
  .z-v0{transform:translate(-16px,30px);}
  .z-v3{transform:translate(28px,-42px);}
}

@media(min-width:820px){
  .z-v0{transform:translate(-36px,30px);}
  .z-v3{transform:translate(48px,-42px);}
}

@media(min-width:820px){
  .z-v0{transform:translate(-66px,30px);}
  .z-v3{transform:translate(78px,-42px);}
}

@media(min-width:820px){
  .z-v0{transform:translate(-106px,30px);}
  .z-v3{transform:translate(118px,-42px);}
}

@media(min-width:820px){
  .z-v1{transform:translate(-36px,-26px);}
  .z-v2{transform:translate(40px,16px);}
}

@media(min-width:820px){
  .z-v1{transform:translate(-56px,-26px);}
  .z-v2{transform:translate(60px,16px);}
}

/* ---- Durchgehende Bildbühne: Hero scharf, unterer Teil weichgezeichnet ---- */
.bild-buehne{position:relative;overflow:hidden;background:var(--navy);}
.bb-bild{position:absolute;inset:0;z-index:0;}
.bb-bild img{width:100%;height:100%;object-fit:cover;display:block;}
.bb-grund{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg, rgba(10,21,48,.42) 0%, rgba(10,21,48,.66) 45%, rgba(10,21,48,.74) 100%);}
.bild-buehne > .home-hero,
.bild-buehne > .naechster,
.bild-buehne > .bb-blur{position:relative;z-index:2;}
.bild-buehne .home-hero{background:transparent;min-height:74vh;}
.bild-buehne .home-hero::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg, rgba(10,21,48,.82) 0%, rgba(10,21,48,.28) 46%, rgba(10,21,48,0) 100%);}
.bild-buehne .naechster{background:rgba(7,16,38,.82);}
.bb-blur{
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
  background:rgba(10,21,48,.6);
  border-top:3px solid rgba(0,0,0,.85);
}
.bb-blur .zahlen,.bb-blur .dark-band{background:transparent;}
@supports not (backdrop-filter: blur(4px)) {
  .bb-blur{background:rgba(10,21,48,.93);}
}

/* ---- Bild füllt die Bühne, statt sie aufzuspannen ---- */
.bild-buehne{display:flow-root;}
.bb-bild{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;}
.bb-bild img{width:100%;height:100%;object-fit:cover;object-position:center 42%;}
.bild-buehne .home-hero{min-height:0;height:auto;}
.bild-buehne .home-hero-content{padding-top:132px;padding-bottom:56px;}
@media(min-width:900px){ .bild-buehne .home-hero-content{padding-top:170px;padding-bottom:70px;} }

/* ---- Hero: eigene Höhe, unabhängig vom Bildformat ---- */
.bild-buehne .home-hero{min-height:clamp(420px,64vh,620px);display:flex;align-items:flex-end;}
.bild-buehne .home-hero-content{padding-top:120px;padding-bottom:52px;}
@media(min-width:900px){
  .bild-buehne .home-hero{min-height:clamp(480px,70vh,700px);}
  .bild-buehne .home-hero-content{padding-top:150px;padding-bottom:64px;}
}

/* ---- Sicherheitsabstände: Innenabstand wächst mit der Fensterbreite ---- */
.container{padding-left:22px;padding-right:22px;}
@media(min-width:640px){ .container{padding-left:36px;padding-right:36px;} }
@media(min-width:1000px){ .container{padding-left:56px;padding-right:56px;} }
@media(min-width:1320px){ .container{padding-left:72px;padding-right:72px;} }
.nav-inner{padding-left:22px;padding-right:22px;}
@media(min-width:640px){ .nav-inner{padding-left:36px;padding-right:36px;} }
@media(min-width:1000px){ .nav-inner{padding-left:56px;padding-right:56px;} }
@media(min-width:1320px){ .nav-inner{padding-left:72px;padding-right:72px;} }
.mobile-menu{padding-left:22px;padding-right:22px;}
@media(min-width:640px){ .mobile-menu{padding-left:36px;padding-right:36px;} }

/* ---- Terminleiste als Milchglas ---- */
.bild-buehne .naechster{
  background:rgba(255,255,255,.1);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-top:1px solid rgba(255,255,255,.22);
  border-bottom:1px solid rgba(255,255,255,.14);
}
.bild-buehne .n-titel{text-shadow:0 1px 3px rgba(10,21,48,.45);}
.bild-buehne .n-ort{color:rgba(255,255,255,.76);}
.bild-buehne .n-cd-label{color:rgba(255,255,255,.66);}
@supports not (backdrop-filter: blur(4px)) {
  .bild-buehne .naechster{background:rgba(10,21,48,.8);}
}

/* ---- Leiste: neutrales Milchglas ohne Farbstich ---- */
.bild-buehne .naechster{
  background:rgba(150,158,175,.16);
  backdrop-filter:blur(18px) saturate(60%);
  -webkit-backdrop-filter:blur(18px) saturate(60%);
}

/* ---- Leiste: halb weiß, halb durchsichtig, mit Navy-Stich ---- */
.bild-buehne .naechster{
  background:linear-gradient(rgba(10,21,48,.34), rgba(10,21,48,.34)), rgba(255,255,255,.3);
  backdrop-filter:blur(20px) saturate(45%);
  -webkit-backdrop-filter:blur(20px) saturate(45%);
  border-top:1px solid rgba(255,255,255,.26);
  border-bottom:1px solid rgba(255,255,255,.12);
}

.bild-buehne .naechster{
  background:linear-gradient(rgba(10,21,48,.5), rgba(10,21,48,.5)), rgba(255,255,255,.16);
  backdrop-filter:blur(20px) saturate(70%);
  -webkit-backdrop-filter:blur(20px) saturate(70%);
}

/* ---- Leiste weicher einbetten ---- */
.bild-buehne .naechster{
  border-top:0;
  border-bottom:0;
  position:relative;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.55) 0%, #000 18%, #000 82%, rgba(0,0,0,.55) 100%);
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.55) 0%, #000 18%, #000 82%, rgba(0,0,0,.55) 100%);
}
.bild-buehne .bb-blur{border-top:0;}

/* ---- Box-Effekt zurück: Kanten wieder sichtbar ---- */
.bild-buehne .naechster{
  mask-image:none;
  -webkit-mask-image:none;
  border-top:1px solid rgba(255,255,255,.26);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.bild-buehne .bb-blur{border-top:3px solid rgba(0,0,0,.85);}

/* ---- Leiste: Kontrast runter ---- */
.bild-buehne .naechster{
  background:linear-gradient(rgba(10,21,48,.38), rgba(10,21,48,.38)), rgba(255,255,255,.12);
  border-top:1px solid rgba(255,255,255,.15);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.bild-buehne .bb-blur{border-top:3px solid rgba(0,0,0,.5);}

.bild-buehne .naechster{
  background:linear-gradient(rgba(10,21,48,.26), rgba(10,21,48,.26)), rgba(255,255,255,.08);
  border-top:1px solid rgba(255,255,255,.09);
  border-bottom:1px solid rgba(255,255,255,.04);
}
.bild-buehne .bb-blur{border-top:3px solid rgba(0,0,0,.3);}

/* ---- Spieltag an die Unterkante der Bühne ---- */
.bb-blur .dark-band{padding-top:96px;padding-bottom:5px;}

.bb-blur .dark-band{padding-top:86px;padding-bottom:15px;}

/* ---- Zahlenblock nach unten, 1912 auf 15px an den Spieltag-Badge ---- */
.bb-blur .zahlen{padding-top:150px;padding-bottom:0;}
.bb-blur .dark-band{padding-top:45px;padding-bottom:15px;}

/* ---- Paare auf gleiche Höhe: 1912+3 und 7+8 ---- */
.z-v0{transform:translateY(28px);}
.z-v1{transform:translateY(-28px);}
.z-v2{transform:translateY(28px);}
.z-v3{transform:translateY(-28px);}
@media(min-width:820px){
  .z-v0{transform:translate(-106px,30px);}
  .z-v1{transform:translate(-56px,-26px);}
  .z-v2{transform:translate(60px,30px);}
  .z-v3{transform:translate(118px,-26px);}
}

.bb-blur .zahlen{padding-top:140px;padding-bottom:10px;}

.bb-blur .zahlen{padding-top:130px;padding-bottom:20px;}

/* ---- Spieltag-Kopf zentriert ---- */
.bb-blur .dark-band .container{text-align:center;}
.bb-blur .dark-band .eyebrow{justify-content:center;}
.bb-blur .dark-band .spieltag-grid{text-align:left;}

/* ---- Spieltag-Kopf wieder linksbündig ---- */
.bb-blur .dark-band .container{text-align:left;}
.bb-blur .dark-band .eyebrow{justify-content:flex-start;}

.bb-blur .zahlen{padding-top:110px;padding-bottom:40px;}

.bb-blur .zahlen{padding-top:80px;padding-bottom:70px;}

/* ---- Zahlen größer und höher, Leiste entfällt ---- */
.z-num{font-size:clamp(3.2rem,8vw,5.2rem);}
.z-label{font-size:.9rem;}
.bb-blur .zahlen{padding-top:40px;padding-bottom:70px;}
.bb-blur{border-top:0;}

/* ---- Blur und Abdunklung weich einblenden statt harte Kante ---- */
.bb-blur{
  position:relative;
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.bb-blur::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  background:linear-gradient(180deg, rgba(10,21,48,0) 0%, rgba(10,21,48,.4) 22%, rgba(10,21,48,.62) 55%, rgba(10,21,48,.66) 100%);
  mask-image:linear-gradient(180deg, transparent 0%, #000 24%);
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 24%);
  pointer-events:none;
}
.bb-blur > *{position:relative;z-index:1;}
@supports not (backdrop-filter: blur(4px)) {
  .bb-blur::before{background:linear-gradient(180deg, rgba(10,21,48,0) 0%, rgba(10,21,48,.9) 30%, rgba(10,21,48,.94) 100%);}
}

/* ---- Obere Bildhälfte komplett klar, Abdunklung erst unten ---- */
.bb-grund{background:linear-gradient(180deg, rgba(10,21,48,0) 0%, rgba(10,21,48,0) 42%, rgba(10,21,48,.28) 62%, rgba(10,21,48,.55) 82%, rgba(10,21,48,.68) 100%);}
.bild-buehne .home-hero::after{background:linear-gradient(0deg, rgba(10,21,48,.72) 0%, rgba(10,21,48,.22) 38%, rgba(10,21,48,0) 62%);}

/* ---- Blur-Schicht in den Hero hineinziehen, damit keine Kante entsteht ---- */
.bb-blur::before{
  top:-200px;
  background:linear-gradient(180deg, rgba(10,21,48,0) 0%, rgba(10,21,48,0) 30%, rgba(10,21,48,.34) 52%, rgba(10,21,48,.6) 78%, rgba(10,21,48,.66) 100%);
  mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.35) 26%, #000 52%);
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.35) 26%, #000 52%);
}

/* ---- Nur noch ein durchgehender Verlauf, kein zweiter am Hero-Ende ---- */
.bild-buehne .home-hero::after{background:none;}
.bb-grund{background:linear-gradient(180deg, rgba(10,21,48,0) 0%, rgba(10,21,48,0) 34%, rgba(10,21,48,.3) 52%, rgba(10,21,48,.52) 66%, rgba(10,21,48,.66) 80%, rgba(10,21,48,.72) 100%);}

/* ---- Weichgezeichnete Bildebene statt backdrop-filter ---- */
.bb-bild-blur{position:absolute;inset:-24px;z-index:0;pointer-events:none;
  mask-image:linear-gradient(180deg, transparent 0%, transparent 38%, #000 62%);
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, transparent 38%, #000 62%);}
.bb-bild-blur img{width:100%;height:100%;object-fit:cover;object-position:center 42%;filter:blur(11px);}
.bb-blur::before{backdrop-filter:none;-webkit-backdrop-filter:none;top:0;
  mask-image:none;-webkit-mask-image:none;background:none;}

/* ---- Beide Bildebenen deckungsgleich, Blur-Rand über scale statt inset ---- */
.bb-bild-blur{inset:0;overflow:hidden;}
.bb-bild-blur img{transform:scale(1.06);transform-origin:center;}

.bb-blur{border-top:0 !important;}

/* ---- Schwacher Blur im oberen Bereich für die Lesbarkeit der Headline ---- */
.bb-bild-blur-oben{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  mask-image:linear-gradient(180deg, #000 0%, #000 30%, transparent 56%);
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 30%, transparent 56%);}
.bb-bild-blur-oben img{width:100%;height:100%;object-fit:cover;object-position:center 42%;filter:blur(5px);transform:scale(1.06);transform-origin:center;}

.bb-bild-blur-oben{
  mask-image:linear-gradient(180deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.85) 12%, transparent 42%);
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.85) 12%, transparent 42%);
}
.bb-bild-blur-oben img{filter:blur(2.5px);}

/* ---- Hero-Text höher setzen ---- */
.bild-buehne .home-hero-content{padding-bottom:130px;}
@media(min-width:900px){ .bild-buehne .home-hero-content{padding-bottom:170px;} }
.bb-bild-blur-oben{
  mask-image:linear-gradient(180deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.85) 26%, transparent 58%);
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.85) 26%, transparent 58%);
}
.bb-bild-blur img, .bb-bild-blur-oben img{transform:none;}
.bb-bild-blur-oben img{filter:blur(2px);}
.bb-bild-blur img{filter:blur(7px);}
.bb-bild-blur-oben{
  mask-image:linear-gradient(180deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,.8) 8%, transparent 32%);
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,.8) 8%, transparent 32%);
}
.bb-bild-blur{
  mask-image:linear-gradient(180deg, transparent 0%, transparent 44%, #000 68%);
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, transparent 44%, #000 68%);
}
.bb-bild-blur-oben{
  mask-image:linear-gradient(180deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,.8) 22%, transparent 40%);
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,.8) 22%, transparent 40%);
}
.z-spalte{position:relative;padding-top:18px;}
.z-spalte::before{content:'';position:absolute;top:0;left:0;width:46px;height:3px;background:#fff;}
.z-v1::before,.z-v3::before{background:var(--akzent);}
.bb-blur .zahlen{padding-top:20px;padding-bottom:70px;}
.z-spalte::before{left:50%;transform:translateX(-50%);width:52px;height:5px;}
.bb-blur .zahlen{padding-top:0;padding-bottom:100px;margin-top:-10px;}
.bb-blur .zahlen{padding-top:0;padding-bottom:120px;margin-top:-30px;}
.kader-gitter{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:18px;margin-top:34px}
.kader-karte{position:relative;background:var(--paper-warm);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.kader-karte img,.kader-platzhalter{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.kader-platzhalter{background:linear-gradient(160deg,rgba(10,21,48,.07),rgba(10,21,48,.14))}
.kader-text{padding:14px 16px 18px;width:100%;min-width:0;display:flex;flex-direction:column;gap:3px}
.kader-nr{font-family:var(--mono,inherit);font-size:.78rem;letter-spacing:.06em;color:var(--blue);font-weight:600}
.kader-name{font-weight:600;font-size:1.02rem;line-height:1.25;overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
.kader-rolle{font-size:.85rem;color:rgba(10,21,48,.62);overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
@media (max-width:600px){.kader-gitter{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}}
.team-foto{margin:0}
.team-foto img{width:100%;height:auto;display:block;border-radius:16px}
.team-foto figcaption{margin-top:12px;font-size:.88rem;color:rgba(10,21,48,.62)}
.beitrag{max-width:64ch;margin-left:auto;margin-right:auto}
.bl-absatz{font-size:1.02rem;line-height:1.72;margin-bottom:1.15em;overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
.bl-ueber{font-size:1.42rem;line-height:1.3;margin-top:2.2em;margin-bottom:.7em;letter-spacing:-.01em}
.bl-liste{margin:0 0 1.4em 1.1em;padding:0}
.bl-liste li{font-size:1.02rem;line-height:1.65;margin-bottom:.45em;overflow-wrap:break-word;hyphens:auto}
.bl-zitat{margin:2em 0;padding-left:20px;border-left:3px solid var(--blue)}
.bl-zitat p{font-size:1.14rem;line-height:1.55;font-style:italic;margin-bottom:.5em}
.bl-zitat cite{font-size:.88rem;font-style:normal;color:rgba(10,21,48,.6)}
.bl-abstand{height:36px}
.bl-bild{margin:2em 0}
.bl-bild img{width:100%;height:auto;display:block;border-radius:14px}
.bl-bild figcaption{margin-top:10px;font-size:.86rem;color:rgba(10,21,48,.6)}
.bl-bild.breite-klein{max-width:340px}
.bl-bild.breite-voll{width:100%}
.news-card.klickbar{text-decoration:none;color:inherit;display:block}
.news-mehr{display:inline-block;margin-top:10px;font-size:.84rem;font-weight:600;letter-spacing:.01em}
.news-mehr::after{content:' \2192'}
@media(min-width:900px){.bl-bild.breite-voll{width:calc(100% + 120px);margin-left:-60px}}

/* ---- Rechtsseiten: Impressum, Datenschutz ---- */
.recht-block{border-top:1px solid var(--line);margin-bottom:34px}
.recht-zeile{display:grid;grid-template-columns:220px 1fr;gap:20px;padding:14px 0;border-bottom:1px solid var(--line)}
.recht-label{font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;color:var(--text-light,#5a6678);padding-top:2px}
.recht-wert{font-size:1rem;line-height:1.6}
@media(max-width:640px){
  .recht-zeile{grid-template-columns:1fr;gap:4px;padding:12px 0}
}
.container h2{margin:34px 0 10px;font-size:1.12rem}
.container h2:first-of-type{margin-top:0}

/* ---- Footer an den Seitenboden, wenn der Inhalt kurz ist ---- */
body{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;}
body > footer{margin-top:auto;}