/* SPIKES GYM BERLIN, Designsystem schwarz-weiss, Leitmotiv Oktagon */
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/anton-latin.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/assets/fonts/inter-latin-var.woff2') format('woff2')}

:root{
  /* Warmes Neutralgrau statt Schwarzweiss. Kein reines Schwarz (Design-Regel),
     jede Kombination unten ist auf WCAG 2.1 AA gerechnet. */
  --ink:#141312; --black:#201f1c; --panel:#292825; --panel-2:#333230;
  --line:#4c4a45; --line-strong:#7e7b76;
  --white:#f3f2ef; --gray:#bab8b2; --dim:#9c9994;
  --focus:#f3f2ef; --err:#f3f2ef;
  /* Steinband: das mittlere Grau, das die Seite aus dem Dauerdunkel holt */
  --stone:#504d48; --stone-2:#46433f; --stone-line:#9d9a95;
  /* EIN vertikales Abstandsraster */
  --space-section:clamp(5.5rem,10vw,9rem);
  --space-intro:clamp(2.75rem,5vw,4.5rem);
  --space-block:clamp(1.5rem,2.5vw,2.25rem);
  --maxw:1180px; --maxw-wide:1420px;
  --oct:polygon(29.3% 0,70.7% 0,100% 29.3%,100% 70.7%,70.7% 100%,29.3% 100%,0 70.7%,0 29.3%);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--black);color:var(--white);
  font-family:'Inter',system-ui,sans-serif;font-size:clamp(1rem,1.15vw,1.125rem);
  line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* Grunge sparsam: feines Korn als fixe Ebene */
body::after{content:"";position:fixed;inset:0;pointer-events:none;opacity:.05;z-index:5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")}
img{max-width:100%;height:auto;display:block}
a{color:var(--white)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
::selection{background:var(--white);color:var(--black)}

h1,h2,h3,.display{font-family:'Anton','Inter',sans-serif;font-weight:400;
  text-transform:uppercase;letter-spacing:.015em;line-height:1.12}
h1{font-size:clamp(2.9rem,8.2vw,6.8rem)}
h2{font-size:clamp(2.1rem,4.2vw,3.6rem)}
h3{font-size:clamp(1.25rem,2vw,1.65rem);letter-spacing:.03em}
p{max-width:62ch}

.wrap{width:min(100% - 2.5rem,var(--maxw));margin-inline:auto}
.wrap--wide{width:min(100% - 2.5rem,var(--maxw-wide));margin-inline:auto}

/* Sektionen: ein Raster fuer alle Abstaende */
.sec{padding-block:var(--space-section)}
/* Steinband: eigener Token-Bereich, alle Kinder rechnen automatisch neu */
.sec--panel{background:var(--stone);
  border-top:1px solid #6b6862;border-bottom:1px solid #6b6862;
  --panel:var(--stone); --panel-2:var(--stone-2);
  --line:#6b6862; --line-strong:var(--stone-line);
  --gray:#e5e2dd; --dim:#c1beb9}
.sec-head{margin-bottom:var(--space-intro);max-width:52rem}
.sec-head p{color:var(--gray);margin-top:1.1rem}
.kicker{display:inline-flex;align-items:center;gap:.6rem;font-weight:600;font-size:.78rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--gray);margin-bottom:1.1rem}
.kicker::before{content:"";width:.62rem;height:.62rem;background:var(--white);
  clip-path:var(--oct);flex:none}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.65rem;background:var(--white);color:var(--black);
  font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:.06em;
  font-size:1.02rem;padding:.95rem 1.9rem;text-decoration:none;border:1px solid var(--white);
  transition:background .2s,color .2s;cursor:pointer}
.btn:hover{background:var(--black);color:var(--white)}
.btn--ghost{background:transparent;color:var(--white)}
.btn--ghost:hover{background:var(--white);color:var(--black)}
.btn-row{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}

/* Header */
.site-head{position:fixed;inset-inline:0;top:0;z-index:50;background:rgba(32,31,28,.92);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.site-head .bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  height:76px;width:min(100% - 2.5rem,var(--maxw-wide));margin-inline:auto}
.brand{display:flex;align-items:center;gap:.85rem;text-decoration:none}
.brand img{height:48px;width:auto}
.brand-text{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:1.25rem;
  letter-spacing:.05em;line-height:1;color:var(--white)}
.brand-text small{display:block;font-family:'Inter',sans-serif;font-size:.6rem;
  letter-spacing:.16em;color:var(--gray);margin-top:.3rem;white-space:nowrap}
.nav-links{display:flex;align-items:center;gap:1.45rem;list-style:none}
.nav-links a{text-decoration:none;font-weight:600;font-size:.92rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--gray);padding:.35rem 0;border-bottom:2px solid transparent}
.nav-links a:hover{color:var(--white)}
.nav-links a[aria-current="page"]{color:var(--white);border-bottom-color:var(--white)}
.nav-links a.nav-cta{background:var(--white);color:var(--black);padding:.7rem 1.25rem;
  border:1px solid var(--white);border-bottom:1px solid var(--white)}
