/* Weblion · Kurz-Check / Verifica rapida. Ein Schritt je Bildschirm, Fortschritt oben, Weiter-Knopf unten im Daumenbereich. */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--bg); }
.rahmen { padding-block: 0; }
.kopf { position: sticky; top: env(safe-area-inset-top, 0px); background: var(--bg); z-index: 5; padding-block: 14px 10px; display: grid; gap: 10px; }
.kopfzeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; }
.zurueck { border: 0; background: none; color: var(--blau); font: 600 15px var(--text); padding: 8px 4px; cursor: pointer; }
.zurueck:disabled { visibility: hidden; }
.leiste { height: 6px; background: var(--linie); border-radius: 3px; overflow: hidden; }
.leiste div { height: 100%; width: 0; background: var(--tuerkis); border-radius: 3px; transition: width .3s ease; }
.schrittinfo { font-size: 13px; color: var(--leise); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
main { flex: 1 1 auto; padding-block: 8px 150px; }

.optionen { display: grid; gap: 10px; }
.optionen.kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opt { display: flex; gap: 12px; align-items: flex-start; text-align: left; width: 100%;
  background: var(--flaeche); color: var(--tinte); border: 1.5px solid var(--linie); border-radius: 12px;
  padding: 14px; font: 500 16px/1.35 var(--text); cursor: pointer; min-height: 56px; hyphens: manual; }
.opt > span:last-child { min-width: 0; }
.opt .mark { flex: none; width: 22px; height: 22px; margin-top: 1px; border: 2px solid var(--blau); border-radius: 6px; display: grid; place-items: center; }
.opt.rund .mark { border-radius: 50%; }
.opt[aria-pressed="true"], .opt[aria-checked="true"] { border-color: var(--tuerkis); background: var(--tuerkis-hell); }
.opt[aria-pressed="true"] .mark, .opt[aria-checked="true"] .mark { background: var(--tuerkis); border-color: var(--tuerkis); }
.opt[aria-pressed="true"] .mark::after, .opt[aria-checked="true"] .mark::after { content: ""; width: 10px; height: 6px; border: solid var(--auf-akzent); border-width: 0 0 2.5px 2.5px; transform: translateY(-1px) rotate(-45deg); }
.opt strong { display: block; font-weight: 600; }
.opt small { display: block; color: var(--leise); font-size: 14px; margin-top: 2px; }
.kacheln .opt { min-height: 64px; align-items: center; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1.5px solid var(--linie); background: var(--flaeche); color: var(--tinte); border-radius: 999px; padding: 10px 14px; font: 500 15px var(--text); cursor: pointer; text-align: left; }
.chip[aria-pressed="true"], .chip[aria-checked="true"] { border-color: var(--tuerkis); background: var(--tuerkis-hell); }
.opt:hover, .chip:hover { border-color: var(--blau); }

label.feld, .feldtitel { display: grid; gap: 6px; margin-top: 18px; font-weight: 600; font-size: 15px; }
.feldtitel { margin-top: 22px; margin-bottom: 8px; }
label.feld em { font-style: normal; color: var(--leise); font-weight: 400; }
input[type=text], input[type=tel], input[type=email], textarea { width: 100%; font: 400 17px var(--text); color: var(--tinte);
  background: var(--flaeche); border: 1.5px solid var(--linie); border-radius: 10px; padding: 12px 14px; }
textarea { min-height: 96px; resize: vertical; }
.fehler { color: var(--fehler); font-size: 15px; margin-top: 12px; min-height: 1em; }
.einwilligung { display: flex; gap: 12px; align-items: flex-start; margin-top: 22px; font-size: 15px; cursor: pointer; }
.einwilligung input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--tuerkis); flex: none; }
.honig { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.start { padding-top: 12px; display: grid; gap: 18px; }
.vorteile { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.vorteile li { display: flex; gap: 10px; align-items: baseline; }
.vorteile li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--tuerkis); transform: translateY(-2px); }
.absender { border-top: 1px solid var(--linie); padding-top: 14px; font-size: 15px; color: var(--leise); }
.absender strong { color: var(--tinte); }
.ergebnis { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 14px; padding: 16px; display: grid; gap: 12px; }
.ergebnis h3 { font: 600 13px var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--leise); }
.ergebnis ul { margin: 0; padding-left: 20px; }
.stoerung { background: var(--fehler-hell); border: 1.5px solid var(--fehler); border-radius: 14px; padding: 16px; display: grid; gap: 10px; margin-top: 18px; }
.stoerung strong { color: var(--fehler); }
.stoerung .knoepfe { display: grid; gap: 8px; }

.fuss { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; background: linear-gradient(to top, var(--bg) 70%, transparent);
  padding: 18px max(16px, env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.fuss .innen { max-width: 560px; margin: 0 auto; display: grid; gap: 6px; }
@media (min-width: 720px) { .optionen.kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rahmen.check { max-width: 680px; } .fuss .innen { max-width: 680px; } }

/* Papierschnipsel nach dem Absenden (Fassung 6): kurz, einmal, nicht bei „weniger Bewegung“ */
.schnipsel { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 30; }
.schnipsel i { position: absolute; top: -24px; width: 10px; height: 14px; border-radius: 2px; border: 1px solid rgba(19, 53, 42, .25); animation: fallen 2.6s cubic-bezier(.3, .6, .5, 1) forwards; }
@keyframes fallen { to { transform: translate(var(--weit), 112vh) rotate(var(--dreh)); } }