/* sign.it apex — auth00.co. Dark only (operator order). Tokens from the hosted sign.it login (/v3). */
:root{
  /* ---- aus dem Directus, nicht von Hand: bin/token-setzen.py ---- */
  --ink:#050409;
  --magenta:#C81EBD;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --display:'Space Grotesk','Inter',system-ui,sans-serif;
  --logo:Saira;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  /* ---- Ende Directus ---- */
  --ink-card:#15131F;--ink-soft:#0F0D1A;
  --paper:#F2F1F5;--paper-soft:rgba(242,241,245,.78);--paper-dim:rgba(242,241,245,.64);
  --line:rgba(242,241,245,.08);--line-strong:rgba(242,241,245,.16);
  --magenta-electric:#FF3FE5;--teal:#1FE0E0;--lime:#C6FB50;--lavender:#A49CF2;--blue:#1F6BE0;
  --on-accent:#FFFFFF;--focus:var(--teal);
  --serif:'Source Serif 4',Georgia,serif;
  /* Hausmass wie SSR/ZZ: Buehne 1440, Aussenrand 24 bis 96 px in EINER Formel.
     Damit stehen Kopf, Inhalt und Fuss auf derselben Kante wie auf den anderen Haus-Seiten. */
  --container-max:90rem;--pad-x:clamp(1.5rem,5vw,6rem);--section-y:4rem;--kopf-hoehe:5.5rem;
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.5rem;--space-6:2rem;--space-7:3rem;--space-8:4rem;
  /* auth00 ist RUND (AUTH00-DESIGN.md Abschnitt 2). Keine Schnittecke, kein Polygon --
     das ist die Formsprache von OKTOGEN und darf hier nicht auftauchen. */
  --r-s:.75rem;--r-m:1.25rem;--r-l:2rem;--r-pill:999px;
  --radius-1:var(--r-s);--radius-2:var(--r-m);
  --shadow-1:0 24px 80px rgba(0,0,0,.6);
  --t-schnell:160ms;--t-ruhig:420ms;--ease:cubic-bezier(.22,.61,.36,1);
  /* Zustandsfarben. Sie gehoeren in die Token-Reihe und nicht in ein Bauteil:
     ein Zustand hat EINE Farbe im ganzen Haus, sonst heisst gruen auf zwei
     Seiten zweierlei (R30). "Nicht messbar" ist ein eigener Zustand und darf nie
     aussehen wie Ruhe -- deshalb hat er eine eigene Marke, keine Abstufung. */
  --gut:#3DDC84;--gestoert:#F1C40F;--aus:#FF6B6B;--unbekannt:var(--paper-dim);
  /* Flaechen und Kanten als Token, damit kein Bauteil ein Farbliteral traegt. */
  --flaeche-karte:rgba(21,19,31,.5);--flaeche-hoch:rgba(21,19,31,.6);
  --flaeche-hover:rgba(242,241,245,.06);
  --schein-akzent:rgba(200,30,189,.18);
}
@media (min-width:640px){:root{--section-y:5rem}}
@media (min-width:1024px){:root{--section-y:6rem}}

/* ================================================================= Navigation
   DIE EINE WEICHE zwischen Schreibtisch-Reihe und App-Schublade.
   Operator 2026-09-02: "du musst zuerst unterscheiden zu mobil und desktop!
   derzeit hast du mobil und desktop keine erkennung."

   Gemessen war der Befund: die alte Weiche war `max-width:39.99rem`, also die
   BREITE allein. Bei 834 px mit grobem Zeiger (Tablett, Telefon quer) stand
   deshalb die Schreibtisch-Fassung samt Fuss und ohne Hamburger.

   Drei Bedingungen, jede mit Grund:
   - `max-width:39.99rem`  — ein schmales Fenster bekommt die App-Fassung auch
                             mit Maus; darunter passt keine Wegeleiste.
   - `hover:none` UND `pointer:coarse` — beides zusammen heisst "nur Finger".
                             `pointer:coarse` allein faengt das Notebook mit
                             Tastschirm mit, das eine Maus hat.
   - `max-width:79.99rem`  — Tablett hochkant (bis 1280 px) bekommt die
                             App-Fassung, das grosse Tablett quer nicht: dort
                             ist Platz fuer die Reihe.

   R6 (Mobile-First) verlangt fuer jede max-width-Weiche eine Begruendung:
   die Grundfassung dieses Auftritts IST die breite Reihe; die Schublade ist
   die benannte Ausnahme, nicht die Voreinstellung.

   `--nav` ist die Aussage des Stylesheets. schublade.js setzt daneben
   `data-nav` aus DEMSELBEN Abfragetext. bin/wache-nav.mjs misst an vier
   Lagen, dass beide dasselbe sagen — zwei Kopien, die eine Wache vergleicht,
   laufen nicht auseinander. */
:root{--nav:0}
@media (max-width:39.99rem), (hover:none) and (pointer:coarse) and (max-width:79.99rem){
  :root{--nav:1}
}

*{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;background:var(--ink);color:var(--paper);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;
  /* DER FUSS BLEIBT UNTEN (Operator 2026-08-28: "footer darf nie nach oben,
     er muss immer fix sein auf allen seiten"). Anlass war /callback/ im
     Fehlerfall: die Seite war kuerzer als das Fenster, der Fuss klebte damit
     mitten im Bild und darunter stand leerer Grund. Das ist keine Eigenheit
     dieser einen Seite, sondern die Voreinstellung des Flusslayouts -- deshalb
     steht die Gegenmassnahme hier an der Wurzel und nicht in der Seite (R33).
     100svh statt 100vh: auf dem Telefon zaehlt die sichtbare, nicht die
     ideelle Hoehe, sonst schiebt die Adressleiste den Fuss aus dem Bild. */
  min-height:100svh;display:flex;flex-direction:column}
/* Der Fuss schiebt sich selbst nach unten. Der Inhalt darueber behaelt seine
   eigene Hoehe -- eine gedehnte Mitte wuerde kurze Seiten auseinanderziehen. */
body > footer.site{margin-block-start:auto}
a{color:var(--teal)}
:focus-visible{outline:2px solid var(--paper);outline-offset:2px;box-shadow:0 0 0 4px rgba(5,4,9,.92)}
.wrap{max-width:var(--container-max);margin-inline:auto;padding-inline:var(--pad-x);min-width:0}
/* min-width:0 ist kein Schmuck: liegt die Kante in einem Raster, waechst sie sonst auf die
   Mindestbreite ihres breitesten Kindes -- gemessen 626 px bei 360 px Fenster (R7/R135). */
h1,h2,h3{text-wrap:balance;margin:0}
p{text-wrap:pretty}

/* Aurora + raster (as on the hosted login) */
/* KEINE eigene Deckfarbe: .aurora liegt als spaeterer Nachbar UEBER .raster und
   hat mit `background:var(--ink)` die Textur vollstaendig zugedeckt -- der Schalter
   war damit eine Attrappe. Den Grund traegt jetzt der Koerper, hier steht nur Licht. */
.aurora{position:fixed;inset:0;z-index:-1;overflow:hidden;background:transparent}
.aurora::before,.aurora::after{content:"";position:absolute;width:60vmax;height:60vmax;border-radius:50%;filter:blur(90px);opacity:.34}
.aurora::before{background:var(--magenta);top:-25vmax;left:-15vmax}
.aurora::after{background:var(--blue);bottom:-30vmax;right:-20vmax}
/* Die Textur muss man SEHEN, sonst ist der Schalter eine Attrappe (Operator
   2026-08-24: "motion geht nicht on off, grid texture auch nicht"). Gemessen war
   beides korrekt umgeschaltet -- 7 % Deckung auf fast schwarzem Grund und ein
   Verlauf, der ab 70 % ohnehin ausblendet, sind aber unsichtbar. Wer den
   Mechanismus misst statt der Wirkung, meldet gruen und der Operator sieht nichts. */
/* Punktgroesse und Abstand sind gemessene Werte, keine Geschmacksfrage: ein 1-px-Punkt
   alle 22 px deckt 0,2 % der Flaeche -- das ist unter jeder Wahrnehmungsschwelle und war
   der Grund, warum der Schalter 'nicht ging'. 1,5 px alle 18 px decken 2,2 %. */
/* DAS MUSTER IST DIE MARKE (Operator 2026-09-01: "kannst du aus dem icon logo
   ein pattern muster machen, damit wir nicht kopiert werden koennen mit einem
   screenshot und jeder erkennt und wir auch welches system es ist, statt die
   einfachen dots").
   Die Kachel ist ABGELEITET, nicht gezeichnet: assets/auth00-muster-kachel.png
   entsteht mechanisch aus assets/auth00-zeichen-weiss.png (Verkleinerung auf
   70 px, Deckkraft 76/255, zwei versetzte Zeichen je 128er Kachel). Befehl und
   Pruefsumme stehen in assets/marken-register.json -- ein Muster ohne Eintrag
   dort waere eine Erfindung (AUTH00-DESIGN Abschnitt 1).
   Die Staerke ist GEEICHT, nicht geschaetzt: das Punktraster deckte 2,2 % der
   Flaeche bei 0,30 Deckkraft, also 0,66 % Tinte -- und war damit nach dem
   eigenen Befund von oben grenzwertig. Die Kachel traegt gemessene 1,32 %, das
   Doppelte: das Zeichen soll ERKANNT werden ("jeder erkennt, welches System es
   ist"), nicht nur vorhanden sein. Weiter hoch geht es nicht ohne Rechnung --
   ab hier faengt das Muster an, gegen den Text zu arbeiten (R5). */
/* KORREKTUR 2026-09-01 (Operator): "ich wollte die muster vom auth00 logo icon
   so klein haben wie die punkte, das soll auf dem ersten block gar nicht zu
   erkennen sein."
   Zwei Aenderungen, beide gemessen:
   1. FEINE KACHEL. auth00-muster-fein.png -- 36er Kachel, Zeichen 14 px,
      Alphakanal 21/255. Gemessene Tinte 0,648 % gegen 0,654 % des
      Punktrasters: dieselbe Gewichtung wie die Punkte, nicht das Doppelte.
      Ableitung und Pruefsumme in assets/marken-register.json.
   2. DER ERSTE BLOCK BLEIBT FREI. Die Flaeche liegt nicht mehr fest am
      Fenster (position:fixed), sondern ueber dem DOKUMENT -- nur so kann die
      Blende zwischen erstem Block und Rest unterscheiden. Sie beginnt bei
      100vh, ist bei 140vh voll da. Im ersten Bild ist damit NICHTS zu sehen,
      auch nicht bei staerke 100. */
.raster{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;
  background-image:url("/assets/auth00-muster-fein.png");
  background-size:36px 36px;
  /* HIER LAG DER EIGENTLICHE FEHLER (Operator 2026-09-02: "texture ist
     fehlerhaft! ich sehe keine anpassungen").
     Hier stand eine Maske:
       linear-gradient(180deg, transparent 0, transparent 100vh,
                       rgba(0,0,0,.95) 140vh, rgba(0,0,0,.7) 100%)
     Ihre Haltepunkte sind in vh, die Flaeche ist aber so hoch wie das
     DOKUMENT. Das erste volle Fenster war damit vollstaendig ausmaskiert --
     die Textur begann erst unterhalb des ersten Bildschirms.
     Gemessen mit einer Fehlprobe: das Raster leuchtend rot gefaerbt, Bild
     davor und danach byte-identisch. Es wurde nicht gemalt. Die Aurora
     danebengehalten, gruen gefaerbt: Bild aendert sich. Also nicht die
     Schichtreihenfolge, nicht die Deckkraft, nicht der Schalter -- die Maske.
     Auf /verify/ und /seal/ (ein Bildschirm hoch) blieb sie deshalb IMMER
     unsichtbar, auf langen Seiten auf dem ersten Bildschirm.
     Die Maske ist ersatzlos weg: die Staerke regelt der Regler
     (`--textur-staerke`, Abschnitt Hintergrund). Zwei Dimmer fuer eine
     Groesse sind einer zu viel -- der zweite war unsichtbar und hat den
     ersten ueberstimmt (R33). */
  background-position:0 0}
/* Bezugsrahmen der Flaeche: ohne dies waere height:100% die Fensterhoehe, nicht
   die Dokumenthoehe -- die Textur endete dann am ersten Bildschirmrand. */