.nav-links a.nav-cta:hover{background:transparent;color:var(--white)}
.burger{display:none;background:none;border:1px solid var(--line-strong);width:52px;height:52px;
  cursor:pointer;position:relative;z-index:60}
.burger span{display:block;width:24px;height:2px;background:var(--white);margin:5px auto;transition:transform .25s,opacity .25s}
.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)}
/* 24.09.2026: Breakpoint von 1180 auf 1300 angehoben. Mit dem neunten Eintrag
   "Fitness Area" passte die waagerechte Leiste bei 1200px nicht mehr in die bar
   und ragte rechts heraus. Ab hier greift das Burger-Menue. */
@media (max-width:1300px){
  .burger{display:block}
  /* Fix 24.09.2026: backdrop-filter auf .site-head macht den Kopf zum containing block
   fuer position:fixed-Kinder. Dadurch war das offene Mobilmenue nur 76px hoch und
   Start/Kursplan/Klassen lagen ausserhalb des Bildschirms. Im Mobil-Breakpoint daher
   kein backdrop-filter, dafuer ein fast deckender Hintergrund. */
  .site-head{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(32,31,28,.98)}
  .nav-links{position:fixed;inset:0;background:var(--black);flex-direction:column;
    justify-content:center;gap:1.6rem;transform:translateX(100%);transition:transform .3s;z-index:55}
  .nav-links.open{transform:none}
  .nav-links a{font-size:1.35rem;font-family:'Anton',sans-serif;font-weight:400;letter-spacing:.08em}
}
@media (prefers-reduced-motion:reduce){.nav-links{transition:none}}

main{padding-top:76px}

/* Hero: zentrierte Schrift auf Vollbild-Hintergrund */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  min-height:calc(100svh - 76px);display:grid;place-items:center;text-align:center}
.hero-bg{position:absolute;inset:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 42%;
  filter:contrast(1.05)}
.hero-bg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 78% 62% at 50% 46%,rgba(32,31,28,.22) 0%,rgba(32,31,28,.50) 60%,rgba(32,31,28,.74) 100%),
  linear-gradient(180deg,rgba(32,31,28,.38) 0%,rgba(32,31,28,.06) 32%,rgba(32,31,28,.50) 90%)}
.hero-inner{position:relative;z-index:1;width:min(100% - 2.5rem,var(--maxw));margin-inline:auto;
  padding-block:clamp(4.5rem,13vh,8.5rem)}
.hero-motto{font-size:clamp(2.9rem,7.4vw,6.6rem);line-height:1.06;
  text-shadow:0 2px 26px rgba(0,0,0,.55)}
.u-anim{position:relative;display:inline-block}
.hero-sub{color:#dad8d3;margin:1.7rem auto 0;font-size:clamp(1.05rem,1.4vw,1.25rem);max-width:44rem;
  text-shadow:0 1px 14px rgba(0,0,0,.6)}
.hero .btn-row{margin-top:2.6rem;justify-content:center}
.hero-meta{margin-top:2.8rem;display:flex;flex-wrap:wrap;gap:1.4rem;justify-content:center;color:#c6c3bd;
  font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  text-shadow:0 1px 10px rgba(0,0,0,.6)}

