/* TOOB360 — Markenauftritt der Anmeldeseiten ("das Blatt von unten").
 *
 * Diese Datei ist die Web-Fassung der Anmeldung aus der iOS-App
 * (`TOOB360/ToobMotion.swift` + `LoginView.swift`): dunkle Markenfläche oben mit
 * dem BEWEGTEN Zeichen, das Formular als Blatt, das von unten hereinfährt, und
 * ein Absendeknopf, der sich zu einem Kreis zusammenzieht.
 *
 * Übernommen ist die Anordnung und die Bewegung — NICHT die Farbpalette der App.
 * Die App folgt dem Stitch-Entwurf (#f2ca50 auf #131313), das Web hat sein
 * eigenes, überall verwendetes Gold (#c9a84c auf #0a0a0a) plus Cormorant
 * Garamond. Hinter der Anmeldung steht das Portal in genau diesen Farben; die
 * App-Palette hier hineinzutragen hieße, an der Anmeldung die Marke zu wechseln.
 *
 * Genutzt von: /index.html, /customer/{login,forgot-password,reset-password}.html,
 * /admin/{login,forgot-password,reset-password}.html — zusammen mit
 * `/toob-auth.js`, das Zeichen, Kugel und Schleier in die Seite baut.
 *
 * ⚠️ Die Seiten definieren ihre Farben NICHT mehr selbst; die Tokens stehen hier.
 * `/theme.css` überschreibt sie für den Hellmodus über `html[data-theme="light"]`
 * (höhere Spezifität als `:root`, die Reihenfolge der Dateien ist also egal).
 */

/* ── Tokens ───────────────────────────────────────────────────────────────── */

:root {
  --bg:        #0a0a0a;
  --bg2:       #111111;
  --bg3:       #161616;
  --border:    #222222;
  --gold:      #c9a84c;
  --gold-dim:  #a8873a;
  --text:      #f0f0f0;
  --muted:     #666666;
  --danger:    #ef8a88;

  /* Nur für die Anmeldeseiten */
  --sheet:      #121212;              /* Fläche des Blattes                     */
  --sheet-edge: rgba(201,168,76,.30); /* goldener Haarstrich an seiner Oberkante*/
  --sheet-shadow: 0 -12px 32px rgba(0,0,0,.5), 0 16px 34px rgba(0,0,0,.45);
  --field:      #181818;
  --field-hi:   #1d1d1d;              /* dasselbe Feld mit Fokus                */
  --field-line: #2a2a2a;
  --ink:        #f0dda6;              /* Licht, das durch die Acht läuft        */
  --btn-fg:     #0a0a0a;              /* Schrift auf dem goldenen Knopf         */
  --btn-ink:    #4a3a05;              /* Zeichen IM goldenen Knopf              */
  --btn-ink-hi: #241b00;
  --veil:       201,168,76;           /* driftende Schleier (RGB-Tripel)        */
  --veil-blend: screen;
  --sphere:     rgba(201,168,76,.09); /* Drahtgitter-Kugel                      */
}

