/* ============================================================
   chat-o – DIE WEBSITE (v3.63.0)
   Sören: "Erstelle die Website mit cooler Animation und interaktiven
   Elementen. Zeige ein iPhone-Display und man kann dort interagieren.
   Alles in der App ist möglich."

   Dieses Stylesheet gilt nur fuer #setup (die Startseite, solange niemand
   angemeldet ist). Farben kommen aus der Palette in app.css (hell/dunkel
   folgt von selbst); die Marke bringt ihre zwei Verlaufsfarben mit.
   Bewegung: Blobs im Hintergrund, ein schwebendes Telefon, das der Maus
   folgt, Abschnitte, die beim Scrollen aufdecken, und im Telefon eine
   gespielte Vorschau (start.js). Wer "weniger Bewegung" eingestellt hat,
   bekommt alles stehend.
   ============================================================ */
#setup {
  /* v3.85.0 (Sören: "Alles soll die gleiche Designsprache haben") stand
     hier eine Abschrift der Eckenleiter. Seit v3.129.1 steht sie nur noch
     in public/leiter.css, die index.html vor allen Stilblättern lädt - die
     Abschrift wirkte ohnehin nicht (gemessen: #setup erbte dieselben Werte
     von :root), und eine zweite Liste läuft irgendwann auseinander
     (LEITFADEN.md Teil 1). */
  /* Die Marken-Schatten der Website - eine Rolle, nicht vier Werte. */
  --schatten-marke: 0 4px 12px rgba(47, 107, 255, .28);
  --schatten-marke-hoch: 0 10px 24px rgba(47, 107, 255, .3);
  --schatten-marke-mittel: 0 8px 20px rgba(47, 107, 255, .3);
  /* --marke-a und --marke-b stehen seit 24.10.2026 in leiter.css (auch die
     Ladeseite der App braucht sie, Beta „start-ladeseite“) - #setup erbt
     sie von :root. */
  --web-warm: #f6f1ea;         /* der warme Grund der Buehne (hell) */
  --web-warm-2: #ece4d8;
  --telefon-rahmen: #f7f7f9;   /* ein weisses iPhone */
  --film-schrift: #f4f5f8;     /* v3.159.1: Schrift auf dem Film – der ist immer dunkel, also bleibt sie hell (auch im Dunkelmodus) */
  --telefon-kante: #d9dbe2;
  --telefon-schatten: 0 40px 80px rgba(30, 30, 60, .22), 0 12px 28px rgba(30, 30, 60, .12);
  /* Der Glanzrand am Telefon gehoert zum Schatten, nicht daneben. */
  --telefon-glanz: var(--telefon-schatten), inset 0 0 0 2px rgba(255, 255, 255, .5);
  --telefon-glanz-dunkel: var(--telefon-schatten), inset 0 0 0 2px rgba(255, 255, 255, .08);
  padding: 0; gap: 0; align-items: stretch;
}
:root[data-thema="dunkel"] #setup {
  /* v3.67.0 (Sören: "Dunkel-Ansicht viel zu dunkel"): Die Website bekommt
     im Dunkeln einen helleren Blaugrau-Grund als die App - das Schwarz der
     App ist fuer eine Startseite zu hart. Die Rollen werden hier fuer
     #setup neu gesetzt; die App selbst bleibt, wie sie ist. */
  --bg: #1c2030;
  --surface: #262b3d;
  --surface-2: #303650;
  --border: #3a405a;
  --border-2: #8b92a8;
  --text: #f1f3f8;
  --text-2: #d5d9e4;
  --text-3: #b3b9c8;
  --muted-2: #a9b0c0;
  --accent: #8fb4ff;
  --accent-bg: #253559;
  --accent-border: #3f5a9a;
  --bubble-own: #2f5a3a;
  --bubble-ai: #2a62d6;
  --primary: #f1f3f8;
  --on-primary: #1c2030;
  --success: #6ad693;
  --success-text: #9fe8b9;
  --success-bg: #1f3a2a;
  --web-warm: #232841;
  --web-warm-2: #2a3050;
  --telefon-rahmen: #2b3044;
  --telefon-kante: #4a5068;
  --telefon-schatten: 0 40px 80px rgba(0, 0, 0, .45), 0 12px 28px rgba(0, 0, 0, .3);
}
:root[data-thema="dunkel"] #setup .buehneBlob { opacity: .55; }

/* ---- Kopfzeile mit Marke ---- */
#setup .webKopf {
  position: sticky; top: 0; z-index: 5; width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: max(10px, var(--sat)) 20px 10px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
#setup #setupLogo { margin: 0; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; }
/* v3.163.2 (Sören: „Logo auf website schlecht ausgeschnitte. Da ist ein
   kasten drum bei hell und dunkel.“): Der Link hieß bis hier „.marke“ - so
   heißen in der App auch die kleinen Etiketten an Aufgaben und Wünschen,
   und app.css (v3.97.0) gibt `.marke` overflow: hidden. Die Website lädt
   app.css mit; der Link schnitt so den blauen Schein des Zeichens auf
   sein eigenes Rechteck zu: links und unten kein Schein, rechts ein
   Streifen bis zum Wort - ein Kasten. Eigener Name, keine geerbte Regel
   (nowrap übernommen: „chat-o“ bricht nie am Bindestrich);
   website-logo-dom.mjs hält fest, dass um das Zeichen nichts abgeschnitten
   wird. */
#setup .webMarke { display: inline-flex; align-items: center; gap: 9px; color: var(--text); text-decoration: none; min-height: 44px; white-space: nowrap; }
#setup .markeZeichen { width: 34px; height: 34px; border-radius: var(--r-s); box-shadow: var(--schatten-marke); flex: none; }
/* v3.67.0 (Sören: "Schrift daneben nicht schön"): Die Wortmarke ist eine
   eigene Groesse, eng gesetzt, das "-o" im Verlauf der Marke. */