body{position:relative}
@media (prefers-reduced-motion:no-preference){
  .aurora::before{animation:drift 22s ease-in-out infinite alternate}
  .aurora::after{animation:drift-2 26s ease-in-out infinite alternate-reverse}
  /* Weg UND Groesse aendern sich: eine reine Verschiebung um 8vmax ist bei einem
     90-px-Weichzeichner nicht wahrnehmbar, ein atmender Koerper schon. */
  @keyframes drift{to{transform:translate(18vmax,12vmax) scale(1.18)}}
  @keyframes drift-2{to{transform:translate(-16vmax,-10vmax) scale(1.22)}}
}

/* Wordmark = sign.it logo (same construction as the hosted login) */
.wm{font-size:1.5rem;letter-spacing:-.02em;display:inline-flex;align-items:baseline;text-decoration:none;color:var(--paper)}
.wm-sign{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--paper)}
.wm-dot{font-family:var(--serif);font-style:italic;color:var(--teal)}
.wm-it{font-family:var(--sans);font-weight:800;color:var(--paper)}

/* Sections */
.slide{min-height:calc(100svh - var(--kopf-hoehe));display:grid;align-items:center;padding-block:var(--section-y)}
.slide .wrap{width:100%}
.hero-grid{display:grid;gap:var(--space-7);align-items:center}
@media (min-width:1024px){.hero-grid{grid-template-columns:1.1fr .9fr}}
.kicker{color:var(--paper-dim);font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:var(--space-3)}
h1,.h1{font-family:var(--display);font-weight:300;font-size:clamp(2.3rem,6vw,3.9rem);line-height:1.04;letter-spacing:-.025em}
.grad{background:linear-gradient(100deg,var(--lavender),var(--teal) 60%,var(--magenta-electric));-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{color:var(--paper-soft);font-size:1.0625rem;margin-top:var(--space-4);max-width:34rem}
.h2{font-family:var(--display);font-weight:300;font-size:clamp(1.9rem,4.5vw,3rem);line-height:1.08;letter-spacing:-.02em}

/* Cut-corner card */
.card{background:var(--ink-card);border:1px solid var(--line);box-shadow:var(--shadow-1);padding:var(--space-6);border-radius:var(--r-l);
  border-radius:var(--r-m);font-size:1.375rem;font-weight:500}
.card .sub{color:var(--paper-soft);font-size:.9375rem;margin-top:var(--space-1)}
.field{display:grid;gap:var(--space-2);margin-top:var(--space-5)}
.field label{font-size:.875rem;color:var(--paper-soft)}
.input{width:100%;font:inherit;color:var(--paper);background:var(--ink-soft);border:1px solid var(--line-strong);border-radius:var(--r-pill);padding:.8rem var(--space-5);min-height:3rem;transition:border-color var(--t-schnell) var(--ease)}
.input:focus{border-color:var(--paper-dim)}
.input::placeholder{color:var(--paper-dim)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);width:100%;min-height:3rem;padding:.75rem var(--space-5);font:inherit;font-weight:600;font-size:.9375rem;border-radius:var(--r-pill);transition:background var(--t-schnell) var(--ease),border-color var(--t-schnell) var(--ease),transform var(--t-schnell) var(--ease);border:1px solid transparent;cursor:pointer;white-space:nowrap;text-decoration:none}
.btn[disabled]{opacity:.6;cursor:progress}
.btn-primary{background:var(--magenta);color:var(--on-accent)}
.btn-primary:hover{background:var(--magenta-electric)}
.btn-ghost{background:transparent;color:var(--paper);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--paper-soft)}
.btn svg{width:1.125rem;height:1.125rem;flex:none}
.stack{display:grid;gap:var(--space-3);margin-top:var(--space-4)}
.row-2{display:grid;gap:var(--space-3);margin-top:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(10rem,1fr))}
.divider{display:flex;align-items:center;gap:var(--space-3);color:var(--paper-dim);font-size:.8125rem;margin-top:var(--space-5)}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.hint{color:var(--paper-dim);font-size:.8125rem;margin-top:var(--space-4)}
.hint.err{color:var(--paper)}

/* Tiles */
.grid-3{display:grid;gap:var(--space-4);margin-top:var(--space-6);grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.tile{background:rgba(21,19,31,.85);border:1px solid var(--line);padding:var(--space-5);
  border-radius:var(--r-m);color:var(--teal);font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase}
.tile h3{font-size:1.125rem;margin-top:var(--space-2);font-weight:600}
.tile p{color:var(--paper-soft);font-size:.9375rem;margin:var(--space-2) 0 0}
.code{font-family:var(--mono);font-size:.9375rem;background:var(--ink-soft);border:1px solid var(--line-strong);border-radius:var(--radius-1);padding:var(--space-3) var(--space-4);display:inline-block;margin-top:var(--space-4);word-break:break-all;color:var(--paper)}
.steps{display:grid;gap:var(--space-3);margin-top:var(--space-6);counter-reset:s}
.step{display:grid;grid-template-columns:2.5rem 1fr;gap:var(--space-3);align-items:start;padding:var(--space-4) 0;border-top:1px solid var(--line)}
.step::before{counter-increment:s;content:counter(s,decimal-leading-zero);font-family:var(--mono);color:var(--magenta-electric);font-size:.875rem;padding-top:.2rem}
.step h3{font-size:1.0625rem;font-weight:600}
.step p{color:var(--paper-soft);font-size:.9375rem;margin:var(--space-1) 0 0}
.cta-row{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-6)}
.cta-row .btn{width:auto}


/* ---------------------------------------------------------------- Seal + Verify doors
   Same tokens as the login screen; no new colours, no new spacing values. */
.door{padding-block:var(--space-8) var(--section-y)}
.door .wrap{width:100%}
.door-head{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:baseline;justify-content:space-between;margin-bottom:var(--space-6)}
.door-head .who{color:var(--paper-dim);font-family:var(--mono);font-size:.8125rem;word-break:break-all}
.door h1{font-size:clamp(1.9rem,4.5vw,3rem)}
.cols{display:grid;gap:var(--space-5);align-items:start}
@media (min-width:1024px){.cols{grid-template-columns:.95fr 1.05fr}}

.drop{display:grid;gap:var(--space-2);justify-items:center;text-align:center;padding:var(--space-7) var(--space-4);
  background:var(--ink-soft);border:1px dashed var(--line-strong);border-radius:var(--radius-2);color:var(--paper-soft)}
.drop.over{border-color:var(--teal);color:var(--paper)}
.drop .big{font-size:1.0625rem;color:var(--paper)}
.drop .small{font-size:.8125rem;color:var(--paper-dim)}
.drop .btn{width:auto;margin-top:var(--space-3)}

.kv{display:grid;gap:var(--space-2);margin-top:var(--space-5)}
.kv div{display:grid;grid-template-columns:8.5rem 1fr;gap:var(--space-3);font-size:.875rem;align-items:baseline}
.kv dt,.kv .k{color:var(--paper-dim);font-family:var(--mono);font-size:.8125rem;letter-spacing:.04em}
.kv .v{color:var(--paper);overflow-wrap:anywhere}
@media (max-width:39.99em){.kv div{grid-template-columns:1fr}}

.hashline{font-family:var(--mono);font-size:.8125rem;color:var(--paper);background:var(--ink-soft);border:1px solid var(--line-strong);
  border-radius:var(--radius-1);padding:var(--space-3) var(--space-4);overflow-wrap:anywhere;margin-top:var(--space-4)}

.badge{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;
  text-transform:uppercase;padding:.25rem var(--space-3);border-radius:var(--r-pill);border:1px solid var(--line-strong);color:var(--paper)}
.badge::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--paper-dim)}
.badge-sealed{border-color:rgba(198,251,80,.45)}
.badge-sealed::before{background:var(--lime)}
.badge-sealing{border-color:rgba(31,224,224,.45)}
.badge-sealing::before{background:var(--teal)}
.badge-open{border-color:rgba(164,156,242,.45)}
.badge-open::before{background:var(--lavender)}
.badge-unknown{border-color:var(--line-strong)}
.badge-unknown::before{background:var(--paper-dim)}
.badge-alert{border-color:rgba(255,63,229,.6)}
.badge-alert::before{background:var(--magenta-electric)}

.assets{display:grid;gap:var(--space-3);margin-top:var(--space-5)}
.asset{background:rgba(21,19,31,.85);border:1px solid var(--line);padding:var(--space-5);
  border-radius:var(--r-m);flex-wrap:wrap;gap:var(--space-3);align-items:center;justify-content:space-between}
.asset-name{font-weight:600;overflow-wrap:anywhere}
.asset .hash{font-family:var(--mono);font-size:.75rem;color:var(--paper-dim);overflow-wrap:anywhere;margin-top:var(--space-1)}
.rails{display:grid;gap:var(--space-2);margin-top:var(--space-4);border-top:1px solid var(--line);padding-top:var(--space-4)}
.rail{display:grid;grid-template-columns:6.5rem 1fr auto;gap:var(--space-3);align-items:baseline;font-size:.875rem}
.rail .name{font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--teal)}
.rail .says{color:var(--paper-soft)}
.rail .state{font-family:var(--mono);font-size:.75rem;color:var(--paper-dim);white-space:nowrap}
@media (max-width:39.99em){.rail{grid-template-columns:1fr;gap:var(--space-1)}}
.asset-acts{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-4)}
.asset-acts .btn{width:auto;min-height:2.5rem;font-size:.875rem}

.note{color:var(--paper-dim);font-size:.8125rem;margin-top:var(--space-4)}
.msg{margin-top:var(--space-4);padding:var(--space-4);border:1px solid var(--line-strong);border-radius:var(--radius-1);
  background:var(--ink-soft);color:var(--paper);font-size:.9375rem}
.msg .code-tag{display:block;font-family:var(--mono);font-size:.75rem;color:var(--paper-dim);margin-top:var(--space-2)}
.msg-err{border-color:rgba(255,63,229,.5)}

.skel{background:rgba(21,19,31,.85);border:1px solid var(--line);padding:var(--space-5);min-height:8.5rem;
  border-radius:var(--r-m);height:.75rem;border-radius:var(--radius-1);background:var(--line-strong);margin-bottom:var(--space-3)}
.skel span:nth-child(1){width:45%}.skel span:nth-child(2){width:80%}.skel span:nth-child(3){width:60%}
.skel span:nth-child(4){width:70%}
@media (prefers-reduced-motion:no-preference){.skel span{animation:pulse 1.6s ease-in-out infinite}@keyframes pulse{50%{opacity:.45}}}

.doorbar{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center;justify-content:space-between;margin-bottom:var(--space-6)}
.doorbar a{color:var(--paper-soft);text-decoration:none;font-size:.875rem}
.doorbar a:hover{color:var(--paper)}

/* R74: gestalterischer Umbruch nur oberhalb der Breite, fuer die er gesetzt wurde. */
.br-wide{display:none}
@media (min-width:640px){.br-wide{display:inline}}
/* R28b: auch kleine Textlinks tragen eine Trefferflaeche von mindestens 24 px Hoehe. */
.doorbar a{display:inline-flex;align-items:center;min-height:1.75rem}

/* `hidden` schlaegt jede Anzeige-Regel. Eine Klasse mit display:inline-flex ist
   staerker als die Vorgabe des Browsers — dann steht ein verstecktes Element
   sichtbar da, und im Quelltext sieht alles richtig aus. */
[hidden]{display:none !important}

/* ---------------------------------------------------------------- Gespraechs-Bauform
   Vorlage: die Startseite, mit der wir selbst arbeiten (inbox/verify1.png, verify2.png).
   EIN Eingabefenster, ein Plus fuer alles Weitere, darueber der Verlauf — kein Formular,
   kein Ablagekasten, keine Knopfreihe. */
/* Feste Hoehe wie ein Gespraechsfenster: der VERLAUF rollt, der Kopf und das
   Eingabefenster stehen. Waechst stattdessen die Seite, klebt das Eingabefenster
   ueber dem letzten Eintrag — das hat die Messung gefunden. */
.gespraech{height:100svh;max-height:100svh;overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding-block:var(--space-5) var(--space-6)}
/* Ein Gespraech hat eine Lesebreite, keine Bildschirmbreite: der Verlauf und das
   Eingabefenster stehen in einer Spalte, nicht ueber die ganze Buehne. */
.gespraech > *{width:100%;max-width:48rem;margin-inline:auto}
.g-kopf{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}
/* Die Wege im Kopf standen mit ` ` auseinander -- ein Abstand aus einem
   Zeichen, nicht aus der Skala (R14). Und in der Schublade wurden aus denselben
   Zeichen leere Textzeilen: 155 px Luft zwischen zwei Eintraegen, gemessen im
   Schnappschuss. Jetzt traegt die Reihe den Abstand. */
