@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../../schriften/schibsted-grotesk-var.woff2") format("woff2");
}

@font-face {
  font-family: "Schibsted Ersatz";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 103.4%;
  ascent-override: 94.8%;
  descent-override: 25.1%;
  line-gap-override: 0%;
}

@property --naht { syntax: "<length-percentage>"; inherits: true; initial-value: 52.78%; }
@property --naht-ohne { syntax: "<length-percentage>"; inherits: true; initial-value: 52.78%; }
@property --naht-mit { syntax: "<length-percentage>"; inherits: true; initial-value: 34.84%; }
@property --d-oben { syntax: "<length>"; inherits: false; initial-value: 36px; }
@property --d-rechts { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --d-unten { syntax: "<length>"; inherits: false; initial-value: 40px; }
@property --d-links { syntax: "<length>"; inherits: false; initial-value: 0px; }

:root {
  --dunkel: #0F2744; --blau: #2563A8; --hellblau: #8CBCEA; --nacht: #0A1B30; --blau-hauch: #EAF2FB;
  --text: #14213A; --weich: #3A4760; --grau: #4A5872; --linie: #E1E6EE; --hell: #F5F7FA;
  --hell-text: #C9D6E8; --leise: #9FB0C8;
  --gold: #C58A12;   
  --rot: #B5462F; --gruen: #1E7A4C;
  --weiss: #FFFFFF;
  --linie-dunkel: rgba(255, 255, 255, .2);    
  --rahmen-dunkel: rgba(255, 255, 255, .5);   

  --schrift: "Schibsted Grotesk", "Schibsted Ersatz", "Helvetica Neue", Arial, sans-serif;
  --titel-schrift: var(--schrift);
  --text-schrift: var(--schrift);








  --s-klein: 15px;
  --s-text: 18px;
  --s-gross: clamp(21px, calc(17.6px + .45vw), 24px);
  --s-titel: clamp(34px, calc(22px + 2.1vw), 52px);
  --s-zahl: clamp(44px, calc(26px + 3.9vw), 84px);
  --s-display: clamp(52px, calc(30px + 5.2vw), 108px);

  --rand: 64px;
  --kopf-hoehe: 76px;
  --marke-breite: 124px;
  --marke-hoehe: 44px;
  --marke-schutz: 11px;
  --marke-ende: calc(var(--rand) + var(--marke-breite) + var(--marke-schutz));





  --naht-basis: 52.78%;
  --kopf-bedarf: calc(570px + var(--rand));
  --verhaeltnis: 1;
  --naht-ohne: max(var(--marke-ende), min(var(--naht-basis), calc(100% - var(--kopf-bedarf))));
  --naht-mit: max(var(--marke-ende), calc(100% - (100% - var(--naht-ohne)) * var(--verhaeltnis)));

  --kurve-flaeche: cubic-bezier(.7, 0, .2, 1);   
  --kurve-raus: cubic-bezier(.2, .7, .2, 1);     
  --dauer-naht: .8s;
}

:root, .auf-hell {
  --ton-grund: var(--weiss);
  --ton-titel: var(--dunkel);
  --ton-text: var(--weich);
  --ton-leise: var(--grau);
  --ton-link: var(--blau);
  --ton-fokus: var(--blau);
  --ton-linie: var(--linie);
  --ton-rahmen: var(--dunkel);
  --ton-spur: var(--linie);
  --ton-spur-voll: var(--dunkel);
  --ton-knopf: var(--dunkel);
  --ton-knopf-text: var(--weiss);
  --ton-knopf-hover: var(--blau);
  --ton-wahl: var(--dunkel);
  --ton-wahl-text: var(--weiss);
}
.auf-hell { color: var(--ton-text); }
.auf-dunkel {
  --ton-grund: var(--dunkel);
  --ton-titel: var(--weiss);
  --ton-text: var(--hell-text);
  --ton-leise: var(--leise);
  --ton-link: var(--hellblau);
  --ton-fokus: var(--hellblau);
  --ton-linie: var(--linie-dunkel);
  --ton-rahmen: var(--rahmen-dunkel);
  --ton-spur: var(--linie-dunkel);
  --ton-spur-voll: var(--hellblau);
  --ton-knopf: var(--weiss);
  --ton-knopf-text: var(--dunkel);
  --ton-knopf-hover: var(--hellblau);
  --ton-wahl: var(--hellblau);
  --ton-wahl-text: var(--dunkel);
  color: var(--ton-text);
}

*, *::before, *::after { box-sizing: border-box; }
html {
  --naht: var(--naht-ohne);
  background: var(--weiss);
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopf-hoehe) + 16px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  transition: --naht var(--dauer-naht) var(--kurve-flaeche);
}
html.naht-mit { --naht: var(--naht-mit); }
html.naht-ruhig, html.naht-ruhig .kopf { transition: none !important; }
body {
  margin: 0;
  background: var(--weiss);
  color: var(--weich);
  font-family: var(--schrift);
  font-size: var(--s-text);
  font-weight: 400;
  line-height: 1.6;
  font-synthesis: none;
  font-kerning: normal;
  font-variant-numeric: proportional-nums;   
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
small { font-size: inherit; }
[hidden] { display: none !important; }
::selection { background: var(--hellblau); color: var(--dunkel); }
.name { white-space: nowrap; }      
.betrag { white-space: nowrap; }    
.nur-vorlesen { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.vorrat { position: absolute; width: 0; height: 0; overflow: hidden; }

.nr { display: none; }
.nummern .nr { display: inline-block; position: absolute; top: 10px; left: 10px; z-index: 60; padding: 4px 10px; background: var(--blau); color: var(--weiss); font: 600 var(--s-klein)/1.3 var(--schrift); }

h1, .stufe-display { font-size: var(--s-display); font-weight: 700; line-height: .92; letter-spacing: -.028em; color: var(--ton-titel); text-wrap: balance; }
.stufe-zahl { font-size: var(--s-zahl); font-weight: 700; line-height: .9; letter-spacing: -.025em; color: var(--ton-titel); white-space: nowrap; }
h2, .stufe-titel { font-size: var(--s-titel); font-weight: 700; line-height: 1.04; letter-spacing: -.02em; color: var(--ton-titel); text-wrap: balance; }
h3, .stufe-gross { font-size: var(--s-gross); font-weight: 500; line-height: 1.3; letter-spacing: -.012em; color: var(--ton-titel); text-wrap: balance; }
p, li, .stufe-text { text-wrap: pretty; }
.stufe-text { font-size: var(--s-text); font-weight: 400; line-height: 1.6; letter-spacing: 0; }
.stufe-klein, .klein { font-size: var(--s-klein); line-height: 1.5; letter-spacing: 0; }
b, strong { font-weight: 600; color: var(--ton-titel); }


.zahl-rahmen { container-type: inline-size; }
.zahl-gross { font-size: min(var(--s-zahl), calc(100cqi / 6.1)); font-weight: 700; line-height: .9; letter-spacing: -.025em; color: var(--ton-titel); white-space: nowrap; }







.ziffern-fest { font-variant-numeric: tabular-nums; }
.ziffern-fest .trenner { font-variant-numeric: proportional-nums; }
.stelle { display: inline-block; white-space: pre; text-align: center; }

:focus-visible { outline: 3px solid var(--ton-fokus); outline-offset: 3px; }
.fokus-doppelt:focus-visible { outline: 3px solid var(--hellblau); outline-offset: 4px; box-shadow: 0 0 0 10px var(--dunkel); }
.ps-schalter.fokus-doppelt:focus-visible { box-shadow: inset 0 0 0 2px var(--hellblau), 0 0 0 10px var(--dunkel); }

a { color: inherit; }
.link, p a:not(.knopf), li a:not(.knopf) {
  color: var(--ton-link);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: .2em;
  transition: text-decoration-thickness .15s, color .15s;
}
@media (hover: hover) { .link:hover, p a:not(.knopf):hover, li a:not(.knopf):hover { text-decoration-thickness: 3px; } }


.link-flaeche, .annahmen a, #ho-pkv a, .klein a { padding-block: max(0px, calc((44px - 1.24em) / 2)); }
#ho-pkv a { white-space: nowrap; }   

.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 28px;
  border: 2px solid transparent; border-radius: 0;
  font: 600 var(--s-text)/1.15 var(--schrift); letter-spacing: -.005em;
  text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, transform .12s;
}
.knopf:active { transform: translateY(1px); }
.knopf-voll { background: var(--ton-knopf); color: var(--ton-knopf-text); }
@media (hover: hover) { .knopf-voll:hover { background: var(--ton-knopf-hover); } }
.knopf-linie { background: transparent; border-color: var(--ton-titel); color: var(--ton-titel); }
@media (hover: hover) { .knopf-linie:hover { background: var(--ton-titel); color: var(--ton-grund); } }
.knopf-breit { width: 100%; }
.knopf-klein { min-height: 44px; padding: 0 18px; font-size: var(--s-klein); }



.kopf {
  --naht: var(--naht-ohne);
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--kopf-hoehe);
  display: flex; align-items: center;
  background: var(--weiss);
  transition: --naht var(--dauer-naht) var(--kurve-flaeche);
}
html.kopf-im-einstieg.naht-mit .kopf { --naht: var(--naht-mit); }
.kopf::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--linie); opacity: 0; transition: opacity .3s; }
.gescrollt .kopf::after { opacity: 1; }
.marke { position: relative; z-index: 1; flex: none; display: grid; align-items: center; width: var(--marke-breite); height: max(44px, var(--marke-hoehe)); margin-left: var(--rand); }
.marke img { grid-area: 1 / 1; width: var(--marke-breite); height: var(--marke-hoehe); }
.marke .marke-hell { visibility: hidden; }
html.kopf-dunkel-ganz .kopf { background: var(--dunkel); }
html.kopf-dunkel-ganz .kopf::after { background: var(--linie-dunkel); }
html.kopf-dunkel-ganz .marke-hell { visibility: visible; }
html.kopf-dunkel-ganz .marke-dunkel { visibility: hidden; }
html.kopf-dunkel-ganz .marke:focus-visible { outline-color: var(--hellblau); }

