/* Die Startseite (05.10.2026, „aufpeppen"): dieselben Farben wie die App
   (stil.css), Nachthimmel, Gold für Sterne, Pink für die Marke. Keine
   fremden Schriften oder Skripte — alles von hier. */
body.start { background: var(--grund); overflow-x: hidden; }
.start main { width: auto; max-width: none; padding: 0; }
.start .breite { width: min(100% - 40px, 1080px); margin: 0 auto; }

/* Sternenhimmel: ein paar Punkte, fest, nicht animiert. */
.himmel {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1px 1px at 12% 18%, #ffffff55, transparent 60%),
    radial-gradient(1px 1px at 68% 9%, #ffffff44, transparent 60%),
    radial-gradient(1.5px 1.5px at 84% 32%, #ffffff66, transparent 60%),
    radial-gradient(1px 1px at 31% 47%, #ffffff33, transparent 60%),
    radial-gradient(1px 1px at 52% 71%, #ffffff44, transparent 60%),
    radial-gradient(1.5px 1.5px at 7% 83%, #ffffff55, transparent 60%),
    radial-gradient(1px 1px at 91% 77%, #ffffff33, transparent 60%),
    radial-gradient(900px 600px at 80% -10%, #ff2d6f1f, transparent 70%),
    radial-gradient(700px 500px at -10% 30%, #7c4dff1a, transparent 70%),
    var(--grund);
}

/* Kopf */
.kopf { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; }
.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 800; font-size: 22px; letter-spacing: -0.01em; }
.logo img { width: 40px; height: 40px; }
.kopf nav.haupt a { color: var(--text-2); text-decoration: none; font-size: 15px; margin-left: 22px; }
.kopf nav.haupt a:hover { color: var(--text); }
/* Sprachwahl (13.10.2026): feste Adressen je Sprache, kein Cookie. Seit
   14.10. als Flagge, die die vier Sprachen aufklappt (<details>, ohne Skript
   bedienbar). Bewegung nur beim Öffnen; bei „Bewegung reduzieren“ keine. */
.kopf-rechts { display: flex; align-items: center; }
.sprachen { position: relative; margin-left: 22px; }
.sprachen summary { list-style: none; display: flex; align-items: center; gap: 7px; padding: 7px 9px;
  border-radius: 12px; border: 1px solid transparent; cursor: pointer; user-select: none;
  transition: background .2s, border-color .2s; }
.sprachen summary::-webkit-details-marker { display: none; }
.sprachen summary:hover, .sprachen[open] summary { background: var(--flaeche-hoch); border-color: var(--rand); }
.sprachen summary:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.flagge { display: block; flex: none; width: 22px; height: 16px; border-radius: 3px; object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); }
.sprachen .pfeil { width: 12px; height: 12px; color: var(--text-2); transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.sprachen[open] .pfeil { transform: rotate(180deg); }
.sprach-liste { position: absolute; z-index: 30; right: 0; top: calc(100% + 8px); min-width: 186px; padding: 6px;
  display: flex; flex-direction: column; gap: 2px; border-radius: 16px; background: rgba(18, 18, 25, .94);
  border: 1px solid var(--rand); box-shadow: 0 22px 44px -14px rgba(0, 0, 0, .8);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transform-origin: top right; }
.kopf .sprach-liste a { display: flex; align-items: center; gap: 12px; margin: 0; padding: 10px 12px; border-radius: 11px;
  color: var(--text); text-decoration: none; font-size: 15px; font-weight: 600; transition: background .15s; }
.kopf .sprach-liste a:hover { background: var(--flaeche-hoch); }
.kopf .sprach-liste a[aria-current] { background: var(--flaeche-hoch); }
.kopf .sprach-liste a[aria-current]::after { content: ""; margin-left: auto; width: 6px; height: 11px;
  border: solid var(--text); border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); }
@media (prefers-reduced-motion: no-preference) {
  .sprachen[open] .sprach-liste { animation: sprachen-auf .26s cubic-bezier(.2, .8, .2, 1); }
  .sprachen[open] .sprach-liste a { animation: sprache-ein .32s cubic-bezier(.2, .8, .2, 1) both; }
  .sprachen[open] .sprach-liste a:nth-child(2) { animation-delay: .04s; }
  .sprachen[open] .sprach-liste a:nth-child(3) { animation-delay: .08s; }
  .sprachen[open] .sprach-liste a:nth-child(4) { animation-delay: .12s; }
  @keyframes sprachen-auf { from { opacity: 0; transform: translateY(-8px) scale(.95); } }
  @keyframes sprache-ein { from { opacity: 0; transform: translateX(8px); } }
}
@media (prefers-reduced-motion: reduce) { .sprachen .pfeil, .sprachen summary { transition: none; } }
.hinweis-sprache { text-align: center; color: var(--text-2); font-size: 13px; margin: 14px 0 0; }

/* Erster Bildschirm — seit dem 24.10.2026 mittig wie bei Apple (Eigentümer:
   „im Apple-Design, elegant, hochwertig“): ruhige Zeile, große Überschrift,
   „du kannst.“ im Goldverlauf, Warteliste als eine Kapsel. Am selben Tag
   Handy und Pixelfeld entfernt (Eigentümer: „das löschen, es geht direkt zum
   Video“) — gleich darunter kommt der Film. */
.held { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 0 0; }
.zeile-klein { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 22px; color: var(--text-2); font-size: 15px; font-weight: 500; letter-spacing: .005em; }
.zeile-klein .punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--akzent); }
@media (prefers-reduced-motion: no-preference) {
  .zeile-klein .punkt { animation: puls 2s infinite; }
  @keyframes puls { 0% { box-shadow: 0 0 0 0 #00e0a48c; } 100% { box-shadow: 0 0 0 9px #00e0a400; } }
}
.held h1 { font-size: clamp(46px, 7vw, 86px); line-height: 1; letter-spacing: -0.045em; font-weight: 700; margin: 0 0 22px; }
.held h1 .gold { color: #ffc24b; background: linear-gradient(100deg, #ffe7b0 0%, #ffc24b 45%, #ff9f2e 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-bottom: .06em; }
.held .unter { font-size: clamp(18px, 2.1vw, 23px); line-height: 1.4; max-width: 560px; margin: 0 auto 32px; text-wrap: balance; }
.held .film-link { margin-top: 22px; }

/* Der Handy-Rahmen (seit 19.10.2026; seit dem 24.10. nur noch im Film):
   dunkel wie ein Gerät, nicht weiß, mit feiner heller Kante. */
.handy {
  position: relative; justify-self: center; width: min(280px, 72vw); aspect-ratio: 9 / 18.5;
  border-radius: 40px; border: 7px solid #1d1d26; background: #000; overflow: hidden;
  box-shadow: 0 0 0 1px #ffffff14, 0 60px 120px -40px #000000f2;
}
.handy .insel { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 78px; height: 22px; border-radius: 12px; background: #000; }
.handy .balken { position: absolute; left: 14px; right: 14px; bottom: 18px; height: 3px; border-radius: 2px; background: #ffffff40; overflow: hidden; }
.handy .balken i { display: block; height: 100%; width: 0; background: #fff; }

/* Der Film (24.10.2026, tool/startseite.py FILM). Ohne Skript und bei
   „Bewegung reduzieren“ ein ruhiger Abschnitt: Satz, Knopf, Handy. Mit
   Skript (.szene) wie bei Apple: Der Abschnitt ist 240 vh hoch, die Bühne
   bleibt stehen, und der Bildlauf treibt Pixel, Wörter und Handy. Der Spot
   steht ganz im Rahmen auf seiner eigenen Grundfarbe; der Knopf liegt über
   dem ganzen Bildschirm: erst Start, dann Anhalten. */
.film { position: relative; border-top: 1px solid #ffffff0f; }
.film-buehne { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 20px 88px; text-align: center; }
.film-text { position: relative; z-index: 1; max-width: 760px; margin-bottom: 36px; }
.film-oben { margin: 0 0 12px; font-size: 15px; font-weight: 600; letter-spacing: .01em; color: var(--primaer); }
.film h2 { margin: 0; font-size: clamp(34px, 5.6vw, 64px); line-height: 1.04; letter-spacing: -0.035em; font-weight: 800; color: #fff; }
.film .film-unter { margin: 14px auto 0; max-width: 560px; text-wrap: balance; font-size: clamp(17px, 1.9vw, 21px); line-height: 1.4; color: var(--text-2); }
.film-knopf { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; padding: 8px 18px 8px 9px; border-radius: 999px; border: 1px solid #ffffff2e; background: #ffffff0d; color: #fff; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: background .2s, border-color .2s; }
.film-knopf:hover { background: #ffffff1a; border-color: #ffffff4d; }
.film-knopf svg { width: 28px; height: 28px; }
.film-knopf .dauer { color: var(--text-2); font-weight: 500; }
.film-text .film-hinweis { margin: 10px 0 0; font-size: 14px; color: var(--text-2); }
.film-handy { width: auto; height: min(58vh, 540px); height: min(58svh, 540px); background: #07060b; }
.film-handy video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.film-start { position: absolute; inset: 0; display: grid; place-items: center; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; }
.film-start .kreis { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: #ffffff26; border: 1px solid #ffffff40; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: opacity .25s, transform .25s; }
.film-start svg { width: 30px; height: 30px; fill: currentColor; margin-left: 4px; }
.film-start:hover .kreis { transform: scale(1.06); }
.film-start:focus-visible { outline: none; }
.film-start:focus-visible .kreis { outline: 2px solid #fff; outline-offset: 3px; }
.film-handy.laeuft .kreis { opacity: 0; transform: scale(.9); }
.film-handy .balken { opacity: 0; transition: opacity .25s; }
.film-handy.laeuft .balken { opacity: 1; }
.film-pixel { display: none; }
.film.szene { height: 240vh; }
.film.szene .film-buehne { position: sticky; top: 0; height: 100vh; height: 100svh; padding: 0 20px; overflow: hidden; }
.film.szene .film-pixel { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.film.szene .film-handy { opacity: 0; }
.film.szene .film-knopf, .film.szene .film-hinweis { opacity: var(--fertig, 0); }
.film.szene .wort { opacity: .16; }
.film-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; color: var(--text-2); font-size: 15px; font-weight: 600; text-decoration: none; }
.film-link:hover { color: var(--text); }
.film-link svg { width: 14px; height: 14px; fill: currentColor; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* „So geht’s“ (24.10.2026, tool/startseite.py so_abschnitt): Handy links
   bleibt stehen und zeigt den Bildschirm des Schritts in der Mitte, rechts
   die vier Schritte; mit Skript (.lebt) sind die anderen gedämpft. Am Telefon
   jeder Schritt mit eigenem Bild untereinander. Die Bilder sind echte
   App-Bildschirme mit Beispiel-Inhalten (tool/schaufenster/). */
.so { border-top: 1px solid #ffffff0f; padding: 96px 0 24px; }
.so-kopf { text-align: center; }
.so-oben { margin: 0 0 12px; font-size: 15px; font-weight: 600; letter-spacing: .01em; color: var(--primaer); }
.so h2 { margin: 0; font-size: clamp(32px, 5vw, 56px); line-height: 1.05; letter-spacing: -0.035em; font-weight: 800; color: #fff; text-wrap: balance; }
.so-inhalt { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.so-buehne { position: sticky; top: 0; align-self: start; height: 100vh; height: 100svh; display: flex; align-items: center; justify-content: center; }
.so-handy { width: auto; height: min(74vh, 640px); height: min(74svh, 640px); aspect-ratio: 402 / 874; background: #07060b; }
.so-handy img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s ease; }
.so-handy img.an { opacity: 1; }
.so-schritte { list-style: none; margin: 0; padding: 0; }
.so-schritt { min-height: 72vh; display: flex; align-items: center; gap: 20px; transition: opacity .35s ease; }
.so.lebt .so-schritt { opacity: .28; }
.so.lebt .so-schritt.an { opacity: 1; }
.so-nr { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid #ffffff2e; color: #fff; font-size: 15px; font-weight: 700; }
.so-schritt h3 { margin: 0 0 6px; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; letter-spacing: -0.02em; color: #fff; }
.so-schritt p { margin: 0; max-width: 380px; font-size: 18px; line-height: 1.45; }
.so-bild { display: none; }
@media (prefers-reduced-motion: reduce) { .so-handy img, .so-schritt { transition: none; } }

/* Der Komet in Gold — nur hier oben, als einziger Hauptknopf der Seite. */
.knopf.gold::before { background: #ffc24b73; }
.knopf.gold::after {
  background: conic-gradient(from var(--komet-winkel),
    transparent 0turn, transparent .72turn, #ffd682 .9turn, transparent .97turn);
}

/* Abschnitte */
.abschnitt { padding: 72px 0; border-top: 1px solid #ffffff0f; }
.abschnitt h2 { font-size: clamp(28px, 4vw, 40px); line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 12px; }
.abschnitt .einleitung { max-width: 560px; margin-bottom: 36px; }

.schritte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: schritt; }
.schritt { padding: 24px; border-radius: 22px; background: var(--flaeche); border: 1px solid var(--rand); }
.schritt::before { counter-increment: schritt; content: counter(schritt); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; margin-bottom: 16px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--primaer), var(--sekundaer)); }
.schritt h3, .kachel h3 { margin: 0 0 6px; font-size: 18px; }
.schritt p, .kachel p { margin: 0; font-size: 15px; }

.kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.kachel { padding: 24px; border-radius: 22px; background: linear-gradient(180deg, #ffffff08, #ffffff03); border: 1px solid var(--rand); }
.kachel .symbol { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 16px; }
.kachel .symbol svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ton-pink { color: var(--primaer); background: #ff2d6f1f; }
.ton-gold { color: #ffc24b; background: #ffc24b1f; }
.ton-lila { color: var(--sekundaer); background: #7c4dff24; }
.ton-gruen { color: var(--akzent); background: #00e0a41c; }

.veranstalter { display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; align-items: center; padding: 36px; border-radius: 28px; background: radial-gradient(600px 300px at 100% 0%, #ff2d6f2e, transparent 70%), var(--flaeche); border: 1px solid var(--rand); }
.veranstalter ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; color: var(--text-2); }
.veranstalter li::before { content: "★"; color: #ffc24b; margin-right: 10px; }
.knopf + .knopf { margin-left: 10px; }
/* Auf der Karte (Fläche wie der Knopf) eine Stufe heller, sonst sähe der
   Hauptknopf neben dem Nebenknopf gleich aus. */
.veranstalter .knopf:not(.rand) { background: #20202b; }

.schluss { text-align: center; padding: 88px 0 72px; }
.schluss img { width: 84px; height: 84px; margin-bottom: 18px; }
.schluss h2 { margin-bottom: 10px; }
.schluss .knoepfe { margin-top: 24px; }

.start footer { width: min(100% - 40px, 1080px); }
.start footer .zeile { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.start footer a { text-decoration: none; }
.start footer a:hover { color: var(--text); }

/* Sanftes Auftauchen nur beim Laden, nicht beim Scrollen. */
@media (prefers-reduced-motion: no-preference) {
  .held > div { animation: auf .7s ease-out both; }
  @keyframes auf { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}

@media (max-width: 860px) {
  .held { padding-top: 16px; }
  .schritte, .kacheln { grid-template-columns: 1fr; }
  .veranstalter { grid-template-columns: 1fr; padding: 26px; }
  .kopf nav.haupt a:not(:last-child) { display: none; }
}
@media (max-width: 420px) {
  .knopf + .knopf { margin: 10px 0 0; }
  /* Am Telefon nur Logo und Sprachwahl — Unternehmen steht weiter unten. */
  .kopf nav.haupt { display: none; }
  .sprachen { margin-left: 0; }
}

/* Warteliste (14.10.2026) — seit dem 19.10.2026 oben im ersten Bildschirm. */
.warteliste { width: 100%; max-width: 480px; margin: 0 auto; text-align: left; }
/* Eine Kapsel: Feld und Knopf in einer Fläche; der Fokus zeigt sich an der
   Kapsel, nicht am Feld. */
.warteliste-zeile { display: flex; gap: 6px; padding: 6px; border-radius: 999px; background: #ffffff0d; border: 1px solid #ffffff1f;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: border-color .2s, background .2s; }
.warteliste-zeile:focus-within { border-color: #ffffff52; background: #ffffff12; }
.formular .warteliste-zeile input { flex: 1; min-width: 0; padding: 0 8px 0 18px; border: 0; border-radius: 999px; background: transparent; color: var(--text); font-size: 16px; }
.formular .warteliste-zeile input:focus { outline: none; }
.warteliste-zeile .knopf { white-space: nowrap; border-radius: 999px; padding: 13px 22px; }
.warteliste .haken { margin-top: 14px; font-size: 13px; line-height: 1.5; }
.warteliste .meldung { margin-top: 14px; }
.warteliste .haken a { color: var(--text); }
@media (max-width: 480px) {
  .warteliste-zeile { flex-direction: column; border-radius: 24px; }
  .formular .warteliste-zeile input { flex: none; height: 48px; text-align: center; padding: 0 14px; }
}

/* **Bis zum Start nur der erste Bildschirm** (20.10.2026, Entwurf B —
   `VOLL = False` in tool/startseite.py): Text, Warteliste und Handy füllen
   den Bildschirm, die Fußzeile steht darunter. Am Telefon ist das Handy
   kleiner, damit es noch auf den ersten Blick zu sehen ist. */
.bald main { display: flex; flex-direction: column; }
.bald .held { padding: 24px 0 64px; }
.bald .held .unter { margin-bottom: 24px; }
@media (max-width: 860px) {
  .bald .held { padding: 8px 0 48px; }
  .film-buehne { padding: 56px 20px 64px; }
  .film-text { margin-bottom: 26px; }
  .film-handy { height: min(50vh, 440px); height: min(50svh, 440px); }
  .bald .film .handy { width: auto; border-radius: 36px; border-width: 7px; }
  .so { padding: 64px 0 8px; }
  .so-inhalt { grid-template-columns: 1fr; gap: 0; }
  .so-buehne { display: none; }
  .so-schritt { min-height: 0; flex-direction: column; text-align: center; gap: 12px; padding: 40px 0 8px; }
  .so.lebt .so-schritt { opacity: 1; }
  .so-schritt p { margin: 0 auto; font-size: 17px; }
  .so-bild { display: block; width: min(230px, 62vw); height: auto; margin-top: 10px; border-radius: 34px; border: 6px solid #1d1d26; background: #07060b;
    box-shadow: 0 0 0 1px #ffffff14, 0 40px 80px -30px #000000f2; }
}