.g-kopf > span{display:inline-flex;align-items:center;gap:var(--space-4);flex-wrap:wrap}
.g-kopf a{color:var(--paper-soft);text-decoration:none;font-size:.875rem;display:inline-flex;align-items:center;min-height:1.75rem}
.g-kopf a:hover{color:var(--paper)}

/* Leerzustand: Zeichen + eine Frage, mittig, sonst nichts */
.g-leer{display:grid;justify-items:center;align-content:center;gap:var(--space-4);text-align:center;padding-block:var(--space-7)}
/* Das Zeichen im Leerzustand hat die Groesse des MUSTERZEICHENS, nicht die
   einer Ueberschrift (Operator 2026-09-01: "im verify Bereich will ich diese
   kleinen wie die dots haben als Icon, wenn du das kannst, in der Groesse").
   Gemessen: das Zeichen der feinen Kachel ist 14 px, hier stehen 16 px -- die
   naechste Stufe darueber, damit es als Zeichen und nicht als Schmutz gelesen
   wird. Es ist DASSELBE Bild wie im Muster, keine zweite Datei. */
.g-zeichen{width:1rem;height:1rem}
.g-frage{font-family:var(--display);font-weight:400;font-size:clamp(1.75rem,4.5vw,2.75rem);line-height:1.15;letter-spacing:-.01em}
.g-unterzeile{color:var(--paper-dim);font-size:.9375rem;max-width:34rem}

/* Verlauf */
.g-verlauf{display:grid;gap:var(--space-5);align-content:start;padding-block:var(--space-5);overflow-y:auto}
.g-ich{justify-self:end;max-width:min(42rem,100%);background:var(--ink-card);border:1px solid var(--line);
  border-radius:1.125rem;padding:var(--space-3) var(--space-4);font-size:.9375rem;overflow-wrap:anywhere}
/* EINE KANTE FUER JEDES GESPRAECHS-BAUTEIL (R3, Operator 2026-09-01: "alle
   Container im Chat sollten dieselbe Breite haben").
   Gemessen am ausgelieferten Stand bei 390 px: der Kopf, der Verlauf, die
   eigene Sprechblase, das Eingabefenster und der Fuss standen bei 24, die
   Antwort des Registers bei 64 und die Siegelkarte darin bei 81 — drei Kanten
   in einer Spalte. Die 40 px Versatz kamen aus der Zeichen-Spalte des
   Antwortblocks.
   Mobil steht das Zeichen deshalb UEBER der Antwort statt daneben; ab 640 px
   ist Platz fuer die Spalte, und dort bleibt sie. Genau so loesen es die
   Gespraechs-Oberflaechen, an denen sich der Operator orientiert. */
.g-du{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-2);align-items:start;max-width:100%}
.g-du .g-marke{width:1.25rem;height:1.25rem}
@media (min-width:40rem){
  .g-du{grid-template-columns:1.75rem 1fr;gap:var(--space-3);max-width:min(52rem,100%)}
  .g-du .g-marke{width:1.5rem;height:1.5rem;margin-top:.125rem}
}
.g-sagt{display:grid;gap:var(--space-3);font-size:.9375rem;color:var(--paper)}
.g-sagt .g-erst{color:var(--paper)}
.g-sagt .g-hash{font-family:var(--mono);font-size:.75rem;color:var(--paper-dim);overflow-wrap:anywhere}
.g-tippt{display:inline-flex;gap:.3rem;align-items:center;color:var(--paper-dim);font-size:.875rem}
.g-tippt i{width:.35rem;height:.35rem;border-radius:50%;background:var(--paper-dim);display:inline-block}
@media (prefers-reduced-motion:no-preference){
  .g-tippt i{animation:tipp 1.2s ease-in-out infinite}
  .g-tippt i:nth-child(2){animation-delay:.15s}.g-tippt i:nth-child(3){animation-delay:.3s}
  @keyframes tipp{50%{opacity:.25;transform:translateY(-.15rem)}}
}

/* Composer */
.g-eingabe{padding-top:var(--space-4)}
.g-feld{background:var(--ink-card);border:1px solid var(--line-strong);border-radius:1.25rem;padding:var(--space-4);
  display:grid;gap:var(--space-3);box-shadow:var(--shadow-1)}
.g-feld:focus-within{border-color:var(--paper-dim)}
/* Operator 2026-08-28: "kasten im eingabefenster entfernen, nicht noetig".
   Der Kasten kam nicht von diesem Bauteil, sondern von der globalen
   Fokusregel weiter oben: :focus-visible legt 2 px Umriss PLUS einen 4 px
   Ring in Fast-Schwarz um das Element. Um ein randloses Textfeld in einem
   ohnehin gerahmten Feld zeichnete das einen zweiten, scharfkantigen
   Kasten mitten in die Flaeche.
   Regel des Hauses ab hier: wer in einer gerahmten Gruppe steht, zeichnet
   keinen eigenen Fokuskasten — die GRUPPE zeigt den Fokus (:focus-within,
   Zeile darueber). Damit bleibt der Fokus sichtbar (WCAG 2.4.7) und steht
   einmal statt zweimal. */
.g-feld textarea:focus,
.g-feld textarea:focus-visible{outline:none;box-shadow:none}
.g-feld textarea{width:100%;resize:none;border:0;background:transparent;color:var(--paper);font:inherit;font-size:1rem;
  line-height:1.5;min-height:2.75rem;max-height:9rem;outline:none;padding:0}
.g-feld textarea::placeholder{color:var(--paper-dim)}
.g-werkzeuge{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}
.g-rund{width:2.25rem;height:2.25rem;min-height:2.25rem;padding:0;border-radius:50%;display:inline-flex;align-items:center;
  justify-content:center;background:transparent;border:1px solid var(--line-strong);color:var(--paper);cursor:pointer}
.g-rund:hover{border-color:var(--paper-soft)}
.g-rund svg{width:1.125rem;height:1.125rem}
.g-pillen{display:inline-flex;gap:.25rem;background:var(--ink-soft);border:1px solid var(--line);border-radius:.75rem;padding:.2rem}
.g-pille{border:0;background:transparent;color:var(--paper-dim);font:inherit;font-size:.875rem;font-weight:500;
  padding:.35rem .75rem;border-radius:.55rem;cursor:pointer;white-space:nowrap;min-height:2rem}
.g-pille[aria-pressed="true"]{background:var(--ink-card);color:var(--paper)}
.g-senden{margin-left:auto;width:2.25rem;height:2.25rem;min-height:2.25rem;padding:0;border-radius:50%;background:var(--paper);
  color:var(--ink);border:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.g-senden[disabled]{background:var(--line-strong);color:var(--paper-dim);cursor:not-allowed}
.g-senden svg{width:1.125rem;height:1.125rem}
.g-fuss{color:var(--paper-dim);font-size:.75rem;margin-top:var(--space-3);text-align:center}

/* Plus-Menue */
.g-menue{position:relative}
.g-panel{position:absolute;bottom:calc(100% + .5rem);left:0;min-width:15rem;background:var(--ink-card);
  border:1px solid var(--line-strong);border-radius:.9rem;box-shadow:var(--shadow-1);padding:.35rem;z-index:5}
.g-panel button{display:flex;align-items:center;gap:var(--space-3);width:100%;background:transparent;border:0;color:var(--paper);
  font:inherit;font-size:.9375rem;text-align:left;padding:.55rem .6rem;border-radius:.55rem;cursor:pointer;min-height:2.5rem}
.g-panel button:hover{background:var(--ink-soft)}
.g-panel svg{width:1.0625rem;height:1.0625rem;flex:none;color:var(--paper-soft)}
.g-panel .g-kuerzel{margin-left:auto;color:var(--paper-dim);font-family:var(--mono);font-size:.75rem}
.g-trenn{height:1px;background:var(--line);margin:.35rem .3rem}

/* Ergebnis im Verlauf: dieselben Schienen, aber als Antwort und nicht als Tabelle */
.g-ergebnis{border:1px solid var(--line);border-radius:1rem;padding:var(--space-4);background:rgba(21,19,31,.7)}
.g-ergebnis .rails{border-top:1px solid var(--line);margin-top:var(--space-3);padding-top:var(--space-3)}
.g-ergebnis .asset-acts{margin-top:var(--space-3)}

/* Nur fuer die Sprachausgabe sichtbar (Beschriftungen, die im Bild der Composer traegt). */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* Kopf UND Fuss stehen am Rand der Buehne, nicht in der Lesespalte -- sonst
   haetten sie eine andere Kante als der Kopf und der Rest der Seite (R3). */
.gespraech > .g-kopf,.gespraech > footer.site{max-width:none}
/* Der Gespraechsrahmen traegt sein Aussenmass schon selbst (.wrap): der Fuss
   darf es innen nicht ein zweites Mal aufschlagen. */
.gespraech > footer.site{padding-block:var(--space-4) 0}
.gespraech > footer.site .wrap{padding-inline:0;max-width:none}
/* Ein Grid-Kind mit eigenem Rollbalken braucht min-height:0 — sonst waechst der
   Verlauf ueber seine Zeile hinaus und das Eingabefenster legt sich darueber. */
.g-verlauf{min-height:0;padding-block-end:var(--space-5)}

/* Kontrast am AUSGELIEFERTEN Stand gemessen (nicht an der Datei): der gedaempfte
   Ton hielt 3.67:1 und der Fusstext lag mit 12 px unter dem Schriftboden. */
.g-fuss{font-size:.875rem}
.g-pille{color:var(--paper-soft)}
.g-kuerzel{color:var(--paper-soft)}

/* ---------------------------------------------------------------- Marke im Kopf
   Im Kopf steht die MARKE AUTH.00, nie die Domain mit `.co` -- die Domain steht
   im Fuss (AUTH00-DESIGN Abschnitt 1). Das Produktzeichen bleibt in der
   Antwortzeile.
   Die Groesse stand hier ein zweites Mal (1.25rem / ab 640 px 1.5rem) und wurde
   weiter unten von der gueltigen Regel (1.5rem / 1.75rem) ueberschrieben. Zwei
   Regeln fuer dieselbe Groesse sind keine Gestaltung, sondern ein Zufall, der
   von der Reihenfolge abhaengt (R29/R33) -- die schwaechere faellt weg. */
.g-logo{display:inline-flex;align-items:center;min-height:2rem}

/* Anhaenge im Verlauf: feste Groesse, mehrere sitzen symmetrisch im Raster. */
/* Feste Kachelgroesse statt Streckung: eine, zwei oder drei Kacheln sind immer
   gleich gross und stehen im selben Raster — sonst haengt die Groesse an der
   Breite der Sprechblase. */
.g-anhaenge{--kachel:clamp(7rem,26vw,11rem);display:grid;gap:var(--space-2);
  grid-template-columns:repeat(auto-fit,var(--kachel));justify-content:end;margin-top:var(--space-2)}
.g-anhang{position:relative;aspect-ratio:4/3;border-radius:.75rem;overflow:hidden;background:var(--ink-soft);
  border:1px solid var(--line-strong);display:grid;place-items:center}
.g-anhang img{width:100%;height:100%;object-fit:cover;display:block}
/* Ein Bild, das man gross sehen kann, muss auch so aussehen: die Lupe fuellt
   die Kachel und traegt den Zeiger. Ohne sichtbaren Hinweis ist ein klickbares
   Bild dasselbe wie ein nicht klickbares (Operator 2026-09-01). */
.g-anhang-lupe{display:block;width:100%;height:100%;cursor:zoom-in}
.g-anhang-lupe:focus-visible{outline:2px solid var(--paper);outline-offset:-2px}
.g-anhang .g-typ{position:absolute;inset-inline:0;bottom:0;background:linear-gradient(180deg,transparent,rgba(5,4,9,.85));
  color:var(--paper);font-family:var(--mono);font-size:.6875rem;letter-spacing:.04em;padding:.6rem .5rem .4rem;
  text-transform:uppercase;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g-anhang .g-sinnbild{width:2.5rem;height:2.5rem;color:var(--paper-soft)}
.g-verlauf > .g-anhaenge{margin-top:calc(var(--space-2) * -1)}

/* Das Siegel als Objekt: Marke, Zustand, Zeitpunkt — das, was am Ende "drauf" ist. */
/* Die Siegelkarte war eine Reihe aus vier Teilen (Zeichen, Zustand, Wortmarke,
   Zeitpunkt). Bei 390 px blieben ihr 268 px, und die Reihe wurde gequetscht
   statt gestapelt (R7) — im Bild des Operators stand "Sealed and" und das
   Datum abgeschnitten nebeneinander.
   Mobil ist sie deshalb ein Stapel: Zeichen und Zustand oben, Wortmarke und
   Zeitpunkt darunter, beide linksbuendig an derselben Kante wie alles andere.
   Ab 40rem wird daraus wieder die Reihe. */
.g-siegel{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-2) var(--space-3);
  align-items:center;padding:var(--space-3) var(--space-4);
  border:1px solid var(--line-strong);border-radius:.9rem;background:linear-gradient(135deg,rgba(200,30,189,.14),rgba(31,224,224,.08));
  margin-bottom:var(--space-3)}
.g-siegel > img{grid-row:1}
.g-siegel .g-siegel-text{grid-row:1}
.g-siegel .g-siegel-marke{grid-column:1/-1;grid-row:2;justify-items:start;margin-left:0;
  padding-top:var(--space-2);border-top:1px solid var(--line)}
/* DIE KARTE HAT EINE KANTE, NICHT ZWEI. Die Siegelzeile sass mit dem
   Innenabstand der Ergebniskarte eingerueckt -- gemessen 41 px links gegen
   24 px bei allem anderen. Sie ist das Kopfband dieser Karte, kein Kasten
   darin: sie laeuft ueber die volle Kartenbreite, uebernimmt oben deren Radius
   und laesst unten die Kante als Trennlinie stehen. Der Wert -1rem ist NICHT
   geraten, er ist der Innenabstand der Karte (--space-4). */
.g-ergebnis > .g-siegel:first-child{
  /* Der Ausgleich ist Innenabstand PLUS Haarlinie: nur so liegt die Kante des
     Bandes auf der Kante der Karte. Ohne das 1px blieb ein Pixel Versatz --
     gemessen 25/365 gegen 24/366, und ein Pixel ist eine Kante zu viel. */
  margin:calc((var(--space-4) + 1px) * -1) calc((var(--space-4) + 1px) * -1) var(--space-4);
  border-inline:0;border-block-start:0;border-radius:1rem 1rem 0 0}
@media (min-width:40rem){
  .g-siegel{display:flex;align-items:center;gap:var(--space-3)}
  .g-siegel .g-siegel-marke{margin-left:auto;justify-items:end;padding-top:0;border-top:0}
}
.g-siegel img{height:.9rem;width:auto;opacity:.9}
.g-siegel .g-siegel-text{display:grid;gap:.1rem}
.g-siegel .g-siegel-zeile{font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--paper-soft)}
.g-siegel .g-siegel-stand{font-size:.9375rem;font-weight:600;color:var(--paper)}
.g-siegel-marke{margin-left:auto;display:grid;justify-items:end;gap:.15rem}

