/* Stageona – www.stageona.com
   Palette Ultramarin auf Papier, Archivo + IBM Plex Mono (selbst gehostet). */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  /* Farben */
  --papier: #F0EEE9;
  --flaeche: #FAF9F6;
  --tinte: #111522;
  --gedimmt: #555A68;
  --linie: #D9D5CD;
  --akzent: #2B47FF;
  --akzent-text: #2238D1;
  --akzent-hell: #3F92FF;
  --amber: #FFB627;
  --nacht: #0B0E1A;
  --nacht-2: #161A2A;
  --nacht-text: #ECEBF0;
  --nacht-gedimmt: #A3A7B7;
  --nacht-akzent: #8A9BFF;

  /* Schrift */
  --sans: "Archivo", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --h1: clamp(2.2rem, 1.2rem + 3.4vw, 4rem);
  --h2: clamp(2rem, 1.2rem + 2.6vw, 3.3rem);
  --h3: clamp(1.25rem, 1.05rem + .6vw, 1.55rem);
  --text: clamp(1.05rem, 1rem + .2vw, 1.15rem);
  --gross: clamp(1.15rem, 1.05rem + .45vw, 1.35rem);
  --breite-display: 112%;

  /* Abstände */
  --rand: clamp(16px, 4vw, 56px);
  --max: 1240px;
  --abschnitt: clamp(72px, 6vw + 40px, 140px);
  --held-oben: clamp(28px, 4vw, 64px);
  --held-unten: clamp(40px, 4vw, 72px);

  /* Geräte */
  --phone-radius: 30px;
  --phone-rahmen: 8px;
  --schatten: 0 34px 60px -30px rgba(11, 14, 26, .55), 0 10px 22px -12px rgba(11, 14, 26, .35);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font: 400 var(--text)/1.6 var(--sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
::selection { background: var(--akzent); color: var(--papier); }
:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; border-radius: 2px; }
.dunkel :focus-visible { outline-color: var(--nacht-akzent); }
h1, h2, h3 { font-weight: 800; font-stretch: var(--breite-display); line-height: 1.02; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); line-height: 1.15; letter-spacing: -.01em; }
p { margin: 0; text-wrap: pretty; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.huelle { max-width: var(--max); margin: 0 auto; padding: 0 var(--rand); }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .55em;
  min-height: 52px; padding: 14px 22px;
  background: var(--akzent); color: var(--papier);
  font: 700 1.02rem/1.1 var(--sans); text-decoration: none;
  border-radius: 2px; border: 0;
  transition: background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:hover { background: #1F38E0; transform: translateY(-1px); box-shadow: 0 10px 18px -12px rgba(43, 71, 255, .8); text-decoration: none; }
.btn:active { transform: translateY(0); }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn.umriss { background: transparent; color: var(--tinte); box-shadow: inset 0 0 0 2px var(--tinte); }
.btn.umriss:hover { background: var(--tinte); color: var(--papier); box-shadow: inset 0 0 0 2px var(--tinte); }
.dunkel .btn.umriss { color: var(--nacht-text); box-shadow: inset 0 0 0 2px var(--nacht-text); }
.dunkel .btn.umriss:hover { background: var(--nacht-text); color: var(--nacht); }
.knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Kopf ---------- */
.kopf {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--papier) 92%, transparent);
  backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.kopf.gescrollt { border-bottom-color: var(--linie); }
.kopf .huelle { display: flex; align-items: center; gap: 28px; min-height: 72px; }
.kopf .logo img { height: 34px; width: auto; }
/* Startseite: das große Logo oben im ersten Bildschirm trägt den Namen; das Kopf-Logo blendet erst ein,
   wenn es aus dem Bild gescrollt ist (main.js setzt .ohne-logo). Ohne JS bleibt das Kopf-Logo sichtbar. */
.kopf .logo { transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s; }
.js .kopf.ohne-logo .logo { opacity: 0; visibility: hidden; transform: translateY(-6px); }
.kopf nav { margin-left: auto; }
.kopf nav ul { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
.kopf nav a { font-size: .98rem; font-weight: 500; text-decoration: none; color: var(--gedimmt); }
.kopf nav a:hover { color: var(--tinte); }
.kopf .btn { min-height: 44px; padding: 10px 16px; font-size: .95rem; }
.sprache { font: 500 .9rem var(--mono); text-decoration: none; color: var(--gedimmt); padding: 6px 8px; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--linie); }
.sprache:hover { color: var(--tinte); box-shadow: inset 0 0 0 1px var(--tinte); text-decoration: none; }

/* ---------- Geräte ---------- */
.geraet {
  margin: 0;
  background: #05060B;
  padding: var(--phone-rahmen);
  border-radius: var(--phone-radius);
  box-shadow: var(--schatten);
}
.geraet img, .geraet picture { border-radius: calc(var(--phone-radius) - var(--phone-rahmen)); }
.geraet.tablet { --phone-radius: 26px; --phone-rahmen: 12px; }
.geraet.web { --phone-radius: 10px; --phone-rahmen: 0px; background: var(--nacht); overflow: hidden; }
.geraet.web::before { content: ""; display: block; height: 26px; background: #1E2233 radial-gradient(circle at 16px 50%, #FF5F57 4px, transparent 5px) , radial-gradient(circle at 32px 50%, #FEBC2E 4px, transparent 5px), radial-gradient(circle at 48px 50%, #28C840 4px, transparent 5px); background-color: #1E2233; }
.geraet.web img { border-radius: 0; }
figcaption { font-size: .95rem; color: var(--gedimmt); margin-top: 14px; }
.dunkel figcaption { color: var(--nacht-gedimmt); }
.geraet + figcaption, .bild figcaption { max-width: 34ch; }
.bild { margin: 0; }

/* ---------- Einstieg ---------- */
.held { padding: var(--held-oben) 0 0; overflow: clip; }
.held .knoepfe { margin-top: var(--held-knopf-abstand, 0px); }
.held .huelle { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.held-logo { display: block; height: var(--held-logo-h, clamp(64px, 8.5vw, 120px)); width: auto; margin: 0 0 clamp(22px, 2.6vw, 34px); }
.held h1 { max-width: var(--held-h1-breite, 16ch); font-weight: var(--held-h1-gewicht, 600); }   /* leichter als die Wortmarke (700), damit der Name führt */
.held h1 .h1-zwei { display: block; margin-top: .28em; font-size: .62em; line-height: 1.05; color: var(--akzent-text); }
.held .unter { font-size: var(--held-unter, var(--gross)); color: var(--gedimmt); max-width: 34em; margin: 26px 0 32px; }
.held .zeile { margin-top: 18px; font: 400 .9rem var(--mono); color: var(--gedimmt); }
.held .zeile strong { color: var(--tinte); font-weight: 600; }
.held .web-hinweis { margin-top: 6px; font-size: .95rem; color: var(--gedimmt); }
.held-buehne { position: relative; height: var(--held-buehne-h, clamp(560px, 50vw, 720px)); }
.held-buehne .geraet { position: absolute; }
.held-buehne .vorn { width: var(--held-vorn-w, min(54%, 330px)); left: 4%; top: 0; z-index: 2; }
.held-buehne .hinten { width: var(--held-hinten-w, min(46%, 290px)); right: 0; top: 11%; }
.sync-band .huelle { display: block; }
.held .zeile .teil { white-space: nowrap; }
.schiene { display: contents; }
.sync-band { margin-top: clamp(28px, 3vw, 48px); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); background: var(--flaeche); }
.sync {
  display: flex; flex-wrap: wrap; align-items: center; column-gap: .6em; row-gap: 4px;
  padding: 18px 0;
  font: 500 clamp(1rem, .9rem + .45vw, 1.25rem) var(--mono); color: var(--tinte);
}
.sync .teil { white-space: nowrap; }
.sync .punkt { width: 11px; height: 11px; border-radius: 50%; background: var(--amber); margin-right: .3em; animation: puls 2.4s var(--ease) 1.2s 3; }
@keyframes puls { 0% { box-shadow: 0 0 0 0 rgba(255, 182, 39, .6); } 70% { box-shadow: 0 0 0 12px rgba(255, 182, 39, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 182, 39, 0); } }

/* ---------- Abschnitte ---------- */
.abschnitt { padding: var(--abschnitt) 0; position: relative; }
.abschnitt.flaeche { background: var(--flaeche); }
.dunkel { background: var(--nacht); color: var(--nacht-text); }
.dunkel p, .dunkel li { color: var(--nacht-gedimmt); }
.dunkel h2, .dunkel h3, .dunkel strong { color: var(--nacht-text); }
.kopfzeile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 72px); align-items: end; margin-bottom: clamp(40px, 5vw, 72px); }
.kopfzeile p { font-size: var(--gross); max-width: 36em; }
.leitsatz { font-size: var(--gross); }

