/* =====================================================================
   VORGERENDERTE SEITEN — MASTER-DESIGNSTAND (Paket Seiten, 30.09.2026)
   =====================================================================
   Gilt fuer alle statischen Seiten unter public/: Coaching, Quiz,
   Prinzipien (erzeugt), Schlaeger-Finder, Impressum, Datenschutz. Wird
   NACH dem jeweiligen Seiten-Stylesheet geladen und legt die Master-
   Bausteine darueber: Kopf wie die Startseite, Pfad in Geist Mono, h1/h2
   in Instrument Sans halbschmal, Karten (Master .mx-karte), Knoepfe
   (Master .mx-knopf), Fuss. Die Seiten-Stylesheets behalten Aufbau und
   Sonderteile (Schlagbewegung, Griff, Schlaegerformen, Quizoptionen).

   Farben NUR ueber --ce-*-Tokens (src/tokens.css = theme.css Teil B).
   Die alten Tokennamen, die Markup und Seiten-Stylesheets noch lesen,
   werden hier auf --ce-* gelegt:

   COURT-DIAGRAMME: die flachen Courts (COURT_DEFS_V2 + Markup) standen auf
   Terrakotta. Im Master-Stil stehen sie als dunkles Instrument-Paneel —
   in beiden Farbprofilen (--ce-diagramm-*). Die Verlaeufe in <defs>
   loesen var() am Dokument auf, deshalb stehen die Court-Tokens auf
   html und nicht auf dem Diagramm-Rahmen.
   ===================================================================== */

html[data-theme]{
  /* Oberflaechen-Akzent: Master-Primaer (Graphit auf Sand, Sand auf Graphit) */
  --court-bright: var(--ce-brand);
  /* Court-Diagramme: Instrument-Paneel */
  --court: var(--ce-diagramm-grund);
  --court-turf-1: var(--ce-diagramm-belag);
  --court-turf-2: var(--ce-diagramm-belag-2);
  --court-surround: var(--ce-diagramm-grund);
  --court-strong: var(--ce-diagramm-figur);
  --court-lines: var(--ce-diagramm-linie);
  --court-line: var(--ce-diagramm-linie);
  --net-edge: var(--ce-diagramm-netz);
  --court-glass: var(--ce-diagramm-glas);
  --court-glass-hi: var(--ce-diagramm-linie);
  --court-sheen: var(--ce-diagramm-linie);
  --court-label: var(--ce-diagramm-schrift);
  --court-faint: var(--ce-diagramm-glas);
  --court-chip: var(--ce-diagramm-figur);
  --court-accent: var(--ce-diagramm-ball);
  --court-ball: var(--ce-diagramm-ball);
  --court-anflug: #93c5fd;   /* ankommender Ball (Punkt 30) */
  --court-path: var(--ce-diagramm-weg);
  --court-ok: var(--ce-diagramm-gut);
  --court-danger: var(--ce-diagramm-fehler);
  --court-zone-uebergang: var(--ce-diagramm-uebergang);
}
/* Innerhalb der Diagramme ist der Akzent ein Taktik-Ton, der auf dem
   dunklen Paneel steht (auf der Seite waere Graphit dort unsichtbar). */
.topic-diagram, .chapter-cover-hero, .module-card .m-icon svg{ --court-bright: var(--ce-diagramm-weg); --ink: var(--ce-diagramm-schrift); }

/* ---- Grund und Schrift ---------------------------------------------- */
body{
  background: var(--ce-canvas);
  color: var(--ce-ink);
  font-family: var(--ce-font-text);
  -webkit-font-smoothing: antialiased;
}
:focus-visible{ outline: 2px solid var(--ce-focus-ring); outline-offset: 2px; }
/* Beschriftungen in den Diagrammen: Master-UI-Schrift statt Karla
   (das Markup nennt font-family als Attribut; CSS geht vor). */
svg text{ font-family: var(--ce-font-ui); }

/* ---- Kopf (wie die Startseite, Master .mx-l-kopf) --------------------- */
.nav{
  position: sticky; top: 0; z-index: 50;
  max-width: none; margin: 0; padding: 10px max(20px, calc((100% - 1120px) / 2));
  background: color-mix(in srgb, var(--ce-canvas) 86%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ce-line);
}
.nav-links{ gap: 4px; font-family: var(--ce-font-ui); font-size: 14.5px; font-weight: 550; color: var(--ce-ink-2); }
.nav-links a:not(.nav-cta){
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  border-radius: var(--ce-r-pill); color: var(--ce-ink-2); text-decoration: none;
}
.nav-links a:not(.nav-cta):hover{ color: var(--ce-ink); background: var(--ce-surface-2); }
/* Auf dem Telefon bleiben Marke, Design und der Aufruf (wie bisher, die
   Seiten-Stylesheets blenden die Textziele unter 640 px aus — diese Regel
   haelt das gegen das display oben fest). */
