/* Workshop-Seite: nur was die denti-Seite nicht schon hat. Farben, Schriften und Maße kommen aus styles.css.
   Aufbau: Leiste oben · Kopf · Anmeldung · Danke-Ansicht · Fuß · Zustände. */

/* ── Leiste ganz oben: Termin und Countdown, klebt beim Scrollen ───────────
   Schwarz wie der Knopf. Die Zahlen sitzen in kleinen Schildern, eine neue Zahl rutscht von oben hinein. */
.ws-leiste {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 44px; padding: 6px 16px;
  background: #0d0d0d; color: #fff; white-space: nowrap;
  font-size: .875rem; font-weight: 500; letter-spacing: .005em; line-height: 1;
}
.ws-leiste__punkt { width: 8px; height: 8px; border-radius: 50%; background: #e11d48; flex: none; }
.ws-leiste__leise { color: rgb(255 255 255 / .6); }
.ws-leiste__trenner { width: 1px; height: 14px; background: rgb(255 255 255 / .18); }
.ws-leiste__zaehler { align-items: center; gap: 6px; }
.ws-leiste__tage { display: inline-flex; align-items: center; gap: 6px; margin-right: 4px; }
.ws-leiste__zahl {
  display: inline-grid; place-items: center; min-width: 26px; height: 24px; padding: 0 5px; overflow: hidden;
  border-radius: 6px; background: rgb(255 255 255 / .12);
  box-shadow: inset 0 -1px 0 rgb(0 0 0 / .35), inset 0 1px 0 rgb(255 255 255 / .06);
}
.ws-leiste__zahl b { display: inline-block; font-weight: 600; font-variant-numeric: tabular-nums; color: #fff; }
.ws-leiste__doppel { margin: 0 -2px; font-weight: 600; color: rgb(255 255 255 / .35); }

/* Der Countdown erscheint erst, wenn das Skript läuft. Bis dahin steht nur der Termin da. */
.ws-leiste__zaehler, .ws-leiste__live, .ws-leiste__nur-mit-uhr { display: none; }
.ws-uhr-laeuft .ws-leiste__zaehler { display: inline-flex; }
.ws-uhr-laeuft .ws-leiste__nur-mit-uhr { display: block; }
.ws-ohne-tage .ws-leiste__tage { display: none; }
/* Während des Workshops */
.ws-live .ws-leiste__zaehler { display: none; }
.ws-live .ws-leiste__live { display: inline; }
/* Danach */
.ws-vorbei .ws-leiste { display: none; }
/* Am Handy: nur Punkt und Countdown, der Termin steht im Kopf über den Klappkarten */
@media (max-width: 767px) {
  .ws-leiste { min-height: 42px; gap: 10px; }
  .ws-uhr-laeuft .ws-leiste__termin { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .ws-leiste__punkt { animation: ws-puls 2s ease-out infinite; }
  .ws-leiste__zahl b.blaettern { animation: ws-zahl-rein .32s cubic-bezier(.2, .8, .2, 1); }
}
@keyframes ws-puls { 0% { box-shadow: 0 0 0 0 rgb(225 29 72 / .55); } 70%, 100% { box-shadow: 0 0 0 7px rgb(225 29 72 / 0); } }
@keyframes ws-zahl-rein { from { transform: translateY(-75%); opacity: .35; } to { transform: none; opacity: 1; } }

/* Die Leiste klebt oben: Sprünge zur Anmeldung landen direkt darunter */
html { scroll-padding-top: 44px; }
#anmelden { scroll-margin-top: 0; }

/* ── Kopf ──────────────────────────────────────────────────────────────── */
/* Ohne Navigation beginnt der Kopf direkt unter der Leiste, nach unten schließt die Anmeldung an.
   Abstände in festen Stufen (8er-Raster), nicht mehr abhängig von der Fensterhöhe:
   Leiste → Pille 32 px am Handy, 48 px am Tablet, 64 px am Computer · Pille → Überschrift 24 · Überschrift → Unterzeile 24 ·
   Unterzeile → Termin 32 · Termin → Klappkarten 12 · Klappkarten → Handy rund 48 bis 64 (sichtbarer Abstand). */
.start { padding-top: 32px; padding-bottom: 0; }
.start h1 { margin-top: 24px; }
.start .buehne { margin-top: 48px; }
@media (min-width: 768px) {
  .start { padding-top: 48px; }
  .start .buehne { margin-top: 56px; }
}
@media (min-width: 1024px) {
  .start { padding-top: 64px; }
  .start .buehne { margin-top: 64px; }
}
/* Unterzeile im Kopf: Der Kasten ist so breit wie die Überschrift, die Zeilen laufen voll (Stevens Wahl, 14.11.2026: Variante 1).
   Die Breite der Überschrift ist das 16,44-Fache ihrer Schriftgröße (gemessen an der längeren Zeile). Bewusst nicht balance:
   Das erzwingt gleich lange Zeilen und macht den Block schmaler. pretty verhindert nur ein einzelnes Wort in der letzten Zeile.
   Untergrenze 43em: Auf kleineren Computerfenstern (unter etwa 1.250 px) bräuchte der Text sonst vier Zeilen statt drei. */
@media (min-width: 1024px) {
  .start .start__unter { max-width: max(43em, calc(16.44 * clamp(1.875rem, 1.4rem + 2.3vw, 3.5rem))); text-wrap: pretty; }
}
/* Am Handy steht jeder Satz der Überschrift für sich. So bleibt „so weit.“ nie allein in der letzten Zeile. */
@media (max-width: 767px) { .start h1 .ws-satz { display: block; text-wrap: balance; } }

/* Termin und Countdown unter der Unterzeile: schwarze Klappkarten. Wechselt eine Zahl, klappt sie wie ein Schild um. */
.ws-uhr { margin-top: 32px; text-align: center; }
.ws-uhr__termin { margin: 0; font-size: .875rem; font-weight: 500; color: var(--text-leise); }
.ws-uhr__reihe { display: none; justify-content: center; gap: clamp(8px, 2vw, 14px); margin-top: 12px; }
.ws-uhr-laeuft .ws-uhr__reihe { display: flex; }
.ws-uhr__teil { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ws-uhr__teil small { font-size: .75rem; font-weight: 500; color: var(--text-leise); }
.ws-klappe {
  position: relative; display: grid; place-items: center; overflow: hidden;
  width: clamp(62px, 15vw, 76px); height: clamp(66px, 16vw, 80px);
  border-radius: 14px; background: #0d0d0d; perspective: 300px;
  box-shadow: 0 1px 1px rgb(13 13 13 / .06), 0 6px 12px -4px rgb(13 13 13 / .18), 0 18px 32px -16px rgb(13 13 13 / .3);
}
.ws-klappe::before { content: ""; position: absolute; inset: 0 0 50%; background: rgb(255 255 255 / .05); pointer-events: none; }
.ws-klappe::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgb(0 0 0 / .6); box-shadow: 0 1px 0 rgb(255 255 255 / .06); }
.ws-klappe b { font-family: "Plus Jakarta Sans", "Geist", sans-serif; font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.25rem); font-weight: 700; letter-spacing: -.04em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; backface-visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .ws-klappe b.blaettern { animation: ws-klappen .5s cubic-bezier(.3, .7, .2, 1); }
}
@keyframes ws-klappen { from { transform: rotateX(-92deg); } 55% { transform: rotateX(8deg); } to { transform: none; } }
/* Gegen das Zucken der ganzen Zeile im Sekundentakt (Steven, 15.11.2026, Safari): Ohne diese Zeilen legt der Browser für jede
   umklappende Zahl kurz eine eigene Ebene an und baut sie danach wieder ab. Dabei rutscht die Zeile um einen Bildpunkt hin und her.
   So bleiben Zeile und Zahlen dauerhaft auf ihrer eigenen Ebene und stehen still. */
.ws-uhr__reihe, .ws-klappe b, .ws-leiste__zaehler, .ws-leiste__zahl b { will-change: transform; }
/* Während des Workshops und danach braucht es die Karten nicht mehr */
.ws-live .ws-uhr__reihe, .ws-vorbei .ws-uhr { display: none; }

/* Handy und Tablet: nur der Film, keine Karten (Stevens Wunsch, 14.11.2026). Am Computer schweben die Karten neben dem Handy. */
@media (max-width: 1023px) { .kk .kk-seite { display: none; } }

/* ── Anmeldung ─────────────────────────────────────────────────────────── */
/* Aufbau von oben nach unten: Überschrift, Unterzeile, darunter das Formular. Nichts steht nebeneinander (Steven, 14.11.2026).
   Alles zusammen steht auf einer grauen Karte, die Felder sind weiß mit Hauchlinie (Stevens Wahl, 15.11.2026: Variante B).
   Im Fokus bekommt ein Feld einen schwarzen Rand und einen weichen Ring. */
.ws-anmeldung { padding-top: 32px; padding-bottom: 64px; }
@media (min-width: 768px) { .ws-anmeldung { padding-top: 48px; padding-bottom: 96px; } }

/* Die Karte: 624 px Formular plus Innenabstand. Innen 24 px am Handy, 40 px am Tablet, 56 px am Computer (8er-Raster).
   Farbe und Ecken wie .karte in styles.css (24 px am Handy, 28 px ab Tablet). */
.ws-karte {
  width: min(736px, 100% - 2 * var(--rand));
  margin-inline: auto;
  padding: 32px 20px 24px;
  border-radius: 24px;
  background: var(--karte);
}
@media (min-width: 560px) { .ws-karte { padding: 40px; border-radius: 28px; } }
@media (min-width: 1024px) { .ws-karte { padding: 56px; } }

/* Überschrift und Unterzeile in der Karte: oben kein Abstand, 32 px bis zu den Feldern */
.ws-anmeldung__kopf { margin-bottom: 32px; }
.ws-karte .kopf h2 { margin-top: 0; }
/* Unterzeile: Der zweite Satz steht direkt hinter dem ersten, nicht in einer neuen Zeile (Steven, 14.11.2026).
   Der Text läuft als ein Absatz: Die erste Zeile läuft voll, nur ein einzelnes Wort in der letzten Zeile wird verhindert
   (text-wrap: pretty aus styles.css, dieselbe Regel wie im Chat von denti). Bewusst NICHT balance: Das erzwingt gleich lange
   Zeilen und bricht dafür zu früh um. */
.ws-anmeldung__kopf .unter { max-width: 34em; }

.ws-anmeldung__rahmen { width: 100%; }
.ws-formular { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 560px) { .ws-formular { grid-template-columns: 1fr 1fr; } .ws-feld--breit, .ws-senden, .ws-klein, .ws-fehler--senden { grid-column: 1 / -1; } }
.ws-feld { display: grid; gap: 8px; align-content: start; }
.ws-feld label { color: var(--text-stark); font-size: .875rem; font-weight: 500; line-height: 1.3; }
.ws-feld input {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border: 1px solid rgb(13 13 13 / .06);
  border-radius: 16px;
  background: #fff;
  color: var(--text-stark);
  font: inherit;
  font-size: 1rem;
  outline: none;
  transition: background-color var(--t-kurz) var(--kurve), border-color var(--t-kurz) var(--kurve), box-shadow var(--t-kurz) var(--kurve);
}
.ws-feld input::placeholder { color: var(--text-leise); }
@media (hover: hover) { .ws-feld input:hover { border-color: rgb(13 13 13 / .14); } }
.ws-feld input:focus { background: #fff; border-color: #0d0d0d; box-shadow: 0 0 0 4px rgb(13 13 13 / .08); }
.ws-feld input[aria-invalid="true"] { border-color: #b91c1c; }
.ws-feld input[aria-invalid="true"]:focus { background: #fff; box-shadow: 0 0 0 4px rgb(185 28 28 / .12); }
/* Vom Browser ausgefüllte Felder bleiben weiß (Chrome färbt sie sonst hellblau) */
.ws-feld input:-webkit-autofill { -webkit-text-fill-color: var(--text-stark); box-shadow: 0 0 0 1000px #fff inset; }
.ws-feld input:-webkit-autofill:focus { box-shadow: 0 0 0 1000px #fff inset, 0 0 0 4px rgb(13 13 13 / .08); }
.ws-hilfe { margin: 0; font-size: .8125rem; line-height: 1.4; color: var(--text-leise); }
.ws-fehler { margin: 0; font-size: .8125rem; line-height: 1.4; color: #b91c1c; }
/* Ist ein Feld falsch ausgefüllt, steht unter ihm nur die Fehlermeldung, nicht zusätzlich der Hinweis */
.ws-feld:has(input[aria-invalid="true"]) .ws-hilfe { display: none; }
.ws-fehler--senden { text-align: center; }
/* Knopf so breit wie sein Inhalt und mittig, wie auf der Danke-Seite (Steven, 15.11.2026). Nur am Handy über die ganze Breite. */
.ws-senden { justify-self: center; margin-top: 16px; justify-content: center; gap: 10px; }
@media (max-width: 559px) { .ws-senden { width: 100%; } }
.ws-senden[disabled] { opacity: .6; cursor: progress; }
.ws-klein { margin: 0; font-size: .8125rem; line-height: 1.5; text-align: center; color: var(--text-leise); text-wrap: pretty; }
.ws-honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Knopf im Formular: ein Sitzplatz (Stevens Wahl, 14.11.2026). Alle paar Sekunden federt er kurz, als setzte sich jemand. */
.ws-senden .ws-sitz { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
@media (prefers-reduced-motion: no-preference) {
  .ws-senden .ws-sitz { transform-origin: 50% 100%; animation: ws-sitz-setzen 2.8s cubic-bezier(.3, 1.5, .5, 1) infinite; }
  .ws-senden[disabled] .ws-sitz { animation: none; }
}
@keyframes ws-sitz-setzen { 0%, 62%, 100% { transform: none; } 74% { transform: translateY(1.5px) scaleY(.86); } 86% { transform: scaleY(1.06); } }

/* ── Danke-Ansicht ─────────────────────────────────────────────────────── */
.ws-danke { text-align: center; }
.ws-danke:focus { outline: none; }
.ws-danke h3 { margin: 14px 0 10px; }
.ws-danke p { margin: 0 auto; max-width: 44ch; text-wrap: balance; }
.ws-danke__haken {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--akzent);
  color: var(--auf-akzent);
}
.ws-danke__haken svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ws-danke__kalender { margin-top: 18px !important; color: var(--text-stark); font-weight: 500; }
.ws-danke__knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 12px; }
.ws-danke__knoepfe .btn { flex: 0 1 220px; justify-content: center; }
@media (max-width: 559px) { .ws-danke__knoepfe .btn { flex: 1 1 100%; } }
.ws-danke__knoepfe svg { fill: none; stroke: currentColor; stroke-width: 2; }
@media (prefers-reduced-motion: no-preference) {
  .ws-danke:not([hidden]) { animation: rise var(--t-eintritt) var(--kurve) both; }
}

/* ── Danke-Seite (danke.html) ─────────────────────────────────────────────
   Derselbe Kopf wie auf der Anmeldeseite, nur ohne Handy und Formular. Darunter die beiden Kalender-Knöpfe.
   Die Seite füllt mindestens den Bildschirm, damit der Fuß unten steht. */
.ws-danke-seite main { min-height: calc(100dvh - 44px - 130px); }
.ws-danke-seite .start { padding-bottom: 96px; }
/* Jeder Satz der Überschrift in einer eigenen Zeile, auch am Computer */
.ws-danke-seite .start h1 .ws-satz { display: block; }
/* Der farbige Schleier im Hintergrund läuft nach unten weich aus, statt am Ende des Kopfes hart abzubrechen */
.ws-danke-seite .schleier::before { max-height: none; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.ws-danke-seite .knoepfe { margin-top: 32px; }
.ws-danke-seite .knoepfe svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 559px) { .ws-danke-seite .knoepfe .btn { width: 100%; } }

/* Ein Kalender-Knopf für alle, darunter der kleine Link für Google am Computer (auf Danke-Seite und in der Danke-Ansicht) */
.ws-kal-hinweis { margin: 16px 0 0; font-size: .875rem; line-height: 1.5; color: var(--text-leise); text-align: center; }
.ws-kal-hinweis a { color: var(--text-stark); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgb(13 13 13 / .3);
  /* Größere Fläche zum Antippen (44 px hoch), ohne dass sich der Text verschiebt */
  display: inline-block; padding: 13px 6px; margin: -13px -6px; }
.ws-kal-hinweis a:hover { text-decoration-color: currentColor; }
.ws-android .ws-kal-hinweis { display: none; }   /* am Android-Handy öffnet der Knopf schon Google Kalender */

/* ── Fuß ───────────────────────────────────────────────────────────────── */
.ws-fuss { padding: 24px 0 40px; }
.ws-fuss__zeile { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 20px; font-size: .875rem; letter-spacing: .004em; color: var(--text-leise); }
.ws-fuss__zeile a { color: inherit; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.ws-fuss__zeile a:hover { color: var(--text-stark); }
.ws-fuss__hinweis { margin: 4px auto 0; text-align: center; font-size: .8125rem; color: var(--text-leise); max-width: 62ch; }
/* Am Computer passt der Hinweis in eine Zeile, darunter beginnt der zweite Satz in einer eigenen Zeile */
@media (min-width: 1024px) { .ws-fuss__hinweis { max-width: none; } }
@media (max-width: 1023px) { .ws-fuss__hinweis span { display: block; text-wrap: balance; } }

/* ── Zustände ──────────────────────────────────────────────────────────── */
/* Ausgeblendetes bleibt ausgeblendet, auch wenn eine Regel oben display setzt */
.ws-formular[hidden], .ws-danke[hidden], .ws-anmeldung__kopf[hidden] { display: none !important; }
/* Nach dem Workshop: keine Anmeldung mehr */
.ws-vorbei #anmelden { display: none; }