@font-face{font-family:"Inter";src:url(/s/schriften/inter-var.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url(/s/schriften/space-grotesk-var.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/s/schriften/jetbrains-mono-var.woff2) format("woff2");font-weight:100 800;font-display:swap}
:root{
  color-scheme:dark;
  --farbe-grund:#07080d; --farbe-grund-2:#0c0e16; --farbe-flaeche:#11141e; --farbe-flaeche-2:#181c29; --farbe-flaeche-3:#222738;
  --farbe-glas:rgba(17,20,30,.66); --farbe-glas-rand:rgba(255,255,255,.08);
  --farbe-text:#eef1f8; --farbe-text-leise:#9aa2b6; --farbe-text-fein:#7a8197; --farbe-linie:#232839; --farbe-linie-stark:#363d55;
  --farbe-akzent:#8b6cff; --farbe-akzent-2:#22d3ee; --farbe-akzent-3:#f472b6; --farbe-akzent-text:#ffffff; --farbe-ueber:#5fe3f5;
  --farbe-fehler:#ff6b7d; --farbe-ok:#34d399; --farbe-warn:#fbbf24;
  --farbe-fehler-flaeche:rgba(255,107,125,.1); --farbe-ok-flaeche:rgba(52,211,153,.1); --farbe-akzent-flaeche:rgba(139,108,255,.12);
  --farbe-glut-1:rgba(124,92,255,.5); --farbe-glut-2:rgba(34,211,238,.3); --farbe-glut-3:rgba(244,114,182,.22);
  --farbe-punkt:rgba(170,180,255,.5); --farbe-schleier:rgba(9,10,16,.82); --maske:#000;
  --farbe-konsole:#0a0c14; --farbe-konsole-text:#d6dcef; --farbe-konsole-leise:#6c7491; --farbe-konsole-rand:rgba(255,255,255,.09);
  --verlauf-marke:linear-gradient(115deg,var(--farbe-akzent) 0%,var(--farbe-akzent-2) 55%,var(--farbe-akzent-3) 100%);
  --verlauf-marke-weit:linear-gradient(115deg,var(--farbe-akzent),var(--farbe-akzent-2),var(--farbe-akzent-3),var(--farbe-akzent));
  --abstand-1:.25rem; --abstand-2:.5rem; --abstand-3:1rem; --abstand-4:1.5rem; --abstand-5:2.5rem; --abstand-6:4rem; --abstand-7:7rem;
  --radius-1:.5rem; --radius-2:.875rem; --radius-3:1.5rem; --radius-4:2rem; --radius-voll:999px;
  --schrift-text:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --schrift-titel:"Space Grotesk","Inter",system-ui,sans-serif;
  --schrift-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --schrift-gr-0:.75rem; --schrift-gr-1:.875rem; --schrift-gr-2:1rem; --schrift-gr-3:1.25rem; --schrift-gr-4:clamp(1.6rem,3.2vw,2.5rem);
  --schrift-gr-5:clamp(2.6rem,5.6vw,4.75rem); --schrift-gr-preis:clamp(2.5rem,5vw,3.5rem); --schrift-gr-riesig:clamp(7rem,24vw,16rem);
  --zeile-eng:1.02; --zeile-titel:1.15; --zeile-text:1.6; --sperrung-titel:-.035em; --sperrung-weit:.14em;
  --schatten-1:0 .5rem 2rem rgba(0,0,0,.45); --schatten-2:0 1.5rem 4rem rgba(0,0,0,.55); --schatten-glut:0 0 3rem rgba(124,92,255,.35);
  --dauer-1:.18s; --dauer-2:.45s; --dauer-3:.9s; --dauer-4:1.6s; --dauer-schleife:28s; --dauer-glanz:8s; --kurve:cubic-bezier(.2,.8,.2,1);
  --breite-inhalt:76rem; --breite-text:42rem; --breite-schmal:28rem; --linie:1px; --linie-2:2px; --kopf-hoehe:4.25rem; --ziel-min:2.75rem;
  --unschaerfe:18px; --kippen:6deg;
}
:root[data-thema="hell"]{
  color-scheme:light;
  --farbe-grund:#f6f6fb; --farbe-grund-2:#eceef6; --farbe-flaeche:#ffffff; --farbe-flaeche-2:#f1f2f8; --farbe-flaeche-3:#e4e6f0;
  --farbe-glas:rgba(255,255,255,.72); --farbe-glas-rand:rgba(20,24,60,.1);
  --farbe-text:#0d1020; --farbe-text-leise:#4c5368; --farbe-text-fein:#646a7f; --farbe-linie:#dfe2ee; --farbe-linie-stark:#c6cad9;
  --farbe-akzent:#5b3df5; --farbe-akzent-2:#0e7490; --farbe-akzent-3:#be185d; --farbe-ueber:#0e7490;
  --farbe-fehler:#c8263f; --farbe-ok:#0b7a53; --farbe-warn:#a16207;
  --farbe-fehler-flaeche:rgba(200,38,63,.08); --farbe-ok-flaeche:rgba(11,122,83,.08); --farbe-akzent-flaeche:rgba(91,61,245,.08);
  --farbe-glut-1:rgba(91,61,245,.2); --farbe-glut-2:rgba(14,116,144,.16); --farbe-glut-3:rgba(190,24,93,.12);
  --farbe-punkt:rgba(70,60,180,.38); --farbe-schleier:rgba(246,246,251,.86);
  --schatten-1:0 .5rem 2rem rgba(30,30,80,.1); --schatten-2:0 1.5rem 4rem rgba(30,30,80,.16); --schatten-glut:0 .75rem 2.5rem rgba(91,61,245,.28);
}
@media (prefers-reduced-motion:reduce){:root{--dauer-1:0s;--dauer-2:0s;--dauer-3:0s;--dauer-4:0s;--dauer-schleife:0s;--dauer-glanz:0s;--kippen:0deg}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--kopf-hoehe) + var(--abstand-4))}
body{margin:0;min-height:100vh;background:var(--farbe-grund);color:var(--farbe-text);font:var(--schrift-gr-2)/var(--zeile-text) var(--schrift-text);overflow-x:hidden;position:relative;transition:background-color var(--dauer-2),color var(--dauer-2)}
a{color:inherit}
[hidden]{display:none !important}
:focus-visible{outline:var(--linie-2) solid var(--farbe-akzent-2);outline-offset:var(--abstand-1);border-radius:var(--radius-1)}
::selection{background:var(--farbe-akzent);color:var(--farbe-akzent-text)}
.huelle{max-width:var(--breite-inhalt);margin:0 auto;padding:0 var(--abstand-4)}
main{display:block;outline:none}
.verlauf{background:var(--verlauf-marke-weit);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:glanz var(--dauer-glanz) linear infinite}
@keyframes glanz{to{background-position:300% 0}}
.ueber{display:inline-block;font:600 var(--schrift-gr-0) var(--schrift-mono);text-transform:uppercase;letter-spacing:var(--sperrung-weit);color:var(--farbe-ueber)}
.lead{max-width:var(--breite-text);font-size:var(--schrift-gr-3);color:var(--farbe-text-leise);margin:0}
.ico{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ico .logo-voll{fill:currentColor;stroke:none;fill-rule:evenodd}.ico .logo-dunkel{fill:var(--farbe-konsole);stroke:none}.ico .logo-cyan{fill:var(--farbe-akzent-2);stroke:none}
.sprung{position:absolute;left:var(--abstand-3);top:calc(-1 * var(--abstand-6));z-index:30;padding:var(--abstand-2) var(--abstand-3);border-radius:var(--radius-1);background:var(--farbe-text);color:var(--farbe-grund);text-decoration:none;font-weight:600}
.sprung:focus{top:var(--abstand-3)}

.glut{position:absolute;inset:0 0 auto 0;height:min(140vh,70rem);max-height:100%;z-index:-1;pointer-events:none;background:
 radial-gradient(42rem 30rem at 10% -8%,var(--farbe-glut-1),transparent 70%),
 radial-gradient(38rem 28rem at 92% 4%,var(--farbe-glut-2),transparent 70%),
 radial-gradient(30rem 24rem at 55% 55%,var(--farbe-glut-3),transparent 70%);
 -webkit-mask-image:linear-gradient(var(--maske) 55%,transparent);mask-image:linear-gradient(var(--maske) 55%,transparent)}
.fortschritt{position:fixed;inset:0 0 auto 0;height:var(--linie-2);z-index:25;background:var(--verlauf-marke);transform-origin:0 50%;transform:scaleX(var(--gelesen,0));pointer-events:none}

.knopf{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--abstand-2);min-height:var(--ziel-min);padding:var(--abstand-2) var(--abstand-4);border-radius:var(--radius-voll);border:var(--linie) solid var(--farbe-linie-stark);background:var(--farbe-flaeche);color:var(--farbe-text);font:600 var(--schrift-gr-1) var(--schrift-text);text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform var(--dauer-1) var(--kurve),box-shadow var(--dauer-2),border-color var(--dauer-1),background-color var(--dauer-1)}
.knopf:hover{transform:translateY(calc(-1 * var(--abstand-1) / 2));border-color:var(--farbe-akzent)}
.knopf:active{transform:translateY(0)}
.knopf.gross{min-height:calc(var(--ziel-min) + var(--abstand-2));padding:var(--abstand-3) var(--abstand-5);font-size:var(--schrift-gr-2)}
.knopf.klein{min-height:calc(var(--ziel-min) - var(--abstand-2));padding:var(--abstand-1) var(--abstand-3)}
.knopf.breit{width:100%}
.knopf.primaer{border-color:transparent;background:var(--verlauf-marke-weit);background-size:200% 100%;color:var(--farbe-akzent-text);box-shadow:var(--schatten-glut);transition:background-position var(--dauer-3) var(--kurve),transform var(--dauer-1) var(--kurve),box-shadow var(--dauer-2)}
.knopf.primaer:hover{background-position:100% 0}
.knopf[disabled],.knopf[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.knopf .pfeil{transition:transform var(--dauer-2) var(--kurve)}
.knopf:hover .pfeil{transform:translateX(var(--abstand-1))}
.reihe{display:flex;flex-wrap:wrap;gap:var(--abstand-3);align-items:center}
.rund{position:relative;display:grid;place-items:center;width:var(--ziel-min);height:var(--ziel-min);border-radius:var(--radius-voll);border:var(--linie) solid var(--farbe-linie);background:var(--farbe-flaeche);color:var(--farbe-text);cursor:pointer;text-decoration:none;transition:border-color var(--dauer-1),transform var(--dauer-2) var(--kurve)}
.rund:hover{border-color:var(--farbe-akzent)}
.rund .ico{width:1.15rem;height:1.15rem}

.kopf{position:sticky;top:0;z-index:20;height:var(--kopf-hoehe);border-bottom:var(--linie) solid var(--farbe-glas-rand);isolation:isolate}
.kopf::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--farbe-glas);-webkit-backdrop-filter:blur(var(--unschaerfe)) saturate(1.5);backdrop-filter:blur(var(--unschaerfe)) saturate(1.5)}
.kopf>.huelle{display:flex;align-items:center;gap:var(--abstand-4);height:100%}
.marke{display:inline-flex;align-items:center;gap:var(--abstand-2);font:700 var(--schrift-gr-3) var(--schrift-titel);letter-spacing:var(--sperrung-titel);text-decoration:none;color:var(--farbe-text)}
.zeichen{width:calc(var(--abstand-5) - var(--abstand-1));height:calc(var(--abstand-5) - var(--abstand-1));background:var(--verlauf-marke);-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20width%3D%2232%22%20height%3D%2232%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M16.46%2010.47L22.84%2021.53L26.54%2021.53L20.16%2010.47ZM23%2023.93L9%2023.93L9%2027.13L23%2027.13ZM9.16%2021.53L15.54%2010.47L11.84%2010.47L5.46%2021.53Z%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%20d%3D%22M11.2%203.67A2%202%200%200%201%2013.2%201.67L18.8%201.67A2%202%200%200%201%2020.8%203.67L20.8%209.27A2%202%200%200%201%2018.8%2011.27L13.2%2011.27A2%202%200%200%201%2011.2%209.27ZM13%206.47A0.55%200.55%200%200%201%2013.55%205.92L18.45%205.92A0.55%200.55%200%200%201%2019%206.47L19%206.47A0.55%200.55%200%200%201%2018.45%207.02L13.55%207.02A0.55%200.55%200%200%201%2013%206.47ZM13%204.07A0.8%200.8%200%201%201%2014.6%204.07A0.8%200.8%200%201%201%2013%204.07ZM13%208.87A0.8%200.8%200%201%201%2014.6%208.87A0.8%200.8%200%201%201%2013%208.87ZM22.2%2022.73A2%202%200%200%201%2024.2%2020.73L29.8%2020.73A2%202%200%200%201%2031.8%2022.73L31.8%2028.33A2%202%200%200%201%2029.8%2030.33L24.2%2030.33A2%202%200%200%201%2022.2%2028.33ZM24%2025.53A0.55%200.55%200%200%201%2024.55%2024.98L29.45%2024.98A0.55%200.55%200%200%201%2030%2025.53L30%2025.53A0.55%200.55%200%200%201%2029.45%2026.08L24.55%2026.08A0.55%200.55%200%200%201%2024%2025.53ZM24%2023.13A0.8%200.8%200%201%201%2025.6%2023.13A0.8%200.8%200%201%201%2024%2023.13ZM24%2027.93A0.8%200.8%200%201%201%2025.6%2027.93A0.8%200.8%200%201%201%2024%2027.93ZM0.2%2022.73A2%202%200%200%201%202.2%2020.73L7.8%2020.73A2%202%200%200%201%209.8%2022.73L9.8%2028.33A2%202%200%200%201%207.8%2030.33L2.2%2030.33A2%202%200%200%201%200.2%2028.33ZM2%2025.53A0.55%200.55%200%200%201%202.55%2024.98L7.45%2024.98A0.55%200.55%200%200%201%208%2025.53L8%2025.53A0.55%200.55%200%200%201%207.45%2026.08L2.55%2026.08A0.55%200.55%200%200%201%202%2025.53ZM2%2023.13A0.8%200.8%200%201%201%203.6%2023.13A0.8%200.8%200%201%201%202%2023.13ZM2%2027.93A0.8%200.8%200%201%201%203.6%2027.93A0.8%200.8%200%201%201%202%2027.93Z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20width%3D%2232%22%20height%3D%2232%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M16.46%2010.47L22.84%2021.53L26.54%2021.53L20.16%2010.47ZM23%2023.93L9%2023.93L9%2027.13L23%2027.13ZM9.16%2021.53L15.54%2010.47L11.84%2010.47L5.46%2021.53Z%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%20d%3D%22M11.2%203.67A2%202%200%200%201%2013.2%201.67L18.8%201.67A2%202%200%200%201%2020.8%203.67L20.8%209.27A2%202%200%200%201%2018.8%2011.27L13.2%2011.27A2%202%200%200%201%2011.2%209.27ZM13%206.47A0.55%200.55%200%200%201%2013.55%205.92L18.45%205.92A0.55%200.55%200%200%201%2019%206.47L19%206.47A0.55%200.55%200%200%201%2018.45%207.02L13.55%207.02A0.55%200.55%200%200%201%2013%206.47ZM13%204.07A0.8%200.8%200%201%201%2014.6%204.07A0.8%200.8%200%201%201%2013%204.07ZM13%208.87A0.8%200.8%200%201%201%2014.6%208.87A0.8%200.8%200%201%201%2013%208.87ZM22.2%2022.73A2%202%200%200%201%2024.2%2020.73L29.8%2020.73A2%202%200%200%201%2031.8%2022.73L31.8%2028.33A2%202%200%200%201%2029.8%2030.33L24.2%2030.33A2%202%200%200%201%2022.2%2028.33ZM24%2025.53A0.55%200.55%200%200%201%2024.55%2024.98L29.45%2024.98A0.55%200.55%200%200%201%2030%2025.53L30%2025.53A0.55%200.55%200%200%201%2029.45%2026.08L24.55%2026.08A0.55%200.55%200%200%201%2024%2025.53ZM24%2023.13A0.8%200.8%200%201%201%2025.6%2023.13A0.8%200.8%200%201%201%2024%2023.13ZM24%2027.93A0.8%200.8%200%201%201%2025.6%2027.93A0.8%200.8%200%201%201%2024%2027.93ZM0.2%2022.73A2%202%200%200%201%202.2%2020.73L7.8%2020.73A2%202%200%200%201%209.8%2022.73L9.8%2028.33A2%202%200%200%201%207.8%2030.33L2.2%2030.33A2%202%200%200%201%200.2%2028.33ZM2%2025.53A0.55%200.55%200%200%201%202.55%2024.98L7.45%2024.98A0.55%200.55%200%200%201%208%2025.53L8%2025.53A0.55%200.55%200%200%201%207.45%2026.08L2.55%2026.08A0.55%200.55%200%200%201%202%2025.53ZM2%2023.13A0.8%200.8%200%201%201%203.6%2023.13A0.8%200.8%200%201%201%202%2023.13ZM2%2027.93A0.8%200.8%200%201%201%203.6%2027.93A0.8%200.8%200%201%201%202%2027.93Z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat}
.menue{display:flex;align-items:center;gap:var(--abstand-1);margin-left:var(--abstand-4)}
.menue>a,.mega-ziel{display:inline-flex;align-items:center;min-height:var(--ziel-min);padding:0 var(--abstand-3);border-radius:var(--radius-voll);font-size:var(--schrift-gr-1);font-weight:500;color:var(--farbe-text-leise);text-decoration:none;transition:color var(--dauer-1),background-color var(--dauer-1)}
.menue>a:hover,.menue>a[aria-current],.mega-ziel:hover,.mega-ziel[aria-current],.mega:focus-within .mega-ziel{color:var(--farbe-text);background:var(--farbe-flaeche-2)}
.mega{position:relative}
.mega-ziel::after{content:"";width:var(--abstand-2);height:var(--abstand-2);margin-left:var(--abstand-2);border-right:var(--linie-2) solid currentColor;border-bottom:var(--linie-2) solid currentColor;transform:translateY(-25%) rotate(45deg);transition:transform var(--dauer-2) var(--kurve)}
.mega:hover .mega-ziel::after,.mega:focus-within .mega-ziel::after{transform:translateY(25%) rotate(225deg)}
.mega-feld{position:absolute;top:calc(100% + var(--abstand-2));left:calc(-1 * var(--abstand-3));width:max-content;display:grid;grid-template-columns:repeat(2,minmax(0,16rem));gap:var(--abstand-1);padding:var(--abstand-2);border-radius:var(--radius-3);background:var(--farbe-flaeche);border:var(--linie) solid var(--farbe-linie);box-shadow:var(--schatten-2);opacity:0;visibility:hidden;transform:translateY(calc(-1 * var(--abstand-2)));transition:opacity var(--dauer-1),transform var(--dauer-2) var(--kurve),visibility var(--dauer-1)}
.mega-feld::before{content:"";position:absolute;inset:calc(-1 * var(--abstand-3)) 0 auto 0;height:var(--abstand-3)}
.mega:hover .mega-feld,.mega:focus-within .mega-feld{opacity:1;visibility:visible;transform:none}
.mega-feld a{display:flex;gap:var(--abstand-3);align-items:flex-start;padding:var(--abstand-3);border-radius:var(--radius-2);text-decoration:none;transition:background-color var(--dauer-1)}
.mega-feld a:hover,.mega-feld a[aria-current]{background:var(--farbe-flaeche-2)}
.mega-feld b{display:block;font-size:var(--schrift-gr-1)}
.mega-feld small{display:block;font-size:var(--schrift-gr-0);color:var(--farbe-text-leise)}
.werkzeug{display:flex;align-items:center;gap:var(--abstand-2);margin-left:auto}
.sprache{display:flex;align-items:center;height:var(--ziel-min);padding:var(--abstand-1);border:var(--linie) solid var(--farbe-linie);border-radius:var(--radius-voll);font:600 var(--schrift-gr-0) var(--schrift-mono)}
.sprache a,.sprache span{display:grid;place-items:center;height:100%;padding:0 var(--abstand-2);border-radius:var(--radius-voll);text-decoration:none;color:var(--farbe-text-leise)}
.sprache span{background:var(--farbe-text);color:var(--farbe-grund)}
.sprache a:hover{color:var(--farbe-text)}
#thema .thema-mond,[data-thema="hell"] #thema .thema-sonne{display:none}
[data-thema="hell"] #thema .thema-mond{display:block}
#thema:hover .ico{transform:rotate(25deg)}
#thema .ico{transition:transform var(--dauer-2) var(--kurve)}
.korb b{position:absolute;top:calc(-1 * var(--abstand-1));right:calc(-1 * var(--abstand-1));min-width:var(--abstand-4);height:var(--abstand-4);padding:0 var(--abstand-1);border-radius:var(--radius-voll);background:var(--verlauf-marke);color:var(--farbe-akzent-text);font:700 var(--schrift-gr-0)/var(--abstand-4) var(--schrift-mono);text-align:center}
.korb.hupf b{animation:hupf var(--dauer-3) var(--kurve)}
@keyframes hupf{30%{transform:scale(1.5)}}
.konto-knopf.an{border-color:var(--farbe-ok)}
.konto-knopf.an::before{content:"";width:var(--abstand-2);height:var(--abstand-2);border-radius:var(--radius-voll);background:var(--farbe-ok)}
#menueknopf{display:none}
.burger,.burger::before,.burger::after{display:block;width:var(--abstand-4);height:var(--linie-2);border-radius:var(--radius-voll);background:currentColor;transition:transform var(--dauer-2) var(--kurve),opacity var(--dauer-1)}
.burger{position:relative}
.burger::before,.burger::after{content:"";position:absolute;left:0}
.burger::before{top:calc(-1 * var(--abstand-2))}
.burger::after{top:var(--abstand-2)}
[aria-expanded="true"] .burger{background:transparent}
[aria-expanded="true"] .burger::before{transform:translateY(var(--abstand-2)) rotate(45deg)}
[aria-expanded="true"] .burger::after{transform:translateY(calc(-1 * var(--abstand-2))) rotate(-45deg)}

