:root { --bg:#f8fafc; --karte:#fff; --text:#1e293b; --gedaempft:#64748b; --rand:#e2e8f0; --akzent:#0078d4; --akzent-text:#fff; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#0f172a; --karte:#1e293b; --text:#e2e8f0; --gedaempft:#94a3b8; --rand:#334155; --akzent:#60a5fa; --akzent-text:#0f172a; }
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--text);
       font:16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
a { color:var(--akzent); }
img { max-width:100%; height:auto; display:block; }
.wrap { max-width:960px; margin:0 auto; padding:0 16px; }
header.top { border-bottom:1px solid var(--rand); background:var(--karte); }
header.top .wrap { display:flex; flex-wrap:wrap; gap:8px 24px; align-items:center; justify-content:space-between; padding-top:12px; padding-bottom:12px; }
header.top strong { font-size:1.05rem; }
nav { display:flex; flex-wrap:wrap; gap:4px 18px; font-size:.95rem; }
nav a { text-decoration:none; }
nav a:hover { text-decoration:underline; }
.hero { padding:56px 0 40px; }
.hero h1 { margin:0 0 16px; font-size:clamp(1.7rem,5vw,2.6rem); line-height:1.2; overflow-wrap:anywhere; }
.hero p.lead { font-size:1.15rem; max-width:44rem; margin:0 0 24px; }
.knopf { display:inline-block; padding:10px 20px; border-radius:8px; background:var(--akzent); color:var(--akzent-text); text-decoration:none; font-weight:600; margin:0 8px 8px 0; }
.knopf.zweit { background:transparent; color:var(--akzent); border:1px solid var(--akzent); }
section { padding:32px 0; border-top:1px solid var(--rand); }
section h2 { margin:0 0 16px; font-size:1.5rem; line-height:1.3; }
section h3 { margin:0 0 6px; font-size:1.1rem; }
.raster { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:16px; }
.karte { background:var(--karte); border:1px solid var(--rand); border-radius:12px; padding:20px; }
.karte p { margin:0; color:var(--gedaempft); }
.bild { margin:24px 0 0; }
.bild img { border:1px solid var(--rand); border-radius:10px; }
.bild figcaption { color:var(--gedaempft); font-size:.9rem; margin-top:8px; }
.handys { display:flex; flex-wrap:wrap; gap:16px; margin-top:24px; }
.handys figure { margin:0; flex:1 1 200px; max-width:270px; }
.handys img { border:1px solid var(--rand); border-radius:10px; }
.handys figcaption { color:var(--gedaempft); font-size:.9rem; margin-top:8px; }
table { border-collapse:collapse; width:100%; background:var(--karte); border:1px solid var(--rand); border-radius:8px; }
th, td { text-align:left; padding:10px 14px; border-bottom:1px solid var(--rand); vertical-align:top; }
pre { background:var(--karte); border:1px solid var(--rand); border-radius:8px; padding:14px; overflow-x:auto; font-size:.9rem; }
code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.gedaempft { color:var(--gedaempft); font-size:.95rem; }
footer { border-top:1px solid var(--rand); padding:24px 0 40px; color:var(--gedaempft); font-size:.95rem; }
footer .wrap { display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between; }
main.text { padding:40px 0; max-width:44rem; }
main.text h1 { margin-top:0; }
a.karte { display:block; text-decoration:none; color:inherit; transition:border-color .15s, transform .15s; }
a.karte:hover, a.karte:focus-visible { border-color:var(--akzent); transform:translateY(-2px); }
a.karte h3 { color:var(--text); }
a.karte .mehr { display:block; margin-top:10px; color:var(--akzent); font-weight:600; font-size:.95rem; }
nav.unter { display:flex; flex-wrap:wrap; gap:8px; padding:0 0 24px; }
nav.unter a { padding:6px 14px; border:1px solid var(--rand); border-radius:999px; background:var(--karte); text-decoration:none; font-size:.95rem; }
nav.unter a[aria-current="page"] { background:var(--akzent); color:var(--akzent-text); border-color:var(--akzent); }
.highlights { padding-left:1.2rem; margin:0 0 24px; }
.highlights li { margin:0 0 10px; }
.stolz { border-left:4px solid var(--akzent); background:var(--karte); padding:14px 18px; border-radius:0 8px 8px 0; font-weight:600; margin:0 0 24px; }
.bild.schmal { max-width:360px; margin-left:auto; margin-right:auto; }
section.cta { background:var(--karte); border:1px solid var(--rand); border-radius:12px; padding:24px; margin:16px 0 40px; }
section.cta p { margin:0 0 14px; }
.hero-geteilt { display:flex; flex-wrap:wrap; align-items:center; gap:24px 40px; }
.hero-geteilt .hero-text { flex:1 1 360px; min-width:0; }
.logo-anim { flex:0 1 360px; margin:0 auto; padding:0; border:0; background:none; cursor:pointer; line-height:0; border-radius:16px; }
.logo-anim img { width:100%; max-width:360px; height:auto; }
.logo-anim:focus-visible { outline:2px solid var(--akzent); outline-offset:4px; }
.symbol { display:inline-grid; place-items:center; width:56px; height:56px; border-radius:14px; margin-bottom:12px;
          background:linear-gradient(135deg,#4f9bff,#1d4ed8); color:#fff; box-shadow:0 4px 12px rgba(29,78,216,.28); }
.symbol.gross { width:64px; height:64px; border-radius:16px; margin:0; flex:0 0 auto; }
.symbol.gross svg { width:40px; height:40px; }
a.karte:hover .symbol { transform:scale(1.06) rotate(-3deg); }
.symbol { transition:transform .15s; }
.kopf { display:flex; align-items:center; gap:16px; margin:0 0 16px; }
.kopf h1 { margin:0; }
@media (prefers-reduced-motion: reduce) { .symbol, a.karte { transition:none; } a.karte:hover .symbol, a.karte:hover { transform:none; } }

.ablauf-wrap { margin:8px 0 24px; }
.ablauf { width:100%; height:auto; display:block; }
.ablauf-hoch { display:none; max-width:420px; margin:0 auto; }
@media (max-width:700px) { .ablauf-breit { display:none; } .ablauf-hoch { display:block; } }
.ablauf .kasten { fill:var(--karte); stroke:var(--rand); stroke-width:1.5; }
.ablauf .gw { fill:var(--akzent); stroke:none; }
.ablauf .wolke { fill:var(--karte); stroke:var(--akzent); stroke-width:1.6; }
.ablauf .chip { fill:rgba(255,255,255,.18); stroke:rgba(255,255,255,.45); stroke-width:1; }
.ablauf .ik { fill:none; stroke:var(--akzent); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; color:var(--akzent); }
.ablauf .ik.w { stroke:var(--akzent-text); }
.ablauf text { fill:var(--text); font:13px/1.2 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
.ablauf .tk { font-weight:700; fill:var(--gedaempft); font-size:13px; letter-spacing:.02em; }
.ablauf .tl { font-weight:600; font-size:14px; }
.ablauf .ts { fill:var(--gedaempft); font-size:12px; }
.ablauf .tn { font-weight:600; font-size:12.5px; fill:var(--akzent); }
.ablauf .tg { font-weight:700; font-size:16px; fill:var(--akzent-text); }
.ablauf .tc { font-size:12.5px; font-weight:600; fill:var(--akzent-text); }
.ablauf .tw { font-size:13px; fill:var(--akzent-text); }
.ablauf .tw2 { font-size:12px; fill:var(--akzent-text); opacity:.85; }
.ablauf .pfeil { fill:none; stroke:var(--gedaempft); stroke-width:2; stroke-linecap:round; }
.ablauf .pfeil.punkt { stroke-dasharray:2 6; }
.ablauf .schleife { fill:none; stroke:var(--akzent); stroke-width:3; stroke-linecap:round; stroke-dasharray:9 7; animation:fliessen 1.1s linear infinite; }
.ablauf .schleife.rueck { animation-duration:1.1s; }
.ablauf .spitze { fill:var(--gedaempft); } .ablauf .spitze2 { fill:var(--akzent); }
@keyframes fliessen { to { stroke-dashoffset:-32; } }
@media (prefers-reduced-motion: reduce) { .ablauf .schleife { animation:none; } }
video { display:block; width:100%; height:auto; border:1px solid var(--rand); border-radius:10px; background:var(--karte); }
main.text { overflow-wrap:anywhere; }
main.text h1 { font-size:clamp(1.5rem,7vw,2rem); line-height:1.25; }