/* ============================================================
   TOKENS
   Farbwerte 1:1 aus "Farbcodes Sponsoringdokumentation":
   Grau #eae9e9, Schwarz #1e1e24, Weiss #ffffff, Rot #ec2422.
   Keine weiteren Farben verwendet.
   ============================================================ */
:root{
  --c-bg:#ffffff;
  --c-bg-soft:#eae9e9;
  --c-ink:#1e1e24;
  --c-ink-soft:#565a61;
  --c-rot:#ec2422;
  --c-rot-deep:#b71110;
  --line:rgba(30,30,36,.12);
  --line-strong:rgba(30,30,36,.2);
  --header-h:78px;
  --content-max:1180px;
  --radius-s:8px;
  --radius-m:16px;
  --radius-l:26px;
  --shadow-soft:0 24px 48px -28px rgba(30,30,36,.35);
  --ff-display:'Bebas Neue','Arial Narrow',Impact,sans-serif;
  --ff-body:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --ff-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --ease:cubic-bezier(.22,.85,.32,1);
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--c-bg);color:var(--c-ink);
  font-family:var(--ff-body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
h1,h2,h3,h4,p{margin:0;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}

.shell{max-width:var(--content-max);margin-inline:auto;padding-inline:clamp(20px,4vw,48px);}
.section{padding-block:clamp(64px,9vw,120px);scroll-margin-top:var(--header-h);position:relative;}
.section-soft{background:var(--c-bg-soft);}
.section-dark{background:var(--c-ink);color:#f4f2ee;}
.section-dark .lede,.section-dark p{color:rgba(244,242,238,.75);}

.eyebrow{
  font-family:var(--ff-mono);font-size:.72rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--c-rot-deep);display:inline-flex;align-items:center;gap:.5em;
  margin-bottom:1rem;
}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c-rot);flex:none;}
.section-dark .eyebrow{color:var(--c-rot);}

.num-badge{
  position:absolute;top:clamp(24px,4vw,44px);left:clamp(20px,4vw,48px);
  font-family:var(--ff-display);font-size:1.2rem;color:var(--c-ink);letter-spacing:.02em;
}
.num-badge::after{content:"";display:block;width:2px;height:120px;background:var(--c-ink);margin-top:10px;opacity:.7;}
.section-dark .num-badge{color:#f4f2ee;}
.section-dark .num-badge::after{background:#f4f2ee;}
@media (max-width:760px){.num-badge{display:none;}}

h2{
  font-family:var(--ff-display);font-weight:400;letter-spacing:.01em;text-transform:uppercase;
  font-size:clamp(2rem,3.6vw + .6rem,3.2rem);line-height:1.04;
}
h3{font-family:var(--ff-display);font-weight:400;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(1.3rem,1.6vw + .8rem,1.6rem);line-height:1.1;}
.lede{font-size:1.05rem;color:var(--c-ink-soft);max-width:60ch;}
.body-copy p + p{margin-top:1.1rem;}
.body-copy{font-size:1rem;color:var(--c-ink);max-width:62ch;}
.body-copy.soft{color:var(--c-ink-soft);}

/* buttons */
.btn{
  font-family:var(--ff-body);font-weight:700;font-size:.92rem;padding:.9rem 1.5rem;border-radius:100px;
  display:inline-flex;align-items:center;gap:.5rem;border:1.5px solid transparent;white-space:nowrap;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .25s,color .25s;
}
.btn svg{width:16px;height:16px;flex:none;transition:transform .3s var(--ease);}
.btn-primary{background:var(--c-rot);color:#fff;}
.btn-primary:hover{background:var(--c-rot-deep);box-shadow:var(--shadow-soft);transform:translateY(-2px);}
.btn-primary:hover svg{transform:translateX(3px);}
.btn-outline{border-color:var(--line-strong);color:var(--c-ink);}
.btn-outline:hover{border-color:var(--c-ink);transform:translateY(-2px);}
.section-dark .btn-outline{border-color:rgba(244,242,238,.35);color:#f4f2ee;}
:focus-visible{outline:3px solid var(--c-rot-deep);outline-offset:2px;border-radius:6px;}

/* wordmark */
.wordmark-logo{
  display:block;
  height:44px;
  width:auto;
}
.wordmark-chip{
  display:inline-flex;
  align-items:center;
  background:#fff;
  padding:.45rem .9rem;
  border-radius:10px;
}
.wordmark-chip .wordmark-logo{
  height:32px;
}
.wordmark{display:flex;align-items:baseline;gap:.15rem;font-family:var(--ff-display);font-size:1.5rem;}
.wordmark .wm-sub{font-size:.85rem;color:var(--c-ink-soft);font-family:var(--ff-body);font-weight:600;margin-left:.2rem;}
.wordmark-rule{width:38px;height:4px;background:var(--c-rot);margin-bottom:.5rem;}
.hero-logo{display:block;height:28px;width:auto;max-width:100%;}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:100;height:var(--header-h);display:flex;align-items:center;
  background:rgba(255,255,255,.88);backdrop-filter:blur(10px) saturate(1.4);
  border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s;
}
.site-header.is-scrolled{border-bottom-color:var(--line);box-shadow:0 8px 24px -18px rgba(30,30,36,.4);}
.site-header::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:repeating-linear-gradient(135deg,var(--c-rot) 0 10px,var(--c-bg) 10px 20px);
}
.header-inner{width:100%;max-width:var(--content-max);margin-inline:auto;padding-inline:clamp(20px,4vw,48px);display:flex;align-items:center;gap:1.5rem;}
.main-nav{margin-left:auto;}
.main-nav ul{display:flex;gap:1.6rem;}
.main-nav a{font-size:.85rem;font-weight:600;color:var(--c-ink-soft);position:relative;padding-bottom:4px;transition:color .25s;}
.main-nav a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--c-rot);transition:width .3s var(--ease);}
.main-nav a:hover{color:var(--c-ink);}
.main-nav a:hover::after{width:100%;}
.header-inner .btn-primary{margin-left:1rem;}
.nav-toggle{display:none;margin-left:auto;flex:none;width:42px;height:42px;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--line-strong);}
.nav-toggle svg{width:18px;height:18px;}
.nav-toggle .icon-close{display:none;}
.nav-toggle[aria-expanded="true"] .icon-menu{display:none;}
.nav-toggle[aria-expanded="true"] .icon-close{display:block;}
@media (max-width:980px){.main-nav{display:none;}.nav-toggle{display:flex;}.header-inner .btn-primary{display:none;}}

