/* =====================================================
   VT Akademie Marl — Projekt-CSS
   Richtung 2 "Kino-Hell" · Theme: HELL (feststehend)
   Marke: #b3221c (aus der alten Website übernommen)
   Lädt NACH base.css. Gesperrte Struktur-Regeln aus
   base.css werden hier NICHT überschrieben.
   ===================================================== */

:root{
  /* FARBEN — fünf Untergrund-Stufen (hell) */
  --bg:        #FDFCFA;
  --bg-2:      #F5F1EB;
  --bg-3:      #EDE7DE;
  --surface:   #FFFFFF;
  --surface-2: #FAF7F2;

  --text:  #1A1512;
  --muted: #5B534B;
  --dim:   #857C72;

  --brand:      #B3221C;
  --brand-ink:  #FFFFFF;
  --brand-soft: rgba(179,34,28,.09);
  --brand-line: rgba(179,34,28,.32);
  --brand-deep: #8C1A15;
  --rare:       #8A6A2F;           /* Zweitakzent: max. 2x auf der Website */

  --line:   rgba(26,21,18,.13);
  --line-2: rgba(26,21,18,.24);

  /* TYPO — Kopfschrift: Geometrisch (Kampfkunst, kraftvoll in Versalien) */
  --font-head: "Century Gothic", "URW Gothic", Futura, "Trebuchet MS", system-ui, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fs-hero:  clamp(2.5rem, 7.1vw, 5.4rem);
  --fs-h2:    clamp(1.95rem, 4.1vw, 3.05rem);
  --fs-h3:    clamp(1.12rem, 1.7vw, 1.38rem);
  --fs-body:  clamp(1.02rem, 1.05vw, 1.115rem);
  --fs-label: .78rem;

  /* RHYTHMUS — projektspezifisch, bewusst abweichend von base.css */
  --section:   clamp(4.75rem, 9.5vw, 8.75rem);
  --container: 1180px;
  --gutter:    clamp(1.15rem, 3.6vw, 2.25rem);
  --radius:    14px;
  --radius-sm: 8px;
  --shadow:    0 22px 54px rgba(26,21,18,.10);
  --shadow-lg: 0 34px 78px rgba(26,21,18,.16);
  --ease:      cubic-bezier(.22,.68,.16,1);

  /* Farbflächen-Gesetz: nur diese zwei Textfarben auf Markenrot */
  --on-brand:      #FFFFFF;
  --on-brand-mute: rgba(255,255,255,.88);

  --nav-h: 64px;
}
@media (min-width:760px){ :root{ --nav-h: 76px; } }

[hidden]{ display:none !important; }

/* ---------- Seitengrund: zwei sehr schwache Schleier + Rauschen ---------- */
body{ position:relative; background:var(--bg); color:var(--text); }
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1100px 780px at 12% -8%, rgba(179,34,28,.07), transparent 62%),
    radial-gradient(900px 700px at 96% 8%, rgba(138,106,47,.045), transparent 66%);
}
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}

/* Fortschrittsbalken: helles Theme → weicher Schlagschatten statt Glühen */
.progress span{
  background:linear-gradient(90deg, var(--brand), var(--brand-deep), var(--rare) 72%, var(--brand));
  box-shadow:0 1px 4px rgba(179,34,28,.45);
}