html[data-theme="light"] {
  --sheet:      #ffffff;
  --sheet-edge: rgba(156,124,46,.45);
  --sheet-shadow: 0 -10px 26px rgba(20,16,4,.07), 0 14px 30px rgba(20,16,4,.10);
  --field:      #f2f2f5;
  --field-hi:   #ffffff;
  --field-line: #dcdce1;
  --ink:        #e0c47a;
  --btn-fg:     #fff7e4;
  --btn-ink:    #fdf6e0;
  --btn-ink-hi: #fffdf4;
  --veil:       156,124,46;
  --veil-blend: multiply;
  --sphere:     rgba(156,124,46,.16);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Bühne ────────────────────────────────────────────────────────────────── */

/* ⚠️ Die Kugel ist breiter als ein Handy-Bildschirm und ragt bewusst hinaus.
   Ohne Beschnitt lässt sich die Seite quer schieben (auf 375 px um 60 px) und
   rechts steht eine leere Fläche.
   ⚠️ Die Regel muss an BEIDEN Elementen stehen: nur am <html> (wo die Vorgabe
   sonst an die Ansichtsfläche weitergereicht wird) blieb die Seite in Chrome
   genauso quer verschiebbar — nachgemessen in einem 375 px breiten Rahmen.
   `hidden` steht als Rückfalllinie davor, `clip` versteht erst Safari 16;
   beide lassen senkrechtes Scrollen unberührt. */
html { overflow-x: hidden; overflow-x: clip; }

body.toob-auth {
  min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', system-ui, sans-serif;
  overflow-x: hidden;
  overflow-x: clip;
}

/* Ein App-Bildschirm: oben die Marke, unten das Blatt. Am Handy füllt er die
   Anzeige, ab Tablet-Breite steht er als 720 px hohe Fläche mitten im Bild.
   Das Blatt stößt unten NICHT an: der Abstand steht als Innenabstand hier, nicht
   als Außenabstand am Blatt — so bleibt die Fläche des Bildschirms zusammen und
   der Kopf (flex: 1) gibt den Platz von selbst her. */
.ta-screen {
  position: relative; z-index: 1;
  width: 100%; max-width: 440px;
  min-height: 100dvh;
  padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column;
}

@media (min-width: 560px) and (min-height: 740px) {
  .ta-screen { min-height: 720px; }
}

/* Ist die Anzeige schmaler als das Blatt breit werden darf, bekommt es auch
   seitlich Luft: ein Blatt, das unten frei steht und rundum runde Ecken hat,
   links und rechts aber am Bildschirmrand abgeschnitten wird, sieht nach
   Versehen aus. Ab 480 px steht es ohnehin frei (max-width 440) — dort ändert
   die Regel nichts. */
@media (max-width: 479px) {
  .ta-screen { padding-inline: 14px; }
}

/* ── Kopf: Zeichen + Zeile ────────────────────────────────────────────────── */

.ta-head {
  position: relative;                 /* Bezug für die Kugel */
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px;
  padding: 34px 24px 26px;
  text-align: center;
}

.ta-tag {
  font-size: .62rem; letter-spacing: .32em; text-transform: uppercase;
  color: var(--muted);
}

/* Zeichen und Schriftzug in den Proportionen der Originaldatei
   (Zeichen 117×136, Lücke 45, Schriftzug 648×95).
   ⚠️ `--mh` ist die Höhe des GEZEICHNETEN Zeichens, nicht seines Rahmens: der
   Pfeilring hat links und rechts Lücken (er füllt 69,4 % × 78 % des Feldes).
   Ohne diesen Überstand (0,196 × mh) klafft im Schriftzug eine zu große Lücke. */
.ta-lockup {
  --mh: 50px;
  display: flex; align-items: center;
  gap: calc(var(--mh) * .1347);       /* 45/136 · mh − Überstand */
  /* Zeichen und Schriftzug kommen erst mit dem Skript bzw. dem Bild. Höhe und
     Seitenverhältnis stehen deshalb schon vorher fest — sonst rückt der Kopf
     beim Laden zweimal. */
  min-height: calc(var(--mh) * 1.2821);
}
.ta-lockup .ta-mark {
  width:  calc(var(--mh) * 1.2821);   /* mh / 0,78 */
  height: calc(var(--mh) * 1.2821);
  flex: none;
}
.ta-lockup .ta-word {
  height: calc(var(--mh) * .6985);    /* 95/136 · mh */
  width: auto; aspect-ratio: 648 / 95; display: block;
}
/* ⚠️ Im Hellmodus wird das gerechnete Zeichen dunkler (--gold: #9c7c2e), der
   Schriftzug ist aber ein festes Bild im hellen Gold — nebeneinander sähe man
   zwei verschiedene Goldtöne. Der Filter zieht das Bild auf denselben Ton. */
html[data-theme="light"] .ta-lockup .ta-word { filter: brightness(.78) saturate(1.15); }

@media (max-width: 380px) { .ta-lockup { --mh: 42px; } }

/* ── Das bewegte Zeichen ──────────────────────────────────────────────────── */
/*
 * Pfeilring und Acht liegen als zwei <svg> übereinander: nur der Ring dreht,
 * die Acht steht still — wie im Logo. Zwei drehende Ebenen wären Krach.
 *
 * ⚠️ Die Drehung sitzt an den umschließenden <div>s, nicht am <svg>, weil drei
 * Drehungen ÜBEREINANDER gebraucht werden und pro Element nur eine Animation
 * `transform` setzen kann (die zuletzt genannte gewinnt, sie addieren sich
 * nicht). Verschachtelt addieren sie sich dagegen von selbst:
 *   .tm-idle   ruhiges Drehen, läuft immer
 *   .tm-in     Auftakt: kommt aus einer Vierteldrehung und schwingt ein
 *   .tm-ramp   Anlauf beim Absenden (0 → volle Fahrt in 0,35 s)
 *   .tm-spin   volle Fahrt
 * Ein einfacher Wechsel der `animation-duration` ginge nicht: der Fortschritt
 * ist verstrichene Zeit ÷ Dauer — beim Umschalten springt der Winkel.
 */
.ta-mark { position: relative; }
.ta-mark div, .ta-mark > svg { position: absolute; inset: 0; }
.ta-mark svg { width: 100%; height: 100%; display: block; }

.tm-idle { animation: tm-turn 24s linear infinite; }
.tm-in   { animation: tm-in 1.1s cubic-bezier(.22,1.28,.52,1) backwards; }
.tm-ramp, .tm-spin { animation: none; }

.ta-mark.is-busy .tm-ramp { animation: tm-ramp .35s cubic-bezier(.5,0,1,1) forwards; }
.ta-mark.is-busy .tm-spin { animation: tm-turn 1.12s linear .35s infinite; }

@keyframes tm-turn { to { transform: rotate(360deg); } }
@keyframes tm-in   { from { transform: rotate(-95deg); } }
/* 56° in 0,35 s mit zunehmender Geschwindigkeit — am Ende läuft der Ring so
   schnell wie die anschließende Dauerdrehung (360°/1,12 s ≈ 320°/s). */
@keyframes tm-ramp { to { transform: rotate(56deg); } }

.tm-ring { fill: var(--tm-ink, var(--gold)); }

.tm-inf  { fill: none; stroke: var(--tm-ink, var(--gold)); stroke-linecap: round; }
/* ⚠️ `both`, nicht `backwards`: der Ruhewert am Element ist `dashoffset: 100`
   (= leere Bahn, damit sich die Acht überhaupt einzeichnen KANN). Mit
   `backwards` fällt sie nach dem Auftakt genau dorthin zurück — das Zeichen
   verliert seine Acht und übrig bleibt der Ring mit einem wandernden Strich. */
.tm-base {
  stroke-width: 3.4; opacity: .85;
  stroke-dasharray: 100; stroke-dashoffset: 100;
  animation: tm-draw 1.1s cubic-bezier(.22,.9,.3,1) both;
}
@keyframes tm-draw { to { stroke-dashoffset: 0; } }

/* ⚠️ Die Punkte sind DÜNNER als die Linie und heller — ein Lichtstreif IM
   Strich. Die Web-Kette der 404-Seite (zwölf Punkte, breiter als die Linie) ist
   für ein bildschirmgroßes Zeichen gedacht; bei 50 px Höhe verdeckt sie die Acht
   vollständig und das Ergebnis liest sich als Perlenschnur statt als Logo. */
.tm-dot {
  stroke-width: 2.1; stroke: var(--tm-hi, var(--ink)); opacity: .95;
  stroke-dasharray: 2 98;
  animation: tm-run 2.6s cubic-bezier(.4,.25,.6,.75) calc(var(--i) * .055s - 2.6s) infinite,
             tm-dots-in .45s ease .3s backwards;
}
@keyframes tm-run     { to { stroke-dashoffset: -100; } }
@keyframes tm-dots-in { from { opacity: 0; } }

/* Ohne Auftakt (im Knopf, wo das Zeichen mitten im Betrieb erscheint). */
.ta-mark.no-intro .tm-in   { animation: none; }
.ta-mark.no-intro .tm-base { animation: none; stroke-dashoffset: 0; }
.ta-mark.no-intro .tm-dot  { animation-delay: calc(var(--i) * .055s - 2.6s), 0s; }

/* ── Hintergrund: Kugel und Schleier ──────────────────────────────────────── */

/* Drahtgitter-Kugel als leiser Hinweis auf das, was die Seiten zeigen: eine
   360°-Aufnahme. Sie hängt im Kopf und ist bewusst sehr schwach.
   Die Längengrade sind Kreise, die in der Breite atmen — die Projektion eines
   Meridians IST eine Ellipse mit rx = |cos α| · R. Daraus entsteht die Drehung,
   ganz ohne 3D. */
.ta-sphere {
  position: absolute; left: 50%; top: 50%;
  width: min(520px, 132vw); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: ta-sphere-in 1.6s ease-out backwards;
}
@keyframes ta-sphere-in { from { opacity: 0; transform: translate(-50%,-50%) scale(.82); } }

.ta-sphere svg { width: 100%; height: 100%; display: block; overflow: visible; }
.ta-sphere ellipse {
  fill: none; stroke: var(--sphere);
  stroke-width: 1; vector-effect: non-scaling-stroke;
}
/* ⚠️ `transform-box: fill-box` ist Pflicht: ohne sie bezieht sich
   `transform-origin` auf SVG-Kindern auf das Nutzerkoordinatensystem und die
   Ellipse schrumpft nicht um ihre Mitte, sondern zur linken Kante. */
.ta-sphere .sp-mer {
  transform-box: fill-box; transform-origin: 50% 50%;
  animation: sp-width 30s linear infinite, sp-face 60s linear infinite;
  animation-delay: calc(var(--i) * -3.75s), calc(var(--i) * -3.75s);
}
/* |cos α| über eine halbe Umdrehung, in Achtelschritten abgetastet. */
@keyframes sp-width {
  0%   { transform: scaleX(1);    }
  12.5%{ transform: scaleX(.924); }
  25%  { transform: scaleX(.707); }
  37.5%{ transform: scaleX(.383); }
  50%  { transform: scaleX(.004); }
  62.5%{ transform: scaleX(.383); }
  75%  { transform: scaleX(.707); }
  87.5%{ transform: scaleX(.924); }
  100% { transform: scaleX(1);    }
}
/* Was vorn liegt, ist heller. Halbe Umdrehung hell, halbe flach — deshalb die
   doppelte Dauer der Breiten-Animation. */
@keyframes sp-face {
  0%   { opacity: .45; }
  25%  { opacity: 1;   }
  50%  { opacity: .45; }
  100% { opacity: .45; }
}
.ta-sphere .sp-lat { opacity: .55; }

/* Driftende Goldschleier. Weiche Verläufe statt weichgezeichneter Kreise: ein
   `blur`-Filter über die ganze Fläche kostet jeden Frame Rechenzeit, der Verlauf
   ist von sich aus weich. Bewegt wird nur `transform` — das macht der
   Kompositor. */
.ta-aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.ta-aurora i {
  position: absolute; display: block;
  left: var(--x); top: var(--y);
  /* ⚠️ Nach der BILDSCHIRMBREITE bemessen (wie in der App: Radius 0,8 × Breite),
     aber gedeckelt: auf einem 1920er Monitor wären 160vw drei Meter Verlauf und
     sichtbar bliebe nur dessen gleichmäßige Mitte — ein brauner Schleier über
     allem statt dreier Lichter. */
  width: min(var(--s), var(--cap, 1100px)); aspect-ratio: 1;
  margin: 0; border-radius: 50%; opacity: var(--a);
  background: radial-gradient(circle closest-side,
              rgba(var(--veil), .50) 0%, rgba(var(--veil), .18) 45%, rgba(var(--veil), 0) 100%);
  mix-blend-mode: var(--veil-blend);
  transform: translate(-50%, -50%);
  will-change: transform;
}
.ta-aurora i:nth-child(1) { animation: ta-drift1 19s ease-in-out infinite; }
.ta-aurora i:nth-child(2) { animation: ta-drift2 27s ease-in-out infinite; }
.ta-aurora i:nth-child(3) { animation: ta-drift3 33s ease-in-out infinite; }
@keyframes ta-drift1 {
  0%,100% { transform: translate(-50%,-50%); }
  33%     { transform: translate(-36%,-44%); }
  66%     { transform: translate(-61%,-55%); }
}
@keyframes ta-drift2 {
  0%,100% { transform: translate(-50%,-50%); }
  40%     { transform: translate(-62%,-56%); }
  70%     { transform: translate(-41%,-45%); }
}
@keyframes ta-drift3 {
  0%,100% { transform: translate(-50%,-50%); }
  35%     { transform: translate(-63%,-43%); }
  75%     { transform: translate(-38%,-57%); }
}

/* ── Das Blatt ────────────────────────────────────────────────────────────── */

.ta-sheet {
  position: relative;
  background: var(--sheet);
  border-radius: 30px;
  padding: 26px 24px 24px;   /* der sichere Bereich unten hängt an .ta-screen */
  box-shadow: var(--sheet-shadow);
  display: flex; flex-direction: column; gap: 16px;
  animation: ta-sheet-in .9s cubic-bezier(.19,1.05,.34,1) .06s backwards;
}
/* Goldener Haarstrich an der Oberkante, nach unten auslaufend. Als
   Verlaufs-Rahmen über zwei Masken, weil ein `border-image` an runden Ecken
   nicht sauber ausläuft. */
.ta-sheet::before {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit; padding: 1px;
  background: linear-gradient(to bottom, var(--sheet-edge), transparent 55%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
@keyframes ta-sheet-in { from { transform: translateY(70%); opacity: 0; } }

.ta-title {
  font-family: 'Cormorant Garamond', serif; font-weight: 400;
  font-size: 1.45rem; letter-spacing: .04em; line-height: 1.2;
  color: var(--text);
}
.ta-sub { font-size: .8rem; line-height: 1.55; color: var(--muted); }

.ta-foot {
  margin-top: 4px; text-align: center;
  font-size: .58rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted); opacity: .55;
}

/* Gestaffeltes Erscheinen: aufsteigen, aufklaren, einblenden. */
.ta-in { animation: ta-in .8s cubic-bezier(.2,.75,.25,1) var(--d, 0s) backwards; }
@keyframes ta-in { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } }

/* ── Eingabefeld ──────────────────────────────────────────────────────────── */

.ta-field {
  position: relative; display: flex; align-items: center; gap: 12px;
  background: var(--field);
  border: 1px solid var(--field-line);
  border-radius: 10px;
  padding: 9px 12px;
  cursor: text;
  transition: background .25s ease, box-shadow .35s ease;
}
.ta-field:focus-within { background: var(--field-hi); box-shadow: 0 0 18px rgba(201,168,76,.16); }

.ta-field-icon {
  flex: none; width: 18px; height: 18px; color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  transition: color .25s ease, transform .35s cubic-bezier(.3,1.2,.4,1);
}
.ta-field-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor;
                     stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ta-field:focus-within .ta-field-icon { color: var(--gold); transform: scale(1.08); }

.ta-field-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ta-field-label {
  font-size: .58rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); transition: color .25s ease;
}
.ta-field:focus-within .ta-field-label { color: var(--gold); }

