/* Shared-style static page for /schlaeger-finder/ — same palette/nav/footer
   pattern as the other pre-rendered sections (coaching/quiz/prinzipien),
   but this page is hand-authored, not generated: the Schläger-Finder
   itself has no enumerable list of items (it's a branching questionnaire),
   so there's nothing to loop over — one explainer page with a CTA into
   the interactive tool is the right shape here. */
/* 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; }
.wrap-wide{ max-width:1120px; }

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


/* 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(--accent-ink); }

/* ---- HERO ---- */
.hero{ padding:28px 0 20px; }
.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; }
.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); }

/* ---- SECTIONS ---- */
.section{ padding:36px 0; }
.section h2{ font-family:var(--ce-font-ui); font-weight:800; font-size:22px; margin:0 0 8px; text-wrap:balance; }
.section .section-lead{ font-size:14.5px; line-height:1.6; color:var(--ink-muted); max-width:62ch; margin:0 0 24px; }

.crit-grid{ display:grid; grid-template-columns:1fr; gap:12px; }
.crit-card{
  background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:16px 18px;
  box-shadow:var(--shadow-card);
}
.crit-card .crit-num{ font-family:var(--ce-font-ui); font-weight:800; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-ink); }
.crit-card h3{ font-family:var(--ce-font-ui); font-weight:800; font-size:15.5px; margin:6px 0 6px; }
.crit-card p{ font-size:13.5px; line-height:1.55; color:var(--ink-muted); margin:0; }

.prop-grid{ display:grid; grid-template-columns:1fr; gap:10px; }
.prop-card{
  display:flex; align-items:baseline; gap:10px; background:var(--surface-2); border:1px solid var(--line);
  border-radius:11px; padding:12px 16px;
}
.prop-card .prop-name{ flex:0 0 auto; width:110px; font-family:var(--ce-font-ui); font-weight:800; font-size:13px; color:var(--accent-ink); }
.prop-card .prop-desc{ font-size:13.5px; line-height:1.5; color:var(--ink-muted); }

.note-box{
  /* War auf einem festen Rot der alten Palette (#e14f52) — jetzt ueber die
     Fehler-Tokens, damit der Kasten in beiden Themes mitwechselt. */
  background:var(--error-bg); border:1px solid var(--err-edge); border-radius:14px;
  padding:16px 18px; font-size:14px; line-height:1.6; color:var(--ink-muted); margin:0 0 8px;
}
.note-box strong{ color:var(--ink); }

.cta-band{
  background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:28px 24px;
  text-align:center; margin:36px 0 16px; box-shadow:var(--shadow-card);
}
.cta-band h2{ margin:0 0 8px; }
.cta-band p{ font-size:14.5px; color:var(--ink-muted); margin:0 0 18px; max-width:52ch; margin-left:auto; margin-right:auto; }

/* ---- 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); }
.footer-note{ font-size:12px; color:var(--ink-muted); }

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

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