/* Shared stylesheet for the pre-rendered coaching pages (public/coaching/**).
     Same palette and type as the rest of Padelcademy (see src/style.css,
     src/landing.css) but its own file: these pages are plain static HTML
     with no build step, so they can't pull in either of those. */
/* Die Farb-Tokens stehen zentral in /assets/theme.css (beide Themes) und
   werden von jeder Seite VOR dieser Datei geladen. Vorher hatte jede
   dieser Dateien ihren eigenen :root-Block auf der alten dunkelgruenen
   Palette. */

  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:
      radial-gradient(ellipse 900px 520px at 12% -8%, rgba(255,255,255,0.045), transparent 60%),
      radial-gradient(ellipse 900px 640px at 92% 8%, rgba(255,255,255,0.035), transparent 55%),
      var(--bg);
    color:var(--ink);
    font-family:var(--ce-font-text);
    overflow-x:hidden;
  }
  a{ color:inherit; }
  img,svg{ display:block; max-width:100%; }

  .wrap{ position:relative; z-index:1; max-width:760px; margin:0 auto; padding:0 20px; }

  /* ---- NAV ---- */
  .nav{ display:flex; align-items:center; justify-content:space-between; padding:20px 0; max-width:1120px; margin:0 auto; padding-left:20px; padding-right:20px; }
  .nav-brand{ display:flex; align-items:center; gap:8px; font-family:var(--ce-font-ui); font-weight:800; font-size:18px; text-decoration:none; }
  .nav-brand .dot{ width:9px; height:9px; border-radius:50%; background:var(--court-bright); }
  .nav-links{ display:flex; align-items:center; gap:18px; font-size:13.5px; font-weight:700; color:var(--ink-muted); }
  .nav-links a{ text-decoration:none; }
  .nav-links a:hover{ color:var(--ink); }
  .nav-cta{
    background:var(--court-bright); color:var(--on-accent); border-radius:9px;
    padding:8px 14px; font-weight:800; font-size:13px; text-decoration:none; white-space:nowrap;
  }
  @media (max-width: 639px){ .nav-links a:not(.nav-cta){ display:none; } }

  /* ---- BREADCRUMB + HERO ---- */
/* --ink-faint ist der Ton fuer Zierlinien, nicht fuer Schrift: auf
     --surface-1 sind das 1,9:1 (Sand) bzw. 3,0:1 (Graphite). Breadcrumb,
     Footer-Links, Meta-Zeile und Antwort-Kuerzel liefen hier noch darueber
     — auf genau den Seiten, ueber die Leute per Suchmaschine einsteigen.
     Sie nutzen jetzt --ink-muted (>4,5:1 in beiden Themes), dieselbe
     Korrektur wie im App-Stylesheet. */
    