.ta-field input {
  width: 100%; background: none; border: none; outline: none;
  color: var(--text); font-family: inherit; font-size: .95rem; padding: 1px 0 2px;
}
/* ⚠️ Vor jeder `color-mix()`-Zeile steht die schlichte Fassung: Browser vor
   Chrome 111 verwerfen die ganze Deklaration und bekämen sonst gar keinen Wert
   (der Platzhalter stünde in voller Textfarbe da). Dieselbe Vorsorge wie an den
   13 Stellen im Viewer. */
.ta-field input::placeholder { color: #555; color: color-mix(in srgb, var(--muted) 60%, transparent); }

/* Der goldene Rahmen zeichnet sich beim Fokus einmal rundherum ein und beim
   Verlassen wieder zurück.
   ⚠️ Das <svg> liegt um eine halbe Strichbreite eingerückt, damit der mittig
   auf dem Pfad sitzende Strich genau auf dem grauen Rahmen darunter landet.
   `pathLength="100"` lässt `dasharray`/`dashoffset` in Prozent der Pfadlänge
   rechnen — die echte Länge hängt an der Feldbreite und ist damit egal.
   ⚠️ `pathLength` an einem <rect> (statt an einem <path>) kennt Firefox erst ab
   Version 97; davor stünde beim Tippen ein gestrichelter Rahmen da. */
.ta-field-ring {
  position: absolute; left: .75px; top: .75px;
  width: calc(100% - 1.5px); height: calc(100% - 1.5px);
  overflow: visible; pointer-events: none;
}
.ta-field-ring rect {
  fill: none; stroke: var(--gold); stroke-width: 1.5;
  stroke-dasharray: 100; stroke-dashoffset: 100;
  transition: stroke-dashoffset .55s cubic-bezier(.3,.9,.3,1);
}
.ta-field:focus-within .ta-field-ring rect { stroke-dashoffset: 0; }

/* Auge zum Aufdecken des Passworts */
.ta-eye {
  flex: none; background: none; border: none; cursor: pointer; padding: 4px;
  color: var(--muted); line-height: 0; border-radius: 6px;
  transition: color .15s, transform .12s;
}
.ta-eye:hover { color: var(--text); }
.ta-eye:active { transform: scale(.88); }
.ta-eye svg { width: 17px; height: 17px; fill: none; stroke: currentColor;
              stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ta-eye .ta-eye-off { display: none; }
.ta-eye.is-shown .ta-eye-on  { display: none; }
.ta-eye.is-shown .ta-eye-off { display: block; }

.ta-fields { display: flex; flex-direction: column; gap: 12px; }

/* Waagerechtes Ausschlagen für eine fehlgeschlagene Anmeldung. */
.ta-shake { animation: ta-shake .4s linear; }
@keyframes ta-shake {
  0%,100% { transform: translateX(0); }
  16% { transform: translateX(9px); }  33% { transform: translateX(-9px); }
  50% { transform: translateX(7px); }  66% { transform: translateX(-5px); }
  83% { transform: translateX(3px); }
}

/* ── Meldungen ────────────────────────────────────────────────────────────── */

.ta-msg { display: none; align-items: flex-start; gap: 7px; font-size: .78rem; line-height: 1.45; }
.ta-msg.is-on { display: flex; animation: ta-in .35s ease backwards; }
.ta-msg svg { flex: none; width: 13px; height: 13px; margin-top: 2px; }
.ta-err { color: var(--danger); }
.ta-ok  { color: var(--gold); }

/* ── Knöpfe ───────────────────────────────────────────────────────────────── */

.ta-submit-row { display: flex; justify-content: center; }

/* Der Knopf zieht sich beim Absenden zu einem Kreis zusammen, in dem sich das
   TOOB-Zeichen dreht — statt eines fremden Rades.
   ⚠️ Die Breite setzt `ToobAuth.busy()` in Pixeln, nicht diese Datei: von `100%`
   auf `52px` zu überblenden ist ein Wechsel der Einheit, und der ist nicht in
   jedem Browser zuverlässig interpolierbar. */
.ta-submit {
  position: relative; width: 100%; height: 52px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dim) 100%);
  color: var(--btn-fg); border: none; border-radius: 10px;
  font-family: inherit; font-size: .74rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  cursor: pointer; overflow: hidden;
  box-shadow: 0 8px 22px rgba(201,168,76,.16);
  transition: width .5s cubic-bezier(.3,1.05,.4,1), border-radius .5s cubic-bezier(.3,1.05,.4,1),
              transform .12s ease, box-shadow .25s ease, filter .18s ease;
}
.ta-submit:hover:not(:disabled) { filter: brightness(1.06); }
.ta-submit:active:not(:disabled) { transform: scale(.985); }
/* ⚠️ NIE über `opacity` deaktivieren: dunkle Schrift auf Gold verschwindet bei
   halber Deckkraft völlig. Stattdessen Fläche und Schriftfarbe tauschen —
   dieselbe Regel wie beim `PrimaryButton` der App. */
