/* /start, der Einstieg auf einer Seite vom Konto bis zum Testanruf, auch im Kasten der Startseite (?im=kasten). Die
   Regeln kamen aus kopf.css, einstieg.css und kopf-einrichtung.css und gelten nur unter .start-seite. Aufgabe 509: Farben,
   Ränder, Schrift und Unterstreichung kommen nur aus werte.css, die page.tsx als erste Datei lädt, mit denselben Tokens
   wie einstieg.css und kopf.css nach 483. Die Seite ist dunkel und trägt auf-nacht wie die dunklen Bänder der Startseite,
   darin gelten die Werte des dunklen Themas der App. Den Fokus zeigt nur fokus.css. In den SVG-Bildern (data:) steht der
   Wert des Tokens: #0F0F10 für --primary-foreground und --signal-foreground, #fff für --foreground, #3DDC84 für --signal, ein
   durchsichtiger Wert als stroke-opacity. */

/* aus kopf.css */
.start-seite .kv-kugel-farbe { position: absolute; inset: 0; display: block; border-radius: 50%; overflow: hidden; isolation: isolate;
  background: radial-gradient(80% 60% at 50% 104%, color-mix(in oklab, var(--k-a, #9FF0D8) 70%, transparent), transparent 70%),
    radial-gradient(90% 90% at 36% 30%, var(--k-b, #2FC7A0), var(--k-c, #156B57) 62%, var(--k-grund, color-mix(in srgb, var(--foreground) 8.5%, var(--background))) 100%);
  box-shadow: 0 44px 84px -44px var(--k-b, var(--signal)), 0 22px 36px -26px color-mix(in srgb, var(--nacht) 85%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--nacht-foreground) 16%, transparent), inset 0 1.5px 0 color-mix(in srgb, var(--nacht-foreground) 34%, transparent), inset 0 -18px 34px -14px color-mix(in oklab, var(--k-a, #9FF0D8) 85%, transparent);
  transition: box-shadow .4s ease; }
.start-seite .kv-kugel-farbe::before { content: ""; position: absolute; inset: -16%; border-radius: 50%; mix-blend-mode: screen; opacity: .85;
  background: radial-gradient(30% 26% at 28% 36%, var(--k-a), transparent 70%), radial-gradient(38% 34% at 74% 42%, var(--k-b), transparent 72%),
    radial-gradient(40% 32% at 48% 84%, var(--k-a), transparent 74%);
  filter: blur(8px) saturate(1.2); }
.start-seite .kv-kugel-farbe::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(30% 16% at 40% 13%, color-mix(in srgb, var(--nacht-foreground) 50%, transparent), color-mix(in srgb, var(--nacht-foreground) 8%, transparent) 62%, transparent 78%),
    radial-gradient(3.6% 2.6% at 33% 12%, color-mix(in srgb, var(--nacht-foreground) 80%, transparent), transparent),
    radial-gradient(58% 30% at 62% 93%, color-mix(in srgb, var(--nacht-foreground) 17%, transparent), transparent 70%),
    radial-gradient(circle at 50% 44%, transparent 60%, color-mix(in srgb, var(--nacht) 38%, transparent) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@media (prefers-reduced-motion: no-preference) {
  .start-seite .kv-kugel-farbe::before { animation: kv-drehen 26s linear infinite; }
}
@keyframes kv-drehen { to { transform: rotate(360deg); } }

/* aus einstieg.css */
.start-seite .einstieg-unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@keyframes einstieg-rein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.start-seite .einstieg-chat { min-height: 60px; padding: 0 24px; border-radius: 999px; border: 1px solid var(--input); background: transparent; color: var(--foreground);
  font: inherit; font-size: 1rem; font-weight: 640; cursor: pointer; transition: background-color .2s ease, border-color .2s ease; }
.start-seite .einstieg-chat:hover { background: var(--accent); border-color: var(--input-hover); }
.start-seite .einstieg-chat:active { background: var(--accent-active); }
.start-seite .einstieg-weiter { position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 64px; margin-top: 26px;
  padding: 0 12px 0 26px; border: 0; border-radius: 999px; background: var(--primary); color: var(--primary-foreground); font: inherit; font-size: 1rem; font-weight: 700;
  text-decoration: none; cursor: pointer; transition: background-color .2s ease, transform .2s ease; }
.start-seite .einstieg-weiter::after { content: ""; width: 42px; height: 42px; flex: none; border-radius: 50%;
  background: var(--background) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 42' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 21h14M22.5 15.5 28 21l-5.5 5.5'/%3E%3C/svg%3E") center / 42px no-repeat;
  transition: transform .25s ease; }
.start-seite .einstieg-weiter:hover { background: var(--signal); transform: translateY(-1px); }
.start-seite .einstieg-weiter:hover::after { transform: translateX(3px); }
.start-seite .einstieg-zurueck { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-left: -6px; padding: 0 14px 0 6px; border: 0; border-radius: 999px;
  background: transparent; color: var(--foreground); font: inherit; font-size: .9rem; font-weight: 640; cursor: pointer; }
.start-seite .einstieg-zurueck:hover { background: var(--accent); }
.start-seite .einstieg-zurueck::before { content: ""; width: 16px; height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 3.5 5.5 8l4.5 4.5'/%3E%3C/svg%3E") center / 16px no-repeat; }
.start-seite .einstieg-balken { height: 3px; margin: 14px 0 30px; border-radius: 3px; background: var(--border); overflow: hidden; }
.start-seite .einstieg-balken i { display: block; height: 100%; width: calc(var(--anteil, .5) * 100%); border-radius: inherit; background: var(--signal); transition: width .5s var(--weich, ease); }
.start-seite .einstieg-frage { display: block; margin: 0; font-size: 1.75rem; line-height: 1.08; font-weight: 700; letter-spacing: -.035em; color: var(--foreground); }
.start-seite .einstieg-hilfe { margin: 10px 0 0; color: var(--muted-foreground); font-size: .95rem; line-height: 1.5; }
.start-seite .einstieg-feld { display: block; width: 100%; min-height: 62px; margin-top: 22px; padding: 0 20px; border-radius: 18px; border: 1px solid var(--input);
  background: var(--muted); color: var(--foreground); font: inherit; font-size: 1rem; font-weight: 420;
  transition: background-color .2s ease, border-color .2s ease; }
.start-seite .einstieg-feld:hover { border-color: var(--input-hover); }
.start-seite .einstieg-feld::placeholder { color: var(--subtle); font-weight: 420; }
/* Aufgabe 509: den Fokus zeigt fokus.css mit dem Ring der App (450), ohne eigene Fokusfarbe */
.start-seite .einstieg-feld[aria-invalid="true"] { border-color: var(--destructive); box-shadow: 0 0 0 4px color-mix(in srgb, var(--destructive) 16%, transparent); }
.start-seite .einstieg-fehler { margin: 10px 0 0; color: var(--destructive); font-size: .9rem; }
/* Aufgabe 436: der Link zur Anmeldung im Hinweis auf ein Konto, das es schon gibt, unterstrichen wie .link in werte.css */
.start-seite .einstieg-fehler a { color: var(--foreground); font-weight: 640; text-decoration-line: underline; text-decoration-thickness: var(--link-underline);
  text-decoration-color: currentColor; text-underline-offset: var(--link-offset); }
.start-seite .einstieg-fehler a:hover { text-decoration-thickness: var(--link-underline-hover); }
.start-seite .einstieg-aktionen { display: flex; align-items: center; justify-content: space-between; gap: 14px 18px; flex-wrap: wrap; margin-top: 22px; }
.start-seite .einstieg-los { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px; padding: 0 28px; border: 0; border-radius: 999px;
  background: var(--signal); color: var(--signal-foreground); font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer;
  box-shadow: 0 14px 36px -14px color-mix(in srgb, var(--signal) 75%, transparent), inset 0 1px 0 color-mix(in srgb, var(--nacht-foreground) 40%, transparent); transition: background-color .2s ease, transform .2s ease; }
.start-seite .einstieg-los:hover { background: var(--signal-hover); transform: translateY(-1px); }
.start-seite .einstieg-pfeil::after { content: ""; width: 18px; height: 18px; flex: none; transition: transform .25s ease;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%230F0F10' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 9h11M10 4.5 14.5 9 10 13.5'/%3E%3C/svg%3E") center / 18px no-repeat; }
.start-seite .einstieg-pfeil:hover::after { transform: translateX(3px); }
.start-seite .einstieg-los[aria-busy="true"] { opacity: .8; cursor: progress; }
/* Textknöpfe und Links unterstrichen wie .link in werte.css: in Ruhe dünn, beim Hover dicker, in der Farbe ihres Texts */
.start-seite .einstieg-text { padding: 6px 0; border: 0; background: none; color: var(--muted-foreground); font: inherit; font-size: .9rem; font-weight: 560; cursor: pointer;
  text-decoration-line: underline; text-decoration-thickness: var(--link-underline); text-decoration-color: currentColor; text-underline-offset: var(--link-offset); }
.start-seite .einstieg-text:hover { color: var(--foreground); text-decoration-thickness: var(--link-underline-hover); }
.start-seite .einstieg-recht { margin: 18px 0 0; color: var(--muted-foreground); font-size: .86rem; line-height: 1.5; }
.start-seite .einstieg-recht a { color: inherit; text-decoration-line: underline; text-decoration-thickness: var(--link-underline); text-decoration-color: currentColor;
  text-underline-offset: var(--link-offset); }
.start-seite .einstieg-recht a:hover { text-decoration-thickness: var(--link-underline-hover); }
@media (max-width: 760px) {
  .start-seite .einstieg-weiter { margin-top: 20px; min-height: 60px; }
  .start-seite .einstieg-balken { margin-bottom: 24px; }
  .start-seite .einstieg-aktionen { flex-direction: column-reverse; align-items: stretch; }
  .start-seite .einstieg-los { width: 100%; }
  .start-seite .einstieg-text { align-self: center; }
}
@media (prefers-reduced-motion: reduce) {
  .start-seite *, .start-seite *::before, .start-seite *::after { transition: none !important; }
}

/* aus kopf-einrichtung.css */
.start-seite .kv-setup { display: grid; grid-template-columns: minmax(220px, .62fr) minmax(0, 1.38fr); gap: clamp(28px, 4vw, 64px); min-height: 470px; }
.start-seite .kv-setup[hidden] { display: none; }
.start-seite .kv-schiene { display: flex; flex-direction: column; gap: 26px; padding: 6px clamp(20px, 3vw, 44px) 6px 4px; border-right: 1px solid var(--border); }
.start-seite .kv-schiene-stimme { display: flex; align-items: center; gap: 14px; }
.start-seite .kv-schiene-stimme .kv-mini-kugel { width: 64px; height: 64px; flex: none; }
.start-seite .kv-schiene-stimme .kv-name { font-size: 1.75rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.start-seite .kv-schiene-stimme .kv-charakter { margin-top: 2px; color: var(--muted-foreground); font-size: .86rem; }
.start-seite .kv-vorschau { display: grid; gap: 8px; margin: -10px 0 0; }
.start-seite .kv-vorschau figcaption { color: var(--muted-foreground); font-size: .75rem; font-weight: 640; letter-spacing: .09em; text-transform: uppercase; }
.start-seite .kv-vorschau blockquote { margin: 0; padding: 13px 16px 14px; border: 1px solid var(--border); border-radius: 4px 18px 18px 18px;
  background: var(--muted); color: var(--foreground); font-size: .9rem; line-height: 1.5; text-wrap: pretty; }
.start-seite .kv-vorschau-firma { color: var(--foreground); font-weight: 640; }
.start-seite .kv-etappen { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; counter-reset: etappe; }
.start-seite .kv-etappen li { position: relative; display: flex; align-items: center; gap: 12px; min-height: 40px; color: var(--muted-foreground); font-size: .95rem; font-weight: 560; }
.start-seite .kv-etappen li[hidden] { display: none; }
.start-seite .kv-etappen li:not(:has(~ li:not([hidden])))::after { content: none; }
.start-seite .kv-etappen li:not(:last-child)::after { content: ""; position: absolute; left: 11px; top: 32px; width: 2px; height: 16px; border-radius: 2px; background: var(--border); }
.start-seite .kv-etappen i { position: relative; display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; border: 1.5px solid var(--input); }
.start-seite .kv-etappen li[data-stand="jetzt"] { color: var(--foreground); }
.start-seite .kv-etappen li[data-stand="jetzt"] i { border-color: var(--signal); box-shadow: 0 0 0 5px color-mix(in srgb, var(--signal) 14%, transparent); }
.start-seite .kv-etappen li[data-stand="jetzt"] i::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); }
.start-seite .kv-etappen li[data-stand="fertig"] { color: var(--foreground); }
.start-seite .kv-etappen li[data-stand="fertig"] i { border-color: transparent;
  background: var(--signal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='m5 9.3 2.6 2.6 5.4-5.6' fill='none' stroke='%230F0F10' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.start-seite .kv-etappen li[data-stand="fertig"]:not(:last-child)::after { background: color-mix(in srgb, var(--signal) 50%, transparent); }
.start-seite .kv-schiene > .einstieg-text { margin-top: auto; align-self: flex-start; }
.start-seite .kv-schritte { position: relative; display: flex; flex-direction: column; min-width: 0; }
.start-seite .kv-schritte > .einstieg-balken { max-width: 600px; margin: 4px 0 30px; }
.start-seite .kv-handykopf { display: none; }
/* Aufgabe 1200 Nachtrag B: die Zeitangabe beim ersten Schritt unter den Etappen, am Handy unter dem Balken */
.start-seite .kv-dauer { margin: -12px 0 0; color: var(--muted-foreground); font-size: .9rem; line-height: 1.5; }
.start-seite .kv-dauer-handy { display: none; }
.start-seite .kv-schritt { animation: einstieg-rein .42s ease both; max-width: 600px; }
/* Aufgabe 1097: der erste Schritt ohne Einblenden (LCP), siehe einstieg.tsx */
.start-seite .kv-schritt[data-erster] { animation: none; }
.start-seite .kv-schritt[hidden], .start-seite .kv-schritt [hidden] { display: none !important; }
.start-seite .kv-schritt .einstieg-aktionen { margin-top: 26px; padding-top: 0; }
.start-seite .kv-lesen { display: grid; justify-items: start; gap: 16px; padding-top: 8px; }
.start-seite .kv-lesen-kugel { position: relative; width: 92px; height: 92px; transition: opacity .3s ease, filter .3s ease; }
@media (prefers-reduced-motion: no-preference) {
  .start-seite .kv-lesen-kugel { animation: kv-puls 1.6s ease-in-out infinite; }
  .start-seite .kv-lesen-liste li { animation: einstieg-rein .35s ease both; }
}
@keyframes kv-puls { 50% { transform: scale(1.06); } }
/* Gescheitert ruht die Kugel, die Meldung darunter sagt warum (Aufgabe 140) */
.start-seite .kv-lesen[data-fehler] .kv-lesen-kugel { animation: none; opacity: .45; filter: saturate(.3); }
.start-seite .kv-lesen-zeit { text-wrap: pretty; }
.start-seite .kv-lesen-uhr { color: var(--foreground); font-weight: 640; font-variant-numeric: tabular-nums; }
.start-seite .kv-lesen-liste { display: grid; gap: 10px; justify-self: stretch; min-width: 0; margin: 6px 0 0; padding: 0; list-style: none; }
.start-seite .kv-lesen-liste li { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--muted-foreground); font-size: 1rem; line-height: 1.4; transition: color .3s ease; }
.start-seite .kv-lesen-liste li::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--input); }
.start-seite .kv-lesen-liste li[data-fertig], .start-seite .kv-lesen-liste li[data-jetzt] { color: var(--foreground); }
/* Was gerade läuft, dreht sich, wie der Ring beim Lesen bei ElevenLabs Reception */
.start-seite .kv-lesen-liste li[data-jetzt]::before { border-color: var(--border); border-top-color: var(--signal); }
@media (prefers-reduced-motion: no-preference) {
  .start-seite .kv-lesen-liste li[data-jetzt]::before { animation: kv-drehen .9s linear infinite; }
}
.start-seite .kv-lesen-liste li[data-fertig]::before { border-color: transparent; background: color-mix(in srgb, var(--signal) 16%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='m5 9.3 2.6 2.6 5.4-5.6' fill='none' stroke='%233DDC84' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
/* Die jüngste Seite unter dem Lesen und das jüngste Feld unter dem Schreiben, eingerückt bis zum Text */
.start-seite .kv-lesen-liste li[data-unter] { margin-top: -6px; padding-left: 30px; color: var(--muted-foreground); font-size: .9rem; }
.start-seite .kv-lesen-liste li[data-unter]::before { content: none; }
.start-seite .kv-lesen-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Am Handy passt der Schritt bis zur Meldung in 360×640, Maße von Aufgabe 139 (Kesru Max 5). Im Kasten
   rechnet svh mit der Höhe des Rahmens, dort gelten die kleineren Werte. */
@media (max-width: 560px) {
  .start-seite .kv-lesen { gap: clamp(10px, 2svh, 16px); }
  .start-seite .kv-lesen-kugel { width: clamp(64px, 11svh, 92px); height: clamp(64px, 11svh, 92px); }
  .start-seite .kv-lesen-liste { gap: 8px; }
  .start-seite .kv-lesen-liste li { font-size: .95rem; }
  .start-seite .kv-lesen-liste li[data-unter] { margin-top: -4px; font-size: .86rem; }
}
/* Aufgabe 798: Jedes Feld wie bei Stripe und ElevenLabs (belege/aufgabe-798.json): die Beschriftung über dem Feld, ein Tipp
   auf sie setzt den Cursor hinein (label um beides). Der Rahmen in --input hat auf dem blauen Grund und auf der Fläche des
   Felds mehr als 3:1 (WCAG 2.2, 1.4.11), in Hover und Fokus --input-hover, im Fokus dazu den Ring aus fokus.css (509).
   Ein Fehler färbt den Rahmen rot und steht direkt unter seinem Feld (amFeld in einstieg.tsx). Mirwan am 02.11.2026: „man
   erkentn gar nicht wo das input feld ist, weil der rahmen total blau ist und der hinteergrund auch.“ */
.start-seite .kv-fakten { display: grid; gap: 16px; margin-top: 22px; }
.start-seite .kv-fakten label { display: grid; gap: 8px; }
.start-seite .kv-fakten span { color: var(--foreground); font-size: .86rem; font-weight: 600; line-height: 1.3; }
.start-seite .kv-fakten :is(input, select, textarea) { width: 100%; min-width: 0; height: 48px; padding: 0 14px; border: 1px solid var(--input);
  border-radius: 14px; background-color: var(--muted); color: var(--foreground); font: inherit; font-size: 1rem;
  transition: border-color .2s ease, background-color .2s ease; }
/* Nur Rahmen und Fläche, so bleibt der Pfeil der Auswahl (background-image) stehen */
.start-seite .kv-fakten :is(input, select, textarea):is(:hover, :focus) { border-color: var(--input-hover); }
.start-seite .kv-fakten :is(input, textarea)::placeholder { color: var(--subtle); }
.start-seite .kv-fakten :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--destructive); }
.start-seite .kv-fakten .einstieg-fehler { margin: -8px 0 0; }
.start-seite .kv-test { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; margin-top: 22px; padding: 18px 20px; border-radius: 18px;
  border: 1px solid var(--border); background: var(--muted); }
.start-seite .kv-test-kugel { position: relative; width: 56px; height: 56px; }
.start-seite .kv-test-text { margin: 0; color: var(--foreground); font-size: 1rem; font-weight: 560; }
.start-seite .kv-test[data-test="warten"] .kv-test-kugel { animation: kv-puls 1.2s ease-in-out infinite; }
.start-seite .kv-test[data-test="ok"] { border-color: color-mix(in srgb, var(--signal) 50%, transparent); background: var(--success-muted); }
.start-seite .kv-test[data-test="ok"] .kv-test-text { color: var(--foreground); }
.start-seite .kv-test .einstieg-chat { min-height: 48px; }
.start-seite .kv-fertig-wege { width: min(100%, 360px); margin-top: 18px; }
.start-seite .kv-fertig-wege .einstieg-weiter { margin-top: 0; }
.start-seite .kv-mini-kugel .kv-kugel-farbe, .start-seite .kv-lesen-kugel .kv-kugel-farbe, .start-seite .kv-test-kugel .kv-kugel-farbe { position: absolute; inset: 0; }
.start-seite .kv-meldung { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 18px; margin-top: 18px; padding: 14px 16px 14px 18px;
  border-radius: 16px; border: 1px solid color-mix(in srgb, var(--destructive) 35%, transparent); background: var(--destructive-muted); }
.start-seite .kv-meldung[hidden] { display: none; }
.start-seite .kv-meldung p { margin: 0; color: var(--destructive); font-size: .9rem; line-height: 1.5; }
.start-seite .kv-meldung b { color: var(--foreground); font-weight: 640; }
.start-seite .kv-meldung-ruhig { border-color: var(--border); background: var(--muted); }
.start-seite .kv-meldung-ruhig p { color: var(--muted-foreground); }
.start-seite .kv-meldung .einstieg-chat { min-height: 44px; padding: 0 18px; white-space: nowrap; }
@media (max-width: 760px) {
  .start-seite .kv-meldung { grid-template-columns: minmax(0, 1fr); }
}
/* Gescheitertes Lesen wie bei ElevenLabs Reception: die Adresse zum Ändern, noch einmal oder ohne Website weiter */
.start-seite .kv-meldung-lesen { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 12px; }
.start-seite .kv-meldung-lesen .einstieg-fehler { margin: -4px 0 0; color: var(--destructive); font-weight: 640; }
.start-seite .kv-meldung-lesen .einstieg-text { padding: 2px 0; color: var(--foreground); }
@media (max-width: 980px) {
  .start-seite .kv-setup { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .start-seite .kv-schiene { display: none; }
  .start-seite .kv-handykopf { display: flex; align-items: center; gap: 12px; color: var(--muted-foreground); font-size: .86rem; font-weight: 640; }
  .start-seite .kv-handykopf .kv-mini-kugel { width: 34px; height: 34px; }
  .start-seite .kv-schritte > .einstieg-balken { margin: 12px 0 22px; }
  .start-seite .kv-dauer-handy { display: block; margin: -12px 0 22px; font-size: .86rem; }
}
@media (max-width: 760px) {
  .start-seite .kv-test { grid-template-columns: auto minmax(0, 1fr); }
  .start-seite .kv-test .einstieg-chat { grid-column: 1 / -1; }
}
.start-seite .kv-zugang { display: grid; gap: 10px; width: min(100%, 520px); margin-top: 18px; padding: 18px 20px; border-radius: 18px; border: 1px solid var(--border); background: var(--muted); }
.start-seite .kv-zugang-form { display: grid; gap: 10px; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--border); }
.start-seite .kv-zugang-form[hidden] { display: none; }
.start-seite .kv-zugang-label { color: var(--foreground); font-size: .86rem; font-weight: 640; }
.start-seite .kv-zugang-form .einstieg-feld { min-height: 52px; margin-top: 0; font-size: 1rem; }
.start-seite .kv-zugang-knoepfe { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; }
.start-seite .kv-zugang-form .einstieg-chat { display: inline-flex; align-items: center; justify-content: center; width: auto; min-height: 48px; padding: 0 20px; font-size: .95rem; }
.start-seite .kv-zugang-form .einstieg-chat::before { content: none; }
.start-seite .kv-zugang-form .einstieg-chat:disabled { opacity: .6; cursor: progress; }
.start-seite .kv-zugang-fehler { margin: 0; }
.start-seite .kv-zugang-fehler[hidden] { display: none; }
/* Aufgabe 434: „Didn't receive a code? Resend“ unter dem Code wie bei Clerk, bis zum nächsten Code gesperrt und mit Zähler */
.start-seite .kv-zugang-neu { justify-self: start; padding: 2px 0; font-size: .86rem; font-variant-numeric: tabular-nums; }
.start-seite .kv-zugang-neu:disabled, .start-seite .kv-zugang-neu:disabled:hover { color: var(--subtle); text-decoration-color: transparent; cursor: default; }
/* Die Ziffern des Codes gleich breit (446) */
.start-seite #start-code { font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .start-seite .kv-zugang-form .einstieg-chat { width: 100%; }
  .start-seite .kv-zugang-knoepfe { justify-content: center; }
}
.start-seite .kv-mini-kugel { position: relative; width: 118px; height: 118px; }
.start-seite .kv-mini-kugel .kv-kugel-farbe { box-shadow: 0 30px 60px -30px var(--k-a), inset 0 0 0 1px color-mix(in srgb, var(--nacht-foreground) 8%, transparent); }
.start-seite .kv-schritt .einstieg-aktionen > .einstieg-los { margin-left: auto; }
@media (max-width: 560px) {
  .start-seite .kv-schritt .einstieg-aktionen > .einstieg-los { margin-left: 0; }
}
.start-seite .kv-schritt [tabindex="-1"]:focus, .start-seite .kv-schritt [tabindex="-1"]:focus-visible { outline: none; }
.start-seite .kv-schritt button:focus:not(:focus-visible), .start-seite .kv-schritt .einstieg-los:focus:not(:focus-visible) { outline: none; box-shadow: none; }

/* Von Hand: die Fläche der Seite, die Karte wie .einstieg auf der Startseite (einstieg.css nach 483) und der Kasten
   (?im=kasten), in dem die Startseite den Einstieg ohne Seitenwechsel zeigt. Dort ist ihr Kasten die Karte. Die Werte
   der Farben setzt auf-nacht (werte.css), die Klasse trägt .start-seite in page.tsx. */
.start-seite { --weich: cubic-bezier(.22, .8, .24, 1);
  display: flex; flex-direction: column; gap: 20px; min-height: 100svh; padding: 20px 16px 48px; color: var(--foreground); color-scheme: dark;
  background: radial-gradient(70% 45% at 18% 0%, color-mix(in srgb, var(--signal) 10%, transparent), transparent 70%), var(--background);
  font-family: var(--font-sans); font-size: 1.125rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; }
.start-seite *, .start-seite *::before, .start-seite *::after { box-sizing: border-box; }
.start-seite-kopf, .start-seite .einstieg, .start-seite-neben { width: min(100%, 1180px); margin: 0 auto; }
.start-seite-kopf { display: flex; align-items: center; min-height: 44px; }
/* Aufgabe 489: die Wortmarke (wortmarke.css) in der Größe aus dem Kopf der Website (unterseite.css) */
.start-seite-marke { display: inline-flex; align-items: center; color: var(--foreground); font-size: 1.22rem; text-decoration: none; }
.start-seite-marke .wortmarke { width: 5.625em; height: 1.5875em; }
.start-seite .einstieg { position: relative; isolation: isolate; padding: 30px; border-radius: 30px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--nacht) 78%, transparent), color-mix(in srgb, var(--nacht) 86%, transparent)); border: 1px solid var(--border);
  box-shadow: 0 50px 120px -50px color-mix(in srgb, var(--nacht) 75%, transparent), 0 0 0 1px color-mix(in srgb, var(--nacht) 25%, transparent), inset 0 1px 0 color-mix(in srgb, var(--nacht-foreground) 7%, transparent); }
.start-seite .einstieg::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(70% 55% at 22% 0%, color-mix(in srgb, var(--signal) 16%, transparent), transparent 70%); }
.start-seite-neben { display: grid; gap: 12px; color: var(--muted-foreground); font-size: .9rem; }
.start-seite-neben a { color: var(--foreground); }
.start-seite-ansprechpartner { display: grid; gap: 2px; padding: 16px 18px; border-radius: 18px; border: 1px solid var(--border); background: var(--muted); }
.start-seite-ansprechpartner b { color: var(--foreground); font-weight: 640; }
/* Aufgabe 836: der Code des Vertriebspartners wie der Promo-Code im Checkout von Stripe: ein Chip mit
   Etikett, Code und ×, daneben der Rabatt. Ohne Code der Knopf „Add promotion code“, dann das Feld mit
   „Apply“ und darunter „Use promotion code: …“ (belege/aufgabe-836.json) */
.start-seite-code { display: grid; gap: 8px; justify-items: start; }
.start-seite-code-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; max-width: 100%; }
/* Feld und „Apply“ in einer Zeile wie bei Stripe, am Handy wird das Feld schmaler */
form.start-seite-code-zeile { flex-wrap: nowrap; gap: 10px; width: 100%; min-width: 0; max-width: 420px; }
.start-seite-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px 0 14px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--muted); color: var(--foreground); }
.start-seite-chip > svg { width: 13px; height: 13px; flex: none; color: var(--muted-foreground); }
.start-seite-chip-code { font-weight: 640; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.start-seite-chip button { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 9px; background: transparent;
  color: var(--muted-foreground); cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.start-seite-chip button svg { width: 16px; height: 16px; }
.start-seite-chip button:hover { background: var(--accent); color: var(--foreground); }
.start-seite-chip button:disabled { cursor: progress; opacity: .6; }
.start-seite-codeknopf { min-height: 44px; padding: 0 18px; border-radius: 12px; border: 1px solid var(--border); background: var(--muted); color: var(--foreground);
  font: inherit; font-size: .9rem; font-weight: 640; cursor: pointer; transition: background-color .2s ease, border-color .2s ease; }
.start-seite-codeknopf:hover { background: var(--accent); border-color: var(--input-hover); }
.start-seite-codeknopf[aria-busy="true"] { opacity: .8; cursor: progress; }
.start-seite-codefeld { flex: 0 1 280px; width: 280px; min-width: 0; max-width: 100%; min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--input); background: var(--muted);
  color: var(--foreground); font: inherit; font-size: 1rem; font-weight: 560; letter-spacing: .04em; transition: border-color .2s ease; }
.start-seite-codefeld::placeholder { color: var(--subtle); font-weight: 420; letter-spacing: 0; }
.start-seite-codefeld:hover { border-color: var(--input-hover); }
.start-seite-codefeld[aria-invalid="true"] { border-color: var(--destructive); box-shadow: 0 0 0 4px color-mix(in srgb, var(--destructive) 16%, transparent); }
.start-seite-code .einstieg-fehler { margin: 0; }
.start-seite-code-wieder { margin: 0; }
.start-seite-code-wieder .einstieg-text { padding: 2px 0; letter-spacing: .04em; }
@media (max-width: 760px) {
  .start-seite .einstieg { padding: 22px 18px; border-radius: 24px; }
}
.start-seite[data-im="kasten"] { min-height: 0; padding: 0; background: transparent; }
.start-seite[data-im="kasten"] .start-seite-kopf { display: none; }
.start-seite[data-im="kasten"] .einstieg { width: 100%; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.start-seite[data-im="kasten"] .einstieg::before { content: none; }

/* Die Stimme vor und zurück im zweiten Schritt, wie die Pfeile am Karussell */
.start-seite .kv-stimmwahl { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; max-width: 420px; }
.start-seite .kv-stimmwahl p { margin: 0; color: var(--foreground); font-size: .95rem; text-align: center; }
.start-seite .kv-stimmwahl p span { color: var(--muted-foreground); }
.start-seite .kv-stimmwahl button { display: grid; place-items: center; width: 44px; height: 44px; flex: none; padding: 0; border-radius: 50%;
  border: 1px solid var(--input); background: transparent; color: var(--foreground); font: inherit; font-size: 1.125rem; cursor: pointer; }
.start-seite .kv-stimmwahl button:hover { border-color: var(--input-hover); background: var(--accent); }
.start-seite .kv-stimmwahl button:active { background: var(--accent-active); }
.start-seite .kv-test-text small { display: block; margin-top: 4px; color: var(--muted-foreground); font-size: .9rem; font-weight: 420; line-height: 1.5; }
.start-seite .kv-zugang-anbieter { display: grid; gap: 10px; }
.start-seite .kv-fertig-wege .einstieg-text { display: inline-block; margin-top: 14px; }
.start-seite .kv-testanruf { display: grid; gap: 12px; margin-top: 22px; }
.start-seite .kv-testanruf .kv-test { margin-top: 0; }
.start-seite .kv-meldung-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.start-seite .kv-fertig-wege { display: grid; justify-items: start; margin-top: 26px; }

/* Aufgabe 139: Am Handy passt jeder Schritt ab 360×640 ganz ins Bild, ohne Scrollen, auf /start wie im Kasten der Startseite.
   Mirwan am 29.10.2026: „sollte man diese Schritte nicht so machen, dass die immer auf Handy passen ohne scrollen?“ Abstände und
   Überschrift rechnen mit svh, der Höhe bei eingeblendeten Browserleisten: bei 640 knapp, ab etwa 760 wie vorher. Im Kasten ist
   svh die Höhe des Rahmens, dort gelten die kleinsten Werte. Die Karte fällt am Handy weg wie im Kasten, das gibt dem Text 38px
   mehr Breite, so brechen Überschriften und Hilfen seltener um. */
/* Der Rahmen im Kasten ist so groß wie die Seite (einstieg.tsx) und schneidet ab, was über sie hinausragt. Bis 760px ist der grüne
   Knopf so breit wie die Seite, sein Schein reicht 22px seitlich und 36px unter ihn. Das Polster des Kastens liegt darum hier im
   Rahmen (kopf.css). */
@media (max-width: 760px) {
  .start-seite[data-im="kasten"] { padding: 0 16px 40px; }
}
@media (max-width: 560px) {
  .start-seite { --kv-knopf: clamp(52px, 8svh, 58px); gap: clamp(8px, 1.6svh, 20px); padding: clamp(8px, 1.4svh, 20px) 16px clamp(12px, 2.4svh, 32px); }
  /* Am Handy reicht der Rahmen bis an den Rand des Bildschirms, das Polster ist der Seitenrand der Startseite (--rand in
     startseite-vollbreite.css), so stehen die Schritte genau unter dem Logo */
  .start-seite[data-im="kasten"] { padding-inline: clamp(18px, 3.2vw, 56px); }
  .start-seite-kopf { min-height: 40px; }
  .start-seite .einstieg { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .start-seite .einstieg::before { content: none; }
  .start-seite .kv-handykopf { gap: 10px; }
  .start-seite .kv-handykopf .kv-mini-kugel { width: clamp(26px, 4.4svh, 34px); height: clamp(26px, 4.4svh, 34px); }
  .start-seite .kv-schritte > .einstieg-balken { margin: clamp(8px, 1.4svh, 12px) 0 clamp(14px, 2.6svh, 22px); }
  .start-seite .einstieg-frage { font-size: clamp(1.3rem, 4.333svh - 5.73px, 1.75rem); line-height: 1.1; }
  .start-seite .einstieg-hilfe { margin-top: clamp(6px, 1svh, 10px); line-height: 1.45; }
  .start-seite .kv-fakten { gap: clamp(12px, 2svh, 16px); margin-top: clamp(12px, 2.4svh, 22px); }
  .start-seite .kv-fakten label { gap: clamp(6px, 1svh, 8px); }
  .start-seite .kv-fakten .einstieg-fehler { margin-top: calc(-1 * clamp(6px, 1svh, 8px)); }

  /* Zurück und Weiter stehen in einer Zeile: Zurück als runder Knopf mit Pfeil (sein Text bleibt für Screenreader), Weiter füllt
     den Rest. Steht Zurück allein, bleibt es beim Text. */
  .start-seite .einstieg-aktionen, .start-seite .kv-schritt .einstieg-aktionen { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 10px;
    margin-top: clamp(16px, 2.6svh, 26px); }
  .start-seite .einstieg-aktionen > .einstieg-los { flex: 1 1 auto; width: auto; min-width: 0; min-height: var(--kv-knopf); padding: 0 20px; }
  .start-seite .einstieg-aktionen > .einstieg-zurueck:not(:only-child) { flex: none; justify-content: center; width: var(--kv-knopf); height: var(--kv-knopf);
    margin: 0; padding: 0; gap: 0; border: 1px solid var(--input); font-size: 0; }
  .start-seite .einstieg-aktionen > .einstieg-zurueck:not(:only-child)::before { width: 20px; height: 20px; background-size: 20px; }
  .start-seite .einstieg-recht { margin-top: clamp(10px, 1.6svh, 18px); }

  /* Stimme: Die Begrüßung spielt die Kugel selbst, wie die Kugeln der Stimmwahl auf der Startseite. Der runde Knopf liegt auf
     ihr, sein Text bleibt für Screenreader, das spart eine Zeile. */
  .start-seite .kv-test { gap: 12px 14px; margin-top: clamp(12px, 2svh, 22px); padding: 12px 14px; }
  .start-seite .kv-test-kugel { width: 48px; height: 48px; }
  .start-seite .kv-test-text { line-height: 1.45; }
  .start-seite .kv-test-text small { font-size: .86rem; line-height: 1.45; }
  .start-seite .kv-spieler .kv-test-kugel { grid-area: 1 / 1; }
  .start-seite .kv-spieler .kv-test-text { grid-area: 1 / 2; }
  .start-seite .kv-spieler .einstieg-chat { grid-area: 1 / 1; z-index: 1; place-self: center; width: 48px; height: 48px; min-height: 48px; padding: 0; border: 0;
    border-radius: 50%; background: transparent; font-size: 0; }
  .start-seite .kv-spieler .einstieg-chat::before { content: ""; display: block; width: 26px; height: 26px; margin: auto; border-radius: 50%;
    background: var(--primary) center / 12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.5 5.8v12.4L18.6 12z' fill='%230F0F10'/%3E%3C/svg%3E");
    box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--nacht) 55%, transparent); transition: transform .2s ease, opacity .2s ease; }
  .start-seite .kv-spieler[data-test="warten"] .einstieg-chat::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 5.5h3.4v13H7zM13.6 5.5H17v13h-3.4z' fill='%230F0F10'/%3E%3C/svg%3E"); }
  .start-seite .kv-spieler .einstieg-chat:hover { background: transparent; }
  .start-seite .kv-spieler .einstieg-chat:hover::before { transform: scale(1.08); }
  .start-seite .kv-spieler .einstieg-chat:disabled::before { opacity: .5; }
  .start-seite .kv-stimmwahl { margin-top: clamp(10px, 1.6svh, 18px); }

  /* Konto und Test */
  .start-seite .kv-zugang { gap: 8px; margin-top: clamp(12px, 2svh, 18px); padding: 14px 16px; }
  .start-seite .kv-zugang-form { gap: 8px; padding-top: 12px; }
  .start-seite .kv-zugang-form .einstieg-feld { min-height: 48px; }
  .start-seite .kv-testanruf { margin-top: clamp(12px, 2svh, 22px); }
  .start-seite .kv-fertig-wege { margin-top: clamp(14px, 2.4svh, 26px); }
  .start-seite .kv-fertig-wege .einstieg-weiter { min-height: var(--kv-knopf); }
  .start-seite .kv-fertig-wege .einstieg-text { margin-top: 6px; }
}
/* Google und Microsoft wie die übrigen Knöpfe der Einrichtung: rund, so hoch und so groß beschriftet wie „Email me a code“ */
.start-seite .kv-zugang-anbieter a { min-height: 48px; border-radius: 999px; background-color: transparent; font-size: .95rem; }
/* Aufgabe 435 gab den Knöpfen auf der damals hellen Fläche der App beim Hover eine feste Fläche. Seit 509 trägt /start
   auf-nacht, der Knopf der App (outline) nimmt darin die dunklen Werte wie in der App im dunklen Thema: Rand --input, beim
   Hover --input-hover, weiße Schrift. Die Fläche ist durchsichtig wie bei „Email me a code“, beim Hover --accent und beim
   Druck --accent-active wie der Zweitknopf (werte.css), die weiße Schrift bleibt darauf lesbar. Das „G“ steht damit auf
   dunkler Fläche wie bei Googles dunklem Knopf. */
.start-seite .kv-zugang-anbieter a:hover { background-color: var(--accent); }
.start-seite .kv-zugang-anbieter a:active { background-color: var(--accent-active); }
.start-seite .kv-zugang-anbieter a > img { left: 18px; }

/* Aufgabe 230: Name und Begrüßung in Schritt 3, die Begrüßung über drei Zeilen (798: wie die Felder darüber) */
.start-seite .kv-fakten textarea { height: auto; min-height: 84px; padding: 11px 14px; line-height: 1.45; resize: none; }
/* Aufgabe 336: Land, Sprache und Branche nach dem Lesen wählen wie bei Reception.ai, als Auswahl
   im selben Kasten wie die Felder der Firma. Der Pfeil rechts in --muted-foreground (#ffffffa4) zeigt, dass sie sich
   aufklappt. Hover setzt nur die Fläche, so bleibt er stehen. */
.start-seite .kv-fakten select { appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23fff' stroke-opacity='.64' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; }
.start-seite .kv-fakten select:has(option[value=""]:checked) { color: var(--subtle); }
.start-seite .kv-fakten select option { background: var(--background); color: var(--foreground); }

/* Aufgabe 1045: Die Schritte stehen mittig in ihrer Fläche, neben der Schiene wie am Handy, und passen sich jeder Breite an.
   Mirwan am 05.11.2026: „dann bei "Weiter mit Stefanie" dieser bereich wo kommt email eingeben oder mitgmail oder so anmelden,
   der war nicht mittig und an bildschirm angepasst sondern links.“ Wie die Anmeldeschritte von RingCentral, ElevenLabs und Retell
   eine Spalte in der Mitte (belege/aufgabe-1045.json). Die Kopfzeile am Handy, der Balken und der Schritt sind gleich breit, die
   Anmeldekarte füllt den Schritt, so stehen Überschrift und Karte bündig. Am Ende der Datei, damit die Abstände oben und unten aus
   den Regeln je Breite bleiben und nur die seitlichen hier gelten. */
/* Live-Prüfung 11.11.2026: die Zeitangabe am Handy (1200 Nachtrag B) steht ebenso in der Spalte, nicht links davor. */
.start-seite .kv-schritte > .kv-handykopf, .start-seite .kv-schritte > .einstieg-balken, .start-seite .kv-schritte > .kv-dauer-handy,
.start-seite .kv-schritt {
  width: 100%; max-width: 600px; margin-inline: auto; }
.start-seite .kv-zugang { width: 100%; }