/* ---------- Design-Tokens ---------- */
:root {
  --radius-xs: 3px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 7px;
  --radius-xl: 9px;
  --radius-pill: 999px;

  --h-sm: 30px;
  --h-md: 38px;
  --h-lg: 44px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --ease-reagiert: cubic-bezier(.2, .7, .3, 1);
  --ease-kommt-an: cubic-bezier(.22, 1.02, .36, 1.16);
  --ease-anlauf: cubic-bezier(.3, 0, .1, 1);
  --dur-kurz: 120ms;
  --dur-lang: 260ms;

  --color-blue: #023E7C;
  --color-blue-deep: #012C5A;
  --color-bus: #0099DC;
  --color-fahr: #8CB100;
  --color-werkstatt: #E53011;
  --color-limousine: #3C4650;

  --bg: #F4F6F9;
  --bg-rgb: 244, 246, 249;
  --card-bg: #FFFFFF;
  --text: #101720;
  --text-muted: #6B7280;
  --text-faint: #8C939E;
  --border-fine: #E3E7EC;
  --border-strong: #DDE3EA;

  --danger-text: #B42318;
  --danger-bg: rgba(240, 68, 56, .08);
  --danger-border: rgba(240, 68, 56, .28);
  --success-text: #067647;
  --success-bg: rgba(18, 183, 106, .08);
  --success-border: rgba(18, 183, 106, .28);
  --warning-text: #B45309;
  --warning-bg: rgba(245, 190, 60, .14);
  --warning-border: rgba(245, 190, 60, .32);

  --focus-ring: rgba(2, 62, 124, .35);

  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
  font-variant-numeric: tabular-nums;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
}

body.start-body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

button, input {
  font: inherit;
  color: inherit;
}

a {
  color: var(--color-blue);
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 0;
  border-radius: var(--radius-sm);
}

/* ---------- Hintergrund ---------- */
.start-screen {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Foto-Fließband, 3. Runde: bewusst gerade (keine Rotation mehr — weder auf
   dem Container noch pro Kachel, das hatte vorher wie "krumme Quadrate"
   gewirkt), einheitliches 4:3-Format, ganz ruhiges Tempo. Reihen laufen als
   endlose Marquee-Schleife (Inhalt in Index.cshtml zweimal hintereinander
   gerendert, hier per translate um exakt -50% verschoben — an der Stelle ist
   die zweite Haelfte identisch zur ersten, der Loop-Sprung bleibt
   unsichtbar), abwechselnde Laufrichtung pro Reihe für einen "gewebten"
   Eindruck statt eines uniformen Bandes. */
.bg-tiles {
  position: fixed;
  inset: 0 -4%;
  z-index: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  opacity: 0;
  animation: tiles-in 1.4s var(--ease-kommt-an) forwards;
  /* Seitliche Ausblendung am sichtbaren Bildschirmrand — Kacheln verschwinden
     dort weich statt hart abgeschnitten zu wirken. */
  mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
}

.bg-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: max-content;
  will-change: translate;
  animation: row-scroll-left var(--row-dur, 150s) linear infinite;
  animation-delay: var(--row-delay, 0s);
}

.bg-row--right {
  animation-name: row-scroll-right;
}

/* IntersectionObserver in start.js schaltet diese Klasse, wenn der Hintergrund
   nicht sichtbar ist (Tab im Hintergrund, Seite gescrollt) — pausiert alle
   Reihen-Animationen, statt unsichtbar weiterzulaufen. */
.bg-tiles.is-offscreen .bg-row {
  animation-play-state: paused;
}

/* Bewusst klein gehalten: die Kacheln sollen als feine Textur hinter der Karte
   liegen, nicht als eigenständiges Bildraster mit ihr konkurrieren. Kein
   Schlagschatten mehr — auf dieser Größe erzeugt er nur Grauschleier. */
.bg-tile {
  flex: 0 0 148px;
  height: 111px; /* 4:3 */
  border-radius: 12px;
  background-size: cover;
  background-position: center;
}

@keyframes tiles-in {
  to { opacity: .5; }
}

/* Von 0 auf -50% statt (0, -Gesamtbreite): die Reihe enthaelt den Fotosatz
   zweimal, -50% ist also exakt eine Wiederholung weiter — nahtlos. */
@keyframes row-scroll-left {
  from { translate: 0 0; }
  to   { translate: -50% 0; }
}

@keyframes row-scroll-right {
  from { translate: -50% 0; }
  to   { translate: 0 0; }
}