/* ---------- Typografie-Feinschliff ---------- */
h1{ font-weight:900; letter-spacing:-.038em; line-height:1.02; }
h2{ font-weight:900; letter-spacing:-.032em; line-height:1.05; }
h3{ font-weight:700; letter-spacing:-.015em; }
p{ max-width:65ch; line-height:1.68; }
.kicker{
  font-size:.74rem; font-weight:700; letter-spacing:.32em;
  text-transform:uppercase; color:var(--brand);
}
.section-head p{ color:var(--muted); }
.acc{
  background:linear-gradient(96deg, var(--brand) 12%, var(--brand-deep) 62%, var(--rare) 128%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.band-alt{ background:var(--bg-2); border-block:1px solid var(--line); }

/* ---------- Navigation ---------- */
.nav-logo{
  display:inline-flex; flex-direction:column; line-height:1;
  font-family:var(--font-head); font-weight:900; letter-spacing:-.02em;
  white-space:nowrap;
}
.nav-logo .lg-1{ font-size:1.06rem; }
.nav-logo .lg-2{
  font-size:.6rem; letter-spacing:.3em; font-weight:700;
  color:var(--brand); margin-top:4px;
}
.nav-inner > .nav-logo, .nav-actions{ position:relative; z-index:100; }
.nav-links a{ font-size:.93rem; position:relative; padding-block:4px; }
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--brand); transition:right .35s var(--ease);
}
.nav-links a:hover::after, .nav-links a.active::after{ right:0; }
.nav{ background:color-mix(in srgb, var(--bg) 74%, transparent); }
.nav.scrolled{ box-shadow:0 1px 0 var(--line), 0 10px 30px rgba(26,21,18,.06); }

/* Anruf-Pille mit Füllanimation + Verfügbarkeits-Punkt */
.nav-cta{
  position:relative; overflow:hidden; isolation:isolate;
  border:1.5px solid var(--brand); color:var(--brand);
  font-size:.9rem; padding:10px 20px; white-space:nowrap;
}
.nav-cta::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--brand);
  transform:translateX(-101%); transition:transform .55s cubic-bezier(.6,0,.2,1);
}
.nav-cta:hover{ color:var(--on-brand); }
.nav-cta:hover::before{ transform:translateX(0); }
.dot{
  width:8px; height:8px; border-radius:50%; background:var(--brand);
  display:inline-block; flex:none; animation:pulseDot 2.1s ease-in-out infinite;
}
.nav-cta:hover .dot{ background:var(--on-brand); }
@keyframes pulseDot{
  0%,100%{ transform:scale(1); opacity:1 }
  50%{ transform:scale(1.45); opacity:.55 }
}

/* Burger erst ab 1024px verstecken — im Band 768–1023px sprengen
   Wortmarke + 4 Links + Pille sonst das 3-Zonen-Grid. */