.fuss{margin-top:var(--abstand-7);border-top:var(--linie) solid var(--farbe-linie);background:var(--farbe-grund-2);font-size:var(--schrift-gr-1);color:var(--farbe-text-leise)}
.fuss-raster{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:var(--abstand-5);padding-top:var(--abstand-6);padding-bottom:var(--abstand-5)}
.fuss h2{margin:0 0 var(--abstand-3);font:600 var(--schrift-gr-0) var(--schrift-mono);text-transform:uppercase;letter-spacing:var(--sperrung-weit);color:var(--farbe-text-fein)}
.fuss-raster>div{display:flex;flex-direction:column;align-items:flex-start;gap:var(--abstand-2)}
.fuss a{color:var(--farbe-text-leise);text-decoration:none;transition:color var(--dauer-1)}
.fuss a:hover{color:var(--farbe-text)}
.fuss-marke p{max-width:var(--breite-schmal);margin:var(--abstand-2) 0}
.fuss-zeile{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--abstand-3);padding-top:var(--abstand-4);padding-bottom:var(--abstand-5);border-top:var(--linie) solid var(--farbe-linie);color:var(--farbe-text-fein)}

.toast{white-space:nowrap;position:fixed;left:50%;bottom:var(--abstand-5);z-index:40;display:flex;align-items:center;gap:var(--abstand-3);max-width:calc(100vw - 2 * var(--abstand-4));padding:var(--abstand-3) var(--abstand-4);border-radius:var(--radius-voll);background:var(--farbe-text);color:var(--farbe-grund);box-shadow:var(--schatten-2);font-weight:600;transform:translate(-50%,0);animation:toast var(--dauer-2) var(--kurve)}
.toast a{color:inherit}
@keyframes toast{from{opacity:0;transform:translate(-50%,var(--abstand-4))}}