.kopf-dunkel {
  position: absolute; top: 0; right: 0; bottom: -1px;
  min-width: calc(100% - var(--naht));
  display: flex; align-items: center; justify-content: flex-end; gap: 16px;
  padding: 0 var(--rand) 0 28px;
  background: var(--dunkel);
}
.kopf-dunkel > * { flex: none; }
.menue { display: flex; align-items: center; }
.menue a {
  position: relative; display: block;
  padding: 14px 8px;
  color: var(--weiss);
  font: 500 var(--s-klein)/16px var(--schrift);
  text-decoration: none; white-space: nowrap;
}
.menue a::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 8px; height: 2px; background: var(--hellblau); transform: scaleX(0); transform-origin: right; transition: transform .3s var(--kurve-raus); }
@media (hover: hover) { .menue a:hover::after { transform: scaleX(1); transform-origin: left; } }
.knopf-kopf { min-height: 44px; padding: 0 18px; font-size: var(--s-klein); }
.menue-knopf { display: none; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; place-items: center; }
.menue-knopf span { grid-area: 1 / 1; width: 22px; height: 2px; background: var(--weiss); transition: transform .3s var(--kurve-raus); }
.menue-knopf span:first-child { transform: translateY(-4px); }
.menue-knopf span:last-child { transform: translateY(4px); }
.menue-offen .menue-knopf span:first-child { transform: rotate(45deg); }
.menue-offen .menue-knopf span:last-child { transform: rotate(-45deg); }


