/* =====================================================================
   site.css - Website von FlixCard. ("Der Stickerbogen")

   Erzeugt wird das Markup der Startseiten von
   .claude-workshop/_flixcard/sql/make_website.js; die Rechtstexte bekommen von dort nur
   Kopf, Fuss und Einbindungen. Kopf, Fuss, Hilfe-Panel folgen dem Bauplan der Familie
   (Handbuch Abschnitt 7): Kopf 64px, Reihenfolge Wortmarke, Navigation, Farbmodus,
   Sprachwahl, Knopf, Menue; Fuss eine Reihe ohne Betreibersatz.

   Gestaltung: laut und greifbar wie ein Bogen Aufkleber. Unbounded fuer Ueberschriften,
   Figtree fuer Text, Markenblau als einziger Akzent, runde Sticker, Preisschilder.

   Aufbau:
     0. Schriften (lokal, SIL OFL, aus schriften-holen.py)
     1. Farbwerte (vier Bloecke)
     2. Gemeinsam: Grundgeruest, Kopf, Knoepfe, Fuss, Hilfe-Panel, Bildschalter
     3. Nur Startseite (.page-home)
     4. Nur Rechtstexte (.page-legal)
     5. Zugaenglichkeit
   ===================================================================== */

/* 0. Schriften */
@font-face{font-family:'Figtree';font-style:italic;font-weight:400 700;font-display:swap;src:url(../fonts/figtree-italic-400_700-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Figtree';font-style:italic;font-weight:400 700;font-display:swap;src:url(../fonts/figtree-italic-400_700.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/figtree-400_700-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/figtree-400_700.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/unbounded-400_800-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/unbounded-400_800.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* =====================================================================
   1. Farbwerte

   Vier Bloecke wie ueberall in der Familie: :root (hell), prefers-color-scheme (dunkel),
   body.theme-dark, body.theme-light. Der Knopf wechselt System -> Hell -> Dunkel und merkt
   sich die Wahl unter "user-theme" wie die App; .theme-forced am <html> schaltet die
   Media-Query ab. Markenblau --accent wie in css/app.css. Jede Flaeche, Schrift und Linie
   haengt an diesen Tokens.
   ===================================================================== */
:root{
  --bg:#f3f5fa; --surface:#ffffff; --surface-2:#e6eaf3; --bubble:#e1e9fb;
  --ink:#0a1124; --ink-soft:#4a5571; --line:rgba(10,17,36,.14);
  --accent:#1a56db; --on-accent:#ffffff; --sticker-edge:#ffffff; --shade:rgba(10,17,36,.16);
  --overlay:rgba(10,17,36,.45); --phone:#0a1124;
  --head-bg:rgba(243,245,250,.88); --head-solid:#f3f5fa;
  --font:"Figtree",system-ui,-apple-system,sans-serif; --display:"Unbounded","Figtree",system-ui,sans-serif;
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-in-out:cubic-bezier(.77,0,.175,1); --ease-spring:cubic-bezier(.23,1,.32,1);
}
@media (prefers-color-scheme:dark){
  :root:not(.theme-forced){
    --bg:#070b17; --surface:#111831; --surface-2:#18213f; --bubble:#1a2648;
    --ink:#edf1fb; --ink-soft:#9ba6c4; --line:rgba(237,241,251,.14);
    --accent:#6f95ff; --on-accent:#06102b; --sticker-edge:#1f2a4d; --shade:rgba(0,0,0,.5);
    --overlay:rgba(0,0,0,.6); --phone:#000000;
    --head-bg:rgba(7,11,23,.88); --head-solid:#070b17;
  }
}
body.theme-dark{
  --bg:#070b17; --surface:#111831; --surface-2:#18213f; --bubble:#1a2648;
  --ink:#edf1fb; --ink-soft:#9ba6c4; --line:rgba(237,241,251,.14);
  --accent:#6f95ff; --on-accent:#06102b; --sticker-edge:#1f2a4d; --shade:rgba(0,0,0,.5);
  --overlay:rgba(0,0,0,.6); --phone:#000000;
  --head-bg:rgba(7,11,23,.88); --head-solid:#070b17;
}
body.theme-light{
  --bg:#f3f5fa; --surface:#ffffff; --surface-2:#e6eaf3; --bubble:#e1e9fb;
  --ink:#0a1124; --ink-soft:#4a5571; --line:rgba(10,17,36,.14);
  --accent:#1a56db; --on-accent:#ffffff; --sticker-edge:#ffffff; --shade:rgba(10,17,36,.16);
  --overlay:rgba(10,17,36,.45); --phone:#0a1124;
  --head-bg:rgba(243,245,250,.88); --head-solid:#f3f5fa;
}


/* =====================================================================
   2. Gemeinsam - Startseite und Rechtstexte
   ===================================================================== */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;padding-top:64px;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:17.5px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
::selection{background:var(--accent);color:var(--on-accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
a{color:var(--accent)}
img{display:block;max-width:100%;height:auto}
[id]{scroll-margin-top:76px}
.wrap{max-width:1240px;margin:0 auto;padding:0 28px}
@media (max-width:640px){.wrap{padding:0 20px}}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:700;letter-spacing:-.045em;line-height:1.02;
  overflow-wrap:break-word;hyphens:auto;-webkit-hyphenate-limit-before:4;-webkit-hyphenate-limit-after:4;hyphenate-limit-chars:10 4 4}
p{margin:0}

/* Kopfzeile: 64px, Reihenfolge bindend (Handbuch 7) */
.navbar{position:fixed;top:0;left:0;right:0;z-index:60;background:var(--head-bg);border-bottom:1px solid transparent;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:border-color .3s var(--ease-out)}
.navbar.scrolled{border-bottom-color:var(--line)}
.nav{display:flex;align-items:center;gap:12px;height:64px}
.brand{font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:-.05em;color:var(--ink);text-decoration:none;white-space:nowrap}
.brand .dot{color:var(--accent)}
.navlinks{display:flex;align-items:center;gap:4px;margin-inline:auto}
.navlinks a{color:var(--ink-soft);text-decoration:none;font-weight:600;font-size:15.5px;padding:12px;min-height:48px;display:flex;align-items:center}
@media (hover:hover){.navlinks a:hover{color:var(--ink)}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 22px;border-radius:999px;
  font:inherit;font-weight:700;font-size:15.5px;text-decoration:none;white-space:nowrap;cursor:pointer;border:1.5px solid var(--line);
  background:var(--surface);color:var(--ink);transition:transform .16s var(--ease-out),border-color .2s ease}
.btn:active{transform:scale(.97)}
@media (hover:hover){.btn:hover{border-color:var(--ink-soft)}}
.btn-primary,.navlinks a.btn-primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
@media (hover:hover){.btn-primary:hover{border-color:var(--accent);filter:brightness(1.07)}}
.iconbtn{width:44px;height:44px;flex:0 0 auto;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);
  display:grid;place-items:center;cursor:pointer;font-size:16px;transition:transform .16s var(--ease-out)}
.iconbtn:active{transform:scale(.95)}
.burger{display:none}
.lang-switch{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;letter-spacing:.04em}
.lang-switch a{color:var(--ink-soft);text-decoration:none;padding:6px 2px;border-bottom:1.5px solid transparent}
.lang-switch a.active{color:var(--accent);border-bottom-color:var(--accent)}
.lang-switch .sep{color:var(--line)}
@media (max-width:860px){
  .burger{display:grid}
  .navlinks{position:absolute;top:64px;left:0;right:0;display:none;flex-direction:column;align-items:stretch;gap:0;
    padding:10px 20px 18px;background:var(--head-solid);border-bottom:1px solid var(--line)}
  .navlinks.open{display:flex}
  .navlinks a{border-bottom:1px solid var(--line)}
  .nav > .brand{margin-right:auto}
  .nav > .btn,.nav > .lang-switch{display:none}
  .navlinks a.cta-menu{margin-top:14px;border-bottom:0}
  .navlinks .lang-switch{padding:12px 4px}
  .navlinks .lang-switch a{border-bottom:1.5px solid transparent}
}
@media (min-width:861px){.navlinks .lang-switch,.navlinks a.cta-menu{display:none}}

/* Fusszeile: eine Reihe, kein Betreibersatz */
footer{border-top:1px solid var(--line);padding:28px 0 40px;color:var(--ink-soft);font-size:15px}
footer .fl{display:flex;align-items:center;gap:6px 20px;flex-wrap:wrap}
footer .grow{flex:1 1 auto}
footer a{color:inherit;text-decoration:none;white-space:nowrap;padding:12px 0}
footer .brand{font-size:18px;color:var(--ink)}
@media (hover:hover){footer a:hover{color:var(--ink)}}
@media (max-width:640px){footer .fl{justify-content:center}footer .grow{display:none}footer .brand{flex:0 0 100%;text-align:center}}

/* Hilfe: Panel von rechts, hilfe_<sprache>.html im iframe, nur vom Fuss ausgeloest */
.help-overlay{position:fixed;inset:0;z-index:1090;background:var(--overlay);display:none;opacity:0;transition:opacity .3s var(--ease-out)}
.help-overlay.open{display:block;opacity:1}
.help-panel{position:fixed;top:0;right:0;height:100%;width:40%;max-width:520px;min-width:320px;background:var(--surface);
  border-left:1px solid var(--line);box-shadow:-30px 0 60px -20px var(--shade);z-index:1100;display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .42s var(--ease-out)}
.help-panel.open{transform:translateX(0)}
@media (max-width:800px){.help-panel{width:100%;max-width:none;min-width:0}}
.help-panel-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}
.help-panel-header h3{font-size:17px;letter-spacing:-.03em}
.help-panel iframe{flex:1;width:100%;border:0;background:var(--surface)}
.help-close{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);
  font:inherit;font-size:17px;cursor:pointer;display:grid;place-items:center;transition:transform .16s var(--ease-out)}