@media (max-width: 639px){ .nav-links a:not(.nav-cta){ display: none; } }
.nav-cta, .btn-primary{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: var(--ce-r-pill); border: 1px solid transparent;
  background: var(--ce-brand); color: var(--ce-on-brand) !important;
  font-family: var(--ce-font-ui); font-size: 14.5px; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background-color var(--ce-t-kurz), box-shadow var(--ce-t-kurz), transform var(--ce-t-kurz) var(--ce-kurve);
}
.nav-cta:hover, .btn-primary:hover{ background: var(--ce-brand-hover); box-shadow: var(--ce-shadow-2); filter: none; }
.nav-cta:active, .btn-primary:active{ transform: scale(.97); }
.nav-theme-toggle{
  width: 44px; height: 44px; border-radius: var(--ce-r-pill);
  background: transparent; border: 1px solid transparent; color: var(--ce-ink);
}
.nav-theme-toggle:hover{ background: var(--ce-surface-2); border-color: var(--ce-line); }
#themeToggleIcon{ display: inline-flex; }
.brand-logo{ color: var(--ce-ink); min-height: 44px; }
.brand-text-heavy{ color: var(--ce-ink); }

/* ---- Pfad in Mono (Master .mx-pfad) ----------------------------------- */
.crumb{
  font-family: var(--ce-font-num); font-size: 12px; font-weight: 500; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ce-ink-3); margin: 28px 0 12px;
}
.crumb a{ color: var(--ce-ink-2); text-decoration: none; }
.crumb a:hover{ color: var(--ce-ink); text-decoration: underline; }

/* ---- Ueberschriften: Instrument Sans halbschmal ------------------------ */
.module-hero h1, .hub-hero h1, .legal-hero h1, .hero h1{
  font-family: var(--ce-font-display); font-stretch: semi-condensed; font-weight: 600;
  font-size: clamp(32px, 5vw, 52px); line-height: 1.04; letter-spacing: -.01em; color: var(--ce-ink);
  overflow-wrap: anywhere; hyphens: auto;
}
.topic-article h2, .module-card h2, .section h2, .cta-band h2, .legal-body h2{
  font-family: var(--ce-font-display); font-stretch: semi-condensed; font-weight: 600; letter-spacing: -.005em; color: var(--ce-ink);
}
.topic-article h2{ font-size: 24px; line-height: 1.15; }
.module-hero .lead, .hub-hero p, .hero .lead, .section .section-lead{ color: var(--ce-ink-2); }
.module-hero{ padding-top: 8px; }

/* ---- Mikro-Beschriftungen (Master .mx-mikro) --------------------------- */
.topic-num, .m-count, .tier-badge, .legal-hero .stand{
  font-family: var(--ce-font-num); font-weight: 500; letter-spacing: .07em; text-transform: uppercase;
}
.topic-num{ font-size: 11.5px; color: var(--ce-ink-3); }
.module-card .m-count{ font-size: 11.5px; color: var(--ce-ink-2); }

/* ---- Themen-Leiste und Blaettern (Master .mx-unternav / Knoepfe) ------- */
.topic-nav a{
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--ce-surface); border: 1px solid var(--ce-line); color: var(--ce-ink-2);
  font-family: var(--ce-font-num); font-weight: 500; font-size: 13px;
}
.topic-nav a:hover{ border-color: var(--ce-line-strong); color: var(--ce-ink); }
.topic-nav a.active{ background: var(--ce-brand); border-color: var(--ce-brand); color: var(--ce-on-brand); }
.topic-pager button{
  min-height: 44px; padding: 0 18px; border-radius: var(--ce-r-pill);
  background: var(--ce-surface); border: 1px solid var(--ce-line-strong); color: var(--ce-ink);
  font-family: var(--ce-font-ui); font-size: 14.5px; font-weight: 600;
}
.topic-pager button:hover:not(:disabled){ background: var(--ce-surface-2); border-color: var(--ce-line-strong); }

/* ---- Artikel ------------------------------------------------------------- */
.topic-article{ border-top: 1px solid var(--ce-line); }
.topic-article:first-child{ border-top: 1px solid var(--ce-line); }
.topic-article p{ color: var(--ce-ink-2); }
/* Diagramm-Rahmen: dunkles Instrument-Paneel (Master Analyse/Raetsel). */
.topic-diagram, .chapter-cover-hero{
  background: var(--ce-petrol); border: 0; border-radius: var(--ce-r-lg);
}
.topic-diagram svg text, .chapter-cover-hero svg text, .m-icon svg text{ stroke: var(--ce-diagramm-figur); }
/* Praxis-Tipp und typischer Fehler: Symbol aus der App-Familie statt
   Emoji (Generator setzt .hinweis-ico), Karte mit Rolle am Rand. */