/* Angebot nach dem Siegeln */
.g-angebot{margin-top:var(--space-3);border:1px dashed var(--line-strong);border-radius:.9rem;padding:var(--space-4);
  display:grid;gap:var(--space-2)}
.g-angebot h3{font-size:1rem;font-weight:600}
.g-angebot p{color:var(--paper-soft);font-size:.9375rem;margin:0}
.g-angebot .btn{width:auto;min-height:2.5rem;font-size:.875rem;margin-top:var(--space-2)}
.g-angebot .btn{justify-self:start}
/* Ein Grid waechst sonst auf die breiteste unteilbare Zeile seines Inhalts: eine
   Knopfreihe mit white-space:nowrap zieht bei 360 px den ganzen Verlauf ueber den
   Rand. minmax(0,1fr) deckelt die Spalte auf den Behaelter. */
.g-verlauf{grid-template-columns:minmax(0,1fr)}
.g-ich,.g-du,.g-sagt,.g-ergebnis{min-width:0}

/* ================================================================ Bauteile nach AUTH00-DESIGN.md
   Kopf, Fuss, Bewegung, Ablauf, Faelle. EIN Fuss fuer jede Seite, EINE Kante
   fuer alles (.wrap), runde Formsprache. Vorher trug jede Seite ihren eigenen
   Abschluss und der Kopf trug den Cookie-Weg -- beides ist jetzt eine Stelle. */

/* --- Kopf: Logo links, Werkzeuge rechts, keine Linie, kein Hintergrund --- */
header.site{padding-block:var(--space-5);position:relative;z-index:2}
header.site .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3) var(--space-4)}
/* Bei 360 px passen Marke, zwei Wege und der Hintergrund-Schalter nicht in EINE Zeile:
   gemessen 394 px Rechtskante. Die Werkzeuge ruecken dann in die zweite Zeile, statt
   aus dem Bild zu laufen (R7: stapeln, nicht quetschen). */
header.site .marke{display:inline-flex;align-items:center;min-height:2.75rem}
/* --- DAS MASS DES LOGOS IM KOPF. EINE Regel, alle Koepfe dieser Domain. ------
   Operator 2026-09-01: "festschreiben, das Logo muss immer die selbe Groesse
   haben, ueberall." Die Hoehe stand vorher an zwei Stellen (`.g-logo img` mit
   1.25rem und `header.site .marke img` mit 1.5rem); welche galt, entschied die
   Reihenfolge im Stylesheet -- das ist Zufall, keine Gestaltung (R29/R33).
   Werte aus AUTH00-DESIGN Abschnitt 1: Kopf 1.5rem, ab 640 px 1.75rem, Fuss
   1rem. Nie groesser, auch nicht im Rechtsteil, auch nicht auf der Anmeldung.
   `max-width` ist kein Beiwerk: ohne Deckel skaliert das Bild bei 360 px auf
   seine Originalbreite (1999 px) und schiebt den Kopf aus dem Bild. */
header.site .marke img,
.g-logo img{height:1.5rem;width:auto;max-width:60vw;display:block}
@media (min-width:640px){
  header.site .marke img,
  .g-logo img{height:1.75rem}
}
header.site .werkzeuge{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--space-2);margin-left:auto}
/* `:not(.btn)` ist kein Feinschliff, sondern der Kern: ein Knopf IM Kopf bekam
   sonst die Textfarbe der Kopfzeilen-Verweise (paper-soft, 78 % Deckung) auf den
   Marken-Grund gemalt -- gemessen 3,06:1 statt der noetigen 4,5:1 (R5, P0).
   Die Kopfzeilen-Regel wiegt (0,2,2), `.btn-primary` nur (0,1,0), also gewinnt sie.
   Ohne diese Ausnahme wiederholt sich das bei JEDEM Knopf, den jemand in den Kopf
   stellt. Gefunden vom Sicht-Gate, nicht von mir. */
header.site .werkzeuge a:not(.btn){color:var(--paper-soft);text-decoration:none;font-size:.9375rem;white-space:nowrap;
  display:inline-flex;align-items:center;min-height:2.75rem;padding-inline:var(--space-3);
  border-radius:var(--r-pill);transition:color var(--t-schnell) var(--ease),background var(--t-schnell) var(--ease)}
/* Bei 390 px stehen Logo und zwei Wege nicht nebeneinander -- die Wege brachen
   auf zwei Zeilen (gemessen). Der Kopf zeigt dort nur den Weg, den die Seite
   selbst NICHT anbietet: die Anmeldung steht als Karte im Bild, die Pruefung
   nicht. */
header.site .werkzeuge a[href="/seal/"]{display:none}
@media (min-width:640px){header.site .werkzeuge a[href="/seal/"]{display:inline-flex}}
header.site .werkzeuge a:not(.btn):hover{color:var(--paper);background:var(--flaeche-hover)}

/* --- Fuss: ein Bauteil, auf jeder Seite gleich, ohne Trennlinie --- */
footer.site{padding-block:var(--space-7) var(--space-6);color:var(--paper-dim);font-size:.875rem;position:relative;z-index:2}
footer.site .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2) var(--space-5)}
footer.site .f-logo{height:1rem;width:auto;opacity:.85;display:block}
/* EIN Logo je Thema (AUTH00-DESIGN.md Abschnitt 1, R134). Der Fuss traegt
   beide Dateien, sichtbar ist immer genau eine — weiss auf hell ist kein
   Logo, sondern eine leere Flaeche.
   Diese Regel stand bis 2026-08-28 NUR im Bauer der Rechtsseiten. Auf jeder
   Seite, die styles.css laedt, standen deshalb ZWEI Fuss-Logos nebeneinander:
   das weisse und das schwarze (Operator: "im footer sind 2 logos, links hell,
   mitte schwarz, ueberfluessig in der mitte"). Ein Bauteil an zwei Orten
   gepflegt ist genau der Fall, den R33 verbietet. */
footer.site img.f-hell{display:none}
html[data-theme="light"] footer.site img.f-dunkel{display:none}
html[data-theme="light"] footer.site img.f-hell{display:block}
footer.site .f-nav{display:flex;flex-wrap:wrap;gap:var(--space-4)}
footer.site .f-nav a,footer.site .f-nav button{color:var(--paper-dim);text-decoration:none;background:none;border:0;
  font:inherit;cursor:pointer;padding:0;display:inline-flex;align-items:center;min-height:2.75rem;
  transition:color var(--t-schnell) var(--ease)}
footer.site .f-nav a:hover,footer.site .f-nav button:hover{color:var(--paper)}

/* --- Bewegung: Eintritt je Abschnitt, gestaffelt. Ohne Bewegungswunsch steht
       der ENDZUSTAND sofort da -- nicht langsamer, sondern fertig. --- */
.auf{opacity:0;transform:translateY(12px);
  transition:opacity var(--t-ruhig) var(--ease),transform var(--t-ruhig) var(--ease);transition-delay:var(--verzug,0ms)}
.auf.sichtbar{opacity:1;transform:none}
.aurora{transition:transform 600ms var(--ease);will-change:transform}
@media (prefers-reduced-motion:reduce){
  .auf{opacity:1;transform:none;transition:none}
  .aurora{transition:none;transform:none !important}
}

/* --- Ablauf: Hash, Anker, Register. Drei runde Knoten auf einer Schiene, die
       sich fuellt; der Text darunter wechselt mit. Laeuft von selbst weiter und
       haelt an, sobald jemand darauf zeigt oder mit der Tastatur hineingeht. --- */
.ablauf{margin-top:var(--space-7)}
.schiene{display:grid;grid-template-columns:1fr;gap:var(--space-2);position:relative}
.knoten{position:relative;background:none;border:0;padding:0;font:inherit;color:var(--paper-dim);cursor:pointer;
  display:flex;align-items:center;gap:var(--space-3);text-align:left;white-space:nowrap;min-height:2.75rem}
@media (min-width:640px){
  .schiene{grid-template-columns:repeat(3,1fr);gap:var(--space-3)}
  .schiene::before{content:"";position:absolute;left:1.25rem;right:calc(33.333% - 1.25rem);top:1.25rem;height:2px;background:var(--line-strong)}
  .schiene::after{content:"";position:absolute;left:1.25rem;top:1.25rem;height:2px;
    background:linear-gradient(90deg,var(--magenta),var(--teal));
    width:var(--fortschritt,0%);max-width:calc(66.667% + 1.25rem);transition:width var(--t-ruhig) var(--ease)}
  .knoten{display:grid;justify-items:start;gap:var(--space-3);align-content:start}
}
.knoten .punkt{width:2.5rem;height:2.5rem;border-radius:50%;display:grid;place-items:center;
  background:var(--ink-card);border:1px solid var(--line-strong);color:var(--paper-dim);font-family:var(--mono);font-size:.8125rem;
  transition:border-color var(--t-schnell) var(--ease),color var(--t-schnell) var(--ease),box-shadow var(--t-schnell) var(--ease)}
.knoten .wort{font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase}
.knoten[aria-selected="true"]{color:var(--paper)}
/* Kein scale() zur Betonung: der vergroesserte Kasten ragt links um gut einen
   Punkt ueber seinen Vorfahren hinaus, und genau das meldet die Messung als
   Ueberlauf. Der Ring liegt INNEN und veraendert die Aussenkante nicht. */
.knoten[aria-selected="true"] .punkt{border-color:var(--teal);color:var(--paper);
  box-shadow:inset 0 0 0 3px rgba(31,224,224,.22)}
.knoten:hover .punkt{border-color:var(--paper-soft)}
.ablauf-text{margin-top:var(--space-6);min-height:9rem;background:rgba(21,19,31,.7);border:1px solid var(--line);
  border-radius:var(--r-l);padding:var(--space-6);display:grid;gap:var(--space-3);align-content:start}