@media (max-width:1023px){
  /* BURGER-BUGFIX + REDESIGN 13.08.2026 — gleiche Regeln wie der GESPERRTE
     Block in base.css (Containing-Block-Fix via .nav.open dort, hier:
     flex-start + overflow-y + auto-Margins statt justify-content:center,
     damit auch viele Menüpunkte nach dem Scrollen erreichbar bleiben). */
  .nav-links{
    position:fixed; inset:0; z-index:-1;
    flex-direction:column; align-items:center; justify-content:flex-start;
    gap:clamp(16px, 3.6vh, 30px);
    padding:calc(var(--nav-h, 76px) + 14px) 28px calc(26px + env(safe-area-inset-bottom, 0px));
    background:var(--bg); font-size:1.35rem;
    overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0, transparent calc(var(--nav-h, 76px) - 30px), #000 calc(var(--nav-h, 76px) - 2px));
    mask-image:linear-gradient(to bottom, transparent 0, transparent calc(var(--nav-h, 76px) - 30px), #000 calc(var(--nav-h, 76px) - 2px));
    opacity:0; pointer-events:none; visibility:hidden;
    transition:opacity .28s var(--ease), visibility 0s .28s;
  }
  .nav-links li:first-child{ margin-top:auto; }
  .nav-links li:last-child{ margin-bottom:auto; }
  .nav-links a{ display:block; padding:6px 18px; text-align:center; }
  .nav-links li{ opacity:0; transform:translateY(14px); transition:opacity .3s var(--ease), transform .3s var(--ease); }
  .nav.open .nav-links{ opacity:1; pointer-events:auto; visibility:visible; transition:opacity .28s var(--ease); z-index:calc(var(--z-nav) - 1); }
  .nav.open .nav-links li{ opacity:1; transform:none; }
  .nav.open .nav-links li:nth-child(1){ transition-delay:.05s; }
  .nav.open .nav-links li:nth-child(2){ transition-delay:.09s; }
  .nav.open .nav-links li:nth-child(3){ transition-delay:.13s; }
  .nav.open .nav-links li:nth-child(4){ transition-delay:.17s; }
  .nav.open .nav-links li:nth-child(5){ transition-delay:.21s; }
  .nav.open .nav-links li:nth-child(6){ transition-delay:.25s; }
  .nav.open .nav-links li:nth-child(n+7){ transition-delay:.29s; }
  .burger{ display:flex; }
  .nav-cta{ display:none; }
  .nav-links a::after{ display:none; }
}
.burger{ min-width:44px; min-height:44px; align-items:center; justify-content:center; }

/* Sechs Menuepunkte brauchen Platz: zwischen 1024 und 1279px weicht die
   Anruf-Pille (Nummer steht weiterhin im Hero, Kontakt und Footer). */
@media (min-width:1024px) and (max-width:1279px){
  .nav-cta{ display:none; }
}

/* ---------- Hero ---------- */
.hero-media img{ animation:kenburns 27s ease-in-out infinite alternate; }
@keyframes kenburns{
  from{ transform:scale(1.045) translate3d(0,0,0) }
  to  { transform:scale(1.12) translate3d(-1.2%,-1%,0) }
}
.hero-veil.light{
  background:
    radial-gradient(ellipse 78% 64% at 50% 47%,
      rgba(253,252,250,.95) 0%, rgba(253,252,250,.88) 33%,
      rgba(253,252,250,.54) 62%, rgba(253,252,250,0) 88%),
    linear-gradient(180deg, rgba(253,252,250,.90) 0%, transparent 18%,
      transparent 70%, rgba(253,252,250,.96) 100%);
}
.hero-grain{
  position:absolute; inset:0; z-index:var(--z-deco); pointer-events:none;
  opacity:.35; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='.2'/%3E%3C/svg%3E");
}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.76rem; font-weight:700; letter-spacing:.26em; text-transform:uppercase;
  color:var(--brand); background:var(--brand-soft);
  border:1px solid var(--brand-line); border-radius:999px; padding:8px 18px;
  margin-bottom:22px; text-align:center;
}
.hero h1{ max-width:14ch; }
.hero-content p.lead{ color:var(--muted); max-width:52ch; }
.hero-content p.lead-sub{
  font-size:clamp(.98rem, 1.1vw, 1.08rem); margin-top:12px; max-width:56ch;
}
.trust{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px 26px;
  margin-top:40px; list-style:none; padding:0;
  font-size:.77rem; font-weight:700; letter-spacing:.19em; text-transform:uppercase;
  color:var(--dim);
}
.trust li{ display:inline-flex; align-items:center; gap:9px; }
.trust li::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--brand); flex:none; }
@media (max-width:760px){ .trust{ display:none; } }

/* ---------- Kacheln ---------- */
.tile{ min-height:390px; background:var(--surface-2); }
.tile-content{ min-height:390px; color:var(--text); }
.tile-veil{
  background:linear-gradient(180deg, rgba(253,252,250,.28) 0%,
    rgba(253,252,250,.80) 46%, rgba(253,252,250,.97) 100%);
}
.tile-kicker{
  font-size:.7rem; font-weight:700; letter-spacing:.3em;
  text-transform:uppercase; color:var(--brand); margin-bottom:10px;
}
.tile h3{ margin-bottom:8px; }
.tile p{ color:var(--muted); font-size:.96rem; max-width:34ch; margin-bottom:16px; }
.tile-link{ color:var(--text); }
.tile:hover{ box-shadow:var(--shadow-lg); }