[data-zeige]{opacity:0;transform:translateY(var(--abstand-5));transition:opacity var(--dauer-3) var(--kurve),transform var(--dauer-3) var(--kurve)}
[data-zeige].da,.ohne-js [data-zeige]{opacity:1;transform:none}

.menue-extra{display:none}

body[data-seite="start"] .held{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--abstand-6);align-items:center;min-height:0;padding:var(--abstand-4) 0;isolation:isolate}
#feld{position:absolute;inset:0;width:100%;height:100%;z-index:-1;-webkit-mask-image:radial-gradient(ellipse 70% 65% at 60% 45%,var(--maske) 20%,transparent 75%);mask-image:radial-gradient(ellipse 70% 65% at 60% 45%,var(--maske) 20%,transparent 75%)}
.etikett{display:inline-flex;align-items:center;gap:var(--abstand-2);padding:var(--abstand-1) var(--abstand-3);border:var(--linie) solid var(--farbe-glas-rand);border-radius:var(--radius-voll);background:var(--farbe-glas);font:500 var(--schrift-gr-0) var(--schrift-mono);color:var(--farbe-text-leise);text-transform:uppercase;letter-spacing:var(--sperrung-weit)}
.etikett i{width:var(--abstand-2);height:var(--abstand-2);border-radius:var(--radius-voll);background:var(--farbe-ok);box-shadow:0 0 var(--abstand-3) var(--farbe-ok);animation:puls var(--dauer-4) ease-in-out infinite alternate}
@keyframes puls{to{opacity:.3}}
body[data-seite="start"] .held h1{margin:var(--abstand-2) 0;font:700 var(--schrift-gr-3)/var(--zeile-eng) var(--schrift-titel);letter-spacing:var(--sperrung-titel)}
.held h1 .zeile{display:block}
.held h1 .wort{display:inline-block;padding-bottom:.08em}
.held h1 .wort span{display:inline-block;background:var(--verlauf-marke-weit);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:wortrein var(--dauer-3) var(--kurve) both,glanz var(--dauer-glanz) linear infinite}
@keyframes wortrein{from{opacity:0;transform:translateY(.35em) rotateX(-40deg);filter:blur(var(--abstand-1))}}
.held .lead{margin-bottom:var(--abstand-5)}
body[data-seite="start"] .zahlen{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:var(--abstand-5);margin:var(--abstand-4) 0 0;padding-top:var(--abstand-4);border-top:var(--linie) solid var(--farbe-linie)}
.zahlen div{display:flex;flex-direction:column-reverse}
.zahlen dt{font-size:var(--schrift-gr-1);color:var(--farbe-text-leise)}
.zahlen dd{margin:0;font:700 var(--schrift-gr-4)/1.1 var(--schrift-titel);letter-spacing:var(--sperrung-titel);font-variant-numeric:tabular-nums}

.konsole{--rx:0deg;--ry:0deg;position:relative;margin:0;padding:0 0 var(--abstand-3);border-radius:var(--radius-3);background:var(--farbe-konsole);color:var(--farbe-konsole-text);border:var(--linie) solid var(--farbe-konsole-rand);box-shadow:var(--schatten-2),var(--schatten-glut);transform:perspective(60rem) rotateX(var(--rx)) rotateY(var(--ry));transition:transform var(--dauer-2) var(--kurve);overflow:hidden}
.konsole::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:var(--linie);background:var(--verlauf-marke);-webkit-mask:linear-gradient(var(--maske) 0 0) content-box,linear-gradient(var(--maske) 0 0);-webkit-mask-composite:xor;mask:linear-gradient(var(--maske) 0 0) content-box exclude,linear-gradient(var(--maske) 0 0);opacity:.55;pointer-events:none}
.konsole-kopf{display:flex;align-items:center;gap:var(--abstand-2);padding:var(--abstand-3) var(--abstand-4);border-bottom:var(--linie) solid var(--farbe-konsole-rand);font:500 var(--schrift-gr-0) var(--schrift-mono);color:var(--farbe-konsole-leise)}
.konsole-kopf i{width:var(--abstand-2);height:var(--abstand-2);border-radius:var(--radius-voll);background:var(--farbe-konsole-rand)}
.konsole-kopf i:first-child{background:var(--farbe-fehler)}
.konsole-kopf i:nth-child(2){background:var(--farbe-warn)}
.konsole-kopf i:nth-child(3){background:var(--farbe-ok)}
.konsole-kopf span{margin-left:var(--abstand-2)}
.live{margin-left:auto;display:inline-flex;align-items:center;gap:var(--abstand-1);color:var(--farbe-ok);font-weight:600}
.live::before{content:"";width:var(--abstand-2);height:var(--abstand-2);border-radius:var(--radius-voll);background:currentColor;animation:puls var(--dauer-3) ease-in-out infinite alternate}
.konsole-zeilen{list-style:none;margin:0;padding:var(--abstand-4);display:grid;gap:var(--abstand-2);min-height:14rem;font:var(--schrift-gr-1)/1.5 var(--schrift-mono)}
.konsole-zeilen li{color:var(--farbe-konsole-leise);opacity:0;animation:zeile var(--dauer-2) var(--kurve) forwards}
.konsole-zeilen li.befehl{color:var(--farbe-konsole-text)}
.konsole-zeilen li.ok{color:var(--farbe-ok);font-weight:600}
.konsole-zeilen li:nth-child(1){animation-delay:calc(var(--dauer-3) * 1)}
.konsole-zeilen li:nth-child(2){animation-delay:calc(var(--dauer-3) * 2)}
.konsole-zeilen li:nth-child(3){animation-delay:calc(var(--dauer-3) * 3)}
.konsole-zeilen li:nth-child(4){animation-delay:calc(var(--dauer-3) * 4)}
.konsole-zeilen li:nth-child(5){animation-delay:calc(var(--dauer-3) * 5)}
.konsole-zeilen li:nth-child(6){animation-delay:calc(var(--dauer-3) * 6)}
@keyframes zeile{from{opacity:0;transform:translateX(calc(-1 * var(--abstand-2)))}to{opacity:1;transform:none}}
.konsole-werte{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--abstand-3);padding:0 var(--abstand-4)}
.konsole-werte div{display:grid;gap:var(--abstand-1);padding:var(--abstand-3);border-radius:var(--radius-2);background:var(--farbe-konsole-rand)}
.konsole-werte span{font:var(--schrift-gr-0) var(--schrift-mono);color:var(--farbe-konsole-leise);text-transform:uppercase;letter-spacing:var(--sperrung-weit)}
.konsole-werte b{font:600 var(--schrift-gr-1) var(--schrift-mono);font-variant-numeric:tabular-nums}
.balken{display:block;height:var(--abstand-1);border-radius:var(--radius-voll);background:var(--farbe-konsole-rand);overflow:hidden}
.balken i{display:block;height:100%;width:var(--w,50%);border-radius:inherit;background:var(--verlauf-marke);transition:width var(--dauer-3) var(--kurve)}
.kurve{display:block;width:calc(100% - 2 * var(--abstand-4));height:var(--abstand-6);margin:var(--abstand-3) var(--abstand-4) 0}
.kurve path{fill:none;stroke:var(--farbe-akzent-2);stroke-width:var(--linie-2);vector-effect:non-scaling-stroke}
.konsole figcaption{padding:var(--abstand-2) var(--abstand-4) 0;font-size:var(--schrift-gr-0);color:var(--farbe-konsole-leise)}

.band{overflow:hidden;padding:var(--abstand-4) 0;border-block:var(--linie) solid var(--farbe-linie);-webkit-mask-image:linear-gradient(90deg,transparent,var(--maske) 12%,var(--maske) 88%,transparent);mask-image:linear-gradient(90deg,transparent,var(--maske) 12%,var(--maske) 88%,transparent)}
.band div{display:flex;width:max-content;animation:band var(--dauer-schleife) linear infinite}
.band span{display:inline-flex;align-items:center;gap:var(--abstand-5);padding-right:var(--abstand-5);font:500 var(--schrift-gr-3) var(--schrift-titel);color:var(--farbe-text-fein);white-space:nowrap}
.band span::after{content:"";width:var(--abstand-2);height:var(--abstand-2);transform:rotate(45deg);background:var(--farbe-akzent)}
.band:hover div{animation-play-state:paused}
@keyframes band{to{transform:translateX(-50%)}}