#setup .markeWort { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
#setup .markeO { background: linear-gradient(100deg, var(--marke-a), var(--marke-b)); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* v3.65.0 (Sören: "chat-o in der Ecke oben links auf PC etwas größer") */
@media (min-width: 860px) {
  #setup #setupLogo { font-size: 1.9rem; }
  #setup .markeZeichen { width: 52px; height: 52px; border-radius: var(--r-m); }
  #setup .webMarke { gap: 14px; }
  #setup .markeWort { font-size: 1.85rem; }
  #setup .webKopf { padding-left: 32px; padding-right: 32px; }
}
#setup .kopfRechts { display: inline-flex; align-items: center; gap: 8px; }
#setup .themaKnopf { width: 44px; min-height: 44px; padding: 0; margin: 0; border-radius: var(--r-kreis); border: 1px solid var(--border-2); background: transparent; color: var(--text-2); font-size: 1.15rem; line-height: 1; box-shadow: none; }
#setup .themaKnopf:hover { background: var(--surface); }
#setup .kopfAnmelden { color: var(--text-2); font-weight: 600; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; padding: 0 14px; border: 1px solid var(--border-2); border-radius: var(--r-voll); font-size: 0.92rem; }
#setup .kopfAnmelden:hover { background: var(--surface); }
#setup .kopfAnmelden[hidden] { display: none; }
/* v3.130.0, Paket C: Auf „Wer bist du?“ ist das Gerät schon angemeldet
   (es fehlt nur der Name) - „Anmelden“ im Kopf stimmte dort nicht und
   führte auf /konto.html. Die Stufe setzt setupStufe (app.js). */
#setup[data-stufe="setupName"] .kopfAnmelden { display: none; }
/* v3.130.0, Paket C (Sören: „Ja so machen, Schritt 1 los“): „<Name> · Zur
   App“ statt „Anmelden“, wenn die Website über den Link aus der App offen
   ist. Dieselbe Pille wie „Anmelden“, vorn die Initiale (.initiale,
   app-bausteine.css). Wird es eng, kürzt der NAME („…“) - „ · Zur App“
   bleibt immer ganz stehen (eigener Span, flex: none). */
#setup .kopfRechts { min-width: 0; }
#setup #setupLogo { flex: none; }
/* Kürzen darf nur der Name: Hell/Dunkel schrumpfte bei einem langen Namen
   sonst mit (gemessen: 30 statt 44 px breit), und ohne das Wort „chat-o“
   war die Marke nur 34 px breit - beide bleiben mindestens 44 px. */
#setup .themaKnopf { flex: none; }
#setup .webMarke { min-width: 44px; }
#setup .kopfZurApp {
  display: inline-flex; align-items: center; gap: 8px; box-sizing: border-box;
  width: auto; min-width: 0; max-width: 100%; min-height: 44px; margin: 0; padding: 0 14px 0 5px;
  border: 1px solid var(--border-2); border-radius: var(--r-voll); background: transparent;
  color: var(--text-2); font-size: 0.92rem; font-weight: 600; line-height: 1.2; box-shadow: none;
}
#setup .kopfZurApp:hover { background: var(--surface); }
#setup .kopfZurApp[hidden] { display: none; }
#setup .kopfZurApp .initiale { width: 32px; height: 32px; font-size: 0.86rem; }
#setup .kopfName { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
#setup .kopfZurAppWort { flex: none; white-space: nowrap; }
/* DIE REGEL FÜR SCHMALE BREITEN - gemessen, nicht geschätzt (Gegenlesen:
   „erst messen“; Chromium, Schrift der Probe). Die Pille ohne Namen ist
   134 px breit (Initiale 32, „· Zur App“, Abstände und Rand), die Marke
   103 px (Zeichen 34, Wort „chat-o“), dazu Hell/Dunkel 44 px und die
   Ränder. MIT dem Wort blieben für den Namen bei 390 px 54 px („Anna“
   passt, „Maximilian“ nicht), bei 360 px 30 px, bei 320 px nichts - dort
   wurde sogar „Zur App“ gestaucht. Unter 420 px tritt deshalb das WORT
   „chat-o“ neben dem Zeichen zurück, solange „Zur App“ im Kopf steht (das
   Zeichen bleibt und führt weiter zur Startseite): Dann passen bei 390 px
   auch 110 px Name („Anna-Katharina“), bei 360 px „Maximilian“, bei 320 px
   etwa 53 px. Ab 420 px passt „Maximilian“ auch mit dem Wort. Reicht es
   nicht, kürzt der Name mit „…“; „· Zur App“ bleibt immer ganz, der ganze
   Name steht im zugänglichen Namen des Knopfs. Ohne Anmeldung
   („Anmelden“) bleibt der Kopf, wie er war. website-angemeldet-dom 3b
   misst es bei 320/390/1280 und mit einem sehr langen Namen. */
@media (max-width: 419px) {
  #setup .webKopf.mitZurApp .markeWort { display: none; }
}

/* v3.130.0, Paket C: DER FOKUSRING IN DER WEBSITE. Der Ring der App
   (app.css `button:focus-visible`, box-shadow) verliert in #setup gegen
   `#setup button` (Schatten) und gegen jede Regel mit ID - mit der Tastatur
   sah man bei „‹ Zurück“, beim Hell/Dunkel-Knopf, bei den Konto-Knöpfen und
   den neuen Knöpfen nicht, wo man ist (in Paket A für „Wer bist du?“
   gemessen und vorgemerkt). Ein Umriss statt eines Schattens: Den setzt
   sonst niemand, er muss also nicht gegen jede Regel einzeln gewinnen.
   Steht bewusst VOR den Regeln der Vorschau im Telefon - die haben ihren
   eigenen Umriss (innen, das Telefon schneidet ab). */
#setup :is(button, a[href], [role="button"]):focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* Textknöpfe (.zurueckLink) sind Wörter, keine Pillen: ohne den Schatten,
   den `#setup button` (app.css) jedem Knopf gibt - „‹ Zurück“ trug ihn
   bisher als grauen Fleck. */
#setup button.zurueckLink { box-shadow: none; }

/* ---- Die Startseite als Ganzes ---- */
#setupRole { width: 100%; max-width: none; gap: 0; align-items: stretch; }
#setup .webAbschnitt { width: 100%; max-width: 1040px; margin: 0 auto; padding: 56px 20px 8px; }
#setup .webAbschnitt h2 { margin: 0 0 20px; font-size: 1.6rem; letter-spacing: -0.02em; text-align: center; }
/* v3.155.0: der Film – hochkant wie aufgenommen. v3.156.0: sechs Filme als Karten
   in einem Quer-Streifen; der Browser wischt selbst (scroll-snap, GESTEN.md Regel 1),
   die mittlere Karte rastet ein, die Nachbarn schauen am Rand hervor. */