.mobile-nav{position:fixed;inset:0;z-index:150;background:var(--c-ink);color:#f4f2ee;display:flex;flex-direction:column;padding:22px clamp(20px,6vw,40px) 40px;transform:translateY(-100%);transition:transform .4s var(--ease);}
.mobile-nav.is-open{transform:translateY(0);}
.mobile-nav-top{display:flex;justify-content:space-between;align-items:center;}
.mobile-nav-close{width:42px;height:42px;border-radius:50%;border:1px solid rgba(244,242,238,.3);display:flex;align-items:center;justify-content:center;}
.mobile-nav-close svg{width:18px;height:18px;}
.mobile-nav ul{margin:auto 0;display:flex;flex-direction:column;gap:1rem;}
.mobile-nav a{font-family:var(--ff-display);font-size:2rem;}

/* ============================================================
   BILDPLATZHALTER (statt Originalfotos)
   ============================================================ */
.ph{position:relative;background:var(--c-bg);}
.ph svg{width:100%;height:100%;display:block;}
.ph-fill{fill:var(--c-bg);}
.ph-hatch{stroke:var(--c-ink);stroke-width:8;opacity:.04;}
.ph-icon{stroke:var(--c-ink-soft);stroke-width:2;fill:none;opacity:.5;}
.ph-label{font-family:var(--ff-mono);font-size:12px;letter-spacing:.06em;fill:var(--c-ink-soft);text-anchor:middle;}

/* Rot-Weiss Zielband (Element 1+6) */
.hazard-stripe{height:16px;background:repeating-linear-gradient(135deg,var(--c-rot) 0 20px,var(--c-bg) 20px 40px);}
.hazard-stripe--thin{height:6px;}

/* Chevron-Aufzählung (Element 5+7) */
.chev-list{display:flex;flex-direction:column;gap:.7rem;margin-top:1rem;}
.chev-list li{display:flex;align-items:baseline;gap:.7rem;font-size:1rem;}
.chev-mark{width:12px;height:12px;flex:none;border-top:3px solid var(--c-rot);border-right:3px solid var(--c-rot);transform:rotate(45deg) translateY(-2px);}
.dot-list{display:flex;flex-direction:column;gap:.6rem;margin-top:1rem;}
.dot-list li{display:flex;align-items:baseline;gap:.7rem;font-size:1rem;}
.dot-list li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c-rot);flex:none;transform:translateY(-2px);}

/* Preis-Plakette */
.price-badge{
  position:relative;width:180px;height:180px;border-radius:50%;background:var(--c-rot);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  box-shadow:var(--shadow-soft);flex:none;
}
.price-badge span{display:block;}
.price-badge .lbl{font-size:.85rem;font-weight:700;}
.price-badge .amt{font-size:1.15rem;font-weight:800;margin-top:.2rem;}