.ablauf-text h3{font-family:var(--display);font-weight:400;font-size:1.375rem}
.ablauf-text p{color:var(--paper-soft);margin:0;max-width:44rem}
.ablauf-text .marke-zeichen{width:1.5rem;height:1.5rem;opacity:.9}
.ablauf-text.wechsel{opacity:0;transform:translateY(6px)}
.ablauf-text{transition:opacity var(--t-schnell) var(--ease),transform var(--t-schnell) var(--ease)}
@media (prefers-reduced-motion:reduce){.ablauf-text,.schiene::after{transition:none}}

/* --- Faelle: aufklappbare Zeilen statt drei starrer Kaesten. Wer klickt, sagt
       uns was ihn interessiert; ein starrer Kasten sagt nichts. --- */
.faelle{display:grid;gap:var(--space-3);margin-top:var(--space-6)}
.fall{background:rgba(21,19,31,.7);border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;
  transition:border-color var(--t-schnell) var(--ease)}
.fall[open]{border-color:var(--line-strong)}
.fall summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:var(--space-4);
  padding:var(--space-5);min-height:3.5rem}
.fall summary::-webkit-details-marker{display:none}
.fall summary .lbl{font-family:var(--mono);color:var(--teal);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;flex:none}
.fall summary .titel{font-size:1.0625rem;font-weight:600;color:var(--paper)}
.fall summary .kreuz{margin-left:auto;width:1.5rem;height:1.5rem;flex:none;color:var(--paper-dim);
  transition:transform var(--t-ruhig) var(--ease)}
.fall[open] summary .kreuz{transform:rotate(45deg)}
.fall .inhalt{padding:0 var(--space-5) var(--space-5);color:var(--paper-soft);display:grid;gap:var(--space-3)}
.fall .inhalt p{margin:0;max-width:48rem}
@media (prefers-reduced-motion:reduce){.fall summary .kreuz{transition:none}}

/* --- Sprecher: wer sagt das? Die runde 0 spricht fuer das Register, das
       Bot-Zeichen fuer den Assistenten. Nie ein Warn- oder Fragezeichen. --- */
.sagt{display:grid;grid-template-columns:2.5rem 1fr;gap:var(--space-4);align-items:start}
.sagt .wer{width:2.5rem;height:2.5rem;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line-strong);background:var(--ink-card);overflow:hidden}
.sagt .wer img{width:1.5rem;height:1.5rem;display:block}
.sagt .wer svg{width:1.375rem;height:1.375rem;color:var(--paper-soft)}
.sagt .was{display:grid;gap:var(--space-2)}
.sagt .was p{margin:0;color:var(--paper-soft)}

/* ================================================================ Hintergrund-Steuerung
   AUTH00-DESIGN.md Abschnitt 7, Operator 2026-08-24. Drei Schalter: Bewegung, Textur,
   Farbsatz. Die Farbwerte setzt hintergrund.js als Token auf <html> -- hier steht kein
   Farbliteral (R30), nur wie die Token wirken. */

/* Stapel-Skala: EINE benannte Reihe statt frei gewaehlter Zahlen (R78). */
:root{--z-grund:-1;--z-inhalt:2;--z-panel:40;--z-leiste:60}

/* Texturen: eine Flaeche, fuenf Auspraegungen. Ohne Attribut gilt das Punktraster. */
html[data-textur="gitter"] .raster{
  background-image:linear-gradient(rgba(242,241,245,.14) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(242,241,245,.14) 1px,transparent 1px);
  background-size:30px 30px}
html[data-textur="diagonal"] .raster{
  background-image:repeating-linear-gradient(45deg,rgba(242,241,245,.13) 0 1px,transparent 1px 12px);
  background-size:auto}
html[data-textur="rauschen"] .raster{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23r)' opacity='.6'/%3E%3C/svg%3E");
  background-size:160px 160px}
html[data-textur="punkte"] .raster{
  background-image:radial-gradient(rgba(242,241,245,.30) 1.5px,transparent 1.6px);
  background-size:18px 18px}
/* Das Markenmuster steht ausdruecklich da, statt nur als Vorgabe der Flaeche:
   die Voreinstellung ist seit 2026-09-01 'aus' (der Nutzer stellt die Textur
   ein), also darf 'marke' nicht mehr davon abhaengen, dass kein Attribut
   gesetzt ist. */
html[data-textur="marke"] .raster{
  background-image:url("/assets/auth00-muster-fein.png");
  background-size:36px 36px}
html[data-textur="aus"] .raster{background-image:none}
/* Staerke der Textur als Regler, nicht als Schalter (Operator 2026-08-27:
   "teture will ich auch einstellen 0-100% bzw einfach einen slider"). 100 %
   ist die bisher fest verdrahtete Deckkraft; 0 % ist dieselbe Flaeche, unsichtbar. */
.raster{opacity:var(--textur-staerke,1)}

/* ---------------------------------------------------------------------------
   LIQUID — derselbe Hintergrund wie an der Anmeldetuer (liquid-chrome.ts), hier
   an die Token dieser Seite gehaengt. Operator 2026-08-27: "schalte ich motion
   oder liquid ein dann will ich das auch liquid kommt mit seinen farben".
   Drei Koerper: ein drehender Kegel, ein wanderndes Band, ein Lichtstreifen.
   Sie liegen IM .aurora-Behaelter, damit Bewegung-aus sie mit anhaelt.
--------------------------------------------------------------------------- */
html[data-stil="liquid"] .aurora::before,
html[data-stil="liquid"] .aurora::after{display:none}
html[data-stil="liquid"] .aurora{
  -webkit-mask-image:linear-gradient(to top,#000 30%,rgba(0,0,0,.55) 62%,transparent 90%);
  mask-image:linear-gradient(to top,#000 30%,rgba(0,0,0,.55) 62%,transparent 90%);
  transform:translateZ(0);backface-visibility:hidden}
.lq{display:none}
html[data-stil="liquid"] .lq{display:block}
.lq-flow{position:absolute;left:50%;top:118%;width:172vw;height:172vw;transform:translate(-50%,-50%);will-change:transform;
  background:conic-gradient(from 90deg,var(--lq-1,var(--magenta)),var(--lq-5,var(--blue)),var(--lq-3,var(--teal)),var(--lq-4,var(--lavendel)),var(--lq-2,var(--magenta-hell)),var(--lq-1,var(--magenta)));
  filter:blur(88px);opacity:.5}
.lq-band{position:absolute;left:-25%;right:-25%;bottom:-30%;height:82%;will-change:background-position;
  background:linear-gradient(100deg,transparent,var(--lq-1,var(--magenta)) 18%,var(--lq-5,var(--blue)) 38%,var(--lq-4,var(--lavendel)) 60%,var(--lq-3,var(--teal)) 82%,transparent);
  background-size:220% 100%;filter:blur(78px);opacity:.55;mix-blend-mode:screen}
.lq-ader{position:absolute;left:0;right:0;bottom:0;height:72%;will-change:transform;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.16) 50%,transparent 58%);
  filter:blur(26px);mix-blend-mode:screen}
@media (prefers-reduced-motion:no-preference){
  html[data-bewegung="an"] .lq-flow{animation:lq-spin 30s linear infinite}
  html[data-bewegung="an"] .lq-band{animation:lq-slide 18s ease-in-out infinite}
  html[data-bewegung="an"] .lq-ader{animation:lq-sweep 11s ease-in-out infinite}
}
@keyframes lq-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes lq-slide{0%,100%{background-position:0% 0}50%{background-position:100% 0}}
@keyframes lq-sweep{0%{transform:translateX(-28%)}50%{transform:translateX(28%)}100%{transform:translateX(-28%)}}

/* Bewegung aus: der Endzustand steht, kein Laufwerk, keine Parallaxe. */
html[data-bewegung="aus"] .aurora::before,
html[data-bewegung="aus"] .aurora::after{animation:none;transform:none}
html[data-bewegung="aus"] .aurora{transform:none !important;transition:none}
html[data-bewegung="aus"] .lq-flow,
html[data-bewegung="aus"] .lq-band,
html[data-bewegung="aus"] .lq-ader{animation:none}

/* Rundes Bedienelement wie im Haus (ssr-landingpage-v5 .ctrl): Symbol, kein Kasten. */
.ctrl{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  min-width:2.75rem;min-height:2.75rem;padding:0 var(--space-3);border:0;background:transparent;
  color:var(--paper-soft);border-radius:var(--r-pill);cursor:pointer;font:inherit;font-size:.9375rem;
  white-space:nowrap;transition:color var(--t-schnell) var(--ease),background var(--t-schnell) var(--ease)}
.ctrl:hover{color:var(--paper);background:rgba(242,241,245,.06)}
.ctrl svg{width:1.25rem;height:1.25rem;flex:none}
.ctrl[aria-pressed="true"],.ctrl[aria-expanded="true"]{color:var(--paper)}

.hg{position:relative}
.hg-panel{position:absolute;top:calc(100% + var(--space-2));right:0;z-index:var(--z-panel);
  width:min(20rem,calc(100vw - 2*var(--space-5)));display:grid;gap:var(--space-4);
  padding:var(--space-5);background:var(--ink-card);border:1px solid var(--line-strong);
  border-radius:var(--r-m);box-shadow:var(--shadow-1)}
.hg-lbl{font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--paper-dim)}
.hg-reihe{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.hg-block{display:grid;gap:var(--space-3)}
.hg-liste{display:flex;flex-wrap:wrap;gap:var(--space-2)}
/* Fuenf Texturen, hoechstens zwei Zeilen: drei Spalten ergeben 3 + 2.
   Als Flex-Liste brachen sie je nach Wortlaenge auf drei Zeilen um. */
[data-hg-texturen]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2)}

/* Regler fuer die Textur-Staerke. Eigene Spur statt System-Aussehen (R2/R30):
   die Farbe kommt aus dem Akzent-Token, damit ein Farbwurf ihn mitfaerbt. */
/* "More than a door" — die Faecher des Hauses. Karten aus denselben Token wie
   der Rest (R30), Raster nach R7: 3 -> 2 -> 1, nie gequetscht. */
.mehr{margin-top:var(--space-7)}
.mehr-h{font:600 clamp(1.4rem,1.1rem + 1.2vw,2rem)/1.2 var(--display);margin:0 0 var(--space-5);text-wrap:balance}
.mehr-liste{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-4);
  grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
.mehr-liste li{border:1px solid var(--line-strong);border-radius:16px;padding:var(--space-4);
  background:rgba(255,255,255,.03)}
.mehr-liste svg{width:22px;height:22px;color:var(--magenta);margin-bottom:var(--space-3)}
.mehr-liste h4{font:600 1.02rem/1.3 var(--display);margin:0 0 var(--space-2)}
/* Ein Code-Block in einer Karte rollt in SEINEM Kasten, nie die Seite (R7/R75).
   `word-break:break-all` der Inline-Variante trennt hier mitten im Bezeichner —
   an einem Aufruf ist der Umbruch selbst eine Falschaussage. Gemessen: ohne
   diese Regel laeuft /agent-sign-up/ bei 360 px seitlich ueber. */
.karte pre.code{display:block;width:100%;margin-top:var(--space-3);white-space:pre;
  overflow-x:auto;word-break:normal;font-size:.8125rem;line-height:1.5}

.mehr-liste p{margin:0;font-size:.92rem;line-height:1.55;color:var(--paper-soft);text-wrap:pretty;hyphens:auto}

.hg-regler{gap:var(--space-2)}
/* Flach und ohne Knopf (Operator 2026-08-27: "zu hoch ... nimm die % weg und
   auch den runden button"). Der Griff ist ein schmaler Strich, kein Ball; die
   Trefferflaeche bleibt trotzdem 2.75rem hoch, sonst ist er am Telefon nicht
   zu fassen — nur ist sie unsichtbar statt gebaut. */
.hg-regler{margin-top:var(--space-2)}
.hg-regler input[type="range"]{flex:1;width:100%;-webkit-appearance:none;appearance:none;height:2.75rem;
  background:transparent;outline:none;cursor:ew-resize}
.hg-regler input[type="range"]::-webkit-slider-runnable-track{height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--magenta),var(--teal))}
.hg-regler input[type="range"]::-moz-range-track{height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--magenta),var(--teal))}
.hg-regler input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:2px;height:14px;
  border-radius:1px;background:var(--paper);border:none;margin-top:-6px}
.hg-regler input[type="range"]::-moz-range-thumb{width:2px;height:14px;border-radius:1px;
  background:var(--paper);border:none}