/* ---------- Karten ---------- */
.card{ box-shadow:0 1px 2px rgba(26,21,18,.04); position:relative; overflow:hidden; }
.card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--brand); transform:scaleX(0); transform-origin:center;
  transition:transform .3s var(--ease);
}
.card:hover::before{ transform:scaleX(1); }
.card:hover{ box-shadow:var(--shadow); }
.card .icon{
  background:var(--brand-soft); color:var(--brand);
  border:1px solid var(--brand-line); font-size:1.5rem;
}
.card h3{ min-width:0; }
.card .num-badge{
  font-family:var(--font-head); font-weight:900; font-size:.82rem;
  letter-spacing:.28em; color:var(--brand); text-transform:uppercase;
}

/* ---------- Zahlenband ---------- */
.stats{ background:var(--bg-2); border-block:1px solid var(--line); }
.stat .num{
  font-family:var(--font-head); font-weight:900;
  font-variant-numeric:tabular-nums; letter-spacing:-.04em;
  font-size:clamp(2.5rem, 5.4vw, 3.9rem); line-height:1;
  background:linear-gradient(170deg, var(--brand) 8%, var(--brand-deep) 92%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  white-space:nowrap;
}
/* Spannweite statt Einzelziffer (z. B. 5–15): etwas kleiner, damit die
   Zahlenreihe optisch auf einer Hoehe bleibt und nichts umbricht. */
.stat .num.is-range{ font-size:clamp(2rem, 4.2vw, 3.1rem); letter-spacing:-.02em; }
.stat .bar{ width:32px; height:2px; background:var(--brand); margin:14px auto 12px; }
.stat .label{
  font-size:.8rem; font-weight:700; letter-spacing:.24em;
  text-transform:uppercase; color:var(--muted); margin-top:0;
}

/* ---------- Stundenplan-Tabelle ---------- */
.plan-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
table.plan{ width:100%; border-collapse:collapse; min-width:520px; }
table.plan th, table.plan td{ padding:15px 18px; text-align:left; border-bottom:1px solid var(--line); }
table.plan th{
  font-family:var(--font-head); font-size:.74rem; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase; color:var(--muted);
  background:var(--bg-2);
}
table.plan tr:last-child td{ border-bottom:0; }
table.plan td:first-child{ font-weight:700; white-space:nowrap; }
table.plan td.time{ font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--brand); font-weight:700; }
table.plan tbody tr:hover{ background:var(--surface-2); }

/* ---------- Trainer / Personen ---------- */
.person{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column; text-align:center;
  transition:transform .25s var(--ease), box-shadow .25s;
}
.person:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.person:active{ transform:translateY(-1px) scale(.99); transition-duration:.1s; }
.person .ph{ aspect-ratio:4/5; overflow:hidden; background:var(--bg-3); }
.person .ph img{ width:100%; height:100%; object-fit:cover; transition:transform 1.6s ease, filter .6s ease; filter:saturate(.82); }
.person:hover .ph img{ transform:scale(1.07); filter:saturate(1); }
.person .body{ padding:26px 24px 30px; display:flex; flex-direction:column; align-items:center; gap:10px; }
.person .role{ font-size:.72rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:var(--brand); }
.person p{ color:var(--muted); font-size:.95rem; }
.person-facts{
  list-style:none; padding:0; margin:2px 0 0;
  display:flex; flex-direction:column; gap:6px; align-items:center;
}
.person-facts li{
  font-size:.95rem; font-weight:600; position:relative; padding-left:20px;
}
.person-facts li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:8px; height:2px; background:var(--brand);
}

/* ---------- Zitat / Stimmen ---------- */
.quote{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 28px; display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:14px; transition:transform .25s var(--ease), box-shadow .25s;
}
.quote:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.quote:active{ transform:translateY(-1px) scale(.99); transition-duration:.1s; }
.quote .stars{ color:var(--brand); letter-spacing:.22em; font-size:.95rem; }
.quote blockquote{ font-size:1.03rem; line-height:1.62; max-width:40ch; }
.quote cite{
  font-style:normal; font-size:.76rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--dim);
}
.sifu-quote{
  max-width:56ch; margin-inline:auto; font-size:clamp(1.15rem,2.1vw,1.5rem);
  line-height:1.5; font-weight:600;
}