.naht-flaeche { position: absolute; top: 0; bottom: 0; right: 0; left: var(--naht); background: var(--dunkel); }
.naht-schnitt { clip-path: inset(0 0 0 var(--naht)); }

.regler {
  --anteil: 0%;
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; height: 44px; margin: 0;
  background: transparent; cursor: pointer;
}
.regler::-webkit-slider-runnable-track { height: 4px; background: linear-gradient(90deg, var(--ton-spur-voll) var(--anteil), var(--ton-spur) var(--anteil)); }
.regler::-moz-range-track { height: 4px; background: var(--ton-spur); }
.regler::-moz-range-progress { height: 4px; background: var(--ton-spur-voll); }
.regler::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 44px; margin-top: -20px; border: solid transparent; border-width: 11px 0; border-radius: 0; box-shadow: inset 0 0 0 3px var(--ton-spur-voll); background: var(--ton-grund) padding-box; transition: background-color .15s, transform .15s var(--kurve-raus); }
.regler::-moz-range-thumb { width: 16px; height: 16px; border: 3px solid var(--ton-spur-voll); border-radius: 0; background: var(--ton-grund); }
.regler:active::-webkit-slider-thumb { background-color: var(--ton-spur-voll); }
@media (hover: hover) { .regler:hover::-webkit-slider-thumb { background-color: var(--ton-spur-voll); } }
.regler:active::-moz-range-thumb { background: var(--ton-spur-voll); }
@media (hover: hover) { .regler:hover::-moz-range-thumb { background: var(--ton-spur-voll); } }
.regler:focus-visible { outline-offset: 0; }
html:not(.js) .regler { --anteil: 0%; }