/* Problem */
.problem .huelle { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.problem h2 { margin-bottom: 28px; max-width: 14ch; }
.problem p + p { margin-top: 18px; }
.problem .loesung { color: var(--nacht-text); font-size: var(--gross); border-top: 1px solid #2A2F45; padding-top: 22px; margin-top: 26px; }
.problem .geraet.tablet { max-width: 470px; justify-self: end; transform: rotate(1.5deg); margin-bottom: calc(var(--abschnitt) * -1.15); }

/* Bibliothek */
.bibliothek { padding-top: calc(var(--abschnitt) * 1.2); }
.bibliothek-raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); align-items: start; }
.bibliothek-raster .a { grid-column: 1 / span 4; }
.bibliothek-raster .b { grid-column: 5 / span 4; margin-top: 72px; }
.bibliothek-raster .c { grid-column: 9 / span 4; align-self: center; }
.bibliothek-raster .d { grid-column: 2 / span 10; margin-top: clamp(24px, 3vw, 48px); }
.bibliothek-raster .d figcaption { max-width: none; }
.punkte-liste { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; }
.punkte-liste li { position: relative; padding-left: 26px; }
.punkte-liste li::before { content: ""; position: absolute; left: 0; top: .62em; width: 10px; height: 10px; border-radius: 50%; background: var(--akzent); }
.dunkel .punkte-liste li::before { background: var(--nacht-akzent); }

