/* Shared stylesheet for the pre-rendered Prinzipien pages (public/prinzipien/**). */
/* Die Farb-Tokens stehen zentral in /assets/theme.css (beide Themes) und
   werden von jeder Seite VOR dieser Datei geladen. Hier stehen nur noch
   Komponenten-Regeln — vorher hatte jede der Seitengruppen ihren eigenen
   :root-Block, und alle standen noch auf der 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; } }

/* 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; } }

/* ---- 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; }
.chapter-cover-hero{
  background:var(--court); border:1px solid var(--line); border-radius:14px;
  padding:14px; margin:0 0 20px; display:flex; align-items:center; justify-content:center;
}
.chapter-cover-hero svg{ width:100%; max-width:170px; height:auto; }
/* Lesbarkeit der Feld-Beschriftungen — mirrort src/style.css's
   .court-wrap-Regel/public/coaching/assets/pages.css: dünner dunkler
   Halo hinter jedem Diagramm-Text, siehe dortiger Kommentar. */
.chapter-cover-hero svg text, .m-icon svg text{ paint-order:stroke fill; stroke:var(--court-strong); stroke-width:2.4px; stroke-linejoin:round; }
.chapter-cover-hero svg .tt-token text, .m-icon svg .tt-token text{ stroke:none; }
.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) ---- */
.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 (one principle per article) ---- */
.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; display:flex; align-items:center; gap:10px; }
.topic-article h2 .pr-icon{ font-size:22px; }
.topic-article p{ font-size:15px; line-height:1.65; color:var(--ink-muted); max-width:62ch; margin:0 0 12px; }
.topic-article .tip{ font-size:13.5px; font-weight:700; line-height:1.5; max-width:62ch; color:var(--accent-ink); }

/* ---- MODULE GRID (Prinzipien 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); }
.module-card .m-icon{
  flex:0 0 auto; width:56px; height:56px; border-radius:10px; background:var(--court);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.module-card .m-icon svg{ width:100%; height:100%; }
.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 (prefers-reduced-motion: reduce){
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---- PRO-VORSCHAU (nur mit PAYWALL_AKTIV erzeugt) ---- */
.pro-badge{ display:inline-flex; align-items:center; padding:2px 8px; border-radius:999px; background:var(--accent-primary); color:var(--on-accent); font-family:var(--ce-font-ui); font-weight:800; font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; vertical-align:middle; margin-left:6px; }
.topic-pro{ border-top-style:dashed; }
.topic-pro .pro-hinweis{ font-size:14px; font-weight:700; color:var(--ink); }