#setup .filmStreifen { position: relative; display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; padding: 4px calc(50% + 20px - min(36vw, 150px)) 18px; margin: 0 -20px; }
#setup .filmStreifen::-webkit-scrollbar { display: none; }
#setup .filmKarte { flex: 0 0 min(72vw, 300px); margin: 0; scroll-snap-align: center; }
#setup .filmKarte figcaption { margin-top: 10px; text-align: center; font-weight: 700; font-size: 0.92rem; color: var(--text-2); }
#setup .filmRahmen { position: relative; width: 100%; aspect-ratio: 9 / 16; border-radius: var(--radius-l); overflow: hidden; background: var(--text); box-shadow: var(--telefon-schatten); }
#setup .filmNav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 4px; }
#setup .filmPfeil { width: 44px; height: 44px; padding: 0; border-radius: var(--r-kreis); border: 1px solid var(--border-2); background: transparent; color: var(--text); font-size: 1.3rem; line-height: 1; }
#setup .filmPunkte { display: flex; gap: 8px; }
#setup .filmPunkte i { width: 8px; height: 8px; border-radius: var(--r-kreis); background: var(--border-2); opacity: .45; }
#setup .filmPunkte i.an { background: var(--marke-a); opacity: 1; }
#setup .filmRahmen video { display: block; width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
/* v3.159.0: wie in Reels – kein Bedienbalken, nur „Ton an“, dünner Fortschritt, ▶ wenn angehalten */
#setup .filmTon { position: absolute; left: 12px; top: 12px; width: auto; margin: 0; min-height: 44px; padding: 0 14px; border: 0; border-radius: var(--r-voll); background: rgba(12, 13, 20, .72); color: var(--film-schrift); font-size: 0.86rem; font-weight: 700; }
#setup .filmTon[aria-pressed="true"] { background: rgba(12, 13, 20, .5); }
/* Nur der laufende Film zeigt „Ton an“ – die Nachbarn lugen nur am Rand hervor, ihr Knopf läge außerhalb
   (website-angemeldet-dom 4g/4h: jedes sichtbare Bedienelement muss treffbar sein). */
#setup .filmKarte:not(.aktiv) .filmTon { visibility: hidden; }
#setup .filmPlay { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: var(--r-kreis); background: rgba(12, 13, 20, .55); color: var(--film-schrift); display: grid; place-items: center; font-size: 1.3rem; pointer-events: none; opacity: 0; transition: opacity .2s; }
#setup .filmKarte.halt .filmPlay { opacity: 1; }
#setup .filmBalken { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, .22); pointer-events: none; }
#setup .filmBalken i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--marke-a), var(--marke-b)); }