.help-close:active{transform:scale(.95)}

/* App-Bilder: je Farbmodus das passende */
html body img.shot-dark{display:none}
@media (prefers-color-scheme:dark){html:not(.theme-forced) body img.shot-light{display:none}html:not(.theme-forced) body img.shot-dark{display:block}}
html body.theme-dark img.shot-light{display:none}html body.theme-dark img.shot-dark{display:block}
html body.theme-light img.shot-light{display:block}html body.theme-light img.shot-dark{display:none}


/* =====================================================================
   3. Nur die Startseite (.page-home)
   ===================================================================== */
/* Falle (Handbuch 7): .hero traegt zugleich .wrap, deshalb nur Longhand-padding oben/unten */
.page-home section{padding-top:110px;padding-bottom:110px;overflow-x:clip}
@media (max-width:640px){.page-home section{padding-top:72px;padding-bottom:72px}}
.page-home h2{font-size:clamp(30px,4.4vw,58px);max-width:17ch}
.page-home .lede{margin-top:20px;color:var(--ink-soft);max-width:52ch}
.js .page-home .reveal{opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease-out),transform .55s var(--ease-out)}
.js .page-home .reveal.in{opacity:1;transform:none}
.phone{border-radius:40px;padding:9px;background:var(--phone);box-shadow:0 24px 48px -20px var(--shade)}
.phone img{border-radius:32px;width:100%}

