/* ══ Oeffentliche Seiten im Design der neuen Landingpage (Leandro, 28.10.2026) ══
   Eltern, Hilfe, Schulen/BIZ, Rechtliches (Uebersicht, Datenschutz, AGB, Impressum),
   Elterninformation, E-Mail bestaetigen und Erinnerungen abmelden.
   Gleiche Farben, Schrift, Karten und Knoepfe wie index.html (css/landing-neu.css),
   fester Punkteraster-Hintergrund, Logo bleibt Stellio Blue (Bild), "Frag Stellio"
   bleibt wie in der App. Nur Aussehen: Texte, Formulare und Skripte bleiben gleich.
   Wird auf diesen Seiten als letztes Stylesheet geladen. */

/* ── Farben und Schrift (wie Landingpage) ─────────────────────────────────── */
:root {
  --hn-bg:        #F7F3EC;
  --hn-surface:   #FBF8F2;
  --hn-second:    #EDE2D5;
  --hn-hover:     #E5D5C5;
  --hn-line:      #DED2C5;
  --hn-primary:   #8A7765;
  --hn-primary-h: #7B6857;
  --hn-primary-p: #705E4E;
  --hn-text:      #302823;
  --hn-text-2:    #756B63;
  --hn-read:      #4A403A;   /* Fliesstext auf Rechtsseiten: ruhiger als --hn-text, gut lesbar */
  --hn-shadow:    0 1px 2px rgba(112, 94, 78, .05), 0 14px 34px -14px rgba(112, 94, 78, .22);
  --hn-shadow-sm: 0 1px 2px rgba(112, 94, 78, .05), 0 10px 24px -14px rgba(112, 94, 78, .20);
  --hn-shadow-lg: 0 2px 6px rgba(112, 94, 78, .06), 0 30px 60px -24px rgba(112, 94, 78, .34);
  --hn-border:    1px solid rgba(222, 210, 197, .55);
  --font-title: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --cta-mesh:
    radial-gradient(70% 120% at 8% 0%, rgba(255, 236, 214, .08) 0%, rgba(255, 236, 214, 0) 70%),
    radial-gradient(60% 140% at 18% 10%, #7A6655 0%, rgba(122, 102, 85, 0) 70%),
    radial-gradient(70% 160% at 100% 100%, #3E3229 0%, rgba(62, 50, 41, 0) 65%),
    radial-gradient(50% 120% at 62% 30%, #705E4E 0%, rgba(112, 94, 78, 0) 75%);
}
/* height:auto + overflow-x:clip: base.css/landing.css machen sonst body zum
   eigenen Scroll-Bereich (Seite endet nach einem Bildschirm, Raster scrollt mit) */
html, body { height: auto; min-height: 100%; overflow-x: clip; }
body { font-family: var(--font-body); color: var(--hn-text); background: var(--hn-bg); -webkit-font-smoothing: antialiased; }
@media screen {
  /* fester Punkteraster: steht still, der Inhalt gleitet darueber (wie Landingpage) */
  body::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background-color: var(--hn-bg);
    background-image: radial-gradient(circle, rgba(138, 119, 101, .20) 1px, transparent 1.6px);
    background-size: 22px 22px;
  }
}
h1, h2, h3 { font-family: var(--font-title); font-weight: 700; letter-spacing: -.005em; color: var(--hn-text); }
a { color: var(--hn-primary-p); }
::selection { background: var(--hn-hover); }

/* Logo: blaues Bild bleibt, Schriftzug wie auf der Landingpage */
.logo-word { font-family: var(--font-body); font-weight: 700; color: var(--hn-text); letter-spacing: 0; font-size: 16px; }

/* ── Knoepfe wie auf der Landingpage ──────────────────────────────────────── */
.btn { font-family: var(--font-body); font-weight: 600; border-radius: 100px; }
.btn-primary {
  color: #FFFFFF; background-color: #6A5848; background-image: var(--cta-mesh);
  background-size: 180% 180%; background-position: 0% 0%;
  box-shadow: inset 0 1px 0 rgba(255, 240, 222, .18), 0 1px 2px rgba(48, 40, 35, .3), 0 12px 26px -12px rgba(48, 40, 35, .8);
}
.btn-primary:hover { background-color: #5E4D3F; background-image: var(--cta-mesh); box-shadow: inset 0 1px 0 rgba(255, 240, 222, .18), 0 14px 28px -10px rgba(48, 40, 35, .8); }
.btn-primary:active { background-color: #4E4035; background-image: var(--cta-mesh); }
.btn-ghost {
  background: #FFFDF9; color: var(--hn-text); border: 1px solid rgba(222, 210, 197, .8);
  box-shadow: 0 1px 2px rgba(112, 94, 78, .06), 0 8px 18px -10px rgba(112, 94, 78, .35);
}
.btn-ghost:hover { background: var(--hn-bg); border-color: rgba(222, 210, 197, .8); box-shadow: 0 8px 18px -8px rgba(112, 94, 78, .40); text-decoration: none; }
.btn-sm { height: 40px; padding: 0 20px; font-size: 14px; }
.btn:focus-visible, summary:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--hn-primary-p); outline-offset: 3px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn-primary { animation: cta-flow 9s ease-in-out infinite alternate; }
  .btn:not(:disabled):hover { transform: translateY(-2px); }
  .btn:not(:disabled):active { transform: translateY(0); }
}
@keyframes cta-flow { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }

/* Sprachumschalter (von site-i18n.js eingefuegt) wie auf der Landingpage */
.site-lang a { color: var(--hn-text-2); }
.site-lang a:hover { color: var(--hn-text); }
.site-lang a[aria-current="true"] { color: var(--hn-text); background: var(--hn-second); }

/* Formularfelder wie in der App */
input, select, textarea { background-color: var(--hn-bg); border-color: var(--hn-line); color: var(--hn-text); }
input::placeholder, textarea::placeholder { color: var(--hn-text-2); }
input:focus, select:focus, textarea:focus { border-color: var(--hn-primary); box-shadow: 0 0 0 3px rgba(138, 119, 101, .18); background-color: #FFFDF9; }
.field-label { color: var(--hn-text); }

/* ══ Eltern und Hilfe (landing.css + site-pages.css) ══════════════════════════ */
/* keine Papier-Karte mehr: volle Breite auf dem Raster wie die Landingpage */
.landing { max-width: 1180px; margin: 0 auto; padding: 0 32px; background: none; box-shadow: none; overflow-x: visible; }
.landing::before { display: none; }
.landing-nav { position: relative; padding: 22px 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: none; }
.landing-nav.scrolled { background: none; }
.sp-logo .logo-word { font-size: 16px; }

.sp-hero.hero-new { padding: 56px 0 52px; }
.sp-hero .hero-h1 { font-family: var(--font-title); font-weight: 700; font-size: clamp(34px, 4.6vw, 54px); line-height: 1.08; letter-spacing: -.015em; color: var(--hn-text); margin-bottom: 16px; }
.sp-hero .hero-sub { color: var(--hn-text-2); font-size: clamp(16px, 1.7vw, 18.5px); line-height: 1.55; max-width: 600px; margin-bottom: 0; }

.sp-main { max-width: 880px; padding-bottom: 88px; }
.sp-h2 { font-family: var(--font-title); font-weight: 700; font-size: clamp(24px, 3vw, 32px); letter-spacing: -.01em; line-height: 1.15; color: var(--hn-text); margin-bottom: 18px; }
.sp-text { color: var(--hn-text-2); font-size: 16px; line-height: 1.65; }
.sp-more, .sp-ask a, .sp-link-list a, .sp-faq .sp-answer a { color: var(--hn-primary-p); }
.sp-faq .sp-answer a, .sp-link-list a { text-decoration: underline; text-underline-offset: 2px; }

/* Karten: helle Flaeche, feiner Rand, warmer Schatten, grosse Radien */
.sp-card, .sp-faq details, .sp-link-list li {
  background: var(--hn-surface); border: var(--hn-border); box-shadow: var(--hn-shadow-sm);
}
.sp-card { border-radius: 22px; padding: 20px 22px; }
.sp-faq details { border-radius: 18px; }
.sp-link-list li { border-radius: 18px; color: var(--hn-text-2); }
.sp-card-title { font-weight: 600; font-size: 15.5px; color: var(--hn-text); }
.sp-card-text, .sp-list li, .sp-faq .sp-answer { color: var(--hn-text-2); }
.sp-faq summary { color: var(--hn-text); font-weight: 600; }
.sp-faq summary svg { color: var(--hn-text-2); }
.sp-quote { background: var(--hn-second); color: var(--hn-text); font-family: var(--font-title); font-weight: 600; font-size: 18px; line-height: 1.45; border-radius: 22px; padding: 20px 24px; }
.sp-list .sp-yes svg { color: var(--hn-primary-p); }
.sp-list .sp-no svg { color: var(--hn-text-2); }
.sp-steps li::before { background: var(--hn-second); color: var(--hn-primary-p); font-weight: 700; font-variant-numeric: lining-nums; }
.sp-price { font-family: var(--font-title); font-weight: 700; font-size: 26px; color: var(--hn-text); font-variant-numeric: lining-nums; }

/* Filter-Pillen (Hilfe) */
.sp-filter button { color: var(--hn-text-2); font-weight: 600; background: #FFFDF9; border-color: var(--hn-line); }
.sp-filter button:hover { color: var(--hn-text); }
.sp-filter button[aria-selected="true"] { color: var(--hn-text); background: var(--hn-second); border-color: var(--hn-line); }

/* Formular "Frage an das Team" (Hilfe) */
.sp-form-section .school-form-inner { background: var(--hn-surface); border: var(--hn-border); border-radius: 24px; box-shadow: var(--hn-shadow-lg); }
.school-form-title { font-family: var(--font-title); font-weight: 700; font-size: 26px; color: var(--hn-text); }
.school-form-sub, .sp-form-note, .sp-ok-text { color: var(--hn-text-2); }
.sp-ok-icon { color: var(--hn-primary-p); }

/* Fusszeile wie auf der Landingpage */
.landing-foot {
  max-width: 1180px; margin: 0 auto; padding: 32px 32px 40px;
  border-top: 1px solid var(--hn-line); color: var(--hn-text-2); font-size: 13.5px;
}
.landing-foot a { color: var(--hn-text-2); }
.landing-foot a:hover { color: var(--hn-text); text-decoration: none; }

@media (max-width: 480px) {
  .landing { padding: 0 20px; }
  .landing-foot { padding: 24px 20px 96px; gap: 10px 20px; }
  .sp-hero.hero-new { padding: 36px 0 28px; }
}

/* ══ Schulen / BIZ (schulen.css, body.sch) ════════════════════════════════════ */
.sch { background: var(--hn-bg); color: var(--hn-text); }
.sch h1, .sch h2 { font-weight: 700; color: var(--hn-text); }
.sch .btn { font-weight: 600; }
.sch .btn-primary { color: #FFFFFF; background-color: #6A5848; background-image: var(--cta-mesh); box-shadow: inset 0 1px 0 rgba(255, 240, 222, .18), 0 1px 2px rgba(48, 40, 35, .3), 0 12px 26px -12px rgba(48, 40, 35, .8); }
.sch .btn-primary:hover { background-color: #5E4D3F; background-image: var(--cta-mesh); box-shadow: inset 0 1px 0 rgba(255, 240, 222, .18), 0 14px 28px -10px rgba(48, 40, 35, .8); }
.sch .btn-ghost { background: #FFFDF9; color: var(--hn-text); border: 1px solid rgba(222, 210, 197, .8); box-shadow: 0 1px 2px rgba(112, 94, 78, .06), 0 8px 18px -10px rgba(112, 94, 78, .35); }
.sch .btn-ghost:hover { background: var(--hn-bg); box-shadow: 0 8px 18px -8px rgba(112, 94, 78, .40); }
.sch a:focus-visible, .sch button:focus-visible, .sch summary:focus-visible, .sch .btn:focus-visible { outline-color: var(--hn-primary-p); }
.sch-nav.scrolled { background: rgba(247, 243, 236, .88); border-color: var(--hn-line); }
.sch .site-lang a { color: var(--hn-text-2); }
.sch .site-lang a:hover { color: var(--hn-text); }
.sch .site-lang a[aria-current="true"] { color: var(--hn-text); background: var(--hn-second); }

.sch-hero-glow { background: radial-gradient(closest-side, rgba(255, 253, 249, .85), transparent 70%); }
.sch .hero-eyebrow, .sch .section-eyebrow { background: var(--hn-second); color: var(--hn-primary-p); }
.sch .hero-h1 { line-height: 1.08; }
.sch .hero-h1 .accent { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--hn-primary-p); font-style: italic; }
.sch .hero-sub, .sch-head p, .school-form-sub { color: var(--hn-text-2); }

/* Klassen-Illustration in Brauntoenen (Ampel bleibt rot/gelb/gruen) */
.deko-klasse { background: var(--hn-surface); border: var(--hn-border); box-shadow: var(--hn-shadow-lg); border-radius: 24px; }
.dk-side { background: var(--hn-second); border-right-color: var(--hn-line); }
.dk-side i { background: var(--hn-hover); }
.dk-side i:nth-child(1) { background: #D6C6B5; }
.dk-side i:nth-child(3) { background: #FBF8F2; }
.dk-head i, .dk-name { background: var(--hn-second); }
.dk-av { background: var(--hn-second); }
.dk-row + .dk-row { border-top-color: var(--hn-second); }
.dk-bar { background: var(--hn-second); }
.dk-bar span { background: linear-gradient(90deg, var(--hn-primary-p), #B9A48F); }

/* Abschnitte: das Raster scheint durch */
.sch-section.is-second { background: none; }
.sch .section-h2 { font-size: clamp(28px, 3.4vw, 40px); }

/* Karten wie auf der Landingpage */
.school-stat, .school-feature-card, .how-step, .sch-form-card {
  background: var(--hn-surface); border: var(--hn-border); box-shadow: var(--hn-shadow-sm);
}
.school-stat { border-radius: 22px; }
.school-feature-card, .how-step { border-radius: 22px; }
.school-stat:hover, .school-feature-card:hover, .how-step:hover { box-shadow: var(--hn-shadow); }
.school-stat-num { font-weight: 700; color: var(--hn-text); font-variant-numeric: lining-nums; }
.school-stat-label, .school-feature-text, .how-step-text { color: var(--hn-text-2); }
.school-feature-title, .how-step-title { font-weight: 600; color: var(--hn-text); }
.school-feature-icon { background: var(--hn-second); color: var(--hn-primary-p); border-radius: 14px; }
.school-feature-text a { color: var(--hn-primary-p); }
.school-feature-card.is-lead { background: var(--hn-surface); }
.school-feature-card.is-lead .school-feature-title { font-family: var(--font-title); font-weight: 700; font-size: 22px; }
.school-feature-card.is-parents { background: var(--hn-second); border: var(--hn-border); box-shadow: var(--hn-shadow-sm); }
.school-feature-card.is-parents .school-feature-icon { background: var(--hn-primary-h); color: #FFFFFF; }
.school-feature-card.is-parents .school-feature-text a { background: #FFFDF9; color: var(--hn-text); border: 1px solid var(--hn-line); box-shadow: none; font-weight: 600; }
.how-step-num { background: var(--hn-primary-h); color: #FFFFFF; font-weight: 700; box-shadow: 0 0 0 6px var(--hn-second); font-variant-numeric: lining-nums; }
.deko-linie { background: linear-gradient(90deg, var(--hn-line), var(--hn-primary), var(--hn-line)); }
@media (max-width: 760px) { .deko-linie { background: linear-gradient(180deg, var(--hn-line), var(--hn-primary), var(--hn-line)); } }

/* Anfrage-Formular */
.school-form-title { font-weight: 700; }
.sch-form-card { border-radius: 24px; box-shadow: var(--hn-shadow-lg); }
.sch .field-label { color: var(--hn-text); font-weight: 600; }
.sch .sch-form-card input, .sch .sch-form-card select, .sch .sch-form-card textarea { background-color: var(--hn-bg); border-color: var(--hn-line); color: var(--hn-text); }
.sch .sch-form-card input:hover, .sch .sch-form-card select:hover, .sch .sch-form-card textarea:hover { border-color: #CDBDAC; }
.sch .sch-form-card input:focus, .sch .sch-form-card select:focus, .sch .sch-form-card textarea:focus { border-color: var(--hn-primary); box-shadow: 0 0 0 3px rgba(138, 119, 101, .18); background-color: #FFFDF9; }
.sch-form-note, .sch-ok-text { color: var(--hn-text-2); }
.sch-ok-icon { background: var(--hn-second); color: var(--hn-primary-p); }
.sch-ok-title { font-family: var(--font-title); font-weight: 700; }

/* Fusszeile */
.sch .landing-foot { border-top-color: var(--hn-line); color: var(--hn-text-2); }
.sch .landing-foot a { color: var(--hn-text-2); }
.sch .landing-foot a:hover { color: var(--hn-text); }

/* Coach-Probe (coach-demo.css), gleich umgefaerbt wie auf der Landingpage */
#coach-demo .cd-card { background: var(--hn-surface); border: 1px solid rgba(222, 210, 197, .55); box-shadow: var(--hn-shadow-lg); border-radius: 24px; color: var(--hn-text); }
#coach-demo .cd-label { color: var(--hn-text); }
#coach-demo .cd-input, #coach-demo .cd-textarea { background: var(--hn-bg); border-color: var(--hn-line); color: var(--hn-text); }
#coach-demo .cd-input::placeholder, #coach-demo .cd-textarea::placeholder { color: var(--hn-text-2); }
#coach-demo .cd-input:focus, #coach-demo .cd-textarea:focus { border-color: var(--hn-primary); box-shadow: 0 0 0 3px rgba(138, 119, 101, .18); background: #FFFDF9; }
#coach-demo .cd-btn { background: linear-gradient(180deg, var(--hn-primary), var(--hn-primary-h)); color: #FFFFFF; box-shadow: 0 1px 2px rgba(112, 94, 78, .25), 0 8px 18px -8px rgba(112, 94, 78, .65); }
#coach-demo .cd-btn:hover { background: var(--hn-primary-h); }
#coach-demo .cd-btn:focus-visible, #coach-demo .cd-retry:focus-visible { outline-color: var(--hn-primary-p); }
#coach-demo .cd-btn-ghost { background: #FFFDF9; color: var(--hn-text); box-shadow: inset 0 0 0 1px var(--hn-line); }
#coach-demo .cd-btn-ghost:hover { background: var(--hn-bg); }
#coach-demo .cd-avatar { background: var(--hn-second); }
#coach-demo .cd-msg.is-user { background: var(--hn-primary-h); color: #FFFFFF; }
#coach-demo .cd-msg.is-bot { background: var(--hn-second); color: var(--hn-text); }
#coach-demo .cd-retry { border-color: var(--hn-line); background: #FFFDF9; color: var(--hn-primary-p); }
#coach-demo .cd-retry:hover { background: var(--hn-bg); }
#coach-demo .cd-card .typing-dots i { background: var(--hn-primary); }
#coach-demo .cd-card .typing-label, #coach-demo .cd-meta { color: var(--hn-text-2); }
#coach-demo .cd-left { color: var(--hn-primary-p); }
#coach-demo .cd-end { background: var(--hn-second); }
#coach-demo .cd-end-title { font-family: var(--font-title); font-weight: 700; color: var(--hn-text); }
#coach-demo .cd-end-text { color: var(--hn-text); }
.cd-note { color: var(--hn-text-2); }

/* ══ Rechtliche Seiten (legal.css) ════════════════════════════════════════════ */
/* Kopf mit dem Logo wie auf der Landingpage */
.sn-head { max-width: 1180px; margin: 0 auto; padding: 22px 32px; }
.sn-logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.sn-logo:hover { text-decoration: none; }
.sn-logo img { height: 26px; width: auto; }
@media (max-width: 480px) { .sn-head { padding: 18px 20px; } }

/* ruhige Textspalte, max. 720px */
.legal-page { max-width: 720px; padding: 28px 24px 88px; }
.legal-page .back { font-size: 14px; font-weight: 600; color: var(--hn-text-2); margin-bottom: 24px; }
.legal-page .back:hover { color: var(--hn-text); text-decoration: none; }
.legal-page h1 { font-family: var(--font-title); font-weight: 700; font-size: clamp(32px, 4.2vw, 44px); line-height: 1.1; letter-spacing: -.015em; color: var(--hn-text); margin-bottom: 12px; }
.legal-page .updated { font-size: 13px; color: var(--hn-text-2); margin-bottom: 24px; }
.legal-page h2 { font-family: var(--font-title); font-weight: 700; font-size: 22px; line-height: 1.25; color: var(--hn-text); margin: 40px 0 12px; }
.legal-page h2[id] { scroll-margin-top: 24px; }
.legal-page p, .legal-page li { font-size: 15.5px; line-height: 1.7; color: var(--hn-read); }
.legal-page strong { color: var(--hn-text); font-weight: 600; }
.legal-page a { color: var(--hn-primary-p); text-decoration: underline; text-underline-offset: 2px; }
.legal-page a:hover { color: var(--hn-text); }
.legal-page .back, .legal-page .legal-lang a, .legal-page .legal-nav a, .legal-page .legal-card, .legal-page .legal-toc a { text-decoration: none; }
.legal-page .legal-card:hover .legal-card-title { text-decoration: underline; text-underline-offset: 2px; }

/* Sprachwahl der Kurzfassung als Pillen */
.legal-lang { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 16px; }
.legal-lang a { margin: 0; padding: 5px 11px; border-radius: 100px; font-size: 12.5px; font-weight: 700; color: var(--hn-text-2); }
.legal-lang a:hover { color: var(--hn-text); }
.legal-lang a[aria-current="true"] { color: var(--hn-text); background: var(--hn-second); }

/* "Kurz erklaert" als Karte */
.legal-summary { background: var(--hn-surface); border: var(--hn-border); box-shadow: var(--hn-shadow-sm); border-radius: 22px; padding: 22px 24px; margin-bottom: 28px; }
.legal-summary h2 { margin-top: 0; font-size: 20px; color: var(--hn-primary-p); }
.legal-summary li { color: var(--hn-text); }
.legal-summary .legal-binding { font-size: 13px; color: var(--hn-text-2); }

/* Inhaltsverzeichnis als ruhige Karte */
.legal-toc-wrap { background: var(--hn-surface); border: var(--hn-border); box-shadow: var(--hn-shadow-sm); border-radius: 22px; padding: 20px 24px 14px; margin: 0 0 12px; }
.legal-toc-title { font-size: 12px; color: var(--hn-text-2); letter-spacing: .06em; }
.legal-toc { margin-bottom: 0; }
.legal-page .legal-toc li { font-size: 14.5px; color: var(--hn-text-2); margin-bottom: 6px; }
.legal-toc a { color: var(--hn-primary-p); }
.legal-toc a:hover { color: var(--hn-text); text-decoration: underline; }

/* Anbieter-Tabelle */
.legal-table th { font-size: 13.5px; font-weight: 700; color: var(--hn-text-2); }
.legal-table th, .legal-table td { border-bottom-color: var(--hn-line); }
.legal-table td { color: var(--hn-read); font-size: 14.5px; }
@media (max-width: 600px) {
  .legal-table tr { border-bottom-color: var(--hn-line); }
  .legal-table td::before { color: var(--hn-text-2); }
}

/* Uebersicht /rechtliches */
.legal-intro { color: var(--hn-text-2) !important; font-size: 17px !important; line-height: 1.6 !important; }
.legal-page .legal-facts li { background: var(--hn-second); color: var(--hn-primary-p); font-weight: 600; }
.legal-card { background: var(--hn-surface); border: var(--hn-border); box-shadow: var(--hn-shadow-sm); border-radius: 22px; padding: 20px; color: var(--hn-text); }
.legal-card:hover { border-color: var(--hn-line); box-shadow: var(--hn-shadow); }
.legal-card-icon { background: var(--hn-second); color: var(--hn-primary-p); border-radius: 14px; }
.legal-card-title { font-size: 17px; color: var(--hn-text); }
.legal-card-text { font-size: 14px; color: var(--hn-text-2); }

/* Fusszeile mit den anderen Rechtsseiten, wie die Fusszeile der Landingpage */
.legal-nav { gap: 6px 22px; margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--hn-line); font-size: 13.5px; }
.legal-nav a { color: var(--hn-text-2); }
.legal-nav a:hover { color: var(--hn-text); }
.legal-nav a[aria-current="page"] { color: var(--hn-text); font-weight: 600; }

@media (max-width: 600px) {
  .legal-page { padding: 16px 20px 96px; }
  .legal-page h2 { font-size: 20px; margin-top: 34px; }
  .legal-summary, .legal-toc-wrap { padding: 18px; }
}
@media print {
  .sn-head { display: none; }
  .legal-summary, .legal-toc-wrap, .legal-card { box-shadow: none; }
}

/* ══ Elterninformation zum Ausdrucken (print-doc.css), nur Bildschirm ═════════ */
@media screen {
  .doc-bar .doc-back { font-size: 14px; font-weight: 600; color: var(--hn-text-2); }
  .doc-bar .doc-back:hover { color: var(--hn-text); text-decoration: none; }
  .doc-langs { background: var(--hn-second); }
  .doc-langs a { color: var(--hn-text-2); }
  .doc-langs a[aria-current="true"] { background: #FFFDF9; color: var(--hn-text); box-shadow: 0 1px 2px rgba(112, 94, 78, .12); }
  .doc-print { height: 40px; padding: 0 20px; }
  .doc-sheet { border: var(--hn-border); border-radius: 24px; box-shadow: var(--hn-shadow-lg); }
  .print-doc h1 { font-weight: 700; letter-spacing: -.01em; }
}

/* ══ E-Mail bestaetigen / Erinnerungen abmelden (auth.css) ════════════════════ */
.auth-wrap { background: none; }
.auth-card { background: var(--hn-surface); border: var(--hn-border); border-radius: 24px; box-shadow: var(--hn-shadow-lg); }
.auth-title { font-family: var(--font-title); font-weight: 700; letter-spacing: -.01em; color: var(--hn-text); }
.auth-card .hint, .auth-sub, .abm-sub, .email-hint, .resend-row { color: var(--hn-text-2); }
.verify-icon { background: var(--hn-second); }
.verify-icon svg { color: var(--hn-primary-p); }
.code-field { background: var(--hn-bg); border-color: var(--hn-line); caret-color: var(--hn-primary-p); }
.code-field:focus { border-color: var(--hn-primary); box-shadow: 0 0 0 3px rgba(138, 119, 101, .18); background: #FFFDF9; }
.code-field.filled { border-color: var(--hn-primary); }
.resend-row a, .auth-card a:not(.btn) { color: var(--hn-primary-p); }
@media (max-width: 420px) { .auth-card { padding: 32px 22px; } }