/* Bühne */
.buehne-raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); align-items: start; }
.buehne-raster .gross { grid-column: 1 / span 6; }
.buehne-raster .rechts { grid-column: 7 / span 6; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 32px); }
.buehne-raster .rechts .schiene > .bild:nth-child(2) { margin-top: 64px; }
.buehne-raster .text { grid-column: 7 / span 6; }

/* Probe */
.probe-raster { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); align-items: center; }
.probe-raster .geraete { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(16px, 2vw, 28px); align-items: end; }
.probe-raster .geraete .klein { display: grid; gap: clamp(16px, 2vw, 28px); }
.probe .text p + p { margin-top: 18px; }
.probe-raster.zweite { margin-top: clamp(48px, 6vw, 96px); }
.youtube-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 28px); max-width: 820px; }

/* Claim */
.claim { background: var(--akzent); color: var(--papier); padding: clamp(64px, 7vw, 120px) 0; overflow: hidden; }
.claim p { font: 800 clamp(2.6rem, 1rem + 5.4vw, 6rem)/.92 var(--sans); font-stretch: 118%; letter-spacing: -.03em; color: var(--papier); }
.claim p span { display: block; }
.claim p span:nth-child(2) { padding-left: 1.4em; }
.claim p span:nth-child(3) { padding-left: 2.8em; }
.claim p .punkt { display: inline; padding: 0; color: var(--amber); }