.hg-regler input[type="range"]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px rgba(255,63,229,.28)}
.hg-schalter{display:inline-flex;align-items:center;gap:var(--space-2);min-height:2.75rem;padding:0 var(--space-2);
  background:none;border:0;color:var(--paper);font:inherit;font-size:.875rem;cursor:pointer}
.hg-schalter-knopf{width:2.5rem;height:1.375rem;border-radius:var(--r-pill);background:var(--ink-soft);
  border:1px solid var(--line-strong);position:relative;transition:background var(--t-schnell) var(--ease)}
.hg-schalter-knopf::after{content:"";position:absolute;top:.1875rem;left:.1875rem;width:.875rem;height:.875rem;
  border-radius:50%;background:var(--paper-dim);transition:transform var(--t-schnell) var(--ease),background var(--t-schnell) var(--ease)}
.hg-schalter[aria-checked="true"] .hg-schalter-knopf{background:var(--magenta);border-color:transparent}
.hg-schalter[aria-checked="true"] .hg-schalter-knopf::after{transform:translateX(1.125rem);background:var(--on-accent)}
.hg-schalter-wort{font-family:var(--mono);font-size:.75rem;color:var(--paper-dim)}

.hg-textur{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:2.75rem;padding:0 var(--space-2);min-width:0;
  background:var(--ink-soft);border:1px solid var(--line);border-radius:var(--r-pill);color:var(--paper-soft);
  font:inherit;font-size:.75rem;cursor:pointer;overflow:hidden;
  transition:border-color var(--t-schnell) var(--ease),color var(--t-schnell) var(--ease)}
.hg-textur .hg-wort{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hg-textur[aria-pressed="true"]{border-color:var(--magenta);color:var(--paper)}
.hg-probe{width:1.125rem;height:1.125rem;border-radius:.3125rem;border:1px solid var(--line-strong);flex:none;background-color:var(--ink)}
.hg-probe[data-probe="punkte"]{background-image:radial-gradient(rgba(242,241,245,.85) 1px,transparent 1px);background-size:5px 5px}
.hg-probe[data-probe="gitter"]{background-image:linear-gradient(rgba(242,241,245,.7) 1px,transparent 1px),linear-gradient(90deg,rgba(242,241,245,.7) 1px,transparent 1px);background-size:6px 6px}
.hg-probe[data-probe="diagonal"]{background-image:repeating-linear-gradient(45deg,rgba(242,241,245,.7) 0 1px,transparent 1px 5px)}
.hg-probe[data-probe="rauschen"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='40' height='40' filter='url(%23r)' opacity='.7'/%3E%3C/svg%3E")}

.hg-satz{width:2.75rem;height:2.75rem;padding:.4375rem;border:1px solid var(--line);border-radius:var(--r-pill);
  background:var(--ink-soft);cursor:pointer;transition:border-color var(--t-schnell) var(--ease),transform var(--t-schnell) var(--ease)}
.hg-satz::before{content:"";display:block;width:100%;height:100%;border-radius:50%;
  background:conic-gradient(var(--p1) 0 33%,var(--p2) 33% 66%,var(--p3) 66% 100%)}
.hg-satz:hover{transform:scale(1.06)}
.hg-satz[aria-pressed="true"]{border-color:var(--paper);box-shadow:0 0 0 1px var(--paper)}
.hg-mischen{width:100%;font-size:.875rem}
@media (prefers-reduced-motion:reduce){
  .hg-satz,.hg-schalter-knopf,.hg-schalter-knopf::after,.hg-textur{transition:none}
}

/* ---------------------------------------------------------------- Weiche Aufklapper
   Operator 2026-08-24: "das es hochspringt! es muss smooth nach unten oeffnen."
   Die Hoehe faehrt in seite.js ueber die Web-Animations-Schnittstelle; hier steht nur,
   dass der Inhalt waehrenddessen nicht ueberlaeuft. */
.fall .inhalt{overflow:hidden}
.fall.faehrt{overflow:hidden}
.fall summary{list-style:none}

/* ---------------------------------------------------------------- Kein Rollbalken im Bild
   Operator 2026-08-24: "bitte rechts den visual scroll entfernen." Gerollt wird weiter --
   mit Rad, Finger, Bild-ab und Tabulator; nur der Balken ist unsichtbar. */
html{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar{width:0;height:0}

/* ---------------------------------------------------------------- Anbieter-Reihe zu dritt
   Drei Knoepfe brechen bei 360 px auf eine Spalte, statt sich zu quetschen (R7). */
.row-3{display:grid;gap:var(--space-3);margin-top:var(--space-3);grid-template-columns:1fr}
@media (min-width:26rem){.row-3{grid-template-columns:repeat(3,1fr)}}
.row-3 .btn{padding-inline:var(--space-3)}

/* ---------------------------------------------------------------- Anmeldewege als Bauteil
   Operator 2026-08-24: der Satz "Identity is the side dish ..." war Text, kein Bauteil.
   Jetzt: eine Aussage, sechs gleich gebaute Wege (R77: ein Feldsatz je Gruppe), eine Tuer. */
.idm{margin-top:var(--space-7);display:grid;gap:var(--space-5)}
.idm-wort h3{font-family:var(--display);font-weight:300;font-size:clamp(1.5rem,3.2vw,2rem);letter-spacing:-.02em}
.idm-wort p{color:var(--paper-soft);margin:var(--space-3) 0 0;max-width:42rem}
.idm-wege{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3);
  grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}
.idm-wege li{display:flex;align-items:center;gap:var(--space-3);min-height:3rem;
  padding:var(--space-3) var(--space-4);background:rgba(21,19,31,.7);border:1px solid var(--line);
  border-radius:var(--r-pill);color:var(--paper);font-size:.9375rem;white-space:nowrap}
.idm-wege svg{width:1.25rem;height:1.25rem;flex:none;color:var(--paper-soft)}
.idm-tuer{color:var(--paper-soft);font-size:.9375rem;margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}
.idm-tuer .code{margin-top:0;font-size:.875rem}

/* ---------------------------------------------------------------- Rueckkehr von der Anmeldung
   Operator 2026-08-24 (inbox/auth00_legal, "design fehler kurz bei login"): nach der
   Google-Anmeldung stand hier ein 1200 px breites Logo unter "operated by" quer ueber der
   Karte, dazu ein schwebender Cookie-Knopf aus dem alten CDN-Buendel. Beides ist weg:
   die Seite traegt jetzt denselben Kopf und Fuss wie jede andere. */
.cb-mitte{min-height:60svh;display:grid;align-items:center}
.cb-karte{max-width:32rem;margin-inline:auto}

/* ================================================================ Anmelde-Ansichten
   Die Strich-Anzeige ist EIN Bauteil: Startseite und Galerie benutzen dieselbe.
   Operator 2026-08-24: "___ ____ ____ ein Karussell mit mehreren Design-Styles". */
.sg-striche{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.strich{position:relative;width:2.75rem;height:2.75rem;padding:0;border:0;background:none;cursor:pointer}
.strich::before{content:"";position:absolute;left:.25rem;right:.25rem;top:50%;height:2px;
  border-radius:var(--r-pill);background:var(--line-strong);
  transition:background var(--t-schnell) var(--ease),height var(--t-schnell) var(--ease)}
.strich:hover::before{background:var(--paper-dim)}
.strich[aria-selected="true"]::before{background:var(--magenta);height:3px}
.sg-zaehler{font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;color:var(--paper-dim)}

/* ================================================================ Vollbild-Buehne
   Operator 2026-08-24: "diese soll komplett full screen wechseln!" und
   "es ist eine live demo!".

   Die Startseite ist die Anmeldung. Ein Abschnitt, volle Hoehe, darunter die
   Striche. Kein zweiter Abschnitt mit Vorschaubildern -- was hier steht, nimmt
   Eingaben entgegen und meldet an. */
.hero{min-height:calc(100svh - var(--kopf-hoehe) - var(--einwilligung-raum,0px));display:grid;
  grid-template-rows:1fr auto auto;align-items:center;padding-block:var(--space-6) var(--space-5)}
/* Die Buehne haelt ihr Mass, damit der Wechsel die Seite nicht springen laesst
   (R48: kein Versatz beim Wechsel). Sie waechst mit dem Inhalt, nie mit fester
   Hoehe (R135). */
.hero-buehne{width:100%;display:grid;align-content:center;min-height:26rem}
@media (min-width:64rem){.hero-buehne{min-height:30rem}}
.hero-buehne > .stil{width:100%}

.hero-leiste{width:100%;display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--space-2) var(--space-4);margin-top:var(--space-5)}
.hero-pfeil{flex:none}
.hero-wort{display:inline-flex;align-items:center;gap:var(--space-3);margin-left:auto;
  color:var(--paper-soft);font-size:.9375rem;white-space:nowrap}
/* Bei 360 px stehen zehn Striche, zwei Pfeile und der Name nicht in einer Zeile.
   Der Name weicht dann in die zweite Zeile, die Striche bleiben vollstaendig. */
@media (max-width:26rem){.hero-wort{margin-left:0;width:100%}}
.hero #already{width:100%;margin-top:var(--space-4)}

/* ================================================================ Inhaltsseiten
   Bauteile fuer /why, /ai, /trust, /status, /docs.

   Sie stehen HIER und nicht in einer eigenen Datei: styles.css IST das
   Haus-Bauteil von auth00. Eine zweite Stildatei waere ein zweiter Ort fuer
   dieselbe Entscheidung, und genau daran laufen Kopf und Fuss auseinander (R33).

   Nur FORM, keine Farbe: jeder Wert kommt aus der Token-Reihe oben (R30).
   auth00 ist rund (AUTH00-DESIGN Abschnitt 2). */

/* --- Code IM Satz. `.code` ist der stehende Block und bleibt, was er ist:
       mit seinem Innenabstand im Fliesstext zerreisst er die Zeile (am
       gerenderten Stand gesehen). Der Satz nimmt das semantisch richtige
       Element (R27), und das braucht nur eine Marke, keinen Kasten. --- */
code{font-family:var(--mono);font-size:.875em;color:var(--paper);
  background:var(--flaeche-hover);border-radius:var(--r-s);
  padding:.1em .35em;word-break:break-word}
.tbl code,.karte code,.liste code{font-size:.8125em}

/* --- Sprungmarke: der erste Tabstopp fuehrt am Kopf vorbei ----------------- */
.sprung{position:absolute;left:-9999px;top:0;z-index:var(--z-leiste);
  padding:var(--space-3) var(--space-4);border-radius:0 0 var(--r-m) 0;
  background:var(--ink-card);color:var(--paper);text-decoration:none}
.sprung:focus-visible{left:0}

/* --- Kopf: Wege zum Klicken, Anmeldung rechts ------------------------------ */
/* Operator 2026-08-24: "mit oben der Navi zum klicken". Bei 360 px passen fuenf
   Wege, zwei Werkzeuge und der Hintergrund-Schalter nicht in eine Zeile --
   dort klappt die Wegeleiste auf (R7: stapeln, nicht quetschen). */
header.site .wege{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1)}
header.site .wege a{color:var(--paper-soft);text-decoration:none;font-size:.9375rem;
  white-space:nowrap;display:inline-flex;align-items:center;min-height:2.75rem;
  padding-inline:var(--space-3);border-radius:var(--r-pill);
  transition:color var(--t-schnell) var(--ease),background var(--t-schnell) var(--ease)}
header.site .wege a:hover{color:var(--paper);background:var(--flaeche-hover)}
/* Der aktuelle Weg traegt eine Kante, nicht nur eine Farbe (R28d). */
/* Der Strich sitzt als eigene Flaeche unter dem Wort, nicht als Innenschatten:
   auf einem Kapsel-Radius wird ein Innenschatten zu einem gebogenen Bogen und
   sieht aus wie ein halber Rahmen (am gerenderten Stand gesehen, nicht vermutet). */
header.site .wege a[aria-current="page"]{color:var(--paper);position:relative}
header.site .wege a[aria-current="page"]::after{content:"";position:absolute;
  left:var(--space-3);right:var(--space-3);bottom:.45rem;height:2px;
  border-radius:var(--r-pill);background:var(--magenta)}
header.site .kopf-anmelden{width:auto;flex:none;padding-inline:var(--space-5)}
.kopf-menue{display:inline-flex;flex:none;margin-left:auto}
.kopf-menue svg{width:1.375rem;height:1.375rem}
@media (min-width:64rem){.kopf-menue{display:none}}
/* Ohne Skript ist die Wegeleiste SICHTBAR: eine Navigation, die ein Skript
   braucht, ist keine (R27). Erst kopf.js klappt sie unterhalb der Schwelle zu. */
@media (max-width:63.999rem){
  header.site .wege{order:3;width:100%;flex-direction:column;align-items:stretch;gap:0}
  header.site .wege a{justify-content:flex-start;padding-inline:0}
  header.site .wege a[aria-current="page"]{padding-inline-start:var(--space-3)}
  header.site .wege a[aria-current="page"]::after{left:0;right:auto;top:.5rem;bottom:.5rem;
    width:2px;height:auto}
  header.site .wege[hidden]{display:none}
  header.site .werkzeuge{order:2}
}
@media (max-width:39.999rem){header.site .werkzeuge a[href="/verify/"]{display:none}}

/* --- Abschnitt: EIN Abstandsmass fuer alle Inhaltsseiten -------------------- */
.ab{padding-block:var(--section-y)}
.ab > .wrap{width:100%}
.ab-kopf{padding-block:var(--space-8) var(--section-y);min-height:56svh;
  display:grid;align-items:center}
.gross{font-family:var(--display);font-weight:300;
  font-size:clamp(2.25rem,6vw,4.25rem);line-height:1.03;letter-spacing:-.03em}
.gross-lede{max-width:44rem;margin-top:var(--space-5);font-size:1.0625rem}
@media (min-width:64rem){.gross-lede{font-size:1.125rem}}
.ab-kopf .cta-row{margin-top:var(--space-6)}

/* --- Karten: gleichrangige Zellen enden auf derselben Kante (R133) --------- */
.karten{margin-top:var(--space-6);display:grid;gap:var(--space-4);
  grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));align-items:stretch}