/* Animierter H1-Unterstrich (weiss, Endlosschleife, reduced-motion: statisch) */
.u-anim::after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:.09em;
  background:var(--white);transform-origin:left;animation:uline 6s ease-in-out infinite}
@keyframes uline{0%{transform:scaleX(0);transform-origin:left}
  18%{transform:scaleX(1);transform-origin:left}
  55%{transform:scaleX(1);transform-origin:right}
  75%{transform:scaleX(0);transform-origin:right}
  100%{transform:scaleX(0);transform-origin:left}}
@media (prefers-reduced-motion:reduce){.u-anim::after{animation:none;transform:scaleX(1)}}

/* Scroll-Reveals: nur mit aktivem JavaScript (html.js) werden Inhalte
   initial versteckt, ohne JS ist alles sofort sichtbar */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.js .rv.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}}

/* Karten / Raster */
.grid{display:grid;gap:1.1rem}
.grid--classes{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.card{background:var(--panel-2);border:1px solid var(--line);padding:1.9rem;
  display:flex;flex-direction:column;gap:.8rem;text-decoration:none;
  transition:border-color .2s,transform .2s}
a.card:hover{border-color:var(--white);transform:translateY(-3px)}
@media (prefers-reduced-motion:reduce){a.card:hover{transform:none}}
.card p{color:var(--gray);font-size:.98rem}
/* Hervorgehobene Karte fuer ein Angebot, das es noch nicht gibt (24.09.2026) */
.card--soon{border-color:var(--line-strong)}
.card--soon:hover{border-color:var(--white)}
.soon-tag{align-self:flex-start;font-family:'Anton',sans-serif;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--black);background:var(--gray);padding:.28rem .62rem}

.card .more{margin-top:auto;font-weight:600;font-size:.8rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--white)}

/* Zahlenmarker im Oktagon */
.oct-num{width:3rem;height:3rem;flex:none;display:grid;place-items:center;
  background:var(--white);color:var(--black);clip-path:var(--oct);
  font-family:'Anton',sans-serif;font-size:1.25rem}
.oct-num--ghost{background:var(--panel-2);color:var(--white);outline:1px solid var(--line)}

/* Team */
.coach-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}
.coach-tile{position:relative;background:var(--panel-2) radial-gradient(ellipse 70% 52% at 50% 68%,#5c5952 0%,#333230 62%,transparent 82%);
  border:1px solid var(--line);overflow:hidden;text-decoration:none;display:block}
.coach-tile img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:top;
  filter:grayscale(1) contrast(1.1);transition:transform .3s}
.coach-tile:hover img{transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){.coach-tile:hover img{transform:none}}
.coach-tile figcaption{position:absolute;inset-inline:0;bottom:0;padding:1rem;
  background:linear-gradient(transparent,rgba(32,31,28,.94) 55%)}
.coach-tile .cname{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:1.05rem;letter-spacing:.04em}
.coach-tile .crole{color:var(--gray);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600}
@media (max-width:1000px){.coach-strip{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.coach-strip{grid-template-columns:repeat(2,1fr)}}

.coach-row{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1fr);
  gap:clamp(2rem,4vw,4.5rem);align-items:center;padding-block:var(--space-intro);
  border-top:1px solid var(--line)}