.abschnitt{padding:var(--abstand-7) 0 0}
.abschnitt.klein{padding-top:var(--abstand-6)}
.abschnitt-kopf{display:grid;gap:var(--abstand-2);margin-bottom:var(--abstand-5)}
.abschnitt-kopf h2,.unter{margin:0;font:700 var(--schrift-gr-4)/var(--zeile-titel) var(--schrift-titel);letter-spacing:var(--sperrung-titel)}
.unter{margin-bottom:var(--abstand-4)}
.seitenkopf{display:grid;gap:var(--abstand-3);padding:var(--abstand-6) 0 var(--abstand-5)}
.titel{margin:0;font:700 var(--schrift-gr-5)/var(--zeile-eng) var(--schrift-titel);letter-spacing:var(--sperrung-titel);max-width:18ch}

.raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--abstand-3)}
.raster.vier{grid-template-columns:repeat(4,minmax(0,1fr))}
body[data-seite="start"] .raster.zwei{grid-template-columns:repeat(2,minmax(0,1fr))}
.raster.bento{grid-template-columns:repeat(4,minmax(0,1fr))}
.raster.bento .gross{grid-column:span 2;grid-row:span 2}
.karte{--mx:50%;--my:50%;--rx:0deg;--ry:0deg;position:relative;display:flex;flex-direction:column;gap:var(--abstand-2);padding:var(--abstand-4);border-radius:var(--radius-3);background:var(--farbe-flaeche);border:var(--linie) solid var(--farbe-linie);text-decoration:none;color:inherit;overflow:hidden;transform:perspective(50rem) rotateX(var(--rx)) rotateY(var(--ry));transition:transform var(--dauer-2) var(--kurve),border-color var(--dauer-2),box-shadow var(--dauer-2)}
.karte::before{content:"";position:absolute;inset:0;background:radial-gradient(22rem circle at var(--mx) var(--my),var(--farbe-glut-1),transparent 45%);opacity:0;transition:opacity var(--dauer-2);pointer-events:none}
.karte:hover{border-color:var(--farbe-linie-stark);box-shadow:var(--schatten-1)}
a.karte:hover{border-color:var(--farbe-akzent)}
.karte:hover::before{opacity:1}
.karte>*{position:relative}
.karte h3{margin:var(--abstand-2) 0 0;font:600 var(--schrift-gr-3)/var(--zeile-titel) var(--schrift-titel);letter-spacing:var(--sperrung-titel)}
.karte p{margin:0;color:var(--farbe-text-leise);flex:1}
.symbol{display:grid;place-items:center;width:calc(var(--abstand-5) + var(--abstand-1));height:calc(var(--abstand-5) + var(--abstand-1));border-radius:var(--radius-2);background:var(--farbe-akzent-flaeche);color:var(--farbe-akzent);border:var(--linie) solid var(--farbe-linie)}
.symbol .ico{width:var(--abstand-4);height:var(--abstand-4)}
.symbol.gross{width:var(--abstand-6);height:var(--abstand-6)}
.symbol.gross .ico{width:var(--abstand-5);height:var(--abstand-5)}
.preis{margin-top:var(--abstand-3);font:600 var(--schrift-gr-2) var(--schrift-mono);color:var(--farbe-text)}
.karte-weg{position:absolute;top:var(--abstand-4);right:var(--abstand-4);display:grid;place-items:center;width:var(--abstand-5);height:var(--abstand-5);border-radius:var(--radius-voll);border:var(--linie) solid var(--farbe-linie);color:var(--farbe-text-leise);transition:transform var(--dauer-2) var(--kurve),background-color var(--dauer-2),color var(--dauer-2)}
a.karte:hover .karte-weg{transform:rotate(-45deg);background:var(--farbe-text);color:var(--farbe-grund)}
.karte.gross{justify-content:flex-end;min-height:22rem;background:radial-gradient(30rem 20rem at 85% 0%,var(--farbe-glut-1),transparent 70%),radial-gradient(25rem 18rem at 0% 100%,var(--farbe-glut-2),transparent 70%),var(--farbe-flaeche)}
.karte.gross h3{font-size:var(--schrift-gr-4)}
.karte.gross p{flex:none;max-width:var(--breite-schmal);font-size:var(--schrift-gr-2)}
.karte.gross .symbol{position:absolute;top:var(--abstand-4);left:var(--abstand-4);width:var(--abstand-6);height:var(--abstand-6)}
.karte.gross .symbol .ico{width:var(--abstand-5);height:var(--abstand-5)}

.schritte{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--abstand-4);counter-reset:s;position:relative}
.schritte::before{content:"";position:absolute;top:calc(var(--abstand-5) / 2 + var(--abstand-1));left:var(--abstand-5);right:var(--abstand-5);height:var(--linie);background:linear-gradient(90deg,var(--farbe-akzent),var(--farbe-akzent-2),var(--farbe-akzent-3));opacity:.5}
.schritte li{position:relative;display:grid;gap:var(--abstand-2);padding-top:var(--abstand-1)}
.schritte .nr{display:grid;place-items:center;width:var(--abstand-5);height:var(--abstand-5);border-radius:var(--radius-voll);background:var(--farbe-grund);border:var(--linie) solid var(--farbe-linie-stark);font:600 var(--schrift-gr-0) var(--schrift-mono);color:var(--farbe-text)}
.schritte h3{margin:var(--abstand-3) 0 0;font:600 var(--schrift-gr-3) var(--schrift-titel)}
.schritte p{margin:0;color:var(--farbe-text-leise);max-width:var(--breite-schmal)}

.cta{position:relative;display:grid;justify-items:center;gap:var(--abstand-3);margin:var(--abstand-7) 0 0;padding:var(--abstand-6) var(--abstand-5);border-radius:var(--radius-4);overflow:hidden;text-align:center;isolation:isolate}
.cta::before{content:"";position:absolute;inset:-60%;z-index:-2;background:conic-gradient(from 0deg,var(--farbe-akzent),var(--farbe-akzent-2),var(--farbe-akzent-3),var(--farbe-akzent));animation:dreh var(--dauer-schleife) linear infinite}
.cta::after{content:"";position:absolute;inset:var(--linie-2);z-index:-1;border-radius:calc(var(--radius-4) - var(--linie-2));background:radial-gradient(40rem 20rem at 50% 120%,var(--farbe-glut-1),transparent 70%),var(--farbe-schleier);-webkit-backdrop-filter:blur(var(--unschaerfe));backdrop-filter:blur(var(--unschaerfe))}
.cta h2{margin:0;font:700 var(--schrift-gr-4)/var(--zeile-titel) var(--schrift-titel);letter-spacing:var(--sperrung-titel)}
.cta p{margin:0 0 var(--abstand-3);color:var(--farbe-text-leise)}
@keyframes dreh{to{transform:rotate(1turn)}}
.band-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--abstand-4);margin-top:var(--abstand-6);padding:var(--abstand-5);border-radius:var(--radius-3);background:radial-gradient(30rem 15rem at 100% 0%,var(--farbe-glut-1),transparent 70%),var(--farbe-flaeche);border:var(--linie) solid var(--farbe-linie)}
.band-cta h2{margin:0 0 var(--abstand-1);font:600 var(--schrift-gr-3) var(--schrift-titel)}
.band-cta p{margin:0;color:var(--farbe-text-leise)}

.raster.bento .breit{grid-column:span 2}
.karte-chips{position:absolute !important;inset:calc(var(--abstand-6) + var(--abstand-5)) var(--abstand-4) auto var(--abstand-4);display:flex;flex-wrap:wrap;gap:var(--abstand-2);pointer-events:none}
.karte-chips i{font-style:normal;padding:var(--abstand-1) var(--abstand-3);border-radius:var(--radius-voll);border:var(--linie) solid var(--farbe-glas-rand);background:var(--farbe-glas);font:500 var(--schrift-gr-1) var(--schrift-titel);color:var(--farbe-text-leise);-webkit-backdrop-filter:blur(var(--unschaerfe));backdrop-filter:blur(var(--unschaerfe));animation:schweben var(--dauer-glanz) ease-in-out infinite alternate}
.karte-chips i:nth-child(2n){animation-delay:calc(var(--dauer-glanz) / -2)}
.karte-chips i:nth-child(3n){animation-delay:calc(var(--dauer-glanz) / -3)}
a.karte:hover .karte-chips i{color:var(--farbe-text);border-color:var(--farbe-linie-stark)}
@keyframes schweben{to{transform:translateY(calc(-1 * var(--abstand-2)))}}

.kopf-symbol{margin-bottom:var(--abstand-2);box-shadow:var(--schatten-glut);background:var(--farbe-flaeche);border-color:var(--farbe-linie-stark)}

.konfig{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:var(--abstand-4);align-items:start}
.rechner,.formkarte{display:grid;gap:var(--abstand-5);padding:var(--abstand-5);border-radius:var(--radius-3);background:var(--farbe-flaeche);border:var(--linie) solid var(--farbe-linie)}
.gruppe{display:grid;gap:var(--abstand-3);margin:0;padding:0;border:0;min-width:0}
.gruppe legend{padding:0;font:600 var(--schrift-gr-0) var(--schrift-mono);text-transform:uppercase;letter-spacing:var(--sperrung-weit);color:var(--farbe-text-leise)}
.gruppe legend{margin-bottom:var(--abstand-3)}
.kacheln{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--abstand-2)}
.kachel,.chip{position:relative;display:block;cursor:pointer}
.kachel input,.chip input,.pruef input{position:absolute;opacity:0;width:var(--linie);height:var(--linie)}
.kachel span{display:grid;gap:var(--abstand-1);min-height:var(--ziel-min);padding:var(--abstand-3) var(--abstand-4);border-radius:var(--radius-2);border:var(--linie) solid var(--farbe-linie);background:var(--farbe-grund-2);transition:border-color var(--dauer-1),background-color var(--dauer-1),box-shadow var(--dauer-2)}
.kachel b{font:600 var(--schrift-gr-2) var(--schrift-titel)}
.kachel small{font-size:var(--schrift-gr-0);color:var(--farbe-text-leise)}
.kachel:hover span,.chip:hover span{border-color:var(--farbe-linie-stark)}
.kachel input:checked+span{border-color:var(--farbe-akzent);background:var(--farbe-akzent-flaeche);box-shadow:inset 0 0 0 var(--linie) var(--farbe-akzent)}
.chips{display:flex;flex-wrap:wrap;gap:var(--abstand-2)}
.chip span{display:inline-flex;align-items:center;gap:var(--abstand-2);min-height:var(--ziel-min);padding:0 var(--abstand-4);border-radius:var(--radius-voll);border:var(--linie) solid var(--farbe-linie);font-size:var(--schrift-gr-1);font-weight:600;transition:all var(--dauer-1)}
.chip em{font-style:normal;font:600 var(--schrift-gr-0) var(--schrift-mono);color:var(--farbe-ok)}
.chip input:checked+span{background:var(--farbe-text);color:var(--farbe-grund);border-color:var(--farbe-text)}
.chip input:checked+span em{color:var(--farbe-grund)}
.kachel input:focus-visible+span,.chip input:focus-visible+span,.pruef input:focus-visible+span::before{outline:var(--linie-2) solid var(--farbe-akzent-2);outline-offset:var(--linie-2)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:var(--abstand-2);margin:var(--abstand-2) 0;border-radius:var(--radius-voll);background:linear-gradient(90deg,var(--farbe-akzent),var(--farbe-akzent-2) var(--anteil,5%),var(--farbe-flaeche-3) var(--anteil,5%));cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:calc(var(--abstand-4) + var(--abstand-1));height:calc(var(--abstand-4) + var(--abstand-1));border-radius:var(--radius-voll);background:var(--farbe-akzent-text);border:var(--abstand-1) solid var(--farbe-akzent);box-shadow:var(--schatten-glut);transition:transform var(--dauer-1)}
input[type=range]::-moz-range-thumb{width:var(--abstand-4);height:var(--abstand-4);border-radius:var(--radius-voll);background:var(--farbe-akzent-text);border:var(--abstand-1) solid var(--farbe-akzent);box-shadow:var(--schatten-glut)}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15)}