.topic-article .tip, .topic-article .mistake{
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: var(--ce-r-md);
  background: var(--ce-surface); border: 1px solid var(--ce-line); border-left-width: 3px; color: var(--ce-ink-2);
}
.topic-article .tip{ border-left-color: var(--ce-lime); }
.topic-article .mistake{ border-left-color: var(--ce-clay); }
.hinweis-ico{ flex: 0 0 auto; margin-top: 2px; }
.topic-article .tip .hinweis-ico{ color: var(--ce-lime); }
.topic-article .mistake .hinweis-ico{ color: var(--ce-clay); }
.topic-article .topic-facts li::marker{ color: var(--ce-ink-3); }

/* ---- Karten (Master .mx-karte) ----------------------------------------- */
.module-card, .crit-card, .prop-card, .note-box, .legal-body .addr{
  background: var(--ce-surface); border: 1px solid var(--ce-line); border-radius: var(--ce-r-lg); box-shadow: none;
}
.module-card{ transition: transform var(--ce-t-mittel) var(--ce-kurve), box-shadow var(--ce-t-mittel) var(--ce-kurve); }
@media (hover: hover){ .module-card:hover{ transform: translateY(-3px); box-shadow: var(--ce-shadow-2); border-color: var(--ce-line); } }
.module-card h2{ font-size: 19px; line-height: 1.2; }
.module-card p{ color: var(--ce-ink-2); }
/* Symbol im Kreis (Master Schritt-Symbol) — ersetzt die Perlen-Badges. */
.m-icon.ist-glyph{
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--ce-brand-tint); color: var(--ce-ink);
}
.m-icon.ist-glyph svg{ width: 22px; height: 22px; }
.module-card .m-icon:not(.ist-glyph){ border-radius: var(--ce-r-md); background: var(--ce-petrol); }

/* ---- Quiz: Stufe, Optionen, Erklaerung ---------------------------------- */
.tier-badge{ font-size: 11px; border-radius: var(--ce-r-pill); border: 1px solid var(--ce-line-strong); color: var(--ce-ink-2); background: transparent; }
.tier-badge.tier-einsteiger, .tier-badge.tier-grundlagen{ color: var(--ce-lime); border-color: var(--ce-line-strong); }
.tier-badge.tier-fortgeschritten{ color: var(--ce-petrol-ink); border-color: var(--ce-line-strong); }
.tier-badge.tier-experte{ color: var(--ce-blue); border-color: var(--ce-line-strong); }
.tier-badge.tier-profi{ color: var(--ce-clay); border-color: var(--ce-line-strong); }
.scenario b{ color: var(--ce-ink); }
.quiz-options li{ border-radius: var(--ce-r-md); background: var(--ce-surface); border-color: var(--ce-line); color: var(--ce-ink); }
.quiz-options li .mark{ font-family: var(--ce-font-num); font-weight: 500; }
.quiz-options li.correct{ border-color: var(--ce-lime); }
.quiz-options li.correct .mark{ background: var(--ce-lime); color: var(--ce-on-brand); }
/* VERDECKT HEISST GLEICH: solange die Loesung zu ist, sieht die richtige
   Option exakt aus wie die anderen (Zusage aus dem Generator). */
body.js-active .quiz-locked .quiz-options li.correct{ border-color: var(--ce-line); background: var(--ce-surface); color: var(--ce-ink); }
body.js-active .quiz-locked .quiz-options li.correct .mark{ background: var(--surface-2); color: transparent; }
.quiz-explain{ display: flex; gap: 10px; align-items: flex-start; }
.quiz-explain, .quiz-hint{ border-radius: var(--ce-r-md); }

/* ---- Schlaeger-Finder: Abschnitte ----------------------------------------- */
.cta-band{ background: var(--ce-petrol); color: var(--ce-on-petrol); border-radius: 24px; border: 0; }
.cta-band h2, .cta-band p{ color: var(--ce-on-petrol); }
.cta-band .btn-primary{ background: var(--ce-on-petrol); color: var(--ce-petrol) !important; }
.crit-card .crit-num{ font-family: var(--ce-font-num); font-weight: 500; color: var(--ce-ink-3); }

/* ---- Rechtstexte ------------------------------------------------------------ */
.legal-body{ color: var(--ce-ink-2); }
.legal-body strong{ color: var(--ce-ink); }
.legal-body a, .legal-body .addr p{ color: var(--ce-ink); }

/* ---- Fuss (Master .mx-l-fuss) ----------------------------------------------- */
footer{ border-top: 1px solid var(--ce-line); }
.footer-note, .footer-links, .footer-links a{ color: var(--ce-ink-2); font-size: 13px; }
.footer-links a:hover{ color: var(--ce-ink); text-decoration: underline; }
/* Trefferflaeche (02.10.2026): Impressum und Datenschutz stehen hier auf
   jeder Seite; als reine Textzeile waren die Links nur 17 px hoch. */
.footer-links a{ display: inline-flex; align-items: center; min-height: 44px; }

/* ---- Reduzierte Bewegung: sofortige Zustaende ------------------------------- */
@media (prefers-reduced-motion: reduce){
  .nav-cta, .btn-primary, .module-card, .nav-theme-toggle{ transition: none; }
  .module-card:hover, .nav-cta:active, .btn-primary:active{ transform: none; }
}