.coach-row:last-of-type{border-bottom:1px solid var(--line)}
.coach-row figure{position:relative;margin:0}
.coach-row figure::before{content:"";position:absolute;inset:6% 8% 0;
  background:radial-gradient(ellipse 62% 55% at 50% 60%,#66625b 0%,#333230 60%,transparent 80%);clip-path:var(--oct)}
.coach-row figure button{display:block;width:100%;background:none;border:0;padding:0;cursor:zoom-in}
.coach-row img{position:relative;width:min(100%,460px);margin-inline:auto;
  filter:grayscale(1) contrast(1.12);
  -webkit-mask-image:linear-gradient(#000 88%,transparent 99%);mask-image:linear-gradient(#000 88%,transparent 99%)}
.coach-row.flip figure{order:2}
.coach-idx{font-family:'Anton',sans-serif;color:transparent;-webkit-text-stroke:1px #5f5c56;
  font-size:clamp(3rem,6vw,5rem);line-height:1}
.coach-row h3{font-size:clamp(1.9rem,3.4vw,3rem);margin-top:.4rem}
.coach-role{color:var(--gray);font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  font-size:.85rem;margin-top:.5rem}
.fact-list{list-style:none;margin-top:1.4rem;display:flex;flex-direction:column;gap:.65rem}
.fact-list li{display:flex;gap:.8rem;align-items:baseline;color:var(--gray)}
.fact-list li::before{content:"";width:.55rem;height:.55rem;background:var(--white);
  clip-path:var(--oct);flex:none;transform:translateY(.05rem)}
@media (max-width:860px){.coach-row{grid-template-columns:1fr}.coach-row.flip figure{order:0}}

/* Kursplan Tabelle (Desktop) */
.plan-desktop{overflow-x:auto}
.plan-table{width:100%;border-collapse:collapse;border:1px solid var(--line-strong);table-layout:fixed}
.plan-table col.t-col{width:76px}
.plan-table caption{text-align:left;color:var(--dim);font-size:.85rem;padding-bottom:.9rem}
.plan-table th,.plan-table td{border:1px solid var(--line-strong);padding:.85rem .8rem;vertical-align:top;text-align:left}
.plan-table thead th{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;
  letter-spacing:.08em;font-size:1rem;background:var(--panel-2)}
.plan-table tbody th{font-family:'Anton',sans-serif;font-weight:400;font-size:1rem;
  background:var(--panel-2)}
.plan-table td{background:var(--panel)}
.slot{display:flex;flex-direction:column;gap:.28rem;padding:.15rem 0}
.slot+.slot{margin-top:.7rem;border-top:1px dashed var(--line);padding-top:.85rem}
.slot .sname{font-weight:600;font-size:.95rem;line-height:1.3}
.slot .smat{color:var(--dim);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
.badge{align-self:flex-start;font-size:.68rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;padding:.18rem .55rem;overflow-wrap:anywhere;line-height:1.5}
.cat-bjj{background:#e6e4df;color:#201f1c}
.cat-mma{background:#c3c0b9;color:#201f1c}
.cat-striking{background:#9c988f;color:#201f1c}
.cat-wrestling{background:#63605a;color:#f3f2ef}
.cat-kids{background:#4d4a45;color:#f3f2ef}
.cat-teens{background:#403e3a;color:#f3f2ef;box-shadow:inset 0 0 0 1px #767369}
.cat-ladys{background:transparent;color:#f3f2ef;box-shadow:inset 0 0 0 1px #f3f2ef}
.cat-comp{background:#201f1c;color:#f3f2ef;box-shadow:inset 0 0 0 1px #8f8c85}
.plan-legend{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:var(--space-intro)}
.rest{color:var(--dim);text-transform:uppercase;letter-spacing:.2em;font-size:.8rem;font-weight:600}

/* Kursplan mobil als Tagesliste */
.plan-days{display:none}
@media (max-width:900px){
  .plan-desktop{display:none}
  .plan-days{display:flex;flex-direction:column;gap:1.1rem}
}
.day-card{border:1px solid var(--line);background:var(--panel)}
.day-card h3{background:var(--panel-2);border-bottom:1px solid var(--line);padding:.9rem 1.1rem}
.day-card ul{list-style:none}
.day-card li{display:flex;gap:1rem;padding:.9rem 1.1rem;border-top:1px solid var(--line);align-items:flex-start}
.day-card li:first-child{border-top:0}
.day-card time{font-family:'Anton',sans-serif;font-size:1.02rem;min-width:3.6rem;letter-spacing:.04em}
.day-card .slot{padding:0}

/* Regeln */
.rules-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.1rem}
.rule{background:var(--panel-2);border:1px solid var(--line);padding:1.8rem;display:flex;gap:1.2rem}
.rule p{color:var(--gray);margin-top:.55rem;font-size:.98rem}
.rule h3{font-size:1.15rem;line-height:1.25}
.ground{display:flex;flex-wrap:wrap;gap:.7rem;list-style:none}
.ground li{border:1px solid var(--line-strong);padding:.6rem 1.1rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;font-size:.8rem;color:var(--gray)}

/* Fassaden (YouTube / Maps): kein Request vor Klick */
.facade{position:relative;aspect-ratio:16/9;background:var(--panel-2);border:1px solid var(--line);
  display:grid;place-items:center;overflow:hidden}
/* 28.09.2026: Das Einblick-Video ist ein YouTube Short, also Hochformat.
   Im 16/9-Rahmen liefe es mit breiten schwarzen Balken. Breite begrenzt,
   damit die Flaeche in der Spalte nicht zu hoch wird. */
.facade--hoch{aspect-ratio:9/16;max-width:360px;margin-inline:auto}
.facade iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.facade-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.1) brightness(.88)}
.facade--video::before{content:"";position:absolute;inset:0;background:rgba(8,8,8,.5)}
.facade--video .facade-btn{position:relative;z-index:1}
.facade--video .facade-btn small{background:rgba(8,8,8,.55);padding:.4rem .7rem}
.facade--video .facade-btn strong{text-shadow:0 1px 12px rgba(0,0,0,.7)}
.facade-btn{background:none;border:0;cursor:pointer;color:var(--white);display:flex;
  flex-direction:column;align-items:center;gap:1.1rem;padding:2rem;width:100%;height:100%;justify-content:center}
.facade-btn .play{width:84px;height:84px;background:var(--white);clip-path:var(--oct);
  display:grid;place-items:center;transition:transform .2s}
.facade-btn:hover .play{transform:scale(1.08)}
@media (prefers-reduced-motion:reduce){.facade-btn:hover .play{transform:none}}
.facade-btn .play::after{content:"";width:0;height:0;border-left:20px solid #201f1c;
  border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:5px}
.facade-btn strong{font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:.06em;font-size:1.2rem}
.facade-btn small{color:var(--dim);max-width:34rem;font-size:.8rem;line-height:1.5}
.facade--map .play::after{border:0;width:14px;height:14px;background:#201f1c;clip-path:var(--oct);margin:0}

/* Instagram-Raster: echte Posts, s/w im Grundzustand, Farbe beim Zeigen */
.insta-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem}
.insta-kachel{display:block;border:1px solid var(--line);overflow:hidden}
.insta-kachel img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/4;
  filter:grayscale(1) contrast(1.06);transition:filter .25s,transform .25s}
.insta-kachel:hover img,.insta-kachel:focus-visible img{filter:none;transform:scale(1.03)}
@media (prefers-reduced-motion:reduce){.insta-kachel img{transition:none}
  .insta-kachel:hover img{transform:none}}
@media (max-width:1100px){.insta-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.insta-grid{grid-template-columns:repeat(2,1fr)}}

/* Formular */
form.contact{display:grid;gap:1.2rem;max-width:44rem}
.field label{display:block;font-weight:600;font-size:.82rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gray);margin-bottom:.5rem}
.field input,.field select,.field textarea{width:100%;background:var(--panel-2);
  border:1px solid var(--line-strong);color:var(--white);padding:.95rem 1rem;font:inherit}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--white);outline-offset:0}
.check{display:flex;gap:.85rem;align-items:flex-start;color:var(--gray);font-size:.95rem}
.check input{width:1.25rem;height:1.25rem;margin-top:.2rem;accent-color:#f3f2ef;flex:none}
.hp-field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.form-note{color:var(--dim);font-size:.85rem;max-width:44rem}
.form-msg{display:none;border:1px solid var(--white);padding:1rem 1.2rem;font-weight:600}
.form-msg.show{display:block}

/* Schrittfolge Mitgliedschaft */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.1rem;counter-reset:step}
.step{background:var(--panel-2);border:1px solid var(--line);padding:1.9rem;display:flex;flex-direction:column;gap:.9rem}
.step p{color:var(--gray);font-size:.98rem}

/* FAQ */
.faq{max-width:52rem}
.faq details{border:1px solid var(--line);background:var(--panel-2);margin-bottom:.8rem}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;
  align-items:center;padding:1.15rem 1.4rem;font-family:'Anton',sans-serif;
  text-transform:uppercase;letter-spacing:.04em;font-size:1.02rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:'Inter',sans-serif;font-weight:600;font-size:1.3rem;color:var(--gray)}
.faq details[open] summary::after{content:"\2212 "}
.faq details[open] summary{border-bottom:1px solid var(--line)}
.faq details p{padding:1.1rem 1.4rem 1.3rem;color:var(--gray)}

/* Kontakt */
.contact-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,4vw,4rem)}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
.addr{font-style:normal;display:flex;flex-direction:column;gap:1.2rem;color:var(--gray)}
.addr strong{color:var(--white);font-family:'Anton',sans-serif;text-transform:uppercase;
  letter-spacing:.05em;font-weight:400;font-size:1.05rem}
.addr a:not(.btn){color:var(--white)}

/* CTA Band */
.cta-band{border-top:1px solid var(--line);background:var(--panel);text-align:left;
  padding-bottom:calc(var(--space-section) - 16px)}
.cta-band .inner{display:flex;flex-wrap:wrap;gap:2rem;align-items:center;justify-content:space-between}
.cta-band h2{max-width:24ch}
.cta-band p{color:var(--gray);margin-top:.9rem}

/* Footer */
.site-foot{border-top:1px solid var(--line);background:var(--ink);padding-block:var(--space-intro)}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:2.5rem}
@media (max-width:800px){.foot-grid{grid-template-columns:1fr}}
.site-foot h3{font-size:1rem;letter-spacing:.1em;margin-bottom:1rem;color:var(--gray)}
.site-foot ul{list-style:none;display:flex;flex-direction:column;gap:.55rem}
.site-foot a{color:var(--gray);text-decoration:none}
.site-foot a:hover{color:var(--white)}
.foot-motto{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:1.35rem;
  letter-spacing:.04em;line-height:1.3}
.foot-bottom{margin-top:var(--space-intro);padding-top:1.5rem;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;color:var(--dim);font-size:.85rem}
.foot-bottom a{color:var(--dim)}

/* Lightbox */
.lb{position:fixed;inset:0;z-index:100;background:rgba(5,5,5,.96);display:none;
  align-items:center;justify-content:center}
.lb.open{display:flex}
.lb img{max-width:min(92vw,1100px);max-height:82vh;object-fit:contain}
.lb figcaption{position:absolute;bottom:2rem;inset-inline:0;text-align:center;color:var(--gray);
  font-size:.95rem;padding-inline:4rem}
.lb button{position:absolute;background:var(--panel-2);border:1px solid var(--line-strong);color:var(--white);
  width:64px;height:64px;font-size:1.6rem;cursor:pointer;display:grid;place-items:center}
.lb button:hover{background:var(--white);color:var(--black)}
.lb .lb-close{top:1.2rem;right:1.2rem}
.lb .lb-prev{left:1.2rem;top:50%;transform:translateY(-50%)}
.lb .lb-next{right:1.2rem;top:50%;transform:translateY(-50%)}
@media (max-width:640px){.lb button{width:54px;height:54px}
  .lb .lb-prev{top:auto;bottom:1.2rem;transform:none}
  .lb .lb-next{top:auto;bottom:1.2rem;transform:none}}

/* Poster-Figur */
.poster-fig{max-width:560px}
.poster-fig button{background:none;border:1px solid var(--line-strong);padding:0;cursor:zoom-in;display:block}
.poster-fig img{filter:grayscale(1) contrast(1.05)}
.poster-fig figcaption{color:var(--dim);font-size:.85rem;margin-top:.8rem}

/* Legal */
.legal{max-width:52rem}
.legal h2{font-size:clamp(1.5rem,2.6vw,2.1rem);margin-top:var(--space-block)}
.legal p,.legal li{color:var(--gray)}
.legal ul{padding-left:1.2rem;display:flex;flex-direction:column;gap:.4rem}
.legal p{margin-top:.8rem}
.draft-note{border:1px dashed var(--dim);padding:1.2rem 1.4rem;color:var(--gray);
  margin-bottom:var(--space-intro);max-width:52rem}
.draft-note strong{color:var(--white)}

/* Zwei-Spalten Split */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,4vw,4.5rem);align-items:start}
@media (max-width:900px){.split{grid-template-columns:1fr}}
/* Sprungziel Probetraining: der feste Kopf ist 77px hoch, sonst liegt die Ueberschrift darunter */
#probetraining{scroll-margin-top:96px}