/* Beta-Seite auf dem Stil der Warteliste (Stand e714c52, live auf flicker-cyan.vercel.app).
   Baut auf style.css auf: gleiche Farben, Schrift, Kästen, Knöpfe. Hier nur der Preiskasten und der Ablauf
   der Live-Fassung (in style.css inzwischen ersetzt) und die neuen Zustände: Mail-Schritt, Bau, Vorschau, Kasse. */

/* Preiskasten wie auf der Live-Seite */
.stufen { width: 100%; min-width: 0; margin: 1.75rem 0 0; padding: 0; display: grid; grid-template-columns: auto 1fr; align-items: center; background: var(--blau); border: var(--strich) solid var(--weiss); border-radius: 6px; overflow: hidden; }
.stufen[hidden] { display: none; }
.stufe { display: grid; align-content: start; gap: .3rem; padding: 1rem 1.6rem 1.15rem 1.1rem; }
.stufe strong { font-size: clamp(2.25rem, 6vw, 3.25rem); line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.stufe .etikett { font: 500 .9375rem/1.2 "Geist", sans-serif; color: var(--weiss-70); }
.stufen .drin { margin: 0; padding: 1rem 1.1rem 1.05rem; grid-template-columns: 1fr 1fr; gap: .55rem 1.5rem; border-left: var(--strich) solid var(--weiss-linie); align-self: stretch; align-content: center; }

.knopf[hidden] { display: none; }

/* Schiene live: fertige Schritte weiß, der laufende zieht seine Linie gestrichelt, kommende bleiben blass. */
.schiene.live li::before { transform: scaleX(0); transition-delay: 0s; }
.schiene.live li.fertig::before { transform: scaleX(1); }
.schiene.live li.dran::before { transform: scaleX(1); background: repeating-linear-gradient(90deg, var(--weiss) 0 8px, transparent 8px 14px) 0 0 / 28px 3px; animation: strich 1s linear infinite; }
@keyframes strich { to { background-position: 28px 0; } }
.schiene.live li:not(.fertig):not(.dran) strong { color: var(--weiss-70); }
.schiene.live li.dran strong::after { content: "now"; margin-left: .5rem; padding: .1rem .35rem; font: 500 .6875rem/1 var(--zahl); vertical-align: .15em; border: var(--strich) solid var(--weiss); border-radius: var(--radius); }

/* Während ein Auftrag läuft: Bühne oben, nicht mehr bildschirmhoch. */
.auftrag .buehne { flex: none; justify-content: flex-start; padding-top: 2rem; padding-bottom: 1rem; }
.auftrag .verlauf:not(:empty) { margin-bottom: 0; }

/* Mail-Schritt: Art als Chips, Skript aufklappbar im selben Kasten */
.interesse { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.interesse legend { width: 100%; margin-bottom: .5rem; padding: 0; font: 500 .8125rem/1.3 var(--zahl); color: var(--weiss-70); }
.chip span small { font: 500 .75rem/1 var(--zahl); opacity: .8; margin-left: .25rem; }
.skript[open] summary { margin-bottom: .6rem; }
.skript textarea, .feedback textarea { display: block; width: 100%; resize: vertical; padding: .7rem .8rem; background: transparent; color: var(--weiss); caret-color: var(--weiss); border: var(--strich) solid var(--weiss-linie); border-radius: var(--radius); font: 500 .9375rem/1.5 "Geist", sans-serif; }
.skript textarea:focus { outline: 0; border-color: var(--weiss); }
.skript textarea::placeholder, .feedback textarea::placeholder { color: var(--weiss-70); opacity: 1; }
.skript .klein { margin-top: .5rem; font-family: "Geist", sans-serif; }
.hinweis.links { text-align: left; }

/* Bau: letzte Meldung als laufende Zeile, darunter die Zwischenstände mit Bild */
.ereignisse { list-style: none; padding: .9rem 0 0; display: grid; gap: .8rem; border-top: var(--strich) solid var(--weiss-linie); }
.ereignisse:empty { display: none; }
.ereignisse li { display: grid; grid-template-columns: 3.25rem 1fr; gap: .75rem; animation: rein .4s var(--raus) both; }
.ereignisse time { font: 500 .8125rem/1.5 var(--zahl); color: var(--weiss-70); font-variant-numeric: tabular-nums; }
.ereignisse p { font-size: .9375rem; overflow-wrap: anywhere; }
.ereignisse img { display: block; width: min(100%, 20rem); aspect-ratio: 16 / 9; object-fit: cover; margin-top: .5rem; border: var(--strich) solid var(--weiss-linie); border-radius: var(--radius); background: var(--blau-tief); }
.lauf .zusage span { display: block; }

/* Vorschau: Video füllt den Kasten, Hochformat mittig und begrenzt */
.film { border-bottom: 0; }
.film.hoch { aspect-ratio: 9 / 16; width: auto; max-width: 100%; height: min(70vh, 40rem); margin: 0 auto; border-left: 0; border-right: 0; }
.lauf:has(.film.hoch) .film { background: var(--blau-tief); }
.knoepfe { padding-top: 0; padding-left: 0; padding-right: 0; gap: .6rem; }
.knopf.voll { background: var(--weiss); color: var(--blau); height: 2.75rem; padding: 0 1rem; }
.knopf.voll:hover { transform: translateY(-1px); }
.knoepfe .knopf:not(.voll) { height: 2.75rem; padding: 0 1rem; }
.ic-stift { --bild: url("/icons/pencil-simple.svg"); }
.ic-karte { --bild: url("/icons/credit-card.svg"); }
.feedback { display: grid; gap: .5rem; }
.feedback[hidden] { display: none; }
.feedback > label { font-weight: 700; }
.feedback .kasten { padding: .5rem; }
.feedback .zeile-eingabe { align-items: flex-end; }
.feedback textarea { resize: none; border: 0; padding: .5rem .35rem; font-size: 1.0625rem; }
.feedback textarea:focus { outline: 0; }
.feedback .kasten button[type="submit"] { width: 3rem; height: 3rem; }
.feedback .hinweis { margin: 0; min-height: 0; }
.zeile-klein { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.knopf.leise { border-color: transparent; text-decoration: underline; text-decoration-color: var(--weiss-linie); text-underline-offset: 3px; }

/* Kasse: derselbe Kasten wie im Verlauf, in der Mitte */
.kasse [hidden] { display: none; }
.kasse { margin: auto; width: min(30rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; color: var(--weiss); background: var(--blau); border: var(--strich) solid var(--weiss); border-radius: 6px; box-shadow: 0 30px 70px -20px rgb(10 14 90 / .8); }
.kasse::backdrop { background: rgb(20 26 140 / .72); }
.kasse[open] { animation: rein .45s var(--raus) both; }
.kasse .lauf-kopf { flex-direction: row; align-items: center; justify-content: space-between; }
.kasse .zu { display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; color: var(--weiss); background: transparent; border: var(--strich) solid var(--weiss-linie); border-radius: var(--radius); cursor: pointer; }
.kasse .zu:hover { border-color: var(--weiss); }
.kasse .zu .ic { width: .85rem; height: .85rem; }
.k-zeile { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.k-zeile strong { font-size: 1.75rem; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.k-element:empty { display: none; }
.knopf.breit { width: 100%; justify-content: center; }
/* Einwilligung Meta-Pixel: kleine Leiste unten, nur wenn ein Pixel eingetragen ist */
.zustimmung-leiste { position: fixed; z-index: 6; left: 1rem; right: 1rem; bottom: 1rem; max-width: 30rem; margin-left: auto; padding: .9rem 1rem; color: var(--weiss); background: var(--blau); border: var(--strich) solid var(--weiss); border-radius: 6px; box-shadow: 0 20px 50px -20px rgb(10 14 90 / .8); animation: rein .45s var(--raus) both; }
.zustimmung-leiste p { margin: 0 0 .75rem; font: 500 .875rem/1.45 "Geist", sans-serif; }
.zustimmung-leiste a { color: inherit; text-underline-offset: 3px; }
.zustimmung-leiste .zl-knoepfe { display: flex; gap: .5rem; justify-content: flex-end; flex-wrap: wrap; }
.zustimmung-leiste .knopf { height: 2.5rem; padding: 0 .9rem; }
#pixel-wahl[hidden] { display: none; }
.knopf:disabled { opacity: .5; cursor: default; transform: none; }

@media (max-width: 40rem) {
  .stufen { grid-template-columns: 1fr; }
  .stufen .drin { grid-template-columns: 1fr; border-left: 0; border-top: var(--strich) solid var(--weiss-linie); }
  .knoepfe .knopf { flex: 1 1 100%; justify-content: center; }
  .film.hoch { height: min(62vh, 34rem); }
  .ereignisse li { grid-template-columns: 1fr; gap: .15rem; }
}
@media (prefers-reduced-motion: reduce) {
  .schiene.live li.dran::before, .ereignisse li, .kasse[open] { animation: none; }
}
.kasse .hinweis:empty { display: none; }


/* Startseite (2026-10-20): Held mit Feld, darunter Beispiel, drei Schritte, Preis, Fragen, Schluss.
   Jede Fläche hat eine eigene Form; alles bleibt im blauen 0/1-Stil. */
.sprung:focus { position: fixed; top: .75rem; left: .75rem; z-index: 5; width: auto; height: auto; clip-path: none; padding: .6rem .9rem; background: var(--weiss); color: var(--blau); border-radius: var(--radius); font-weight: 700; }
.navi { display: flex; gap: 1.5rem; margin-left: auto; }
.navi a { color: var(--weiss-70); transition: color .18s var(--raus); }
.navi a:hover { color: var(--weiss); }
.plaetze { margin-top: .1rem; text-align: center; font-size: .875rem; color: var(--weiss-70); text-wrap: balance; }
.auftrag .plaetze { display: none; }

/* Beispiel: vier eigene Ads in einer Reihe, gleiche Höhe, abwechselnd 9:16 und 4:5 (Spaltenbreiten im Verhältnis der Formate) */
.probe { display: grid; gap: 2rem; }
.probe-text { display: grid; gap: .9rem; }
.probe-text p:not(.klein) { max-width: 52ch; font-size: 1.0625rem; }
.ads-scroll { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(-1 * clamp(1rem, 4vw, 2rem)); padding: 0 clamp(1rem, 4vw, 2rem) .25rem; }
.ads-scroll::-webkit-scrollbar { display: none; }
.ads-reihe { display: grid; grid-template-columns: 9fr 12.8fr 9fr 12.8fr; gap: 1rem; align-items: end; min-width: 40rem; }
.ads-reihe .rahmen { scroll-snap-align: start; }
.ads-reihe figcaption span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Drei Schritte: wer, was, wie lange. Eine Linie über jedem Schritt. */
.drei { list-style: none; padding: 0; margin-top: 2.25rem; display: grid; }
.drei > li { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: .5rem 2rem; padding: 1.75rem 0 2rem; border-top: var(--strich) solid var(--weiss-linie); }
.wer { padding-top: .7rem; font: 500 .8125rem/1.4 var(--zahl); color: var(--weiss-70); }
.drei h3 { font-size: clamp(1.5rem, 3.2vw, 2.25rem); line-height: 1.1; letter-spacing: -.03em; }
.drei p { margin-top: .6rem; max-width: 52ch; }
.drei .schiene { margin-top: 1.75rem; gap: 1rem; }
.drei .schiene strong { font-size: .9375rem; }
.drei .schiene span { font-size: .875rem; }

/* Preis: eine große Zahl, was drin ist, darunter Vorschau und Änderungsrunde */
.preise .stufen { margin-top: 2rem; }
.preise .stufe { padding: 1.4rem 2rem 1.4rem 1.4rem; }
.preise .stufe strong { font-size: clamp(3.25rem, 9vw, 5.5rem); }
.preise .drin { padding: 1.4rem; }
.neben-preise { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; border-top: var(--strich) solid var(--weiss-linie); }
.neben-preise p { display: flex; align-items: baseline; gap: .8rem; padding: 1rem 1.4rem; }
.neben-preise p + p { border-left: var(--strich) solid var(--weiss-linie); }
.neben-preise strong { font-size: 1.625rem; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.neben-preise span { font-size: .9375rem; color: var(--weiss-70); }

.fragen h2 { position: sticky; top: 1.5rem; }
.fuss-marke { padding: .3rem .6rem; font-weight: 700; }

/* Während ein Auftrag läuft: Preis und Schluss treten zurück, Beispiel und Schritte bleiben. */
.auftrag .preise, .auftrag .schluss { display: none; }

/* Abschnitte tauchen beim Scrollen auf (nur wo der Browser es kann und Bewegung erwünscht ist; sonst sofort sichtbar). */
@keyframes auftauchen { from { opacity: 0; transform: translateY(1.25rem); } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .zeigen, .preise .stufen, .fragen-liste details, .schluss > * { animation: auftauchen linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
  }
}

@media (max-width: 56rem) {
  .drei > li { grid-template-columns: 1fr; }
  .wer { padding-top: 0; }
  .fragen h2 { position: static; }
}
@media (max-width: 40rem) {
  .navi { display: none; }
  .kopf .beta { margin-left: auto; }
  .probe .formate { gap: .6rem; }
  .neben-preise { grid-template-columns: 1fr; }
  .neben-preise p + p { border-left: 0; border-top: var(--strich) solid var(--weiss-linie); }
}
/* Held: etwas kürzer als der Bildschirm, damit das Beispiel darunter schon anklingt. */
.warte .buehne { min-height: min(calc(100dvh - 10.5rem), 46rem); }