/* humanhands — gemeinsames Marken-System der oeffentlichen Seiten.
   Selbst gehostete Schriften (SIL-OFL), kein CDN, keine Systemschriften.
   Big Shoulders Display = schmale Ingenieurs-/Typenschild-Schrift fuer Ueberschriften,
   Newsreader = Lesetype, Martian Mono = technische Beschriftung. */
@font-face{font-family:Schild;src:url(/fonts/BigShouldersDisplay-800.woff2) format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:Schild;src:url(/fonts/BigShouldersDisplay-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Lese;src:url(/fonts/Newsreader-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Lese;src:url(/fonts/Newsreader-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Mart;src:url(/fonts/MartianMono-700.woff2) format('woff2');font-weight:700;font-display:swap}

:root{
  --papier:#f3f1ec; --papier2:#eae7e0; --papier3:#dfdbd2;
  --tinte:#16181c; --grau:#6d7076; --linie:#dcd8d0; --linie2:#c9c4ba;
  --mensch:#b8442c; --maschine:#2f4a45;
  --metall1:#8fa9a2; --metall2:#587a72; --metall3:#31504a; --metall4:#1f3833;
  --haut1:#ded5c8; --haut2:#b9ab99; --haut3:#8e8070;
  --gut1:#cfc7bb; --gut2:#a89e90;
  --glanz:rgba(255,255,255,.55); --schatten:rgba(22,24,28,.20);
  --r1:9px; --r2:16px; --r3:24px;
  --s1:8px; --s2:16px; --s3:28px; --s4:48px; --s5:88px;
  /* Weg, den ein Banner beim Einfliegen zuruecklegt. Steht als Wert hier, weil das
     Layout diesen Weg als Freiraum reservieren muss — sonst haengt der Banner
     waehrend der Bewegung unten aus dem Bild. */
  --einflug:24px;
}
@media(prefers-color-scheme:dark){
  :root{
    --papier:#101317; --papier2:#181c21; --papier3:#20252b;
    --tinte:#ece8e1; --grau:#969aa1; --linie:#2a2f36; --linie2:#3a4048;
    --mensch:#e2705a; --maschine:#7fb3a5;
    --metall1:#a9c9c0; --metall2:#6f9a90; --metall3:#456d64; --metall4:#2b4a43;
    --haut1:#c9bdac; --haut2:#9c8e7c; --haut3:#6f6455;
    --gut1:#8d8578; --gut2:#655e53;
    --glanz:rgba(255,255,255,.30); --schatten:rgba(0,0,0,.45);
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* Sprungziele (z. B. /robotik.html#anfrage) nicht bündig an die Oberkante kleben lassen. */
[id]{scroll-margin-top:24px}
body{margin:0;background:var(--papier);color:var(--tinte);font-family:Lese,Georgia,serif;font-size:18px;
  line-height:1.68;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.col{max-width:1120px;margin-inline:auto;padding-inline:28px;position:relative;z-index:1}
.schmal{max-width:760px}
h1,h2,h3{font-family:Schild,sans-serif;font-weight:800;line-height:.94;margin:0;text-wrap:balance;letter-spacing:.004em}
h1{font-size:clamp(52px,8.4vw,100px)}
h2{font-size:clamp(32px,4.4vw,54px)}
h3{font-size:clamp(23px,2.6vw,30px)}
p{margin:0}
a{color:inherit}
b,strong{font-weight:600}
code{font-family:Mart,ui-monospace,monospace;font-size:.82em;background:var(--papier3);padding:2px 6px;border-radius:5px}
.gross{font-size:19.5px;color:var(--grau);max-width:60ch}
.klein{font-size:15px;color:var(--grau)}
.mono{font-family:Mart,ui-monospace,monospace;font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--grau);font-weight:700;display:block}
:focus-visible{outline:2px solid var(--mensch);outline-offset:3px;border-radius:var(--r1)}

.platine{position:fixed;inset:0;z-index:0;pointer-events:none;color:var(--linie2);opacity:.7;width:100%;height:100%}

/* ---------- Ladebildschirm: der Fingerabdruck zeichnet sich ---------- */
#boot{position:fixed;inset:0;z-index:99;background:var(--papier);display:grid;place-items:center;
  transition:opacity .55s ease .1s,visibility .55s}
#boot.done{opacity:0;visibility:hidden}
#boot svg{width:108px;height:108px;display:block;margin:0 auto}
#boot .ridge{stroke:var(--tinte);stroke-width:2.2;fill:none;stroke-linecap:round;
  stroke-dasharray:130;stroke-dashoffset:130;animation:zeichnen .9s cubic-bezier(.4,0,.2,1) .1s forwards}
#boot .trace{stroke:var(--mensch);stroke-width:2.2;fill:none;stroke-linecap:round;
  stroke-dasharray:44;stroke-dashoffset:44;animation:zeichnen .5s ease-out .75s forwards}
#boot .via{fill:var(--mensch);opacity:0;animation:auftauchen .3s 1.1s forwards}
#boot .t{margin-top:20px;text-align:center}
@keyframes zeichnen{to{stroke-dashoffset:0}}
@keyframes auftauchen{to{opacity:1}}

.auf{opacity:0;transform:translateY(16px);transition:opacity .65s cubic-bezier(.4,0,.2,1),transform .65s cubic-bezier(.4,0,.2,1)}
.auf.da{opacity:1;transform:none}

/* ---------- Kopf ---------- */
header{padding:var(--s3) 0;position:relative;z-index:3;border-bottom:1px solid var(--linie)}
header .in{display:flex;justify-content:space-between;align-items:center;gap:16px}
.wortmarke{font-family:Schild;font-weight:800;font-size:30px;letter-spacing:.01em;text-decoration:none;
  display:inline-flex;align-items:center;gap:10px;line-height:1}
.wortmarke span{color:var(--mensch)}
.wortmarke svg{width:24px;height:24px;flex:none}
.kopfrechts{display:flex;align-items:center;gap:var(--s2)}
.zurueck{text-decoration:none;font-weight:600;font-size:15px;display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border:1.5px solid var(--linie2);border-radius:999px;transition:border-color .25s,color .25s}
.zurueck:hover{color:var(--mensch);border-color:var(--mensch)}
.marke-ort{display:none}
@media(min-width:760px){ .marke-ort{display:inline} }

/* ---------- Eingang: Entscheidung sofort ---------- */
/* Die beiden Knoepfe muessen ohne Scrollen sichtbar sein — deshalb bleibt der
   Eingang bewusst flach und die Ueberschrift breit genug fuer zwei Zeilen. */
.eingang{padding-block:var(--s4);text-align:center}
.eingang h1{max-width:24ch;margin:var(--s2) auto 0}
.eingang .gross{margin:var(--s3) auto 0;max-width:52ch}
.verzweigung{display:block;width:100%;height:58px;margin-top:var(--s3)}
.verzweigung path{fill:none;stroke:var(--linie2);stroke-width:2}
.verzweigung .puls{stroke-width:2.8;stroke-dasharray:26 240;animation:fliessen 3.4s linear infinite}
.verzweigung .puls.l{stroke:var(--maschine)}
.verzweigung .puls.r{stroke:var(--mensch);animation-delay:1.7s}
.verzweigung circle{fill:var(--linie2)}
@keyframes fliessen{from{stroke-dashoffset:266}to{stroke-dashoffset:0}}

.tueren{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.tuer{background:var(--papier2);padding:var(--s4) var(--s3) var(--s3);text-decoration:none;display:block;
  position:relative;overflow:hidden;border:1.5px solid var(--linie);border-radius:var(--r3);text-align:left;
  color:inherit;transition:border-color .3s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1),background .3s}
.tuer:hover,.tuer:focus-visible{border-color:var(--c);transform:translateY(-3px);background:var(--papier3)}
.tuer .pads{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--c);stroke-width:1.6;opacity:.26}
.tuer .pads circle{fill:var(--c);stroke:none}
.tuer .sinnbild{width:96px;height:96px;display:block;margin-bottom:var(--s3);position:relative}
.tuer .mono{color:var(--c);position:relative}
.tuer h2{margin:var(--s1) 0 var(--s2);position:relative;font-size:clamp(34px,4.4vw,50px)}
.tuer p{color:var(--grau);font-size:16.5px;max-width:34ch;margin-bottom:var(--s3);position:relative}
.pfeil{display:inline-flex;align-items:center;gap:11px;font-weight:600;font-size:16.5px;color:var(--c);position:relative}
.pfeil svg{width:28px;height:8px;overflow:visible;flex:none}
.pfeil line{stroke:var(--c);stroke-width:1.8;transition:transform .3s cubic-bezier(.4,0,.2,1)}
.tuer:hover .pfeil line.schaft,.tuer:focus-visible .pfeil line.schaft{transform:scaleX(1.45)}
.tuer:hover .pfeil line.spitze,.tuer:focus-visible .pfeil line.spitze{transform:translateX(10px)}
.tuer.firma{--c:var(--maschine)}
.tuer.privat{--c:var(--mensch)}

.fakten{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin-top:var(--s5);
  border-top:1px solid var(--linie);padding-top:var(--s4)}
.faktum b{display:block;font-family:Schild;font-weight:800;font-size:25px;margin-bottom:6px;line-height:1}
.faktum p{color:var(--grau);font-size:16px}

/* ---------- Uebergabe: Hand und Greifer als kleine, wortlose Zwischenmarke.
   Keine Ueberschrift, kein Erklaertext — das Bild steht fuer sich. */
.uebergabe{padding-block:var(--s5) 0}
.rahmen{max-width:560px;margin-inline:auto;background:var(--papier2);border:1.5px solid var(--linie);
  border-radius:var(--r2);padding:var(--s2);overflow:hidden}
.rahmen svg{width:100%;height:auto;display:block}

/* ---------- Bloecke ---------- */
.platte{padding-block:var(--s5);border-top:1px solid var(--linie)}
.platte h2{margin:var(--s2) 0 var(--s3)}
.punkte{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin-top:var(--s4)}
.punkte.zwei{grid-template-columns:repeat(2,1fr)}
.punkte.vier{grid-template-columns:repeat(4,1fr)}
.punkt{background:var(--papier2);border:1.5px solid var(--linie);border-radius:var(--r2);padding:var(--s3)}
.punkt b{display:block;font-family:Schild;font-weight:800;font-size:27px;margin:var(--s1) 0;line-height:1}
.punkt p{color:var(--grau);font-size:16.5px}
.punkt .mono{color:var(--maschine)}
.punkt.warm .mono{color:var(--mensch)}

/* ---------- Wegweiser: fuehren mehrfach auf die beiden Unterseiten ---------- */
.ctaband{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;
  margin-top:var(--s5);padding:var(--s3);background:var(--papier2);border:1.5px solid var(--linie);
  border-radius:var(--r2)}
.ctaband p{color:var(--grau);font-size:17px;max-width:44ch}
.ctawege{display:flex;gap:var(--s2);flex-wrap:wrap}
.knopf.klein{font-size:17px;padding:11px 20px}
a.knopf{text-decoration:none;display:inline-flex;align-items:center}
.knopf.firma,.knopf.privat{color:var(--papier)}
.knopf.firma{background:var(--maschine)}
.knopf.privat{background:var(--mensch)}
.knopf.firma:hover{background:var(--maschine);filter:brightness(1.15)}
.knopf.privat:hover{background:var(--mensch);filter:brightness(1.15)}

/* ---------- Haeufige Fragen ---------- */
.fragen{list-style:none;padding-inline-start:0;margin-block-end:0;display:grid;
  grid-template-columns:1fr 1fr;gap:var(--s4);margin-top:var(--s4)}
.fragen h3{font-size:clamp(20px,2.2vw,25px);line-height:1.06;margin-bottom:10px}
.fragen p{color:var(--grau);font-size:16.5px}

/* ---------- Abschluss: die Entscheidung noch einmal ---------- */
.abschluss{margin-top:var(--s5);padding:var(--s4) var(--s3);background:var(--papier2);
  border:1.5px solid var(--linie);border-radius:var(--r3);text-align:center}
.abschluss h2{margin:var(--s2) 0}
.abschluss .gross{margin:0 auto var(--s4);max-width:56ch}
.abschluss .ctawege{justify-content:center}

/* ---------- Wegweiser: Klickstrecke in zwei Schritten ---------- */
.funnel{margin-top:var(--s4);border-top:1px solid var(--linie);padding-top:var(--s3)}
.fzaehler{margin-bottom:var(--s2)}
.fstep{display:none}
.fstep.an{display:block}
.fstep h3{margin-bottom:var(--s3)}
.fwahlen{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);text-align:left}
.fkarte{font:inherit;text-align:left;cursor:pointer;background:var(--papier);color:inherit;
  border:1.5px solid var(--linie2);border-radius:var(--r2);padding:var(--s3);display:block;
  transition:border-color .25s cubic-bezier(.4,0,.2,1),transform .25s cubic-bezier(.4,0,.2,1),background .25s}
.fkarte b{display:block;font-family:Schild;font-weight:800;font-size:26px;line-height:1.04;margin-bottom:6px}
.fkarte span{display:block;color:var(--grau);font-size:15.5px;line-height:1.5}
.fkarte:hover{border-color:var(--tinte);transform:translateY(-2px);background:var(--papier3)}
.fkarte:focus-visible{outline:2px solid var(--mensch);outline-offset:3px}
.fzurueck{margin-top:var(--s3);background:none;border:0;padding:0;cursor:pointer;font:inherit;
  font-size:15px;color:var(--grau);text-decoration:underline;text-underline-offset:3px}
.fzurueck:hover{color:var(--tinte)}

.kasten{border:1.5px solid var(--linie);border-radius:var(--r2);padding:var(--s3);background:var(--papier2);margin-top:var(--s3)}
pre{font-family:Mart,ui-monospace,monospace;font-size:12px;line-height:2;overflow-x:auto;margin:var(--s2) 0 0;color:var(--tinte)}
pre .k{color:var(--mensch)}

.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:var(--s3)}
.chip{font-family:Mart;font-size:11px;letter-spacing:.06em;border:1.5px solid var(--linie2);padding:8px 14px;
  color:var(--grau);border-radius:999px}