/* ---- Die Buehne: Text links, Telefon rechts ---- */
#setup .heroBuehne {
  position: relative; overflow: hidden; width: 100%;
  background: var(--web-warm);
  display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center;
  padding: 36px 20px 20px;
}
@media (min-width: 860px) {
  #setup .heroBuehne { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 24px; padding: 28px 40px 28px; min-height: 640px; }
}
#setup .heroText { position: relative; z-index: 2; max-width: 560px; justify-self: center; text-align: center; }
@media (min-width: 860px) { #setup .heroText { justify-self: end; text-align: left; padding-right: 8px; } }
/* v3.129.1 (Sören: "Du hast die designregeln ignoriert das anmeldefenster
   ist jetzt eckig" – beim Nachmessen aller Seiten gefunden): Kleine Schrift
   in der Markenfarbe #2f6bff hatte auf dem warmen Grund GEMESSEN 3,4–4,0:1
   (hinter den Blobs bis 2,6:1), „Der erste Monat ist kostenlos.“ im Dunkeln
   2,9–3,2:1 – nötig sind 4,5:1. Kleine Schrift nimmt deshalb die Rolle
   --accent (hell #0a53c4 aus app.css, dunkel #8fb4ff aus #setup oben – der
   Wert, der hier vorher fest stand); die Markenfarbe bleibt für Verlauf,
   Knopf und Schatten. Gemessen in seiten-tokens-dom.mjs Regel 5. */
#setup .heroEtikett { margin: 0 0 12px; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
#setup .heroTitel { margin: 0 0 14px; font-size: clamp(2rem, 5.2vw, 3.4rem); line-height: 1.05; letter-spacing: -0.03em; font-weight: 800; color: var(--text); }
#setup .heroFarbe { background: linear-gradient(100deg, var(--marke-a), var(--marke-b)); -webkit-background-clip: text; background-clip: text; color: transparent; }
#setup .landeClaim { margin: 0 0 22px; max-width: 460px; color: var(--text-2); font-size: 1.1rem; line-height: 1.5; }
@media (max-width: 859px) { #setup .landeClaim { margin-left: auto; margin-right: auto; } }
#setup .heroKnoepfe { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
@media (min-width: 860px) { #setup .heroKnoepfe { justify-content: flex-start; } }
#setup #setupKontoBtn, #setup #setupKontoAnmelden, #setup #heroZurApp, #setup #heroAusprobieren { width: auto; min-width: 0; padding: 14px 22px; border-radius: var(--r-voll); font-size: 1rem; }
/* v3.130.0, Paket C: „Zur App“ und „Ausprobieren“ (mit Anmeldung) sehen aus
   wie die zwei Konto-Knöpfe an derselben Stelle - vorn der Hauptweg. */
#setup #setupKontoBtn, #setup #heroZurApp { background: linear-gradient(135deg, var(--marke-a), var(--marke-b)); color: var(--stets-weiss); box-shadow: var(--schatten-marke-hoch); }
#setup #setupKontoBtn:hover, #setup #heroZurApp:hover { filter: brightness(1.06); }
#setup #setupKontoAnmelden, #setup #heroAusprobieren { background: transparent; }
#setup #heroZurApp[hidden], #setup #heroAusprobieren[hidden], #setup #familieMitPasswortBtn[hidden] { display: none; }
/* v3.130.0, Paket C: „Ich habe ein Passwort bekommen“ steht direkt unter
   den Konto-Knöpfen (vorher drei Bildschirmhöhen tiefer) - als Textknopf,
   leiser als die zwei Konto-Wege, aber mit voller Trefffläche. */
#setup #familieMitPasswortBtn { display: inline-flex; align-items: center; justify-content: center; margin: 8px 0 0; padding: 8px 12px; }
/* Nachbesserung v3.130.0 (Gegenprüfung zu Paket C): In der App-Tür standen
   die zwei Textknöpfe übereinander in zwei Größen - „Ich habe ein Passwort
   bekommen“ 14,72 px, „Was ist chat-o?“ 16 px (gemessen). EINE Angabe für
   beide, damit sie nicht wieder auseinanderlaufen. */
#setup #familieMitPasswortBtn, #setup #appTuerWebsite { font-size: 0.92rem; }
#setup .heroHinweis { margin: 18px 0 0; color: var(--text-3); font-size: 0.92rem; }
/* v3.130.0, Paket C: Mit Anmeldung steht hier der Name („Du bist als …“).
   Ein Name ohne Leerzeichen (bis 40 Zeichen) ragte bei 320 px aus der
   Seite - er bricht jetzt notfalls im Wort. */
#setup .heroHinweis { overflow-wrap: anywhere; }
#setup .heroHinweis[hidden] { display: none; }

/* Blobs: weiche Farbflecken, die langsam wandern */
#setup .buehneBlob { position: absolute; border-radius: var(--r-kreis); filter: blur(48px); opacity: .55; pointer-events: none; z-index: 0; }
#setup .b1 { width: 380px; height: 380px; left: -60px; top: -80px; background: var(--marke-a); animation: blobA 18s ease-in-out infinite alternate; }
#setup .b2 { width: 340px; height: 340px; right: -80px; top: 40%; background: var(--marke-b); animation: blobB 22s ease-in-out infinite alternate; }
#setup .b3 { width: 260px; height: 260px; left: 40%; bottom: -120px; background: #ff8a5b; opacity: .35; animation: blobC 20s ease-in-out infinite alternate; }
@keyframes blobA { from { transform: translate(0, 0) scale(1); } to { transform: translate(60px, 40px) scale(1.15); } }
@keyframes blobB { from { transform: translate(0, 0) scale(1.1); } to { transform: translate(-50px, -60px) scale(.95); } }
@keyframes blobC { from { transform: translate(0, 0); } to { transform: translate(-40px, -50px) scale(1.2); } }

/* ---- Das Telefon ---- */
#setup .telefonBuehne { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 14px; perspective: 1400px; padding: 10px 0 6px; }
#setup .telefonSchwebe { animation: schweben 6s ease-in-out infinite; will-change: transform; }
/* Wer mit der Maus drueber ist, will tippen - dann haelt das Telefon still. */
#setup .telefonBuehne:hover .telefonSchwebe { animation-play-state: paused; }
#setup #probierKnopf:hover, #setup #probierKnopf:focus-visible { animation: none; }
@keyframes schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
#setup .telefon {
  width: min(300px, 82vw); aspect-ratio: 9 / 19.5;
  background: var(--telefon-rahmen); border: 1px solid var(--telefon-kante);
  border-radius: var(--r-xl); padding: 10px; box-sizing: border-box;
  box-shadow: var(--telefon-glanz);
  transform-style: preserve-3d; transition: transform .25s ease-out;
  animation: telefonRein .9s cubic-bezier(.2, .8, .2, 1) both;
}
:root[data-thema="dunkel"] #setup .telefon { box-shadow: var(--telefon-glanz-dunkel); }
@keyframes telefonRein { from { opacity: 0; transform: translateY(40px) rotateY(-14deg); } to { opacity: 1; transform: none; } }
#setup .heroText { animation: textRein .8s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes textRein { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
#setup .telefonSchirm {
  position: relative; width: 100%; height: 100%; border-radius: var(--r-xl); overflow: hidden;
  background: var(--bg); display: flex; flex-direction: column; box-sizing: border-box;
}
/* v3.65.0 (Sören: "sieht etwas ungerade aus"): Uhrzeit, Insel und Akku sitzen
   jetzt auf EINER Mittellinie (22 px), die Reiter ohne Kastenschatten. */
#setup .telefonStatus { position: relative; flex: none; height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 26px; font-size: 0.86rem; font-weight: 700; color: var(--text); line-height: 1; }
#setup .telefonInsel { position: absolute; left: 50%; top: 8px; width: 96px; height: 28px; margin-left: -48px; background: #0b0b0e; border-radius: var(--r-voll); }
#setup .tsRechts { display: inline-flex; gap: 5px; align-items: center; }
#setup .tsFunk { width: 16px; height: 10px; background: linear-gradient(to right, var(--text) 0 3px, transparent 3px 4px, var(--text) 4px 7px, transparent 7px 8px, var(--text) 8px 11px, transparent 11px 12px, var(--text) 12px 15px); }
#setup .tsAkku { width: 24px; height: 11px; border: 1.5px solid var(--text); border-radius: var(--r-xs); position: relative; box-sizing: border-box; }
#setup .tsAkku::after { content: ""; position: absolute; inset: 1.5px; right: 5px; background: var(--text); border-radius: var(--r-xs); }
#setup .telefonInhalt { position: relative; flex: 1; min-height: 0; overflow: hidden; }
#setup .telefonBalken { position: absolute; left: 50%; bottom: 8px; width: 120px; height: 5px; margin-left: -60px; border-radius: var(--r-voll); background: var(--text); opacity: .55; pointer-events: none; z-index: 4; }

/* Die gespielte Vorschau im Telefon */
#setup .vorschau { position: absolute; inset: 0; display: flex; flex-direction: column; font-size: 0.86rem; color: var(--text); }
#setup .vorschau[hidden] { display: none; }
#setup .vsKopf { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 4px 14px 6px; font-size: 0.95rem; }
#setup .vsKopf .vsZurueck, #setup .vsKopf .vsPunkte { color: var(--accent); font-size: 0.86rem; font-weight: 600; }
#setup .vsReiter { flex: none; display: flex; gap: 2px; padding: 0 10px; border-bottom: 1px solid var(--border); }
#setup .vsReiter button { flex: 1; width: auto; min-height: 44px; margin: 0; text-align: center; padding: 6px 2px; font-size: 0.72rem; font-weight: 600; color: var(--text-3); background: transparent; box-shadow: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; transition: color .25s, border-color .25s; white-space: nowrap; cursor: pointer; }
#setup .vsReiter button:active { transform: none; filter: none; }
#setup .vsReiter button.aktiv { color: var(--text); border-bottom-color: var(--text); }
#setup .vsReiter button:focus-visible { outline: 2px solid var(--marke-a); outline-offset: -2px; }
/* Ein Tipp auf einen Eintrag hakt ihn ab (v3.65.0) */
#setup .vsEintrag[role="button"] { cursor: pointer; }
#setup .vsEintrag.erledigt span { text-decoration: line-through; color: var(--text-3); }
#setup .vsEintrag.erledigt .vsHaken { background: var(--success); border-color: var(--success); position: relative; }
#setup .vsEintrag.erledigt .vsHaken::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
#setup .vsSeite { position: absolute; left: 0; right: 0; top: 84px; bottom: 0; display: none; flex-direction: column; padding: 10px 12px 22px; box-sizing: border-box; }
#setup .vsSeite.aktiv { display: flex; animation: seiteRein .3s ease-out; }
@keyframes seiteRein { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
#setup .vsVerlauf { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 7px; overflow: hidden; }
#setup .vsBlase { max-width: 84%; padding: 8px 11px; border-radius: var(--r-l); line-height: 1.35; animation: blaseRein .35s cubic-bezier(.2, .8, .2, 1); }
/* v3.129.1: Der Zipfel war 4 px - eine Größe außerhalb der Leiter, die
   probe-stil nie sah (sie las nur „border-radius“, nicht die einzelne
   Ecke). Jetzt wie in der echten App (.bubble.own): --r-xs. */
#setup .vsBlase.eigen { align-self: flex-end; background: var(--bubble-own); border-bottom-right-radius: var(--r-xs); }
#setup .vsBlase.ki { align-self: flex-start; background: var(--bubble-ai); color: #fff; border-bottom-left-radius: var(--r-xs); }
#setup .vsBlase.tippt { padding: 10px 14px; display: inline-flex; gap: 4px; }
#setup .vsBlase.tippt i { width: 6px; height: 6px; border-radius: var(--r-kreis); background: #fff; opacity: .5; animation: tippt 1s infinite; }
#setup .vsBlase.tippt i:nth-child(2) { animation-delay: .2s; }
#setup .vsBlase.tippt i:nth-child(3) { animation-delay: .4s; }
@keyframes tippt { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@keyframes blaseRein { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
/* v3.67.0 (Sören: "Textfeld in Demo verläuft nach rechts anstatt Umbruch"):
   Das Schreibfeld bricht um wie ein echtes - es waechst nach oben, laeuft
   nie aus der Karte. */
#setup .vsEingabe { flex: none; margin-top: 10px; min-height: 40px; min-width: 0; max-width: 100%; box-sizing: border-box; display: flex; align-items: flex-end; gap: 6px; padding: 8px 12px; border: 1px solid var(--border-2); border-radius: var(--r-l); background: var(--surface); font-size: 0.86rem; }
#setup .vsTipp { flex: 1; min-width: 0; min-height: 1.2em; line-height: 1.35; color: var(--text); white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
#setup .vsCursor, #setup .vsSenden { flex: none; margin-bottom: 1px; }
#setup .kachelSzene > * { min-width: 0; }
#setup .vsTipp:empty::before { content: "Schreib was …"; color: var(--muted-2); }
#setup .vsCursor { width: 1.5px; height: 1.1em; background: var(--text); animation: blinkt 1s steps(2) infinite; align-self: flex-end; margin-bottom: 3px; }
@keyframes blinkt { to { opacity: 0; } }
#setup .vsSenden { width: 26px; height: 26px; border-radius: var(--r-kreis); background: var(--primary); color: var(--on-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem; }
#setup .vsGruppe { font-size: 0.7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); margin: 6px 2px 4px; }
#setup .vsEintrag { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--r-m); background: var(--surface); margin-bottom: 6px; line-height: 1.25; }
#setup .vsEintrag small { display: block; color: var(--text-3); font-size: 0.72rem; margin-top: 1px; }
#setup .vsHaken { width: 20px; height: 20px; border-radius: var(--r-kreis); border: 2px solid var(--border-2); flex: none; box-sizing: border-box; }
#setup .vsEintrag.neu { opacity: 0; transform: translateY(8px); }
#setup .vsSeite.aktiv .vsEintrag.neu { animation: eintragRein .4s cubic-bezier(.2, .8, .2, 1) .25s both; }
#setup .vsSeite.aktiv .vsEintrag.neu + .vsEintrag.neu { animation-delay: .45s; }
#setup .vsEintrag.neu::after { content: "neu"; margin-left: auto; font-size: 0.66rem; font-weight: 700; color: var(--success-text); background: var(--success-bg); border-radius: var(--r-voll); padding: 2px 7px; }
@keyframes eintragRein { to { opacity: 1; transform: none; } }
#setup .vsTermin b { flex: none; width: 40px; text-align: center; font-size: 0.72rem; line-height: 1.2; color: var(--accent); }

/* Unter dem Telefon: die echte App im Vollbild (Probier-Haushalt) */
#setup .probierZeile { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; font-size: 0.86rem; color: var(--text-2); max-width: 360px; }
#setup .probierZeile[hidden] { display: none; }
#setup #probierKnopf { width: auto; min-height: 44px; padding: 12px 22px; border-radius: var(--r-voll); font-size: 0.95rem; background: linear-gradient(135deg, var(--marke-a), var(--marke-b)); color: #fff; box-shadow: var(--schatten-marke-hoch); }
#setup #probierKnopf:disabled { opacity: .7; }
#setup .probierZeile p { margin: 4px 0 0; font-size: 0.78rem; line-height: 1.35; color: var(--text-3); }
#setup .probierZeile p.fehler { color: var(--danger); }
#setup .telefonFussKnoepfe { display: flex; gap: 4px; }
#setup .telefonFussKnoepfe button { font-size: 0.86rem; }
/* Das Schreibfeld fragt nach der Demo (v3.67.0) */
#setup #vsEingabe { cursor: pointer; }
#setup #vsEingabe:focus-visible { outline: 2px solid var(--marke-a); outline-offset: 2px; }
#setup .demoFrage { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(20, 22, 32, .45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: szeneRein .25s ease-out; }
#setup .demoFrage[hidden] { display: none; }
#setup .demoFrageKarte { width: 100%; max-width: 250px; background: var(--bg); border-radius: var(--r-l); padding: 18px 16px 12px; box-shadow: var(--shadow-2); display: flex; flex-direction: column; gap: 8px; text-align: center; }
#setup .demoFrageKarte b { font-size: 1.05rem; color: var(--text); }
#setup .demoFrageKarte p { margin: 0 0 4px; font-size: 0.82rem; line-height: 1.4; color: var(--text-2); }
#setup #demoFrageJa { width: 100%; min-height: 44px; padding: 10px 14px; border-radius: var(--r-voll); font-size: 0.92rem; background: linear-gradient(135deg, var(--marke-a), var(--marke-b)); color: #fff; box-shadow: var(--schatten-marke-mittel); }
#setup #demoFrageNein { font-size: 0.86rem; }
#setup .vorschau .wartet { display: none; }
/* ---- Kacheln und Schritte ---- */
#setup .landeKacheln { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 12px; }
@media (min-width: 640px) { #setup .landeKacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
#setup .landeKacheln li { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-l); padding: 16px; font-size: 0.86rem; line-height: 1.4; color: var(--text-2); transition: transform .25s, box-shadow .25s; }
#setup .landeKacheln li[data-szene]:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
#setup .landeKacheln li[data-szene] > span { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--r-m); font-size: 1.3rem; margin-bottom: 10px;
  background: linear-gradient(135deg, rgba(47, 107, 255, .14), rgba(122, 63, 242, .14)); }
#setup .landeKacheln li[data-szene] > b { display: block; color: var(--text); font-size: 1rem; margin-bottom: 3px; }
/* v3.130.0, Paket C (Nebenfund beim Messen, 320 px): „Sprachnachrichten“
   ist breiter als eine Kachel in der schmalsten Spalte (102 px Inhalt) - das
   Wort ragte 8 px aus der Seite, #setup ließ sich seitlich schieben (auch
   ohne Anmeldung, schon vorher). Jetzt trennt es; wo der Browser keine
   Silbentrennung kennt, bricht es notfalls im Wort. */
#setup .landeKacheln li[data-szene] > b { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
#setup .landeKacheln li[role="button"] { cursor: pointer; position: relative; }
#setup .landeKacheln li[role="button"]::after { content: "›"; position: absolute; right: 16px; top: 14px; font-size: 1.3rem; color: var(--text-3); transition: transform .25s; }
#setup .landeKacheln li.offen { border-color: transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(135deg, var(--marke-a), var(--marke-b)) border-box; box-shadow: var(--shadow-2); }
#setup .landeKacheln li.offen::after { transform: rotate(90deg); color: var(--marke-a); }
#setup .landeKacheln li:focus-visible { outline: 3px solid var(--marke-a); outline-offset: 2px; }
#setup .kachelHinweis { margin: 10px 0 0; text-align: center; font-size: 0.82rem; color: var(--text-3); }
/* Die Szene unter der angetippten Kachel: ein kleines Chatfenster und das Ergebnis */
#setup .kachelSzene { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: var(--r-l); background: var(--bg); box-shadow: var(--shadow-1); animation: szeneRein .35s cubic-bezier(.2, .8, .2, 1); }
#setup .kachelSzene[hidden] { display: none; }
@media (min-width: 720px) { #setup .kachelSzene { grid-template-columns: 1.2fr 1fr; align-items: start; } #setup .kachelSzene .ksKopf { grid-column: 1 / -1; } }
@keyframes szeneRein { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
#setup .ksKopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 700; color: var(--text); }
#setup .ksZu { width: 44px; min-height: 44px; padding: 0; background: transparent; color: var(--text-3); border: 0; font-size: 1.1rem; }
#setup .ksZu:hover { color: var(--text); }
#setup .ksChat { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--r-m); background: var(--surface); min-height: 150px; font-size: 0.9rem; }
#setup .ksVerlauf { display: flex; flex-direction: column; gap: 7px; flex: 1; justify-content: flex-end; }
#setup .ksVerlauf .vsBlase.stimme { display: inline-flex; align-items: center; gap: 8px; }
#setup .ksWelle { display: inline-flex; align-items: center; gap: 2px; height: 18px; }
#setup .ksWelle i { width: 3px; border-radius: var(--r-xs); background: var(--text); opacity: .7; height: 40%; animation: welle 1s ease-in-out infinite; }
#setup .ksWelle i:nth-child(2n) { height: 90%; animation-delay: .15s; }
#setup .ksWelle i:nth-child(3n) { height: 60%; animation-delay: .3s; }
@keyframes welle { 0%, 100% { transform: scaleY(.5); } 50% { transform: scaleY(1.1); } }
#setup .ksVerlauf .vsBlase small { display: block; margin-top: 4px; font-size: 0.74rem; opacity: .75; }
#setup .ksErgebnis { display: flex; flex-direction: column; gap: 6px; min-height: 60px; }
#setup .ksErgebnis:empty { display: none; }
#setup .ksErgebnis .ksKarte { padding: 10px 12px; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--border); font-size: 0.88rem; line-height: 1.4; color: var(--text-2); animation: eintragRein .4s cubic-bezier(.2, .8, .2, 1) both; }
#setup .ksErgebnis .ksKarte b { color: var(--text); }
#setup .ksErgebnis .vsEintrag { margin-bottom: 0; background: var(--bg); }
#setup .ksErgebnis .vsEintrag.neu { animation: eintragRein .4s cubic-bezier(.2, .8, .2, 1) .15s both; }
#setup .ksErgebnis .vsGruppe { margin-top: 0; }
#setup .ksLink { display: inline-block; padding: 6px 10px; border-radius: var(--r-voll); background: var(--accent-bg); color: var(--accent); font-weight: 600; font-size: 0.82rem; }
@media (prefers-reduced-motion: reduce) { #setup .kachelSzene, #setup .ksWelle i, #setup .ksErgebnis .ksKarte, #setup .ksErgebnis .vsEintrag.neu { animation: none !important; opacity: 1; transform: none; } }
#setup .schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 12px; counter-reset: schritt; }
@media (min-width: 720px) { #setup .schritte { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
#setup .schritte li { counter-increment: schritt; position: relative; padding: 18px 18px 18px 64px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-l); font-size: 0.9rem; line-height: 1.45; color: var(--text-2); }
#setup .schritte li::before { content: counter(schritt); position: absolute; left: 16px; top: 16px; width: 34px; height: 34px; border-radius: var(--r-kreis); display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--marke-a), var(--marke-b)); }
#setup .schritte b { display: block; color: var(--text); font-size: 1rem; margin-bottom: 3px; }

/* Aufdecken beim Scrollen */
#setup .aufdeck { opacity: 0; transform: translateY(22px); transition: opacity .6s ease-out, transform .6s cubic-bezier(.2, .8, .2, 1); }
#setup .aufdeck.sichtbar { opacity: 1; transform: none; }
#setup .landeKacheln li.aufdeck:nth-child(2), #setup .schritte li.aufdeck:nth-child(2) { transition-delay: .1s; }
#setup .landeKacheln li.aufdeck:nth-child(3), #setup .schritte li.aufdeck:nth-child(3) { transition-delay: .2s; }
#setup .landeKacheln li.aufdeck:nth-child(4) { transition-delay: .3s; }
#setup .landeKacheln li.aufdeck:nth-child(5) { transition-delay: .4s; }
#setup .landeKacheln li.aufdeck:nth-child(6) { transition-delay: .5s; }

/* Fuss (v3.130.0: der Familien-Zugang, der hier stand, ist nach oben unter
   die Konto-Knöpfe gezogen - #familieMitPasswortBtn) */
#setup .setupRecht { justify-content: center; padding-top: 24px; padding-bottom: max(16px, var(--sab)); }

/* ============================================================
   v3.130.0, Paket C (Sören: „Ja so machen, Schritt 1 los“; SPEZ Punkt 8):
   DIE APP-TÜR. In der App auf dem Home-Bildschirm ohne Anmeldung steht nur,
   was hineinführt: der Hinweis, „Ich habe schon ein Konto“ (zuerst, als
   Hauptknopf), „Neu hier? Konto anlegen“, „Ich habe ein Passwort
   bekommen“, „Was ist chat-o?“ und Impressum/Datenschutz. Alles andere der
   Website blendet die Klasse appTuer aus (appTuerSetzen, app-du.js). Die
   Reihenfolge der Knöpfe stellt das Skript in der SEITE um, nicht CSS
   (order) - so liest die Vorlesehilfe dieselbe Reihenfolge, die man sieht.
   ============================================================ */
#setup .appTuerNur { display: none; }
/* Oben verankert wie „Wer bist du?“: Die Tür ist kurz, und #setup zentriert
   senkrecht (app.css) - der Kopf stand sonst mitten im Bild (gemessen, Bild
   tuer-390). Der freie Platz geht unter die Tür, Impressum und Datenschutz
   stehen unten. */
#setup.appTuer #setupRole { margin-bottom: auto; }
#setup.appTuer .appTuerNur { display: block; }
#setup.appTuer .appTuerNur[hidden] { display: none; }
#setup.appTuer :is(.heroEtikett, .heroTitel, .landeClaim, .heroHinweis, .telefonBuehne, .webAbschnitt, .kopfAnmelden) { display: none; }
#setup.appTuer .heroBuehne { background: transparent; grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: 28px; }
#setup.appTuer .heroText { justify-self: center; width: 100%; max-width: 440px; text-align: center; padding-right: 0; }
#setup.appTuer .heroKnoepfe { flex-direction: column; align-items: stretch; }
#setup.appTuer #setupKontoAnmelden { width: 100%; background: linear-gradient(135deg, var(--marke-a), var(--marke-b)); color: var(--stets-weiss); border: 0; box-shadow: var(--schatten-marke-hoch); }
#setup.appTuer #setupKontoBtn { width: 100%; background: transparent; color: var(--text); border: 1px solid var(--border-2); box-shadow: none; }
#setup .appTuerHinweis {
  margin: 0 0 20px; padding: 14px 16px; text-align: left; font-size: 0.92rem; line-height: 1.45;
  color: var(--text-2); background: var(--accent-bg); border: 1px solid var(--accent-border); border-radius: var(--r-m);
}
#setup .appTuerHinweis b { color: var(--text); }
#setup.appTuer .appTuerNochmal {
  width: 100%; min-height: 44px; margin: 0 0 4px; padding: 10px 16px;
  background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger-border); border-radius: var(--r-voll); box-shadow: none; font-size: 0.92rem;
}
#setup.appTuer #appTuerWebsite { margin: 6px auto 0; }

/* Die Anmelde-Stufen (Code, Name, Passwort) bleiben mittig und ruhig */
#setup #setupName, #setup #setupGuestKey { align-self: center; margin: 48px auto 24px; padding: 0 20px; }
/* v3.130.0, Paket C: auch die Passwort-Eingabe oben verankert - wie „Wer
   bist du?“ (Paket A) und die App-Tür. Sie ist kurz, und der Kopf der
   Website stand sonst mitten im Bild (Bild du-passwort-eingabe). Aus der
   Tür führt „Ich habe ein Passwort bekommen“ genau hierher. */
#setup #setupGuestKey { margin-bottom: auto; }
#setup #setupFehler { align-self: center; }

/* ---- v3.130.0: „Wer bist du?“ aus den Daten (Sören: „Ja so machen,
   Schritt 1 los“). Eine Zeile je Person mit Initiale als Ring (.initiale,
   app-bausteine.css), darunter „Jemand anderes“ als gestrichelte Karte.
   Jede Regel hier wiegt (1,1,0) und schlägt damit `#setup button` (app.css,
   Pille mit Schatten) - die Zeilen sind Karten, keine Hauptknöpfe.
   Nur Tokens: hell und dunkel folgen von selbst (#setup im Dunkeln setzt
   die Rollen in diesem Stilblatt oben neu). ---- */
/* Oben verankert: Ist die Stufe kurz (Laden, Fehler), stand der Kopf der
   Website sonst mitten im Bild - #setup zentriert senkrecht (app.css). Der
   freie Platz geht unter die Stufe, Impressum und Datenschutz stehen unten. */
#setup #setupName { width: 100%; max-width: 440px; box-sizing: border-box; margin-bottom: auto; padding-bottom: 24px; }
#setup #setupName h2 { margin: 0; text-align: center; }
#setup .werBistDuHinweis { text-align: center; line-height: 1.45; }
#setup .werBistDuKonto {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%; box-sizing: border-box;
  margin: 0; padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--r-voll);
  background: var(--surface); color: var(--text-2); font-size: 0.86rem; font-weight: 600;
}
#setup .werBistDuKonto[hidden] { display: none; }
/* Nur die ADRESSE wird gekürzt, statt die Pille bei 320 px zu sprengen.
   Ein Satz bricht um: „Angemeldet mit dem alten Famili…“ verlor bei 320 px
   seinen Sinn (Gegenprüfung, gemessen). */
#setup .werBistDuKontoText { min-width: 0; line-height: 1.35; }
#setup .werBistDuKonto b {
  color: var(--text); display: inline-block; max-width: 100%; vertical-align: bottom;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#setup .werBistDuPunkt { flex: none; width: 8px; height: 8px; border-radius: var(--r-kreis); background: var(--success); }
#setup .werBistDuBisher, #setup .werBistDuListe { width: 100%; display: flex; flex-direction: column; gap: 8px; }
#setup .werBistDuBisher:empty { display: none; }
#setup .werBistDuListe .ladeGerippe { width: 100%; padding: 0; }
#setup .werBistDuListe .ladeGerippe .gz { height: 56px; }
#setup .werBistDuPerson, #setup .werBistDuAnders {
  width: 100%; min-height: 56px; margin: 0; padding: 8px 14px; box-sizing: border-box;
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-m);
  box-shadow: none; font-size: 1.05rem; font-weight: 600;
}
#setup .werBistDuPerson:hover { background: var(--surface-2); }
#setup .werBistDuText { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* Ein langer Name endet mit „…“ - bei 320 px läuft nichts über (1i). */
#setup .werBistDuName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#setup .werBistDuUnter { font-size: 0.82rem; font-weight: 500; color: var(--text-3); }
#setup .werBistDuPfeil { flex: none; color: var(--text-3); font-size: 1.15rem; font-weight: 400; }
#setup .werBistDuAnders { background: transparent; border-style: dashed; border-color: var(--border-2); color: var(--accent); }
#setup .werBistDuAnders[hidden] { display: none; }
#setup .werBistDuAnders[aria-expanded="true"] { border-style: solid; border-color: var(--accent-border); }
#setup .werBistDuPlus {
  flex: none; box-sizing: border-box; width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px dashed var(--accent); border-radius: var(--r-kreis); font-size: 1.15rem; line-height: 1;
}
#setup .werBistDuNeuKarte {
  width: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; padding: 14px;
  background: var(--surface); border: 1px solid var(--accent-border); border-radius: var(--r-m);
}
#setup .werBistDuNeuKarte[hidden] { display: none; }
#setup .werBistDuNeuKarte label { font-weight: 700; color: var(--text); font-size: 0.92rem; }
/* Das Feld ist kein Passwortfeld: links, ohne Sperrschrift (app.css
   `#setup input` ist für das Passwort gemacht). */