/* Panel-Formen für Bildplatzhalter */
.panel{position:relative;overflow:hidden;}
.panel-notch{clip-path:polygon(0 0,72% 0,50% 50%,72% 100%,0 100%);}
.panel-diag{clip-path:polygon(16% 0,100% 0,100% 100%,0 100%,0 16%);}
.panel-tri{clip-path:polygon(0 100%,62% 0,100% 100%);}
.panel-chevcut{clip-path:polygon(0 0,68% 0,100% 50%,68% 100%,0 100%);}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.reveal.is-visible{opacity:1;transform:none;}

/* ============================================================
   RESPONSIVE LAYOUT HELPERS
   ============================================================ */
.grid-2{display:grid;grid-template-columns:1fr;gap:2.4rem;}
@media (min-width:860px){.grid-2{grid-template-columns:var(--cols,1fr 1fr);align-items:center;}}
.grid-2.top{align-items:start;}

.icon-row{display:grid;grid-template-columns:110px 1fr;gap:1.6rem;align-items:start;}
@media (max-width:600px){.icon-row{grid-template-columns:70px 1fr;gap:1.1rem;}}
.icon-row.reverse{grid-template-columns:1fr 110px;}
@media (max-width:600px){.icon-row.reverse{grid-template-columns:1fr 70px;}}

.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4rem;}
@media (max-width:760px){.team-grid{grid-template-columns:1fr;max-width:360px;margin-inline:auto;}}

.tier-media{display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap;}
.tier-media > div:first-child{flex:1 1 200px;min-width:180px;}

.kontakt-media{position:relative;display:flex;justify-content:center;}
@media (max-width:640px){.kontakt-media{margin-top:2rem;}}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
  .reveal{opacity:1;transform:none;}
}

/* ============================================================
   MEHRSEITEN-NAVIGATION: aktuelle Seite markieren
   (ersetzt die frühere Onepager-Ankernavigation)
   ============================================================ */
.main-nav a[aria-current="page"],
.mobile-nav a[aria-current="page"]{color:var(--c-ink);}
.main-nav a[aria-current="page"]::after{width:100%;}
.mobile-nav a[aria-current="page"]{color:var(--c-rot);}

/* ============================================================
   INFORMATIONEN & NEWS: aufklappbare Link-Gruppen (Storyblok-Ordner "links")
   Natives <details>/<summary>: funktioniert ohne JavaScript und per Tastatur.
   ============================================================ */
.link-groups{display:grid;gap:.8rem;margin-top:1.4rem;}
.link-group{
  --gp:clamp(1.1rem,2.6vw,1.8rem);
  position:relative;background:var(--c-bg);border:1.5px solid var(--line-strong);border-radius:var(--radius-m);overflow:hidden;
  scroll-margin-top:calc(var(--header-h) + 16px);
  transition:border-color .25s;
}
.link-group[open]{border-color:var(--c-ink);}
.link-group[open]::before{content:"";position:absolute;top:0;bottom:0;left:0;width:5px;background:var(--c-rot);z-index:1;pointer-events:none;}
.link-group summary{
  display:flex;align-items:center;gap:1rem;padding:1.1rem var(--gp);cursor:pointer;
  list-style:none;transition:background .2s;
}
.link-group summary::-webkit-details-marker{display:none;}
.link-group summary:hover{background:var(--c-bg-soft);}
.link-group summary:focus-visible{outline-offset:-4px;border-radius:var(--radius-m);}
.link-group-title{
  flex:1;min-width:0;font-family:var(--ff-display);font-weight:400;
  font-size:clamp(1.7rem,3vw,2.3rem);line-height:1;letter-spacing:.02em;
}
.link-group-count{
  font-family:var(--ff-mono);font-size:.72rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--c-ink-soft);white-space:nowrap;
}
.link-group-chev{
  flex:none;width:11px;height:11px;margin:0 .25rem 4px .3rem;
  border-right:3px solid var(--c-rot);border-bottom:3px solid var(--c-rot);
  transform:rotate(45deg);transition:transform .3s var(--ease);
}
.link-group[open] .link-group-chev{transform:rotate(-135deg) translate(-2px,-2px);}
.link-group-body{border-top:1px solid var(--line);}
.link-group-text{padding:1.2rem var(--gp);color:var(--c-ink-soft);max-width:68ch;white-space:pre-line;}
.link-row{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1rem var(--gp);border-top:1px solid var(--line);transition:background .2s;
}
.link-group-body > .link-list:first-child li:first-child .link-row{border-top:0;}
.link-row:hover{background:var(--c-bg-soft);}
.link-row:focus-visible{outline-offset:-4px;}
.link-row-main{display:flex;flex-direction:column;gap:.15rem;min-width:0;}
.link-row-title{font-weight:700;font-size:1.05rem;line-height:1.35;overflow-wrap:anywhere;}
.link-row-desc{font-size:.9rem;color:var(--c-ink-soft);white-space:pre-line;}
.link-row-meta{display:flex;align-items:center;gap:.9rem;flex:none;}
.link-row-host{font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.03em;color:var(--c-ink-soft);}
.link-row svg{width:16px;height:16px;color:var(--c-rot);transition:transform .25s var(--ease);}
.link-row:hover svg{transform:translate(3px,-3px);}
@media (max-width:600px){.link-row-host{display:none;}.link-group-count{font-size:.66rem;}}