/* Zahl und Text stehen in eigenen Spalten und sind mittig zueinander ausgerichtet.
   Frueher klebte der kleine Text an der Grundlinie der 80-px-Zahl und sass dadurch
   sichtbar zu tief — deshalb hier kein baseline-Ausrichten. */
.grosszahl{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;
  gap:var(--s4);margin-top:var(--s3);background:var(--papier2);border:1.5px solid var(--linie);
  border-radius:var(--r2);padding:var(--s4) var(--s3)}
.gz-wert{display:flex;flex-direction:column;gap:6px;padding-right:var(--s4);border-right:1.5px solid var(--linie)}
.grosszahl .v{font-family:Schild;font-weight:800;font-size:clamp(46px,7vw,78px);line-height:.86;
  color:var(--maschine);font-variant-numeric:tabular-nums;white-space:nowrap}
.grosszahl .e{font-family:Mart,ui-monospace,monospace;font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--grau);font-weight:700}
.gz-text b{display:block;font-family:Schild;font-weight:800;font-size:26px;line-height:1.04;margin-bottom:8px}
.gz-text p{color:var(--grau);font-size:16px;max-width:54ch}

.tabelle{width:100%;border-collapse:collapse;margin-top:var(--s3)}
.tabelle th,.tabelle td{text-align:left;padding:15px 4px;border-bottom:1px solid var(--linie);font-size:17px}
.tabelle th{font-family:Mart;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--grau);font-weight:700}
.tabelle .v{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.tabelle tr.summe td{border-bottom:0;border-top:1.5px solid var(--tinte);font-weight:600;padding-top:17px}

.zaehler{padding-block:var(--s5);text-align:center;border-top:1px solid var(--linie)}
.zaehlwert{font-family:Schild;font-weight:800;font-size:clamp(88px,20vw,240px);line-height:.86;
  color:var(--mensch);font-variant-numeric:tabular-nums;margin:var(--s2) 0;letter-spacing:.01em}
.zaehlwert small{font-size:.3em}
.zaehlbahn{width:100%;height:26px;display:block;margin:var(--s2) 0 var(--s3)}
.zaehlbahn path{fill:none;stroke:var(--linie2);stroke-width:2}
.zaehlbahn .puls{stroke:var(--mensch);stroke-width:2.8;stroke-dasharray:30 300;animation:fliessen2 4s linear infinite}
@keyframes fliessen2{from{stroke-dashoffset:330}to{stroke-dashoffset:0}}
.zaehler .klein{max-width:56ch;margin:0 auto}

/* ---------- Das Handy mit einfliegenden Bannern ----------
   Das Handy bleibt gross und stehen; die Erklaerungen fliegen als Banner ein,
   statt als Fliesstext hinter dem Geraet zu verschwinden. */
.appstrecke{position:relative;margin-top:var(--s4)}
.appfix{position:sticky;top:0;height:100vh;display:grid;place-items:center}
@supports(height:100svh){ .appfix{height:100svh} }
.appinnen{position:relative;display:flex;align-items:center;justify-content:center;gap:var(--s5)}
.handy{width:min(390px,74vw);aspect-ratio:390/800;max-height:78vh;background:linear-gradient(160deg,#3b4046,#16181c 45%,#25292e);
  border-radius:46px;padding:11px;flex:none;box-shadow:0 40px 70px -40px var(--schatten)}
.scheibe{position:relative;height:100%;overflow:hidden;border-radius:36px;background:#000}
.schirm{position:absolute;inset:0;opacity:0;transition:opacity .6s cubic-bezier(.4,0,.2,1)}
.schirm.an{opacity:1}
.schirm img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}

.bannerfeld{width:420px;flex:none}
/* Alle Banner liegen in DERSELBEN Rasterzelle uebereinander. Dadurch ist der Stapel
   automatisch so hoch wie der laengste Text — keine feste Hoehe, kein Ueberlaufen. */
.bannerstapel{display:grid}
.banner{grid-area:1/1;background:var(--papier2);border:1.5px solid var(--linie);border-radius:var(--r2);
  padding:var(--s3);opacity:0;transform:translateX(38px);pointer-events:none;
  transition:opacity .5s cubic-bezier(.4,0,.2,1),transform .5s cubic-bezier(.4,0,.2,1);
  box-shadow:0 24px 44px -34px var(--schatten)}
.banner.an{opacity:1;transform:none;pointer-events:auto}
.banner h3{margin:var(--s1) 0 10px}
.banner p{color:var(--grau);font-size:16.5px}
.bannerpunkte{display:flex;gap:7px;justify-content:center;margin-top:var(--s3)}
.bannerpunkte i{width:26px;height:3px;border-radius:2px;background:var(--linie2);transition:background .4s}
.bannerpunkte i.an{background:var(--mensch)}

/* ---------- Rechtstexte (Impressum, Datenschutz, AGB) ----------
   Nur die Huelle. Der Rechtstext selbst ist anwaltlich ungeprueft und wird nicht angefasst. */
.recht{padding-block:var(--s4) var(--s5)}
.recht h1{font-size:clamp(38px,5.6vw,62px);margin:var(--s2) 0 var(--s3)}
.recht h2{font-size:clamp(21px,2.4vw,27px);line-height:1.06;margin:var(--s4) 0 var(--s2)}
.recht p{margin-bottom:var(--s2);font-size:17px}
.recht address{font-style:normal;font-size:17px;line-height:1.85}
.recht a{color:var(--mensch)}
.recht .fine{font-size:15.5px;color:var(--grau)}
.recht .box{background:var(--papier2);border:1.5px solid var(--linie);border-radius:var(--r2);
  padding:var(--s3);margin-top:var(--s2)}
.recht .box p:last-child{margin-bottom:0}
.recht .foot,.recht .rechtnav{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--linie);
  font-size:15px;color:var(--grau)}
/* Entwurfs-Hinweis: auffaellig, aber im Marken-Ton statt im alten Warn-Gelb. */
.draft{background:var(--papier2);border:1.5px solid var(--linie);border-left:5px solid var(--mensch);
  border-radius:var(--r2);padding:var(--s2) var(--s3);margin-bottom:var(--s4);font-size:15.5px;font-weight:600}

/* ---------- Formular ---------- */
.anmeldung{border:1.5px solid var(--linie);border-radius:var(--r3);padding:var(--s4) var(--s3);
  margin-top:var(--s4);background:var(--papier2)}
.f{max-width:500px;margin-top:var(--s3);display:flex;flex-direction:column;gap:13px}
.f input[type=email],.f input[type=text],.f textarea{font:inherit;font-size:16.5px;padding:14px 16px;
  border:1.5px solid var(--linie2);background:var(--papier);color:var(--tinte);border-radius:var(--r1);width:100%}
.f textarea{min-height:94px;resize:vertical}
.f input:focus,.f textarea:focus{outline:2px solid var(--mensch);border-color:var(--mensch)}
.einwilligung{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--grau);line-height:1.55}
.einwilligung input{margin-top:4px;flex:none;width:18px;height:18px;accent-color:var(--mensch)}
.knopf{font-family:Schild;font-weight:800;font-size:21px;letter-spacing:.02em;padding:14px 28px;border:0;
  cursor:pointer;background:var(--tinte);color:var(--papier);align-self:flex-start;border-radius:999px;
  transition:background .25s,transform .25s}