#setup #werBistDuNeu {
  width: 100%; min-height: 48px; box-sizing: border-box; text-align: left; letter-spacing: normal;
  background: var(--bg); color: var(--text);
}
#setup #werBistDuNeuKnopf { width: 100%; min-height: 48px; border-radius: var(--r-voll); }
#setup .werBistDuNeuSatz, #setup .werBistDuSatz { margin: 0; font-size: 0.86rem; line-height: 1.45; color: var(--text-3); }
#setup .werBistDuSatz { text-align: center; padding: 6px 4px; }
#setup .werBistDuFehler {
  width: 100%; box-sizing: border-box; margin: 0; padding: 10px 12px; text-align: center;
  font-size: 0.92rem; line-height: 1.35; color: var(--danger); background: var(--danger-bg);
  border: 1px solid var(--danger-border); border-radius: var(--r-s);
}
#setup .werBistDuFehler[hidden] { display: none; }
#setup .werBistDuNochmal {
  align-self: center; width: auto; min-height: 44px; padding: 10px 18px;
  background: var(--bg); color: var(--text); border: 1px solid var(--border-2);
  border-radius: var(--r-voll); box-shadow: none;
}
/* Der Fokusring der App (app.css `button:focus-visible`, 0,1,1) verliert
   in #setup gegen `#setup button` (1,0,1) und gegen die Regeln oben
   (1,1,0) - mit der Tastatur sah man nicht, welche Person man gleich wählt
   (Gegenprüfung, gemessen: box-shadow none). hauptkonto-dom 7d/14c/19e.
   v3.130.0, Paket C: Dieselbe Lücke hatten „‹ Zurück“ und die übrigen
   Knöpfe in #setup - der Ring steht jetzt EINMAL für alle oben (Umriss,
   „DER FOKUSRING IN DER WEBSITE“); hier stand er als eigene Liste. */

/* Weniger Bewegung: alles steht, nichts wartet */
@media (prefers-reduced-motion: reduce) {
  #setup .buehneBlob, #setup .telefonSchwebe, #setup .telefon, #setup .heroText, #setup .vsCursor, #setup .vsBlase, #setup .vsSeite.aktiv, #setup .vsEintrag.neu { animation: none !important; }
  #setup .vsEintrag.neu { opacity: 1; transform: none; }
  #setup .aufdeck { opacity: 1; transform: none; transition: none; }
  #setup .telefon { transition: none; }
  #setup .landeKacheln li { transition: none; }
}

/* v3.69.0: "Der erste Monat ist kostenlos" im Hero-Satz. */
.heroKostenlos { display: inline-block; font-weight: 700; color: var(--accent); }   /* v3.129.1: --accent statt Markenfarbe, siehe .heroEtikett */