/* Outfit laedt per display=swap, davor rendert die System-Schrift — und die
     ist rund 20% breiter. Diese Ersatzfamilie skaliert sie per size-adjust auf
     Outfits Laufweite, damit der Schriftzug vor und nach dem Laden gleich
     breit ist und in der Kopfzeile nichts springt oder ueberlaeuft. */
  @font-face{
    font-family:'Outfit Fallback';
    src:local('Arial'), local('Helvetica Neue'), local('Helvetica'), local('DejaVu Sans');
    size-adjust:82%;
    ascent-override:100%; descent-override:25%; line-gap-override:0%;
  }
  /* ---- WORT-BILDMARKE "CAGE SLASH" ---------------------------------------
     Drei kinetische Slashes bilden ein schraeges P: Stamm in der Textfarbe,
     obere Schleife im Akzent, unterer Slice im Ball-Gelb. Alle drei ueber
     Tokens, damit die Marke in Sand und Graphite mitwechselt. Identisch
     definiert in src/style.css, src/landing.css und den Stylesheets der
     vorgerenderten Seiten. */
  .brand-logo{ display:inline-flex; align-items:center; gap:10px; min-width:0; text-decoration:none; color:var(--text-main); }
  .brand-logo-mark{ width:clamp(27px, 7.2vw, 30px); height:clamp(27px, 7.2vw, 30px); flex:0 0 auto; display:block; }
  .brand-logo-text{ font-family:'Outfit', 'Outfit Fallback', ui-sans-serif, system-ui, sans-serif; font-size:clamp(19px, 5.2vw, 22px); line-height:1; white-space:nowrap; }
  .brand-text-heavy{ font-weight:900; letter-spacing:-0.5px; color:var(--text-main); }
  .brand-text-light{ font-weight:600; letter-spacing:-0.2px; color:var(--accent-primary); }
  /* Der Ball-gelbe Slice steht im Graphite mit 10,2:1 auf dem dunklen Grund,
     im Sand aber nur mit 1,31:1 auf der hellen Karte — er schwebt dort
     regelrecht. Statt das Gelb aufzugeben (es IST die Ballfarbe) bekommt er
     eine Kante aus --amber-ink: im Sand ein dunkles Bernstein (4,0:1 gegen
     die Karte), im Graphite fast derselbe Ton wie die Fuellung, dort also
     unsichtbar — genau da, wo er auch nicht gebraucht wird. */
  .brand-logo-mark polygon{ stroke:var(--amber-ink); stroke-width:1.4; stroke-linejoin:round; }
  .brand-logo:focus-visible{ outline:2px solid var(--accent-primary); outline-offset:3px; border-radius:8px; }
  /* Unter 460px reicht der Platz in der Navigationszeile nicht fuer
     Signet, Schriftzug, Theme-Knopf UND den CTA-Button: gemessen ragte der
     Schriftzug bei 390px um 25px und bei 320px um 86px in die rechte
     Gruppe hinein. Dort steht das Signet allein — die Wortmarke sagt die
     Ueberschrift direkt darunter ohnehin. */
  @media (max-width: 459px){
    .nav .brand-logo-text{ display:none; }
  }

  

  .crumb{ font-size:12.5px; font-weight:700; color:var(--ink-muted); margin:0 0 12px; }
  .crumb a{ color:var(--ink-muted); text-decoration:none; }
  .crumb a:hover{ color:var(--court-bright); }
  .module-hero{ padding:28px 0 20px; }
  .module-hero h1{
    font-family:var(--ce-font-ui); font-weight:800; font-size:clamp(26px,5vw,38px);
    line-height:1.15; margin:0 0 12px; text-wrap:balance;
  }
  .module-hero .lead{ font-size:16px; line-height:1.6; color:var(--ink-muted); max-width:62ch; margin:0 0 22px; }
  .btn{
    font-family:var(--ce-font-ui); font-weight:800; font-size:14.5px; border-radius:11px; border:none;
    padding:13px 22px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:6px;
  }
  .btn-primary{ background:var(--court-bright); color:var(--on-accent); }
  .btn-primary:hover{ filter:brightness(1.06); }

  /* ---- TOPIC NAV (click-through chips + pager) ----
     Progressive enhancement: without JS every topic stays visible and the
     page is one long scroll (so it still reads fine with JS off, and
     nothing is ever hidden from a crawler that doesn't run scripts).
     assets/pages.js adds .js-active to <body> once it can run the
     click-through behaviour, and that class is what actually enables the
     hide/show rules below — plain CSS never hides a topic by itself. */
  .topic-nav{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0 0 28px; padding:0; }
  .topic-nav a{
    display:flex; align-items:center; justify-content:center; width:34px; height:34px;
    border-radius:50%; background:var(--surface); border:1px solid var(--line); color:var(--ink-muted);
    font-family:var(--ce-font-ui); font-weight:800; font-size:13px; text-decoration:none; flex:0 0 auto;
  }
  .topic-nav a:hover{ border-color:var(--court-bright); color:var(--ink); }
  .topic-nav a.active{ background:var(--court-bright); color:var(--on-accent); border-color:var(--court-bright); }
  body:not(.js-active) .topic-nav{ display:none; }

  .topic-pager{ display:none; justify-content:space-between; gap:12px; margin:8px 0 40px; }
  .topic-pager button{
    font-family:var(--ce-font-ui); font-weight:800; font-size:13.5px; border-radius:10px;
    border:1px solid var(--line-strong); background:var(--surface-2); color:var(--ink);
    padding:11px 18px; cursor:pointer;
  }
  .topic-pager button:hover:not(:disabled){ border-color:var(--court-bright); }
  .topic-pager button:disabled{ opacity:.35; cursor:default; }
  body.js-active .topic-pager{ display:flex; }

  /* ---- TOPIC ARTICLES ---- */
  .topic-list{ list-style:none; margin:8px 0 40px; padding:0; display:flex; flex-direction:column; gap:0; }
  .topic-article{ border-top:1px dashed var(--line); padding:24px 0; }
  .topic-article:first-child{ border-top:1px solid var(--line); }
  body.js-active .topic-article[hidden]{ display:none; }
  .topic-num{
    font-family:var(--ce-font-ui); font-weight:800; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--ink-muted);
  }
  .topic-article h2{ font-family:var(--ce-font-ui); font-weight:800; font-size:20px; margin:6px 0 16px; text-wrap:balance; }
  .topic-diagram{
    background:var(--court); border:1px solid var(--line); border-radius:14px;
    padding:18px; margin:0 0 18px; display:flex; align-items:center; justify-content:center;
  }
  .topic-diagram svg{ width:100%; max-width:320px; height:auto; }
  /* Lesbarkeit der Feld-Beschriftungen — mirrort src/style.css's
     .court-wrap-Regel: Zonen-/Hinweistexte im Diagramm (rot/gedämpftes
     Grau-Grün, 7-10px) hatten zu wenig Kontrast zum dunkelgrünen
     Court-Hintergrund. Ein dünner dunkler Halo hinter jedem Buchstaben
     macht sie unabhängig von der Verlaufsfarbe darunter lesbar; die
     Spieler-Token-Beschriftungen (DU/P/G1/G2) sitzen bereits auf einem
     soliden Kreis und bleiben deshalb ausgenommen. */
  .topic-diagram svg text{ paint-order:stroke fill; stroke:var(--court-strong); stroke-width:2.4px; stroke-linejoin:round; }
  .topic-diagram svg .tt-token text{ stroke:none; }

  /* ---- SCHLÄGERFORMEN-SHOWCASE (mirrors src/style.css) ----
     Same markup as the app's racketShapes.js, so kept in sync here by
     hand — see that comment for why. Renders without JS too: the
     :checked ~ selectors below are pure CSS, only the hover-tilt (see
     coach-anim.js's initRacketTilt) needs JS and is pure enhancement. */
  .rk-tab-input{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
  .rk-tabs{ display:flex; gap:6px; margin-bottom:12px; }
  .rk-tab{
    flex:1; text-align:center; cursor:pointer; user-select:none;
    font-family:var(--ce-font-ui); font-weight:700; font-size:13px;
    padding:8px 6px; border-radius:999px; border:1.5px solid var(--line-strong);
    color:var(--ink-muted); background:var(--surface-2);
  }
  .rk-tab:hover{ border-color:var(--accent-ink); }
  #rkShapeRund:checked ~ .rk-tabs label[for="rkShapeRund"],
  #rkShapeTropfen:checked ~ .rk-tabs label[for="rkShapeTropfen"],
  #rkShapeDiamant:checked ~ .rk-tabs label[for="rkShapeDiamant"]{
    /* War --court-bright (#c2410c) als SCHRIFT: 3,63:1 im Sand und
       3,40:1 im Graphite — dieselbe Falle wie in der App, wo dafuer
       laengst --accent-ink steht. Die statische Seite hatte die
       Umstellung nie mitbekommen (auch das Gold-rgba stammt noch aus
       der Zeit vor Terrakotta). */
    border-color:var(--accent-ink); color:var(--accent-ink); background:var(--accent-tint);
  }
  .rk-card{ display:none; }
  #rkShapeRund:checked ~ .rk-panels .rk-card[data-shape="Rund"],
  #rkShapeTropfen:checked ~ .rk-panels .rk-card[data-shape="Tropfen"],
  #rkShapeDiamant:checked ~ .rk-panels .rk-card[data-shape="Diamant"]{ display:block; }
  .rk-card-inner{
    max-width:320px; margin:0 auto;
    background:var(--surface); border:1.5px solid var(--accent-tint-edge);
    border-radius:16px; box-shadow:var(--shadow-card);
    padding:18px 18px 20px; transition:transform .15s ease-out;
  }
  .rk-badge-row{ display:flex; justify-content:space-between; align-items:center; }
  .rk-badge{
    background:var(--accent-tint); color:var(--accent-ink);
    border:1px solid var(--accent-primary); border-radius:6px;
    padding:4px 9px; font-family:var(--ce-font-ui); font-weight:800; font-size:11px;
    text-transform:uppercase; letter-spacing:.06em;
  }
  .rk-badge.highlight{ background:var(--court-bright); color:var(--on-accent); border-color:var(--court-bright); }
  .rk-balance{ font-family:var(--ce-font-ui); font-weight:600; font-size:11px; color:var(--ink-muted); }
  .rk-svg-wrap{ height:210px; display:flex; align-items:center; justify-content:center; margin:8px 0 10px; }
  .rk-svg{ width:100%; height:100%; max-width:210px; display:block; }
  .rk-shadow{ fill:rgba(0,0,0,0.35); transform:translate(3px,9px); }
  .rk-frame{ fill:url(#rkBevel); }
  .rk-surface{ fill:url(#rkCarbon); stroke:var(--court-strong); stroke-width:1.5; }
  .rk-glow{ fill:url(#rkGlow); }
  .rk-ring{ fill:none; stroke:var(--court-bright); stroke-width:1.5; stroke-dasharray:4 3; opacity:.85; }
  .rk-core{ fill:var(--ink); }
  .rk-holes circle{ fill:var(--court-strong); stroke:var(--surface-2); stroke-width:0.75; }
  .rk-handle{ fill:var(--court-strong); stroke:var(--surface-2); stroke-width:1.5; }
  .rk-grip{ stroke:var(--court-bright); stroke-width:1.2; opacity:.4; }
  .rk-cap{ fill:var(--court-bright); }
  .rk-lanyard{ fill:none; stroke:var(--ink-muted); stroke-width:1.5; stroke-dasharray:2 2; }
  .rk-title{ font-family:var(--ce-font-ui); font-weight:800; font-size:21px; color:var(--ink); margin:0; text-transform:uppercase; letter-spacing:.02em; }
  .rk-subtitle{ font-size:13px !important; color:var(--ink-muted) !important; margin:4px 0 12px !important; line-height:1.4 !important; max-width:none !important; }
  .rk-stat{ background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:9px 11px; margin-bottom:12px; }
  .rk-stat-labels{ display:flex; justify-content:space-between; font-family:var(--ce-font-ui); font-weight:700; font-size:11px; margin-bottom:6px; }
  .rk-stat-labels span:first-child{ color:var(--ink-muted); text-transform:uppercase; letter-spacing:.04em; }
  .rk-stat-val{ color:var(--accent-ink); }
  .rk-track{ height:6px; border-radius:3px; background:var(--line); overflow:hidden; }
  .rk-track i{ display:block; height:100%; background:linear-gradient(90deg, var(--court-bright), var(--ball)); border-radius:3px; }
  .rk-tag{ margin:0 !important; font-weight:600; font-size:12.5px !important; color:var(--ink) !important; line-height:1.4 !important; max-width:none !important; }
  .topic-article p{ font-size:15px; line-height:1.65; color:var(--ink-muted); max-width:62ch; margin:0 0 12px; }
  .topic-article .tip, .topic-article .mistake{ font-size:13.5px; font-weight:700; line-height:1.5; max-width:62ch; }
  .topic-article .tip{ color:var(--accent-ink); }
  /* Faktenliste (topics[].facts in src/data/coaching.js) — gleiche Rolle
     wie .pr-facts in der App: Zahlen zum Nachschlagen statt im Fliesstext. */
  .topic-article .topic-facts{
    margin:10px 0 14px; padding:0 0 0 19px; list-style:disc; max-width:62ch;
    display:flex; flex-direction:column; gap:6px;
  }
  .topic-article .topic-facts li{ font-size:14.5px; line-height:1.55; color:var(--ink-muted); }
  .topic-article .topic-facts li::marker{ color:var(--accent-ink); }

  /* Ecken-Paar (topics[].bilder). Auf dem Telefon untereinander, ab
     560px nebeneinander — der Vergleich lebt vom gleichzeitigen Sehen. */
  .topic-article .topic-bilder{ margin:14px 0 0; display:grid; gap:12px; grid-template-columns:1fr; }
  .topic-article .topic-bild{
    margin:0; padding:10px; border:1px solid var(--line); border-radius:12px;
    background:var(--surface-2); display:flex; flex-direction:column; gap:8px;
  }
  .topic-article .topic-bild .ecke-svg{ display:block; width:100%; max-width:100%; height:auto; }
  .topic-article .topic-bild figcaption{ display:flex; flex-direction:column; gap:3px; }
  .topic-article .topic-bild figcaption b{ font-family:var(--ce-font-ui); font-weight:800; font-size:13px; color:var(--ink); }
  .topic-article .topic-bild figcaption span{ font-size:14px; line-height:1.5; color:var(--ink-muted); }
  @media (min-width:560px){
    .topic-article .topic-bilder{ grid-template-columns:1fr 1fr; }
  }
  .topic-article .topic-facts b{ color:var(--ink); font-weight:800; }
  .topic-article .mistake{ color:var(--err-ink); }

  /* ---- MODULE GRID (coaching hub) ---- */
  .hub-hero{ padding:28px 0 8px; text-align:left; }
  .hub-hero h1{ font-family:var(--ce-font-ui); font-weight:800; font-size:clamp(26px,5vw,38px); margin:0 0 12px; text-wrap:balance; }
  .hub-hero p{ font-size:16px; line-height:1.6; color:var(--ink-muted); max-width:62ch; margin:0; }
  .hub-hero p + p{ margin-top:10px; }
  .module-grid{ display:grid; grid-template-columns:1fr; gap:14px; margin:28px 0 48px; }
  .module-card{
    display:flex; gap:14px; align-items:flex-start; background:var(--surface); border:1px solid var(--line);
    border-radius:14px; padding:18px; text-decoration:none; color:var(--ink); box-shadow:var(--shadow-card);
  }
  .module-card:hover{ border-color:var(--court-bright); }
  /* Die alten Linien- und 3D-Regeln fuer .m-icon sind mit dem
     Perlen-Rollout entfallen: hier sitzt jetzt eine Perle, und
     :not(.icon-3d) haette ihre Linien umgefaerbt. Der aeussere Rahmen
     Auch Kachel, Rand und feste Groesse sind hier weg: sie standen mit
     (0,2,0) ueber .pearl-huelle aus pearl.css und haetten einen zweiten
     Rahmen um die Perle gezogen — gemessen 1px statt 0. */
  .module-card .m-icon{
    flex:0 0 auto;
    display:flex; align-items:center; justify-content:center;
  }
  .module-card h2{ font-family:var(--ce-font-ui); font-weight:800; font-size:15.5px; margin:0 0 4px; }
  .module-card p{ font-size:13px; line-height:1.5; color:var(--ink-muted); margin:0 0 4px; }
  .module-card .m-count{ font-size:11.5px; font-weight:700; color:var(--accent-ink); }

  /* ---- FOOTER ---- */
  footer{ border-top:1px solid var(--line); padding:26px 0 40px; margin-top:20px; max-width:1120px; margin-left:auto; margin-right:auto; padding-left:20px; padding-right:20px; }
  .footer-row{ display:flex; flex-direction:column; gap:14px; align-items:center; text-align:center; }
  .footer-links{ display:flex; gap:18px; font-size:12.5px; color:var(--ink-muted); flex-wrap:wrap; justify-content:center; }
  .footer-links a{ text-decoration:none; }
  .footer-links a:hover{ color:var(--ink-muted); }
  .footer-note{ font-size:12px; color:var(--ink-muted); }

  @media (min-width: 640px){
    .module-grid{ grid-template-columns:repeat(2, 1fr); }
    .footer-row{ flex-direction:row; justify-content:space-between; text-align:left; }
  }
  @media (min-width: 900px){
    .module-grid{ grid-template-columns:repeat(3, 1fr); }
  }

  @media (prefers-reduced-motion: reduce){
    * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  }

  /* ---- STROKE-VIEW / POSE ANIMATION (mirrors src/style.css) ----
     court()'s moving-ball diagrams are driven by assets/coach-anim.js;
     poseSwing()'s crossfading figures are pure CSS and just need these
     keyframes present on the page. */
  .stroke-impact{ animation:strokeImpact 2400ms ease-in-out infinite; }
  @keyframes strokeImpact{
    0%,42%{ opacity:0; transform:scale(.4); }
    51%{ opacity:1; transform:scale(1.2); }
    61%,100%{ opacity:0; transform:scale(.4); }
  }
  .stroke-impact.impact-overhead{ animation-name:strokeImpactOverhead; animation-duration:2800ms; }
  @keyframes strokeImpactOverhead{
    0%,55%{ opacity:0; transform:scale(.4); }
    62%{ opacity:1; transform:scale(1.2); }
    70%,100%{ opacity:0; transform:scale(.4); }
  }
  .stroke-player{ width:100%; }
  .stroke-tabs{ display:flex; gap:4px; margin-bottom:10px; }
  .stroke-tab{
    flex:1; padding:6px 4px; border:1.5px solid var(--line-strong); border-radius:8px;
    background:var(--surface); font-family:var(--ce-font-ui); font-weight:700;
    font-size:10.5px; line-height:1.25; color:var(--ink-muted); text-align:center;
    cursor:pointer; transition:background .15s ease, border-color .15s ease, color .15s ease;
  }
  .stroke-tab:hover{ border-color:var(--court-bright); color:var(--ink); }
  .stroke-tab:focus-visible{ outline:2px solid var(--court-bright); outline-offset:1px; }
  .stroke-tab.active{ background:var(--court-bright); border-color:var(--court-bright); color:var(--on-accent); }
  .pose{ display:none; }
  .pose.active{ display:block; }

  /* ---- BUEHNEN SIND KEIN COURT (spiegelt src/style.css) --------------
     Die Diagramme sind mit Court-Tokens beschriftet, liegen aber auf einer
     hellen Kachel. Custom Properties vererben, also die Court-Gruppe hier
     lokal auf ihre UI-Entsprechungen umbiegen — und den Halo abschalten,
     der nur auf dem Belag Sinn ergibt. */
  .stroke-stage, .grip-stage{
    --court-path:var(--amber-ink);
    --court-faint:var(--ink-muted);
    --court-label:var(--ink);
    --court-danger:var(--err-ink);
    --court-ok:var(--ok-ink);
    --court-ball:var(--gold);
  }
  .stroke-stage svg text, .grip-stage svg text{ stroke:none; paint-order:normal; }

  .stroke-container{ display:flex; flex-direction:column; gap:12px; }
  .stroke-stage{
    width:100%; max-width:320px; aspect-ratio:22/15; margin:0 auto;
    /* Lag hier noch auf dem alten Moosgruen (rgba(14,35,27,0.6)) — im
       Sand-Theme eine dunkelgruene Kachel mitten in der Sandkarte, im
       Graphite verschwanden Buehne und Zeichnung ineinander (1,1:1).
       Gleiche Korrektur wie in src/style.css. */
    background:var(--surface-1); border:1px solid var(--border-interactive); border-radius:14px;
    display:flex; align-items:center; justify-content:center; overflow:hidden; padding:8px;
  }
  .stroke-stage svg{ width:100%; height:100%; display:block; }
  .stroke-details{ width:100%; }
  .stroke-phase-detail{ display:none; }
  .stroke-phase-detail.active{ display:block; }
  .stroke-phase-title{
    margin:0 0 8px; font-family:var(--ce-font-ui); font-weight:800; font-size:13px;
    color:var(--accent-ink);
  }
  .stroke-checks{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; }
  .stroke-checks li{ display:flex; align-items:flex-start; gap:8px; font-size:12.5px; line-height:1.45; color:var(--ink); }
  .stroke-checks li::before{
    content:'✓'; flex:0 0 16px; width:16px; height:16px; margin-top:1px; border-radius:50%;
    background:var(--court-bright); color:var(--on-accent); font-size:10px; font-weight:800;
    line-height:16px; text-align:center;
  }
  .stroke-player:not(.has-details) .stroke-details{ display:none; }
  .stroke-player:not(.has-details) .stroke-stage{
    max-width:340px; background:none; border:none; padding:0;
  }

  /* gripGuide() — "Der Continental-Griff" (mirrors src/style.css). */
  .grip-guide{ width:100%; }
  .grip-container{ display:flex; flex-direction:column; gap:14px; }
  .grip-stage{
    width:100%; max-width:320px; margin:0 auto; padding:10px;
    background:var(--surface-1); border:1px solid var(--border-interactive); border-radius:14px;
  }
  .grip-svg{ width:100%; height:auto; display:block; }
  .grip-octagon-shadow{ fill:rgba(0,0,0,0.22); transform:translate(3px,5px); }
  .grip-octagon{ fill:var(--surface-2); stroke:var(--border-interactive); stroke-width:2; }
  .grip-edge{ stroke:var(--border-interactive); stroke-width:3; stroke-linecap:round; }
  .grip-edge-active{ stroke:var(--court-bright); stroke-width:5; }
  .grip-edge-label{ fill:var(--surface-2); stroke:var(--border-interactive); stroke-width:1.5; }
  .grip-edge-label.active{ fill:var(--accent-ink); stroke:var(--court-bright); }
  .grip-edge-num{ font-family:var(--ce-font-ui); font-weight:800; font-size:10px; fill:var(--ink-muted); }
  .grip-edge-num.active{ fill:var(--on-accent); }
  .grip-contact{ fill:var(--gold); stroke:var(--surface-1); stroke-width:1.5; }
  .grip-contact-label{ font-family:var(--ce-font-ui); font-weight:700; font-size:7.5px; fill:var(--ink-muted); }
  .grip-v-guide{ stroke:var(--gold); stroke-width:1.2; stroke-dasharray:3 3; }
  .grip-v-shape{ fill:none; stroke:var(--gold); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
  .grip-v-label{ font-family:var(--ce-font-ui); font-weight:800; font-size:11px; fill:var(--amber-ink); }
  .grip-caption{ font-family:var(--ce-font-ui); font-weight:700; font-size:7px; letter-spacing:.02em; fill:var(--ink-muted); }
  .grip-legend{ display:flex; flex-wrap:wrap; gap:4px 12px; justify-content:center; margin:6px 0 0; }
  .grip-legend-item{ display:flex; align-items:center; gap:5px; font-family:var(--ce-font-ui); font-weight:700; font-size:10.5px; color:var(--ink-muted); }
  .grip-legend-item i{ width:8px; height:8px; border-radius:50%; background:var(--gold); flex:0 0 auto; }
  .grip-info{ display:flex; flex-direction:column; gap:10px; width:100%; }
  .grip-box{ padding:10px 12px; border-radius:10px; background:var(--surface-2); border-left:3px solid var(--line-strong); }
  .grip-box-title{ margin:0 0 4px; font-family:var(--ce-font-ui); font-weight:800; font-size:12.5px; color:var(--ink); }
  .grip-box-text{ margin:0; font-size:12px; line-height:1.5; color:var(--ink-muted); }
  .grip-box-rule{ border-left-color:var(--gold); }
  .grip-box-check{ border-left-color:var(--court-bright); }
  .grip-box-check .grip-box-title{ color:var(--accent-ink); }
  .grip-box-mistake{ border-left-color:var(--error); }
  .grip-box-mistake .grip-box-title{ color:var(--err-ink); }

  @media (min-width:900px){
    .stroke-player.has-details .stroke-container{ flex-direction:row; align-items:flex-start; gap:18px; }
    .stroke-player.has-details .stroke-stage{ flex:0 0 320px; margin:0; }
    .stroke-player.has-details .stroke-details{ flex:1 1 auto; min-width:0; }
    .grip-container{ flex-direction:row; align-items:flex-start; gap:18px; }
    .grip-stage{ flex:0 0 320px; margin:0; }
    .grip-info{ flex:1 1 auto; min-width:0; }
  }

/* Theme-Umschalter in der Navigation — sieht aus wie die uebrigen
   Nav-Elemente, setzt nur das Button-Default zurueck. */
.nav-theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; padding:0; border-radius:999px; cursor:pointer;
  background:var(--surface-2); border:1px solid var(--border-subtle);
  color:var(--ink); font-size:15px; line-height:1;
  -webkit-appearance:none; appearance:none;
  transition:background .18s ease, border-color .18s ease;
}
.nav-theme-toggle:hover{ background:var(--surface-hover); border-color:var(--accent-line); }
.nav-theme-toggle:focus-visible{ outline:2px solid var(--accent-primary); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ .nav-theme-toggle{ transition:none; } }