/* ============================================================
   NEWS (Storyblok-Ordner "news"): neuster Beitrag gross, Rest als Karten
   ============================================================ */
.news-date{
  font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--c-rot-deep);
}
.news-featured{
  display:grid;grid-template-columns:1fr;margin-top:1.4rem;
  background:var(--c-bg-soft);border-radius:var(--radius-l);overflow:hidden;
}
@media (min-width:860px){.news-featured{grid-template-columns:5fr 7fr;}}
.news-featured-media{position:relative;min-height:220px;background:var(--c-ink);}
.news-featured-media img{width:100%;height:100%;object-fit:cover;display:block;}
.news-featured-placeholder{
  position:absolute;inset:0;padding:clamp(1.4rem,3vw,2.2rem);
  display:flex;flex-direction:column;justify-content:space-between;
}
.news-featured-placeholder .eyebrow{color:var(--c-rot);margin-bottom:0;}
.news-featured-placeholder .news-date{color:#fff;font-size:1rem;letter-spacing:.02em;}
.news-featured-body{padding:clamp(1.6rem,3vw,2.6rem);}
.news-featured-body .news-date{margin-bottom:.6rem;display:block;}
.news-featured-body h3{font-size:clamp(1.6rem,2.4vw,2.2rem);margin-bottom:1rem;}
.news-featured-body p{color:var(--c-ink-soft);max-width:58ch;}

.news-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.1rem;
  margin-top:1.2rem;
}
.news-card{
  display:flex;flex-direction:column;gap:.5rem;padding:1.3rem;background:var(--c-bg);
  border:1px solid var(--line);border-top:3px solid var(--c-rot);border-radius:var(--radius-s);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.news-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft);}
.news-card img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-s);margin-bottom:.2rem;}
.news-card h3{font-size:1.3rem;}
.news-card p{font-size:.9rem;color:var(--c-ink-soft);}

/* ============================================================
   SPONSOREN-LOGOWAND "Unsere Partner"
   (wiederholbare Storyblok-Einträge aus dem Ordner "sponsoren")
   ============================================================ */
.sponsor-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:1rem;
}
.sponsor-tile{
  position:relative;background:var(--c-bg);padding:1.7rem 1.2rem;min-height:120px;
  display:flex;align-items:center;justify-content:center;text-align:center;
}
.sponsor-tile img{max-height:56px;width:auto;max-width:100%;filter:grayscale(1);opacity:.75;transition:filter .25s,opacity .25s;}
.sponsor-tile:hover img{filter:none;opacity:1;}
.sponsor-tile-name{font-family:var(--ff-mono);font-size:.78rem;color:var(--c-ink-soft);letter-spacing:.02em;}
.sponsor-tile-tag{
  position:absolute;top:8px;left:10px;font-family:var(--ff-mono);font-size:.6rem;
  text-transform:uppercase;letter-spacing:.05em;color:var(--c-rot-deep);
}

/* ============================================================
   TWINT-SPENDEN-CODE
   ============================================================ */
.twint-panel{
  width:220px;background:var(--c-bg);border:1.5px solid var(--line-strong);border-radius:var(--radius-m);
  padding:1.4rem;box-shadow:var(--shadow-soft);
}
.twint-qr{width:100%;height:auto;display:block;border-radius:var(--radius-s);}

/* ============================================================
   TRAININGS (Liste, gespeist aus Storyblok-Ordner "trainings")
   ============================================================ */
.training-list{margin-top:1rem;}
.training-item{padding-block:1.8rem;border-top:1px solid var(--line);}
.training-list .training-item:last-child{border-bottom:1px solid var(--line);}
.training-head{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;}
.training-tag{
  font-family:var(--ff-mono);font-size:.7rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:#fff;background:var(--c-ink);padding:.25rem .7rem;border-radius:100px;
}
.training-schedule{
  font-family:var(--ff-mono);font-size:.78rem;letter-spacing:.03em;color:var(--c-ink-soft);margin-top:.4rem;
}
.training-item h3{margin-top:.2rem;}
.training-item .body-copy{margin-top:.6rem;}
.training-download{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:.9rem;
  font-weight:700;font-size:.9rem;color:var(--c-rot-deep);text-decoration:underline;
}
.training-download:hover{color:var(--c-rot);}