.ausgabe{position:sticky;top:calc(var(--kopf-hoehe) + var(--abstand-4));display:grid;gap:var(--abstand-3);padding:var(--abstand-5);border-radius:var(--radius-3);background:var(--farbe-flaeche);border:var(--linie) solid var(--farbe-linie);box-shadow:var(--schatten-1);overflow:hidden;isolation:isolate}
.ausgabe::before{content:"";position:absolute;inset:auto -30% -50% -30%;height:70%;z-index:-1;background:var(--verlauf-marke);filter:blur(var(--abstand-6));opacity:.18}
.summe{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--abstand-2)}
.summe b{font:700 var(--schrift-gr-preis)/1 var(--schrift-titel);letter-spacing:var(--sperrung-titel);font-variant-numeric:tabular-nums}
.summe span{color:var(--farbe-text-leise)}
.posten{display:grid;gap:var(--abstand-1);padding:var(--abstand-3) 0;border-block:var(--linie) dashed var(--farbe-linie-stark);font:var(--schrift-gr-1) var(--schrift-mono);color:var(--farbe-text-leise)}
.posten div{display:flex;justify-content:space-between;gap:var(--abstand-3)}
.posten .minus{color:var(--farbe-ok)}
.hinweis{font-size:var(--schrift-gr-0);color:var(--farbe-text-fein)}
.haken{list-style:none;margin:0;padding:0;display:grid;gap:var(--abstand-2)}
.haken li{display:flex;gap:var(--abstand-2);align-items:flex-start;color:var(--farbe-text-leise)}
.haken .ico{margin-top:var(--abstand-1);color:var(--farbe-ok)}

.formular{display:grid;gap:var(--abstand-4)}
.formular fieldset{display:grid;gap:var(--abstand-4);margin:0;padding:0;border:0;min-width:0}
.formular fieldset[disabled]{opacity:.55}
.feld{display:grid;gap:var(--abstand-2);font-size:var(--schrift-gr-1);font-weight:500;color:var(--farbe-text-leise)}
input:not([type=range]):not([type=checkbox]):not([type=radio]),select,textarea{width:100%;min-height:var(--ziel-min);font:inherit;font-size:var(--schrift-gr-2);color:var(--farbe-text);background:var(--farbe-grund-2);border:var(--linie) solid var(--farbe-linie-stark);border-radius:var(--radius-2);padding:var(--abstand-2) var(--abstand-3);transition:border-color var(--dauer-1),box-shadow var(--dauer-1)}
textarea{resize:vertical;min-height:calc(var(--abstand-7) + var(--abstand-5))}
input:not([type=range]):not([type=checkbox]):not([type=radio]):focus,select:focus,textarea:focus{outline:none;border-color:var(--farbe-akzent);box-shadow:0 0 0 var(--abstand-1) var(--farbe-akzent-flaeche)}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--farbe-fehler)}

.status{margin:0;min-height:var(--abstand-4);font-size:var(--schrift-gr-1);color:var(--farbe-text-leise)}
.status:empty{min-height:0}
.rechner>.status:empty{margin-top:calc(-1 * var(--abstand-5))}
.formular>.status:empty,.formular fieldset>.status:empty{margin-top:calc(-1 * var(--abstand-4))}
.status.ok,.status.fehler,.status.hinweis{display:flex;gap:var(--abstand-2);align-items:flex-start;padding:var(--abstand-3);border-radius:var(--radius-2)}
.status.ok{color:var(--farbe-ok);background:var(--farbe-ok-flaeche)}
.status.fehler{color:var(--farbe-fehler);background:var(--farbe-fehler-flaeche)}
.status.hinweis{color:var(--farbe-text-leise);background:var(--farbe-flaeche-2)}
.status.laedt::before{content:"";display:inline-block;flex:none;width:var(--abstand-3);height:var(--abstand-3);margin-right:var(--abstand-2);vertical-align:-.15em;border:var(--linie-2) solid var(--farbe-linie-stark);border-top-color:var(--farbe-akzent);border-radius:var(--radius-voll);animation:dreh var(--dauer-3) linear infinite}
.leer-zustand{display:grid;justify-items:center;gap:var(--abstand-3);padding:var(--abstand-6) var(--abstand-4);border-radius:var(--radius-3);border:var(--linie) dashed var(--farbe-linie-stark);text-align:center}
.leer-zustand h2{margin:0;font:600 var(--schrift-gr-3) var(--schrift-titel)}
.leer-zustand p{margin:0;color:var(--farbe-text-leise)}
.leer-zustand.klein{padding:var(--abstand-4);justify-items:start;text-align:left}
.fehler-zustand{border-color:var(--farbe-fehler);color:var(--farbe-fehler)}
.hinweis-box{display:flex;gap:var(--abstand-3);align-items:flex-start;padding:var(--abstand-3) var(--abstand-4);border-radius:var(--radius-2);background:var(--farbe-akzent-flaeche);border:var(--linie) solid var(--farbe-linie)}
.hinweis-box p{margin:0}
.hinweis-box .ico{margin-top:var(--abstand-1);color:var(--farbe-akzent)}
.pruef{position:relative;display:flex;gap:var(--abstand-3);align-items:flex-start;cursor:pointer;color:var(--farbe-text-leise)}
.pruef span::before{content:"";flex:none;display:inline-grid;place-items:center;width:var(--abstand-4);height:var(--abstand-4);margin-right:var(--abstand-3);vertical-align:-.3em;border-radius:var(--radius-1);border:var(--linie-2) solid var(--farbe-linie-stark);background:var(--farbe-grund-2);transition:all var(--dauer-1)}
.pruef input:checked+span::before{content:"";background:var(--verlauf-marke);border-color:transparent;color:var(--farbe-akzent-text)}

.reiter{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--abstand-1);padding:var(--abstand-1);border-radius:var(--radius-voll);background:var(--farbe-grund-2);border:var(--linie) solid var(--farbe-linie)}
.reiter button{min-height:calc(var(--ziel-min) - var(--abstand-2));padding:0 var(--abstand-2);border:0;border-radius:var(--radius-voll);background:transparent;color:var(--farbe-text-leise);font:600 var(--schrift-gr-1) var(--schrift-text);cursor:pointer;transition:all var(--dauer-1)}
.reiter button[aria-selected="true"]{background:var(--farbe-flaeche);color:var(--farbe-text);box-shadow:var(--schatten-1)}
.oauth{display:grid;gap:var(--abstand-3)}
.oauth>span{display:flex;align-items:center;gap:var(--abstand-3);font-size:var(--schrift-gr-0);color:var(--farbe-text-fein);text-transform:uppercase;letter-spacing:var(--sperrung-weit)}
.oauth>span::before,.oauth>span::after{content:"";flex:1;height:var(--linie);background:var(--farbe-linie)}
.oauth>div{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:var(--abstand-2)}
.leer-zustand .knopf{white-space:normal;text-align:center}

.mobil-leiste{position:fixed;left:var(--abstand-3);right:var(--abstand-3);bottom:var(--abstand-3);z-index:15;display:flex;align-items:center;justify-content:space-between;gap:var(--abstand-3);padding:var(--abstand-2) var(--abstand-2) var(--abstand-2) var(--abstand-4);border-radius:var(--radius-voll);background:var(--farbe-glas);border:var(--linie) solid var(--farbe-glas-rand);box-shadow:var(--schatten-2);-webkit-backdrop-filter:blur(var(--unschaerfe));backdrop-filter:blur(var(--unschaerfe));animation:hoch var(--dauer-2) var(--kurve)}
@keyframes hoch{from{opacity:0;transform:translateY(var(--abstand-4))}}
.mobil-leiste b{font:700 var(--schrift-gr-3) var(--schrift-titel);font-variant-numeric:tabular-nums}
.mobil-leiste>span{color:var(--farbe-text-leise);font-size:var(--schrift-gr-1)}
@media (min-width:60.0625rem){.mobil-leiste{display:none}}
.pruef span{position:relative;padding-left:calc(var(--abstand-4) + var(--abstand-3))}
.pruef span::before{position:absolute;left:0;top:var(--linie-2);margin-right:0}
.pruef input:checked+span::after{content:"";position:absolute;left:0;top:var(--linie-2);width:var(--abstand-4);height:var(--abstand-4);background:var(--farbe-akzent-text);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/70% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/70% no-repeat}


.download{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:var(--abstand-5);margin-bottom:var(--abstand-5);padding:var(--abstand-5);border-radius:var(--radius-4);background:radial-gradient(30rem 20rem at 0% 0%,var(--farbe-glut-1),transparent 70%),radial-gradient(25rem 18rem at 100% 100%,var(--farbe-glut-2),transparent 70%),var(--farbe-flaeche);border:var(--linie) solid var(--farbe-linie)}
.download>div{display:grid;gap:var(--abstand-3);align-content:start;justify-items:start}
.download h2{margin:0;font:700 var(--schrift-gr-4) var(--schrift-titel);letter-spacing:var(--sperrung-titel)}
.download h3{margin:0;font:600 var(--schrift-gr-0) var(--schrift-mono);text-transform:uppercase;letter-spacing:var(--sperrung-weit);color:var(--farbe-text-leise)}
.download p{margin:0;color:var(--farbe-text-leise)}