@media (max-width: 640px) {
  .bg-tiles { gap: 10px; }
  .bg-row { gap: 10px; }
  .bg-tile { flex-basis: 104px; height: 78px; border-radius: 9px; }
}

/* Weißer Schleier über dem Foto-Mosaik — Mitte sauber, Ränder lassen etwas mehr durch */
.bg-veil {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Bewusst starker Fokus: dort, wo die Karte sitzt, ist der Schleier praktisch
     deckend (klarer Grund, ruhige Typografie), nach außen gibt er die Foto-
     Textur zunehmend frei. Das erzeugt Tiefe, statt dass Bilder und Karte auf
     derselben Ebene um Aufmerksamkeit konkurrieren. */
  background: radial-gradient(ellipse 64% 60% at 50% 48%,
    rgba(var(--bg-rgb), .985) 0%,
    rgba(var(--bg-rgb), .965) 38%,
    rgba(var(--bg-rgb), .88) 64%,
    rgba(var(--bg-rgb), .64) 100%);
}

/* Dynamischer Farbverlauf im Stil einer Siri-/Apple-Intelligence-Aura:
   Alle Bereichsfarben sind gleichzeitig da und blenden ineinander, statt
   nacheinander an- und auszugehen. Jeder Fleck ist eine Ellipse, die
   gleichzeitig driftet, skaliert UND rotiert — durch die Rotation verformt
   sich die Silhouette permanent, das ist der Unterschied zwischen "bunter
   Kreis" und "fliessende Aura". Die Laufzeiten sind bewusst zueinander
   unharmonisch (37/43/53/61/71s), dadurch wiederholt sich die Gesamt-
   komposition praktisch nie sichtbar. */
.bg-glow-layer {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  /* Multiply auf der EBENE (nicht auf den Kindern): so vertiefen die Farben
     den darunterliegenden Schleier und die Fotos, statt sie ins Milchige zu
     waschen. Auf den Kindern haette es nichts bewirkt — die Ebene ist durch
     z-index/position ein eigener Stacking-Context, innerhalb dessen nur gegen
     einen leeren Hintergrund geblendet wuerde. */
  mix-blend-mode: multiply;
}

/* Blur sitzt bewusst auf jedem Fleck selbst, nicht auf dem Wrapper: so bleibt
   jeder eine eigene, einmal weichgezeichnete GPU-Ebene, deren Bewegung danach
   fast kostenlos ist. Blur auf dem Wrapper haette bedeutet, dass der Browser
   die komplette Flaeche jeden Frame neu berechnet. */
.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  will-change: transform, opacity;
  animation-name: glow-morph, glow-breathe;
  animation-timing-function: ease-in-out, ease-in-out;
  animation-iteration-count: infinite, infinite;
  animation-direction: normal, alternate;
}

.glow-bus {
  width: 58vmax; height: 46vmax;
  top: -12%; left: 4%;
  background: radial-gradient(circle, rgba(0, 153, 220, 1) 0%, rgba(0, 153, 220, .72) 32%, transparent 70%);
  --dx: 14vmax; --dy: 9vmax; --o-min: .34; --o-max: .74;
  animation-duration: 53s, 37s;
  animation-delay: 0s, -6s;
}

.glow-fahr {
  width: 52vmax; height: 58vmax;
  top: 30%; left: 60%;
  background: radial-gradient(circle, rgba(140, 177, 0, .95) 0%, rgba(140, 177, 0, .62) 32%, transparent 70%);
  --dx: -12vmax; --dy: 11vmax; --o-min: .26; --o-max: .6;
  animation-duration: 61s, 43s;
  animation-delay: -19s, -21s;
}

.glow-werkstatt {
  width: 50vmax; height: 54vmax;
  top: 48%; left: -6%;
  background: radial-gradient(circle, rgba(229, 48, 17, .85) 0%, rgba(229, 48, 17, .5) 32%, transparent 70%);
  --dx: 15vmax; --dy: -10vmax; --o-min: .2; --o-max: .5;
  animation-duration: 71s, 53s;
  animation-delay: -34s, -12s;
}

.glow-limousine {
  width: 56vmax; height: 50vmax;
  top: -8%; left: 58%;
  background: radial-gradient(circle, rgba(2, 62, 124, .9) 0%, rgba(2, 62, 124, .55) 32%, transparent 70%);
  --dx: -13vmax; --dy: 13vmax; --o-min: .28; --o-max: .64;
  animation-duration: 43s, 61s;
  animation-delay: -27s, -33s;
}

