/* CertWalk Landing – Designsystem der App („Ruhiges Papier, klare Tinte“, konzept/02-design-und-ux.md)
   Layout: eine Lesespalte mobil; ab 900 px Hero zweispaltig (Text | Telefon-Mockup), Inhalt max. 1080 px. */

@font-face{font-family:"Inter Variable";font-style:normal;font-display:swap;font-weight:100 900;
  src:url(/assets/fonts/inter-latin-wght.woff2) format("woff2-variations");
  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:"Inter Variable";font-style:normal;font-display:swap;font-weight:100 900;
  src:url(/assets/fonts/inter-latin-ext-wght.woff2) format("woff2-variations");
  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:"Fraunces Variable";font-style:normal;font-display:swap;font-weight:100 900;
  src:url(/assets/fonts/fraunces-latin-wght.woff2) format("woff2-variations");
  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}

:root{
  --bg:#F6F4EF; --surface:#FFFFFF; --surface-2:#EEEAE2; --border:#DCD6CB; --border-strong:#7A827E;
  --text:#1B2220; --text-2:#3F4946; --muted:#5E6864;
  --brand:#0E5E57; --brand-hover:#0A4A44; --on-brand:#FFFFFF; --brand-soft:#DCEDEA;
  --accent:#A9461A; --accent-soft:#F6E6DC;
  --ok:#1E6E47; --ok-bg:#E3F1E8; --err:#A3302A; --err-bg:#F8E4E1; --warn:#7A5200; --warn-bg:#FBF0D9;
  --d1:#0E6E64; --d2:#4B43B0; --d3:#A2481C; --d4:#8A3264;
  --ph-bg:#FFE14D; --ph-text:#2A1F00; --ph-border:#B8860B;
  --phone:#1B2220; --screen:#F6F4EF;
  --exam-bar:#2E3336; --exam-on-bar:#FFFFFF; --exam-sel:#1F4E79; --exam-sel-bg:#E3ECF5;
  --shadow:0 18px 48px rgb(27 34 32 / .16);
  --font-display:"Fraunces Variable","Fraunces",Georgia,"Times New Roman",serif;
  --font-text:"Inter Variable","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  --r-sm:8px; --r-md:14px; --r-lg:22px;
  --wrap:1080px; --read:68ch;
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#111514; --surface:#192120; --surface-2:#222B29; --border:#33403C; --border-strong:#76847F;
    --text:#E7ECEA; --text-2:#BAC4C0; --muted:#93A09B;
    --brand:#5FC9B9; --brand-hover:#7EDCCD; --on-brand:#0D1312; --brand-soft:#173430;
    --accent:#EFA06B; --accent-soft:#3A2619;
    --ok:#6CD39F; --ok-bg:#16322A; --err:#FF8F86; --err-bg:#3A1F1D; --warn:#E6B95E; --warn-bg:#33290F;
    --d1:#5FC9B9; --d2:#ABA4FF; --d3:#EFA06B; --d4:#E792C2;
    --ph-bg:#FFE14D; --ph-text:#2A1F00; --ph-border:#FFE14D;
    --phone:#050707; --screen:#111514;
    --exam-bar:#0B0D0E; --exam-on-bar:#E6E8EA; --exam-sel:#9CC3EA; --exam-sel-bg:#1E3247;
    --shadow:0 18px 48px rgb(0 0 0 / .55);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#111514; --surface:#192120; --surface-2:#222B29; --border:#33403C; --border-strong:#76847F;
  --text:#E7ECEA; --text-2:#BAC4C0; --muted:#93A09B;
  --brand:#5FC9B9; --brand-hover:#7EDCCD; --on-brand:#0D1312; --brand-soft:#173430;
  --accent:#EFA06B; --accent-soft:#3A2619;
  --ok:#6CD39F; --ok-bg:#16322A; --err:#FF8F86; --err-bg:#3A1F1D; --warn:#E6B95E; --warn-bg:#33290F;
  --d1:#5FC9B9; --d2:#ABA4FF; --d3:#EFA06B; --d4:#E792C2;
  --ph-bg:#FFE14D; --ph-text:#2A1F00; --ph-border:#FFE14D;
  --phone:#050707; --screen:#111514;
  --exam-bar:#0B0D0E; --exam-on-bar:#E6E8EA; --exam-sel:#9CC3EA; --exam-sel-bg:#1E3247;
  --shadow:0 18px 48px rgb(0 0 0 / .55);
  color-scheme:dark;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%; scroll-padding-top:84px; scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto} *{transition:none!important; animation:none!important}}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--font-text); font-size:1.0625rem; line-height:1.6; overflow-x:hidden}
