/* NULLBEFUND · nullbefund.de
   Konzept „Prüflabor im Tresor“: nachtblaue Bänder (Tresor) wechseln mit hellem Papier (Befund). Habibi für Aussagen, Hanken Grotesk für Text,
   IBM Plex Mono für alles, was ein Gerät ausgibt (Seriennummern, Status). Prüfgrün nur für „bestanden“ und für Handlungen. Feste helle Farbwelt. */
:root {
  color-scheme: light;
  --nacht: #0b1724; --tresor: #0d1b2a; --blau: #13304f; --stahl: #8da2b8; --stahl-hell: #c9d4df;
  --pruef: #2e9e6b; --pruef-hell: #7fd1a8; --pruef-tief: #1f7a50; --pruef-flaeche: #e3f2ea;
  --papier: #f3f5f8; --karte: #ffffff; --tinte: #0d1b2a; --grau: #566577; --linie: #dce3ea;
  --display: 'Habibi', Georgia, 'Times New Roman', serif;
  --label: 'Strait', 'Arial Narrow', sans-serif;
  --text: 'Hanken Grotesk', 'Segoe UI', Helvetica, Arial, sans-serif;
  --daten: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--papier); color: var(--tinte); font: 17px/1.6 var(--text); -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; }
a { color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--pruef); outline-offset: 3px; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
h2 { font: 400 clamp(32px, 4.4vw, 50px)/1.08 var(--display); letter-spacing: -.005em; }
.innen { max-width: 1200px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.label { display: inline-flex; align-items: center; gap: 10px; font: 400 14px/1 var(--label); letter-spacing: .2em; text-transform: uppercase; color: var(--pruef-tief); }
.label::before { content: ""; width: 22px; height: 1px; background: currentColor; }
.abschnitt { padding-block: 112px; }
.kopfzeile { display: grid; gap: 16px; max-width: 720px; margin-bottom: 52px; }
.kopfzeile p { margin: 0; color: var(--grau); font-size: 18px; }
.kopfzeile.hell h2 { color: #fff; } .kopfzeile.hell p { color: #b4c2d1; } .kopfzeile.hell .label { color: var(--pruef-hell); }

/* Knöpfe */
.knopf { display: inline-flex; align-items: center; gap: 8px; padding: 14px 22px; border-radius: 999px; font: 600 15px/1 var(--text); text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .15s ease, background .15s ease, border-color .15s ease; }
.knopf:hover { transform: translateY(-1px); }
.knopf.gruen { background: var(--pruef); color: #fff; box-shadow: 0 8px 24px -10px rgb(46 158 107 / .8); }
.knopf.gruen:hover { background: var(--pruef-tief); }
.knopf.geist { border-color: rgb(255 255 255 / .3); color: #fff; }
.knopf.geist:hover { border-color: #fff; }
.knopf.rand { border-color: var(--tinte); color: var(--tinte); }
.knopf.klein { padding: 10px 16px; font-size: 14px; }

/* Kopfzeile der Seite */
.kopf { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: rgb(11 23 36 / .82); backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid rgb(255 255 255 / .07); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--nacht); }
.kopf .innen { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 14px; }
.kopf nav { display: flex; align-items: center; gap: 26px; font-size: 15px; }
.kopf nav a { text-decoration: none; color: #b4c2d1; transition: color .15s; }
.kopf nav a:hover { color: #fff; }
.kopf nav .knopf { color: #fff; }
.marke { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: #fff; }
.marke .zeichen { width: 38px; height: 38px; flex: none; }
.marke .zeichen > path:first-of-type { fill: #fff; }
.marke .zeichen rect[fill="#FFFFFF"] { fill: var(--blau); }
.marke .zeichen path[stroke] { stroke: var(--blau); }
.marke .wm { display: inline-grid; gap: 4px; line-height: 1; }
.marke .wm b { font: 400 24px/1 var(--display); letter-spacing: .04em; }
.marke .wm b .n { color: var(--stahl); }
.marke .wm small { display: flex; align-items: center; gap: 6px; font: 400 8px/1 var(--label); letter-spacing: .22em; text-transform: uppercase; color: var(--stahl-hell); }
.marke .wm small::before, .marke .wm small::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .6; }

/* Kopf mit Löschstation */
.held { position: relative; background: var(--nacht); color: #fff; overflow: hidden; margin-top: -71px; padding-top: 71px; isolation: isolate; }
.held::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(60% 70% at 85% 30%, rgb(46 158 107 / .16), transparent 70%),
  radial-gradient(50% 60% at 10% 100%, rgb(19 48 79 / .9), transparent 70%),
  linear-gradient(rgb(141 162 184 / .06) 1px, transparent 1px) 0 0 / 100% 32px,
  linear-gradient(90deg, rgb(141 162 184 / .06) 1px, transparent 1px) 0 0 / 32px 100%; }
.held-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; padding-block: 96px 120px; }
.marke-zeile { display: inline-flex; align-items: center; gap: 10px; font: 500 13px/1 var(--daten); letter-spacing: .14em; text-transform: uppercase; color: var(--pruef-hell); padding: 8px 12px; border: 1px solid rgb(127 209 168 / .35); border-radius: 999px; background: rgb(46 158 107 / .08); }
.marke-zeile i { width: 7px; height: 7px; border-radius: 50%; background: var(--pruef-hell); box-shadow: 0 0 0 4px rgb(127 209 168 / .2); }
.held h1 { font: 400 clamp(44px, 6.2vw, 82px)/1.02 var(--display); letter-spacing: -.012em; margin: 26px 0 24px; }
.held h1 em { font-style: normal; color: var(--stahl); }
.held-text > p { font-size: 19px; color: #c2cfdc; max-width: 52ch; margin: 0 0 32px; }
.knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }
.held-fakten { display: flex; flex-wrap: wrap; gap: 14px 40px; margin: 44px 0 0; padding-top: 26px; border-top: 1px solid rgb(255 255 255 / .1); }
.held-fakten div { display: grid; gap: 6px; }
.held-fakten dt { font: 400 12px/1 var(--label); letter-spacing: .18em; text-transform: uppercase; color: var(--stahl); }
.held-fakten dd { margin: 0; font: 500 15px/1 var(--daten); color: #fff; }
.held-boden { display: none; }

.station { margin: 0; border-radius: 20px; background: linear-gradient(180deg, rgb(19 48 79 / .55), rgb(13 27 42 / .9)); border: 1px solid rgb(141 162 184 / .2); box-shadow: 0 40px 80px -30px rgb(0 0 0 / .7), inset 0 1px 0 rgb(255 255 255 / .06); padding: 16px; transform: perspective(1400px) rotateY(-7deg) rotateX(3deg); transform-origin: left center; }
.station-kopf, .station-fuss { display: flex; justify-content: space-between; gap: 12px; font: 12px/1.3 var(--daten); color: var(--stahl); padding: 4px 6px 12px; }
.station-kopf b { color: #fff; font-weight: 500; }
.station-fuss { padding: 12px 6px 2px; }
.station-fuss span:first-child { color: var(--pruef-hell); }
.live { display: inline-flex; align-items: center; gap: 6px; color: var(--pruef-hell); }
.live i { width: 7px; height: 7px; border-radius: 50%; background: var(--pruef-hell); }
.schaechte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.schacht { display: grid; gap: 6px; padding: 11px 12px; border-radius: 10px; background: rgb(11 23 36 / .75); border: 1px solid rgb(141 162 184 / .14); font: 11px/1.2 var(--daten); color: var(--stahl); transition: border-color .4s, background .4s; min-width: 0; }
.schacht .s-kopf { display: flex; gap: 8px; color: #dfe7ef; white-space: nowrap; } .schacht .s-kopf b { color: var(--stahl); font-weight: 500; }
.schacht .s-sn { opacity: .7; }
.s-balken { height: 4px; border-radius: 4px; background: rgb(141 162 184 / .15); overflow: hidden; }
.s-balken i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--blau), var(--stahl)); border-radius: 4px; transition: width .12s linear; }
.s-status { color: #dfe7ef; }
.schacht[data-phase="1"] .s-balken i { background: repeating-linear-gradient(90deg, var(--stahl) 0 6px, transparent 6px 10px); animation: pruefen .8s linear infinite; }
.schacht[data-phase="2"] { border-color: rgb(127 209 168 / .45); background: rgb(46 158 107 / .1); }
.schacht[data-phase="2"] .s-balken i { background: var(--pruef); }
.schacht[data-phase="2"] .s-status { color: var(--pruef-hell); }
@keyframes pruefen { to { background-position: 20px 0; } }
@media (prefers-reduced-motion: no-preference) {
  .live i, .marke-zeile i { animation: puls 1.8s ease-out infinite; }
  .held-text > * { animation: hoch .7s cubic-bezier(.2, .7, .2, 1) both; }
  .held-text > :nth-child(2) { animation-delay: .06s; } .held-text > :nth-child(3) { animation-delay: .12s; } .held-text > :nth-child(4) { animation-delay: .18s; } .held-text > :nth-child(5) { animation-delay: .24s; }
  .station { animation: auftauchen 1s .15s cubic-bezier(.2, .7, .2, 1) both; }
}
@keyframes puls { 0% { box-shadow: 0 0 0 0 rgb(127 209 168 / .5); } 80%, 100% { box-shadow: 0 0 0 8px rgb(127 209 168 / 0); } }
@keyframes hoch { from { opacity: .001; transform: translateY(16px); } }
@keyframes auftauchen { from { opacity: .001; transform: perspective(1400px) rotateY(-14deg) rotateX(6deg) translateY(24px); } }

/* Null-Band */
.null-band { background: var(--papier); padding-block: 96px 24px; overflow: hidden; }
.null-raster { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 56px; align-items: center; }
.riesen-null { position: relative; font: 400 clamp(260px, 34vw, 460px)/.78 var(--display); color: transparent; background: linear-gradient(180deg, var(--blau) 0%, var(--stahl) 100%); -webkit-background-clip: text; background-clip: text; padding: 0 8px; }
.riesen-null::after { content: "Treffer"; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); font: 500 13px/1 var(--daten); letter-spacing: .3em; text-transform: uppercase; color: var(--pruef-tief); background: var(--pruef-flaeche); padding: 7px 10px; border-radius: 6px; white-space: nowrap; }
.null-raster h2 { margin: 16px 0 18px; }
.null-raster p { margin: 0; color: var(--grau); font-size: 18px; max-width: 60ch; }

/* Geräte */
.geraete { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.geraete article { background: var(--karte); border: 1px solid var(--linie); border-radius: 20px; padding: 26px 24px 28px; display: grid; gap: 12px; align-content: start; transition: transform .25s ease, box-shadow .25s ease, border-color .25s; }
.geraete article:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -28px rgb(13 27 42 / .45); border-color: var(--stahl-hell); }
.geraete svg { width: 96px; height: 72px; fill: none; stroke: var(--blau); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 8px; }
.geraete article:hover svg { stroke: var(--pruef-tief); }
.stufe { font: 500 11px/1 var(--daten); letter-spacing: .06em; text-transform: uppercase; color: var(--pruef-tief); background: var(--pruef-flaeche); padding: 6px 8px; border-radius: 6px; justify-self: start; }
.geraete h3 { font: 400 25px/1.15 var(--display); }
.geraete p { margin: 0; color: var(--grau); font-size: 15.5px; }

/* Dunkle Bänder */
.dunkel-band { background: var(--tresor); color: #fff; padding-block: 112px; position: relative; overflow: hidden; }
.dunkel-band::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(50% 80% at 100% 0%, rgb(46 158 107 / .1), transparent 70%); }
.dunkel-band .innen { position: relative; }
.kette { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; position: relative; }
.kette::before { content: ""; position: absolute; left: 0; right: 0; top: 23px; height: 1px; background: repeating-linear-gradient(90deg, var(--stahl) 0 6px, transparent 6px 12px); opacity: .45; }
.kette li { position: relative; display: grid; gap: 10px; align-content: start; padding-right: 22px; }
.kette .nr { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--tresor); border: 1px solid var(--stahl); font: 500 14px var(--daten); color: #fff; position: relative; z-index: 1; margin-bottom: 8px; }
.kette li:last-child .nr { background: var(--pruef); border-color: var(--pruef); }
.kette h3 { font: 600 18px/1.3 var(--text); }
.kette p { margin: 0; color: #a9b8c8; font-size: 15px; }
.beleg { font: 12px/1.35 var(--daten); color: var(--pruef-hell); border-left: 2px solid var(--pruef); padding: 2px 0 2px 10px; margin-top: 4px; }

/* Zwei Spalten */
.zwei-spalten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.zwei-spalten.oben { align-items: start; }
.haken { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.haken li { position: relative; padding-left: 38px; color: var(--grau); }
.haken li::before { content: ""; position: absolute; left: 0; top: 2px; width: 24px; height: 24px; border-radius: 50%; background: var(--pruef-flaeche) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%231f7a50' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.haken b { display: block; color: var(--tinte); font-weight: 600; }

/* Telefon-Illustration */
.telefon { margin: 0; display: grid; justify-items: center; gap: 12px; position: relative; }
.telefon::before { content: ""; position: absolute; width: 360px; max-width: 100%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgb(46 158 107 / .18), transparent 65%); top: 50%; left: 50%; transform: translate(-50%, -55%); }
.geraet { position: relative; width: 280px; aspect-ratio: 9 / 16.5; max-width: 100%; border-radius: 46px; background: #0b1724; padding: 12px; box-shadow: 0 50px 80px -40px rgb(13 27 42 / .7), inset 0 0 0 2px #2a3a4c; }
.insel { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); width: 84px; height: 24px; border-radius: 20px; background: #000; z-index: 1; }
.bild { height: 100%; border-radius: 36px; background: linear-gradient(180deg, #f6f8fa, #e9eef3); padding: 66px 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.bild .klein { font: 11px var(--daten); color: var(--grau); }
.bild b { font: 400 28px/1 var(--display); color: var(--tinte); }
.bild ul { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 8px; }
.bild li { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 12px; padding: 10px 12px; font-size: 13px; line-height: 1.3; color: var(--tinte); box-shadow: 0 1px 2px rgb(13 27 42 / .06); }
.bild li::before { content: "✓"; flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--pruef); color: #fff; font-size: 11px; font-weight: 700; }
.bereit { margin-top: auto; text-align: center; font: 600 13px var(--text); color: var(--pruef-tief); background: var(--pruef-flaeche); border-radius: 12px; padding: 12px; }
.telefon figcaption, .dokumente figcaption { font: 11px var(--daten); color: var(--grau); letter-spacing: .06em; text-transform: uppercase; position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .bild li { animation: hoch .5s cubic-bezier(.2, .7, .2, 1) both; }
  .bild li:nth-child(2) { animation-delay: .1s; } .bild li:nth-child(3) { animation-delay: .2s; } .bild li:nth-child(4) { animation-delay: .3s; }
}

/* Nachweise mit Dokumenten */
.papier { background: linear-gradient(180deg, #e9eef3, var(--papier)); }
.dokumente { margin: 0; position: relative; min-height: 460px; display: grid; justify-items: center; align-content: center; gap: 14px; }
.blatt { background: #fff; border-radius: 14px; box-shadow: 0 30px 60px -30px rgb(13 27 42 / .45), 0 0 0 1px var(--linie); padding: 24px 26px; }
.blatt.hinten { position: absolute; width: 290px; height: 360px; top: 6px; left: 50%; transform: translateX(-92%) rotate(-7deg); display: grid; align-content: start; gap: 6px; }
.blatt.hinten b { font: 400 54px/1 var(--display); color: var(--blau); margin-top: 18px; }
.blatt.hinten span:not(.dk) { color: var(--grau); font-size: 14px; }
.zeilen { display: grid; gap: 10px; margin-top: 26px; } .zeilen i { height: 8px; border-radius: 4px; background: var(--linie); } .zeilen i:nth-child(2n) { width: 70%; }
.blatt.vorne { position: relative; width: 340px; max-width: 100%; transform: translateX(12%) rotate(2.5deg); z-index: 1; }
.dk { font: 400 12px/1 var(--label); letter-spacing: .2em; text-transform: uppercase; color: var(--pruef-tief); }
.bkopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-bottom: 12px; border-bottom: 2px solid var(--blau); margin-bottom: 8px; }
.bkopf .nr { font: 11px var(--daten); color: var(--grau); }
.blatt dl { margin: 0; display: grid; }
.blatt dl div { display: grid; grid-template-columns: 96px 1fr; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--linie); }
.blatt dt { font: 400 10px/1.6 var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--grau); }
.blatt dd { margin: 0; font: 12.5px/1.4 var(--daten); color: var(--tinte); }
.blatt dd.ok { color: var(--pruef-tief); font-weight: 500; letter-spacing: .08em; }
.stempel { position: absolute; right: 22px; bottom: 30px; width: 88px; height: 88px; border-radius: 50%; border: 2px solid var(--pruef); color: var(--pruef); display: grid; place-items: center; align-content: center; gap: 2px; font: 400 10px/1 var(--label); letter-spacing: .2em; text-transform: uppercase; transform: rotate(-14deg); background: rgb(255 255 255 / .85); }
.stempel b { font: 400 38px/1 var(--display); letter-spacing: 0; }
.liste-nachweise { list-style: none; padding: 0; margin: 0 0 30px; display: grid; border-top: 1px solid var(--tinte); }
.liste-nachweise li { display: grid; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--linie); }
.liste-nachweise b { font-weight: 600; } .liste-nachweise span { color: var(--grau); font-size: 15px; }

/* Zielgruppen */
.zielgruppen { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.zielgruppen article { background: var(--karte); border: 1px solid var(--linie); border-radius: 18px; padding: 24px 20px; display: grid; gap: 10px; align-content: start; }
.zielgruppen svg { width: 36px; height: 36px; fill: none; stroke: var(--pruef); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.zielgruppen h3 { font: 600 17px/1.3 var(--text); }
.zielgruppen p { margin: 0; color: var(--grau); font-size: 15px; }

/* Tresor-Band */
.regeln { list-style: none; padding: 0; margin: 0; display: grid; border-top: 1px solid rgb(255 255 255 / .12); }
.regeln li { padding: 16px 0; border-bottom: 1px solid rgb(255 255 255 / .12); color: #a9b8c8; }
.regeln b { color: #fff; font-weight: 600; }
.plombe { display: grid; justify-items: center; gap: 14px; }
.plombe svg { width: min(340px, 80%); height: auto; overflow: visible; }
.plombe .ring { fill: rgb(19 48 79 / .6); stroke: var(--stahl); stroke-width: 1; }
.plombe .ring2 { fill: none; stroke: rgb(141 162 184 / .35); stroke-dasharray: 2 5; }
.plombe .umlauf { font: 400 12px var(--label); fill: var(--stahl-hell); }
.plombe .schild { fill: #fff; }
.plombe .haken { fill: none; stroke: var(--pruef); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.plombe span { font: 12px var(--daten); color: var(--stahl); letter-spacing: .08em; }
@media (prefers-reduced-motion: no-preference) { .plombe svg text { animation: drehen 60s linear infinite; transform-origin: 110px 110px; } }
@keyframes drehen { to { transform: rotate(1turn); } }

/* Downloads und Fragen */
.downloads { display: grid; border-top: 1px solid var(--tinte); }
.downloads a { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 16px 0; border-bottom: 1px solid var(--linie); text-decoration: none; }
.downloads a:hover b { color: var(--pruef-tief); }
.downloads b { font-weight: 600; transition: color .15s; }
.downloads span { font: 13px/1.4 var(--daten); color: var(--grau); grid-column: 1; }
.downloads i { font-style: normal; font-size: 20px; color: var(--pruef); grid-row: 1 / span 2; grid-column: 2; align-self: center; }
.fragen { display: grid; border-top: 1px solid var(--tinte); }
.fragen details { border-bottom: 1px solid var(--linie); }
.fragen summary { list-style: none; cursor: pointer; padding: 16px 40px 16px 0; font: 600 16.5px/1.4 var(--text); position: relative; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: "+"; position: absolute; right: 4px; top: 12px; font: 400 24px/1 var(--text); color: var(--pruef); transition: transform .3s; }
.fragen details[open] summary::after { transform: rotate(45deg); }
.fragen details p { margin: 0 0 18px; color: #3b4a5a; font-size: 16px; }

/* Anfrage */
.anfrage { padding-top: 0; }
.anfrage-karte { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); border-radius: 28px; overflow: hidden; background: var(--karte); box-shadow: 0 40px 80px -50px rgb(13 27 42 / .5), 0 0 0 1px var(--linie); }
.anfrage-karte aside { background: var(--tresor); color: #fff; padding: 44px 36px; display: flex; flex-direction: column; gap: 22px; }
.anfrage-karte aside .label { color: var(--pruef-hell); }
.anfrage-karte aside h2 { font-size: clamp(30px, 3vw, 38px); }
.ansprech { display: grid; gap: 3px; padding: 18px 0; border-block: 1px solid rgb(255 255 255 / .12); }
.ansprech span { color: #a9b8c8; font-size: 14px; }
.ansprech span:first-child { font: 400 11px var(--label); letter-spacing: .2em; text-transform: uppercase; color: var(--stahl); }
.ansprech b { font: 400 24px/1.2 var(--display); }
.ansprech .tel { font: 500 17px var(--daten); color: #fff; margin-top: 6px; user-select: all; }
.danach { margin: 0; padding: 0; list-style: none; counter-reset: d; display: grid; gap: 12px; }
.danach li { counter-increment: d; position: relative; padding-left: 38px; color: #a9b8c8; font-size: 15px; }
.danach li::before { content: counter(d); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--pruef-hell); color: var(--pruef-hell); display: grid; place-items: center; font: 500 12px var(--daten); }
.danach b { color: #fff; }
.leise { margin: auto 0 0; font-size: 13px; color: var(--stahl); }
form.formular { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding: 40px 40px 44px; align-content: start; }
.formular .ganz { grid-column: 1 / -1; }
.formular label { display: grid; gap: 7px; font-size: 14px; font-weight: 600; }
.formular label > span { font-weight: 400; color: var(--grau); }
.formular input:not([type="checkbox"]), .formular select, .formular textarea { font: 16px/1.4 var(--text); color: var(--tinte); background: var(--papier); border: 1px solid var(--linie); border-radius: 12px; padding: 13px 14px; width: 100%; transition: border-color .15s, background .15s; }
.formular input:not([type="checkbox"]):hover, .formular select:hover, .formular textarea:hover { border-color: var(--stahl-hell); }
.formular input:focus, .formular select:focus, .formular textarea:focus { outline: 2px solid var(--pruef); outline-offset: 1px; background: #fff; border-color: transparent; }
.formular textarea { min-height: 120px; resize: vertical; }
.formular .check { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; color: var(--grau); font-size: 14px; }
.formular .check input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--pruef); }
.formular .check span { color: var(--grau); }
.formular .falle { position: absolute; left: -9999px; }
.formular button { justify-self: start; border: 0; }
fieldset.geraete { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
fieldset.geraete legend { font-size: 14px; font-weight: 600; margin-bottom: 10px; padding: 0; }
.formular .chip { position: relative; display: inline-flex; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.formular .chip span { font: 500 14px/1 var(--text); color: var(--tinte); padding: 11px 14px; border-radius: 999px; border: 1px solid var(--linie); background: var(--papier); transition: background .15s, border-color .15s; }
.formular .chip input:checked + span { background: var(--pruef-flaeche); border-color: var(--pruef); color: var(--pruef-tief); }
.chip input:checked + span::before { content: "✓ "; }
.chip input:focus-visible + span { outline: 2px solid var(--pruef); outline-offset: 2px; }
.meldung { grid-column: 1 / -1; padding: 14px 16px; border-radius: 12px; font-size: 15px; margin: 0; }
.meldung.ok { background: var(--pruef-flaeche); color: var(--pruef-tief); }
.meldung.fehler { background: #fbecec; color: #8a1f1f; }

/* Fußzeile */
.fusszeile { background: var(--nacht); color: #8597aa; font-size: 13px; border-top: 1px solid rgb(255 255 255 / .06); }
.fusszeile .innen { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 28px; padding-block: 30px; }
.fusszeile a { color: #b4c2d1; }

/* Rechtstexte und 404 */
.seitenkopf { background: var(--nacht); color: #fff; margin-top: -71px; padding-block: 143px 56px; }
.seitenkopf h1 { font: 400 clamp(40px, 5vw, 60px)/1.05 var(--display); }
.recht { max-width: 780px; padding-block: 48px 96px; }
.recht h2 { font-size: 26px; margin: 36px 0 10px; }
.recht h3 { font: 600 17px/1.4 var(--text); margin: 22px 0 6px; }
.recht p, .recht li { color: #3b4a5a; }
.markenhinweis { margin: 0 0 12px; padding: 14px 18px; border-radius: 12px; background: var(--pruef-flaeche); color: var(--tinte); font-size: 15px; }
.fehlerseite { background: var(--nacht); color: #fff; margin-top: -71px; padding-block: 200px 140px; }
.fehlerseite .label { color: var(--pruef-hell); }
.fehlerseite h1 { font: 400 clamp(40px, 6vw, 76px)/1.04 var(--display); margin: 18px 0 20px; max-width: 16ch; }
.fehlerseite p { color: #b4c2d1; font-size: 19px; max-width: 52ch; margin: 0 0 30px; }

/* Schmal */
@media (max-width: 1100px) {
  .geraete { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zielgruppen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kette { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 44px; }
  .kette::before { display: none; }
}
@media (max-width: 900px) {
  .kopf nav a:not(.knopf) { display: none; }
  .held-raster, .zwei-spalten, .null-raster, .anfrage-karte { grid-template-columns: 1fr; }
  .held-raster { padding-block: 64px 80px; gap: 48px; }
  .station { transform: none; }
  .null-raster { gap: 8px; } .riesen-null { font-size: 180px; justify-self: start; padding-left: 0; }
  .abschnitt, .dunkel-band { padding-block: 80px; }
  .zwei-spalten { gap: 48px; }
}
@media (max-width: 640px) {
  .geraete, .zielgruppen, .kette { grid-template-columns: 1fr; }
  .schaechte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .schacht:nth-child(n+9) { display: none; }
  form.formular { grid-template-columns: 1fr; padding: 28px 22px 32px; }
  .anfrage-karte aside { padding: 32px 24px; }
  .dokumente { min-height: 0; }
  .blatt.hinten { display: none; } .blatt.vorne { transform: rotate(1.5deg); }
  .marke .wm b { font-size: 19px; } .marke .zeichen { width: 30px; height: 30px; }
  .kopf .knopf.klein { padding: 9px 13px; font-size: 13px; white-space: nowrap; }
  .held h1 { font-size: 42px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
.ansprech .tel.mail { margin-top: 0; font-size: 15px; color: var(--pruef-hell); }