.ta-submit:disabled:not(.is-busy) {
  background: var(--field); color: var(--muted);
  color: color-mix(in srgb, var(--muted) 85%, transparent);
  box-shadow: none; cursor: not-allowed;
}
.ta-submit.is-busy { border-radius: 26px; cursor: default; }

.ta-submit-label { transition: opacity .2s ease, transform .25s ease; }
.ta-submit.is-busy .ta-submit-label { opacity: 0; transform: scale(.82); }

.ta-submit .ta-mark {
  position: absolute; left: 50%; top: 50%; width: 30px; height: 30px;
  margin: -15px 0 0 -15px;
  --tm-ink: var(--btn-ink); --tm-hi: var(--btn-ink-hi);
  opacity: 0; transform: scale(.55);
  transition: opacity .2s ease, transform .3s cubic-bezier(.3,1.3,.4,1);
}
.ta-submit.is-busy .ta-mark { opacity: 1; transform: scale(1); }

/* Zeile mit Nebenlinks (Passwort vergessen, zurück zur Anmeldung …) */
.ta-links { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; }
.ta-link {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: .74rem; color: var(--muted);
  text-decoration: none; transition: color .15s;
}
.ta-link:hover { color: var(--gold); }

/* Zurückhaltender Knopf (z. B. „Neuen Link anfordern") */
.ta-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 1.2rem;
  background: rgba(201,168,76,.10); border: 1px solid rgba(201,168,76,.30);
  background: color-mix(in srgb, var(--gold) 10%, transparent);
  border-color: color-mix(in srgb, var(--gold) 30%, transparent);
  border-radius: 10px; color: var(--gold);
  font-family: inherit; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; transition: background .18s, border-color .18s;
}
.ta-ghost:hover { background: rgba(201,168,76,.18); background: color-mix(in srgb, var(--gold) 18%, transparent); }