html:not(.js) #h-potenzial :is(.felder, .feld, .regler-kopf, .regler, .feld-titel, #h-status, .steuerung-hinweis, .hinweis, #ho-unter) { display: none; }
.regler-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.regler-kopf label, .feld-titel { font-size: var(--s-text); font-weight: 500; line-height: 1.3; color: var(--ton-text); }
.regler-kopf output { font-size: var(--s-text); font-weight: 600; line-height: 1.3; color: var(--ton-titel); white-space: nowrap; transition: color .18s; }
.regler-kopf output.neu { color: var(--ton-link); }






.wert-feld {
  position: relative; display: inline-block; flex: none;
  font-size: max(16px, var(--s-text)); font-weight: 600; line-height: 1.3; color: var(--ton-titel); white-space: nowrap;
}
.wert-anzeige {
  display: block; text-align: right;
  text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: .2em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: color .18s, text-decoration-color .15s;
}
.wert-anzeige.neu { color: var(--ton-link); }
.wert-feld input {
  position: absolute; right: 0; bottom: 0; z-index: 1;
  width: max(100% + 8px, 44px); height: 44px; margin: 0; padding: calc(44px - 1.3em) 0 0;
  border: 0; border-radius: 0; background: transparent; -webkit-appearance: none; appearance: none;
  font: inherit; line-height: 1.3; letter-spacing: inherit; text-align: right;
  color: transparent; caret-color: transparent; cursor: text;
}
.wert-feld input:focus { outline: none; color: var(--ton-titel); caret-color: currentColor; }
.wert-feld input::selection { background: var(--hellblau); color: var(--dunkel); }
.wert-feld:focus-within .wert-anzeige { visibility: hidden; }
.wert-feld::before, .wert-feld::after { content: ""; position: absolute; inset: -5px -6px -4px -8px; pointer-events: none; visibility: hidden; }
.wert-feld::before { background: var(--ton-grund); }
.wert-feld::after { outline: 3px solid var(--ton-fokus); }
.wert-feld:focus-within::before, .wert-feld:focus-within::after { visibility: visible; }
@media (hover: hover) {
  .wert-feld:hover .wert-anzeige { text-decoration-thickness: 2px; text-decoration-color: currentColor; }
}
.regler-kopf:has(+ .regler:focus-visible) .wert-anzeige { text-decoration-color: transparent; }
@media (forced-colors: active) {
  .wert-feld input:not(:focus) { forced-color-adjust: none; color: transparent; }
}
html:not(.js) .wert-feld { display: none; }