.korb-seite{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:var(--abstand-4);align-items:start}
.korb-liste{display:grid;gap:var(--abstand-3)}
.posten-liste .auswahl{width:var(--abstand-4);height:var(--abstand-4);margin:0;accent-color:var(--farbe-akzent);cursor:pointer}
.hinweis-auswahl{margin:var(--abstand-2) 0;color:var(--farbe-text-leise)}
.posten-liste{list-style:none;margin:0;padding:0;display:grid;gap:var(--abstand-3)}
.posten-liste:empty{display:none}
.posten-liste>li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--abstand-4);align-items:center;padding:var(--abstand-4);border-radius:var(--radius-3);background:var(--farbe-flaeche);border:var(--linie) solid var(--farbe-linie);animation:zeile var(--dauer-2) var(--kurve)}
.posten-liste>li.mit-auswahl{grid-template-columns:auto auto minmax(0,1fr) auto}
.posten-liste h3{margin:0;font:600 var(--schrift-gr-3) var(--schrift-titel)}
.posten-liste p{margin:var(--abstand-1) 0 0;font:var(--schrift-gr-1) var(--schrift-mono);color:var(--farbe-text-leise)}
.posten-liste .betrag{display:grid;justify-items:end;gap:var(--abstand-2);font:700 var(--schrift-gr-3) var(--schrift-titel);font-variant-numeric:tabular-nums}
.posten-liste .betrag small{font:var(--schrift-gr-0) var(--schrift-text);color:var(--farbe-text-leise)}
.posten-liste.klein>li{grid-template-columns:minmax(0,1fr) auto;padding:var(--abstand-3);border-radius:var(--radius-2);background:var(--farbe-grund-2)}
.posten-liste.klein h3{font-size:var(--schrift-gr-2)}
.posten-liste.klein .betrag{font-size:var(--schrift-gr-2)}
.weg{display:inline-flex;align-items:center;gap:var(--abstand-1);min-height:var(--ziel-min);padding:0 var(--abstand-2);border:0;background:none;color:var(--farbe-text-leise);font:500 var(--schrift-gr-0) var(--schrift-text);cursor:pointer;text-decoration:underline;text-underline-offset:var(--abstand-1)}
.weg:hover{color:var(--farbe-fehler)}


.kasse{list-style:none;margin:0;padding:0;display:grid;gap:var(--abstand-3);max-width:var(--breite-text);position:relative}
.kasse::before{content:"";position:absolute;top:var(--abstand-5);bottom:var(--abstand-5);left:calc(var(--abstand-4) + var(--abstand-5) / 2);width:var(--linie);background:linear-gradient(var(--farbe-akzent),var(--farbe-akzent-2),var(--farbe-akzent-3));opacity:.5}
.kasse-schritt{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--abstand-4);padding:var(--abstand-4);border-radius:var(--radius-3);background:var(--farbe-flaeche);border:var(--linie) solid var(--farbe-linie)}
.kasse-schritt>div{display:grid;gap:var(--abstand-3);justify-items:start;min-width:0}
.kasse-schritt>div>*{width:100%}
.kasse-schritt>div>.knopf{width:auto}
.kasse-schritt h2{margin:var(--abstand-2) 0 0;font:600 var(--schrift-gr-3) var(--schrift-titel)}
.kasse-schritt .nr{display:grid;place-items:center;width:var(--abstand-5);height:var(--abstand-5);border-radius:var(--radius-voll);background:var(--farbe-grund);border:var(--linie) solid var(--farbe-linie-stark);font:600 var(--schrift-gr-1) var(--schrift-mono)}
.kasse-schritt.fertig .nr{background:var(--verlauf-marke);border-color:transparent;color:var(--farbe-akzent-text)}
.summe-zeile{display:flex;justify-content:space-between;align-items:baseline;margin:0;padding-top:var(--abstand-3);border-top:var(--linie) dashed var(--farbe-linie-stark);color:var(--farbe-text-leise)}
.summe-zeile b{font:700 var(--schrift-gr-3) var(--schrift-titel);color:var(--farbe-text)}


.konto{display:grid;gap:var(--abstand-4)}
.konto-aus{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:var(--abstand-5);align-items:start}
.formkarte{gap:var(--abstand-4)}
.konto-vorteile{display:grid;gap:var(--abstand-4);padding:var(--abstand-5);border-radius:var(--radius-3);background:radial-gradient(25rem 18rem at 100% 0%,var(--farbe-glut-1),transparent 70%),var(--farbe-grund-2);border:var(--linie) solid var(--farbe-linie)}
.konto-vorteile h2{margin:0;font:600 var(--schrift-gr-3) var(--schrift-titel)}
.konto-an{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--abstand-3)}
.konto-an .karte{gap:var(--abstand-3)}
.konto-an .karte h3{margin:0;font-size:var(--schrift-gr-2)}
.profil{grid-column:1/-1;flex-direction:row !important;flex-wrap:wrap;align-items:center}
.profil>div{flex:1;min-width:0}
.profil h2{margin:var(--abstand-1) 0 0;font:700 var(--schrift-gr-4) var(--schrift-titel);letter-spacing:var(--sperrung-titel);hyphens:manual}
@media (max-width:40rem){.profil>div{flex:1 1 calc(100% - var(--abstand-6) - var(--abstand-3))}}
.profil p{margin:0}
.avatar{display:grid;place-items:center;width:var(--abstand-6);height:var(--abstand-6);border-radius:var(--radius-voll);background:var(--verlauf-marke);color:var(--farbe-akzent-text);font:700 var(--schrift-gr-4) var(--schrift-titel)}
.daten-liste{list-style:none;margin:0;padding:0;display:grid;gap:var(--abstand-2)}
.daten-liste li{display:flex;justify-content:space-between;gap:var(--abstand-3);padding:var(--abstand-2) 0;border-bottom:var(--linie) solid var(--farbe-linie);font-size:var(--schrift-gr-1)}
.daten-liste li:last-child{border-bottom:0}
.daten-liste li.leer{color:var(--farbe-text-fein)}
.zf-qr{width:min(100%,var(--breite-schmal));padding:var(--abstand-3);border-radius:var(--radius-2);background:var(--farbe-grund);border:var(--linie) solid var(--farbe-linie)}
.zf-qr:empty{display:none}
.zf-qr svg{display:block;width:100%;height:auto}
#zf-codes-liste code{font:var(--schrift-gr-1) var(--schrift-mono);color:var(--farbe-text)}


.kontakt-raster{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);gap:var(--abstand-4);align-items:start}
.kontakt-wege{display:grid;gap:var(--abstand-3)}
.kontakt-wege .karte>.ico{width:var(--abstand-5);height:var(--abstand-5);color:var(--farbe-akzent)}
.kontakt-wege h3{margin:0}
.mail-link{font:600 var(--schrift-gr-2) var(--schrift-mono);color:var(--farbe-text);overflow-wrap:anywhere}


.recht-raster{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:var(--abstand-6);align-items:start}
.recht-raster.ohne-nav{grid-template-columns:minmax(0,1fr)}
.recht-nav{position:sticky;top:calc(var(--kopf-hoehe) + var(--abstand-4));display:grid;gap:var(--abstand-3);padding:var(--abstand-4);border-radius:var(--radius-3);background:var(--farbe-flaeche);border:var(--linie) solid var(--farbe-linie)}
.recht-nav ol{margin:0;padding:0;list-style:none;display:grid;gap:var(--abstand-1);font-size:var(--schrift-gr-1)}
.recht-nav a{display:block;padding:var(--abstand-1) var(--abstand-2);border-radius:var(--radius-1);color:var(--farbe-text-leise);text-decoration:none}
.recht-nav a:hover,.recht-nav a.aktiv{color:var(--farbe-text);background:var(--farbe-flaeche-2)}
.recht{max-width:var(--breite-text)}
.recht section{padding:var(--abstand-4) 0;border-bottom:var(--linie) solid var(--farbe-linie)}
.recht section:first-child{padding-top:0}
.recht h2{margin:0 0 var(--abstand-3);font:600 var(--schrift-gr-3)/var(--zeile-titel) var(--schrift-titel);letter-spacing:var(--sperrung-titel)}
.recht p,.recht li{color:var(--farbe-text-leise)}
.recht p{margin:0 0 var(--abstand-3)}
.recht ul{margin:0 0 var(--abstand-3);padding-left:var(--abstand-4);display:grid;gap:var(--abstand-2)}
.recht strong{color:var(--farbe-text)}
.recht a{color:var(--farbe-text);text-decoration-color:var(--farbe-akzent);text-underline-offset:var(--abstand-1)}
.recht code{font:var(--schrift-gr-1) var(--schrift-mono);padding:0 var(--abstand-1);border-radius:var(--radius-1);background:var(--farbe-flaeche-2);color:var(--farbe-text)}


.nichts{display:grid;justify-items:center;gap:var(--abstand-3);min-height:calc(100svh - var(--kopf-hoehe) - var(--abstand-7));align-content:center;text-align:center;padding:var(--abstand-6) 0}
.riesig{font:700 var(--schrift-gr-riesig)/.85 var(--schrift-titel);letter-spacing:var(--sperrung-titel)}
.nichts .titel{max-width:none}
.nichts .reihe{justify-content:center;margin-top:var(--abstand-4)}


@media (max-width:68rem){
  .raster.bento,.raster.vier{grid-template-columns:repeat(2,minmax(0,1fr))}
  .raster.bento .gross{grid-row:auto}
  .held{grid-template-columns:minmax(0,1fr);min-height:0;padding-top:var(--abstand-5)}
  .konsole{max-width:var(--breite-text)}
  .fuss-raster{grid-template-columns:repeat(3,1fr)}
  .fuss-marke{grid-column:1/-1}
}