.knopf:hover{background:var(--mensch);transform:translateY(-2px)}
.knopf[disabled]{opacity:.5;cursor:default;transform:none}
.msg{font-size:15px;min-height:1.2em;font-weight:600}
.msg.bad{color:var(--mensch)}
.msg.ok{color:var(--maschine)}

main > section:last-child{padding-bottom:var(--s4)}
footer{padding-block:var(--s5);margin-top:var(--s5);border-top:1px solid var(--linie);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--s2);font-size:14.5px;color:var(--grau)}
footer a{text-decoration:none}
footer a:hover{color:var(--tinte)}

/* Vier Schritte nebeneinander werden unter 1080 px zu schmal — dann zwei Reihen. */
@media(max-width:1080px){ .punkte.vier{grid-template-columns:repeat(2,1fr)} }
@media(max-width:880px){
  .tueren,.punkte,.punkte.zwei,.punkte.vier,.fakten,.fragen{grid-template-columns:1fr}
  .ctaband{flex-direction:column;align-items:flex-start}
  .fwahlen{grid-template-columns:1fr}
  .eingang{padding-block:var(--s4) var(--s3)}
  .grosszahl{grid-template-columns:1fr;gap:var(--s3);padding:var(--s3)}
  .gz-wert{padding-right:0;padding-bottom:var(--s2);border-right:0;border-bottom:1.5px solid var(--linie)}
  /* Handy oben, Banner darunter. Der Banner nimmt sich die Hoehe, die sein laengster
     Text braucht; das Handy bekommt genau den Rest. So haengt nichts aus dem Bild,
     egal wie lang eine Erklaerung ist. */
  /* align-items:stretch gibt .appinnen eine FESTE Hoehe (der klebende Abschnitt ist
     genau einen Bildschirm hoch). Erst dadurch kann sich die Handy-Zeile den Rest
     teilen; mit hoehe:100% auf einem zentrierten Rasterfeld bliebe sie unbestimmt
     und das Handy behielte seine volle Eigenhoehe — dann haengt der Banner unten raus. */
  .appfix{padding-block:14px calc(14px + var(--einflug));grid-template-rows:minmax(0,1fr);
    align-items:stretch;justify-items:center}
  .appinnen{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:14px;width:100%;
    justify-items:center;align-items:center;min-height:0}
  .handy{width:min(320px,74vw);max-height:none;align-self:stretch;min-height:0}
  .bannerfeld{width:100%}
  .bannerpunkte{margin-top:14px}
  .banner{transform:translateY(var(--einflug));padding:20px}
  .banner.an{transform:none}
  .banner p{font-size:15.5px}
  .banner h3{font-size:23px}
}
/* Flache Bildschirme (aeltere Handys, kleine Laptop-Fenster): der Eingang macht sich
   schmaler, damit die beiden Knoepfe ohne Scrollen sichtbar bleiben. Nach HOEHE
   gesteuert, nicht nach Breite — auf hohen Handys aendert sich dadurch nichts. */