/* ── Obere Leiste: Hell/Dunkel links, Sprache rechts ──────────────────────── */

/* ⚠️ Der Umschalter aus theme.js klebt sonst unten rechts — dort liegt jetzt das
   Blatt, und er stünde mitten in dessen Inhalt. */
body.toob-auth .toob-theme-toggle {
  top: max(14px, env(safe-area-inset-top, 0px)); left: 14px;
  right: auto; bottom: auto;
  width: 38px; height: 38px;
  background: var(--sheet);
  background: color-mix(in srgb, var(--sheet) 85%, transparent);
  border-color: var(--field-line);
  box-shadow: none;
}
body.toob-auth .toob-theme-toggle svg { width: 17px; height: 17px; }

/* Zurück zur Startseite (Auswahl Homepage / Kundenportal / Admin) — rechts neben
   dem Hell/Dunkel-Umschalter (14 px + 38 px + 8 px Abstand). */
.ta-home {
  position: fixed; top: max(14px, env(safe-area-inset-top, 0px)); left: 60px; z-index: 9999;
  display: inline-flex; align-items: center; gap: .4rem;
  height: 38px; padding: 0 .75rem 0 .6rem;
  background: var(--sheet);
  background: color-mix(in srgb, var(--sheet) 85%, transparent);
  border: 1px solid var(--field-line); border-radius: 10px;
  color: var(--muted); font-family: inherit; font-size: .76rem;
  text-decoration: none; transition: border-color .15s, color .15s;
}
.ta-home:hover { border-color: var(--gold); color: var(--text); }
.ta-home svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; flex: none; }