/* ---------- Galerie ---------- */
.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.gallery figure{ margin:0; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); background:var(--bg-3); }
.gallery img{ width:100%; height:100%; aspect-ratio:4/3; object-fit:cover; transition:transform 1.6s ease, filter .6s ease; filter:saturate(.85); }
.gallery figure:hover img{ transform:scale(1.06); filter:saturate(1); }
@media (max-width:760px){ .gallery{ grid-template-columns:1fr 1fr; gap:12px; } }

/* ---------- Kontakt-Karten ---------- */
.contact-item{
  flex-direction:column; align-items:center; text-align:center; gap:8px;
  background:var(--surface); position:relative; overflow:hidden;
  transition:transform .25s var(--ease), box-shadow .25s;
}
.contact-item::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--brand); transform:scaleX(0); transition:transform .3s var(--ease);
}
.contact-item:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.contact-item:hover::before{ transform:scaleX(1); }
.contact-item:active{ transform:translateY(-1px) scale(.99); transition-duration:.1s; }
.contact-item .ci-k{
  font-size:.72rem; font-weight:700; letter-spacing:.26em;
  text-transform:uppercase; color:var(--brand);
}
.contact-item .ci-v{ font-size:1.06rem; font-weight:700; min-width:0; overflow-wrap:break-word; }
.contact-item .ci-s{ color:var(--muted); font-size:.92rem; }

/* ---------- Externe Systeme (Funktions-Block) ---------- */
.ext{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px 26px; display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:12px; transition:transform .25s var(--ease), box-shadow .25s;
}
.ext:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.ext .ext-head{ font-size:.72rem; font-weight:700; letter-spacing:.26em; text-transform:uppercase; color:var(--brand); }
.ext p{ color:var(--muted); font-size:.94rem; max-width:34ch; }
.ext .btn{ margin-top:auto; }

/* ---------- Formular (Probetraining) ---------- */
.form{
  max-width:680px; margin-inline:auto; text-align:left;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:clamp(1.4rem,3.4vw,2.4rem);
  box-shadow:0 1px 2px rgba(26,21,18,.04);
}
.form .row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:620px){ .form .row{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:7px; margin-bottom:16px; min-width:0; }
.field label{ font-size:.72rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.field input, .field select, .field textarea{
  font:inherit; color:var(--text); background:var(--bg);
  border:1px solid var(--line-2); border-radius:var(--radius-sm);
  padding:13px 14px; width:100%; min-width:0;
  transition:border-color .2s, box-shadow .2s;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft);
}
.field textarea{ min-height:120px; resize:vertical; }
.form .btn{ width:100%; }
.form-note{ color:var(--muted); font-size:.86rem; margin-top:14px; text-align:center; max-width:none; }

/* ---------- Seitenkopf Unterseiten ---------- */
.page-head{
  margin-top:var(--nav-h); padding-block:clamp(3.4rem,7.5vw,6rem) clamp(2rem,4vw,3rem);
  text-align:center; background:var(--bg-2); border-bottom:1px solid var(--line);
}
.page-head h1{ font-size:clamp(2.1rem,5.2vw,3.7rem); max-width:18ch; margin-inline:auto; }
.page-head p{ margin:16px auto 0; max-width:56ch; color:var(--muted); }

/* ---------- CTA-Band ---------- */
.band-brand{ background:linear-gradient(150deg, var(--brand) 0%, var(--brand-deep) 100%); }
.band-brand .kicker{ color:var(--on-brand-mute); }
.band-brand .section-head p{ color:var(--on-brand-mute); }
.band-brand .btn-primary{ background:var(--on-brand); color:var(--brand); }
.band-brand .btn-ghost{ border-color:var(--on-brand); color:var(--on-brand); }
.band-brand .btn-ghost:hover{ background:rgba(255,255,255,.12); color:var(--on-brand); }
.band-brand .dot{ background:var(--brand); }

/* ---------- Footer ---------- */
.footer{ background:var(--bg-2); position:relative; }
.footer::before{
  content:""; position:absolute; top:-1px; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--brand-line) 50%, transparent);
}
.footer .f-brand{ font-family:var(--font-head); font-weight:900; font-size:1.2rem; letter-spacing:-.02em; }
.footer .f-claim{ color:var(--muted); font-size:.94rem; margin-top:10px; }
.footer h4{ color:var(--dim); }
.footer a{ color:var(--muted); }
.footer a:hover{ color:var(--brand); }
.footer-bottom{ color:var(--dim); }