.karte{display:flex;flex-direction:column;gap:var(--space-3);min-width:0;
  padding:var(--space-5);border:1px solid var(--line);border-radius:var(--r-m);
  background:var(--flaeche-karte)}
.karte h3{font-family:var(--display);font-weight:400;font-size:1.1875rem;letter-spacing:-.01em}
.karte p{color:var(--paper-soft);font-size:.9375rem;margin:0}

/* --- Listen: eine Aussage je Zeile, das Zeichen sagt die Richtung mit ------ */
.liste{margin:var(--space-5) 0 0;padding:0;list-style:none;display:grid;gap:var(--space-3);
  max-width:52rem}
.liste li{position:relative;padding-left:var(--space-6);color:var(--paper-soft);font-size:.9375rem}
.liste li b{color:var(--paper);font-weight:600}
.liste li::before{content:"";position:absolute;left:0;top:.55em;width:.5rem;height:.5rem;
  border-radius:var(--r-pill);background:var(--magenta)}
/* Was wir NICHT haben, traegt ein anderes ZEICHEN -- Farbe allein waere zu wenig. */
.liste-nein li::before{background:transparent;box-shadow:inset 0 0 0 1px var(--paper-dim);
  width:.55rem;height:.55rem;top:.5em}

/* --- Tabelle: rollt in ihrem eigenen Kasten, nie die Seite ----------------- */
.tbl-roll{margin-top:var(--space-5);max-width:100%;overflow-x:auto;
  border:1px solid var(--line);border-radius:var(--r-m)}
.tbl{width:100%;min-width:34rem;border-collapse:collapse;font-size:.9375rem}
.tbl caption{caption-side:top;text-align:left;padding:var(--space-4) var(--space-5) 0;
  font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;color:var(--paper-dim)}
.tbl th,.tbl td{padding:var(--space-4) var(--space-5);text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line)}
.tbl thead th{font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--teal);font-weight:500}
.tbl tbody th{color:var(--paper);font-weight:600;width:30%}
.tbl td{color:var(--paper-soft)}
.tbl tbody tr:last-child th,.tbl tbody tr:last-child td{border-bottom:0}

/* --- Handlungsknopf: eine Bauform, auf jeder Seite dieselbe ---------------- */
/* Ueberschrift mit dem Namen, EIN Satz der einen Druck benennt, zwei Wege --
   einer davon ohne Gespraech (Operator 2026-08-24: "so einen CTA in geil"). */
.ab-cta{padding-block:var(--space-8)}
.cta{padding:var(--space-7) var(--space-5);border:1px solid var(--line-strong);
  border-radius:var(--r-l);
  background:radial-gradient(120% 140% at 12% 0%,var(--schein-akzent),transparent 60%),
    var(--flaeche-hoch);
  display:grid;gap:var(--space-4);justify-items:start}
@media (min-width:48rem){.cta{padding:var(--space-8) var(--space-7)}}
.cta h2{font-family:var(--display);font-weight:400;
  font-size:clamp(1.5rem,3.4vw,2.25rem);line-height:1.1;letter-spacing:-.02em}
.cta p{color:var(--paper-soft);max-width:40rem;margin:0}
.cta .cta-row{margin-top:var(--space-2)}

/* --- Zustandsmarke: Farbe UND Wort UND Form (R28d) ------------------------- */
.zustand{display:inline-flex;align-items:center;gap:var(--space-2);
  font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase}
.zustand::before{content:"";width:.5rem;height:.5rem;border-radius:var(--r-pill);
  background:currentColor}
.zustand-gut{color:var(--gut)}
.zustand-gestoert{color:var(--gestoert)}
.zustand-aus{color:var(--aus)}
/* "Nicht messbar" ist ein eigener Zustand und sieht nie aus wie Ruhe. */
.zustand-unbekannt{color:var(--unbekannt)}
.zustand-unbekannt::before{background:transparent;box-shadow:inset 0 0 0 1px currentColor}

/* Codeblock und Zahlenspalte der Statusseite. `.code` ist die stehende Marke;
   mehrzeiliger Code braucht zusaetzlich Zeilenumbrueche und einen eigenen Lauf. */
.code-block{display:block;margin-top:var(--space-5);padding:var(--space-4) var(--space-5);
  white-space:pre;overflow-x:auto;word-break:normal;line-height:1.7;font-size:.875rem}
.code-block code{background:none;padding:0;font-size:inherit}
.tbl .num{font-family:var(--mono);font-size:.8125rem;color:var(--paper-dim);white-space:nowrap}
/* Ein Hinweis, der eine NICHT-Messung meldet, sieht anders aus als ein Hinweis. */
.hint-unbekannt{color:var(--paper);border-left:2px solid var(--gestoert);
  padding-left:var(--space-4);margin-top:var(--space-4)}

/* Wegliste der Karte: eine Tuer je Zeile, ohne Aufzaehlungszeichen. */
.wegliste{margin:0;padding:0;list-style:none;display:grid;gap:var(--space-1)}
.wegliste a{display:inline-flex;align-items:center;min-height:2.5rem;color:var(--paper-soft);
  text-decoration:none;font-size:.9375rem;transition:color var(--t-schnell) var(--ease)}
.wegliste a:hover{color:var(--paper)}
.wegliste-breit{margin-top:var(--space-5);
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:var(--space-1) var(--space-5)}

/* ================================================================ Schublade
   Menue und Funktionen der Gespraechsseiten auf dem Telefon (gespraech-menue.js).
   Operator 2026-09-01: Aufbau wie in einer Gespraechs-App — Wischen von der
   linken Kante oder zwei Striche im Kopf.

   Am Schreibtisch gibt es sie NICHT: dort stehen die Wege im Kopf, und ein
   Hamburger neben sichtbaren Wegen waere ein zweiter Weg zum selben Ziel. */