h1,h2,h3{margin:0; line-height:1.2; text-wrap:balance}
h1,h2{font-family:var(--font-display); font-weight:600; letter-spacing:-.015em}
h3{font-size:1.0625rem; font-weight:600}
p{margin:0}
a{color:var(--brand); text-underline-offset:.18em}
a:hover{color:var(--brand-hover)}
img,svg{max-width:100%}
button,input{font:inherit; color:inherit}
:focus-visible{outline:3px solid var(--brand); outline-offset:2px; border-radius:6px}
[tabindex="-1"]:focus{outline:none}
.sr-only{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:absolute; left:8px; top:-80px; background:var(--brand); color:var(--on-brand); padding:10px 14px; border-radius:8px; z-index:100; text-decoration:none}
.skip:focus{top:8px; color:var(--on-brand)}
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:16px}
@media (min-width:400px){.wrap{padding-inline:20px}}
.eyebrow{font-family:var(--font-text); font-size:.8125rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.term{font-weight:500}
.muted{color:var(--muted)}

/* ---------- Header ---------- */
.site-head{position:sticky; top:env(safe-area-inset-top,0px); z-index:50; background:color-mix(in srgb,var(--bg) 90%,transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--border)}
.site-head .wrap{display:flex; align-items:center; gap:var(--s3); min-height:64px}
.brand{display:inline-flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; font-family:var(--font-display); font-weight:600; font-size:1.25rem; letter-spacing:-.01em; min-height:44px}
.brand:hover{color:var(--text)}
.brand svg{width:30px; height:30px; flex:none}
.head-nav{display:none; gap:var(--s5); margin-left:var(--s5)}
.head-nav a{color:var(--text-2); text-decoration:none; font-size:.9375rem}
.head-nav a:hover{color:var(--text); text-decoration:underline}
.spacer{flex:1}
.lang{display:flex; gap:2px; padding:3px; background:var(--surface-2); border-radius:999px}
.lang a{display:inline-grid; place-items:center; min-width:40px; min-height:36px; padding-inline:6px; border-radius:999px; font-size:.8125rem; font-weight:600; letter-spacing:.04em; color:var(--text-2); text-decoration:none}
.lang a[aria-current="true"]{background:var(--surface); color:var(--text); box-shadow:0 1px 2px rgb(0 0 0 / .08)}
.lang a:hover{color:var(--text)}
.site-head .head-login{display:none}
@media (min-width:760px){.head-nav{display:flex} .site-head .head-login{display:inline-flex}}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 22px; border-radius:999px; border:1.5px solid transparent; font-weight:600; font-size:1rem; text-decoration:none; cursor:pointer; transition:background .15s var(--ease),border-color .15s var(--ease)}
.btn-primary{background:var(--brand); color:var(--on-brand)}
.btn-primary:hover{background:var(--brand-hover); color:var(--on-brand)}
.btn-ghost{background:transparent; color:var(--text); border-color:var(--border-strong)}
.btn-ghost:hover{background:var(--surface-2); color:var(--text)}
.btn-sm{min-height:44px; padding:0 16px; font-size:.9375rem}
.btn[disabled]{opacity:.6; cursor:progress}