/* ---------- Rechtsseiten ---------- */
.legal{ margin-inline:auto; text-align:left; }
.legal h1{ text-align:center; }
.legal h2{ font-family:var(--font-head); }
.legal h3{ font-family:var(--font-head); margin-top:1.8rem; }
.legal p, .legal li{ color:var(--muted); }
.legal a{ color:var(--brand); overflow-wrap:break-word; }
.legal strong{ color:var(--text); }
.legal .divider{ height:1px; background:var(--line); margin:2.2rem 0; }

/* ---------- Kleinkram ---------- */
.btn-primary{ background:var(--brand); color:var(--brand-ink); }
.btn-primary:hover{ background:var(--brand-deep); }
.btn-ghost{ border:1.5px solid var(--line-2); color:var(--text); }
.btn-ghost:hover{ border-color:var(--brand); color:var(--brand); }
.btn svg{ width:18px; height:18px; flex:none; transition:transform .25s var(--ease); }
.btn:hover svg{ transform:translateX(4px); }
.grid-3 > *, .grid-4 > *, .grid-2 > *{ min-width:0; }
.center{ text-align:center; }
.mt-l{ margin-top:clamp(2rem,4vw,3rem); }
.stack-btns{ display:inline-grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:14px; margin-top:30px; }
@media (max-width:560px){ .stack-btns{ grid-auto-flow:row; width:100%; } .stack-btns .btn{ width:100%; } }