@media (max-width:60rem){
  #menueknopf{display:grid}
  .konto-knopf{display:none}
  .menue{position:fixed;inset:var(--kopf-hoehe) 0 0 0;z-index:19;flex-direction:column;align-items:stretch;gap:var(--abstand-1);margin:0;padding:var(--abstand-4);overflow-y:auto;background:var(--farbe-grund);opacity:0;transform:translateY(calc(-1 * var(--abstand-3)));visibility:hidden;transition:opacity var(--dauer-2),transform var(--dauer-2) var(--kurve),visibility var(--dauer-2)}
  .menue.offen{opacity:1;transform:none;visibility:visible}
  .menue>a,.mega-ziel{min-height:calc(var(--ziel-min) + var(--abstand-1));font-size:var(--schrift-gr-3);padding:0 var(--abstand-3)}
  .mega-ziel::after{display:none}
  .mega-feld{position:static;width:auto;grid-template-columns:minmax(0,1fr);padding:0 0 var(--abstand-3);border:0;box-shadow:none;background:none;opacity:1;visibility:inherit;transform:none}
  .konfig,.korb-seite,.konto-aus,.kontakt-raster,.download,.recht-raster{grid-template-columns:minmax(0,1fr)}
  .recht-nav{position:static}
  .ausgabe{position:relative;top:auto}
  .schritte{grid-template-columns:minmax(0,1fr);gap:var(--abstand-5)}
  .schritte::before{top:var(--abstand-5);bottom:var(--abstand-5);left:calc(var(--abstand-5) / 2);right:auto;width:var(--linie);height:auto}
  .schritte li{grid-template-columns:auto minmax(0,1fr);column-gap:var(--abstand-4)}
  .schritte .nr{grid-row:span 2}
  .schritte h3{margin:0}
  .konto-an{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:40rem){
  .huelle{padding-left:var(--abstand-3);padding-right:var(--abstand-3)}
  .kopf>.huelle{gap:var(--abstand-2)}
  .werkzeug{gap:var(--abstand-1)}
  .sprache{display:none}
  .raster,.raster.vier,.raster.bento{grid-template-columns:minmax(0,1fr)}
  .raster.bento .gross{grid-column:auto;min-height:0;padding-top:calc(var(--abstand-6) + var(--abstand-5))}
  .zahlen{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--abstand-3)}
  .kacheln{grid-template-columns:minmax(0,1fr)}
  .konsole-werte{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--abstand-2);padding:0 var(--abstand-3)}
  .konsole-werte div{padding:var(--abstand-2)}
  .konsole-zeilen{padding:var(--abstand-3);font-size:var(--schrift-gr-0)}
  .rechner,.formkarte,.ausgabe,.band-cta,.download,.konto-vorteile{padding:var(--abstand-4)}
  .cta{padding:var(--abstand-5) var(--abstand-3)}
  .fuss-raster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .posten-liste>li{grid-template-columns:minmax(0,1fr)}
  .posten-liste>li.mit-auswahl{grid-template-columns:auto minmax(0,1fr)}
  .posten-liste>li.mit-auswahl>.betrag{grid-column:2}
  .posten-liste .betrag{justify-items:start}
  .posten-liste>li.mit-auswahl>.auswahl{align-self:start}
  .posten-liste>li>.symbol{display:none}
  .reiter button{font-size:var(--schrift-gr-0)}
  .knopf.gross{padding:var(--abstand-3) var(--abstand-4)}
  .held .reihe .knopf{flex:1 1 auto}
}

@media (prefers-reduced-motion:reduce){
  [data-zeige]{opacity:1;transform:none}
  .band div,.cta::before,.etikett i,.live::before,.verlauf,.held h1 .wort span,.konsole-zeilen li,.korb.hupf b,.posten-liste>li,.toast{animation:none}
  .konsole-zeilen li{opacity:1}
  .karte,.konsole{transform:none}
}


.adresse{display:flex;flex-wrap:wrap;align-items:center;gap:var(--abstand-2) var(--abstand-3);padding:var(--abstand-3) var(--abstand-4);border-radius:var(--radius-2);background:var(--farbe-grund-2);border:var(--linie) dashed var(--farbe-linie-stark)}
.adresse .ueber{flex-basis:100%}
.adresse code{flex:1;font:600 var(--schrift-gr-3) var(--schrift-mono);color:var(--farbe-text);overflow-wrap:anywhere}


@media (max-width:40rem){.raster.bento .breit{grid-column:auto}.karte-chips{display:none !important}}
@media (prefers-reduced-motion:reduce){.karte-chips i{animation:none}}
h1,h2{overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
h3{overflow-wrap:break-word}
@media (max-width:40rem){.knopf{white-space:normal;text-align:center}}


.profil .status{flex:0 0 100%}
.recht section{color:var(--farbe-text-leise)}

@media (max-width:60rem){
  .menue-extra{display:grid;gap:var(--abstand-3);margin-top:auto;padding-top:var(--abstand-4);border-top:var(--linie) solid var(--farbe-linie)}
  .menue-extra .sprache{display:flex;justify-self:start}
  .menue-extra .knopf.an{border-color:var(--farbe-ok)}
}
@media (prefers-reduced-motion:reduce){.mobil-leiste{animation:none}}

body:has(.mobil-leiste:not([hidden])) .toast{bottom:calc(var(--abstand-6) + var(--abstand-5))}

@media (max-width:40rem){.adresse code{flex:1 1 100%;font-size:var(--schrift-gr-2);overflow-wrap:normal;white-space:nowrap}}
.recht h2{color:var(--farbe-text)}
.konf + .raster{margin-top:var(--abstand-4)}


.status-lage{--zf:var(--farbe-text-leise);display:grid;gap:var(--abstand-5)}
.status-lage[data-zustand="ok"]{--zf:var(--farbe-ok)}
.status-lage[data-zustand="stoerung"],.status-lage[data-zustand="fehler"]{--zf:var(--farbe-fehler)}
.status-lage[data-zustand="wartung"]{--zf:var(--farbe-warn)}
.status-banner{display:flex;flex-wrap:wrap;align-items:center;gap:var(--abstand-3) var(--abstand-4);padding:var(--abstand-5);border-radius:var(--radius-3);background:var(--farbe-flaeche);border:var(--linie) solid var(--farbe-linie);box-shadow:var(--schatten-glut)}
.status-banner>div{flex:1 1 auto;min-width:0}
.status-banner h2{margin:var(--abstand-1) 0 0;font:700 var(--schrift-gr-4)/var(--zeile-titel) var(--schrift-titel);letter-spacing:var(--sperrung-titel)}
.status-banner .puls{flex:none;width:var(--abstand-4);height:var(--abstand-4);border-radius:var(--radius-voll);background:var(--zf);box-shadow:0 0 0 var(--abstand-2) var(--farbe-glas),0 0 var(--abstand-5) var(--zf);animation:puls var(--dauer-4) ease-in-out infinite alternate}
.status-lage[data-zustand="laedt"] .puls{animation-duration:var(--dauer-2)}
.status-teile{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--abstand-5);align-items:start}
.status-dienste,.status-meldungen{display:grid;gap:var(--abstand-2);margin:0;padding:0;list-style:none}
.status-dienst{--zf:var(--farbe-text-leise);display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--abstand-1) var(--abstand-3);padding:var(--abstand-3) var(--abstand-4);border-radius:var(--radius-2);background:var(--farbe-flaeche);border:var(--linie) solid var(--farbe-linie)}
.status-dienst[data-zustand="ok"]{--zf:var(--farbe-ok)}
.status-dienst[data-zustand="stoerung"]{--zf:var(--farbe-fehler);border-color:var(--farbe-fehler)}
.status-dienst[data-zustand="wartung"]{--zf:var(--farbe-warn);border-color:var(--farbe-warn)}
.status-dienst .punkt{width:var(--abstand-2);height:var(--abstand-2);border-radius:var(--radius-voll);background:var(--zf);box-shadow:0 0 var(--abstand-3) var(--zf)}
.status-dienst .zustand,.meldung-art{font:600 var(--schrift-gr-0) var(--schrift-mono);text-transform:uppercase;letter-spacing:var(--sperrung-weit);color:var(--zf)}
.status-dienst small{grid-column:2 / -1;color:var(--farbe-text-leise)}
.meldung{--zf:var(--farbe-akzent);position:relative;display:grid;gap:var(--abstand-1);padding:var(--abstand-3) var(--abstand-4) var(--abstand-3) var(--abstand-5);border-radius:var(--radius-2);background:var(--farbe-flaeche);border:var(--linie) solid var(--farbe-linie)}
.meldung::before{content:"";position:absolute;left:var(--abstand-3);top:var(--abstand-3);bottom:var(--abstand-3);width:var(--linie-2);border-radius:var(--radius-voll);background:var(--zf)}
.meldung[data-art="stoerung"]{--zf:var(--farbe-fehler)}
.meldung[data-art="wartung"]{--zf:var(--farbe-warn)}
.meldung[data-art="update"]{--zf:var(--farbe-ok)}
.meldung h3{margin:0;font-size:var(--schrift-gr-2)}
.meldung p{margin:0;color:var(--farbe-text-leise)}
.status-wege{justify-content:center}
.fehler-zustand .status-wege .knopf{color:var(--farbe-text)}
.status-zeit{margin:0;font:600 var(--schrift-gr-0) var(--schrift-mono);color:var(--farbe-text-leise)}
.status-fehler-detail{display:block;margin-top:var(--abstand-2);color:var(--farbe-text-leise)}


.owner-liste{display:grid;gap:var(--abstand-2);margin-bottom:var(--abstand-5);padding:var(--abstand-4) var(--abstand-5);border-radius:var(--radius-3);background:var(--farbe-flaeche);border:var(--linie-2) dashed var(--farbe-warn)}
.owner-liste .ueber,.owner-liste li span{color:var(--farbe-warn)}
.owner-liste h2{margin:0;font:700 var(--schrift-gr-3)/var(--zeile-titel) var(--schrift-titel)}
.owner-liste p{margin:0;color:var(--farbe-text-leise)}
.owner-liste ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--abstand-3) var(--abstand-5);margin:var(--abstand-2) 0 0;padding-left:var(--abstand-4)}
.owner-liste li b{display:block;color:var(--farbe-text)}
.owner-liste li code{display:block;font:var(--schrift-gr-0) var(--schrift-mono);color:var(--farbe-text-fein);overflow-wrap:anywhere}
mark.platzhalter{padding:0 var(--abstand-1);border-radius:var(--radius-1);background:var(--farbe-fehler-flaeche);color:var(--farbe-fehler)}


.hinweis-box.warnung{background:var(--farbe-fehler-flaeche);border-color:var(--farbe-fehler)}
.hinweis-box.warnung>.ico{color:var(--farbe-fehler)}
.hinweis-box>div{display:grid;gap:var(--abstand-3);justify-items:start}
.hinweis-box .knopf .ico{margin-top:0;color:currentColor}
.erfolg-box{display:flex;gap:var(--abstand-4);align-items:flex-start;padding:var(--abstand-4);border-radius:var(--radius-3);background:var(--farbe-ok-flaeche);border:var(--linie) solid var(--farbe-ok);animation:hoch var(--dauer-3) var(--kurve)}
.erfolg-box .symbol{flex:none;background:var(--farbe-ok);border-color:var(--farbe-ok);color:var(--farbe-grund)}
.erfolg-box h2{margin:0 0 var(--abstand-1);font:700 var(--schrift-gr-3)/var(--zeile-titel) var(--schrift-titel)}
.erfolg-box p{margin:0 0 var(--abstand-3)}
.kontakt-ohne{justify-items:start}
.kontakt-ohne h2{margin:0;font:700 var(--schrift-gr-4)/var(--zeile-titel) var(--schrift-titel)}
.kontakt-ohne p{margin:0;color:var(--farbe-text-leise)}