/* Drift, Skalierung und Rotation in einem: die Rotation laesst die Ellipse
   ihre Form scheinbar veraendern, ohne dass etwas neu gezeichnet werden muss. */
@keyframes glow-morph {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
  25%  { transform: translate(var(--dx), var(--dy)) rotate(90deg) scale(1.22); }
  50%  { transform: translate(calc(var(--dx) * -.55), calc(var(--dy) * 1.15)) rotate(180deg) scale(.88); }
  75%  { transform: translate(calc(var(--dx) * .85), calc(var(--dy) * -.95)) rotate(270deg) scale(1.14); }
  100% { transform: translate(0, 0) rotate(360deg) scale(1); }
}

/* Keine Farbe geht je ganz aus — die Dominanz verschiebt sich nur. */
@keyframes glow-breathe {
  from { opacity: var(--o-min); }
  to   { opacity: var(--o-max); }
}

/* Auf Telefonen ist der ganzflaechige Multiply-Blend der teuerste Teil: er
   muss jeden Frame neu gegen den Hintergrund gerechnet werden, weil sich die
   Flecken bewegen. Dort deshalb normales Compositing und ein kleinerer
   Weichzeichner — optisch kaum ein Unterschied auf der Flaeche, aber
   deutlich weniger Arbeit pro Bild. */
@media (max-width: 640px) {
  .bg-glow-layer { mix-blend-mode: normal; }
  .glow { filter: blur(80px); }
}

/* ---------- Kopf & Fuß ---------- */
.start-header {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  padding: var(--space-6) var(--space-4) var(--space-2);
}

.group-logo {
  height: clamp(52px, 8vh, 76px);
  width: auto;
}

.start-main {
  position: relative;
  z-index: 3;
  flex: 1;
  display: grid;
  place-items: center;
  padding: var(--space-4);
}

.start-footer {
  position: relative;
  z-index: 3;
  padding: var(--space-5) var(--space-4) var(--space-6);
  text-align: center;
}

.start-footer__links {
  font-size: 12px;
  color: var(--text-faint);
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  max-width: 380px;
}

.start-footer__links a {
  color: var(--text-faint);
  text-decoration: none;
}

.start-footer__links a:hover {
  color: var(--text-muted);
  text-decoration: underline;
}

/* ---------- Intro ---------- */
.intro {
  grid-area: 1 / 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  text-align: center;
  padding: var(--space-4);
  max-width: 880px;
  cursor: pointer;
  perspective: 700px;
}

.intro-orb {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 380px;
  height: 380px;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(2, 62, 124, .38) 0%, rgba(140, 177, 0, .16) 42%, transparent 72%);
  filter: blur(50px);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.4);
  transition: opacity 900ms var(--ease-kommt-an), transform 1400ms var(--ease-kommt-an);
  pointer-events: none;
}

.intro-orb.is-blooming {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.intro-orb.is-fading {
  opacity: 0;
  transition: opacity 500ms var(--ease-reagiert);
}

.intro-text {
  position: relative;
  z-index: 3;
  margin: 0;
  font-size: clamp(26px, 5vw, 44px);
  line-height: 1.25;
  text-wrap: balance;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--text);
}

.intro-word,
.intro-phrase {
  display: inline-block;
  opacity: 0;
  transform: translateY(14px);
  margin: 0 .06em;
  transition: opacity var(--dur-lang) var(--ease-kommt-an), transform var(--dur-lang) var(--ease-kommt-an);
}

.intro-word.is-in,
.intro-phrase.is-in {
  opacity: 1;
  transform: translateY(0);
}

.intro-word--tight { margin: 0 .02em; }

.intro-word.is-out {
  animation: word-out 420ms var(--ease-anlauf) forwards;
}

@keyframes word-out {
  to { opacity: 0; transform: translateY(-10px) scale(.94); filter: blur(0); }
}

.intro-phrase {
  /* Bewusst dieselbe Type-Stimme wie das Ziel (.auth-card__eyebrow: 600er
     Schnitt, .04em Laufweite) — nur so ist die Landung nach dem Flug wirklich
     derselbe Schriftzug in klein, statt zweier unterschiedlich wirkender
     "StambulaOS"-Schreibweisen, die erst am Ende zusammenspringen. */
  font-weight: 600;
  letter-spacing: .04em;
  background: linear-gradient(90deg, var(--text) 0%, var(--text) 38%, var(--color-blue) 50%, var(--text) 62%, var(--text) 100%);
  background-size: 260% 100%;
  background-position: 0% 0%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}

