/* Shared stylesheet for the legal pages (public/impressum/, public/datenschutz/).
   Same palette/type as the rest of Padelcademy, kept as its own small file since
   these are plain static HTML with no build step and don't need anything
   from pages.css (which is scoped to the Coaching content pages). */
/* 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:var(--bg);
  color:var(--ink);
  font-family:var(--ce-font-text);
}
a{ color:var(--accent-ink); }

.wrap{ max-width:720px; margin:0 auto; padding:0 20px; }

/* ---- NAV (mirrors public/coaching/assets/pages.css) ---- */
.nav{ display:flex; align-items:center; justify-content:space-between; padding:20px; max-width:1120px; margin:0 auto; }
.nav-brand{ display:flex; align-items:center; gap:8px; font-family:var(--ce-font-ui); font-weight:800; font-size:18px; text-decoration:none; color:var(--ink); }
.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; }
.nav-links a{ text-decoration:none; color:var(--ink-muted); }
.nav-links a:hover{ color:var(--ink); }
.nav-cta{
  background:var(--court-bright); color:var(--on-accent) !important; 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; }
}



/* ---- LEGAL PROSE ---- */
.legal-hero{ padding:24px 0 8px; }
.legal-hero h1{ font-family:var(--ce-font-ui); font-weight:800; font-size:clamp(24px,5vw,32px); margin:0 0 6px; }
.legal-hero .stand{ font-size:12.5px; color:var(--ink-muted); margin:0; }

.legal-body{ padding:12px 0 56px; font-size:14.5px; line-height:1.65; color:var(--ink-muted); }
.legal-body h2{ font-family:var(--ce-font-ui); font-weight:800; font-size:17px; color:var(--ink); margin:32px 0 10px; }
.legal-body h2:first-child{ margin-top:0; }
.legal-body p{ margin:0 0 12px; }
.legal-body ul{ margin:0 0 12px; padding-left:20px; }
.legal-body li{ margin:0 0 6px; }
.legal-body strong{ color:var(--ink); }
/* Fliesstext-Links (z. B. „Datenschutzerklärung“ in den Nutzungsbedingungen):
   mindestens 24 px Trefferhoehe (WCAG 2.5.8, check-rechtliches R1/R2). */
.legal-body p a, .legal-body li a{ padding-block:3px; }
.legal-body .addr{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin:0 0 20px; font-style:normal; color:var(--ink); }
.legal-body .addr p{ margin:0 0 2px; color:var(--ink); }

/* ---- FOOTER (mirrors public/coaching/assets/pages.css) ---- */
footer{ border-top:1px solid var(--line); padding:26px 0 40px; max-width:1120px; margin:20px auto 0; 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; color:var(--ink-muted); }
.footer-links a:hover{ color:var(--ink-muted); }
.footer-note{ font-size:12px; color:var(--ink-muted); }
@media (min-width: 640px){ .footer-row{ flex-direction:row; justify-content:space-between; text-align:left; } }

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

/* Sprachfassungen der Rechtsseiten (Datenschutz-Abgleich 03.10.2026): die
   Sprachwahl und der Hinweis auf die massgebliche deutsche Fassung stehen im
   Kopf. Ihre Links bekommen mindestens 24 px Trefferhoehe (WCAG 2.5.8),
   wie die Rechtslinks im Fuss. */
.legal-hero .sprachwahl{ margin-top:6px; }
.legal-hero .sprachwahl a, .legal-hero .sprachhinweis a{ display:inline-flex; align-items:center; min-height:24px; padding:0 2px; }
/* Sprachumschalter der Rechtsseiten (DE/EN/ES, 03.10.2026): Trefferflaeche
   mindestens 44 px hoch wie die Fusslinks (check-rechtliches R1/R2 misst
   den ersten freien Link auf /impressum/ — auf EN/ES ist es dieser). */
.legal-sprachen{ display:flex; flex-wrap:wrap; align-items:center; gap:0 6px; }
.legal-sprachen a, .legal-sprachen [aria-current]{ display:inline-flex; align-items:center; min-height:44px; }

/* ---- HINWEISE, OFFENE PUNKTE, KONTAKTFORMULAR (Recht, Endstand 03.10.2026) ----
   .legal-hinweis traegt data-gilt-wenn="SCHALTER=wert" und gilt nur, solange
   der Schalter so steht (check-rechtsziele Z8). .legal-offen listet, was vor
   dem Gelten einer Seite noch zu entscheiden ist (data-offen = Schalter). */
.legal-hero .legal-hinweis, .legal-body .legal-hinweis{
  background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--accent-primary);
  border-radius:10px; padding:10px 14px; margin:10px 0 12px; color:var(--ink); font-size:14px; line-height:1.55;
}
.legal-offen{ border:1px dashed var(--line); border-radius:10px; padding:10px 14px; margin:0 0 20px; color:var(--ink); }
.legal-offen p{ margin:0 0 6px; }
.legal-offen ul{ margin:0; }
.kontakt-form{ display:grid; gap:14px; margin:8px 0 0; }
.kontakt-feld{ display:grid; gap:6px; }
.kontakt-feld label{ font-weight:700; color:var(--ink); }
.kontakt-optional{ font-weight:400; color:var(--ink-muted); }
.kontakt-feld input, .kontakt-feld textarea{
  font:inherit; color:var(--ink); background:var(--surface); border:1px solid var(--border-interactive, var(--line));
  border-radius:10px; padding:10px 12px; min-height:44px; width:100%;
}
.kontakt-feld textarea{ resize:vertical; }
.kontakt-feld input:focus-visible, .kontakt-feld textarea:focus-visible, .kontakt-senden:focus-visible{
  outline:2px solid var(--accent-primary); outline-offset:2px;
}
.kontakt-honig{ position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.kontakt-datenschutz{ font-size:13px; margin:0; }
.kontakt-senden{
  justify-self:start; min-height:44px; padding:10px 18px; border-radius:10px; border:0; cursor:pointer;
  background:var(--court-bright); color:var(--on-accent); font:inherit; font-weight:800;
}
.kontakt-senden[disabled]{ opacity:.6; cursor:progress; }
.kontakt-status{ min-height:1.5em; margin:0; color:var(--ink); }
.kontakt-status[data-art="ok"]{ font-weight:700; }