/* Für wen */
.wer-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); }
.wer { display: grid; grid-template-rows: auto 1fr; gap: 26px; }
.wer:nth-child(2) { margin-top: 56px; }
.wer:nth-child(3) { margin-top: 112px; }
.wer .geraet { max-width: 340px; }
.beschnitten img { aspect-ratio: 640 / 980; object-fit: cover; object-position: top; }
.wer h3 { margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.wer h3::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--akzent); }
.wer:nth-child(2) h3::before { background: var(--amber); }
.wer:nth-child(3) h3::before { background: var(--tinte); }

/* Über */
.ueber .huelle { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.ueber .zitat { font: 600 clamp(1.4rem, 1.05rem + 1.2vw, 2.1rem)/1.32 var(--sans); color: var(--tinte); text-wrap: pretty; }
.ueber .geschichte { margin-top: 20px; font-size: var(--gross); color: var(--gedimmt); max-width: 40em; }
/* Logo + Schriftzug im Fließsatz: Versalhöhe des Schriftzugs (50 von 100) = Versalhöhe der Schrift (~.7em),
   Grundlinie des Schriftzugs (81 von 100) auf der Textgrundlinie */
.marke-im-text { display: inline-block; height: 1.4em; width: auto; vertical-align: -.266em; margin-right: .08em; }
.ueber .zitat + .geschichte { margin-top: 28px; }
.ueber .geschichte + .zitat { margin-top: 32px; }

/* Beta */
.schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: schritt; position: relative; }
.schritt { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: clamp(16px, 3vw, 40px); padding-bottom: clamp(36px, 4vw, 56px); position: relative; }
.schritt::before {
  counter-increment: schritt; content: counter(schritt);
  font: 800 3.4rem/1 var(--sans); font-stretch: 118%;
  width: 88px; height: 88px; display: grid; place-items: center;
  background: var(--papier); color: var(--akzent); border-radius: 50%;
  box-shadow: inset 0 0 0 3px var(--akzent); position: relative; z-index: 1;
}
.schritt:not(:last-child)::after { content: ""; position: absolute; left: 42px; top: 88px; bottom: 0; width: 4px; background: var(--akzent); transform-origin: top; transform: scaleY(var(--fuellung, 1)); }
.schritt h3 { margin: 22px 0 12px; }
.schritt p { max-width: 42em; }
.schritt .knoepfe { margin-top: 18px; }
.plattformen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.plattform { background: var(--flaeche); border-radius: 2px; padding: 22px; display: grid; align-content: start; gap: 12px; box-shadow: 0 1px 0 var(--linie); }
.plattform h4 { margin: 0; font: 700 1.1rem/1.2 var(--sans); }
.plattform p { font-size: .98rem; color: var(--gedimmt); }
.plattform .knoepfe { margin-top: 6px; }
.plattform .btn { min-height: 46px; padding: 11px 16px; font-size: .95rem; }
.feedback { margin-top: 8px; font-size: var(--gross); }
.feedback a { color: var(--akzent-text); font-weight: 600; }

/* FAQ */
.faq-liste { border-top: 2px solid var(--tinte); max-width: 900px; }
.faq-liste details { border-bottom: 1px solid var(--linie); }
.faq-liste summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; align-items: center; padding: 24px 0; font: 700 var(--h3)/1.25 var(--sans); }
.faq-liste summary::-webkit-details-marker { display: none; }
.faq-liste summary::after { content: ""; flex: none; width: 16px; height: 16px; background: linear-gradient(var(--akzent), var(--akzent)) center/16px 3px no-repeat, linear-gradient(var(--akzent), var(--akzent)) center/3px 16px no-repeat; transition: transform .3s var(--ease); }
.faq-liste details[open] summary::after { transform: rotate(45deg); }
.faq-liste summary:hover { color: var(--akzent-text); }
.faq-liste .antwort { padding: 0 0 26px; max-width: 62ch; color: var(--gedimmt); }
.faq-liste .antwort a { color: var(--akzent-text); }