.intro-phrase.is-flowing {
  animation: flow 1.1s var(--ease-reagiert) forwards;
}

@keyframes flow {
  to { background-position: 100% 0%; }
}

.intro-phrase.is-priming {
  transition: transform 140ms var(--ease-anlauf);
  transform: scale(1.06);
}

.intro-phrase.is-contracted {
  -webkit-text-fill-color: var(--color-blue);
  background: none;
}

.intro-phrase.is-flying {
  position: relative;
  z-index: 3;
  transform-origin: center center;
  /* Nur transform/opacity animiert — kein Blur auf bewegtem Großtext (Ruckelquelle) */
  transition: transform 1300ms var(--ease-anlauf), opacity 300ms linear 1000ms;
}

.intro-skip {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: color var(--dur-kurz) var(--ease-reagiert), background var(--dur-kurz) var(--ease-reagiert);
}

.intro-skip:hover { color: var(--text); background: rgba(2, 62, 124, .06); }

.intro.is-leaving { animation: intro-leave var(--dur-lang) var(--ease-reagiert) forwards; }

@keyframes intro-leave {
  to { opacity: 0; }
}

/* ---------- Login-/Registrierungskarte ---------- */
.start-main > * { grid-area: 1 / 1; }

.auth-card {
  width: min(440px, 100%);
  position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .68));
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: 16px;
  box-shadow:
    0 1px 1px rgba(255, 255, 255, .9) inset,
    0 40px 80px -32px rgba(2, 62, 124, .34),
    0 12px 28px -16px rgba(9, 20, 39, .16);
  padding: var(--space-7) var(--space-6) var(--space-6);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(.97);
  overflow: hidden;
}

/* Backdrop-Blur erst NACH der Intro-Phase aktivieren — sonst rechnet der
   Browser den teuren Glass-Effekt Frame für Frame gegen den bewegten
   Mosaik-/Glow-Hintergrund neu, während die Karte noch unsichtbar ist. */
/* Glas, aber nicht milchig: hoher Weißanteil hält die Typografie knackig,
   der Blur sorgt nur noch für den weichen Übergang zum Hintergrund. */
.auth-card.is-visible {
  background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .86));
  backdrop-filter: blur(32px) saturate(150%);
  -webkit-backdrop-filter: blur(32px) saturate(150%);
}

.auth-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, .12) 68%, rgba(255, 255, 255, .55) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.auth-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  z-index: 2;
  width: 40%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, .6), transparent);
  transform: skewX(-15deg) translateX(0);
  opacity: 0;
  pointer-events: none;
}

.auth-card__header,
.auth-card__body {
  position: relative;
  z-index: 1;
}

.auth-card.is-visible {
  visibility: visible;
  animation: card-in var(--dur-lang) var(--ease-kommt-an) forwards;
}

.auth-card.is-visible::after {
  animation: sheen-sweep 1.1s ease 520ms forwards;
}

@keyframes card-in {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes sheen-sweep {
  0% { transform: skewX(-15deg) translateX(0); opacity: 0; }
  15% { opacity: .9; }
  55% { opacity: 0; }
  100% { transform: skewX(-15deg) translateX(430%); opacity: 0; }
}

.auth-card__header { margin-bottom: var(--space-5); }

.auth-card__eyebrow {
  position: relative;
  margin: 0 0 var(--space-2);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--color-blue);
}

.auth-card__title {
  margin: 0 0 var(--space-2);
  font-size: 22px;
  line-height: 1.3;
  font-weight: 600;
  transition: opacity var(--dur-lang) var(--ease-reagiert);
}

.auth-card__subtitle {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
  transition: opacity var(--dur-lang) var(--ease-reagiert);
}

.auth-card__body {
  position: relative;
  transition: height var(--dur-lang) var(--ease-kommt-an);
}

.auth-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.auth-step.is-entering {
  animation: step-in var(--dur-lang) var(--ease-kommt-an) forwards;
}

@keyframes step-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Formfelder ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }

.field-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4);
}

.field label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

.field input[type="text"],
.field input[type="email"],
.field input[type="password"] {
  width: 100%;
  min-width: 0;
  height: var(--h-lg);
  padding: 0 var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: #fff;
  font-size: 15px;
  transition: border-color var(--dur-kurz) var(--ease-reagiert);
}

.field input:hover { border-color: var(--text-faint); }
.field input:focus-visible { border-color: var(--color-blue); }

.field input:invalid[data-touched] { border-color: var(--danger-border); }