@media (max-width:1023px){ .grid-3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:720px){
  .grid-3, .grid-2, .grid-4{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }

@media (prefers-reduced-motion:reduce){
  .hero-media img{ animation:none; transform:none; }
}

/* ---------- Hilfsklassen ---------- */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- QA-Runde 1: Befunde des Prüfskripts ---------- */

/* KONTRAST: Eyebrow und Vertrauenszeile liegen über dem Hero-Bild.
   Die Vignette allein reicht dort nicht — beide bekommen eine eigene
   deckende Pille als Untergrund (Lesbarkeit vor Transparenz). */
.eyebrow{ background:var(--surface); border-color:var(--brand-line); }
.trust{ gap:10px 12px; }
.trust li{
  background:var(--surface); border:1px solid var(--line);
  border-radius:999px; padding:7px 15px; color:var(--muted);
}

/* BUTTONPAAR: gefüllte und Geist-Buttons müssen exakt gleich hoch sein.
   Ohne transparenten Rahmen ist der gefüllte Knopf 2px flacher. */
.btn{ border:1.5px solid transparent; }
.btn-primary{ border-color:var(--brand); }
.band-brand .btn-primary{ border-color:var(--on-brand); }
.ext .btn{ width:100%; }

/* TOUCHZIEL: Wortmarke und Footer-Links auf Fingergrösse bringen. */
.nav-logo{ padding-block:7px; }
.footer ul a, .footer-bottom a{ display:inline-block; padding-block:11px; }
.footer ul{ gap:0; }
.legal p a{ display:inline-block; padding-block:2px; }

/* ================= QA-Runde 2: Befunde der Reviewer ================= */

/* Der Rahmen-Ausgleich weiter oben hat die Rahmen von Geist-Knopf und
   Anruf-Pille gelöscht (gleiche Spezifität, später notiert). Hier zurück. */
.btn-ghost{ border:1.5px solid var(--line-2); }
.btn-ghost:hover{ border-color:var(--brand); }
.nav-cta{ border:1.5px solid var(--brand); }
.band-brand .btn-ghost{ border-color:var(--on-brand); }
.band-brand .btn-primary{ border-color:var(--on-brand); }

/* Pfeile: ohne feste Grösse rendert ein Inline-SVG riesig und reisst
   den Linktext auf zwei Zeilen. */
.btn svg, .tile-link svg, .card .more svg, .more svg{
  width:18px; height:18px; flex:none;
}
.tile-link, .card .more{
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
}
.tile:hover .tile-link{ gap:14px; }

/* Lange deutsche Komposita sprengen sonst die Kartenbreite. */
.card h3, .tile h3, .person h3{ min-width:0; overflow-wrap:break-word; }
.card h3{ min-height:2.3em; display:flex; align-items:center; justify-content:center; }

/* Kartenfüsse auf eine gemeinsame Grundlinie ziehen. */
.quote{ justify-content:flex-start; }
.quote figcaption{ margin-top:auto; padding-top:6px; }
.contact-item{ justify-content:flex-start; }
.contact-item .ci-s{ margin-top:auto; padding-top:8px; color:var(--brand); font-weight:600; }

/* Trainingszeit in der Angebots-Karte: Tinte mit rotem Balken statt
   roter Fliesstext (Rot bleibt Akzent, wird nicht zur Tapete). */
.zeit{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.9rem; font-weight:700; color:var(--text);
  max-width:none; text-align:left;
}
.zeit::before{ content:""; width:18px; height:2px; background:var(--brand); flex:none; }

/* Stundenplan: der Kursname trägt die Information, nicht die Uhrzeit. */
table.plan td.time{ color:var(--text); font-weight:600; }
table.plan td:last-child{ font-weight:700; }
@media (max-width:640px){
  table.plan{ min-width:0; }
  table.plan th, table.plan td{ padding:12px 10px; font-size:.9rem; }
  table.plan td:first-child{ white-space:normal; }
}

/* Verlauf nie im Zweitakzent auslaufen lassen. */
.acc{ background:linear-gradient(96deg, var(--brand) 10%, var(--brand-deep) 96%);
      -webkit-background-clip:text; background-clip:text; color:transparent; }

/* Hero-Vignette einen Hauch zurücknehmen, damit das Bild trägt. */
.hero-veil.light{
  background:
    radial-gradient(ellipse 78% 64% at 50% 47%,
      rgba(253,252,250,.90) 0%, rgba(253,252,250,.82) 33%,
      rgba(253,252,250,.48) 62%, rgba(253,252,250,0) 88%),
    linear-gradient(180deg, rgba(253,252,250,.86) 0%, transparent 18%,
      transparent 70%, rgba(253,252,250,.96) 100%);
}
.eyebrow{ flex-wrap:wrap; justify-content:center; }

/* Seitenkopf: Luft oben und unten ausgleichen. */
.page-head{ padding-block:clamp(3.2rem,6vw,5rem) clamp(2.8rem,4.6vw,4.2rem); }

/* Auswahlfeld an die übrigen Formularfelder angleichen. */
.field select{
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B534B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
  background-size:18px; padding-right:42px;
}

/* Footer: Adresse in derselben Tonlage wie ihre Geschwister. */
.footer ul li{ color:var(--muted); line-height:1.55; }

/* Privattraining als breite Abschlusskarte statt Waise in der Reihe. */
.card-wide{ grid-column:1 / -1; }

/* TOUCHZIEL: Karten-Links und Fliesstext-Links auf Fingergrösse. */
.card .more{ padding-block:9px; }
.form-note a{ display:inline-block; padding-block:6px; }

/* Echte Siegelmarke der Akademie neben der Wortmarke. Die Marke ist genau so
   hoch wie der zweizeilige Schriftzug, damit die Navigationshöhe (--nav-h)
   unverändert bleibt. */
.nav-logo{ flex-direction:row; align-items:center; gap:10px; }
.nav-logo .lg-text{ display:inline-flex; flex-direction:column; line-height:1; }
.nav-logo .lg-mark{ height:30px; width:auto; display:block; flex:none; }
@media (max-width:400px){ .nav-logo{ gap:8px; } .nav-logo .lg-mark{ height:26px; } }

/* Probetraining-Pille in der Navigation: auf jeder Seite und in jeder
   Fenstergrösse sichtbar (anders als die Anruf-Pille, die unter 1024px
   dem Burger weicht). Sie ist der wichtigste Weg in die Akademie. */
.nav-probe{ font-size:.9rem; padding:11px 20px; white-space:nowrap; }
.nav-probe:hover{ background:var(--brand-deep); }
@media (max-width:1023px){ .nav-probe{ font-size:.82rem; padding:10px 16px; } }
@media (max-width:440px){
  .nav-inner{ gap:8px; }
  .nav-actions{ gap:2px; }
  .nav-probe{ font-size:.72rem; padding:9px 11px; }
}
@media (max-width:360px){ .nav-probe{ font-size:.67rem; padding:8px 9px; } }


/* Wunsch v3 (11.08.2026): Karten-Bilder aus Wunsch v1 wieder eingesetzt.
   (v1 hatte Kinder-/Teens-Bilder und das Doppelmesser-Bild eingebaut, die
   Umsetzung von Wunsch v2 hatte sie versehentlich wieder entfernt.)
   Messer-Bild bewusst NUR bei "VingTsun Erwachsene", nie bei Gewaltprävention. */
.card-media { margin: -32px -32px 6px; border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; aspect-ratio: 16 / 10; }
.card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Wunsch v4: Ausschnitt so gesetzt, dass Kopf und Oberkörper im Bild sind. */
.card-media.tall img { object-position: 50% 5%; }

/* Wunsch v4: Empfangsbestätigung nach dem Absenden der Probetraining-Anfrage. */
.form-done{ text-align:center; }
.form-done h3{ margin:0 0 .6rem; }
.form-done p{ color:var(--muted); margin-inline:auto; max-width:46ch; }
.form-done .form-note{ margin-top:1rem; }

/* Wunsch v5 (12.08.2026): Ablauf des ersten Probetrainings — fünf Schritte,
   Ziffernmarke wie bei den Karten, verbunden durch die Haarlinie der Signature. */
.steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:24px; }
.step{ position:relative; text-align:center; min-width:0; }
.step::before{
  /* Haarlinie von der Ziffer zur nächsten: 34px Abstand zum Kreis, 24px Spaltenabstand */
  content:""; position:absolute; top:26px; left:calc(50% + 34px); right:calc(-50% + 10px);
  height:1px; background:var(--line-2);
}
.step:last-child::before{ display:none; }
.step-num{
  position:relative; z-index:1;
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:50%;
  background:var(--brand-soft); border:1px solid var(--brand-line); color:var(--brand);
  font-family:var(--font-head); font-weight:900; font-size:.9rem; letter-spacing:.16em;
}
.step h3{ font-size:var(--fs-h3); margin:16px 0 8px; overflow-wrap:break-word; }
.step p{ color:var(--muted); font-size:.96rem; max-width:26ch; margin:0 auto; }
@media (max-width:900px){
  .steps{ grid-template-columns:repeat(2,1fr); gap:32px 24px; }
  .step::before{ display:none; }
}
@media (max-width:560px){ .steps{ grid-template-columns:1fr; } }