/* Fuß */
.fuss { background: var(--nacht); color: var(--nacht-gedimmt); padding: 64px 0 40px; margin-top: -2px; }
.fuss .huelle { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; }
.fuss .logo img { height: 36px; width: auto; }
.fuss .claim-klein { margin-top: 16px; font: 500 .95rem var(--mono); color: var(--nacht-text); }
.fuss ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; justify-content: flex-end; }
.fuss a { color: var(--nacht-text); text-decoration: none; }
.fuss a:hover { text-decoration: underline; }
.fuss .sozial { margin-top: 22px; display: flex; gap: 18px; }
.fuss .sozial a { display: inline-flex; color: var(--nacht-gedimmt); transition: color .15s; }
.fuss .sozial a:hover { color: var(--nacht-text); }
.fuss .klein { grid-column: 1 / -1; font-size: .88rem; border-top: 1px solid #22263A; padding-top: 22px; }

/* ---------- Bewegung ---------- */
.einblenden { opacity: 1; transform: none; }
.js .einblenden { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .9s var(--ease); }
.js .einblenden.da { opacity: 1; transform: none; }
.js .held-buehne .geraet { opacity: 0; transform: translateY(40px) rotate(var(--dreh, 0deg)); transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
.js .held-buehne.da .geraet { opacity: 1; transform: rotate(var(--dreh, 0deg)); }
.held-buehne .vorn { --dreh: -2deg; transition-delay: .05s; }
.held-buehne .hinten { --dreh: 3deg; transition-delay: .2s !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .einblenden, .js .held-buehne .geraet { opacity: 1; transform: none; transition: none; }
  .held-buehne .geraet { transform: rotate(var(--dreh, 0deg)); }
  .sync .punkt { animation: none; }
  .schritt::after { transform: none !important; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1080px) {
  .kopf nav { display: none; }
  .kopf .btn { margin-left: auto; }
  .bibliothek-raster .a { grid-column: 1 / span 6; }
  .bibliothek-raster .b { grid-column: 7 / span 6; margin-top: 48px; }
  .bibliothek-raster .c { grid-column: 1 / -1; }
  .buehne-raster .gross, .buehne-raster .rechts, .buehne-raster .text { grid-column: 1 / -1; }
  .buehne-raster .gross { max-width: 620px; }
  .probe-raster { grid-template-columns: 1fr; }
  .probe-raster .text { order: -1; }
  .plattformen { grid-template-columns: 1fr; }
}

/* ---------- Handy ---------- */
@media (max-width: 760px) {
  :root { --phone-radius: 24px; --phone-rahmen: 6px; }
  .kopf .huelle { gap: 12px; min-height: 64px; }
  .kopf .logo img { height: 28px; }
  .kopf .btn { padding: 9px 12px; font-size: .9rem; min-height: 42px; }
  .held .huelle, .problem .huelle, .kopfzeile, .ueber .huelle { grid-template-columns: 1fr; }
  .held .huelle { gap: 0; }
  .held-text { display: contents; }
  .held h1 { max-width: none; order: 1; }
  .held .knoepfe { order: 2; margin-top: 22px; }
  .held-buehne { order: 3; height: 132vw; max-height: 640px; margin-top: 26px; }
  .held .unter { order: 4; margin: 8px 0 0; }
  .held .zeile { order: 5; }
  .held .web-hinweis { order: 6; }
  .held-buehne .vorn { width: 60%; left: 0; }
  .held-buehne .hinten { width: 50%; right: 0; top: 9%; }
  /* Geräte-Reihen als Wischleiste: kein Handy schmaler als ~300px */
  .bibliothek-raster { display: block; }
  .bibliothek-raster .d { margin-top: 28px; }
  .buehne-raster .rechts { display: block; }
  .schiene, .probe-raster .geraete, .youtube-reihe {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px;
    margin-left: calc(var(--rand) * -1); margin-right: calc(var(--rand) * -1);
    padding: 0 var(--rand) 12px; scrollbar-width: thin;
  }
  .schiene > *, .probe-raster .geraete > *, .youtube-reihe > * { flex: 0 0 78vw; scroll-snap-align: center; margin-top: 0 !important; }
  .probe-raster .geraete .klein { display: block; }
  .buehne-raster .gross { max-width: none; }
  .btn { width: 100%; justify-content: center; }
  .kopf .btn, .plattform .btn { width: auto; }
  .problem .geraet.tablet { justify-self: center; margin-bottom: calc(var(--abschnitt) * -1.3); max-width: 86%; }
  .wer-raster { grid-template-columns: 1fr; gap: 48px; }
  .wer, .wer:nth-child(2), .wer:nth-child(3) { margin-top: 0; }
  .wer .geraet { max-width: 78vw; }
  .claim p span:nth-child(2) { padding-left: .6em; }
  .claim p span:nth-child(3) { padding-left: 1.2em; }
  .schritt { grid-template-columns: 56px minmax(0, 1fr); }
  .schritt::before { width: 56px; height: 56px; font-size: 2.2rem; }
  .schritt:not(:last-child)::after { left: 26px; top: 56px; }
  .schritt h3 { margin-top: 12px; }
  .fuss .huelle { grid-template-columns: 1fr; }
  .fuss ul { justify-content: flex-start; }
}

/* ---------- Beta-Tester ---------- */
.tester .huelle { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.tester h2 { margin-bottom: 26px; max-width: 12ch; }
.tester .angebot {
  margin-top: 28px; padding: 24px 26px; background: var(--akzent); color: var(--papier);
  font: 600 var(--gross)/1.45 var(--sans); border-radius: 2px;
}
.tester .kontakt { margin-top: 24px; color: var(--gedimmt); }
.tester .kontakt a { color: var(--akzent-text); font-weight: 600; }
.formular-karte { background: var(--flaeche); border-radius: 2px; padding: clamp(22px, 3vw, 40px); box-shadow: 0 1px 0 var(--linie), 0 24px 50px -36px rgba(11, 14, 26, .45); }
.formular-karte form { display: grid; gap: 18px; }
.feld { margin: 0; padding: 0; border: 0; min-width: 0; }
.feld > label, .feld legend { display: block; font-weight: 600; font-size: .98rem; margin-bottom: 6px; padding: 0; }
.feld input:not([type=checkbox]), .feld select, .feld textarea {
  width: 100%; min-height: 50px; padding: 12px 14px;
  font: 400 1rem/1.4 var(--sans); color: var(--tinte);
  background: #fff; border: 1.5px solid #C9C4BA; border-radius: 2px;
  transition: border-color .15s, box-shadow .15s;
}
.feld textarea { min-height: 112px; resize: vertical; }
.feld input:hover, .feld select:hover, .feld textarea:hover { border-color: var(--gedimmt); }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 3px rgba(43, 71, 255, .18); }
.feld ::placeholder { color: #7A7E8A; }
.wahlen { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.wahl { display: inline-flex; align-items: flex-start; gap: 10px; font-size: .98rem; cursor: pointer; }
.wahl input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--akzent); flex: none; }
.zustimmung { color: var(--gedimmt); font-size: .92rem; line-height: 1.5; }
.zustimmung a { color: var(--akzent-text); }
.feld-fehler { display: none; margin-top: 6px; color: #B3261E; font-size: .92rem; font-weight: 500; }
.feld.hat-fehler .feld-fehler { display: block; }
.feld.hat-fehler input:not([type=checkbox]), .feld.hat-fehler select { border-color: #B3261E; }
.formular-karte .btn { justify-self: start; margin-top: 4px; }
.formular-karte .btn:disabled { opacity: .6; cursor: progress; transform: none; }
.form-status.ist-fehler { color: #B3261E; }
.form-status a { color: inherit; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
#form-wrap.is-sent form { display: none; }
#form-success h3 { margin-bottom: 10px; }
#form-success:focus { outline: none; }
@media (max-width: 760px) {
  .tester .huelle { grid-template-columns: 1fr; }
  .formular-karte .btn { justify-self: stretch; }
}
.feld > label.wahl { display: flex; font-weight: 400; margin: 0; }