.input-with-action {
  position: relative;
  display: flex;
}

.input-with-action input { flex: 1; padding-right: 42px; }

.field-action {
  position: absolute;
  right: 4px;
  top: 4px;
  bottom: 4px;
  width: 34px;
  display: grid;
  place-items: center;
  border: none;
  background: none;
  color: var(--text-faint);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.field-action:hover { color: var(--text-muted); background: rgba(2, 62, 124, .06); }

.field-error {
  margin: 0;
  font-size: 12.5px;
  color: var(--danger-text);
  min-height: 1px;
}

.field-hint {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-faint);
  transition: color var(--dur-kurz) var(--ease-reagiert);
}

.field-hint.is-met { color: var(--success-text); }

.field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 13.5px;
  cursor: pointer;
}

.checkbox--wrap { align-items: flex-start; }
.checkbox--wrap input { margin-top: 3px; }

.checkbox input {
  width: 18px;
  height: 18px;
  accent-color: var(--color-blue);
  border-radius: var(--radius-xs);
  flex: none;
}

.checkbox a { color: var(--color-blue); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--h-md);
  padding: 0 var(--space-4);
  border: none;
  border-radius: var(--radius-md);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-kurz) var(--ease-reagiert), transform var(--dur-kurz) var(--ease-reagiert), opacity var(--dur-kurz) var(--ease-reagiert);
}

.btn--primary { background: var(--color-blue); color: #fff; }
.btn--primary:hover { background: var(--color-blue-deep); }
.btn--primary:active { transform: scale(.98); }
.btn--primary:disabled { opacity: .65; cursor: default; transform: none; }

.btn--block { width: 100%; }
.btn--lg { height: var(--h-lg); font-size: 15.5px; }

.btn-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .4);
  border-top-color: #fff;
  animation: spin .7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.link-button {
  border: none;
  background: none;
  color: var(--color-blue);
  font-size: 13.5px;
  font-weight: 500;
  padding: 0;
  cursor: pointer;
}

.link-button:hover { text-decoration: underline; }

.auth-card__switch {
  margin: 0;
  text-align: center;
  font-size: 13.5px;
  color: var(--text-muted);
  display: flex;
  gap: 6px;
  justify-content: center;
}

.auth-card__hint {
  margin: 0;
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.55;
}

/* ---------- Rückmeldungen ---------- */
.alert {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  font-size: 13.5px;
  line-height: 1.5;
  border: 1px solid transparent;
}

.alert--error { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-text); }
.alert--success { background: var(--success-bg); border-color: var(--success-border); color: var(--success-text); }
.alert--warning { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-text); }

/* ---------- Responsive ---------- */
@media (max-width: 420px) {
  .auth-card { padding: var(--space-5) var(--space-4) var(--space-4); }
  .field-grid { grid-template-columns: 1fr; }
}

/* Auf schmalen Schirmen bricht die Fußzeile um und läuft sonst unter das
   fest positionierte "Powered by MoreOS"-Badge — deshalb dort zusätzlicher
   Platz nach unten. */
@media (max-width: 560px) {
  .start-footer { padding-bottom: 76px; }
}