/* ---------- Hero ---------- */
.hero{padding-block:var(--s7) var(--s7)}
.hero .wrap{display:grid; gap:var(--s7); align-items:center}
.hero-text{display:grid; gap:var(--s5); min-width:0}
.badge{justify-self:start; display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px; background:var(--accent-soft); color:var(--accent); font-size:.8125rem; font-weight:600; letter-spacing:.02em}
.badge::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor}
.hero h1{font-size:clamp(2.25rem,7vw,3.75rem); line-height:1.04; font-weight:600; font-variation-settings:"opsz" 144}
.hero h1 .l2{display:block; color:var(--brand)}
.lede{font-size:1.1875rem; line-height:1.55; color:var(--text-2); max-width:36rem}
.cta-row{display:flex; flex-wrap:wrap; gap:var(--s3)}
.indep{font-size:.875rem; color:var(--muted); max-width:34rem; display:flex; gap:8px; align-items:flex-start}
.indep svg{flex:none; margin-top:3px}
.hero-visual{display:flex; justify-content:center; min-width:0}
@media (min-width:900px){.hero .wrap{grid-template-columns:1.15fr .85fr} .hero{padding-block:var(--s8)}}

/* ---------- Exam strip (Gewichtung) ---------- */
.exam{border-block:1px solid var(--border); background:var(--surface); padding-block:var(--s6)}
.exam .wrap{display:grid; gap:var(--s5)}
.exam-facts{display:flex; flex-wrap:wrap; gap:var(--s3) var(--s6); font-variant-numeric:tabular-nums}
.fact{display:grid}
.fact b{font-family:var(--font-display); font-size:1.75rem; font-weight:600; line-height:1.1}
.fact span{font-size:.875rem; color:var(--muted)}
.weights{display:grid; gap:var(--s2)}
.wbar{display:flex; height:14px; border-radius:999px; overflow:hidden; gap:3px}
.wbar i{display:block; height:100%}
.wbar .w1{flex:30; background:var(--d1)} .wbar .w2{flex:35; background:var(--d2)} .wbar .w3{flex:20; background:var(--d3)} .wbar .w4{flex:15; background:var(--d4)}
.wlegend{display:grid; gap:6px var(--s5); grid-template-columns:1fr; margin:0; padding:0; list-style:none; font-size:.9375rem}
.wlegend li{display:flex; gap:8px; align-items:baseline}
.wlegend .dot{width:10px; height:10px; border-radius:3px; flex:none; transform:translateY(1px)}
.dot.w1{background:var(--d1)} .dot.w2{background:var(--d2)} .dot.w3{background:var(--d3)} .dot.w4{background:var(--d4)}
.wlegend .pct{font-variant-numeric:tabular-nums; font-weight:600; min-width:4.6ch; white-space:nowrap}
.wlegend .sec{color:var(--muted); font-weight:600; font-size:.8125rem}
@media (min-width:640px){.wlegend{grid-template-columns:1fr 1fr}}
.src-note{font-size:.8125rem; color:var(--muted)}

/* ---------- Sections ---------- */
.section{padding-block:var(--s8)}
.section-head{display:grid; gap:var(--s3); max-width:40rem; margin-bottom:var(--s6)}
.section-head h2{font-size:clamp(1.75rem,4.5vw,2.5rem)}
.section-head p{color:var(--text-2); font-size:1.0625rem}
.alt{background:var(--surface-2)}