.weiche-seite{display:grid;min-height:100svh;place-items:center;padding:var(--abstand-5)}
.weiche-wahl{display:grid;justify-items:center;gap:var(--abstand-5);text-align:center}
.weiche-wahl .marke{font-size:var(--schrift-gr-4)}
.weiche-frage{margin:0;color:var(--farbe-text-leise)}
.weiche-knoepfe{justify-content:center}


@media (max-width:60rem){.status-teile{grid-template-columns:minmax(0,1fr)}}
@media (max-width:40rem){.owner-liste{padding:var(--abstand-4)}.owner-liste ol{grid-template-columns:minmax(0,1fr)}.status-banner{padding:var(--abstand-4)}.erfolg-box{flex-direction:column}}
@media (prefers-reduced-motion:reduce){.status-banner .puls,.erfolg-box{animation:none}}

.vorschau{margin-bottom:var(--abstand-5)}
.vorschau h2{margin:0 0 var(--abstand-2);font:700 var(--schrift-gr-4) var(--schrift-titel);letter-spacing:var(--sperrung-titel)}
.vorschau>p{margin:0 0 var(--abstand-4);color:var(--farbe-text-leise)}
.vorschau-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));gap:var(--abstand-4)}
.vorschau-karte{margin:0;display:grid;gap:var(--abstand-2)}
.vorschau-rahmen{position:relative;overflow:hidden;border-radius:var(--radius-3);border:var(--linie) solid var(--farbe-linie);background:var(--farbe-flaeche);transition:border-color var(--dauer-2),box-shadow var(--dauer-2)}
.vorschau-rahmen::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(22rem circle at 50% 50%,var(--farbe-glut-1),transparent 45%);opacity:0;transition:opacity var(--dauer-2);pointer-events:none}
.vorschau-rahmen img{display:block;width:100%;height:auto}
.vorschau-karte:hover .vorschau-rahmen{border-color:var(--farbe-linie-stark);box-shadow:var(--schatten-1)}
.vorschau-karte:hover .vorschau-rahmen::before{opacity:1}
.vorschau-karte figcaption{font:600 var(--schrift-gr-1) var(--schrift-text);color:var(--farbe-text-leise)}
@media (prefers-reduced-motion:reduce){
  .vorschau-rahmen,.vorschau-rahmen::before{transition:none}
}

.katalog-lader { color: var(--farbe-text-leise); font-size: var(--schrift-gr-1); }
#katalog-inhalt h2 { margin-top: var(--abstand-5); }
#katalog-inhalt table { width: 100%; border-collapse: collapse; margin-top: var(--abstand-3); font-size: var(--schrift-gr-1); }
#katalog-inhalt th, #katalog-inhalt td { padding: var(--abstand-2) var(--abstand-3); text-align: left; vertical-align: top; border-bottom: var(--linie) solid var(--farbe-linie); }
#katalog-inhalt .tabellen-rahmen { overflow-x: auto; }
#katalog-inhalt th { color: var(--farbe-text-leise); font-weight: 600; }
#katalog-inhalt ul { margin-top: var(--abstand-3); padding-left: var(--abstand-4); }
/* CLS: Mindesthoehe, damit der Fuss beim Wechsel der Zustaende nicht springt. Gemessen headless: Konto aus 650 px mobil (390), 689 px (700), 426 px (961+); Konto an bis 615 px; Warenkorb leer 387 px mobil, 336 px breit. */
.konto{min-height:27.5rem}
.korb-seite{min-height:23.5rem}
@media (max-width:60rem){.konto{min-height:44rem}}
@media (max-width:40rem){.konto{min-height:41rem}.korb-seite{min-height:25rem}}


/* Startseite: gefuellte Flaeche, nur body[data-seite=start] */
body[data-seite="start"] .held-bild{margin:0;overflow:hidden;border:var(--linie) solid var(--farbe-linie);border-radius:var(--radius-3);background:var(--farbe-flaeche);box-shadow:var(--schatten-2)}
body[data-seite="start"] .held-bild img{display:block;width:100%;height:auto}
body[data-seite="start"] .start-zeile{margin:0;padding:var(--abstand-4) 0;border-block:var(--linie) solid var(--farbe-linie);text-align:center;font:500 var(--schrift-gr-3) var(--schrift-titel);color:var(--farbe-text-leise)}
body[data-seite="start"] .fakten{margin:var(--abstand-3) 0 0;padding:0;list-style:none;display:grid;gap:var(--abstand-2);font-size:var(--schrift-gr-1);color:var(--farbe-text-leise)}
body[data-seite="start"] .fakten li{position:relative;padding-left:var(--abstand-4)}
body[data-seite="start"] .fakten li::before{content:"";position:absolute;left:0;top:.5em;width:var(--abstand-2);height:var(--abstand-2);transform:rotate(45deg);background:var(--farbe-akzent)}
@media (max-width:40rem){body[data-seite="start"] .raster.zwei{grid-template-columns:minmax(0,1fr)}}
/* Startseite kompakt: Abstaende nur ueber Tokens */
body[data-seite="start"] .abschnitt{padding-top:var(--abstand-6)}
body[data-seite="start"] .abschnitt-kopf{margin-bottom:var(--abstand-4)}
body[data-seite="start"] .cta{margin-top:var(--abstand-6)}
/* Startseite: Versprechen und Schritte als kompakte Listen, nur body[data-seite=start] */
body[data-seite="start"] .start-liste,body[data-seite="start"] .start-schritte{list-style:none;margin:0;padding:0;display:grid;gap:var(--abstand-2)}
body[data-seite="start"] .start-liste li{position:relative;padding-left:var(--abstand-4);color:var(--farbe-text-leise)}
body[data-seite="start"] .start-liste li::before{content:"";position:absolute;left:0;top:.5em;width:var(--abstand-2);height:var(--abstand-2);transform:rotate(45deg);background:var(--farbe-akzent)}
body[data-seite="start"] .start-schritte{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--abstand-3)}
body[data-seite="start"] .start-schritte li{color:var(--farbe-text-leise)}
body[data-seite="start"] .start-liste b,body[data-seite="start"] .start-schritte b{color:var(--farbe-text)}
@media (max-width:40rem){body[data-seite="start"] .start-schritte{grid-template-columns:minmax(0,1fr)}}

/* Startseite kompakt: Karten, Paar, Fuss, CTA */
.paar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--abstand-5)}
.paar-kopf{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--abstand-5);margin-bottom:var(--abstand-5)}
.paar-kopf .abschnitt-kopf{margin-bottom:var(--abstand-3)}
@media (max-width:40rem){.paar,.paar-kopf{grid-template-columns:minmax(0,1fr)}}
body[data-seite="start"] .fuss-raster{grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:var(--abstand-3);padding-top:var(--abstand-4);padding-bottom:var(--abstand-3)}
body[data-seite="start"] .fuss-raster>div{flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--abstand-1) var(--abstand-3)}
body[data-seite="start"] .fuss-raster>.fuss-marke{flex-direction:column;align-items:flex-start}
body[data-seite="start"] .fuss h2{margin:0}
body[data-seite="start"] .fuss-zeile{padding-top:var(--abstand-2);padding-bottom:var(--abstand-2)}
body[data-seite="start"] .cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--abstand-3);margin:var(--abstand-6) 0 var(--abstand-4);padding:var(--abstand-3) var(--abstand-4);text-align:left}
body[data-seite="start"] .cta h2{font-size:var(--schrift-gr-3)}
body[data-seite="start"] .cta .reihe{justify-content:flex-end}
@media (max-width:40rem){body[data-seite="start"] .fuss-raster{grid-template-columns:minmax(0,1fr)}body[data-seite="start"] .cta{flex-direction:column;align-items:stretch;text-align:center}}

/* Startseite kompakt, Runde 2: Fuss und CTA */
body[data-seite="start"] .fuss-raster{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1.4fr) minmax(0,1.2fr);gap:var(--abstand-2) var(--abstand-5);padding-top:var(--abstand-3);padding-bottom:var(--abstand-2)}
body[data-seite="start"] .fuss-raster>div{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:var(--abstand-1) var(--abstand-3)}
body[data-seite="start"] .fuss-raster>.fuss-marke{flex-direction:column;align-items:flex-start}
body[data-seite="start"] .fuss h2{margin:0;white-space:nowrap}
body[data-seite="start"] .fuss-marke p{margin:0;max-width:none}
body[data-seite="start"] .fuss-zeile{padding-top:var(--abstand-1);padding-bottom:var(--abstand-1)}
body[data-seite="start"] .fuss{margin-top:var(--abstand-5)}
body[data-seite="start"] .cta{margin:var(--abstand-5) 0 var(--abstand-3);padding:var(--abstand-2) var(--abstand-4)}

/* Startseite kompakt, Runde 3: Fuss unter 120 px */
body[data-seite="start"] .fuss-raster{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1.3fr) minmax(0,1.2fr);padding-top:var(--abstand-2);padding-bottom:0}
body[data-seite="start"] .fuss-zeile{padding-top:var(--abstand-1);padding-bottom:0}
body[data-seite="start"] .fuss-marke p{margin:0;max-width:none;white-space:nowrap}

/* Startseite kompakt, Runde 4: Fuss oben weniger Abstand */
body[data-seite="start"] .fuss-raster{padding-top:var(--abstand-1)}
body[data-seite="start"] .fuss-zeile{padding-top:0;padding-bottom:0;border-top-width:var(--linie)}
/* Unterseiten kompakt (Leistungen, Hub, Game-Server): nur Layout, nur Tokens, nur body[data-seite] */
body[data-seite="leistungen"] .seitenkopf,body[data-seite="hub"] .seitenkopf,body[data-seite="game-server"] .seitenkopf{padding:var(--abstand-5) 0 var(--abstand-4);gap:var(--abstand-2)}
body[data-seite="leistungen"] .band-cta{margin-top:var(--abstand-5)}
body[data-seite="hub"] .download,body[data-seite="game-server"] .abschnitt-kopf{margin-bottom:var(--abstand-4)}
body[data-seite=game-server] .huelle-var .raster{gap:var(--abstand-1)}
body[data-seite=game-server] .huelle-var .karte{padding:var(--abstand-3)}
body[data-seite=game-server] .huelle-var .karte h3{margin:0}
body[data-seite=game-server] .huelle-var .raster.vier{grid-template-columns:minmax(0,1fr)}
@media (min-width:40rem){body[data-seite=game-server] .huelle-var .raster.vier{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Unterseiten kompakt, Runde 2 (Leistungen, Hub): nur Layout, nur Tokens, nur ab 40rem */
@media (min-width:40rem){
body[data-seite="leistungen"] .raster.bento{grid-template-columns:repeat(2,minmax(0,1fr))}
body[data-seite="leistungen"] .raster.bento .gross{grid-column:auto;grid-row:auto}
body[data-seite="hub"] .download{padding:var(--abstand-4);gap:var(--abstand-4)}
}