/* ---------- Bewegungsreduktion ---------- */
@media (prefers-reduced-motion: reduce) {
  .bg-tiles { animation: none !important; opacity: .48; }
  .bg-row { animation: none !important; translate: 0 0; }
  .glow { animation: none !important; opacity: var(--o-min, .2); }
  .intro-orb { transition: none !important; }
  .intro-word, .intro-phrase,
  .intro-word.is-in, .intro-phrase.is-in,
  .intro-word.is-out, .intro-phrase.is-flowing, .intro-phrase.is-flying, .intro-phrase.is-priming {
    animation: none !important;
    transition: none !important;
  }
  .auth-card.is-visible { animation: none !important; opacity: 1; transform: none; filter: none; }
  .auth-card.is-visible::after { animation: none !important; opacity: 0; }
  .auth-step.is-entering { animation: none !important; opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------------
   Oeffentliches Bewerbungsformular (Pages/Bewerben)
   Liegt vor dem Login und benutzt deshalb die Token dieser Datei, nicht
   tokens.css — und bleibt wie die Startseite immer hell (CLAUDE.md, der eine
   dokumentierte Sonderfall). Bedient wird es ueberwiegend am Handy, oft am
   Fahrzeug stehend: grosse Felder, nichts Enges.
   --------------------------------------------------------------------------- */
.field input[type="tel"],
.field select,
.field textarea {
  width: 100%;
  min-width: 0;
  padding: var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: #fff;
  font: inherit;
  font-size: 15px;
  transition: border-color var(--dur-kurz) var(--ease-reagiert);
}

.field input[type="tel"],
.field select {
  height: var(--h-lg);
  padding-block: 0;
}

.field select:hover,
.field textarea:hover,
.field input[type="tel"]:hover { border-color: var(--text-faint); }

.field select:focus-visible,
.field textarea:focus-visible,
.field input[type="tel"]:focus-visible { border-color: var(--color-blue); }

.field textarea { resize: vertical; min-height: 84px; }

/* Mehrere Kontrollkaestchen nebeneinander (Fuehrerscheinklassen). Jede Auswahl
   ist eine eigene Flaeche statt eines Wortes mit Kaestchen davor — am Handy mit
   Handschuhen trifft man ein Wort nicht. */
.checkbox-gruppe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.checkbox-gruppe .checkbox {
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: #fff;
  font-size: 15px;
}

.checkbox-gruppe .checkbox:hover { border-color: var(--text-faint); }
.checkbox-gruppe .checkbox:has(input:checked) { border-color: var(--color-blue); }

@media (max-width: 560px) {
  .field-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Rechtstexte (Impressum, Datenschutz, AGB, Barrierefreiheit) ----------
   Bis 27.10.2026 liefen diese Seiten noch im Vorlagen-Layout (Bootstrap, englisches
   "Home/Privacy"-Menue). Jetzt _StartLayout wie die Anmeldung, von der aus sie verlinkt
   sind - die Abstandsklassen mb-* im Markup stammen noch aus Bootstrap und werden hier
   nur innerhalb der Rechtstexte nachgebildet. */
.legal-page {
  box-sizing: border-box;
  max-width: 760px;
  margin: var(--space-6) auto var(--space-7);
  padding: var(--space-6) var(--space-6) var(--space-5);
  background: var(--card-bg);
  border: 1px solid var(--border-fine);
  border-radius: var(--radius-xl);
  font-size: 15px;
  line-height: 1.6;
}

.legal-page__zurueck {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.legal-page__zurueck:hover { text-decoration: underline; }

.legal-page h1 { margin: 0 0 var(--space-5); font-size: 26px; line-height: 1.25; letter-spacing: -.01em; }
.legal-page h2 { margin: var(--space-6) 0 var(--space-2); font-size: 18px; line-height: 1.3; }
.legal-page h3 { margin: var(--space-5) 0 var(--space-2); font-size: 15.5px; }
.legal-page p, .legal-page ul, .legal-page ol { margin: 0 0 var(--space-3); }
.legal-page li { margin-bottom: var(--space-1); }
.legal-page a { overflow-wrap: anywhere; }
.legal-page .mb-0 { margin-bottom: 0; }
.legal-page .mb-1 { margin-bottom: var(--space-1); }
.legal-page .mb-3 { margin-bottom: var(--space-4); }
.legal-page .mb-4 { margin-bottom: var(--space-5); }

@media (max-width: 640px) {
  .legal-page { margin: 0 0 var(--space-6); padding: var(--space-5) var(--space-4); border-width: 0 0 1px; border-radius: 0; }
}

/* ---------- Rückmeldung zum Probetag (Pages/Probetag) ----------
   Drei Fragen an den Begleitfahrer (A08), ohne Anmeldung und fast immer am Handy:
   Antworten als große, gleich breite Flächen nebeneinander, die gewählte deutlich
   umrandet — ein Wort neben einem Kästchen trifft man zwischen zwei Touren nicht
   zuverlässig. Wie das Bewerbungsformular immer hell, nur Tokens dieser Datei. */
.rueckmeldung { display: flex; flex-direction: column; gap: var(--space-5); }

.frage { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.frage .frage__titel { padding: 0; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--text); }

.checkbox-gruppe--wahl .checkbox { flex: 1 1 0; justify-content: center; }
.checkbox-gruppe--wahl .checkbox:has(input:checked) {
  box-shadow: inset 0 0 0 1px var(--color-blue);
  font-weight: 600;
}

.antworten { margin: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.antworten dt { margin: 0 0 2px; font-size: 12.5px; color: var(--text-muted); }
.antworten dd { margin: 0; font-size: 15px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Am Handy läge das Ende der Karte (Absenden, Hinweis) sonst unter dem fest stehenden
   „Powered by“-Abzeichen unten rechts. */
@media (max-width: 560px) {
  .probetag-seite { padding-bottom: 72px; }
}