.ta-lang {
  position: fixed; top: max(14px, env(safe-area-inset-top, 0px)); right: 14px; z-index: 9999;
  background: var(--sheet);
  background: color-mix(in srgb, var(--sheet) 85%, transparent);
  border: 1px solid var(--field-line); border-radius: 10px;
  color: var(--muted); font-family: inherit; font-size: .76rem;
  height: 38px; padding: 0 .55rem; cursor: pointer; outline: none;
  transition: border-color .15s, color .15s;
}
.ta-lang:hover { border-color: var(--gold); color: var(--text); }
.ta-lang option { background: var(--sheet); color: var(--text); }

/* ── Weniger Bewegung ─────────────────────────────────────────────────────── */
/*
 * Alles Laufende steht still, das Blatt erscheint ohne Fahrt. Das Zeichen bleibt
 * dabei sichtbar: `--tm-base` hat im Ruhezustand `dashoffset: 100` (also leer),
 * weil die Animation den Anfangswert liefert — ohne Rücksetzung sähe man hier
 * eine leere Bahn statt des Logos.
 */
@media (prefers-reduced-motion: reduce) {
  .tm-idle, .tm-in, .tm-ramp, .tm-spin, .ta-sphere, .ta-aurora i,
  .ta-sheet, .ta-in, .ta-msg.is-on, .ta-shake { animation: none !important; }
  .tm-base { animation: none; stroke-dashoffset: 0; }
  .tm-dot  { display: none; }
  /* ⚠️ Die Kugel wird ANGEHALTEN, nicht abgeschaltet. Ohne Animation stünden
     alle acht Längengrade als volle Kreise übereinander — das liest sich als
     Zwiebel, nicht als Kugel. Angehalten hält jeder seine Verzögerung und damit
     seine Phase: das Standbild der Drehung. */
  .ta-sphere .sp-mer { animation-play-state: paused; }
  .ta-field-ring rect { transition: none; }
}