/* Hero: der Wortwechsel, rechts das Telefon auf der blauen Tafel */
.page-home .hero{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:56px;align-items:center;padding-top:56px;padding-bottom:80px}
.dialog{display:grid;gap:12px}
.blase{font-family:var(--display);font-weight:700;letter-spacing:-.045em;line-height:1.04;font-size:clamp(32px,3.9vw,56px)}
.blase.a{color:var(--ink-soft)}
.blase.b em{font-style:normal;color:var(--accent)}
.hero .sub{margin-top:26px;color:var(--ink-soft);font-size:clamp(17px,1.6vw,20px);max-width:40ch}
.hero .row{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.tafel{justify-self:end;width:min(380px,100%);background:var(--accent);border-radius:36px;padding:clamp(22px,3vw,34px);transform:rotate(2deg)}
.tafel .phone{box-shadow:none}
@media (max-width:900px){.page-home .hero{grid-template-columns:1fr;gap:40px;padding-top:40px}.tafel{justify-self:start;width:min(300px,100%);transform:rotate(1.5deg)}}

/* Drei Wege: runde Sticker */
.bogen{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:56px}
.sticker{text-align:center}
.rund{width:min(240px,100%);aspect-ratio:1;margin:0 auto;border-radius:50%;background:var(--accent);color:var(--on-accent);
  border:8px solid var(--sticker-edge);box-shadow:0 14px 30px -12px var(--shade);display:grid;place-content:center;gap:10px}
.rund i{font-size:42px}
.rund b{font-family:var(--display);font-size:23px;letter-spacing:-.03em;line-height:1.1}
.sticker:nth-child(1) .rund{transform:rotate(-7deg)}
.sticker:nth-child(2) .rund{transform:rotate(4deg);background:var(--ink);color:var(--bg)}
.sticker:nth-child(3) .rund{transform:rotate(-2deg)}
.js .sticker .rund{scale:.9;opacity:0;transition:scale .5s var(--ease-spring),opacity .3s ease}
.js .sticker.in .rund{scale:1;opacity:1}
.sticker:nth-child(2) .rund{transition-delay:.08s}
.sticker:nth-child(3) .rund{transition-delay:.16s}
.sticker p{margin:24px auto 0;color:var(--ink-soft);max-width:30ch}
@media (max-width:860px){.bogen{grid-template-columns:1fr;gap:48px}.rund{width:200px}}

/* Ablauf: Schritte links, rechts ein stehendes Telefon, das mit jedem Schritt das Bild wechselt */
.ablauf{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:72px;margin-top:24px}
.schritte{position:relative;padding-left:44px}
.schritte::before{content:"";position:absolute;left:11px;top:14px;bottom:14px;width:2px;background:var(--line)}
.fort{position:absolute;left:11px;top:14px;bottom:14px;width:2px;background:var(--accent);transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease-out)}
.schritt{min-height:70vh;display:flex;flex-direction:column;justify-content:center;position:relative;opacity:.4;transition:opacity .4s ease}
.schritt.aktiv{opacity:1}
.schritt::before{content:"";position:absolute;left:-40px;top:calc(50% - 58px);width:16px;height:16px;border-radius:50%;background:var(--bg);
  border:2px solid var(--line);transition:border-color .3s ease,background-color .3s ease}