@media(max-height:700px){
  .eingang{padding-block:var(--s3)}
  .eingang h1{font-size:clamp(40px,7vw,72px)}
  .eingang .gross{margin-top:var(--s2)}
  .verzweigung{display:none}
}
@media(prefers-reduced-motion:reduce){
  .auf{opacity:1;transform:none}
  #boot .ridge,#boot .trace{stroke-dashoffset:0;animation:none}
  #boot .via{opacity:1;animation:none}
  .verzweigung .puls,.zaehlbahn .puls{animation:none;opacity:.55}
  .bahn{stroke-dashoffset:0}
  .via,#greifgut{opacity:1}
  .banner{transition:none}
}

/* ---------- Semantik-Hilfen ---------- */
/* Nur fuer Screenreader: sichtbar fuer Vorlesesoftware, unsichtbar am Bildschirm. */
.nur-vorleser{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* Sprunglink: erscheint erst bei Tastatur-Fokus. */
.sprung{position:absolute;left:-9999px;top:0;z-index:200;background:var(--tinte);color:var(--papier);padding:13px 22px;font-family:Schild;font-weight:800;font-size:19px;border-radius:0 0 var(--r1) 0;text-decoration:none}
.sprung:focus{left:0}
/* Aufzaehlungen sind jetzt echte Listen — Punkte und Einzug zuruecksetzen. */
/* Nur die Listen-Voreinstellungen zuruecksetzen — die Abstaende der Klassen bleiben stehen. */
.punkte,.chips,.fakten,.schritte{list-style:none;padding-inline-start:0;margin-block-end:0}