.auswahl { display: flex; flex-wrap: wrap; }
.auswahl button {
  flex: 1 1 0; min-width: max-content; min-height: 48px; padding: 0 10px;
  border: 1.5px solid var(--ton-rahmen); background: transparent; color: var(--ton-titel);
  font-size: var(--s-text); font-weight: 500; line-height: 1.1; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.auswahl button + button { margin-left: -1.5px; }
@media (hover: hover) { .auswahl button:hover { border-color: var(--ton-link); position: relative; } }
.auswahl button.an { position: relative; border-color: var(--ton-wahl); background: var(--ton-wahl); color: var(--ton-wahl-text); }
.auswahl button:focus-visible { position: relative; z-index: 1; }


.ps-schalter {
  position: relative; flex: none;
  width: 84px; height: 44px; padding: 0;
  border: 0; border-radius: 0;
  background: var(--dunkel);
  box-shadow: inset 0 0 0 2px var(--hellblau);
  cursor: pointer;
}
.ps-knopf {
  position: absolute; left: 6px; top: 6px;
  width: 32px; height: 32px;
  background: var(--weiss);
  transition: transform .45s var(--kurve-flaeche), background-color .3s;
}
.ps-knopf::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 50%; aspect-ratio: 59 / 50;
  background: var(--dunkel);
  transform: translate(-50%, -55%);
  clip-path: polygon(50% 0, 100% 54.5%, 100% 100%, 50% 45.5%, 0 100%, 0 54.5%);
}
.mit-uns .ps-knopf { transform: translateX(40px); background: var(--hellblau); }
.ps-label {
  min-height: 44px; padding: 0 6px;
  border: 0; background: none;
  font-size: var(--s-text); font-weight: 600; line-height: 1;
  color: var(--ton-leise); cursor: pointer;
  transition: color .25s;
}
.ps-label[data-setze="false"], .mit-uns .ps-label[data-setze="true"] { color: var(--ton-titel); }
.mit-uns .ps-label[data-setze="false"] { color: var(--ton-leise); }





html:not(.js) [data-diagramm] { display: none; }   
.diagramm { overflow: visible; font-family: var(--schrift); }
.diagramm-hell {
  --d-text: var(--grau); --d-achse: var(--dunkel); --d-gitter: var(--linie);
  --d-flaeche-ohne: var(--hellblau); --d-flaeche-mit: var(--blau);
  --d-linie-ohne: var(--dunkel); --d-linie-mit: var(--dunkel);
  --d-wert: var(--dunkel); --d-wert-innen: var(--dunkel); --d-wert-mit-innen: var(--weiss);
  --d-marke: var(--blau);
}
.diagramm-dunkel {
  --d-text: var(--leise); --d-achse: var(--hell-text); --d-gitter: var(--linie-dunkel);
  --d-flaeche-ohne: #2E4C72;   
  --d-flaeche-mit: var(--hellblau);
  --d-linie-ohne: var(--weiss); --d-linie-mit: var(--weiss);
  --d-wert: var(--weiss); --d-wert-innen: var(--weiss); --d-wert-mit-innen: var(--dunkel);
  --d-marke: var(--hellblau);
}
.d-gitter line { stroke: var(--d-gitter); stroke-width: 1; shape-rendering: crispEdges; }
.d-gitter text, .d-alter text { fill: var(--d-text); font-size: var(--s-klein); font-weight: 500; }
.d-achse { stroke: var(--d-achse); stroke-width: 1.5; }
.d-alter line { stroke: var(--d-achse); stroke-width: 1.5; }
.d-flaeche-ohne { fill: var(--d-flaeche-ohne); }
.d-flaeche-mit { fill: var(--d-flaeche-mit); fill-opacity: .16; transition: fill-opacity .6s var(--kurve-raus); }
.ist-mit .d-flaeche-mit { fill-opacity: 1; }
.d-linie { fill: none; stroke-linejoin: round; stroke-linecap: butt; transition: opacity .4s, stroke-width .4s; }
.d-linie-ohne { stroke: var(--d-linie-ohne); stroke-width: 2.5; }
.d-linie-mit { stroke: var(--d-linie-mit); stroke-width: 1.5; stroke-dasharray: 5 5; opacity: .7; }
.ist-mit .d-linie-ohne { stroke-width: 1.5; stroke-dasharray: 5 5; opacity: .7; }
.ist-mit .d-linie-mit { stroke-width: 2.5; stroke-dasharray: none; opacity: 1; }
.d-punkt { stroke-width: 2; }
.d-punkt-ohne { fill: var(--d-linie-ohne); stroke: var(--d-linie-ohne); }
.d-punkt-mit { fill: none; stroke: var(--d-linie-mit); }
.ist-mit .d-punkt-ohne { fill: none; }
.ist-mit .d-punkt-mit { fill: var(--d-linie-mit); }
.d-wert { fill: var(--d-wert); font-size: var(--s-klein); font-weight: 500; transition: fill .4s; }
.d-wert-ohne, .ist-mit .d-wert-mit { font-weight: 600; }
.ist-mit .d-wert-ohne { font-weight: 500; }
.d-wert.innen { fill: var(--d-wert-innen); }
.ist-mit .d-wert-mit.innen { fill: var(--d-wert-mit-innen); }
.d-marke { fill: var(--d-marke); }
.wechselt .d-marke { transition: transform .7s var(--kurve-flaeche); }