.schritt.aktiv::before{border-color:var(--accent);background:var(--accent)}
.schritt .wann{font-weight:700;font-size:15px;color:var(--accent)}
.schritt h3{font-size:clamp(26px,3.2vw,42px);margin-top:12px;max-width:16ch}
.schritt p{margin-top:16px;color:var(--ink-soft);max-width:44ch}
.schritt .klein{display:none}
.buehne{position:sticky;top:96px;height:calc(100vh - 128px);display:flex;align-items:center}
.buehne .phone{width:100%;max-width:330px;aspect-ratio:390/844;position:relative}
.screen{position:relative;width:100%;height:100%;border-radius:32px;overflow:hidden;background:var(--surface)}
.screen .bild{position:absolute;inset:0;opacity:0;transform:scale(1.02);transition:opacity .45s ease,transform .6s var(--ease-out)}
.screen .bild.zeigen{opacity:1;transform:none}
.screen img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:0}
@media (max-width:900px){
  .ablauf{grid-template-columns:1fr;gap:0}
  .buehne{display:none}
  .schritt{min-height:0;opacity:1;padding:32px 0}
  .schritt::before{top:40px;background:var(--accent);border-color:var(--accent)}
  .schritt .klein{display:block;margin-top:24px;max-width:250px}
}

/* Null Apps: grosse Zahl, daneben die Wege beim Gegenueber */
.null{display:grid;grid-template-columns:auto 1fr;gap:56px;align-items:center}
.null .zahl{font-family:var(--display);font-weight:700;font-size:clamp(150px,22vw,300px);line-height:.8;color:var(--accent);letter-spacing:-.06em}
.null ul{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:14px}
.null li{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:center}
.null li i{width:44px;height:44px;border-radius:50%;background:var(--bubble);color:var(--accent);display:grid;place-items:center}
@media (max-width:760px){.null{grid-template-columns:1fr;gap:20px}}

/* Was auf der Karte steht: Musterkarte und Feldgruppen */
.felder{display:grid;grid-template-columns:5fr 6fr;gap:56px;align-items:start;margin-top:48px}
.muster{aspect-ratio:85/55;background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:0 18px 36px -20px var(--shade);
  padding:28px;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr auto;gap:6px 18px;font-size:15.5px;transform:rotate(-1.5deg)}
.muster .mg{grid-row:1/3;width:64px;height:64px;border-radius:50%;background:var(--bubble);color:var(--accent);display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-size:20px}
.muster .nm{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.04em}
.muster .rl{color:var(--ink-soft);line-height:1.45}
.muster .ct{grid-column:1/3;align-self:end;font-size:14px;line-height:1.7;color:var(--ink-soft);overflow-wrap:anywhere}
.gruppe{padding:22px 0;border-top:1px solid var(--line)}
.gruppe:first-child{border-top:0;padding-top:0}
.gruppe h3{font-size:21px;display:flex;justify-content:space-between;gap:12px;align-items:baseline;flex-wrap:wrap}
.gruppe h3 small{font-family:var(--font);font-weight:700;font-size:14px;color:var(--accent);letter-spacing:0}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chips span{font-size:15px;padding:6px 13px;border-radius:999px;background:var(--surface);border:1px solid var(--line)}
@media (max-width:860px){.felder{grid-template-columns:1fr;gap:40px}.muster{max-width:440px;padding:22px}}
@media (max-width:420px){.muster{aspect-ratio:auto;min-height:220px}}