.features{display:grid; gap:var(--s5); grid-template-columns:1fr; margin:0; padding:0; list-style:none}
.feature{display:grid; grid-template-columns:44px 1fr; gap:var(--s2) var(--s4); align-items:start}
.feature .ic{width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:var(--brand-soft); color:var(--brand)}
.feature .ic svg{width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.feature h3{font-size:1.125rem; padding-top:10px}
.feature p{grid-column:2; color:var(--text-2); font-size:1rem}
@media (min-width:720px){.features{grid-template-columns:1fr 1fr; gap:var(--s6) var(--s7)}}
@media (min-width:1000px){.features{grid-template-columns:repeat(3,1fr)}}

.shots{display:grid; gap:var(--s6); grid-template-columns:1fr; margin:var(--s7) 0 0; padding:0; list-style:none}
.shots li{display:grid; gap:var(--s3); justify-items:center; text-align:center}
.shots figcaption{font-size:.9375rem; color:var(--text-2); max-width:22rem}
.shots figure{margin:0; display:grid; gap:var(--s3); justify-items:center}
@media (min-width:760px){.shots{grid-template-columns:repeat(3,1fr)}}

/* ---------- Phone mockups (SVG, eigene Illustration) ---------- */
.phone{width:100%; max-width:280px; height:auto; filter:drop-shadow(var(--shadow))}
.hero .phone{max-width:300px}
.ph-frame{fill:var(--phone)} .ph-screen{fill:var(--screen)} .ph-card{fill:var(--surface); stroke:var(--border); stroke-width:1}
.ph-soft{fill:var(--surface-2)} .ph-brand{fill:var(--brand)} .ph-brand-soft{fill:var(--brand-soft)} .ph-onbrand{fill:var(--on-brand)}
.ph-line{stroke:var(--border); stroke-width:1.5} .ph-track{fill:var(--border)}
.ph-t{fill:var(--text); font-family:var(--font-text)} .ph-t2{fill:var(--text-2); font-family:var(--font-text)} .ph-m{fill:var(--muted); font-family:var(--font-text)}
.ph-disp{fill:var(--text); font-family:var(--font-display); font-weight:600}
.ph-ok{fill:var(--ok)} .ph-okbg{fill:var(--ok-bg)} .ph-err{fill:var(--err)} .ph-errbg{fill:var(--err-bg)}
.ph-okstroke{stroke:var(--ok); stroke-width:2; fill:var(--ok-bg)}
.ph-d1{fill:var(--d1)} .ph-d2{fill:var(--d2)} .ph-d3{fill:var(--d3)} .ph-d4{fill:var(--d4)}
.ph-exam{fill:var(--exam-bar)} .ph-onexam{fill:var(--exam-on-bar); font-family:var(--font-text)}
.ph-sel{fill:var(--exam-sel-bg); stroke:var(--exam-sel); stroke-width:2} .ph-seldot{fill:var(--exam-sel)}
.ph-radio{fill:none; stroke:var(--border-strong); stroke-width:1.5}
.ph-icon{fill:none; stroke:var(--on-brand); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.ph-iconb{fill:none; stroke:var(--text-2); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.ph-accent{fill:var(--accent)} .ph-accentsoft{fill:var(--accent-soft)}

/* ---------- Is / Is not ---------- */
.isnot{display:grid; gap:var(--s5); grid-template-columns:1fr}
.isnot > div{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:var(--s5); display:grid; gap:var(--s4); align-content:start}
.isnot h3{font-family:var(--font-display); font-size:1.375rem}
.isnot ul{margin:0; padding:0; list-style:none; display:grid; gap:var(--s3)}
.isnot li{display:grid; grid-template-columns:24px 1fr; gap:10px; color:var(--text-2)}
.isnot li svg{width:20px; height:20px; margin-top:3px; fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.is li svg{stroke:var(--ok)} .not li svg{stroke:var(--err)}
@media (min-width:760px){.isnot{grid-template-columns:1fr 1fr}}
.note{margin-top:var(--s5); border-radius:var(--r-md); padding:var(--s4) var(--s5); background:var(--brand-soft); color:var(--text); display:grid; gap:6px; border:1px solid color-mix(in srgb,var(--brand) 30%,transparent)}
.note strong{font-weight:600}

/* ---------- Beta + Form ---------- */
.beta .wrap{display:grid; gap:var(--s7)}
@media (min-width:900px){.beta .wrap{grid-template-columns:.9fr 1.1fr; align-items:start}}
.beta-info{display:grid; gap:var(--s4); min-width:0}
.beta-info h2{font-size:clamp(1.75rem,4.5vw,2.5rem)}
.beta-info p{color:var(--text-2)}
.beta-info ul{margin:0; padding-left:1.2em; color:var(--text-2); display:grid; gap:6px}
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:var(--s5); min-width:0}
@media (min-width:480px){.card{padding:var(--s6)}}
form{display:grid; gap:var(--s4)}
.field{display:grid; gap:6px}
.field label{font-weight:600; font-size:.9375rem}
.field .hint{font-size:.8125rem; color:var(--muted)}
.field input[type=text],.field input[type=email]{width:100%; min-height:48px; padding:10px 14px; border:1.5px solid var(--border-strong); border-radius:var(--r-sm); background:var(--bg); color:var(--text); font-size:1rem}
.field input:focus-visible{outline:3px solid var(--brand); outline-offset:1px; border-color:var(--brand)}
.field input[aria-invalid="true"]{border-color:var(--err)}
.field .err{font-size:.875rem; color:var(--err); font-weight:500}
#invite_code{font-family:var(--font-mono); letter-spacing:.06em; text-transform:uppercase}
.check{display:grid; grid-template-columns:24px 1fr; gap:10px; align-items:start; font-size:.9375rem; color:var(--text-2)}
.check input{width:22px; height:22px; margin:2px 0 0; accent-color:var(--brand)}
.ts-box{min-height:65px}
.ts-mock{display:flex; align-items:center; gap:10px; min-height:65px; padding:0 14px; border:1.5px dashed var(--border-strong); border-radius:var(--r-sm); font-size:.875rem; color:var(--muted); background:var(--surface-2)}
.ts-mock svg{width:20px; height:20px; fill:none; stroke:var(--ok); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.form-status{border-radius:var(--r-sm); padding:var(--s3) var(--s4); font-size:.9375rem}
.form-status.is-error{background:var(--err-bg); color:var(--err); font-weight:500}
.form-foot{display:flex; flex-wrap:wrap; gap:var(--s3) var(--s4); align-items:center; justify-content:space-between}
.form-foot .login{font-size:.9375rem; color:var(--text-2)}
.mockflag{font-size:.8125rem; font-weight:600; color:var(--warn); background:var(--warn-bg); padding:6px 10px; border-radius:var(--r-sm)}
.success{display:grid; gap:var(--s3); text-align:left}
.success .ok-ic{width:52px; height:52px; border-radius:50%; background:var(--ok-bg); color:var(--ok); display:grid; place-items:center}
.success .ok-ic svg{width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.success h3{font-family:var(--font-display); font-size:1.5rem}
.success p{color:var(--text-2)}
.field label .opt{font-weight:400; color:var(--muted)}
.wl-notice-wrap .wrap{padding-top:var(--s4)}
.wl-notice-wrap:has(.wl-notice[hidden]){display:none}
.wl-notice{margin:0; border-radius:var(--r-md); padding:var(--s3) var(--s4); font-weight:500; border:1px solid transparent}
.wl-notice.is-ok{background:var(--ok-bg); color:var(--ok); border-color:color-mix(in srgb,var(--ok) 35%,transparent)}
.wl-notice.is-warn{background:var(--warn-bg); color:var(--warn); border-color:color-mix(in srgb,var(--warn) 35%,transparent)}
.wl-notice:focus{outline:none}

/* ---------- FAQ ---------- */
.faq{display:grid; gap:0; max-width:48rem; border-top:1px solid var(--border)}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:var(--s4); align-items:center; min-height:56px; padding-block:var(--s3); font-weight:600; font-size:1.0625rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; flex:none; width:10px; height:10px; border-right:2px solid var(--text-2); border-bottom:2px solid var(--text-2); transform:rotate(45deg) translate(-2px,-2px); transition:transform .15s var(--ease)}
.faq details[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.faq .a{padding-bottom:var(--s4); color:var(--text-2); display:grid; gap:var(--s2); max-width:var(--read)}

/* ---------- Footer ---------- */
.site-foot{border-top:1px solid var(--border); padding-block:var(--s6) calc(var(--s6) + env(safe-area-inset-bottom,0px)); background:var(--surface)}
.site-foot .wrap{display:grid; gap:var(--s4)}
.foot-row{display:flex; flex-wrap:wrap; gap:var(--s3) var(--s5); align-items:center}
.foot-links{display:flex; flex-wrap:wrap; gap:var(--s2) var(--s5); margin:0; padding:0; list-style:none}
.foot-links a{color:var(--text-2); display:inline-block; padding-block:10px}
.disclaimer{font-size:.875rem; color:var(--muted); max-width:62rem}

/* ---------- Legal pages ---------- */
.legal{padding-block:var(--s7) var(--s8)}
.legal .wrap{max-width:calc(var(--read) + 40px)}
.legal article{display:grid; gap:var(--s4)}
.legal h1{font-size:clamp(2rem,6vw,2.75rem)}
.legal h2{font-size:1.375rem; margin-top:var(--s5)}
.legal h3{margin-top:var(--s3)}
.legal p,.legal li{color:var(--text-2)}
.legal ul,.legal ol{margin:0; padding-left:1.3em; display:grid; gap:6px}
.legal address{font-style:normal; color:var(--text-2); display:grid; gap:4px}
.legal .tbl{overflow-x:auto; border:1px solid var(--border); border-radius:var(--r-sm)}
.legal table{border-collapse:collapse; width:100%; min-width:560px; font-size:.9375rem}
.legal th,.legal td{text-align:left; vertical-align:top; padding:10px 12px; border-bottom:1px solid var(--border)}
.legal th{background:var(--surface-2); font-weight:600; color:var(--text)}
.legal tr:last-child td{border-bottom:0}
.lawyer{border:1px solid var(--border); background:var(--surface-2); color:var(--text-2); border-radius:var(--r-md); padding:var(--s3) var(--s4); font-size:.875rem; display:grid; gap:4px}
.lawyer strong{color:var(--text-2); font-weight:600}
.review-note{display:block; margin-top:4px; font-size:.8125rem; font-style:italic; color:var(--muted)}
.transl{border-left:4px solid var(--brand); background:var(--brand-soft); padding:var(--s3) var(--s4); border-radius:0 var(--r-sm) var(--r-sm) 0; font-size:.9375rem}
.updated{font-size:.875rem; color:var(--muted)}
mark.ph{background:var(--ph-bg); color:var(--ph-text); outline:2px solid var(--ph-border); border-radius:4px; padding:1px 6px; font-family:var(--font-mono); font-weight:700; font-size:.92em; white-space:normal; overflow-wrap:anywhere}

/* ---- Vor-/Nachname, Programmfrage, „Mit Google …“ (Branding-Richtlinien: Standard-„G“, Theme Neutral bzw. Dark) ---- */
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:var(--s3)}
@media (max-width:480px){.field-row{grid-template-columns:1fr}}
.name-hint{font-size:.8125rem; color:var(--muted); margin-top:-6px}
.radios{border:0; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:6px 18px}
.radios legend{font-weight:600; font-size:.9375rem; margin-bottom:6px; padding:0; width:100%}
.radios label{display:inline-flex; align-items:center; gap:8px; min-height:44px; font-weight:400; font-size:.9375rem; cursor:pointer}
.radios input{width:20px; height:20px; margin:0; accent-color:var(--brand)}
.g-block,.g-login{display:grid; gap:var(--s3); margin-top:var(--s4)}
.g-block[hidden],.g-login[hidden]{display:none}
.g-block .err{font-size:.875rem; color:var(--err); font-weight:500; margin:0}
.or{display:flex; align-items:center; gap:12px; color:var(--muted); font-size:.8125rem}
.or::before,.or::after{content:""; flex:1; border-top:1px solid var(--border)}
.gsi-btn{display:flex; align-items:center; justify-content:center; gap:10px; min-height:44px; padding:0 16px; border-radius:999px;
  background:#F2F2F2; color:#1F1F1F; border:1px solid transparent; font-family:Roboto, var(--font-text, system-ui), sans-serif; font-weight:500; font-size:.875rem; letter-spacing:.25px; text-decoration:none}
.gsi-btn:hover{background:#E8E8E8; box-shadow:0 1px 2px rgb(60 64 67 / .3), 0 1px 3px 1px rgb(60 64 67 / .15)}
.gsi-btn:focus-visible{outline:3px solid var(--brand); outline-offset:2px}
.gsi-btn[aria-disabled="true"]{opacity:.5; cursor:not-allowed; box-shadow:none}
.gsi-g{width:20px; height:20px; flex:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .gsi-btn{background:#131314; color:#E3E3E3; border-color:#8E918F}
  :root:not([data-theme="light"]) .gsi-btn:hover{background:#1F1F20}
}
:root[data-theme="dark"] .gsi-btn{background:#131314; color:#E3E3E3; border-color:#8E918F}
.success .waves{color:var(--text)}
.gc-card{max-width:640px; margin:0 auto; display:grid; gap:var(--s3)}
.g-block .hint,.g-login .hint{font-size:.8125rem; color:var(--muted); margin:0}

/* ---------- Wissensseiten (erzeugt von landing/scripts/build-wissen.mjs) ---------- */
.wissen .wrap{max-width:calc(46rem + 40px)}
.crumbs ol{list-style:none; margin:0 0 var(--s4); padding:0; display:flex; flex-wrap:wrap; gap:4px 0; font-size:.875rem; color:var(--muted)}
.crumbs li{display:inline-flex; align-items:center}
.crumbs li+li::before{content:"›"; margin-inline:8px; color:var(--border-strong)}
.crumbs a{color:var(--text-2)}
.w-head{display:grid; gap:var(--s3)}
.w-head h1{font-size:clamp(1.875rem,5.5vw,2.75rem)}
.w-head .eyebrow{margin:0}
.indep-line{font-size:.875rem; color:var(--muted); margin:0}
.wissen .lead{font-size:1.125rem; line-height:1.6; color:var(--text)}
.w-hero{margin:var(--s2) 0 0}
.w-hero img{display:block; width:100%; height:auto; border-radius:var(--r-md); border:1px solid var(--border); background:var(--surface-2)}
.w-toc{border:1px solid var(--border); border-radius:var(--r-md); padding:var(--s4) var(--s5); background:var(--surface)}
.w-toc h2{margin:0 0 var(--s2); font-size:.8125rem}
.wissen section{display:grid; gap:var(--s3)}
.wissen h2,.wissen section{scroll-margin-top:80px}
.wissen .sec-num{color:var(--muted); font-family:var(--font-text); font-weight:600; font-size:.8em; margin-right:4px}
.wissen table.facts{min-width:0}
.wissen table.facts th{width:36%; background:var(--surface-2)}
.wissen table.pmap,.wissen table.renames{min-width:720px}
.wissen .tbl a{overflow-wrap:anywhere}
.wissen .wbar{margin-block:var(--s2)}
.dom-cards{list-style:none; padding:0!important; display:grid!important; gap:var(--s3)!important}
@media (min-width:640px){.dom-cards{grid-template-columns:1fr 1fr}}
.dom-card a{display:grid; grid-template-columns:auto 1fr; gap:2px 12px; padding:var(--s4); border:1px solid var(--border); border-left:6px solid var(--dc,var(--brand)); border-radius:var(--r-md); background:var(--surface); text-decoration:none; color:var(--text); min-height:44px}
.dom-card a:hover{background:var(--surface-2); color:var(--text)}
.dom-1{--dc:var(--d1)} .dom-2{--dc:var(--d2)} .dom-3{--dc:var(--d3)} .dom-4{--dc:var(--d4)}
.dom-num{font-weight:700; color:var(--dc)} .dom-pct{font-weight:600; color:var(--muted); text-align:right}
.dom-title{grid-column:1/-1; font-weight:600; font-size:1.0625rem}
.dom-en{grid-column:1/-1; font-size:.8125rem; color:var(--muted)}
.teaser-note{font-size:.875rem; color:var(--muted); border-left:3px solid var(--border-strong); padding-left:var(--s3)}
.eg-line{font-size:.875rem; color:var(--muted); background:var(--surface-2); border-radius:var(--r-sm); padding:var(--s2) var(--s3)}
.eg-tag{font-weight:600; color:var(--text-2); white-space:nowrap}
.wissen li ul{margin-top:6px}
.trap{border-left:4px solid var(--accent); background:var(--accent-soft); border-radius:0 var(--r-sm) var(--r-sm) 0; padding:var(--s3) var(--s4); display:grid; gap:4px}
.trap p{color:var(--text)!important}
.trap-h{font-size:.8125rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--accent)!important}
.w-cta{margin-top:var(--s6); border-radius:var(--r-lg); padding:var(--s5); background:var(--brand-soft); border:1px solid color-mix(in srgb,var(--brand) 30%,transparent); display:grid; gap:var(--s3)}
.w-cta h2{margin:0; font-size:1.375rem}
.w-cta p{color:var(--text)!important}
.w-pn{display:grid; gap:var(--s3); margin-top:var(--s5)}
@media (min-width:640px){.w-pn{grid-template-columns:1fr 1fr} .w-pn .next{grid-column:2}}
.pn{display:grid; gap:2px; padding:var(--s3) var(--s4); border:1px solid var(--border); border-radius:var(--r-md); text-decoration:none; font-weight:600; color:var(--text); min-height:44px}
.pn span{font-size:.8125rem; font-weight:500; color:var(--muted)}
.pn.next{text-align:right}
.also{font-size:.9375rem}
.also a{display:inline-block; padding-block:6px}
.w-sources h2{font-size:1.125rem}
.w-sources li{font-size:.875rem; overflow-wrap:anywhere}
.az ul{list-style:none; padding:0!important; display:flex!important; flex-wrap:wrap; gap:6px!important}
.az a{display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; border:1px solid var(--border); border-radius:var(--r-sm); text-decoration:none; font-weight:600; background:var(--surface)}
.az-h{font-size:1.75rem!important; border-bottom:1px solid var(--border); padding-bottom:4px}
.gloss{margin:0; display:grid; gap:var(--s4)}
.gl{display:grid; gap:4px; scroll-margin-top:80px}
.gl:target{background:var(--brand-soft); border-radius:var(--r-sm); padding:var(--s2) var(--s3); margin-inline:calc(-1 * var(--s3))}
.gl dt{font-weight:600; color:var(--text)}
.gl dfn{font-style:normal}
.gl dd{margin:0; display:grid; gap:2px}
.gl-meta{font-size:.8125rem; color:var(--muted)!important}
.ew{font-size:.75rem; color:var(--muted); font-style:italic}
.foot-wissen{display:grid; gap:2px}
.foot-h{font-size:.8125rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin:0}
.wissen-links{list-style:none; margin:0; padding:0; display:grid; gap:var(--s3)}
@media (min-width:640px){.wissen-links{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.wissen-links{grid-template-columns:repeat(3,1fr)}}
.wissen-links a{display:flex; align-items:center; min-height:48px; padding:var(--s3) var(--s4); border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); text-decoration:none; font-weight:600; color:var(--text)}
.wissen-links a:hover{background:var(--surface-2); color:var(--text)}