/* Gemeinsamer Rahmen für Unterseiten mit eigenem Seiten-CSS (Deckrüden, Rechner, Rechtliches, 404, Bewerbung):
   Farben des Design-Systems, Navigation und Fuß wie auf der Startseite. Wird NACH dem Seiten-CSS geladen,
   überschreibt nur Farb-Tokens und den Rahmen, nicht die Inhalte. Bewusst nur hell. */
:root{
  color-scheme:light; --on-band-soft:#0C4F48; --nav-bg:rgba(255,255,255,.72); --nav-rand:rgba(255,255,255,.9); --hero-licht:#FFFFFF; --symbol-bg:#E3F6F2; --on-dark:#F2FBF9;
  --ground:#E9F7F3; --ground-2:#F6FCFA; --panel:#FFFFFF; --ink:#0D3B36; --ink-soft:#4D6F6B; --line:#CFE8E2;
  --brand:#14B8A6; --brand-deep:#0A6A61; --brand-soft:#DDF3EE; --band-dark:#0C4F48; --band-soft:#A9E6DC; --on-dark:#F2FBF9;
  --accent:#F4A63C; --accent-deep:#E08F22; --accent-ink:#2A1D14;
  --f-display:"Fraunces",Georgia,"Times New Roman",serif; --f-body:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:var(--f-display); --sans:var(--f-body);
  --ease-out:cubic-bezier(0.23,1,0.32,1);
}
body{background:var(--ground);color:var(--ink);font-family:var(--f-body)}

.nav-huelle{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;padding:14px 20px 0}
.nav{max-width:1160px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 8px 8px 16px;background:var(--nav-bg);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border:1px solid var(--nav-rand);border-radius:999px;box-shadow:0 6px 24px -10px rgba(13,59,54,.25)}
.nav .marke{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-size:18px;color:var(--ink);font-family:var(--f-body)}
.nav .marke img{width:32px;height:32px;border-radius:9px}
.nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0;font-size:15px;font-weight:500}
.nav ul a{text-decoration:none;color:var(--ink-soft)}
.nav ul a[aria-current]{color:var(--ink)}
@media (hover:hover) and (pointer:fine){.nav ul a:hover{color:var(--ink)}}
@media (max-width:760px){.nav ul{display:none}}
.nav .knopf{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:12px 20px;font:700 15px var(--f-body);text-decoration:none;white-space:nowrap;background:var(--accent);color:var(--accent-ink);box-shadow:0 6px 16px -6px rgba(224,143,34,.6);transition:transform 160ms var(--ease-out),background-color .15s ease}
.nav .knopf:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.nav .knopf:hover{background:var(--accent-deep)}}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--brand);outline-offset:3px}

.fuss{max-width:1160px;margin:40px auto 0;padding:32px 20px 56px;display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;color:var(--ink-soft);font-size:14px;border-top:1px solid var(--line)}
.fuss nav{display:flex;flex-wrap:wrap;gap:8px 20px}
.fuss a{color:var(--ink-soft);text-decoration:none}
@media (hover:hover) and (pointer:fine){.fuss a:hover{color:var(--ink)}}

/* Rechtstexte lesbarer */
.wl-legal{max-width:760px}
.wl-legal h1{font-family:var(--f-display);font-size:clamp(36px,5vw,54px);line-height:1.02;letter-spacing:-.02em}
.wl-legal h2{font-family:var(--f-display);letter-spacing:-.02em}
.wl-legal table{border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--panel)}
.wl-legal th{background:var(--band-dark);color:var(--on-dark)}

/* Knöpfe aus dem alten Seiten-CSS an das Design-System angleichen */
.wl-btn-brand,.art .wl-btn-brand{background:var(--band-dark);color:var(--on-dark);box-shadow:none}
.wl-btn-ghost,.art .wl-btn-ghost{color:var(--brand-deep)}
.wl-btn:active{transform:scale(.97)}

/* Flächen und Knöpfe mit weißer Schrift auf das dunkle Band-Teal setzen (Kontrast, hell und dunkel) */
.result,.toolbox{background:var(--band-dark)!important;color:var(--on-dark)}
.btn:not(.ghost),.chip.active,.cta .btn{background:var(--band-dark);border-color:var(--band-dark);color:var(--on-dark);box-shadow:none}

@media (prefers-color-scheme: dark){:root{
  color-scheme:dark;
  --ground:#0C1413; --ground-2:#131E1C; --panel:#131E1C; --ink:#E9F6F4; --ink-soft:#9DB0AB; --line:#22322F;
  --brand:#2DD4BF; --brand-deep:#7FE0D6; --brand-soft:#10221F; --band-dark:#0E5C54; --band-soft:#1B2927; --on-band-soft:#BFEDE6;
  --nav-bg:rgba(19,30,28,.78); --nav-rand:rgba(255,255,255,.08); --hero-licht:rgba(45,212,191,.10); --symbol-bg:#1B2927;
}}