/* Neue Nummer: bisher und neu, daneben die Karte in der App */
.nummer{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:64px;align-items:center}
.paar{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px}
.wert{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:24px}
.wert .lbl{font-size:14.5px;font-weight:700;color:var(--ink-soft)}
.wert .v{font-family:var(--display);font-weight:600;font-size:clamp(18px,2vw,25px);letter-spacing:-.03em;margin-top:8px;overflow-wrap:anywhere}
.wert.alt .v{text-decoration:line-through;text-decoration-thickness:2px;color:var(--ink-soft)}
.wert.neu{border:2px solid var(--accent)}
.wert.neu .v{color:var(--accent)}
.nummer .lede{margin-top:26px}
@media (max-width:900px){.nummer{grid-template-columns:1fr;gap:40px}.nummer .phone{max-width:260px}}
@media (max-width:560px){.paar{grid-template-columns:1fr}}

/* Preise: Preisschilder */
.schilder{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:64px}
.schild{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:48px 28px 30px;
  box-shadow:0 18px 36px -20px var(--shade);transform-origin:50% 0}
.schild::before{content:"";position:absolute;top:18px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--bg);border:1px solid var(--line)}
.schild:nth-child(1){transform:rotate(-2deg)}
.schild:nth-child(2){transform:rotate(1.5deg);background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.schild:nth-child(3){transform:rotate(-1deg)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.schild{transition:transform .5s var(--ease-spring)}.schild:hover{transform:rotate(0) translateY(-4px)}}
.schild h3{font-size:22px}
.schild .bt{font-family:var(--display);font-weight:700;font-size:clamp(40px,4vw,56px);letter-spacing:-.05em;margin-top:14px;line-height:1}
.schild .tk{font-weight:600;font-size:15px;opacity:.85;margin-top:8px}
.schild ul{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:8px;font-size:16px}
.schild li{display:flex;gap:10px}
.schild li i{margin-top:6px;font-size:13px}
.ent{margin-top:44px;color:var(--ink-soft);max-width:60ch}
@media (max-width:960px){.schilder{grid-template-columns:1fr;max-width:460px;gap:36px}}

/* Laden */
.laden h2{font-size:clamp(36px,6vw,84px);max-width:12ch}
.laden .row{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}


/* =====================================================================
   4. Nur die Rechtstexte (.page-legal) - Inhalt von Hand gepflegt
   ===================================================================== */
.page-legal main{padding:64px 0 72px}
.page-legal .legal{max-width:74ch}
.page-legal .legal h1{font-size:clamp(28px,4.4vw,44px);margin:0 0 10px}
.page-legal .legal .stand{color:var(--ink-soft);font-size:15px;margin:0 0 38px}
.page-legal .legal h2{font-size:clamp(20px,2.4vw,24px);letter-spacing:-.035em;line-height:1.15;margin:44px 0 12px;padding-top:28px;border-top:1px solid var(--line)}
.page-legal .legal h2:first-of-type{border-top:none;padding-top:0}
.page-legal .legal h3{font-size:18px;letter-spacing:-.03em;margin:26px 0 8px}
.page-legal .legal p,.page-legal .legal ul,.page-legal .legal ol{color:var(--ink-soft);font-size:16.5px;line-height:1.68;margin:0 0 14px}
.page-legal .legal ul,.page-legal .legal ol{padding-left:22px}
.page-legal .legal li{margin-bottom:7px}
.page-legal .legal strong{color:var(--ink);font-weight:700}
.page-legal .legal address{font-style:normal}
.page-legal .legal code{font-size:.92em;background:var(--bubble);padding:2px 6px;border-radius:5px;overflow-wrap:anywhere}
.page-legal .legal a{overflow-wrap:anywhere}
.page-legal .legal .box,.page-legal .toc{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:22px 26px;margin:0 0 20px}
.page-legal .toc{margin-bottom:40px}
.page-legal .toc ol{margin:0;padding-left:20px;columns:2;column-gap:34px;font-size:15px;line-height:1.75}
@media (max-width:640px){.page-legal .toc ol{columns:1}.page-legal .legal .box,.page-legal .toc{padding:18px 18px}}
.page-legal .toc a{text-decoration:none}
@media (hover:hover){.page-legal .toc a:hover{text-decoration:underline}}


/* =====================================================================
   5. Zugaenglichkeit
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js .page-home .reveal{opacity:1;transform:none}
  .js .sticker .rund{scale:1;opacity:1}
  .help-panel{transform:none}
  .help-panel:not(.open){visibility:hidden}
}
@media (prefers-reduced-transparency:reduce){
  .navbar{background:var(--head-solid);-webkit-backdrop-filter:none;backdrop-filter:none}
}