@media (prefers-reduced-motion: no-preference) {
  .js [data-zeige].wartet:not(.da) { opacity: 0; transform: translateY(16px); }
  .js [data-zeige].wartet.da { transition: opacity .6s var(--kurve-raus) calc(var(--v, 0) * 70ms), transform .7s var(--kurve-raus) calc(var(--v, 0) * 70ms); }
}

@media (max-width: 1399px) {
  :root { --rand: 56px; }
}
@media (max-width: 1279px) {
  :root { --rand: 40px; }
}
@media (max-width: 900px) {
  :root { --naht-basis: 100%; --kopf-hoehe: 64px; --marke-breite: 112px; --marke-hoehe: 40px; --marke-schutz: 10px; --kopf-bedarf: calc(180px + var(--rand)); }
  .kopf-dunkel { gap: 4px; padding: 0 calc(var(--rand) - 8px) 0 12px; }
  .knopf-kopf { padding: 0 14px; }
  .menue-knopf { display: grid; }
  .menue {
    position: fixed; top: var(--kopf-hoehe); left: 0; right: 0;
    max-height: calc(100dvh - var(--kopf-hoehe)); overflow-y: auto;
    flex-direction: column; align-items: stretch;
    padding: 8px var(--rand) 28px;
    background: var(--dunkel);
    border-top: 1px solid var(--linie-dunkel);
    border-bottom: 3px solid var(--hellblau);
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity .25s, transform .25s var(--kurve-raus), visibility 0s .25s;
  }
  .menue-offen .menue { visibility: visible; opacity: 1; transform: none; transition: opacity .25s, transform .25s var(--kurve-raus); }
  .menue a { padding: 16px 0; border-bottom: 1px solid var(--linie-dunkel); font: 600 var(--s-gross)/1.15 var(--schrift); letter-spacing: -.012em; }
  .menue a:last-child { border-bottom: 0; }
  .menue a::after { display: none; }
  @media (hover: hover) { .menue a:hover { color: var(--hellblau); } }


  html:not(.js) .menue { visibility: visible; opacity: 0; transform: translateY(-200vh); transition: none; }
  html:not(.js) .kopf-dunkel:has(.menue-knopf:hover, .menue-knopf:focus) .menue,
  html:not(.js) .menue:hover, html:not(.js) .menue:focus-within { opacity: 1; transform: none; }
}
@media (max-width: 719px) {
  :root { --rand: 20px; --s-text: 17px; }
  body { line-height: 1.55; }
  .stufe-text { line-height: 1.55; }
  .knopf { padding: 0 20px; }
  .auswahl button { font-size: var(--s-klein); padding: 0 6px; }
}
@media (max-width: 359px) {
  :root { --marke-breite: 96px; --marke-hoehe: 34px; --marke-schutz: 9px; }
  .kopf-dunkel { gap: 0; padding: 0 6px 0 10px; }
  .knopf-kopf { padding: 0 12px; }
  .auswahl button { padding: 0 4px; }   
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}