.g-menue-knopf{display:none}
.g-schublade,.g-schub-grund{display:none}
/* WORTGLEICH mit `ABFRAGE` in schublade.js und mit der `--nav`-Weiche oben. */
@media (max-width:39.99rem), (hover:none) and (pointer:coarse) and (max-width:79.99rem){
  /* DER HAMBURGER STEHT LINKS, ALS ERSTES (Operator 2026-09-02: "hinter dem
     hamburger menü auf der linken seite"). Er ist das erste Kind des Kopfes;
     die Marke steht direkt daneben und bleibt damit links, nie mittig.
     44 px Zielflaeche (R28b), nicht 40: das Symbol darf kleiner sein, die
     Flaeche nicht. */
  .g-menue-knopf{display:inline-flex;align-items:center;justify-content:center;
    width:2.75rem;height:2.75rem;margin-inline-end:var(--space-1);
    margin-inline-start:calc(var(--space-3) * -1);flex:0 0 auto;
    /* Nimmt dem Browser den Doppeltipp-Vorbehalt: ohne das wartet er vor dem
       Klick auf einen zweiten Tipp und die Schublade kommt spuerbar spaeter. */
    touch-action:manipulation}
  .g-menue-knopf svg{width:1.25rem;height:1.25rem}
  /* Der Kopf traegt mobil nur Hamburger und Marke; die Wege sind in der
     Schublade. Die leeren Huellen blieben sonst als Luecke stehen. */
  .g-kopf > span:empty,
  header.site .wege:empty,
  header.site .werkzeuge:empty{display:none}
  /* Der alte Klapp-Hamburger der Startseite ist abgeloest: zwei Ausloeser fuer
     dieselbe Navigation waeren zwei Wege zum selben Ziel (R29). */
  .kopf-menue{display:none}

  /* DIE SEITE WEICHT, DIE NAVIGATION KOMMT (Operator 2026-09-01: "die
     Eingabeseite ist wie bei ChatGPT oder Claude immer das Overlay -- Swipe
     nach rechts, links kommt die Navigation zum Vorschein, Swipe nach links,
     die Seite ist wieder verdeckt").
     Vorher lag die Schublade UEBER der Seite und die Seite blieb stehen. Jetzt
     schiebt sich die Seite um die Breite der Schublade nach rechts; rechts
     bleibt ein Rest von ihr stehen, damit sichtbar ist, wohin man zurueckwischt.
     Die drei Ebenen der Seite (Licht, Textur, Gespraech) wandern GEMEINSAM --
     wanderte nur der Text, blieben Licht und Muster stehen und die Bewegung
     saehe aus wie ein Fehler. */
  :root{--schub-breite:min(19rem,86vw)}
  /* Das !important ist NICHT Bequemlichkeit: bei angeordneter Ruhe steht weiter
     oben `.aurora{transform:none !important}`, damit die Drift-Animation nicht
     laeuft. Der Schub ist aber keine Animation, sondern ein Zustand -- ohne
     diese Zeile blieb das Licht stehen, waehrend die Seite wegfuhr (gemessen:
     Seite bei 304, Licht bei 0). */
  html.g-schub-offen .aurora,
  html.g-schub-offen .raster,
  html.g-schub-offen .gespraech{transform:translateX(var(--schub-breite)) !important}
  .aurora,.raster,.gespraech{transition:transform .24s var(--ease)}
  html.g-schub-offen .gespraech{border-start-start-radius:1.25rem;border-end-start-radius:1.25rem;
    box-shadow:-18px 0 60px rgba(0,0,0,.55)}
  /* Der Grund verdunkelt die WEGGESCHOBENE Seite, nicht die Navigation:
     deshalb wandert er mit. */
  .g-schub-grund{display:block;position:fixed;inset:0;z-index:var(--z-panel);
    background:rgba(0,0,0,.45);opacity:0;transition:opacity .2s var(--ease),transform .24s var(--ease)}
  html.g-schub-offen .g-schub-grund{transform:translateX(var(--schub-breite))}
  .g-schub-grund.g-schub-auf{opacity:1}
  .g-schub-grund[hidden]{display:none}

  /* Vier Reihen wie in den Vorbild-Apps: Kopf, rollender Rumpf, Konto-Zeile,
     und darueber faehrt bei Bedarf das Konto-Blatt. Der Rumpf traegt
     `minmax(0,1fr)`, damit die Konto-Zeile UNTEN klebt und nicht mitwandert,
     wenn die Wegeliste kurz ist. */
  .g-schublade{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:var(--space-5);
    position:fixed;inset-block:0;inset-inline-start:0;z-index:calc(var(--z-panel) + 1);
    width:var(--schub-breite);padding:var(--space-5) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom));
    background:var(--ink-card);
    /* DIE KANTE MUSS MAN SEHEN (Operator 2026-09-02: "sie hat den selben color
       wie der hintergrund! es gibt keine kante keine abgrenzung nichts").
       Gemessen: Schublade #15131F gegen Seite #050409 -- ein Unterschied, aber
       auf einem Telefon im Hellen keiner. Die alte Kante lag bei 16 % Deckung
       (Kontrast 1,6:1) und der Schlagschatten war auf fast schwarzem Grund
       unsichtbar.
       Jetzt eine Haarlinie mit 40 % Deckung: gerechnet 3,3:1 gegen die Flaeche
       der Schublade -- die Untergrenze fuer eine Bedienkante ist 3:1 (R5).
       Der Schatten bleibt daneben und traegt die Tiefe, nicht die Trennung. */
    border-inline-end:1px solid rgba(242,241,245,.40);
    box-shadow:24px 0 60px rgba(0,0,0,.75);
    transform:translateX(-100%);transition:transform .22s var(--ease)}
  .g-schublade.g-schub-auf{transform:none}
  .g-schublade[hidden]{display:none}

  .g-schub-kopf{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}
  .g-schub-marke{height:1.5rem;width:auto}
  .g-schub-zu{width:2.5rem;height:2.5rem;display:inline-flex;align-items:center;justify-content:center}
  .g-schub-zu svg{width:1.125rem;height:1.125rem}

  /* Ein Weg je Zeile, volle Zielflaeche, EIN Abstand aus der Skala — nicht
     drei verschiedene wie vorher im Kopf, wo `&nbsp;` den Abstand machte. */
  .g-schub-wege,.g-schub-fuss{display:grid;gap:var(--space-1);align-content:start}
  .g-schub-wege a,.g-schub-wege button,
  .g-schub-fuss a,.g-schub-fuss button{display:flex;align-items:center;min-height:2.75rem;
    padding-inline:var(--space-3);border:0;border-radius:.75rem;background:transparent;
    color:var(--paper);font:inherit;font-size:1rem;text-align:start;text-decoration:none;cursor:pointer}
  .g-schub-wege a:hover,.g-schub-wege button:hover,
  .g-schub-fuss a:hover,.g-schub-fuss button:hover{background:rgba(242,241,245,.06)}
  .g-schub-wege a[hidden],.g-schub-wege button[hidden]{display:none}
  .g-schub-fuss{border-top:1px solid var(--line);padding-top:var(--space-3)}
  /* Seit die Fuss-Wege unter Settings stehen, ist dieser Kasten meist leer --
     und ein Trennstrich ohne etwas darunter sieht aus wie ein Fehler. */
  .g-schub-fuss:empty{display:none}
  .g-schub-fuss a,.g-schub-fuss button{color:var(--paper-soft);font-size:.9375rem}

  /* Der Rumpf rollt, der Rest steht. Ohne eigenen Rollweg schoebe eine lange
     Wegeliste die Konto-Zeile aus dem Bild. */
  .g-schub-rumpf{display:grid;gap:var(--space-5);align-content:start;
    min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}

  /* ---- Konto: die Zeile unten, wie in den Gespraechs-Apps ----------------
     Operator 2026-09-02: "baue die funktion von account und navigation pixel
     perfekt!! funktion! nicht den kontent!" Also die BAUFORM: Kreis mit
     Initiale, Kennung, zweite Zeile mit dem Zustand, Winkel nach rechts, und
     ein Tipp oeffnet das Blatt. */
  .g-konto{display:flex;align-items:center;gap:var(--space-3);width:100%;
    min-height:3.5rem;padding:var(--space-2) var(--space-3);border:0;
    border-radius:var(--r-s);background:transparent;color:var(--paper);
    font:inherit;text-align:start;cursor:pointer;
    transition:background var(--t-schnell) var(--ease)}
  .g-konto:hover{background:var(--flaeche-hover)}
  .g-konto-kreis{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
    width:2rem;height:2rem;border-radius:var(--r-pill);
    background:var(--magenta);color:var(--on-accent);
    font-family:var(--display);font-size:.875rem;font-weight:600;line-height:1}
  /* Abgemeldet gibt es keine Initiale — und der Kreis darf dann nicht wie ein
     gefuelltes Konto aussehen (R28d: der Zustand haengt nicht an der Farbe
     allein, die Zeile daneben sagt ihn im Klartext). */
  .g-konto-kreis.g-konto-leer{background:transparent;box-shadow:inset 0 0 0 1px var(--line-strong)}
  .g-konto-text{display:grid;gap:.125rem;min-width:0}
  .g-konto-name{font-size:.9375rem;color:var(--paper);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .g-konto-rolle{font-size:.8125rem;color:var(--paper-dim);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .g-konto-winkel{margin-inline-start:auto;flex:0 0 auto;color:var(--paper-dim);display:inline-flex}
  .g-konto-winkel svg{width:1.125rem;height:1.125rem}

  /* Das Blatt liegt UEBER der Schublade, nicht daneben: so bleibt der Weg
     zurueck (der Pfeil oben links) an derselben Stelle wie in den Vorbildern.
     `inset:0` bezieht sich auf die Schublade selbst — sie steht `fixed` und
     ist damit der Bezugsrahmen ihrer absolut gesetzten Kinder. */
  .g-konto-blatt{position:absolute;inset:0;z-index:1;display:grid;
    grid-template-rows:auto minmax(0,1fr);gap:var(--space-5);
    padding:var(--space-5) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom));
    background:var(--ink-card);
    transform:translateX(12%);opacity:0;
    transition:transform .18s var(--ease),opacity .18s var(--ease)}
  .g-konto-blatt.g-blatt-auf{transform:none;opacity:1}
  .g-konto-blatt[hidden]{display:none}
  .g-blatt-zurueck{width:2.75rem;height:2.75rem;flex:0 0 auto}
  .g-blatt-zurueck svg{width:1.125rem;height:1.125rem}
  .g-blatt-titel{font-family:var(--display);font-size:1.0625rem;color:var(--paper);
    margin-inline-end:auto}
  .g-blatt-rumpf{display:grid;gap:var(--space-5);align-content:start;
    min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .g-blatt-block{display:grid;gap:var(--space-2)}
  .g-blatt-lbl{font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;
    text-transform:uppercase;color:var(--paper-dim);padding-inline:var(--space-2)}

  /* ---- Karte und Zeile: die Bauform der Vorlage ------------------------
     inbox/Auth00_Nav Settigns/Nav1-3.jpg: benannte Gruppe, darunter EINE
     Karte, in der Karte je Zeile Zeichen, Wort, Wert, Winkel. Die Trennlinie
     zwischen zwei Zeilen beginnt erst beim Wort, nicht am Zeichen -- genau
     so steht es in der Vorlage, und es haelt die Zeichenspalte ruhig. */
  .g-karte{display:grid;border-radius:var(--r-s);background:rgba(242,241,245,.05);
    overflow:hidden}
  .g-karte:empty{display:none}
  .g-zeile,
  .g-karte > a,.g-karte > button{display:flex;align-items:center;gap:var(--space-3);
    min-height:3rem;padding-inline:var(--space-3);border:0;background:transparent;
    color:var(--paper);font:inherit;font-size:.9375rem;text-align:start;
    text-decoration:none;cursor:pointer;position:relative}
  .g-zeile + .g-zeile::before,
  .g-karte > a + a::before,.g-karte > button + button::before,
  .g-karte > a + button::before,.g-karte > button + a::before{
    content:"";position:absolute;inset-inline:calc(1.25rem + var(--space-3)) 0;
    inset-block-start:0;height:1px;background:var(--line)}
  .g-karte > a:hover,.g-karte > button:hover{background:rgba(242,241,245,.06)}
  .g-zeile-zeichen{flex:0 0 auto;display:inline-flex;color:var(--paper-soft)}
  .g-zeile-zeichen svg{width:1.25rem;height:1.25rem}
  .g-zeile-wort{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* Der Wert steht rechts und ist der Nebensatz: er darf schrumpfen, das Wort
     nicht. Sonst verliert die Zeile ihren Namen und behaelt ihre Zahl. */
  .g-zeile-wert{flex:0 1 auto;min-width:0;color:var(--paper-dim);font-size:.875rem;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:end}
  .g-zeile-winkel{flex:0 0 auto;display:inline-flex;color:var(--paper-dim)}
  .g-zeile-winkel svg{width:1.125rem;height:1.125rem}
  /* Eine Zeile, die nur berichtet, sieht nicht aus wie eine, die etwas tut. */
  .g-zeile-still{cursor:default}
  .g-zeile-still:hover{background:transparent}

  /* Der Abmelden-Weg traegt die Warnfarbe und steht als eigene Karte unten --
     wie in der Vorlage. Er ist der einzige Weg im Blatt, der etwas beendet. */
  .g-blatt-abmelden{margin-top:var(--space-2)}
  .g-blatt-abmelden .g-karte > a,
  .g-blatt-abmelden .g-karte > button{color:var(--aus)}
  .g-blatt-abmelden .g-zeile-zeichen{color:var(--aus)}
  .g-blatt-abmelden .g-zeile-winkel{display:none}
  .g-blatt-konto a[hidden],.g-blatt-konto button[hidden],
  .g-blatt-hilfe a[hidden],.g-blatt-hilfe button[hidden]{display:none}

  /* DIE HINTERGRUND-BEDIENUNG IM BLATT (Operator 2026-09-02: "die gesamten
     funktionen werden auf der mobile seite hinter dem hamburger menü auf der
     linken seite in einstellung verstellbar sein").
     Es ist DERSELBE Knoten wie am Schreibtisch, umgezogen statt nachgebaut.
     Deshalb muss hier seine Bauform umgestellt werden: der schwebende Kasten
     wird zur offenen Flaeche. Ein `position:absolute` haette in der Schublade
     einen anderen Bezugsrahmen und wuerde am Rand beschnitten (R78). */
  .g-blatt-hg{padding:var(--space-4) var(--space-3)}
  .g-blatt-hg .hg{position:static}
  .g-blatt-hg .hg-knopf{display:none}
  .g-blatt-hg .hg-panel{position:static;width:100%;padding:0;
    background:transparent;border:0;border-radius:0;box-shadow:none}
  /* Dass das Panel hier offen STEHT, entscheidet nicht das Stylesheet, sondern
     hintergrund.js (fester Zustand beim Umzug). Eine Stilregel dagegen haette
     gegen `[hidden]{display:none !important}` antreten muessen und gegen den
     Schliesser am `document` verloren — ein Zustand gehoert in den Zustand. */

  /* Solange die Schublade offen ist, rollt die Seite darunter nicht mit. */
  html.g-schub-offen,html.g-schub-offen body{overflow:hidden}

  /* EINE MARKE JE BILD (Operator 2026-09-01: "warum muss bei der mobilen
     Version ein Doppellogo da sein, Untenlogo, Obenlogo, alles Verschwendung?
     Mach es clean, gib mehr Platz, lass unten nur das Chatfenster").
     Gemessen bei 390 px: die Marke stand oben bei y=34 UND unten bei y=796.
     Der Fuss der Gespraechsseiten trug dort nur noch das Logo -- seine Wege
     (Legal, Cookie-Einstellungen, Kontakt) sind seit der Schublade drin. 32 px
     Hoehe plus Abstand fuer eine Wiederholung.
     Mobil traegt deshalb nur der KOPF die Marke. Auf den Gespraechsseiten
     entfaellt der Fuss ganz: kein Weg verschwindet, er steht in der Schublade,
     und die freie Zeile geht an den Verlauf. Auf allen anderen Seiten bleibt
     der Fuss (dort haengen die Wege daran), nur seine Bildmarke geht weg. */
  /* MOBIL GAR KEIN FUSS (Operator 2026-09-02: "in der mobile version brauchen
     wir im login bereich und auch nicht im login bereich keine footer, alles
     was marketing ist musst du wie bei einer app hinter dem hamburger menü
     packen"). Vorher galt das nur fuer die Gespraechsseiten; auf allen anderen
     stand der Fuss weiter.

     DIE REGEL HAENGT AN `data-nav`, NICHT AN DER BREITE. schublade.js setzt
     das Attribut erst, wenn die Schublade wirklich gebaut ist. Eine Seite ohne
     dieses Skript traegt es nie und behaelt darum ihren Fuss — sonst waere aus
     der Regel eine Regel ohne Element geworden und die Wege der Seite waeren
     ersatzlos verschwunden. */
  html[data-nav="schub"] footer.site{display:none}
  /* Die Gespraechsseiten hatten ihren Fuss schon vorher weg; ohne Skript gilt
     das dort weiter, weil dort ohnehin nichts als Weg daran haengt. */
  .gespraech > footer.site{display:none}
  footer.site .f-logo{display:none}
}
@media (prefers-reduced-motion:reduce){
  .g-schublade,.g-schub-grund,.aurora,.raster,.gespraech{transition:none}
}