/* ec sistec. Eine Schrift (Jost, lokal), zwei Grüns, viel Weiß.
   Leitmotiv aus dem Logo: Kabel + Kapsel mit grüner Leuchte. Knöpfe, Regler und Abschnittsmarken sind diese Kapsel. */

@font-face { font-family: "Jost"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/jost-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/jost-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Jost"; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url("../fonts/jost-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }

@property --leuchte { syntax: "<color>"; inherits: true; initial-value: #8b9389; }

:root {
  --tinte: #1b1d1a;
  --papier: #fff;
  --nebel: #f2f4f0;
  --linie: #dfe3dc;
  --grau: #596057;
  --led: #57d58e;
  --led-tief: #0b6a3b;
  --tanne: #0f2a1e;
  --tanne-hell: #1a3d2c;
  --hell: #f4f5f0;
  --warn: #9a3b12;
  --rand: clamp(20px, 4.2vw, 60px);
  --mast-hoehe: 72px;
  --schrift: "Jost", "Century Gothic", "Avenir Next", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--mast-hoehe) + 16px); -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 1.125rem/1.6 var(--schrift); color: var(--tinte); background: var(--papier); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img, video, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
address { font-style: normal; }
:focus-visible { outline: 2px solid var(--led-tief); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--led); color: var(--tinte); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }

.nur-leser { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sprung { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--tinte); color: #fff; padding: 10px 16px; border-radius: 999px; }
.sprung:focus { top: 12px; }

.rahmen { width: 100%; max-width: 1340px; margin-inline: auto; padding-inline: var(--rand); }
.rahmen-schmal { max-width: 860px; }
.abschnitt { padding-block: clamp(76px, 10vw, 150px); overflow-x: clip; }

h1, h2 { font-weight: 300; letter-spacing: -.025em; line-height: 1.02; text-wrap: balance; }
h2 { font-size: clamp(2.1rem, 4.5vw, 3.9rem); }
h3 { font-size: 1.35rem; font-weight: 500; line-height: 1.2; }
.gross { font-size: clamp(1.2rem, 1.9vw, 1.5rem); line-height: 1.45; font-weight: 300; }
.klein { font-size: .95rem; color: var(--grau); }
.klein a, .lesetext a, .fragen a, .bogen a, .keks a { color: var(--led-tief); text-underline-offset: 3px; }

/* ---------- Kapsel-Knopf: die Form aus dem Logo ---------- */
.knopf { --leuchte: var(--led); display: inline-flex; align-items: center; gap: 12px; padding: 13px 26px 13px 20px; border: 1.5px solid var(--tinte); border-radius: 999px;
  background: var(--tinte); color: #fff; font-weight: 500; font-size: 1.05rem; line-height: 1.2; text-decoration: none; transition: background .2s, color .2s, border-color .2s, transform .2s; }
.knopf::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--leuchte); transition: box-shadow .25s, transform .25s; }
.knopf:hover { background: #000; }
.knopf:hover::before { box-shadow: 0 0 0 5px rgb(87 213 142 / .25); transform: scale(1.1); }
.knopf:active { transform: translateY(1px); }
.knopf-klein { padding: 9px 18px 9px 14px; font-size: .98rem; gap: 9px; }
.knopf-klein::before { width: 8px; height: 8px; }
.knopf-gross { padding: 17px 32px 17px 24px; font-size: 1.15rem; }
.knopf-voll { width: 100%; justify-content: center; }
.knopf-led { background: var(--led); border-color: var(--led); color: var(--tinte); --leuchte: var(--tinte); }
.knopf-led:hover { background: #7be3a8; border-color: #7be3a8; }
.knopf-led:hover::before { box-shadow: 0 0 0 5px rgb(27 29 26 / .15); }
.knopf-hell { background: var(--hell); border-color: var(--hell); color: var(--tinte); --leuchte: var(--led-tief); }
.knopf-hell:hover { background: #fff; }
.knopf-rand { background: transparent; color: var(--tinte); --leuchte: var(--grau); }
.knopf-rand:hover { background: var(--tinte); color: #fff; --leuchte: var(--led); }
.knopf[disabled] { opacity: .6; cursor: progress; }

.textlink { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; color: var(--tinte); }
.textlink .glyph { width: 20px; height: 20px; transition: transform .2s; }
.textlink:hover .glyph { transform: translateX(4px); }
.textlink-hell { color: #fff; }

.strichliste li { position: relative; padding-left: 30px; margin-top: 10px; }
.strichliste li::before { content: ""; position: absolute; left: 0; top: .78em; width: 18px; height: 1.5px; background: var(--led-tief); }

/* ---------- Abschnittskopf: Kabel vom Rand, Kapsel, Leuchte geht an ---------- */
.kopfzeile { position: relative; max-width: 900px; padding-top: 46px; margin-bottom: clamp(36px, 5vw, 70px); }
.kopfzeile p { margin-top: 20px; max-width: 640px; font-size: 1.2rem; color: var(--grau); }
.kopfzeile::before { content: ""; position: absolute; top: 8px; left: -100vw; width: 100vw; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.kopfzeile::after { content: ""; position: absolute; top: 0; left: 0; width: 36px; height: 17px; border-radius: 9px;
  background: radial-gradient(circle at 25px 50%, var(--leuchte) 0 3.6px, transparent 4.2px), currentColor; transition: --leuchte .5s .7s; }
.kopfzeile.ist-an::before { transform: scaleX(1); }
.kopfzeile.ist-an { --leuchte: var(--led); }
.kopfzeile-hell { color: var(--hell); }
.kopfzeile-hell p { color: rgb(244 245 240 / .75); }
.kein-js .kopfzeile::before { transform: none; }

/* ---------- Kopf ---------- */
.mast { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--mast-hoehe); background: rgb(255 255 255 / .94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linie); transition: background .3s, border-color .3s; }
.mast-zeile { height: 100%; display: flex; align-items: center; gap: 28px; }
.marke { display: block; flex: none; }
.marke img { width: auto; height: 26px; }
.marke-hell { display: none; }
.mast-nav { display: flex; gap: clamp(14px, 2.2vw, 34px); margin-left: auto; font-size: 1.02rem; }
.mast-nav a { text-decoration: none; padding: 6px 0; border-bottom: 1.5px solid transparent; transition: border-color .2s; }
.mast-nav a:hover { border-color: currentColor; }
.mast-rechts { display: flex; align-items: center; gap: 10px; }
.mast-schalter { display: none; width: 44px; height: 44px; border: 0; background: none; padding: 10px; }
.auf-start .mast:not(.ist-fest) { background: transparent; border-color: transparent; backdrop-filter: none; color: #fff; }
.auf-start .mast:not(.ist-fest) .marke-dunkel { display: none; }
.auf-start .mast:not(.ist-fest) .marke-hell { display: block; }
.auf-start .mast:not(.ist-fest) .knopf { background: transparent; border-color: rgb(255 255 255 / .6); }
.auf-start .mast:not(.ist-fest) .knopf:hover { background: #fff; color: var(--tinte); }
main { display: block; }
.seite main { padding-top: var(--mast-hoehe); }

/* ---------- Bühne ---------- */
.buehne { position: relative; min-height: min(100svh, 1000px); display: flex; flex-direction: column; justify-content: flex-end; color: #fff; background: #0a1711; isolation: isolate; overflow: hidden; }
.buehne-film { position: absolute; inset: 0; z-index: -1; }
.buehne-film video { width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; }
.buehne-film::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(90deg, rgb(6 16 11 / .86) 0%, rgb(6 16 11 / .62) 34%, rgb(6 16 11 / 0) 66%),
  linear-gradient(0deg, rgb(6 16 11 / .8) 0%, rgb(6 16 11 / 0) 34%),
  linear-gradient(180deg, rgb(6 16 11 / .55) 0%, rgb(6 16 11 / 0) 22%); }
.buehne-inhalt { padding-top: calc(var(--mast-hoehe) + 40px); padding-bottom: clamp(20px, 4vh, 48px); }
.buehne-vor { font-size: 1.1rem; font-weight: 500; color: var(--led); letter-spacing: .01em; }
.buehne h1 { font-size: clamp(3.5rem, 10.6vw, 10.4rem); letter-spacing: -.045em; line-height: .9; margin: 10px 0 0 -.05em; }
.buehne-text { max-width: 560px; margin-top: clamp(20px, 3vh, 34px); font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.5; color: rgb(255 255 255 / .9); }
.buehne-wahl { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 30px; margin-top: clamp(24px, 4vh, 40px); }
.buehne-fakten { display: flex; flex-wrap: wrap; gap: 6px 30px; margin-top: clamp(22px, 4vh, 40px); font-size: 1rem; color: rgb(255 255 255 / .82); }
.buehne-fakten li { position: relative; padding-left: 18px; }
.buehne-fakten li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--led); }
.buehne-fuss { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; padding-bottom: 26px; }
.pegel { flex: 1 1 auto; min-width: 0; max-width: 760px; }
.pegel canvas { width: 100%; height: 74px; }
.pegel-schild { margin-top: 2px; font-size: .92rem; color: rgb(255 255 255 / .85); min-height: 1.5em; }
.pegel-schild small { margin-left: 10px; font-size: .8rem; color: rgb(255 255 255 / .55); }
.film-regler { flex: none; display: flex; align-items: center; gap: 12px; padding: 6px 16px 6px 6px; border-radius: 999px; background: rgb(8 20 14 / .55); backdrop-filter: blur(8px); border: 1px solid rgb(255 255 255 / .18); font-size: .88rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.film-taste { width: 38px; height: 38px; border-radius: 50%; border: 0; background: #fff; color: var(--tinte); display: grid; place-items: center; padding: 0; }
.film-taste .glyph { width: 18px; height: 18px; stroke-width: 2.2; }
.film-taste .ist-start { display: none; }
.film-taste.ist-aus .ist-start { display: block; }
.film-taste.ist-aus .ist-pause { display: none; }
#filmLauf { width: 120px; accent-color: var(--led); height: 4px; }

/* ---------- Regal ---------- */
.regal-reihe { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--linie); margin-inline: -22px; }
.fach { padding: 0 22px 34px; border-left: 1px solid var(--linie); display: flex; flex-direction: column; }
.fach:first-child { border-left-color: transparent; }
.fach-bild { display: block; aspect-ratio: 1; overflow: hidden; margin: 8px -8px 6px; }
.fach-bild img { width: 100%; height: 100%; object-fit: contain; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.fach:hover .fach-bild img { transform: scale(1.06) rotate(-1.5deg); }
.fach-ort { display: inline-flex; align-items: center; gap: 8px; font-size: .95rem; font-weight: 500; color: var(--led-tief); }
.fach-ort::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--linie); transition: background .3s, box-shadow .3s; }
.fach:hover .fach-ort::before { background: var(--led); box-shadow: 0 0 0 4px rgb(87 213 142 / .25); }
.fach h3 { margin-top: 6px; font-size: 1.7rem; font-weight: 400; letter-spacing: -.01em; }
.fach h3 a { text-decoration: none; }
.fach h3 a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.fach-art { font-size: .98rem; color: var(--grau); }
.fach-kurz { margin-top: 12px; font-size: 1.02rem; line-height: 1.45; flex: 1; }
.fach-preis { margin-top: 18px; font-size: 2rem; font-weight: 300; line-height: 1.1; letter-spacing: -.02em; }
.fach-preis small { display: block; margin-top: 4px; font-size: .82rem; font-weight: 400; letter-spacing: 0; color: var(--grau); }
.fach-wahl { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; margin-top: 18px; }
.fach-wahl .textlink { font-size: 1rem; }

/* ---------- Abstand ---------- */
.abstand { background: var(--nebel); }
.abstand-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(30px, 6vw, 100px); align-items: start; }
.abstand-text { position: relative; padding-top: 46px; }
.abstand-text::after { content: ""; position: absolute; top: 0; left: 0; width: 36px; height: 17px; border-radius: 9px; background: radial-gradient(circle at 25px 50%, var(--led) 0 3.6px, transparent 4.2px), var(--tinte); }
.abstand-text p { margin-top: 20px; }
.messplatz { background: #fff; border: 1px solid var(--linie); border-radius: 22px; padding: clamp(20px, 3vw, 40px); }
.messplatz-bild svg { width: 100%; height: auto; overflow: visible; }
.kopf-form { fill: none; stroke: var(--tinte); stroke-width: 2; stroke-linejoin: round; }
.wellen path { fill: none; stroke: var(--led-tief); stroke-width: 2; stroke-linecap: round; }
.mass-linie { stroke: var(--linie); stroke-width: 2; stroke-dasharray: 2 8; stroke-linecap: round; }
.mass-lot { stroke: var(--tinte); stroke-width: 1.2; stroke-dasharray: 3 4; }
.mass-mikro { fill: var(--tinte); }
.mass-led { fill: var(--led); }
#massMarke { transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
.messplatz-regler { display: block; margin-top: 8px; }
.messplatz-regler span { display: block; font-weight: 500; }
.messplatz-regler output { font-weight: 300; font-size: 1.9rem; letter-spacing: -.02em; margin-left: 8px; font-variant-numeric: tabular-nums; }
input[type="range"]#abstandRegler { -webkit-appearance: none; appearance: none; width: 100%; height: 34px; margin-top: 6px; background: transparent; }
#abstandRegler::-webkit-slider-runnable-track { height: 2px; background: var(--tinte); }
#abstandRegler::-moz-range-track { height: 2px; background: var(--tinte); }
#abstandRegler::-webkit-slider-thumb { -webkit-appearance: none; width: 52px; height: 26px; margin-top: -12px; border-radius: 13px; border: 0; background: radial-gradient(circle at 37px 50%, var(--led) 0 5px, transparent 5.6px), var(--tinte); cursor: grab; }
#abstandRegler::-moz-range-thumb { width: 52px; height: 26px; border-radius: 13px; border: 0; background: radial-gradient(circle at 37px 50%, var(--led) 0 5px, transparent 5.6px), var(--tinte); cursor: grab; }
.messplatz-orte { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.messplatz-orte button { border: 1px solid var(--linie); background: #fff; border-radius: 999px; padding: 7px 14px; font-size: .92rem; transition: border-color .2s, background .2s, color .2s; }
.messplatz-orte button:hover { border-color: var(--tinte); }
.messplatz-orte button.ist-aktiv { background: var(--tinte); border-color: var(--tinte); color: #fff; }
.balken { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--linie); }
.balken-zeile { display: grid; grid-template-columns: 74px 1fr 78px; align-items: center; gap: 14px; margin-top: 10px; font-size: 1rem; }
.balken-zeile b { font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.balken-bahn { height: 14px; border-radius: 7px; background: var(--nebel); overflow: hidden; }
.balken-bahn i { display: block; height: 100%; border-radius: 7px; background: var(--led-tief); transition: width .3s cubic-bezier(.2, .7, .2, 1); }
.balken-bahn i.ist-raum { background: #a9b0a6; }
.balken-urteil { margin-top: 18px; font-size: 1.15rem; min-height: 3.3em; }

/* ---------- Kragen ---------- */
.kragen-wand { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 14px; }
.kragen-bild { position: relative; display: block; overflow: hidden; border-radius: 6px; background: var(--nebel); color: #fff; text-decoration: none; }
.kragen-bild picture, .kragen-bild img { width: 100%; height: 100%; }
.kragen-bild img { object-fit: cover; aspect-ratio: 4 / 5; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.kragen-bild:hover img { transform: scale(1.04); }
.kragen-bild-3 { grid-column: 1; grid-row: 1 / span 2; }
.kragen-bild-3 img { aspect-ratio: auto; }
.kragen-schild { position: absolute; inset: auto 0 0 0; padding: 50px 18px 16px; font-size: .95rem; line-height: 1.3; background: linear-gradient(0deg, rgb(6 16 11 / .78), rgb(6 16 11 / 0)); }
.kragen-schild b { display: block; font-size: 1.25rem; font-weight: 500; }

/* ---------- Finder ---------- */
.finder-raster { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(30px, 6vw, 90px); align-items: start; }
.finder-fragen { position: relative; padding-top: 46px; }
.finder-fragen::after { content: ""; position: absolute; top: 0; left: 0; width: 36px; height: 17px; border-radius: 9px; background: radial-gradient(circle at 25px 50%, var(--led) 0 3.6px, transparent 4.2px), var(--tinte); }
.finder-fragen > p { margin-top: 20px; max-width: 540px; font-size: 1.2rem; color: var(--grau); }
.finder-form fieldset { border: 0; padding: 0; margin: 34px 0 0; }
.finder-form legend { padding: 0; font-size: 1.3rem; font-weight: 500; }
.finder-wahl { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.finder-wahl label { position: relative; cursor: pointer; }
.finder-wahl input { position: absolute; opacity: 0; inset: 0; }
.finder-wahl span { display: inline-flex; align-items: center; gap: 10px; padding: 11px 22px 11px 16px; border: 1.5px solid var(--linie); border-radius: 999px; transition: border-color .2s, background .2s, color .2s; }
.finder-wahl span::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--linie); transition: background .2s; }
.finder-wahl label:hover span { border-color: var(--tinte); }
.finder-wahl input:checked + span { background: var(--tinte); border-color: var(--tinte); color: #fff; }
.finder-wahl input:checked + span::before { background: var(--led); }
.finder-wahl input:focus-visible + span { outline: 2px solid var(--led-tief); outline-offset: 3px; }
.finder-antwort { position: sticky; top: calc(var(--mast-hoehe) + 24px); background: var(--nebel); border-radius: 22px; padding: clamp(22px, 3vw, 40px); }
.finder-vor { font-weight: 500; color: var(--led-tief); }
.finder-antwort img { width: min(300px, 70%); margin: 4px auto 0; mix-blend-mode: multiply; transition: opacity .25s; }
.finder-antwort h3 { font-size: 2.3rem; font-weight: 300; letter-spacing: -.02em; }
.finder-art { color: var(--grau); }
#finderGrund { margin-top: 14px; }
.finder-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 22px; }
.finder-preisnote { margin-top: 14px; }
.finder-zweite { margin-top: 8px; font-size: 1rem; color: var(--grau); min-height: 1.6em; }
.finder-zweite a { color: var(--led-tief); }
.finder-antwort.ist-wechsel img, .finder-antwort.ist-wechsel h3, .finder-antwort.ist-wechsel p { opacity: .25; }
.finder-antwort h3, .finder-antwort p { transition: opacity .25s; }

/* ---------- Stecker-Tabelle ---------- */
.stecker { background: var(--nebel); }
.tabelle-rolle { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.passt { width: 100%; min-width: 900px; table-layout: fixed; border-collapse: collapse; background: #fff; border-radius: 16px; overflow: hidden; font-size: 1rem; }
.passt th, .passt td { padding: 16px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linie); }
.passt tbody tr:last-child th, .passt tbody tr:last-child td { border-bottom: 0; }
.passt thead th { font-weight: 500; font-size: 1.1rem; vertical-align: bottom; }
.passt thead a { text-decoration: none; }
.passt thead a:hover { text-decoration: underline; text-underline-offset: 4px; }
.passt thead small { display: block; font-weight: 400; color: var(--grau); font-size: .9rem; }
.passt tbody th { font-weight: 500; width: 21%; position: sticky; left: 0; background: #fff; }
.passt td { position: relative; padding-left: 38px; line-height: 1.35; }
.passt td::before { content: ""; position: absolute; left: 16px; top: 1.32em; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid #a9b0a6; }
.passt td.ist-ja::before { background: var(--led); border-color: var(--led); }
.passt td.ist-halb::before { border-color: var(--led-tief); background: linear-gradient(90deg, var(--led-tief) 50%, transparent 50%); }
.passt td.ist-nein { color: #626a60; }
.stecker .klein { margin-top: 14px; max-width: 760px; }

/* ---------- Ablauf ---------- */
.ablauf { background: var(--tanne); color: var(--hell); }
.ablauf-kette { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: schritt; border-top: 1.5px solid rgb(244 245 240 / .35); }
.ablauf-kette li { position: relative; padding: 40px 28px 0 0; counter-increment: schritt; }
.ablauf-kette li::before { content: counter(schritt); position: absolute; top: -14px; left: 0; width: 52px; height: 27px; border-radius: 14px; background: radial-gradient(circle at 38px 50%, var(--led) 0 5px, transparent 5.6px), var(--hell); color: var(--tanne); font-size: .9rem; font-weight: 600; line-height: 27px; padding-left: 13px; }
.ablauf-kette b { display: block; font-size: 1.45rem; font-weight: 400; letter-spacing: -.01em; }
.ablauf-kette p { margin-top: 10px; color: rgb(244 245 240 / .78); font-size: 1.05rem; line-height: 1.5; }
.ablauf-zusagen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 40px; margin-top: clamp(50px, 7vw, 90px); }
.ablauf-zusagen li { padding-top: 20px; border-top: 1px solid rgb(244 245 240 / .2); color: rgb(244 245 240 / .78); font-size: 1.05rem; }
.ablauf-zusagen b { color: var(--hell); font-weight: 500; }

/* ---------- Fragen ---------- */
.fragen-raster { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(30px, 6vw, 90px); align-items: start; }
.fragen-kopf { position: sticky; top: calc(var(--mast-hoehe) + 24px); padding-top: 46px; }
.fragen-kopf::after { content: ""; position: absolute; top: 0; left: 0; width: 36px; height: 17px; border-radius: 9px; background: radial-gradient(circle at 25px 50%, var(--led) 0 3.6px, transparent 4.2px), var(--tinte); }
.fragen-kopf p { margin-top: 20px; color: var(--grau); }
.fragen-liste { columns: 2; column-gap: 50px; }
.fragen-liste > div { break-inside: avoid; padding: 0 0 30px; }
.fragen-liste dt { font-size: 1.25rem; font-weight: 500; line-height: 1.25; padding-top: 18px; border-top: 1px solid var(--tinte); }
.fragen-liste dd { margin-top: 10px; font-size: 1.05rem; color: #3c423a; }

/* ---------- Kasse und Formular ---------- */
.kasse { background: var(--nebel); }
.kasse-seite { padding-block: clamp(40px, 6vw, 90px) clamp(70px, 9vw, 130px); }
.kasse-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(30px, 6vw, 90px); align-items: start; }
.kasse-text { position: relative; padding-top: 46px; }
.kasse-text::after { content: ""; position: absolute; top: 0; left: 0; width: 36px; height: 17px; border-radius: 9px; background: radial-gradient(circle at 25px 50%, var(--led) 0 3.6px, transparent 4.2px), var(--tinte); }
.kasse-text h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); }
.kasse-text > p { margin-top: 20px; }
.kasse-text .strichliste { margin-top: 24px; }
.kasse-text .klein { margin-top: 26px; }
.kasse-artikel { display: flex; align-items: center; gap: 18px; margin-top: 28px; padding: 12px 20px 12px 12px; background: #fff; border: 1px solid var(--linie); border-radius: 18px; }
.kasse-artikel img { width: 110px; height: 110px; object-fit: contain; }
.kasse-artikel b { display: block; font-size: 1.4rem; font-weight: 500; }
.kasse-artikel span { display: block; color: var(--grau); font-size: 1rem; }
.kasse-artikel strong { display: block; margin-top: 4px; font-size: 1.6rem; font-weight: 300; }

.bogen { background: #fff; border: 1px solid var(--linie); border-radius: 22px; padding: clamp(20px, 3vw, 38px); display: grid; gap: 16px; }
.feld { display: block; }
.feld > span { display: block; margin-bottom: 6px; font-size: .98rem; font-weight: 500; }
.feld input, .feld select, .feld textarea { width: 100%; padding: 13px 15px; border: 1.5px solid var(--linie); border-radius: 12px; background: #fff; font-size: 1.08rem; transition: border-color .2s, box-shadow .2s; }
.feld select { appearance: none; padding-right: 42px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b1d1a' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 20px; text-overflow: ellipsis; }
.feld input::placeholder, .feld textarea::placeholder { color: #687066; opacity: 1; }
.feld input:hover, .feld select:hover, .feld textarea:hover { border-color: #aab1a7; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: 0; border-color: var(--led-tief); box-shadow: 0 0 0 4px rgb(87 213 142 / .28); }
.feld .ist-falsch, .haken .ist-falsch { border-color: var(--warn); }
.feld em { display: block; margin-top: 5px; font-style: normal; font-size: .92rem; color: var(--warn); }
.feld-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.feld-paar-plz { grid-template-columns: 130px 1fr; }
.haken { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; font-size: .98rem; line-height: 1.45; cursor: pointer; }
.haken input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--led-tief); }
.haken input.ist-falsch { outline: 2px solid var(--warn); outline-offset: 2px; }
.bogen-summe { display: grid; gap: 0; margin-top: 4px; border-top: 1.5px solid var(--tinte); }
.bogen-summe > div { display: grid; grid-template-columns: 1fr auto; column-gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--linie); }
.bogen-summe span { color: var(--grau); font-size: .98rem; }
.bogen-summe b { font-weight: 500; text-align: right; }
.bogen-summe small { grid-column: 1 / -1; text-align: right; color: var(--grau); font-size: .88rem; }
.bogen-summe > div:last-child b { font-size: 1.6rem; font-weight: 400; }
.bogen-fehler { color: var(--warn); font-size: .98rem; }
.bogen-hinweis { font-size: .92rem; color: var(--grau); text-align: center; }
.bogen-widerruf { margin: 24px 0 10px; background: var(--nebel); }
.bogen-widerruf .bogen-fehler { padding: 12px 16px; border-left: 3px solid var(--warn); background: #fff; border-radius: 0 10px 10px 0; }
.bogen-widerruf .feld input { scroll-margin-top: 240px; }
.bogen-widerruf .bogen-hinweis { text-align: left; }

/* ---------- Fuß ---------- */
.fuss { background: var(--tanne); color: rgb(244 245 240 / .8); font-size: 1rem; padding-top: clamp(56px, 7vw, 100px); }
.fuss a { text-decoration: none; }
.fuss a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.fuss-oben { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.fuss-marke img { width: 250px; }
.fuss-marke p { margin-top: 22px; max-width: 360px; }
.fuss-marke address { margin-top: 18px; }
.fuss-spalte { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.fuss-spalte b { color: var(--hell); font-weight: 500; font-size: 1.1rem; margin-bottom: 6px; }
.fuss-spalte a span { color: rgb(244 245 240 / .5); margin-left: 4px; }
.fuss-link { border: 0; background: none; padding: 0; color: inherit; text-align: left; }
.fuss-link:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.fuss-widerruf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 30px; margin-top: clamp(40px, 5vw, 70px); padding-block: 26px; border-block: 1px solid rgb(244 245 240 / .16); }
.fuss-widerruf p { max-width: 640px; color: var(--hell); }
.fuss-klein { padding-block: 26px; font-size: .88rem; line-height: 1.55; color: rgb(244 245 240 / .58); }
.fuss-klein p { max-width: 1000px; }
.fuss-unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 30px; padding-block: 20px 34px; border-top: 1px solid rgb(244 245 240 / .16); font-size: .92rem; }

/* ---------- Cookie-Hinweis, mobile Leiste ---------- */
.keks { position: fixed; z-index: 70; left: 18px; bottom: 18px; width: min(560px, calc(100vw - 36px)); padding: 22px 24px; background: #fff; border: 1px solid var(--linie); border-radius: 20px; box-shadow: 0 18px 50px rgb(15 42 30 / .18); font-size: .98rem; line-height: 1.5; }
.keks[hidden] { display: none; }
.keks-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.keks-knoepfe .knopf { justify-content: center; }
.leiste { position: fixed; z-index: 40; inset: auto 0 0 0; display: none; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--linie); transform: translateY(110%); transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.leiste.ist-da { transform: none; }
.leiste-text b { display: block; font-size: 1.2rem; font-weight: 500; line-height: 1.1; }
.leiste-text span { font-size: .85rem; color: var(--grau); }

/* ---------- Produktseite ---------- */
.produkt { padding-block: clamp(24px, 4vw, 60px) clamp(70px, 9vw, 130px); }
.produkt-raster { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(30px, 5vw, 80px); align-items: start; }
.produkt-bilder { position: sticky; top: calc(var(--mast-hoehe) + 20px); display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.produkt-foto { grid-column: 1 / -1; border: 1px solid var(--linie); border-radius: 22px; overflow: hidden; }
.produkt-foto img { width: 100%; aspect-ratio: 5 / 4; object-fit: contain; }
.produkt-bildhinweis { grid-column: 1 / -1; margin-top: -6px; }
.produkt-szene { grid-column: 1 / -1; border-radius: 22px; overflow: hidden; }
.produkt-szene img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 40%; }
.pfad { font-size: .92rem; color: var(--grau); }
.pfad a { text-decoration: none; }
.pfad a:hover { text-decoration: underline; }
.produkt-ort { margin-top: 22px; display: inline-flex; align-items: center; gap: 9px; font-weight: 500; color: var(--led-tief); }
.produkt-ort::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--led); }
.produkt-text h1 { font-size: clamp(3rem, 6.4vw, 5.6rem); letter-spacing: -.035em; margin-top: 4px; }
.produkt-art { font-size: 1.3rem; color: var(--grau); margin-top: 6px; }
.produkt-lead { margin-top: 22px; font-size: 1.2rem; line-height: 1.55; }
.produkt-kauf { margin-top: 28px; padding: 24px 0; border-block: 1.5px solid var(--tinte); }
.produkt-preis { font-size: 3rem; font-weight: 300; letter-spacing: -.03em; line-height: 1; margin-bottom: 18px; }
.produkt-preis small { display: block; margin-top: 8px; font-size: .95rem; font-weight: 400; letter-spacing: 0; color: var(--grau); }
.produkt-kauf .klein { margin-top: 14px; }
.merkzettel { margin-top: 22px; padding: 14px 18px; border-left: 3px solid var(--led-tief); background: var(--nebel); font-size: 1.02rem; border-radius: 0 12px 12px 0; }
.merkzettel b { font-weight: 500; }
.produkt-text h2 { font-size: 1.7rem; font-weight: 400; letter-spacing: -.01em; margin-top: 46px; }
.staerken > div { padding: 16px 0; border-bottom: 1px solid var(--linie); }
.staerken dt { font-weight: 500; font-size: 1.15rem; }
.staerken dd { margin-top: 4px; color: #3c423a; }
.daten { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 1.02rem; }
.daten th, .daten td { text-align: left; vertical-align: top; padding: 11px 0; border-bottom: 1px solid var(--linie); }
.daten th { width: 42%; padding-right: 16px; font-weight: 400; color: var(--grau); }
.produkt-text .strichliste { margin-top: 12px; }
.produkt-andere { margin-top: clamp(60px, 8vw, 110px); }
.produkt-andere h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.andere-reihe { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 26px; }
.andere-reihe a { display: block; text-decoration: none; padding: 10px 16px 18px; border: 1px solid var(--linie); border-radius: 18px; transition: border-color .2s; }
.andere-reihe a:hover { border-color: var(--tinte); }
.andere-reihe img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.andere-reihe b { display: block; font-weight: 500; font-size: 1.2rem; }
.andere-reihe span { color: var(--grau); font-size: .95rem; }

/* ---------- Danke, 404 ---------- */
.danke { padding-block: clamp(50px, 8vw, 120px); }
.danke-raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 40px; align-items: center; }
.danke h1 { font-size: clamp(2.6rem, 6vw, 5rem); }
.danke .gross { margin-top: 24px; max-width: 680px; }
.danke-schritte { margin: 30px 0; counter-reset: d; max-width: 640px; }
.danke-schritte li { counter-increment: d; position: relative; padding: 14px 0 14px 50px; border-top: 1px solid var(--linie); }
.danke-schritte li::before { content: counter(d); position: absolute; left: 0; top: 14px; width: 34px; height: 24px; border-radius: 12px; background: var(--tinte); color: #fff; font-size: .85rem; font-weight: 600; text-align: center; line-height: 24px; }
.danke-zwischen { font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 400; letter-spacing: -.015em; margin-top: 44px; }
.eingang-text { white-space: pre-wrap; font: inherit; font-size: 1rem; line-height: 1.55; margin: 26px 0 16px; max-width: 680px; padding: 18px 20px; border: 1.5px solid var(--led-tief); border-radius: 14px; background: #f1fbf5; }
.danke p a { color: var(--led-tief); text-underline-offset: 3px; }
.danke-wahl { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 30px; }

/* ---------- Über uns ---------- */
.ueber-kopf { padding-block: clamp(50px, 8vw, 110px) 0; }
.ueber-kopf h1 { font-size: clamp(2.8rem, 7vw, 6.4rem); max-width: 1000px; }
.ueber-kopf .gross { margin-top: 28px; max-width: 760px; }
.ueber-reihe { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin-top: clamp(30px, 5vw, 60px); border-block: 1px solid var(--linie); }
.ueber-reihe img { width: 100%; aspect-ratio: 1; object-fit: contain; border-left: 1px solid var(--linie); }
.ueber-reihe img:first-child { border-left: 0; }
.ueber-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 70px) clamp(30px, 6vw, 100px); }
.ueber-spalten h2 { font-size: clamp(1.7rem, 2.8vw, 2.4rem); font-weight: 400; letter-spacing: -.015em; }
.ueber-spalten p, .ueber-spalten address { margin-top: 16px; }
.ueber-spalten .strichliste { margin-top: 16px; }
.ueber-spalten a { color: var(--led-tief); text-underline-offset: 3px; }
.ueber-kontakt { background: var(--nebel); }
.ueber-kontakt .gross a { text-decoration: none; color: var(--tinte); }
.ueber-kontakt .gross a:hover { text-decoration: underline; }

/* ---------- Ratgeber ---------- */
.ratgeber-kopf { padding-block: clamp(50px, 8vw, 110px) clamp(30px, 4vw, 50px); }
.ratgeber-kopf h1 { font-size: clamp(3rem, 8vw, 7rem); }
.ratgeber-kopf .gross { margin-top: 22px; max-width: 720px; }
.ratgeber-liste { padding-bottom: clamp(70px, 9vw, 130px); }
.beitrag-gross { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 60px); align-items: center; text-decoration: none; padding-bottom: clamp(36px, 5vw, 60px); margin-bottom: clamp(36px, 5vw, 60px); border-bottom: 1px solid var(--linie); }
.beitrag-gross img, .beitrag-karte img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 6px; background: var(--nebel); }
.beitrag-gross h2 { font-size: clamp(1.9rem, 3.4vw, 3rem); margin-top: 10px; }
.beitrag-gross p { margin-top: 16px; }
.beitrag-gross .textlink { margin-top: 20px; }
.beitrag-meta { font-size: .92rem; color: var(--grau); }
.beitrag-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(30px, 4vw, 50px) clamp(20px, 3vw, 40px); }
.beitrag-karte { display: block; text-decoration: none; }
.beitrag-karte .beitrag-meta { margin-top: 14px; }
.beitrag-karte h3 { margin-top: 6px; font-size: 1.4rem; font-weight: 400; line-height: 1.2; letter-spacing: -.01em; }
.beitrag-karte p:not(.beitrag-meta) { margin-top: 8px; font-size: 1.02rem; color: #3c423a; }
.beitrag-karte:hover h3, .beitrag-gross:hover h2 { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }

.beitrag { padding-block: clamp(30px, 5vw, 70px) clamp(70px, 9vw, 130px); }
.beitrag-offen { display: inline-block; margin-bottom: 22px; padding: 8px 14px; border: 1px solid var(--tinte); border-radius: 10px; font-size: 1.125rem; line-height: 1.4; }
.beitrag-kopf h1 { font-size: clamp(2.2rem, 5vw, 4rem); margin-top: 14px; }
.beitrag-kopf .beitrag-meta { margin-top: 18px; }
.beitrag-bild { margin-block: clamp(26px, 4vw, 50px); }
.beitrag-bild img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; }
.lesetext > * + * { margin-top: 1.1em; }
.lesetext h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 400; letter-spacing: -.015em; line-height: 1.15; margin-top: 1.9em; }
.lesetext h3 { margin-top: 1.6em; }
.lesetext ul, .lesetext ol { padding-left: 0; }
.lesetext ul li { position: relative; padding-left: 28px; margin-top: .55em; }
.lesetext ul li::before { content: ""; position: absolute; left: 0; top: .8em; width: 16px; height: 1.5px; background: var(--led-tief); }
.lesetext ol { list-style: decimal; padding-left: 1.3em; }
.lesetext ol li { margin-top: .55em; }
.lesetext strong { font-weight: 600; }
.lesetext table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.lesetext th, .lesetext td { text-align: left; vertical-align: top; padding: 11px 14px 11px 0; border-bottom: 1px solid var(--linie); }
.lesetext th { font-weight: 500; border-bottom-color: var(--tinte); }
.lesetext code { font-family: ui-monospace, Consolas, monospace; font-size: .9em; background: var(--nebel); padding: 2px 6px; border-radius: 5px; }
.lesetext pre { white-space: pre-wrap; font: inherit; font-size: 1rem; background: #fff; border: 1px solid var(--linie); border-radius: 12px; padding: 16px 18px; }
.lesetext .kasten { padding: 16px 20px; background: var(--nebel); border-radius: 12px; font-size: 1.02rem; }
.kein-link { overflow-wrap: anywhere; }
.muster li { padding-left: 28px; }
.tipp { display: grid; grid-template-columns: 200px 1fr; gap: 28px; align-items: center; margin-top: clamp(40px, 6vw, 70px); padding-block: 26px; border-block: 1.5px solid var(--tinte); }
.tipp img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.tipp-vor { font-weight: 500; color: var(--led-tief); }
.tipp h2 { font-size: 2rem; font-weight: 300; margin-top: 2px; }
.tipp p:not(.tipp-vor) { margin-top: 10px; }
.tipp-wahl { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 18px; }
.beitrag-mehr { margin-top: clamp(60px, 8vw, 110px); }
.beitrag-mehr h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin-bottom: 26px; }

/* ---------- Rechtstexte ---------- */
.recht-kopf { padding-block: clamp(50px, 7vw, 100px) clamp(24px, 3vw, 40px); }
.recht-kopf h1 { font-size: clamp(2.4rem, 5.4vw, 4.4rem); overflow-wrap: anywhere; hyphens: auto; }
.recht-kopf .gross { margin-top: 14px; color: var(--grau); }
.lesetext-recht { padding-bottom: clamp(70px, 9vw, 130px); font-size: 1.06rem; }
.lesetext-recht h2 { font-size: 1.5rem; font-weight: 500; letter-spacing: 0; }
.lesetext-recht h3 { font-size: 1.2rem; }
.lesetext-recht table { font-size: .95rem; min-width: 640px; }
.eingang { padding: 22px 24px; border: 1.5px solid var(--led-tief); border-radius: 16px; background: #f1fbf5; margin-bottom: 30px; }
.eingang h2 { margin-top: 0; }

/* ---------- Schmalere Bildschirme ---------- */
@media (max-width: 1180px) {
  .regal-reihe { grid-auto-flow: column; grid-auto-columns: minmax(250px, 30%); grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 0; padding-bottom: 10px; margin-right: calc(-1 * var(--rand)); padding-right: var(--rand); }
  .fach { scroll-snap-align: start; }
}
@media (max-width: 980px) {
  .mast-nav { position: fixed; inset: var(--mast-hoehe) 0 auto 0; flex-direction: column; gap: 0; margin: 0; padding: 8px var(--rand) 22px; background: #fff; color: var(--tinte); border-bottom: 1px solid var(--linie); font-size: 1.25rem; display: none; }
  .mast-nav.ist-offen { display: flex; }
  .mast-nav a { padding: 14px 0; border-bottom: 1px solid var(--linie); }
  .mast-rechts { margin-left: auto; }
  .mast-schalter { display: block; }
  .abstand-raster, .finder-raster, .kasse-raster, .fragen-raster, .produkt-raster, .danke-raster, .beitrag-gross { grid-template-columns: 1fr; }
  .finder-antwort, .produkt-bilder { position: static; }
  .fragen-kopf { position: relative; top: auto; }
  .fuss-oben { grid-template-columns: 1fr 1fr; }
  .ablauf-kette { grid-template-columns: 1fr 1fr; row-gap: 46px; border-top: 0; }
  .ablauf-kette li { border-top: 1.5px solid rgb(244 245 240 / .35); }
  .beitrag-raster { grid-template-columns: 1fr 1fr; }
  .danke-raster img { max-width: 320px; }
}
@media (max-width: 760px) {
  body { font-size: 1.06rem; }
  :root { --mast-hoehe: 64px; }
  .marke img { height: 22px; }
  .mast-rechts .knopf { display: none; }
  .buehne { min-height: min(100svh, 860px); }
  .buehne-film video { object-position: 78% 50%; }
  .buehne-film::after { background:
    linear-gradient(0deg, rgb(6 16 11 / .94) 0%, rgb(6 16 11 / .78) 42%, rgb(6 16 11 / .1) 74%),
    linear-gradient(180deg, rgb(6 16 11 / .6) 0%, rgb(6 16 11 / 0) 20%); }
  .buehne-fuss { flex-direction: column; align-items: stretch; gap: 10px; padding-bottom: 18px; }
  .pegel canvas { height: 48px; }
  .film-regler { align-self: flex-start; }
  .regal-reihe { grid-auto-columns: 74%; }
  .kragen-wand { grid-template-columns: 1fr 1fr; gap: 8px; }
  .kragen-bild-3 { grid-column: 1 / -1; grid-row: auto; }
  .kragen-bild-3 img { aspect-ratio: 4 / 3; object-position: 50% 30%; }
  .kragen-schild { padding: 40px 12px 12px; font-size: .85rem; }
  .kragen-schild b { font-size: 1.05rem; }
  .fragen-liste { columns: 1; }
  .ablauf-kette, .ablauf-zusagen, .ueber-spalten, .beitrag-raster, .fuss-oben { grid-template-columns: 1fr; }
  .ablauf-zusagen { gap: 22px; }
  .feld-paar { grid-template-columns: 1fr; }
  .feld-paar-plz { grid-template-columns: 120px 1fr; }
  .andere-reihe { grid-template-columns: 1fr 1fr; }
  .ueber-reihe { grid-template-columns: repeat(5, 1fr); }
  .tipp { grid-template-columns: 1fr; }
  .tipp img { max-width: 200px; }
  .leiste { display: flex; }
  .keks { left: 10px; right: 10px; bottom: 10px; width: auto; padding: 18px; }
  .auf-start .keks { bottom: 10px; }
  .balken-zeile { grid-template-columns: 62px 1fr 64px; gap: 10px; }
  .messplatz-regler output { font-size: 1.5rem; }
}