/* =====================================================================
   Spido · Basis für die öffentlichen Unterseiten
   ---------------------------------------------------------------------
   Die Grundsprache der freigegebenen Startseite, übertragen auf
   Lesestrecken: warmer Off-White-Grund, dieselbe Typografie, horizontale
   Navigation, dieselben Knöpfe, derselbe Abspann.

   Bewusst OHNE die grafischen Elemente der Startseite — kein Glasfeld,
   keine Bögen, keine Journey. Die gehören zum Hero und würden auf einer
   Textseite von dem ablenken, worum es dort geht.

   Alle Werte kommen aus `spido-tokens.css`. Hier steht kein Hexwert.

   Anwendung: `<div class="spido">` als Wurzel der Seite, dazu dieses
   Stylesheet nach `app.css` einbinden.
   ===================================================================== */

/* Der Grund gehoert der Seite, nicht nur dem Container: sonst blitzt
   unter der Vorschauleiste das Weiss des Body durch. */
body:has(.spido){background:var(--spido-bg)}

.spido{
  background:var(--spido-bg);
  color:var(--spido-text-2);
  font-family:var(--spido-font);
  min-height:100vh;
  display:flex;flex-direction:column;
}
.spido .main{flex:1;overflow-x:clip}

/* Content-Achse — dieselbe Breite und dasselbe Polster wie die
   Startseite. Die Kurzschreibweise `padding: X 0 Y` ist hier verboten:
   sie setzt das seitliche Polster auf 0, und der Text klebt bei
   schmalen Fenstern am Rand. */
.spido .wrap{
  max-width:var(--spido-content-max);
  margin:0 auto;
  padding:0 var(--spido-pad);
}
/* Reine Lesestrecken bekommen eine schmalere Achse. Der Text braucht
   sie, und alles andere auf der Seite - Bloecke, Fuss - richtet sich
   daran aus, statt in zwei verschiedenen Breiten zu stehen. */
.spido .wrap.schmal{max-width:860px}
.spido .prose{max-width:none}

/* ---------------------------------------------------------------------
   Navigation
   --------------------------------------------------------------------- */
.spido .topnav{
  position:relative;z-index:2;
  background:transparent;border-bottom:none;box-shadow:none;
  padding:18px 0;
}
.spido .navinner{display:flex;align-items:center;gap:clamp(16px,3vw,44px)}
.spido .marke-logo{
  display:flex;align-items:center;gap:11px;
  font-weight:var(--spido-fw-fett);font-size:27px;
  color:var(--spido-purple);letter-spacing:-.018em;flex:0 0 auto;
}
.spido .marke-logo svg{width:29px;height:29px}
.spido .hauptnav{display:flex;align-items:center;gap:clamp(16px,2.2vw,34px)}
.spido .hauptnav a{
  font-size:var(--spido-body-klein);font-weight:var(--spido-fw-normal);
  color:var(--spido-text-leise);padding:8px 0;
  border-bottom:2px solid transparent;
}
.spido .hauptnav a:hover{color:var(--spido-text)}
.spido .hauptnav a.active{color:var(--spido-text);font-weight:var(--spido-fw-halb)}
.spido .navaktion{margin-left:auto;display:flex;align-items:center;gap:8px}
.spido .navaktion .anmelden{
  font-size:var(--spido-body-klein);font-weight:var(--spido-fw-halb);
  color:var(--spido-text);padding:10px 16px;
  border-radius:var(--spido-radius-knopf-klein);
}
.spido .navaktion .anmelden:hover{background:rgba(31,28,26,.05)}

/* ---------------------------------------------------------------------
   Knöpfe — Kontur, keine Fläche. Erst beim Zeigen füllt sich der Knopf.
   --------------------------------------------------------------------- */
.spido .btn{
  display:inline-flex;align-items:center;gap:10px;
  font-size:var(--spido-knopf-size);font-weight:var(--spido-fw-kraeftig);
  padding:var(--spido-knopf-padding);
  border-radius:var(--spido-radius-knopf);
  background:var(--spido-lavendel-cta);
  border:2px solid var(--spido-purple);
  color:var(--spido-purple);
  box-shadow:none;cursor:pointer;
  transition:background var(--spido-zeit-schnell) ease,
             color var(--spido-zeit-schnell) ease;
}
.spido .btn:hover{background:var(--spido-purple);color:#fff}

/* --- Die gefuellte Variante -----------------------------------------
   Der Spido-Knopf ist Kontur. Diese Variante ist die begruendete
   Ausnahme und wird NICHT zum neuen Standard: Sie gehoert dem
   Empfehlungsabschluss, der als eigener Block funktioniert und nicht
   mit der operativen Hauptaktion konkurriert.

   Sie steht hier und nicht in der Empfehlungskarte, damit es bei EINER
   Variante bleibt. Eine lokal auf einer Seite definierte Ausnahme steht
   in einem halben Jahr auf vier Seiten, in drei Abstufungen, und
   niemand weiss mehr, welche die richtige ist.

   Kein Schatten, kein Glow - die Flaeche allein traegt genug. */
.spido .btn.gefuellt{
  background:var(--spido-purple);
  border-color:var(--spido-purple);
  color:#fff;
}
.spido .btn.gefuellt:hover{
  background:var(--spido-purple-tief);
  border-color:var(--spido-purple-tief);
  color:#fff;
}
.spido .navaktion .btn{
  font-size:var(--spido-knopf-size-klein);font-weight:var(--spido-fw-halb);
  padding:var(--spido-knopf-padding-klein);
  border-width:1px;border-radius:var(--spido-radius-knopf-klein);
  background:var(--spido-purple-050);
}
/* Touch: die Mindestfläche gilt für jedes bedienbare Element. */
.spido .btn,.spido .navaktion .anmelden,.spido .hauptnav a{min-height:var(--spido-touch-min);
  display:inline-flex;align-items:center}

/* ---------------------------------------------------------------------
   Typografie der Lesestrecke
   --------------------------------------------------------------------- */
.spido .inhalt{padding-top:clamp(24px,4vh,56px);padding-bottom:var(--spido-luft)}
.spido h1{
  font-size:var(--spido-h2);line-height:var(--spido-lh-titel);
  letter-spacing:var(--spido-ls-h2);font-weight:var(--spido-fw-halb);
  color:var(--spido-text);margin:0 0 14px;
}
.spido h2{
  font-size:var(--spido-h2-klein);line-height:var(--spido-lh-titel);
  letter-spacing:var(--spido-ls-h3);font-weight:var(--spido-fw-halb);
  color:var(--spido-text);margin:var(--spido-space-xl) 0 var(--spido-space-sm);
}
.spido h3{
  font-size:20px;line-height:1.3;font-weight:var(--spido-fw-halb);
  color:var(--spido-text);margin:var(--spido-space-lg) 0 var(--spido-space-xs);
}
.spido p{
  font-size:var(--spido-body-gross);line-height:var(--spido-lh-weit);
  color:var(--spido-text-2);margin:0 0 var(--spido-space-md);max-width:70ch;
}
.spido .lede{
  font-size:var(--spido-lead);line-height:1.35;color:var(--spido-text-leise);
  font-weight:var(--spido-fw-normal);margin:0 0 var(--spido-space-lg);
  letter-spacing:-.015em;max-width:34ch;
}
.spido .badge{
  display:inline-block;font-size:var(--spido-label);
  font-weight:var(--spido-fw-kraeftig);letter-spacing:var(--spido-ls-label);
  text-transform:uppercase;color:var(--spido-purple);
  background:none;padding:0;margin:0 0 12px;
}
.spido .accent{color:var(--spido-purple)}
.spido a{color:var(--spido-purple);text-decoration:none}
/* Ein Link im Fliesstext braucht keine Fettung. Farbe und Strich
   machen ihn schon kenntlich; fett dazu bricht die Zeile auf. */
.spido p a,.spido li a,.spido .note a{font-weight:var(--spido-fw-halb)}
/* Unterstrichen wird nur im Fliesstext - dort traegt der Strich die
   Erkennbarkeit. In Navigation, Fuss, Knoepfen und Listenzeilen stoert
   er: eine Liste aus dreissig Zeilen mit je einem unterstrichenen Link
   liest sich als Gitter, nicht als Aufzaehlung. Aufzaehlungen in
   Rechtstexten sind echter Fliesstext und behalten ihn. */
.spido p a:not(.btn),
.spido .note a:not(.btn),
.spido .legal li a:not(.btn){text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px}
.spido ul,.spido ol{
  font-size:var(--spido-body-gross);line-height:var(--spido-lh-weit);
  color:var(--spido-text-2);margin:0 0 var(--spido-space-md);
  padding-left:1.3em;max-width:70ch;
}
.spido li{margin:0 0 var(--spido-space-xs)}

/* Flächen: getönt statt gerahmt — dieselbe Regel wie auf der Startseite.
   Kein Kasten mit Rahmen und Schatten, sondern eine ruhige Tönung. */
.spido .card,.spido .prose > .card{
  background:var(--spido-bg-2);border:none;box-shadow:none;
  border-radius:var(--spido-radius-karte);
  padding:clamp(22px,3vw,36px);margin:0 0 var(--spido-space-md);
}

/* ---------------------------------------------------------------------
   Abspann
   --------------------------------------------------------------------- */
/* Der Fuss steht innerhalb der Content-Achse und bringt deshalb kein
   eigenes seitliches Polster mit - sonst ruecke er doppelt ein. */
.spido .fuss{
  margin:clamp(46px,6.5vh,80px) 0 0;
  padding:26px 0 60px;
  border-top:1px solid var(--spido-linie);
  display:flex;gap:6px 12px;flex-wrap:wrap;align-items:center;
  color:var(--spido-text-leise);font-size:14px;
}
.spido .fuss a{color:var(--spido-text-leise)}
.spido .fuss a:hover{color:var(--spido-purple)}
.spido .fuss .sep{opacity:.35}
.spido .fuss-rechts{margin-left:auto}

/* ---------------------------------------------------------------------
   Schmale Displays
   Die Navigation legt sich um, statt zu schrumpfen; der Abspann bricht
   auf eine Spalte. Keine Information geht dabei verloren.
   --------------------------------------------------------------------- */
@media(max-width:840px){
  .spido .hauptnav{
    order:3;width:100%;gap:clamp(14px,4vw,28px);
    padding-top:6px;flex-wrap:wrap;
  }
  .spido .navinner{flex-wrap:wrap;row-gap:4px}
  .spido .marke-logo{font-size:23px}
  .spido .marke-logo svg{width:25px;height:25px}
}
@media(max-width:600px){
  /* Erst hier wird es wirklich eng: Anmelden weicht, der Weg dorthin
     steht weiter im Fuss und hinter "Kostenlos starten". */
  .spido .navaktion .anmelden{display:none}
  .spido .btn{width:100%;justify-content:center}
  .spido .navaktion .btn{width:auto}
  .spido .fuss{flex-direction:column;align-items:flex-start;gap:10px}
  .spido .fuss-rechts{margin-left:0}
}

/* ---------------------------------------------------------------------
   Bauteile der Unterseiten
   Dieselben Bauteile wie bisher — nur in der neuen Grundsprache. Es
   kommt nichts hinzu und es fällt nichts weg; die Seiten behalten ihre
   Inhalte und ihre Funktion.
   --------------------------------------------------------------------- */

/* Karten der Ablaufseiten (Kontakt, Mandantenbereich). Auf dem warmen
   Grund braucht die Karte keinen Rahmen mehr — sie hebt sich schon
   durch das Weiß ab. */
.spido .flowwrap{max-width:680px;margin:0 auto}
.spido .flowcard{
  background:#fff;border:none;box-shadow:var(--spido-schatten-papier);
  border-radius:var(--spido-radius-karte);
  padding:clamp(26px,3.4vw,40px);
}
.spido .flowcard h2{
  font-size:var(--spido-h2-klein);letter-spacing:var(--spido-ls-h3);
  font-weight:var(--spido-fw-halb);margin:0 0 10px;
}
.spido .sub,.spido .flowcard .sub{
  color:var(--spido-text-leise);font-size:var(--spido-body-gross);
  margin:0 0 var(--spido-space-lg);line-height:var(--spido-lh-text);
}
.spido .bank-note{font-size:var(--spido-body-klein);color:var(--spido-text-leise)}

/* Zweitrangige Aktion: Text mit Farbe, keine zweite Kontur. Zwei
   gleich starke Knöpfe nebeneinander lassen die Wahl offen, statt zu
   führen. */
.spido .btn.ghost{
  background:none;border:none;color:var(--spido-purple);
  padding:12px 4px;font-weight:var(--spido-fw-halb);
}
.spido .btn.ghost:hover{background:none;text-decoration:underline;
  text-underline-offset:3px;color:var(--spido-purple-tief)}
.spido .btnrow{display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  margin-top:var(--spido-space-lg)}

/* Formularfelder */
.spido .field{text-align:left;margin-bottom:var(--spido-space-sm)}
.spido .field label{
  display:block;font-weight:var(--spido-fw-halb);
  font-size:var(--spido-body-klein);margin-bottom:9px;color:var(--spido-text);
}
/* Textfelder ohne Klasse - sie entstehen teils erst im Skript - werden
   wie jedes andere Eingabefeld behandelt. Ohne diese Regel stehen sie
   in der Schreibmaschinenschrift des Browsers und in Briefmarkengroesse
   mitten in der Karte. */
.spido textarea{
  width:100%;padding:14px 16px;font-family:inherit;font-size:16px;
  line-height:var(--spido-lh-text);min-height:96px;resize:vertical;
  border:1px solid var(--spido-linie);border-radius:var(--spido-radius-sm);
  background:#fff;color:var(--spido-text);display:block;
}
.spido textarea:focus{
  outline:none;border-color:var(--spido-purple);
  box-shadow:0 0 0 3px rgba(109,40,217,.13);
}
.spido textarea::placeholder{color:var(--spido-text-leise);opacity:.6}

.spido .field input,.spido .field select{
  width:100%;padding:15px 17px;font-family:inherit;font-size:16px;
  border:1px solid var(--spido-linie);border-radius:var(--spido-radius-sm);
  background:#fff;color:var(--spido-text);
}
.spido .field input:focus,.spido .field select:focus{
  outline:none;border-color:var(--spido-purple);
  box-shadow:0 0 0 3px rgba(109,40,217,.13);
}
.spido .field input::placeholder{color:var(--spido-text-leise);opacity:.6}
.spido .msg{font-size:var(--spido-body-klein);margin:9px 0 0;min-height:19px}

/* Reiter im Mandantenbereich */
.spido .mtabs{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 var(--spido-space-lg)}
.spido .mtabs a{
  padding:10px 18px;border-radius:var(--spido-radius-pille);
  font-size:var(--spido-body-klein);color:var(--spido-text-leise);
  background:var(--spido-bg-2);border:none;
}
.spido .mtabs a:hover{color:var(--spido-text)}
.spido .mtabs a.on{background:var(--spido-purple);color:#fff;
  font-weight:var(--spido-fw-halb)}
.spido .demobar{
  background:var(--spido-terracotta-hell);color:var(--spido-terracotta-tief);
  border:none;border-radius:var(--spido-radius-sm);
  padding:13px 16px;font-size:var(--spido-body-klein);
  margin:0 0 var(--spido-space-md);
}
.spido .fgroup{
  font-size:var(--spido-body-klein);font-weight:var(--spido-fw-kraeftig);
  color:var(--spido-text-leise);text-transform:uppercase;
  letter-spacing:.06em;
}

/* Hinweis: eine Linie links, keine Box. Der Hinweis steht neben dem
   Text, nicht über ihm. */
.spido .note{
  background:none;border:none;border-radius:0;
  border-left:2px solid var(--spido-salbei);
  padding:2px 0 2px 18px;margin:var(--spido-space-md) 0;
  font-size:var(--spido-body);line-height:var(--spido-lh-text);
  color:var(--spido-text-2);
}
.spido .note strong{color:var(--spido-text);font-weight:var(--spido-fw-kraeftig)}
.spido .kv{display:grid;gap:10px 20px;font-size:var(--spido-body);margin:0}
.spido .kv dt{color:var(--spido-text-leise)}
.spido .kv dd{margin:0;font-weight:var(--spido-fw-halb)}

/* Rechtstexte: schmalere Spalte, ruhigere Zwischenüberschriften. */
.spido .legal{max-width:66ch}
.spido .legal h2{font-size:26px;margin:var(--spido-space-xl) 0 12px}
.spido .legal h3{font-size:19px;margin:var(--spido-space-lg) 0 10px}
.spido .legal p,.spido .legal li{
  font-size:var(--spido-body-gross);line-height:1.7;color:var(--spido-text-2)}
.spido .legal .back{
  display:inline-block;margin-bottom:var(--spido-space-md);
  color:var(--spido-text-leise);font-size:var(--spido-body-klein);
  text-decoration:none;
}
.spido .legal .back:hover{color:var(--spido-purple)}
.spido .legal .box{
  background:var(--spido-bg-2);border:none;
  border-radius:var(--spido-radius-karte);
  padding:clamp(20px,2.6vw,30px);margin:0 0 var(--spido-space-md);
}
.spido .legal .box p{margin:6px 0}

/* ---------------------------------------------------------------------
   Was vorher in der Seitenleiste stand
   Mit der horizontalen Navigation entfällt die Leiste. Ihre beiden
   Inhalte — der Testzugang und der Datenschutzhinweis — wandern
   unverändert an den Fuß der Lesestrecke. Sie verschwinden nicht.
   --------------------------------------------------------------------- */
.spido .promo{
  margin:var(--spido-space-xl) 0 var(--spido-space-md);
  background:var(--spido-bg-lavendel);
  border-radius:var(--spido-radius-karte);
  padding:clamp(24px,3vw,34px);
  display:flex;align-items:center;gap:clamp(16px,2.4vw,28px);
  flex-wrap:wrap;
}
.spido .promo .gift{width:30px;height:30px;color:var(--spido-purple);flex:none}
.spido .promo h4{
  margin:0;font-size:21px;
  letter-spacing:var(--spido-ls-h3);font-weight:var(--spido-fw-halb);
  color:var(--spido-text);flex:none;
}
.spido .promo p{margin:0;flex:1 1 200px;font-size:var(--spido-body);
  color:var(--spido-text-2);max-width:46ch}
.spido .promo .go{
  margin:0;flex:none;display:inline-flex;align-items:center;
  justify-content:center;width:var(--spido-touch-min);
  height:var(--spido-touch-min);border-radius:50%;
  background:var(--spido-lavendel-cta);
  border:2px solid var(--spido-purple);color:var(--spido-purple);
  font-size:19px;line-height:1;
  transition:background var(--spido-zeit-schnell) ease,
             color var(--spido-zeit-schnell) ease;
}
.spido .promo .go:hover{background:var(--spido-purple);color:#fff}
.spido .foot-dsgvo{
  font-size:var(--spido-body-klein);color:var(--spido-text-leise);
  line-height:1.6;
  margin:var(--spido-space-xl) 0 var(--spido-space-md);
}
/* Steht der Testzugang davor, hat der Abstand schon stattgefunden. */
.spido .promo + .foot-dsgvo{margin-top:0}
.spido .foot-dsgvo a{color:var(--spido-purple);font-weight:var(--spido-fw-halb)}

@media(max-width:600px){
  .spido .promo{flex-direction:column;align-items:flex-start}
}

/* =====================================================================
   AppShell (SPIDO_UX_ARCHITEKTUR.md, Punkt 8)
   ---------------------------------------------------------------------
   Alle Seiten der Anwendung liegen in derselben Struktur:

       App-Kopf
       Seitenkopf   Titel · Kontext · Status · Hauptaktion
       Inhalt
       Hinweise

   Damit sind Inhaltsbreite, Abstaende, Ruecknavigation, Hauptaktion und
   das Verhalten auf Desktop, Tablet und Handy EINMAL geregelt - nicht
   je Seite. Wer eine Seite baut, fuellt die Struktur; er erfindet sie
   nicht neu.
   ===================================================================== */

/* Ruecknavigation: immer an derselben Stelle, immer gleich leise. Sie
   fuehrt zum uebergeordneten Kontext, nie zur Startseite. */
.spido .zurueck{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--spido-body-klein);color:var(--spido-text-leise);
  margin:0 0 var(--spido-space-sm);
}
.spido .zurueck:hover{color:var(--spido-purple)}

.spido .seitenkopf{
  display:flex;align-items:flex-start;gap:var(--spido-space-md);
  flex-wrap:wrap;margin:0 0 var(--spido-space-lg);
}
.spido .seitenkopf .kopftext{flex:1 1 320px;min-width:0}
.spido .seitenkopf h1{
  font-size:var(--spido-h2-klein);letter-spacing:var(--spido-ls-h3);
  margin:0 0 6px;
}
.spido .seitenkopf .kontext{
  margin:0;font-size:var(--spido-body-klein);
  color:var(--spido-text-leise);line-height:1.5;
}
/* Die Hauptaktion sitzt rechts oben und ist je Ansicht genau eine.
   Zwei gleich starke Knoepfe nebeneinander sind keine Hauptaktion
   mehr, sondern eine Frage. */
.spido .seitenkopf .kopfaktion{flex:0 0 auto;display:flex;gap:12px;align-items:center}

/* ---------------------------------------------------------------------
   StatusBadge
   Sechs Namen, fuenf Stufen, eine Darstellung. Nicht klickbar - Status
   ist Information, keine Aktion (Punkt 13 der Spezifikation).
   --------------------------------------------------------------------- */
.spido .status{
  display:inline-flex;align-items:center;gap:7px;
  padding:4px 12px;border-radius:var(--spido-radius-pille);
  font-size:12.5px;font-weight:var(--spido-fw-halb);
  letter-spacing:.01em;white-space:nowrap;cursor:default;
}
.spido .status::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:currentColor;flex:none;
}
.spido .status.offen   {background:var(--spido-bg-2);color:var(--spido-text-leise)}
.spido .status.bereit  {background:var(--spido-lavendel-cta);color:var(--spido-purple)}
.spido .status.arbeit  {background:var(--spido-terracotta-hell);color:var(--spido-terracotta-tief)}
.spido .status.pruefung{background:var(--spido-bg-lavendel);color:var(--spido-purple-tief)}
.spido .status.fertig  {background:var(--spido-salbei-050);color:var(--spido-gruen)}

/* ---------------------------------------------------------------------
   EmptyState
   Eine leere Ansicht bleibt nicht leer: sie sagt, was fehlt, und bietet
   den naechsten Schritt an (Punkt 18).
   --------------------------------------------------------------------- */
.spido .leer{
  background:var(--spido-bg-2);border-radius:var(--spido-radius-karte);
  padding:clamp(28px,4vw,44px);text-align:center;
}
.spido .leer h3{margin:0 0 8px;font-size:19px;color:var(--spido-text)}
.spido .leer p{
  margin:0 auto var(--spido-space-md);max-width:44ch;
  color:var(--spido-text-leise);font-size:var(--spido-body);
}
.spido .leer .btnrow{justify-content:center;margin-top:0}

/* ---------------------------------------------------------------------
   Klickbar oder nicht (Punkt 13)
   Eine Karte, die sich anfassen laesst, sagt es an jeder Stelle gleich:
   Zeiger, Anhebung, Winkel rechts. Eine Karte ohne Ziel tut nichts
   davon - sonst greift jemand ins Leere.
   --------------------------------------------------------------------- */
.spido a.karte,.spido .karte[role="button"]{
  display:flex;align-items:center;gap:var(--spido-space-md);
  padding:clamp(16px,2vw,22px);background:#fff;
  border-radius:var(--spido-radius-karte);
  box-shadow:var(--spido-schatten-papier);
  cursor:pointer;text-decoration:none;
  transition:transform var(--spido-zeit-schnell) ease,
             box-shadow var(--spido-zeit-schnell) ease;
}
.spido a.karte:hover,.spido .karte[role="button"]:hover{
  transform:translateY(-1px);box-shadow:var(--spido-schatten-blatt);
}
.spido a.karte::after,.spido .karte[role="button"]::after{
  content:"→";margin-left:auto;flex:none;
  color:var(--spido-purple);font-size:17px;
}
.spido .karte-inhalt{flex:1;min-width:0}
.spido .karte-titel{
  display:block;font-weight:var(--spido-fw-halb);
  color:var(--spido-text);margin:0 0 3px;
}
.spido .karte-zeile{
  display:block;font-size:var(--spido-body-klein);
  color:var(--spido-text-leise);
}

@media(max-width:600px){
  .spido .seitenkopf .kopfaktion{width:100%}
  .spido .seitenkopf .kopfaktion .btn{width:100%;justify-content:center}
}

/* ---------------------------------------------------------------------
   CaseInput (Entwicklerspezifikation Kostenloser Test, Punkt 16)
   Unterlagen und Gespraech sind zwei Eingaenge derselben Aufnahme -
   also stehen sie gleichrangig untereinander, mit derselben Marke
   darueber. Keiner der beiden ist ein Nachtrag.
   --------------------------------------------------------------------- */
.spido .eingabemarke{
  font-size:var(--spido-label);font-weight:var(--spido-fw-kraeftig);
  letter-spacing:var(--spido-ls-label);text-transform:uppercase;
  color:var(--spido-text-leise);
  margin:var(--spido-space-lg) 0 10px;
}
.spido .eingabemarke:first-of-type{margin-top:0}
.spido .eingaenge{display:flex;gap:12px;flex-wrap:wrap}
.spido .eingaenge .btn.ghost{
  border:1px solid var(--spido-linie);background:#fff;
  padding:12px 18px;border-radius:var(--spido-radius-sm);
  color:var(--spido-text);font-weight:var(--spido-fw-halb);
}
.spido .eingaenge .btn.ghost:hover{
  border-color:var(--spido-purple);color:var(--spido-purple);
  text-decoration:none;
}
/* Der Punkt vor "Gespraech aufnehmen" - dasselbe Zeichen, das jeder
   Rekorder traegt. */
.spido .aufnahmepunkt{
  width:9px;height:9px;border-radius:50%;
  background:var(--spido-terracotta-tief);flex:none;
}

/* Der Hinweis auf die Registrierung steht bewusst unter der
   Hauptaktion und bleibt sekundaer: Er soll ankuendigen, nicht
   verhandeln (Punkt 6). */
.spido .anmeldehinweis{
  margin:12px 0 0;font-size:13.5px;line-height:1.5;
  color:var(--spido-text-leise);max-width:52ch;
}

/* Der UpgradePrompt (UX-Logik V2, Punkt 28). Er sitzt auf dem
   EmptyState auf, weil er dieselbe Aufgabe hat: sagen, was ist, und den
   naechsten Schritt anbieten. Der Rahmen in Lila zeigt an, dass es um
   eine Entscheidung geht - nicht um eine Sperre. */
.spido .leer.aufwerten{
  background:var(--spido-bg-lavendel);
  text-align:left;
  margin:0 0 var(--spido-space-lg);
}
.spido .leer.aufwerten h3{color:var(--spido-text)}
.spido .leer.aufwerten p{margin-left:0;max-width:56ch}
.spido .leer.aufwerten .btnrow{justify-content:flex-start}

/* Gruppen in der Uebersicht (UX-Logik V2, Punkt 23). Die Marke ist
   leise: Was zaehlt, sind die Faelle darunter, nicht die Ordnung. */
.spido .fallgruppe{
  font-size:var(--spido-label);font-weight:650;letter-spacing:.14em;
  text-transform:uppercase;color:var(--spido-text-leise);
  margin:var(--spido-space-lg) 0 12px;
}
.spido .fallgruppe:first-child{margin-top:0}

/* Die Einwilligungsbestaetigung vor dem Rekorder in der Eingabe. Sie
   steht bewusst darueber und nicht daneben: Ohne sie wird der
   Aufnahmeknopf nicht frei, und das soll man lesen, bevor man tippt. */
.spido .tonzustimmung{
  display:flex;gap:12px;align-items:flex-start;
  font-size:var(--spido-body-klein);line-height:1.55;
  color:var(--spido-text-2);margin:0 0 16px;
}
.spido .tonzustimmung input{
  margin-top:3px;width:18px;height:18px;flex:0 0 18px;
  accent-color:var(--spido-purple);
}
.spido .verwerfzeile{margin:12px 0 0;text-align:center}
.spido .verwerfzeile .lnk{
  padding:0;color:var(--spido-text-leise);
  font-weight:var(--spido-fw-halb);font-size:14px;
}

/* =====================================================================
   CaseInput (Component Standard, Punkte 4 bis 12)
   ---------------------------------------------------------------------
   Zwei Karten, zwei Inputarten, eine Aufnahme. Getrennt, damit klar
   ist, was wohin gehoert - aber sichtbar zusammengehoerig, weil beides
   denselben Fall fuellt.
   ===================================================================== */
.spido .eingabekarte{
  background:var(--spido-bg-2);
  border-radius:var(--spido-radius-karte);
  padding:clamp(18px,2.4vw,26px);
  margin:0 0 var(--spido-space-md);
}
.spido .kartenkopf{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;margin:0 0 12px;
}
.spido .kartenkopf .eingabemarke{margin:0}
.spido .kartenzahl{
  font-size:var(--spido-mini);color:var(--spido-text-leise);
  font-weight:var(--spido-fw-halb);white-space:nowrap;
}

/* Die Uploadflaeche ist Einladung, kein Hero: kompakt genug, dass die
   Karte darunter noch ins Bild passt. */
.spido .eingabekarte .drop{
  background:#fff;border:1.5px dashed var(--spido-linie);
  border-radius:var(--spido-radius-sm);
  padding:22px 18px;text-align:center;cursor:pointer;
}
.spido .eingabekarte .drop.over{border-color:var(--spido-purple)}
.spido .eingabekarte .drop svg{
  width:26px;height:26px;color:var(--spido-purple);margin:0 auto 8px;display:block;
}
.spido .eingabekarte .drop p{
  margin:0 0 4px;font-weight:var(--spido-fw-halb);
  color:var(--spido-text);font-size:var(--spido-body);max-width:none;
}
.spido .eingabekarte .drop small{
  display:block;color:var(--spido-text-leise);font-size:var(--spido-mini);
}
.spido .dropaktionen{
  display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px;
}
.spido .dropaktionen .btn.ghost{
  border:1px solid var(--spido-linie);background:#fff;
  padding:9px 16px;border-radius:var(--spido-radius-sm);
  font-size:var(--spido-body-klein);color:var(--spido-text);
}
.spido .dropaktionen .btn.ghost:hover{
  border-color:var(--spido-purple);color:var(--spido-purple);text-decoration:none;
}
/* Mehrere Handlungen in einer Zeile brauchen einen Abstand - ohne ihn
   lesen sich "Neu aufnehmen" und "Weitere Datei" als ein Satz. */
.spido .kartenaktionen{margin-top:12px;display:flex;gap:20px;flex-wrap:wrap}
.spido .beispieltext{
  margin:14px 0 0;font-size:var(--spido-body-klein);
  color:var(--spido-text-leise);line-height:1.55;max-width:none;
}
.spido .beispieldaten{
  margin:8px 0 0;font-size:var(--spido-body-klein);
  color:var(--spido-text-leise);
}
.spido .beispieldaten .lnk{
  padding:0;color:var(--spido-purple);font-weight:var(--spido-fw-halb);
  font-size:var(--spido-body-klein);
}

/* Zwei gleichwertige Wege zum Erstgespraech. Gleiche Groesse, gleiche
   Gestalt - keiner ist der Hauptweg. */
.spido .audiowege{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.spido .audioweg{
  display:block;text-align:left;background:#fff;border:1px solid var(--spido-linie);
  border-radius:var(--spido-radius-sm);padding:18px;cursor:pointer;font:inherit;
  transition:border-color var(--spido-zeit-schnell) ease;
}
.spido .audioweg:hover{border-color:var(--spido-purple)}
.spido .audioweg .wegicon{
  display:inline-flex;width:34px;height:34px;border-radius:10px;
  background:var(--spido-lavendel-cta);color:var(--spido-purple);
  align-items:center;justify-content:center;margin:0 0 10px;
}
.spido .audioweg .wegicon svg{width:19px;height:19px}
.spido .audioweg b{
  display:block;color:var(--spido-text);font-weight:var(--spido-fw-halb);
  margin:0 0 2px;
}
.spido .audioweg > span:not(.wegicon){
  display:block;font-size:var(--spido-body-klein);
  color:var(--spido-text-leise);line-height:1.5;
}
.spido .audioweg em{
  display:block;margin-top:12px;font-style:normal;
  color:var(--spido-purple);font-weight:var(--spido-fw-halb);
  font-size:var(--spido-body-klein);
}

/* ConsentNotice - ueberall dieselbe Gestalt. */
.spido .einwilligungshinweis{
  display:flex;gap:10px;align-items:flex-start;
  margin:16px 0 0;font-size:var(--spido-body-klein);
  line-height:1.55;color:var(--spido-text-leise);
}
.spido .einwilligungshinweis svg{
  width:17px;height:17px;flex:none;margin-top:2px;color:var(--spido-purple);
}

.spido .files .fansehen{
  margin-left:12px;color:var(--spido-purple);
  font-weight:var(--spido-fw-halb);font-size:13px;white-space:nowrap;
}

@media(max-width:600px){
  /* Punkt 34: auf dem Handy untereinander. Fotografieren steht dort
     oben - dort wird es am haeufigsten gebraucht. */
  .spido .audiowege{grid-template-columns:1fr}
  .spido .dropaktionen{flex-direction:column-reverse}
  .spido .dropaktionen .btn.ghost{width:100%;justify-content:center}
}

/* Die uebernommene schriftliche Einwilligung (Component Standard,
   Punkt 19). Sie meldet einen erledigten Schritt - deshalb dieselbe
   gruene Familie wie "Fertig", nicht das Lila der Aktionen. */
.spido .einwilligung-erledigt{
  display:inline-block;margin:0 0 12px;padding:5px 12px;
  border-radius:var(--spido-radius-pille);
  background:var(--spido-salbei-050);color:var(--spido-gruen);
  font-size:13px;font-weight:var(--spido-fw-halb);
}

/* Die Bedienung waehrend der Aufnahme (Component Standard, Punkt 21).
   Sie ersetzt das Mikrofon, solange aufgenommen wird - zwei Knoepfe an
   der Stelle, an der eben noch einer war, statt drei nebeneinander. */
.spido .reclauf{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.spido .reclauf .btn.ghost{
  border:1px solid var(--spido-linie);background:#fff;
  padding:10px 20px;border-radius:var(--spido-radius-sm);
  color:var(--spido-text);font-weight:var(--spido-fw-halb);
}
.spido .reclauf .btn.ghost:hover{
  border-color:var(--spido-purple);color:var(--spido-purple);text-decoration:none;
}
/* Beenden ist die Aktion, die den Vorgang abschliesst - sie traegt die
   Farbe, die Pause nicht. */
.spido .reclauf .rec-stop{
  border-color:var(--spido-purple);color:var(--spido-purple);
}

/* =====================================================================
   Dokumentaktionen und Sendedialog (Ergaenzung 02, Punkte 11 und 16)
   ===================================================================== */
.spido .dokaktionen{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 0}
.spido .dokaktionen .btn.ghost{
  border:1px solid var(--spido-linie);background:#fff;
  padding:8px 16px;border-radius:var(--spido-radius-sm);
  font-size:var(--spido-body-klein);color:var(--spido-text);
}
.spido .dokaktionen .btn.ghost:hover{
  border-color:var(--spido-purple);color:var(--spido-purple);text-decoration:none;
}

dialog.sendedialog{
  border:none;border-radius:var(--spido-radius-karte);
  padding:clamp(24px,3vw,34px);max-width:460px;width:calc(100% - 32px);
  box-shadow:0 24px 60px rgba(60,45,30,.22);
  font-family:var(--spido-font);color:var(--spido-text-2);
}
dialog.sendedialog::backdrop{background:rgba(31,28,26,.42)}
dialog.sendedialog h3{
  margin:0 0 4px;font-size:20px;color:var(--spido-text);
  font-weight:var(--spido-fw-halb);
}
dialog.sendedialog .sendedatei{
  margin:0 0 20px;font-size:var(--spido-body-klein);
  color:var(--spido-text-leise);
}
dialog.sendedialog .field{margin-bottom:14px;text-align:left}
dialog.sendedialog label{
  display:block;font-weight:var(--spido-fw-halb);
  font-size:var(--spido-body-klein);margin-bottom:6px;color:var(--spido-text);
}
dialog.sendedialog input,dialog.sendedialog textarea{
  width:100%;padding:12px 14px;font:inherit;font-size:16px;
  border:1px solid var(--spido-linie);border-radius:var(--spido-radius-sm);
  background:#fff;color:var(--spido-text);
}
dialog.sendedialog input:focus,dialog.sendedialog textarea:focus{
  outline:none;border-color:var(--spido-purple);
  box-shadow:0 0 0 3px rgba(109,40,217,.13);
}
/* Der Hinweis, dass nichts hinausgeht, steht ueber dem Sendeknopf und
   nicht darunter: Er soll gelesen werden, bevor geklickt wird. */
dialog.sendedialog .sendehinweis{
  margin:0 0 18px;padding:12px 14px;
  background:var(--spido-terracotta-hell);color:var(--spido-terracotta-tief);
  border-radius:var(--spido-radius-sm);
  font-size:13px;line-height:1.5;
}
dialog.sendedialog .btnrow{display:flex;gap:12px;justify-content:flex-end;margin:0}
dialog.sendedialog .btn.ghost{
  border:1px solid var(--spido-linie);background:#fff;
  padding:11px 18px;border-radius:var(--spido-radius-sm);color:var(--spido-text);
}
dialog.sendedialog .btn:not(.ghost){
  background:var(--spido-lavendel-cta);border:2px solid var(--spido-purple);
  color:var(--spido-purple);padding:11px 20px;
  border-radius:var(--spido-radius-sm);font-weight:var(--spido-fw-kraeftig);
}
dialog.sendedialog .btn:not(.ghost):hover{background:var(--spido-purple);color:#fff}

/* Der Kasten nach der Uebernahme (Ergaenzung 02, Punkte 40 und 41).
   Gruen wie jedes erledigte Ding, mit den Aktionen direkt darin - der
   Weg in eine Dokumentenverwaltung entfaellt. */
.spido .uebernommen{
  background:var(--spido-salbei-050);
  border-radius:var(--spido-radius-karte);
  padding:20px 22px;margin:18px 0 0;
}
.spido .uebernommen-titel{
  margin:0 0 4px;font-weight:var(--spido-fw-halb);color:var(--spido-gruen);
}
.spido .uebernommen .dokname{
  margin:0;font-size:var(--spido-body-klein);color:var(--spido-text-2);
  word-break:break-all;
}

/* Verlauf eines Falls (Ergaenzung 02, Punkte 21 und 22). Bewusst
   nuechtern: Er ist Beleg, nicht Nachricht. */
.spido .verlauf{list-style:none;margin:0;padding:0}
.spido .verlauf li{
  display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;
  padding:9px 0;border-bottom:1px solid var(--spido-linie-fein);
  font-size:var(--spido-body-klein);
}
.spido .verlauf li:last-child{border-bottom:none}
.spido .verlauf .vzeit{
  flex:0 0 118px;color:var(--spido-text-leise);
  font-variant-numeric:tabular-nums;
}
.spido .verlauf .vwas{flex:1 1 220px;color:var(--spido-text);word-break:break-all}
.spido .verlauf .vart{color:var(--spido-text-leise)}
.spido .files .fmehr{
  margin-left:12px;padding:0;color:var(--spido-purple);
  font-weight:var(--spido-fw-halb);font-size:13px;white-space:nowrap;
}

/* =====================================================================
   Der Mandantenbereich (Mandantenbereich-Spezifikation, Punkte 1 bis 3)
   ---------------------------------------------------------------------
   Website und Arbeitsbereich sollen sich auf den ersten Blick
   unterscheiden - ohne dass es nach zwei Marken aussieht. Der
   Unterschied liegt in der Struktur, nicht in der Farbe: dort eine
   Zeile oben, hier eine Leiste links, die immer da ist.

   "Doing first": Alles ueber der eigentlichen Handlung kostet Platz.
   Deshalb ist die Leiste schmal, der Seitenkopf knapp und der Weg zur
   ersten Aktion kurz.
   ===================================================================== */
.spido.app{
  display:grid;
  grid-template-columns:248px minmax(0,1fr);
  align-items:start;
  min-height:100vh;
}
.spido.app > .main{min-width:0;padding:0 0 var(--spido-luft)}

/* 16: Die Leiste ist einen Bildschirm hoch - aber sie beginnt nicht
   immer am Bildschirmrand. Ueber ihr kann ein Vorschau-Balken stehen,
   und dann ragten die letzten Zeilen unter die Kante: Von den fuenf
   rechtlichen Zielen waren zwei angeschnitten, auf jeder Laptopbreite.

   Nicht gerechnet wird deshalb NICHTS: kein "100vh minus Balken minus
   Leiste". Solche Formeln stimmen genau so lange, bis jemand eine Zeile
   ergaenzt. Stattdessen darf die Leiste in sich rollen, wenn ihr Inhalt
   einmal nicht passt. In der fertigen Anwendung ohne Balken passiert
   das nie - und wenn doch, ist nichts unerreichbar. */
.spido .seitenleiste{
  position:sticky;top:0;align-self:start;
  height:100vh;max-height:100vh;overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;
  gap:6px;padding:26px 16px 22px;
  background:var(--spido-bg-2);
  border-right:1px solid var(--spido-linie);
}
.spido .seitenleiste .marke-logo{
  margin:0 8px 26px;font-size:24px;
}
.spido .slnav{display:flex;flex-direction:column;gap:2px}
/* Die zweite Gruppe sitzt unten: Konto und Hilfe sind nicht die
   Arbeit, sie sollen erreichbar sein und sonst nichts. */
.spido .slnav.slfuss{
  margin-top:auto;padding-top:16px;
  border-top:1px solid var(--spido-linie);
}
.spido .slnav a{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;border-radius:var(--spido-radius-sm);
  font-size:var(--spido-body-klein);font-weight:var(--spido-fw-halb);
  color:var(--spido-text-2);min-height:var(--spido-touch-min);
  border-bottom:none;
}
.spido .slnav a svg{width:19px;height:19px;flex:none;opacity:.75}
.spido .slnav a:hover{background:rgba(31,28,26,.045);color:var(--spido-text)}
/* Der aktive Punkt traegt Flaeche UND Balken - Farbe allein darf den
   Zustand nicht tragen (Barrierefreiheit, Punkt 20). */
.spido .slnav a.active{
  background:var(--spido-lavendel-cta);color:var(--spido-purple);
  position:relative;
}
.spido .slnav a.active::before{
  content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;
  border-radius:0 3px 3px 0;background:var(--spido-purple);
}
.spido .slnav a.active svg{opacity:1}
.spido .slnav a:focus-visible{
  outline:2px solid var(--spido-purple);outline-offset:2px;
}

/* Die Arbeitsflaeche bleibt hell und ruhig - keine Modulfarben
   (Punkt 3.2 und 3.3). */
:is(.spido.app,.spido.flow) .wrap{padding:0 clamp(24px,3.4vw,48px)}
:is(.spido.app,.spido.flow) .inhalt{padding-top:clamp(20px,2.6vh,34px)}
:is(.spido.app,.spido.flow) .fuss{padding-left:0;padding-right:0}

/* --- Tablet: die Leiste klappt auf Symbole zusammen ----------------- */
@media(max-width:1024px){
  .spido.app{grid-template-columns:72px minmax(0,1fr)}
  .spido .seitenleiste{padding:20px 10px}
  .spido .seitenleiste .marke-logo{
    margin:0 0 20px;justify-content:center;font-size:0;gap:0;
  }
  .spido .seitenleiste .marke-logo svg{width:26px;height:26px}
  .spido .slnav a{justify-content:center;padding:12px 0}
  /* Der Text verschwindet optisch, bleibt aber fuer Screenreader da. */
  .spido .slnav a{font-size:0}
  .spido .slnav a svg{width:21px;height:21px}
  .spido .slnav a.active::before{left:-10px}
}

/* --- Telefon und Tablet: die Leiste wird eine Zeile unten ----------
   Umgeschaltet wird bei 1024 px, nicht bei 700 (2, 29): Ein Tablet im
   Hochformat ist kein kleiner Desktop. Eine 220 px breite Seitenleiste
   nimmt dort ein Viertel der Arbeitsflaeche. */
@media(max-width:1023px){
  .spido.app{grid-template-columns:1fr;min-height:0}
  .spido .seitenleiste{
    position:fixed;left:0;right:0;bottom:0;top:auto;
    height:auto;flex-direction:row;gap:0;
    padding:6px 8px calc(6px + env(safe-area-inset-bottom));
    border-right:none;border-top:1px solid var(--spido-linie);
    z-index:20;
  }
  .spido .seitenleiste .marke-logo{display:none}
  .spido .slnav{flex-direction:row;flex:1;justify-content:space-around}
  .spido .slnav.slfuss{
    margin-top:0;padding-top:0;border-top:none;
    flex:0 0 auto;border-left:1px solid var(--spido-linie);
    padding-left:6px;margin-left:6px;
  }
  .spido .slnav a{padding:8px 12px;font-size:0}
  .spido .slnav a.active::before{
    left:50%;top:auto;bottom:2px;width:18px;height:2px;
    transform:translateX(-50%);border-radius:2px;
  }
  /* Platz fuer die Leiste, damit sie nichts verdeckt. */
  .spido.app > .main{padding-bottom:96px}
}

/* =====================================================================
   Neue Neukundenaufnahme (Mandantenbereich-Spezifikation, Punkte 4 bis 16)
   ---------------------------------------------------------------------
   "Doing first": Was ueber der Handlung steht, kostet Platz. Der
   Seitenkopf ist knapp, der Stepper klein, der Demohinweis klappt auf
   statt breit dazuliegen.
   ===================================================================== */
.spido .seitenkopf.kopfknapp{margin-bottom:var(--spido-space-md)}
.spido .seitenkopf.kopfknapp .kontext{max-width:64ch}

/* Der Stepper orientiert, er fuehrt nicht (Punkt 6). Kleine Ziffern,
   eine Zeile, keine grossen Kreise. */
.spido .prozess{
  display:flex;gap:22px;flex-wrap:wrap;list-style:none;
  margin:0 0 var(--spido-space-lg);padding:0;
  font-size:var(--spido-body-klein);color:var(--spido-text-leise);
}
.spido .prozess li{display:flex;align-items:center;gap:8px}
.spido .prozess li span{
  display:inline-flex;align-items:center;justify-content:center;
  width:21px;height:21px;border-radius:50%;
  background:var(--spido-bg-2);color:var(--spido-text-leise);
  font-size:12px;font-weight:var(--spido-fw-kraeftig);
}
.spido .prozess li.an{color:var(--spido-text);font-weight:var(--spido-fw-halb)}
.spido .prozess li.an span{background:var(--spido-purple);color:#fff}

/* Der Demohinweis: klein im Kopf, vollstaendig beim Aufklappen
   (Punkt 16 und Standard S13). Die Inhalte bleiben - nur ihre
   Flaeche nicht. */
.spido .demozeichen summary{
  list-style:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:var(--spido-radius-pille);
  background:var(--spido-terracotta-hell);color:var(--spido-terracotta-tief);
  font-size:12.5px;font-weight:var(--spido-fw-halb);
  min-height:var(--spido-touch-min);
}
.spido .demozeichen summary::-webkit-details-marker{display:none}
.spido .demozeichen summary:focus-visible{
  outline:2px solid var(--spido-terracotta-tief);outline-offset:2px;
}
.spido .demoinhalt{
  margin-top:10px;padding:14px 16px;max-width:44ch;
  background:var(--spido-terracotta-hell);
  border-radius:var(--spido-radius-sm);
  font-size:13.5px;line-height:1.55;color:var(--spido-terracotta-tief);
}
.spido .demoinhalt p{margin:0 0 8px;color:inherit;font-size:inherit}
.spido .demoinhalt p:last-child{margin:0}

.spido .kartentext{
  margin:0 0 14px;font-size:var(--spido-body-klein);
  color:var(--spido-text-leise);line-height:1.55;max-width:62ch;
}
.spido .eingabekarte .drop p{margin:0 0 12px}
.spido .eingabekarte .drop small{margin-top:12px}

/* Die Beispiele sind sekundaer (Punkt 11): sie stehen zur Verfuegung,
   drangen sich aber nicht vor die Uploadflaeche. */
.spido .beispiele{margin:14px 0 0;font-size:var(--spido-body-klein)}
.spido .beispiele summary{
  cursor:pointer;color:var(--spido-text-leise);
  font-weight:var(--spido-fw-halb);min-height:var(--spido-touch-min);
  display:flex;align-items:center;
}
.spido .beispiele summary:focus-visible{
  outline:2px solid var(--spido-purple);outline-offset:2px;
}
.spido .beispiele ul{
  margin:8px 0 0;padding-left:20px;color:var(--spido-text-leise);
  font-size:var(--spido-body-klein);
}
.spido .beispiele li{margin:0 0 3px}

.spido .gespraechknopf{
  border:1px solid var(--spido-linie);background:#fff;
  padding:12px 20px;border-radius:var(--spido-radius-sm);
  color:var(--spido-text);font-weight:var(--spido-fw-halb);
  gap:10px;
}
.spido .gespraechknopf:hover{
  border-color:var(--spido-purple);color:var(--spido-purple);text-decoration:none;
}
.spido .einwilligungskasten{
  margin:14px 0 0;padding:14px 16px;
  background:var(--spido-bg-lavendel);border-radius:var(--spido-radius-sm);
}
.spido .einwilligungskasten .tonzustimmung{margin:0}

/* =====================================================================
   Druck: die Anwendung gehoert nicht aufs Papier
   ---------------------------------------------------------------------
   Seit die Seitenleiste den App-Kopf ersetzt hat, druckte sie mit - eine
   volle Spalte ueber 100 vh, die jedes Dokument auf Seite 2 schob. Der
   Fehler war nicht zu sehen, solange nur die Einwilligung gedruckt
   wurde und die noch einen horizontalen Kopf hatte.

   Deshalb steht die Regel hier zentral und nicht in einer Seite: Was
   zur Bedienung gehoert, wird nie gedruckt - auf keiner Seite.
   ===================================================================== */
@media print{
  .spido .seitenleiste,
  .spido .topnav,
  .spido .previewbar,
  .previewbar,
  .spido .demobar,
  .spido .demozeichen,
  .spido .promo,
  .spido .foot-dsgvo,
  .spido .fuss,
  .spido .zurueck,
  .spido .prozess,
  .spido .steps,
  .spido .stepcap{display:none!important}

  /* Das Raster der Anwendung faellt in eine Spalte zusammen. Ohne das
     bliebe die Spalte der Leiste als leerer Streifen stehen. */
  .spido,
  .spido.app{
    display:block!important;
    grid-template-columns:none!important;
    min-height:0!important;
    background:#fff!important;
  }
  .spido.app > .main{padding:0!important}
  .spido .wrap{padding:0!important;max-width:none!important}
}

/* Der Anmeldehinweis vor dem Versand nutzt denselben Dialog wie das
   Senden - es ist dieselbe Handlung, nur an einer frueheren Stelle. */
dialog.sendedialog .sendetext{
  margin:0 0 12px;font-size:var(--spido-body-klein);
  line-height:1.55;color:var(--spido-text-2);
}
dialog.sendedialog .btnrow .btn{text-decoration:none}

/* =====================================================================
   LAYOUT-PATTERNS (Ergaenzung 03, Punkte 2 und 34)
   ---------------------------------------------------------------------
   Nicht jede Seite schiebt sich ihr Raster selbst zurecht. Es gibt
   wenige Muster; Seiten fuellen sie.

   MainWithSidebar: ein dominanter Arbeitsbereich links, ein schmaler
   Nebenbereich rechts. Das Verhaeltnis steht hier - nicht in der Seite.
   ===================================================================== */
.spido .layout-mainside{
  display:grid;
  /* 28 % waren 285 px. Darin bricht jeder zweite Satz um: die
     Kartenbeschreibung, die Knopfbeschriftung, der Einwilligungstext
     ueber vier Zeilen. Die Hauptspalte braucht die Breite nicht - sie
     traegt eine Dateiliste. Also 34 % (S29, horizontal vor vertikal). */
  grid-template-columns:minmax(0,66fr) minmax(280px,34fr);
  gap:var(--spido-space-md);
  align-items:start;
}
/* Zwei Spalten, jede fuer sich lang.

   Die Hauptspalte traegt die Arbeit UND die Aktion, untereinander. Das
   ist der Punkt: Stand die Aktionszeile unter dem Gitter, wartete sie
   auf die laengere der beiden Spalten - und das ist die mit der
   Hilfestellung darin. Auf unterlagen.html lag der Knopf deshalb bei
   922 px, waehrend links ab 638 px nichts mehr kam.

   Ueber Gitterzeilen laesst sich das nicht loesen: Zeilen sind geteilt,
   und ein ueberspannendes Element traegt zur Summe aller Zeilen bei,
   die es beruehrt. Eine Spalte, die zwei Dinge untereinander traegt,
   muss ein Element sein. */
.spido .layout-mainside > .spalte-haupt{
  min-width:0;display:flex;flex-direction:column;
  gap:var(--spido-space-sm);
}
.spido .layout-mainside > .spalte-neben{
  display:flex;flex-direction:column;gap:var(--spido-space-sm);
}
/* Innerhalb der Hauptspalte sorgt der Spaltenabstand fuer die Luecke -
   der eigene Aussenrand der Zeile kaeme obendrauf. */
.spido .layout-mainside > .spalte-haupt > .aktionsleiste{margin-top:0}
/* Die letzte Zeile in der Karte ("+ Weitere Unterlagen") trug oben den
   Abstand einer Lesestrecke, und die Karte darunter noch ihr volles
   Polster (S29, Weissraum hat ein Budget). */
:is(.spido.app,.spido.flow) .kartenaktionen{margin-top:6px}
:is(.spido.app,.spido.flow) .eingabekarte > .kartenaktionen:last-child{
  margin-bottom:-4px;
}

/* Umgeschaltet wird bei 1024 px - dort, wo auch die Schale
   umschaltet, und nirgends sonst.

   Vorher stand hier 1100. Zwischen 1024 und 1100 gab es deshalb die
   Mischform, die es nicht geben darf: die Desktop-Seitenleiste neben
   einer einspaltig gestapelten Arbeitsflaeche. Auf einem 1024er Tablet
   im Querformat sah die Seite aus wie ein breites Telefon.

   Ein Breakpoint, eine Zahl. Steht sie an zwei Stellen verschieden,
   entsteht immer ein Streifen dazwischen, den niemand entworfen hat. */
@media(max-width:1023px){
  /* Reicht die Breite nicht, ruecken die Nebenbereiche darunter -
     inhaltlich aendert sich nichts (Punkt 28). */
  .spido .layout-mainside{grid-template-columns:minmax(0,1fr)}
}

/* =====================================================================
   TEXT-HIERARCHIE (Punkte 4 und 41)
   ---------------------------------------------------------------------
   Kartentitel sind fast schwarz und kraeftig - sie muessen sich vom
   erklaerenden Text unterscheiden, sonst liest sich eine Karte als eine
   graue Flaeche. Das kleine Label darueber darf Versalien tragen, der
   Titel nicht.
   ===================================================================== */
.spido .kartenlabel{
  display:block;
  font-size:var(--spido-label);font-weight:var(--spido-fw-kraeftig);
  letter-spacing:var(--spido-ls-label);text-transform:uppercase;
  color:var(--spido-text-leise);margin:0 0 4px;
}
.spido .kartentitel{
  margin:0 0 6px;
  font-size:18px;line-height:1.25;letter-spacing:-.015em;
  font-weight:var(--spido-fw-fett);color:var(--spido-text);
}
.spido .kartenbeschreibung{
  margin:0 0 16px;max-width:58ch;
  font-size:var(--spido-body-klein);line-height:1.55;
  color:var(--spido-text-leise);
}

/* =====================================================================
   ICON-SYSTEMATIK (Punkte 7, 9 und 36)
   ---------------------------------------------------------------------
   Ein Satz, eine Strichstaerke, zwei Groessen. Das Abzeichen vor einem
   Kartentitel sieht ueberall gleich aus - sonst entstehen mit jeder
   Seite neue Kreise in neuen Toenen.
   ===================================================================== */
.spido .kartenicon{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;flex:none;
  border-radius:11px;
  background:var(--spido-lavendel-cta);color:var(--spido-purple);
  margin:0 0 12px;
}
.spido .kartenicon svg{width:20px;height:20px}
/* Ein Icon in einem Knopf traegt die Farbe des Knopfes, keine eigene. */
.spido .btn svg,.spido .lnk svg{
  width:17px;height:17px;flex:none;color:currentColor;
}

/* =====================================================================
   PAGE DENSITY (Punkt 3 und 40)
   ---------------------------------------------------------------------
   Spido ist Arbeitssoftware. Eine Komponente bekommt so viel Hoehe, wie
   ihre Aufgabe braucht - keine Flaeche zur Wirkung.
   ===================================================================== */
:is(.spido.app,.spido.flow) .eingabekarte{padding:clamp(14px,1.6vw,18px)}
:is(.spido.app,.spido.flow) .eingabekarte .drop{padding:18px 16px}
:is(.spido.app,.spido.flow) .eingabekarte .drop svg{width:22px;height:22px;margin-bottom:6px}
:is(.spido.app,.spido.flow) .eingabekarte + .eingabekarte{margin-top:var(--spido-space-sm)}

/* =====================================================================
   VERDICHTUNG (Punkt 27)
   ---------------------------------------------------------------------
   Je weiter ein Schritt erledigt ist, desto weniger Platz braucht er.
   Eine Uploadflaeche ist eine Einladung; sobald Dateien da sind, ist die
   Liste wichtiger als die Einladung.
   ===================================================================== */
.spido .erledigt{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:var(--spido-radius-sm);
  background:var(--spido-salbei-050);color:var(--spido-gruen);
  font-size:var(--spido-body-klein);font-weight:var(--spido-fw-halb);
}
.spido .erledigt .erledigt-rest{
  margin-left:auto;font-weight:var(--spido-fw-normal);
  color:var(--spido-text-leise);
}

/* Der Gespraechsknopf ist ein Knopf, kein Textlink. `.btn.ghost` ist
   spezifischer als eine einzelne Klasse und hat ihn sonst ueberstimmt -
   deshalb hier mit derselben Waffe. */
.spido .btn.ghost.gespraechknopf{
  border:1px solid var(--spido-linie);background:#fff;
  padding:12px 18px;border-radius:var(--spido-radius-sm);
  color:var(--spido-text);font-weight:var(--spido-fw-halb);
  gap:10px;justify-content:center;text-align:left;
}
.spido .btn.ghost.gespraechknopf:hover{
  border-color:var(--spido-purple);color:var(--spido-purple);
  text-decoration:none;
}
/* Die beiden Uploadaktionen stehen nebeneinander, solange sie passen.
   Mit Icons wurden sie breiter und brachen um - das Polster darf dafuer
   schmaler sein, die Beschriftung nicht kuerzer. */
.spido .dropaktionen{gap:8px}
.spido .dropaktionen .btn.ghost{
  padding:9px 13px;gap:8px;font-size:14.5px;white-space:nowrap;
}

/* Die Arbeitsflaeche ist keine Lesestrecke (Punkt 2 und Standard S01).
   `.schmal` begrenzt auf Lesebreite - richtig fuer Formulare und Texte,
   falsch fuer eine zweispaltige Arbeitsflaeche: Dort wurde die
   Hauptspalte so schmal, dass zwei Knoepfe nebeneinander nicht mehr
   passten. */
.spido .wrap.arbeit{max-width:1180px}

/* Die Einwilligungswahl im AudioFlow (Ergaenzung 03, Punkt 23).
   Zwei Zeilen, mehr nicht - alles Weitere klappt auf. */
.spido .wahlzeile{
  display:flex;align-items:flex-start;gap:12px;
  padding:12px 0;font-size:var(--spido-body-klein);
  color:var(--spido-text);line-height:1.5;cursor:pointer;
  border-top:1px solid var(--spido-linie-fein);
}
.spido .wahlzeile:first-of-type{border-top:none}
.spido .wahlzeile input{
  margin-top:2px;width:18px;height:18px;flex:0 0 18px;
  accent-color:var(--spido-purple);
}
.spido .wahlfolge{padding:0 0 12px 30px}
.spido .einwilligungstext summary{
  cursor:pointer;color:var(--spido-purple);
  font-weight:var(--spido-fw-halb);font-size:var(--spido-body-klein);
  min-height:var(--spido-touch-min);display:flex;align-items:center;
}
.spido .einwilligungstext .mustertext{
  margin-top:8px;padding:14px 16px;
  background:var(--spido-bg-lavendel);border:none;
  border-radius:var(--spido-radius-sm);
  font-size:14px;line-height:1.6;color:var(--spido-text-2);font-style:italic;
}

/* Der Rekorder passt sich der Karte an (Punkt 25): kein Kreis, der die
   halbe Flaeche fuellt. */
.spido .eingabekarte .recwrap{text-align:center;padding:4px 0 0}
.spido .eingabekarte .recbtn{width:64px;height:64px}
.spido .eingabekarte .recbtn svg{width:26px;height:26px}
.spido .eingabekarte .reczeit{
  font-size:22px;font-weight:var(--spido-fw-fett);
  letter-spacing:.04em;margin:10px 0 2px;
  font-variant-numeric:tabular-nums;
}
.spido .eingabekarte .recstatus{
  color:var(--spido-text-leise);font-size:var(--spido-body-klein);
  max-width:46ch;margin:0 auto;
}
.spido .eingabekarte .reclauf{margin-top:14px}

/* =====================================================================
   VIEWPORT-FIRST (Design-System-Ergaenzung, Punkte 1 bis 10)
   ---------------------------------------------------------------------
   Referenz ist der Laptop: 1366 x 768, abzueglich Browserleisten also
   rund 678 px nutzbare Hoehe. Was eine zentrale Arbeitsansicht braucht -
   Ort, Stand, Eingaben, naechster Schritt -, soll gleichzeitig sichtbar
   sein.

   Der Rhythmus gilt NUR in der Anwendung (.spido.app). Lesestrecken und
   die oeffentliche Website behalten ihre Luft; dort ist sie richtig.

   Gemessen wird mit `werkzeuge/probe-viewport.py`. Wer diese Werte
   aendert, misst danach wieder.
   ===================================================================== */
:is(.spido.app,.spido.flow) .inhalt{padding-top:16px;padding-bottom:var(--spido-space-lg)}

/* Punkt 9: Der Kopf beginnt die Arbeit, er zelebriert sie nicht. */
:is(.spido.app,.spido.flow) .seitenkopf.kopfknapp{margin-bottom:12px}
:is(.spido.app,.spido.flow) .seitenkopf h1{font-size:clamp(22px,1.9vw,27px);margin-bottom:4px}
:is(.spido.app,.spido.flow) .seitenkopf .kontext{font-size:14.5px;line-height:1.45;max-width:96ch}

:is(.spido.app,.spido.flow) .prozess{margin-bottom:16px;gap:18px}

/* Punkt 4 und 5: Keine Hoehe aus Gestaltungsgruenden, und ein Budget
   fuer den Weissraum. Die Karten tragen wenig Inhalt - sie duerfen
   nicht ein Drittel des Bildes einnehmen. */
:is(.spido.app,.spido.flow) .layout-mainside{gap:16px}
:is(.spido.app,.spido.flow) .eingabekarte{padding:14px 18px}
:is(.spido.app,.spido.flow) .eingabekarte .kartenicon{width:30px;height:30px;border-radius:9px;margin-bottom:8px}
:is(.spido.app,.spido.flow) .eingabekarte .kartenicon svg{width:17px;height:17px}
:is(.spido.app,.spido.flow) .eingabekarte .kartentitel{font-size:16.5px;margin-bottom:4px}
:is(.spido.app,.spido.flow) .eingabekarte .kartenbeschreibung{margin-bottom:12px;font-size:14px}
:is(.spido.app,.spido.flow) .eingabekarte .drop{padding:14px 14px}
:is(.spido.app,.spido.flow) .eingabekarte .drop p{margin:0 0 10px;font-size:14.5px}
:is(.spido.app,.spido.flow) .eingabekarte .drop small{margin-top:10px;font-size:12px}
:is(.spido.app,.spido.flow) .eingabekarte + .eingabekarte{margin-top:0}
:is(.spido.app,.spido.flow) .spalte-neben{gap:16px}

/* Punkt 8: Die Hauptaktion liegt im Bild - also direkt unter der
   Arbeitsflaeche, nicht hinter einem Absatz Erklaerung. Der Hinweis auf
   die Registrierung steht daneben, nicht darunter. */
:is(.spido.app,.spido.flow) .aktionsleiste{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin:16px 0 0;
}
:is(.spido.app,.spido.flow) .aktionsleiste .btn{order:2}
:is(.spido.app,.spido.flow) .aktionsleiste .anmeldehinweis{
  order:1;margin:0;flex:1 1 320px;font-size:13px;line-height:1.45;
}
:is(.spido.app,.spido.flow) .aktionsleiste .abbrechen{order:3}

@media(max-width:1100px){
  /* Untereinander darf es laenger werden - dann ist Scrollen richtig. */
  :is(.spido.app,.spido.flow) .aktionsleiste{margin-top:20px}
}

/* Hilfestellung im Nebenbereich (Design-System-Ergaenzung, Punkt 7).
   Sie ist erreichbar und kostet zwei Zeilen - nicht ein Drittel des
   Bildes. */
.spido .wissen{
  background:var(--spido-bg-2);border-radius:var(--spido-radius-sm);
  padding:10px 14px;font-size:var(--spido-body-klein);
  color:var(--spido-text-leise);
}
.spido .wissen summary{
  display:flex;align-items:center;gap:8px;cursor:pointer;
  color:var(--spido-text);font-weight:var(--spido-fw-halb);
  min-height:26px;list-style:none;
}
.spido .wissen summary::-webkit-details-marker{display:none}
.spido .wissen summary svg{width:16px;height:16px;color:var(--spido-purple);flex:none}
.spido .wissen summary:focus-visible{outline:2px solid var(--spido-purple);outline-offset:2px}
.spido .wissen p{margin:8px 0 0;font-size:13.5px;line-height:1.5;color:inherit}
.spido .wissen .lnk{padding:0;font-size:13.5px;color:var(--spido-purple);font-weight:600}

/* Zweiter Durchgang Viewport-First: gemessen im AudioFlow, gilt fuer
   die ganze Anwendung. Die Werte stammten aus der Lesestrecke. */
:is(.spido.app,.spido.flow) .eingabekarte{margin-bottom:16px}
:is(.spido.app,.spido.flow) .wahlzeile{padding:9px 0}
:is(.spido.app,.spido.flow) .eingabekarte .recwrap{padding-top:0}
:is(.spido.app,.spido.flow) .eingabekarte .recbtn{width:56px;height:56px}
:is(.spido.app,.spido.flow) .eingabekarte .recbtn svg{width:23px;height:23px}
:is(.spido.app,.spido.flow) .eingabekarte .reczeit{font-size:20px;margin:6px 0 2px}
:is(.spido.app,.spido.flow) .eingabekarte .reclauf{margin-top:10px}

/* Progressive Density (Punkt 6): Ein erledigter Schritt schrumpft auf
   seine Aussage zusammen. Die Karte bleibt stehen, ihr Inhalt nicht. */
.spido .schrittfertig{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:var(--spido-body-klein);color:var(--spido-gruen);
  font-weight:var(--spido-fw-halb);
}
.spido .schrittfertig .aendern{
  margin-left:auto;padding:0;color:var(--spido-purple);
  font-weight:var(--spido-fw-halb);font-size:13.5px;
}

/* Letzte Zeile Viewport-First, gemessen im AudioFlow: Der Rueckweg
   stand mit dem Abstand einer Lesestrecke ueber der Arbeit, und die
   Karten trugen oben und unten dasselbe Polster wie seitlich. */
:is(.spido.app,.spido.flow) .zurueck{margin-bottom:8px}
:is(.spido.app,.spido.flow) .eingabekarte{padding:14px 18px 12px}
/* Zwei Pixel fehlten noch - sie steckten im Aussenrand der letzten
   Karte, den unterhalb ohnehin nichts mehr braucht. */
:is(.spido.app,.spido.flow) .eingabekarte:last-child{margin-bottom:0}

/* =====================================================================
   FlowHeader (Neukunden-Onboarding, Punkt 1)
   ---------------------------------------------------------------------
   Vor dem Abschluss des Onboardings ist der Nutzer noch nicht in Spido
   eingerichtet. Er bekommt deshalb keine Arbeitsnavigation, sondern nur
   die Marke, die Zusicherung und - falls er wiederkommt - den Weg
   hinein.
   ===================================================================== */
.spido .flowkopf{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  /* Was die Seitenleiste seitlich kostete, kostet der Kopf in der
     Hoehe - und Hoehe ist auf einem Laptop das knappe Gut (S29). */
  padding:11px clamp(24px,4vw,48px);
  border-bottom:1px solid var(--spido-linie);
}
.spido .flowkopf .marke-logo{font-size:21px;margin:0}
.spido .flowkopf .flowsicher{
  margin-left:auto;font-size:var(--spido-body-klein);
  color:var(--spido-text-leise);
}
.spido .flowkopf .flowanmelden{
  font-size:var(--spido-body-klein);font-weight:var(--spido-fw-halb);
  color:var(--spido-purple);
}

/* ---------------------------------------------------------------------
   Der Onboarding-Block: mehrere Abschnitte, EINE Ansicht (Punkt 4).

   Untereinander gestapelt ergaeben Zugang, Pflegedienst und
   Vereinbarungen genau den Seiten-Marathon, den sie ersetzen sollen -
   nur ohne Seitenwechsel. S29 sagt: horizontal vor vertikal. Also
   stehen sie nebeneinander, sobald der Platz reicht.

   Die Vereinbarungen laufen ueber die volle Breite: Es sind zwei
   Zeilen, keine Spalte, und sie sind die letzte Entscheidung vor dem
   Knopf.
   --------------------------------------------------------------------- */
.spido .obgitter{
  display:grid;gap:var(--spido-space-md);
  /* Schmalere Spuren, dafuer mehr davon: So kann ein Block zwei belegen,
     ohne dass die anderen unter 235 px fallen. */
  /* 215 px, nicht 235: Bei 1366 px bleiben nach Wrap und Polstern 1008 px;
     vier Spuren mit drei Luecken lassen 234 px je Spur. Mit 235 kippt das
     Gitter auf drei Spuren, und der breite Block draengt die
     Vereinbarungen in eine zweite Reihe - die Karte wird hoeher, obwohl
     Platz da ist. */
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  align-items:start;
}
/* Der Pflegedienst traegt sechs Felder, der Zugang drei, die
   Vereinbarungen zwei Zeilen. Gleich breite Spalten machen daraus einen
   hohen Stapel neben zwei halb leeren - die Karte ist so hoch wie ihre
   laengste Spalte. */
.spido .obblock--weit{grid-column:span 2}
@media(max-width:900px){
  .spido .obblock--weit{grid-column:auto}
}
.spido .obblock{margin:0}
/* Ein Block, der ueber die ganze Breite geht - etwa die Ruecksprache
   bei einer bekannten IK, die keine Spalte neben sich duldet. */
.spido .obblock--breit{grid-column:1/-1}
.spido .obblock .kartentitel{margin-bottom:10px}
.spido .obblock .field:last-child{margin-bottom:0}
.spido .obblock .fhint{margin:6px 0 0;font-size:13px}

/* Arbeitsrhythmus fuer Eingaben (S29). 98 px Zeilenhoehe stammen aus
   der Lesestrecke; hier sind es 77, und man liest sie genauso gut. */
.spido.flow .field{margin-bottom:8px}
.spido.flow .field label{font-size:13.5px;margin-bottom:4px}
.spido.flow .field input,
.spido.flow .field select{padding:9px 13px;font-size:15px}
.spido.flow .fzeile{gap:11px}
/* .fzeile teilt 34/66 - richtig fuer PLZ und Ort, falsch fuer zwei
   gleichrangige Felder. */
.spido .fzeile--halb{grid-template-columns:1fr 1fr}
@media(max-width:640px){ .spido .fzeile--halb{grid-template-columns:1fr} }
.spido.flow .vereinbarung{margin:0 0 10px;font-size:14.5px;line-height:1.45}
.spido.flow .vereinbarung:last-child{margin-bottom:0}

/* Kopfzeile: Titel links, Stand der Aufnahme rechts. Untereinander
   waeren es drei Reihen, waehrend daneben Platz leer steht. */
.spido.flow .kopfzeile{
  display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
  margin-bottom:10px;
}
.spido.flow .kopfzeile .entwurfszeile{margin:0 0 0 auto}

/* Der Kopf einer Flow-Seite braucht nicht den Anlauf einer
   Lesestrecke - die Aufgabe faengt sofort an. */
.spido.flow .inhalt{padding-top:10px}
.spido.flow .seitenkopf{margin-bottom:8px}
.spido.flow .seitenkopf h1{font-size:24px;margin-bottom:2px}
.spido.flow .seitenkopf .kontext{font-size:14.5px;line-height:1.45}
.spido.flow .prozess{margin-bottom:10px}
.spido.flow .wrap.schmal{max-width:1060px}
.spido.flow .aktionsleiste{margin-top:10px}

/* Die Meldungszeile hielt ihren Platz frei, auch wenn nichts darin
   stand - 28 px, auf jeder Flow-Seite, fuer nichts. */
.spido.flow .msg:empty{min-height:0;margin:0}
.spido.flow .fhint{font-size:13.5px;line-height:1.45}
.spido.flow .eingabekarte{padding:16px 18px}
.spido .entwurfszeile{
  display:inline-flex;align-items:center;gap:8px;
  margin:0 0 14px;padding:7px 13px;
  background:var(--spido-salbei-050);color:var(--spido-gruen);
  border-radius:var(--spido-radius-pille);
  font-size:13.5px;font-weight:var(--spido-fw-halb);
}
/* Ein erledigter Schritt im Fortschritt (Punkt 16). */
.spido .prozess li.fertig{color:var(--spido-gruen)}
.spido .prozess li.fertig span{
  background:var(--spido-salbei-050);color:var(--spido-gruen);
}

/* ---------------------------------------------------------------------
   Dateiliste im Arbeitsrhythmus (S29, Progressive Density).

   14 px Polster oben und unten plus 16 px Schrift ergeben 65 px pro
   Datei. Bei drei Unterlagen und einer Tonaufnahme schiebt das die
   Hauptaktion 250 px unter die Falz - und die Liste ist genau das,
   was nach dem Hochladen waechst. Sie darf nicht die teuerste Zeile
   der Seite sein.
   --------------------------------------------------------------------- */
:is(.spido.app,.spido.flow) .files{margin-top:12px}
:is(.spido.app,.spido.flow) .files li{padding:9px 2px;font-size:15px;gap:11px}
:is(.spido.app,.spido.flow) .files .fsize{font-size:13px}

/* ---------------------------------------------------------------------
   Letzte Zeile Viewport-First, gemessen an der Neukundenaufnahme mit
   drei Unterlagen und einer Tonaufnahme - dem Zustand, in dem ein
   Neukunde die Seite wirklich sieht.

   Die Werte darin stammten aus der oeffentlichen Website: ein Knopf mit
   15/28 Polster, 16 px Spaltenabstand, ein Anlauf von 20 px ueber der
   Aufgabe. Zusammen sind das die 21 px, die den naechsten Schritt aus
   dem Bild geschoben haben.
   --------------------------------------------------------------------- */
:is(.spido.app,.spido.flow) .aktionsleiste .btn{padding:12px 25px}
.spido .layout-mainside > .spalte-haupt{gap:12px}
/* In einer Flex-Spalte zaehlt der Abstand der Spalte - der Aussenrand
   der Karte kaeme obendrauf. Die Ausnahmeregel dafuer galt bisher nur
   dem letzten Kind, und das ist seit dem Umbau die Aktionszeile. */
.spido .layout-mainside > .spalte-haupt > *{margin-top:0;margin-bottom:0}
/* Kein Griff nach .inhalt und .prozess: Fuer Flow-Seiten stehen dort
   schon engere Werte, und eine gleich spezifische Regel weiter unten
   haette sie wieder aufgeweitet. */

/* =====================================================================
   ERGEBNISSEITE IM ARBEITSBEREICH (S29)
   ---------------------------------------------------------------------
   `.flowwrap` und `.demobar` sind auf 680 px mittig gesetzt - die Masse
   der alten Bestellstrecke. Im Mandantenbereich steht daneben die
   Seitenleiste, und der Rest der Breite blieb leer, waehrend die
   Dokumente untereinander aus dem Bild liefen.
   ===================================================================== */
:is(.spido.app,.spido.flow) .wrap.schmal{max-width:1100px}
:is(.spido.app,.spido.flow) .flowwrap{max-width:none}
:is(.spido.app,.spido.flow) .demobar{max-width:none;margin-bottom:8px;padding:8px 14px}

/* Eine Dokumentzeile ist EINE Zeile.

   Zwei Spalten hatten nichts gebracht: In 430 px bricht "Interne
   Dokumentationsauswertung" neben "Oeffnen und bearbeiten" um, und
   jede Karte war wieder zwei Zeilen hoch. Der Platz liegt nicht in der
   zweiten Spalte, er liegt im <br> zwischen Titel und Beschreibung -
   auf 1100 px stehen beide nebeneinander, mit Raum uebrig.

   Kein Wort geaendert, keine Reihenfolge, kein Weg - nur nebeneinander
   statt untereinander (S29). */
:is(.spido.app,.spido.flow) .docs{margin-top:10px}/* Der erklaerende Absatz stand auf Lesestreckenbreite - hier traegt er
   die Breite der Karte und braucht zwei Zeilen statt vier. */

/* Der Fortschritt trug die Masse der Bestellstrecke: 96 px Balken und
   ein Polster darunter, das eine ganze Zeile kostet. */
/* Der alte Bestellstrecken-Fortschritt: 32-px-Punkte, 96-px-Balken und
   eine eigene Bildunterschrift darunter - zusammen 84 px, bevor die
   Arbeit anfaengt. In der Anwendung sagt er dasselbe in der Haelfte. */
:is(.spido.app,.spido.flow) .steps{margin:0 0 4px}
:is(.spido.app,.spido.flow) .steps .dot{width:22px;height:22px;flex:0 0 22px;font-size:12px}
:is(.spido.app,.spido.flow) .steps .bar{width:52px}
:is(.spido.app,.spido.flow) .stepcap{margin-bottom:8px;font-size:13.5px}

/* HIER LAGEN ZWEI RUINEN.

   Beim Entfernen der `.flowcard`-Regeln (Card Economy, 05.09.) hat ein
   Zeilenfilter nur die SELEKTORZEILEN geloescht und die Rueempfe
   stehengelassen - samt ihrer schliessenden Klammern. Uebrig blieben
   zwei herrenlose Deklarationsbloecke und zwei ueberzaehlige `}`.

   Der Browser meldet so etwas nicht. Er ueberspringt, was er nicht
   zuordnen kann, und macht nach der naechsten Klammer weiter - die
   Datei "funktioniert" also, waehrend Regeln still verschwinden.

   Gefunden mit einer Klammerbilanz ueber die ganze Datei. Die gehoert
   ab jetzt in die Freigabepruefung. */

/* ---------------------------------------------------------------------
   Leerzustand und Empfehlungsbanner im Arbeitsrhythmus (S29).

   Der Leerzustand trug bis zu 44 px Polster ringsum und einen Absatz
   auf 44 Zeichen Breite - er stand mit dem Gewicht einer Startseite in
   einer Uebersicht, in der er nur sagt, dass noch nichts da ist.
   --------------------------------------------------------------------- */
:is(.spido.app,.spido.flow) .leer{padding:clamp(18px,2.2vw,26px)}
:is(.spido.app,.spido.flow) .leer h3{font-size:17.5px;margin-bottom:5px}
:is(.spido.app,.spido.flow) .leer p{
  font-size:14.5px;line-height:1.5;max-width:60ch;
  margin-bottom:var(--spido-space-sm);
}
:is(.spido.app,.spido.flow) .leer .btn{padding:11px 22px;font-size:15.5px}

/* Letzter Durchgang am AudioFlow (S29): Im Gastzustand traegt die Seite
   den FlowHeader statt der Seitenleiste - das kostet oben rund 60 px,
   die seitlich nichts gekostet haben. Sie werden dort geholt, wo am
   meisten Luft ist: um den Aufnahmeknopf. */
:is(.spido.app,.spido.flow) .eingabekarte .recbtn{width:50px;height:50px}
:is(.spido.app,.spido.flow) .eingabekarte .recbtn svg{width:21px;height:21px}
:is(.spido.app,.spido.flow) .eingabekarte .reczeit{font-size:19px;margin:5px 0 2px}
:is(.spido.app,.spido.flow) .eingabekarte .recstatus{
  font-size:13.5px;line-height:1.45;max-width:none;
}
/* Die leere Meldungszeile hielt ihren Platz frei, bevor irgendetwas
   gemeldet wurde. */
:is(.spido.app,.spido.flow) .eingabekarte .msg:empty{min-height:0;margin:0}
:is(.spido.app,.spido.flow) .eingabekarte .reclauf{margin-top:8px}
:is(.spido.app,.spido.flow) .wahlzeile{padding:7px 0}

/* Zwei Arbeitskarten untereinander brauchen keinen Absatzabstand - sie
   sind zwei Schritte derselben Aufgabe. */
:is(.spido.app,.spido.flow) .eingabekarte + .eingabekarte{margin-top:12px}

/* Ein Weg, den es nur in der Vorschau gibt, sagt das auch. Ohne Backend
   kann niemand eine Beitrittsanfrage bestaetigen - der Ablauf soll
   trotzdem durchklickbar sein. */
.spido .demonotiz{
  margin:12px 0 0;padding:9px 13px;
  background:var(--spido-terracotta-hell);border-radius:var(--spido-radius-sm);
  font-size:13.5px;color:#8a4d0b;
}
.spido .demonotiz .lnk{padding:0;font-size:13.5px;color:#8a4d0b;
  font-weight:var(--spido-fw-halb);text-decoration:underline}

/* =====================================================================
   ERGEBNISSEITE (B4, G, H)
   ---------------------------------------------------------------------
   Die Seite lag ganz in einer weissen Card - Titel, Liste, Hinweise,
   Abschluss. Eine Card ist nur berechtigt, wenn sie eine eigenstaendige
   funktionale Einheit bildet; nichts davon ist eine. Der Arbeitsbereich
   traegt den Inhalt jetzt direkt.
   ===================================================================== */
:is(.spido.app,.spido.flow) .wrap.schmal{max-width:1100px}
:is(.spido.app,.spido.flow) .demobar{
  max-width:none;margin:0 0 12px;padding:8px 14px;
}

/* Eine Dokumentzeile ist EINE Zeile: Auf 1100 px stehen Titel und
   Beschreibung nebeneinander, mit Raum uebrig. */
:is(.spido.app,.spido.flow) .docs{
  display:flex;flex-direction:column;gap:0;margin:0 0 var(--spido-space-sm);
}
/* InternalBadge (G4): Die Klassifikation steht am Dokument, nicht in
   einer Fussnote - sie entscheidet, wie damit umzugehen ist. */
.spido .intern{
  display:inline-block;margin-left:9px;padding:1px 8px;
  border-radius:var(--spido-radius-pille);
  background:var(--spido-terracotta-hell);color:#8a4d0b;
  font-size:11.5px;font-weight:var(--spido-fw-kraeftig);
  letter-spacing:.04em;text-transform:uppercase;vertical-align:2px;
}
/* Abschluss (H): Frage, Hauptaktion und Rueckweg gehoeren zusammen -
   vorher stand die Rueckmeldung isoliert zwischen zwei
   Navigationselementen. */
.spido .abschluss{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  margin-top:var(--spido-space-md);padding-top:var(--spido-space-sm);
  border-top:1px solid var(--spido-linie);
}
.spido .abschlussfrage{margin:0;font-size:15px;color:var(--spido-text-2)}
.spido .abschlussaktionen{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-left:auto;
}
.spido .zurueckstart{
  padding:0;font-size:14px;font-weight:var(--spido-fw-halb);
  color:var(--spido-text-leise);
}

/* =====================================================================
   REFERRAL (Abschnitte I, J und B13)
   ---------------------------------------------------------------------
   Die Karte darf auffaelliger sein als ein Hinweis - sie bleibt aber in
   der Spido-Farbwelt und traegt EINE Aktion.
   ===================================================================== */
/* Die Empfehlung ist der positive Abschluss der Seite und darf
   auffallen - aber sie steht NACH der operativen Hauptaktion und
   verdraengt sie nicht. Die flache Leiste vorher war zu sachlich fuer
   ein Geschenk und zugleich zu laut fuer eine Randnotiz. */
.spido .refkarte{
  position:relative;display:flex;align-items:center;gap:24px;
  flex-wrap:nowrap;
  border-radius:var(--spido-radius-karte);
  padding:26px 32px;
  /* Eine eigene Flaeche, nicht mehr nur ein Hauch Lila: Der Abschluss
     soll als eigener Block wahrgenommen werden. Ein sehr flacher
     Verlauf statt eines Farbblocks - hochwertig, kein Werbebanner. */
  background:linear-gradient(135deg,#f3efff 0%,#ece5fd 100%);
  border:1px solid #ded3fa;
  margin:0;font-size:15px;line-height:1.55;
  /* Volle Inhaltsbreite: Der Block gehoert dem Bereich, nicht einer
     Spalte darin. */
  width:100%;
}

/* Das Geschenk steht frei auf der Flaeche - keine weisse Kachel
   darunter. Eine Kachel macht aus der Illustration wieder ein Icon,
   und genau das soll sie nicht sein. */
.spido .refkarte .refbild{
  flex:0 0 150px;display:inline-flex;align-items:center;justify-content:center;
}
.spido .refkarte .refgeschenk{width:150px;height:auto;display:block}

/* Der Name der Sache ist nur noch das Etikett - die Ueberschrift ist
   das Geschenk. Groessen und Mobilregeln kommen von `.kartenlabel`;
   hier steht nur, was anders ist. */
.spido .refkarte .refetikett{margin-bottom:6px;color:var(--spido-purple)}

/* Die Aktion steht rechts und behaelt ihre Breite - sie soll nicht
   umbrechen, waehrend der Text daneben laeuft. */
.spido .refkarte .refaktion{flex:0 0 auto;margin-left:auto}
.spido .refkarte .refsymbol{
  flex:0 0 64px;width:64px;height:64px;border-radius:18px;
  background:#fff;display:inline-flex;align-items:center;
  justify-content:center;color:var(--spido-purple);
  box-shadow:0 2px 10px rgba(109,40,217,.10);
}
.spido .refkarte .refsymbol .refgift{
  position:static;width:36px;height:36px;stroke-width:1.5;
}
.spido .refkarte .reftext{flex:1 1 auto;min-width:0;padding-right:12px}
/* `.reftitel` traegt nur noch die schmalen Faelle (kein Konto, kein
   Pflegedienst) - dort ist der Kasten eine Zeile, keine Flaeche. */
.spido .refkarte .reftitel{
  display:block;margin-bottom:8px;
  color:var(--spido-purple-tief);font-size:22px;letter-spacing:-.01em;
  font-weight:var(--spido-fw-fett);
}
.spido .refkarte .reffrage{
  margin:0 0 10px;color:var(--spido-text-2);max-width:none;
}
/* Die wichtigste Zeile der Karte: Sie beantwortet, warum sich jemand
   die Muehe machen soll. */
/* Die wichtigste Zeile der Karte IST die Ueberschrift: Sie
   beantwortet, warum sich jemand die Muehe machen soll. Die weisse
   Flaeche darunter ist entfallen - eine Ueberschrift braucht keinen
   Kasten, um wichtig zu sein. */
.spido .refkarte .refvorteil{
  margin:0 0 8px;max-width:34ch;
  font-size:24px;line-height:1.25;letter-spacing:-.01em;
  color:var(--spido-purple-tief);font-weight:var(--spido-fw-fett);
}
.spido .refkarte .refvorteil b{color:inherit;font-weight:inherit}
.spido .refkarte .reffrage{margin:0;color:var(--spido-text-2);max-width:46ch}
.spido .refkarte .refknopf{margin:0;padding:12px 24px;font-size:16px;white-space:nowrap}

/* --- Der Abschluss der Kasse und die Erfolgsmeldung ------------------
   PAYMENT-GATING: Der gesperrte Knopf muss als gesperrt zu erkennen
   sein, und daneben muss stehen, WARUM. Ein grauer Knopf ohne Grund ist
   eine Sackgasse mit Hoeflichkeitsform. */
.spido .zabschluss{margin-top:18px}
.spido .zabschluss .btn{width:100%;justify-content:center}
.spido .zabschluss .btn[disabled]{
  opacity:.5;cursor:not-allowed;
  background:var(--spido-bg-2);border-color:var(--spido-linie);
  color:var(--spido-text-leise);
}
.spido .zabschluss .btn[disabled]:hover{
  background:var(--spido-bg-2);color:var(--spido-text-leise);
}
.spido .zsperrhinweis{
  margin:8px 0 0;text-align:center;
  font-size:13.5px;color:var(--spido-text-leise);
}

/* Abschnitt 8: kurz bestaetigen, dann weiter - keine Erfolgsseite. */
.spido .zerfolg{
  display:flex;align-items:flex-start;gap:12px;
  background:#f0fdf4;border:1px solid #bbf7d0;
  border-radius:var(--spido-radius-sm);
  padding:16px 18px;font-size:15px;line-height:1.5;
  color:var(--spido-text-2);
}
.spido .zerfolg .zhaken{
  flex:0 0 24px;width:24px;height:24px;border-radius:50%;
  background:#16a34a;color:#fff;font-size:14px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;
}
.spido .zerfolg b{color:var(--spido-text)}

/* Das Ablaufdatum unter der Zahlungsart - Anzeigetext, kein Geheimnis. */
:is(.spido,dialog.zfenster) .zbestaetigung .zartmeta{
  display:block;margin-top:2px;
  font-size:13.5px;color:var(--spido-text-leise);
}

/* ---------------------------------------------------------------------
   MODAL VIEWPORT RULE (B13)

   Der Rahmen heisst historisch `reffenster` - gebaut wurde er fuer die
   Empfehlung. Er ist aber DER Fensterrahmen von Spido und traegt jedes
   Modal, auch die Zahlungsbestaetigung (`zfenster`).

   Kerninhalt, Schliessen und Aktionen muessen auf dem Laptop ohne
   Scrollen erreichbar sein. Wird der Inhalt fachlich doch lang, scrollt
   nur der Koerper - Kopf und Schliesskreuz bleiben stehen. Niemand soll
   scrollen muessen, um ein Fenster zu schliessen.
   --------------------------------------------------------------------- */
.spido :is(.reffenster,.zfenster),
dialog:is(.reffenster,.zfenster){
  border:none;border-radius:var(--spido-radius-karte);padding:0;
  width:min(560px,calc(100vw - 32px));
  max-height:calc(100vh - 48px);
  display:flex;flex-direction:column;overflow:hidden;
  background:#fff;color:var(--spido-text);
  box-shadow:0 18px 48px rgba(22,23,42,.22);
}
dialog:is(.reffenster,.zfenster)::backdrop{background:rgba(22,23,42,.42)}
dialog:is(.reffenster,.zfenster) .reffenster-kopf{
  position:sticky;top:0;z-index:2;background:#fff;
  display:flex;align-items:center;gap:12px;
  padding:18px 52px 12px 22px;
}
dialog:is(.reffenster,.zfenster) .reffenster-kopf .refgift{
  width:26px;height:26px;flex:0 0 26px;color:var(--spido-purple);
}
dialog:is(.reffenster,.zfenster) h3{
  margin:0;font-size:20px;font-weight:var(--spido-fw-fett);
  letter-spacing:-.01em;
}
/* Das Schliesskreuz steht immer sichtbar oben rechts - unabhaengig
   davon, wie weit der Koerper gescrollt ist. */
dialog:is(.reffenster,.zfenster) .reffenster-zu{
  position:absolute;top:12px;right:12px;z-index:3;
  width:34px;height:34px;border:none;border-radius:50%;
  background:var(--spido-bg-2);color:var(--spido-text-2);
  font-size:20px;line-height:1;cursor:pointer;
}
dialog:is(.reffenster,.zfenster) .reffenster-zu:hover{background:var(--spido-linie)}
dialog:is(.reffenster,.zfenster) .reffenster-inhalt{
  overflow:auto;padding:0 22px 20px;
}
dialog:is(.reffenster,.zfenster) .reffenster-inhalt p{
  margin:0 0 10px;font-size:14.5px;line-height:1.55;color:var(--spido-text-2);
}
dialog:is(.reffenster,.zfenster) .reflink{
  margin:14px 0 0;padding:12px 14px;
  background:var(--spido-bg-2);border-radius:var(--spido-radius-sm);
}
dialog:is(.reffenster,.zfenster) .reflinkzeile{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:6px;
}
dialog:is(.reffenster,.zfenster) .reflinkzeile code{
  flex:1 1 200px;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-size:13.5px;color:var(--spido-text);
}
dialog:is(.reffenster,.zfenster) .refteilen{margin-top:14px}
dialog:is(.reffenster,.zfenster) .refwege{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
dialog:is(.reffenster,.zfenster) .refhinweis{
  margin-top:14px;font-size:13px;line-height:1.5;color:var(--spido-text-leise);
}
dialog:is(.reffenster,.zfenster) .msg{min-height:0;margin:8px 0 0}

/* =====================================================================
   DIE KOMPAKTE ZAHLUNGSBESTAETIGUNG (L, M, N)

   Kein Checkout, aber auch kein stiller Kauf: Der Betrag steht im Knopf,
   nicht nur im Text darueber (P). Wer vor dem Klick nur "Weiter" liest,
   weiss nicht, dass er gerade 59 EUR ausloest.

   Dieselbe Komponente traegt die beiden Ausnahmen aus N. Beide sagen
   ausdruecklich, dass der Fall erhalten bleibt - das ist die Frage, die
   ein Nutzer in diesem Moment wirklich hat.

   Der Rahmen nennt BEIDE Welten: die Seite (`.spido`) und das Fenster.
   Ein <dialog> haengt an document.body und liegt damit ausserhalb von
   `.spido` - eine Regel, die nur dort gilt, greift im Fenster nicht.
   Und der Block steht bewusst NACH dem Fensterblock: Bei gleicher
   Spezifitaet gewinnt die spaetere Regel.
   ===================================================================== */
:is(.spido,dialog.zfenster) .zbestaetigung{
  background:var(--spido-bg-lavendel);
  border-radius:var(--spido-radius-karte);
  padding:24px 26px;margin:0;
}
:is(.spido,dialog.zfenster) .zbestaetigung h3{
  margin:0 0 10px;font-size:20px;letter-spacing:-.01em;
  font-weight:var(--spido-fw-fett);color:var(--spido-text);
}
:is(.spido,dialog.zfenster) .zbestaetigung p{
  margin:0 0 14px;max-width:56ch;
  font-size:15.5px;line-height:1.55;color:var(--spido-text-2);
}
:is(.spido,dialog.zfenster) .zbestaetigung p b{color:var(--spido-text);font-weight:var(--spido-fw-fett)}

/* Die hinterlegte Zahlungsart. Sie steht auf eigener Flaeche, damit
   erkennbar bleibt, WOMIT gleich bezahlt wird - eine Zeile Fliesstext
   liest im Kaufmoment niemand. */
:is(.spido,dialog.zfenster) .zbestaetigung .zart{
  background:#fff;border:1px solid var(--spido-linie);
  border-radius:var(--spido-radius-sm);
  padding:12px 14px;margin:0 0 18px;
}
/* Ein <dialog> haengt an document.body und damit ausserhalb von
   `.spido` - `.spido .btn` greift dort nicht, und der Knopf fiel auf die
   gefuellte Grundform aus app.css zurueck. Gefuellt war er damit aus
   Versehen, nicht aus Absicht; gefuellt ist die Ausnahme fuer die
   Empfehlung. */
dialog.zfenster .btn{
  display:inline-flex;align-items:center;gap:10px;
  font-size:var(--spido-knopf-size);font-weight:var(--spido-fw-kraeftig);
  padding:var(--spido-knopf-padding);
  border-radius:var(--spido-radius-knopf);
  background:var(--spido-lavendel-cta);
  border:2px solid var(--spido-purple);
  color:var(--spido-purple);
  min-height:var(--spido-touch-min);
  box-shadow:none;cursor:pointer;text-decoration:none;
}
dialog.zfenster .btn:hover{background:var(--spido-purple);color:#fff}

/* Das Etikett gilt auch im Fenster - dort greift `.spido .kartenlabel`
   nicht, weil ein <dialog> ausserhalb der Seite haengt. */
dialog.zfenster .kartenlabel{
  display:block;font-size:var(--spido-label);font-weight:650;
  letter-spacing:.12em;text-transform:uppercase;color:var(--spido-text-leise);
}
:is(.spido,dialog.zfenster) .zbestaetigung .zartwert{
  display:block;margin-top:3px;
  font-size:16px;font-weight:var(--spido-fw-halb);color:var(--spido-text);
}
:is(.spido,dialog.zfenster) .zbestaetigung .btnrow{margin:0;justify-content:flex-start;align-items:center}
:is(.spido,dialog.zfenster) .zbestaetigung .btn{margin:0}

/* Der Satz, der im Ausnahmefall zaehlt. */
:is(.spido,dialog.zfenster) .zbestaetigung .zhinweis{
  font-size:14.5px;color:var(--spido-text-leise);
}
:is(.spido,dialog.zfenster) .zbestaetigung.warten{background:var(--spido-purple-050)}
/* Im Fenster traegt der Rahmen schon Flaeche und Polster - die Karte
   darin braucht keine zweite. */
dialog.zfenster .zbestaetigung{background:none;padding:0}
:is(.spido,dialog.zfenster) .zbestaetigung.fehler{
  background:#fff;border:1px solid var(--spido-linie);
  border-left:4px solid var(--spido-purple);
}

/* Lesestreckenbreiten in der Arbeitsflaeche: `.note`, `.fhint` und die
   Absaetze tragen eine Zeilenlaenge von rund 62 Zeichen - richtig fuer
   einen Fliesstext, falsch neben einer Dokumentliste, die die volle
   Breite nutzt. Aus zwei Zeilen werden dort vier (S29). *:is(.spido.app,.spido.flow) .note{
  margin:0 0 var(--spido-space-sm);padding:2px 0 2px 16px;
  font-size:14.5px;line-height:1.5;
}
:is(.spido.app,.spido.flow) .fhint{margin:0 0 var(--spido-space-sm)}

/* Der Rhythmus zwischen den Bloecken der Ergebnisseite: Sie gehoeren
   zusammen - Liste, Klassifikation, Pruefhinweis, Ablage - und brauchen
   nicht je einen Absatzabstand (S29, Weissraum hat ein Budget). */
:is(.spido.app,.spido.flow) .docs{margin-bottom:10px}:is(.spido.app,.spido.flow) .note{margin-bottom:10px}
:is(.spido.app,.spido.flow) .fhint{margin-bottom:10px}
.spido .refkarte{margin-top:10px;padding:20px 24px}
.spido .abschluss{margin-top:14px;padding-top:12px}
:is(.spido.app,.spido.flow) .seitenkopf.kopfknapp{margin-bottom:10px}

/* Der Empfehlungskasten soll noch ins Bild ragen (06.09.2026). Er ist
   der Abschluss und muss nicht ganz zu sehen sein - aber seine Oberkante
   soll sagen, dass da noch etwas kommt. Geholt wird der Platz aus den
   Abstaenden zwischen den Bloecken, nicht aus den Bloecken selbst:
   Liste, Pruefhinweis und Speicherhinweis bleiben, wie sie sind. */
:is(.spido.app,.spido.flow) .prozess{margin-bottom:10px}
:is(.spido.app,.spido.flow) .pruefhinweis{margin-top:14px}
:is(.spido.app,.spido.flow) hr.abschnitt{margin:14px 0 10px}

/* Die Teilen-Wege sind Aktionen, keine Textlinks - `.btn.ghost` ist im
   System randlos, hier braucht es die Flaeche eines Knopfes. */
dialog:is(.reffenster,.zfenster) .refwege .btn.ghost,
dialog:is(.reffenster,.zfenster) .reflinkzeile .btn.ghost{
  border:1px solid var(--spido-linie);background:#fff;
  padding:9px 18px;border-radius:var(--spido-radius-sm);
  color:var(--spido-text);font-size:14.5px;
}
dialog:is(.reffenster,.zfenster) .refwege .btn.ghost:hover,
dialog:is(.reffenster,.zfenster) .reflinkzeile .btn.ghost:hover{
  background:var(--spido-bg-2);text-decoration:none;color:var(--spido-text);
}

/* Hilfreiche Unterlagen (D1): eine Zeile in der Karte, kein Kasten
   daneben. Sie steht unter der Ablageflaeche, weil sie beim Auswaehlen
   hilft - und verschwindet nicht, wenn schon Dateien da sind: Wer eine
   zweite Unterlage sucht, braucht sie genauso. */
.spido .hilfreich{
  margin:12px 0 0;font-size:13.5px;line-height:1.5;
  color:var(--spido-text-leise);
}
.spido .hilfreich .lnk{
  padding:0;font-size:13.5px;font-weight:var(--spido-fw-halb);
  color:var(--spido-purple);
}

/* Hilfe zu einer Wahlmoeglichkeit (B12): Sie gehoert sichtbar unter die
   Zeile, eingerueckt auf die Hoehe des Textes - nicht in eine Klappe,
   die man erst findet, wenn man schon gewaehlt hat. */
.spido .wahlfolge{margin:0 0 6px 30px}
.spido .wahlhilfe{
  margin:0 0 4px;font-size:13.5px;line-height:1.45;
  color:var(--spido-text-leise);
}
.spido .wahlaktion{
  padding:0;font-size:13.5px;font-weight:var(--spido-fw-halb);
  color:var(--spido-purple);cursor:pointer;
}
.spido .einwilligungstext > summary.wahlaktion{list-style:none}
.spido .einwilligungstext > summary.wahlaktion::-webkit-details-marker{display:none}

/* Der Einstieg auf der Testseite sagt, was er tut (Abschnitt N). */
.spido .startkarte .startaktion{
  display:block;margin-top:8px;
  color:var(--spido-purple);font-weight:var(--spido-fw-halb);font-size:14.5px;
}

/* Beispieldaten im Testmodus: ein Aufruf je Formularblock. Er ist
   sichtbar, aber nicht die Hauptaktion - der Tester soll ihn finden,
   nicht darueber stolpern. */
.spido .beispieldaten{
  display:inline-block;margin:8px 0 0;padding:0;
  font-size:13px;font-weight:var(--spido-fw-halb);
  color:var(--spido-text-leise);text-decoration:underline;
  text-underline-offset:3px;
}
.spido .beispieldaten:hover{color:var(--spido-purple)}

/* =====================================================================
   MOBILE KORREKTUREN (gemessen mit werkzeuge/probe-mobil.py, 375x812)
   ===================================================================== */

/* 1 · Die Fusszeile lief 70 px ueber den Bildschirmrand hinaus.

   Ursache war ein siebtes Symbol: Der Verweis auf die oeffentliche
   Homepage gehoert laut B15 in den unteren, sekundaeren Bereich der
   Seitenleiste - auf dem Telefon gibt es keinen unteren Bereich, dort
   ist alles eine Zeile. Er faellt hier weg; erreichbar bleibt die
   Website ueber den Fuss der Seite. */
@media(max-width:1023px){
  .spido .slnav{min-width:0}
}

/* 2 · "Oeffnen und bearbeiten" wurde am rechten Rand abgeschnitten.

   Eine Dokumentzeile ist EINE Zeile - aber nur, solange die Breite
   dafuer reicht. Auf 360 px reicht sie nicht; dort gehoert die Aktion
   unter den Titel, nicht ueber den Rand hinaus. */
@media(max-width:700px){}

/* 3 · Acht Eingabefelder standen auf 15 px.

   iOS zoomt beim Fokus in jedes Feld unter 16 px hinein - danach steht
   die Seite verschoben da und muss von Hand zurueckgezogen werden. Die
   15 px stammen aus der Verdichtung fuer den Laptop; auf dem Telefon
   ist Hoehe kein knappes Gut, Lesbarkeit schon. */
@media(max-width:840px){
  :is(.spido.app,.spido.flow) .field input,
  :is(.spido.app,.spido.flow) .field select,
  .spido.flow .field input,
  .spido.flow .field select,
  .spido textarea{font-size:16px}
}

/* =====================================================================
   SPIDO MOBILE DESIGN STANDARD
   ---------------------------------------------------------------------
   Gilt fuer alle Seiten. Der Bruch liegt bei 767 px; Desktop und Tablet
   bleiben unberuehrt.

   Mobile ist eine eigene Variante, keine verkleinerte Desktop-Ansicht.
   Deshalb stehen hier eigene Werte - Schrift, Abstaende, Knopfhoehen -
   und keine Faktoren auf die Desktop-Werte.

   Die Regel dahinter: Was nicht passt, wird nicht kleiner gemacht,
   sondern umgeordnet.
   ===================================================================== */
@media(max-width:1023px){
  :root{
    /* Zwei horizontale Abstandsebenen, mehr nicht: Bildschirmrand und
       Kartenpolster. Jede weitere Verschachtelung frisst die Breite,
       fuer die das Telefon ohnehin knapp ist. */
    --m-rand:        16px;
    --m-karte:       20px;

    --m-h1:          28px;   /* Seiten- und Kartentitel */
    --m-h2:          25px;   /* Abschnitte */
    --m-text:        17px;   /* Fliesstext */
    --m-text-stark:  18px;   /* tragender Fliesstext */
    --m-meta:        15.5px; /* Dateiformate, Groessen, Datum */
    --m-knopf:       19px;   /* Knopfbeschriftung */
    --m-knopf-zweit: 17.5px;

    --m-hoehe-cta:   64px;   /* Hauptaktion */
    --m-hoehe-knopf: 60px;   /* grosse Wahlknoepfe */
    --m-hoehe-touch: 44px;   /* Mindestmass fuer alles Antippbare */

    --m-eng:         12px;   /* innerhalb einer Gruppe */
    --m-mittel:      18px;   /* zwischen Text und Aktion */
    --m-weit:        32px;   /* zwischen Prozessabschnitten */
  }

  /* --- Breite ------------------------------------------------------- */
  .spido .wrap,
  :is(.spido.app,.spido.flow) .wrap,
  .spido .wrap.schmal,
  :is(.spido.app,.spido.flow) .wrap.schmal{
    max-width:none;padding-left:var(--m-rand);padding-right:var(--m-rand);
  }
  :is(.spido.app,.spido.flow) .eingabekarte,
  .spido .eingabekarte,
  .spido .karte,
  .spido .leer,
  .spido .refkarte{
    padding:var(--m-karte);border-radius:var(--spido-radius-karte);
  }
  /* Karten sitzen randlos in der Spalte - die Breite kommt vom Wrap. */
  .spido .layout-mainside{gap:var(--m-mittel)}

  /* --- Typografie --------------------------------------------------- */
  :is(.spido.app,.spido.flow) .seitenkopf h1,
  .spido .seitenkopf h1{font-size:var(--m-h1);line-height:1.2;margin-bottom:6px}
  :is(.spido.app,.spido.flow) .eingabekarte .kartentitel,
  .spido .kartentitel{font-size:var(--m-h2);line-height:1.2}
  :is(.spido.app,.spido.flow) .seitenkopf .kontext,
  .spido .seitenkopf .kontext{font-size:var(--m-text-stark);line-height:1.45}
  :is(.spido.app,.spido.flow) .eingabekarte .kartenbeschreibung,
  .spido .kartenbeschreibung{font-size:var(--m-text);line-height:1.5}
  .spido p,.spido li{font-size:var(--m-text);line-height:1.5}
  :is(.spido.app,.spido.flow) .fhint,
  .spido .fhint,
  .spido .files .fsize,
  .spido .drop small{font-size:var(--m-meta);line-height:1.45}
  .spido .kartenlabel{font-size:12.5px}

  /* --- Knoepfe ------------------------------------------------------ */
  .spido .btn{
    font-size:var(--m-knopf);font-weight:var(--spido-fw-kraeftig);
    min-height:var(--m-hoehe-cta);padding:0 22px;
    justify-content:center;
  }
  :is(.spido.app,.spido.flow) .aktionsleiste .btn,
  :is(.spido.app,.spido.flow) .flowcard .btn,
  :is(.spido.app,.spido.flow) .leer .btn{
    min-height:var(--m-hoehe-cta);padding:0 22px;font-size:var(--m-knopf);
  }
  /* Die Hauptaktion nimmt die Breite - auf dem Telefon ist sie das
     Ende der Seite, nicht ein Knopf am Rand. */
  .spido .aktionsleiste .btn:not(.ghost){width:100%}
  .spido .btn.ghost{
    font-size:var(--m-knopf-zweit);min-height:var(--m-hoehe-touch);
  }
  .spido .lnk{min-height:var(--m-hoehe-touch);font-size:var(--m-knopf-zweit)}

  /* Ein gesperrter Knopf bleibt lesbar. Er sagt "noch nicht", nicht
     "nicht vorhanden" - und wer ihn nicht lesen kann, erfaehrt auch
     nicht, was ihm fehlt. */
  /* Zwei Bedingungen zugleich: eindeutig gesperrt UND lesbar.

     Ausgrauen erfuellt nur die erste - wer den Text nicht lesen kann,
     erfaehrt auch nicht, was ihm fehlt. Deshalb bleibt die Schrift auf
     Fliesstextkontrast; was fehlt, ist die Farbe: keine gefuellte
     Flaeche, keine kraeftige Kante. */
  .spido .btn[disabled],.spido .btn:disabled{
    opacity:1;
    color:var(--spido-text-2);
    background:#fff;
    border:1.5px solid var(--spido-linie);
  }

  /* --- Abstaende ---------------------------------------------------- */
  :is(.spido.app,.spido.flow) .inhalt{padding-top:var(--m-mittel)}
  :is(.spido.app,.spido.flow) .seitenkopf.kopfknapp{margin-bottom:var(--m-mittel)}
  :is(.spido.app,.spido.flow) .eingabekarte + .eingabekarte{margin-top:var(--m-weit)}
  :is(.spido.app,.spido.flow) .aktionsleiste{
    margin-top:var(--m-weit);flex-direction:column;align-items:stretch;
    gap:var(--m-eng);
  }
  :is(.spido.app,.spido.flow) .aktionsleiste .anmeldehinweis{
    order:0;font-size:var(--m-text-stark);line-height:1.45;flex:none;
  }
  :is(.spido.app,.spido.flow) .aktionsleiste .btn{order:1}
  :is(.spido.app,.spido.flow) .aktionsleiste .abbrechen{
    order:2;align-self:center;
  }

  /* --- Eingaben ----------------------------------------------------- */
  .spido .field input,.spido .field select,.spido textarea{
    font-size:16px;min-height:52px;padding:12px 14px;
  }
  .spido .field label{font-size:var(--m-meta)}

  /* --- Fusszeile: nichts verschwindet hinter der Systemleiste ------- */
  .spido.app > .main,
  .spido.flow > .main{
    padding-bottom:calc(24px + env(safe-area-inset-bottom));
  }
  .spido.app > .main{
    padding-bottom:calc(96px + env(safe-area-inset-bottom));
  }

  /* --- Vorschau-Balken: Inhalt bleibt, Platz nicht ------------------ */
  .previewbar{font-size:16px;line-height:1.4;padding:8px 14px}
}

/* =====================================================================
   MOBILE: Prozessreihenfolge, Ablageflaeche, Hilfetext
   ---------------------------------------------------------------------
   Fortsetzung des Mobile Design Standard - die Teile, die nicht mit
   Zahlen, sondern mit Struktur zu loesen sind.
   ===================================================================== */
@media(max-width:1023px){
  /* --- Reihenfolge --------------------------------------------------
     Erst alle Informationen, dann erstellen:

        1 Unterlagen hochladen
        2 Patientengespraech
        3 Zugang + Neukundenaufnahme erstellen

     Die Aktionszeile gehoert zur Hauptspalte (S33) und stuende sonst
     VOR dem Gespraech. `display:contents` loest die beiden Spalten auf,
     damit ihre Kinder in eine gemeinsame Reihenfolge kommen - ohne
     dass im HTML etwas verschoben wird. */
  .spido .layout-mainside > .spalte-haupt,
  .spido .layout-mainside > .spalte-neben{display:contents}
  .spido .layout-mainside{display:flex;flex-direction:column}
  /* Ohne min-width:0 nimmt ein Flex-Kind seine Inhaltsbreite und ragt
     hinaus - beim Gitter schuetzte davor das minmax(0,...), das mit
     display:contents wegfaellt. */
  .spido .layout-mainside > .spalte-haupt > *,
  .spido .layout-mainside > .spalte-neben > *{min-width:0;max-width:100%}
  .spido .layout-mainside > .spalte-haupt > #karte-unterlagen{order:1}
  .spido .layout-mainside > .spalte-neben > #karte-gespraech{order:2}
  .spido .layout-mainside > .spalte-neben > *{order:2}
  .spido .layout-mainside > .spalte-haupt > .aktionsleiste{order:3}

  /* --- Ablageflaeche ------------------------------------------------
     Ohne Drag & Drop bleibt eine Flaeche mit zwei Knoepfen. Sie soll
     nicht mehr Hoehe brauchen, als die Knoepfe selbst. */
  .spido .nurdesktop{display:none}
  :is(.spido.app,.spido.flow) .eingabekarte .drop{
    padding:var(--m-eng) var(--m-eng) var(--m-mittel);
    border-style:dashed;
  }
  :is(.spido.app,.spido.flow) .eingabekarte .drop svg{
    width:28px;height:28px;margin-bottom:var(--m-eng);
  }
  .spido .dropaktionen{
    display:flex;flex-direction:column;gap:10px;margin:0 0 var(--m-mittel);
  }
  /* Auf dem Telefon ist Fotografieren der naheliegende Weg. */
  .spido .dropaktionen .dropfoto{order:1}
  .spido .dropaktionen .dropwahl{order:2}
  :is(.spido.app,.spido.flow) .dropaktionen .btn.ghost{
    width:100%;justify-content:center;
    min-height:var(--m-hoehe-knopf);
    border:1px solid var(--spido-linie);background:#fff;
    border-radius:var(--spido-radius-sm);
    font-size:var(--m-knopf);color:var(--spido-text);
  }
  .spido .dropaktionen .btn.ghost svg{width:25px;height:25px}
  :is(.spido.app,.spido.flow) .eingabekarte .drop small{
    display:block;margin-top:0;font-size:var(--m-meta);
  }

  /* --- Hilfetext: Nutzen fett, Beispiel zurueckhaltend -------------- */
  .spido .hilfreich{
    margin-top:var(--m-mittel);font-size:var(--m-text);line-height:1.5;
  }
  .spido .hilfreich b{
    display:block;color:var(--spido-text);font-size:var(--m-text-stark);
    font-weight:var(--spido-fw-halb);margin-bottom:6px;
  }
  .spido .hilfreich span{color:var(--spido-text-leise)}
  /* Eine Aktion steht fuer sich, nicht im Fliesstext. */
  .spido .beispielzeile{margin:var(--m-eng) 0 0}
  .spido .beispielzeile .lnk{
    display:inline-flex;align-items:center;
    min-height:var(--m-hoehe-touch);padding:0;
    font-size:var(--m-knopf-zweit);font-weight:var(--spido-fw-halb);
    color:var(--spido-purple);
  }

  /* --- Das Gespraech ist ein Prozessschritt, kein Nebenpunkt -------- */
  .spido #karte-gespraech .kartentitel{font-size:var(--m-h2)}
  .spido #karte-gespraech .gespraechknopf,
  .spido #karte-gespraech .btn.ghost{
    width:100%;justify-content:center;min-height:var(--m-hoehe-knopf);
    font-size:var(--m-knopf);
  }
  .spido #karte-gespraech .lnk{font-size:var(--m-knopf-zweit)}

  /* --- Touchflaechen ------------------------------------------------
     Ein 21 px hohes Kreuz zum Entfernen einer Datei trifft auf einem
     Telefon niemand zuverlaessig - und wer danebentrifft, oeffnet
     stattdessen die Datei. */
  .spido .files .rm,
  .spido .files .fansehen{
    min-width:var(--m-hoehe-touch);min-height:var(--m-hoehe-touch);
    display:inline-flex;align-items:center;justify-content:center;
    font-size:var(--m-knopf-zweit);
  }
  /* Mit derselben Spezifitaet wie die Verdichtungsregel fuer den
     Laptop - sonst gewinnt dort 15 px gegen 17 px hier. */
  :is(.spido.app,.spido.flow) .files li,
  .spido .files li{gap:8px;padding:10px 2px;font-size:var(--m-text)}
  :is(.spido.app,.spido.flow) .files .fsize{font-size:var(--m-meta)}
  /* Sekundaertext: mindestens 15 px, auch im Demo-Hinweis. */
  .spido .demoinhalt p,.spido .demoinhalt li,
  :is(.spido.app,.spido.flow) .fhint,
  .spido .fhint{font-size:var(--m-meta);line-height:1.45}
  .spido .demozeichen summary{min-height:var(--m-hoehe-touch);
    display:inline-flex;align-items:center}

  /* --- Der Zugangstext steht bei seinem Zugang --------------------- */
  :is(.spido.app,.spido.flow) .aktionsleiste .anmeldehinweis{
    margin:0 0 4px;color:var(--spido-text-2);
  }
}

/* =====================================================================
   MOBILE, Phase 3: die wiederkehrenden Muster aus dem Durchlauf
   ---------------------------------------------------------------------
   Gemessen mit `probe-mobil.py --jede`. Was auf mehreren Seiten gleich
   auffaellt, wird hier geloest und nicht dort.

   Wiederkehrend war dreierlei: Verdichtungswerte fuer den Laptop, die
   auf dem Telefon unter die Mindestgroessen fallen; Textaktionen mit 21
   bis 26 px Hoehe; und der oeffentliche Kopf, dessen Marke und Knopf
   unter 44 px liegen.
   ===================================================================== */
@media(max-width:1023px){  :is(.spido.app,.spido.flow) .leer h3,
  .spido .leer h3{font-size:20px}  /* Kaestchen und Auswahlen: der Griff ist die Zeile, nicht das
     Quadrat - deshalb bekommt die Zeile das Mass. */
  .spido .vereinbarung,
  .spido .wahlzeile,
  .spido .tonzustimmung{min-height:var(--m-hoehe-touch);align-items:center}
  .spido .vereinbarung input,
  .spido .wahlzeile input,
  .spido .tonzustimmung input{width:24px;height:24px;flex:0 0 24px}

  /* --- Der oeffentliche Kopf ---------------------------------------- */
  .spido .topnav .marke-logo{min-height:var(--m-hoehe-touch);font-size:23px}
  .spido .topnav .btn,
  .spido .topnav .anmelden{
    min-height:var(--m-hoehe-touch);font-size:var(--m-knopf-zweit);
  }
  .spido .flowkopf .marke-logo,
  .spido .flowkopf .flowanmelden{min-height:var(--m-hoehe-touch)}
}

/* Nachtrag zum Durchlauf: was beim zweiten Messen uebrig blieb. */
@media(max-width:1023px){
  /* Der Rueckweg der Rechtstextseiten heisst `.back` und war von den
     Aktionsregeln nicht erfasst. */
  .spido .back{
    display:inline-flex;align-items:center;
    min-height:var(--m-hoehe-touch);font-size:var(--m-knopf-zweit);
  }
  /* Die Empfehlungskarte traegt eigene Groessen mit hoeherer
     Spezifitaet - hier dieselbe. */
  .spido .refkarte .reftext{font-size:var(--m-text);line-height:1.5}
  .spido .refkarte strong{font-size:var(--m-text-stark)}
  .spido .refkarte .refknopf{
    margin-left:0;width:100%;justify-content:center;
    min-height:var(--m-hoehe-knopf);font-size:var(--m-knopf);
  }
  .spido .refkarte{flex-direction:column;align-items:flex-start}
  dialog:is(.reffenster,.zfenster) .reffenster-inhalt p{font-size:var(--m-text)}
  dialog:is(.reffenster,.zfenster) .refwege .btn.ghost,
  dialog:is(.reffenster,.zfenster) .reflinkzeile .btn.ghost{
    min-height:var(--m-hoehe-touch);font-size:var(--m-knopf-zweit);
  }
  /* Der Verweis auf das Formular im neuen Tab lag bei 41 px. */
  .spido .doksheet a,.spido .sisoriginal a{
    display:inline-flex;align-items:center;min-height:var(--m-hoehe-touch);
  }
}

/* Letzter Durchgang: was nach zwei Runden uebrig blieb. */
@media(max-width:1023px){
  /* Ein Absatz mit fest eingetragener Schriftgroesse im style-Attribut
     laesst sich von aussen nicht ueberschreiben - ausser mit !important.
     Betrifft die Standzeile der Rechtstexte. */
  .spido .legal > p[style*="font-size"]{font-size:var(--m-meta)!important}

  /* Hilfe zu einer Wahl ist entscheidungsrelevant, nicht sekundaer. */
  .spido .wahlhilfe{font-size:var(--m-text)}

  /* Adressen und Bankhinweise sind Sekundaertext, aber nicht 15,5 - der
     Standard nennt 15 als Untergrenze; hier steht 16, weil es Angaben
     sind, die man abtippt. */
  .spido .bank-note,.spido .kontaktliste dd,.spido .kontaktliste dt{
    font-size:16px;line-height:1.5;
  }

  /* Eine Mailadresse ist ein Bedienelement, kein Text: Wer sie antippt,
     oeffnet sein Mailprogramm. */
  .spido dd a[href^="mailto"],
  .spido a[href^="mailto"]:not(.btn){
    display:inline-flex;align-items:center;min-height:var(--m-hoehe-touch);
  }

  /* Das Schliesskreuz des Fensters lag bei 34 px. */
  dialog:is(.reffenster,.zfenster) .reffenster-zu{width:44px;height:44px;font-size:24px}

  /* Der Stand der vorbereiteten Informationen ist eine Statuszeile -
     15 px, nicht 13,5. */
  .spido .entwurfszeile{font-size:var(--m-meta)}

  /* Verweise INNERHALB einer Zustimmungszeile bleiben Fliesstextlinks -
     die Zeile selbst ist der Griff. Sie brauchen keine eigene Hoehe,
     aber Platz zum Treffen. */
  .spido .vereinbarung a{padding:2px 0}
}

@media(max-width:1023px){
  /* Marken bleiben klein, aber lesbar. */
  .spido .kartenlabel{font-size:13px;letter-spacing:.08em}
  /* Ein Hinweis zur Bankverbindung ist erklaerender Text. */
  .spido .bank-note{font-size:var(--m-text)}
}

@media(max-width:1023px){
  /* `.badge` ist dieselbe Sache wie `.kartenlabel`: eine Marke ueber
     der Ueberschrift, kein Text. */
  .spido .badge{font-size:13px}
  /* Der Mustertext der Einwilligung wird vorgelesen - er ist tragend. */
  .spido .einwilligungstext .mustertext,
  .spido .mustertext{font-size:var(--m-text);line-height:1.55}  /* Bestaetigungen nach einem Schritt sind erklaerender Text. */
  .spido .flowcard .fhint,
  :is(.spido.app,.spido.flow) .flowcard .fhint{font-size:var(--m-text)}
}

@media(max-width:1023px){
  /* Der Hinweis am gesperrten Aufnahmeknopf sagt, was noch fehlt -
     er ist tragend, nicht sekundaer. */
  :is(.spido.app,.spido.flow) .eingabekarte .recstatus,
  .spido .eingabekarte .recstatus{font-size:var(--m-text);line-height:1.5}
}

/* Auf dem Laptop bleibt die Hilfezeile eine Zeile: Nutzen, Beispiel und
   der Aufruf zu den Beispieldaten stehen hintereinander. Getrennt sind
   sie nur auf dem Telefon, wo die Aktion sonst im Fliesstext untergeht
   (Mobile Design Standard, Abschnitt 9). */
@media(min-width:768px){
  .spido .hilfreich b,.spido .hilfreich span{display:inline}
  .spido .hilfreich b{font-weight:var(--spido-fw-halb)}
  .spido .beispielzeile{display:inline;margin:0}
  .spido .beispielzeile .lnk{padding:0 0 0 4px}
  /* Der Hinweis sass mit dem Abstand eines Absatzes unter der Liste -
     er gehoert dazu. */
  :is(.spido.app,.spido.flow) .hilfreich{margin-top:8px;font-size:var(--m-meta)}
}

/* =====================================================================
   ERGEBNISANSICHT · drei Bereiche statt einer Abfolge
   ---------------------------------------------------------------------
   Unten konkurrierten vier Dinge miteinander: ein Hinweis zu EINEM
   Dokument, der haftungsrelevante Pruefhinweis, die Empfehlung und die
   Weiterfuehrung. Alle vier sahen gleich aus und waren gleich laut.
   ===================================================================== */

/* --- OBJECT-BOUND NOTICE ---------------------------------------------
   Der Hinweis gehoert sichtbar zu SEINEM Dokument: eingerueckt auf die
   Textspalte, mit einer Kante, die ihn an die Zeile darueber bindet.
   Unter der Liste gelesen, gaelte er fuer alle fuenf. *
/* --- Pruefhinweis ----------------------------------------------------
   Der wichtigste Satz nach den Dokumenten selbst. Nicht alarmierend rot:
   Es ist kein Fehler, sondern eine fachliche Pflicht - wichtig und
   ruhig, nicht laut. Und nicht wegklickbar: Er gehoert zur Darstellung
   des Ergebnisses, nicht zu den Meldungen darueber. */
/* Haftungs- oder fachlich relevante Hinweise wiegen typografisch mehr
   als gewoehnliche Informationen. Der Unterschied liegt nicht in einer
   Signalfarbe, sondern im Kontrast: fast schwarze Ueberschrift, dunkler
   Fliesstext, kraeftigere Kante. Wichtig und verbindlich - keine
   Fehlermeldung. */
.spido .pruefhinweis{
  display:flex;gap:16px;align-items:flex-start;
  margin:var(--spido-space-md) 0 0;padding:18px 20px;
  background:#fff;
  border:1px solid var(--spido-linie);
  border-left:4px solid var(--spido-gruen);
  border-radius:var(--spido-radius-sm);
  box-shadow:0 1px 2px rgba(22,23,42,.05);
}
.spido .pruefhinweis .pruefzeichen{
  flex:0 0 26px;width:26px;height:26px;color:var(--spido-gruen);
  margin-top:1px;
}
.spido .pruefhinweis .pruefzeichen svg{width:26px;height:26px}
.spido .pruefhinweis strong{
  display:block;margin-bottom:6px;font-size:17.5px;letter-spacing:-.01em;
  color:#14100e;font-weight:var(--spido-fw-fett);
}
.spido .pruefhinweis p{
  margin:0;font-size:15.5px;line-height:1.55;color:#2c2723;
  max-width:none;
}
.spido .pruefhinweis .pruefzeichen{flex:0 0 28px;width:28px;height:28px}
.spido .pruefhinweis .pruefzeichen svg{width:28px;height:28px}

/* --- Speicherung: der Abschluss des Dokumentbereichs ---------------- */
.spido .gespeichert{
  display:flex;gap:10px;align-items:baseline;
  /* Eine Zeile, nah am Pruefhinweis (06.09.2026). Der grosse Abstand
     davor kostete Platz, den der Empfehlungskasten braucht, um noch
     ins Bild zu ragen - und `.spido p` begrenzte den Satz auf 70
     Zeichen, weshalb er umbrach. Beides zurueckgenommen. */
  margin:16px 0 0;font-size:14.5px;line-height:1.55;
  color:var(--spido-text-leise);max-width:none;
}
.spido .gespeichert > span:last-child{max-width:none}
.spido .gespeichert > span:first-child{color:var(--spido-gruen);font-weight:700}
.spido .gespeichert strong{color:var(--spido-text-2)}

/* --- Trennung: hier endet das Arbeitsergebnis ----------------------- */
.spido hr.abschnitt{
  border:none;border-top:1px solid var(--spido-linie);
  margin:var(--spido-space-md) 0 var(--spido-space-sm);
}

/* --- Prozessabschluss ---------------------------------------------- */
/* Die naechste operative Aktion steht fuer sich - sichtbar, aber nicht
   uebergross, und ohne zweite gleichwertige Aktion daneben. */
.spido .weiterzeile{margin:0 0 var(--spido-space-lg)}
.spido .weiterzeile .btn{padding:14px 26px}
.spido .zurueckzeile{margin:0;text-align:center}
.spido .zurueckstart{
  padding:0;font-size:14px;font-weight:var(--spido-fw-halb);
  color:var(--spido-text-leise);
}

/* --- Der Vertrauensbereich konkurriert nicht mit dem Abschluss ----- */
:is(.spido.app,.spido.flow) .foot-dsgvo{
  margin-top:var(--spido-space-xl);padding-top:var(--spido-space-md);
  border-top:1px solid var(--spido-linie);
  font-size:13.5px;color:var(--spido-text-leise);
}

@media(max-width:1023px){
  /* Dieselbe Reihenfolge, nichts nebeneinander erzwungen. */
  .spido .pruefhinweis{padding:14px 16px}
  .spido .pruefhinweis p{font-size:var(--m-text)}
  .spido .gespeichert{font-size:var(--m-meta)}  .spido .weiterzeile .btn{width:100%}
  /* Der Rueckweg ist eine Aktion, keine Fussnote. */
  .spido .zurueckstart{font-size:var(--m-knopf-zweit)}
}

/* Ein internes Dokument sagt an der Stelle, an der sonst "Versenden"
   staende, warum dort nichts steht. */
.spido .dokaktionen .dokintern{
  display:inline-flex;align-items:center;
  font-size:13.5px;color:var(--spido-text-leise);
}

@media(max-width:1023px){
  /* Auf dem Telefon gestapelt: Geschenk oben, Text darunter, Aktion
     ueber die volle Breite - nebeneinander bliebe fuer den Text zu
     wenig Platz. */
  .spido .refkarte{
    flex-direction:column;align-items:flex-start;
    padding:var(--m-karte);gap:14px;
  }
  .spido .refkarte .refbild{flex:0 0 auto}
  .spido .refkarte .refgeschenk{width:118px}
  .spido .refkarte .refvorteil{font-size:22px;max-width:none}
  .spido .refkarte .reffrage{font-size:var(--m-text);max-width:none}
  .spido .refkarte .refaktion{margin-left:0;width:100%}
  .spido .refkarte .refsymbol{flex:0 0 52px;width:52px;height:52px}
  .spido .refkarte .refsymbol .refgift{width:30px;height:30px}
  .spido .refkarte .reftitel{font-size:21px}
  .spido .refkarte .reffrage{font-size:var(--m-text)}
  .spido .refkarte .refvorteil{font-size:var(--m-text-stark)}
  .spido .refkarte .refknopf{
    width:100%;justify-content:center;min-height:var(--m-hoehe-knopf);
    font-size:var(--m-knopf);
  }
}

/* Die Zahlungsbestaetigung im Mobilstandard (S45): volle Breite,
   Mindesthoehe, gleiche Schriftgroessen wie jede andere Karte. */
@media(max-width:1023px){
  :is(.spido,dialog.zfenster) .zbestaetigung{padding:var(--m-karte)}
  :is(.spido,dialog.zfenster) .zbestaetigung h3{font-size:var(--m-h2)}
  :is(.spido,dialog.zfenster) .zbestaetigung p{font-size:var(--m-text)}
  :is(.spido,dialog.zfenster) .zbestaetigung .zartwert{font-size:var(--m-text-stark)}
  :is(.spido,dialog.zfenster) .zbestaetigung .zhinweis{font-size:var(--m-meta)}
  :is(.spido,dialog.zfenster) .zbestaetigung .btnrow{flex-direction:column;align-items:stretch;gap:var(--m-eng)}
  :is(.spido,dialog.zfenster) .zbestaetigung .btn{
    width:100%;justify-content:center;
    min-height:var(--m-hoehe-cta);font-size:var(--m-knopf);
  }
  :is(.spido,dialog.zfenster) .zbestaetigung .lnk{
    text-align:center;min-height:var(--m-hoehe-touch);
    display:flex;align-items:center;justify-content:center;
    font-size:var(--m-knopf-zweit);
  }
}

@media(max-width:1023px){
  .spido .zabschluss .btn{
    min-height:var(--m-hoehe-cta);font-size:var(--m-knopf);
  }
  .spido .zsperrhinweis{font-size:var(--m-meta)}
  .spido .zerfolg{font-size:var(--m-text)}
}

/* =====================================================================
   DIE KASSE IM MOBILSTANDARD (S45)

   Diese Klassen liegen im <style> von zahlung.html - die Regel dafuer
   gehoert trotzdem hierher: S45 ist zentral, sonst hat jede Seite ihren
   eigenen Mobilstandard.

   Aufgefallen ist es erst, als die Mobilprobe die Kasse ueberhaupt zu
   Gesicht bekam: Mit Startguthaben schickte der Torwaechter sie in die
   Verarbeitung, und die Probe hat die Ergebnisseite fotografiert und
   "zahlung.html" darunter geschrieben.
   ===================================================================== */
@media(max-width:1023px){
  .spido .bestellzeile b,
  .spido .vpunkt b{font-size:var(--m-text)}
  .spido .bestellzeile small,
  .spido .summe .wert small,
  .spido .vpunkt p,
  .spido .garantie,
  .spido .psp{font-size:var(--m-meta);line-height:1.5}
  .spido .bestellzeile .preis,
  .spido .summe b,
  .spido .summe .wert{font-size:var(--m-text-stark)}
  .spido .methode{font-size:var(--m-text);min-height:var(--m-hoehe-touch)}
  .spido .kbox h3{font-size:var(--m-h2)}

  /* Der Rueckweg ist antippbar, nicht nur lesbar. */
  .spido .zurueck{
    min-height:var(--m-hoehe-touch);
    display:inline-flex;align-items:center;
    font-size:var(--m-knopf-zweit);
  }
}

/* =====================================================================
   SCHRITT 2: SPIDO VERARBEITET (Abschnitte 4 und 8)

   Ein Vorgang, keine Pipeline. Was intern an Zwischenstaenden anfaellt -
   hochladen, verschriftlichen, pruefen -, gehoert ins Protokoll und
   nicht auf den Bildschirm: Der Nutzer kann daran nichts entscheiden.

   Der Fehlerfall dagegen SCHON: Deshalb steht er hier und nicht in der
   Eingabemaske, und der erste Satz nach der Ueberschrift ist der, auf
   den es ankommt - die Aufnahme ist nicht weg.
   ===================================================================== */
.spido .verarbeitet{
  padding:56px 32px;text-align:center;
}
.spido .verarbeitet h1{
  margin:0 0 10px;font-size:clamp(22px,2vw,28px);letter-spacing:-.01em;
}
.spido .verarbeitet p{
  margin:0 auto;max-width:52ch;
  font-size:16px;line-height:1.55;color:var(--spido-text-2);
}
.spido .verarbeitet .btnrow{justify-content:center;margin-top:22px}

/* Ein ruhiger Kreis, kein Fortschrittsbalken: Wie weit Spido ist, weiss
   die Vorschau nicht, und ein erfundener Balken waere eine Behauptung. */
.spido .verarbeitet .vspinner{
  display:block;width:34px;height:34px;margin:0 auto 22px;
  border:3px solid var(--spido-linie);
  border-top-color:var(--spido-purple);
  border-radius:50%;
  animation:spidodreh 900ms linear infinite;
}
@keyframes spidodreh{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){
  .spido .verarbeitet .vspinner{animation-duration:2400ms}
}
.spido .verarbeitet.stockt .vspinner{display:none}

@media(max-width:1023px){
  .spido .verarbeitet{padding:40px var(--m-karte)}
  .spido .verarbeitet h1{font-size:var(--m-h1)}
  .spido .verarbeitet p{font-size:var(--m-text)}
  .spido .verarbeitet .btn{
    width:100%;justify-content:center;
    min-height:var(--m-hoehe-cta);font-size:var(--m-knopf);
  }
}

/* =====================================================================
   DIE DREI DOKUMENTBEREICHE EINES FALLS (9, 22)

   Eine Zeile Auswahl, die Dokumente stehen direkt darunter. Kein
   zusaetzlicher Knopf "Dokumente anzeigen" - der waere ein Klick fuer
   nichts.
   ===================================================================== */
.spido .dokbereiche{
  display:flex;gap:8px;flex-wrap:wrap;
  margin:0 0 var(--spido-space-sm);
  border-bottom:1px solid var(--spido-linie);
}
.spido .dokbereiche button{
  appearance:none;background:none;border:none;cursor:pointer;
  padding:10px 14px;margin-bottom:-1px;
  border-bottom:2px solid transparent;
  font-size:15px;font-weight:var(--spido-fw-halb);
  color:var(--spido-text-leise);
  display:inline-flex;align-items:center;gap:8px;
  min-height:var(--spido-touch-min);
}
.spido .dokbereiche button:hover{color:var(--spido-text)}
.spido .dokbereiche button.an{
  color:var(--spido-purple);border-bottom-color:var(--spido-purple);
}
.spido .dokbereiche .bzahl{
  font-size:13px;font-weight:700;
  background:var(--spido-bg-2);color:var(--spido-text-leise);
  border-radius:var(--spido-radius-pille);padding:1px 8px;
}
.spido .dokbereiche button.an .bzahl{
  background:var(--spido-purple-050);color:var(--spido-purple);
}

/* 14: Die Aufnahme ist temporaer, das Transkript bleibt. */
.spido .files .dokebene{
  margin-left:8px;font-size:12px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--spido-text-leise);
  background:var(--spido-bg-2);border-radius:var(--spido-radius-pille);
  padding:2px 8px;
}
.spido .files .dokebene.temporaer{
  background:#fff5e6;color:#9a6400;
}

/* Der Status steht im Kopf in derselben Zeile wie das Datum - eine
   eigene Zeile darunter kostete Hoehe, die die Dokumentliste braucht
   (23, Viewport-First). */
.spido .seitenkopf .kontext .status{margin-left:8px;vertical-align:1px}

@media(max-width:1023px){
  /* 22: Keine drei winzigen Reiter - sie duerfen scrollen. */
  .spido .dokbereiche{
    flex-wrap:nowrap;overflow-x:auto;gap:2px;
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .spido .dokbereiche::-webkit-scrollbar{display:none}
  .spido .dokbereiche button{
    white-space:nowrap;font-size:var(--m-text);
    min-height:var(--m-hoehe-touch);padding:10px 12px;
  }
  /* Die Zahl ist Information, kein Zierrat - sie faellt unter das
     Lesemass des Mobilstandards wie jeder andere Text. */
  .spido .dokbereiche .bzahl{font-size:var(--m-meta)}
}

/* Die dritte Zeile der Patientenkarte: die Zahlen des Falls. Leiser als
   das Aufnahmedatum - sie beantwortet eine Frage, die man beim
   Ueberfliegen hat, und keine, wegen der man klickt. */
.spido .karte .karte-meta{
  display:block;margin-top:3px;
  font-size:13.5px;line-height:1.45;color:var(--spido-text-leise);
}
@media(max-width:1023px){
  .spido .karte .karte-meta{font-size:var(--m-meta)}
}

/* =====================================================================
   DIE ARBEITSLISTE (2, 3, 19 bis 22)

   LIST DENSITY: Wiederkehrende gleichartige Datensaetze stehen kompakt
   untereinander, nicht als hohe Einzelkarten. Die Patientenliste soll
   auch mit zwanzig Eintraegen noch eine Liste sein - vorher war jeder
   Eintrag drei Zeilen hoch, mit Zahlen und einem Statusabzeichen, das
   es fachlich gar nicht mehr gibt.
   ===================================================================== */
.spido .fallliste{display:flex;flex-direction:column;gap:6px}
.spido .fallzeile{
  display:flex;align-items:center;gap:10px;
  padding:14px 18px;background:#fff;
  border:1px solid var(--spido-linie);
  border-radius:var(--spido-radius-sm);
  text-decoration:none;color:var(--spido-text);
  min-height:var(--spido-touch-min);
  transition:border-color var(--spido-zeit-schnell) ease;
}
.spido .fallzeile:hover{border-color:var(--spido-purple)}
.spido .fallzeile .fzname{
  font-size:16px;font-weight:var(--spido-fw-halb);color:var(--spido-text);
}
.spido .fallzeile .fztrenner{color:var(--spido-text-leise)}
.spido .fallzeile .fzfall{
  font-size:15px;color:var(--spido-text-leise);
}
.spido .fallzeile .fzpfeil{
  margin-left:auto;color:var(--spido-purple);font-weight:700;
}

/* Die Werkzeugzeile ist Werkzeug, kein Inhalt - keine eigene Karte. */
.spido .listenleiste{
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  margin:0 0 var(--spido-space-sm);
}
.spido .listensuche{
  position:relative;flex:1 1 320px;display:flex;align-items:center;
}
.spido .listensuche .lupe{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;color:var(--spido-text-leise);pointer-events:none;
}
.spido .listensuche .lupe svg{width:18px;height:18px;display:block}
.spido .listensuche input{
  width:100%;padding:11px 14px 11px 38px;
  border:1px solid var(--spido-linie);border-radius:var(--spido-radius-sm);
  background:#fff;font-size:15px;color:var(--spido-text);
  min-height:var(--spido-touch-min);
}
.spido .listensuche input:focus{
  outline:none;border-color:var(--spido-purple);
  box-shadow:0 0 0 3px var(--spido-purple-050);
}
.spido .listensort select{
  padding:11px 14px;border:1px solid var(--spido-linie);
  border-radius:var(--spido-radius-sm);background:#fff;
  font-size:15px;color:var(--spido-text);min-height:var(--spido-touch-min);
}

/* Nur fuer Vorlesegeraete - der sichtbare Text steht im Platzhalter
   bzw. in der Auswahl selbst. */
.spido .sr-nur{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;
}

@media(max-width:1023px){
  /* 19: Suchfeld und Sortierung untereinander - nebeneinander bliebe
     fuer beide zu wenig. Kein waagerechtes Scrollen. */
  .spido .listenleiste{flex-direction:column;align-items:stretch;gap:10px}
  .spido .listensuche{flex:1 1 auto}
  .spido .listensuche input,
  .spido .listensort select{
    font-size:16px;min-height:var(--m-hoehe-touch);
  }
  .spido .listensort select{width:100%}
  /* Die Zeile darf umbrechen - inhaltlich bleibt sie dieselbe. */
  .spido .fallzeile{flex-wrap:wrap;padding:var(--m-eng) 14px}
  .spido .fallzeile .fzname{flex:1 1 100%;font-size:var(--m-text-stark)}
  .spido .fallzeile .fztrenner{display:none}
  .spido .fallzeile .fzfall{font-size:var(--m-meta)}
}

/* Die Rueckgabe finaler Unterlagen (7 bis 9). Erst was da ist, dann
   die Erklaerung, dann das Feld - deshalb steht der Kasten UNTER der
   Liste und traegt bei vorhandenen Dokumenten eine Trennlinie. */
.spido .finalrueckgabe{margin-top:var(--spido-space-md)}
.spido .finalrueckgabe.weiter{
  margin-top:var(--spido-space-lg);
  padding-top:var(--spido-space-md);
  border-top:1px solid var(--spido-linie);
}
.spido .finalrueckgabe h3{
  margin:0 0 6px;font-size:17px;font-weight:var(--spido-fw-fett);
  color:var(--spido-text);
}
.spido .finalrueckgabe p{
  margin:0 0 14px;max-width:66ch;
  font-size:14.5px;line-height:1.55;color:var(--spido-text-2);
}

/* Die kompakte Uploadflaeche - dieselbe Komponente, flacher. */
.spido .drop.kompakt{padding:18px 16px}
.spido .drop.kompakt svg{width:24px;height:24px}
.spido .drop.kompakt p{margin:6px 0 10px}
.spido .drop.kompakt .msg:empty{display:none}

@media(max-width:1023px){
  .spido .finalrueckgabe h3{font-size:var(--m-h2)}
  .spido .finalrueckgabe p{font-size:var(--m-text)}
}

/* =====================================================================
   DIE STARTSEITE: ZWEI EINSTIEGE (4 bis 6, 12)

   Keine Dashboard-Kacheln. Zwei Karten, gleich hoch, gleich breit,
   ohne kuenstliche Mindesthoehe und ohne grosse Leerflaeche darin -
   die Seite soll bei 1366 x 768 ohne Scrollen lesbar sein.

   Und ausdruecklich KEIN reservierter Leerraum fuer den Fachagenten:
   Was es noch nicht gibt, nimmt auch keinen Platz ein (11).
   ===================================================================== */
.spido .bereichlabel{
  font-size:var(--spido-label);font-weight:650;letter-spacing:.14em;
  text-transform:uppercase;color:var(--spido-text-leise);
  margin:var(--spido-space-md) 0 12px;
}
.spido .arbeitskarten{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:16px;align-items:stretch;
}
.spido .arbeitskarte{
  display:flex;flex-direction:column;gap:6px;
  padding:22px 24px;background:#fff;
  border:1px solid var(--spido-linie);
  border-radius:var(--spido-radius-karte);
  text-decoration:none;color:var(--spido-text);
  transition:border-color var(--spido-zeit-schnell) ease;
}
.spido .arbeitskarte:hover{border-color:var(--spido-purple)}
.spido .arbeitskarte .akicon{
  width:36px;height:36px;border-radius:11px;
  background:var(--spido-purple-050);color:var(--spido-purple);
  display:inline-flex;align-items:center;justify-content:center;
  margin-bottom:4px;
}
.spido .arbeitskarte .akicon svg{width:20px;height:20px}
.spido .arbeitskarte .aktitel{
  font-size:18px;font-weight:var(--spido-fw-fett);color:var(--spido-text);
}
.spido .arbeitskarte .aktext{
  font-size:14.5px;line-height:1.5;color:var(--spido-text-2);
  /* Der Text soll den Rest der Karte fuellen, damit beide Aktionen auf
     derselben Linie stehen - ohne Mindesthoehe. */
  flex:1 1 auto;
}
.spido .arbeitskarte .akaktion{
  margin-top:10px;font-size:15px;font-weight:var(--spido-fw-halb);
  color:var(--spido-purple);
}

@media(max-width:1023px){
  .spido .arbeitskarten{grid-template-columns:1fr;gap:var(--m-eng)}
  .spido .arbeitskarte{padding:var(--m-karte)}
  .spido .arbeitskarte .aktitel{font-size:var(--m-h2)}
  .spido .arbeitskarte .aktext{font-size:var(--m-text)}
  .spido .arbeitskarte .akaktion{font-size:var(--m-knopf-zweit)}
}

/* Entwurf: Spido hat die Dokumente noch nicht erstellt. Ruhiger als
   ein Erfolgszustand - es ist eine Feststellung, keine Warnung. */
.spido .status.entwurf{
  background:var(--spido-bg-2);color:var(--spido-text-leise);
}

/* Der eingefrorene Input. Der Hinweis erklaert, warum hier nichts mehr
   hinzugefuegt werden kann - ohne ihn sieht es aus, als fehlte etwas. */
.spido .fhint.gefroren{
  margin:16px 0 0;padding:12px 14px;
  background:var(--spido-bg-2);border-radius:var(--spido-radius-sm);
  font-size:14px;line-height:1.55;color:var(--spido-text-2);max-width:none;
}
.spido .fhint.gefroren b{color:var(--spido-text)}
.spido .fhint.gefroren .lnk{padding:0;font-size:inherit}

@media(max-width:1023px){
  .spido .fhint.gefroren{font-size:var(--m-meta)}
}

/* Der Hinweis auf offene Entwuerfe vor einem Kauf. Ruhig: Es ist eine
   Warnung, keine Fehlermeldung - kaufen darf man trotzdem. */
.spido .note.entwurfhinweis{
  max-width:960px;margin:0 0 16px;padding:12px 16px;
  background:var(--spido-bg-lavendel);
  border-left:3px solid var(--spido-purple);
  border-radius:var(--spido-radius-sm);
  font-size:14.5px;line-height:1.55;color:var(--spido-text-2);
}
.spido .note.entwurfhinweis strong{color:var(--spido-text)}

/* Die Entwurfsliste im Warnfenster - dieselbe Zeile wie ueberall. */
dialog.zfenster .fallliste{margin:14px 0 0}
dialog.zfenster .fallzeile{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;background:#fff;
  border:1px solid var(--spido-linie);border-radius:var(--spido-radius-sm);
  text-decoration:none;color:var(--spido-text);
}
dialog.zfenster .fallzeile:hover{border-color:var(--spido-purple)}
dialog.zfenster .fallzeile .fzname{font-weight:var(--spido-fw-halb)}
dialog.zfenster .fallzeile .fzfall,
dialog.zfenster .fallzeile .fztrenner{color:var(--spido-text-leise)}
dialog.zfenster .fallzeile .fzpfeil{margin-left:auto;color:var(--spido-purple)}

@media(max-width:1023px){
  .spido .note.entwurfhinweis{font-size:var(--m-meta)}
}

/* =====================================================================
   EXPLANATION TEXT WIDTH (1)

   Erklaerungstexte in einem Arbeitsbereich nutzen die volle
   Inhaltsbreite, wenn daneben nichts steht. Eine Spalte von 600 px in
   einem 1000 px breiten Bereich sieht aus wie ein abgeschnittener Text
   - und macht aus zwei Zeilen vier.

   Fliesstext auf einer Leseseite bleibt begrenzt; das hier gilt fuer
   die Arbeitsflaeche.
   ===================================================================== */
:is(.spido.app,.spido.flow) .finalrueckgabe p,
:is(.spido.app,.spido.flow) .lernfrage-warum,
:is(.spido.app,.spido.flow) .leer p{max-width:none}

/* =====================================================================
   DER VERLAUF (4 bis 7)

   Sekundaere Information: zugeklappt, ohne eigene Ueberschrift, am
   Ende. Er ist ein Nachweis - kein Eintrag verlangt etwas.
   ===================================================================== */
.spido .verlaufblock{margin-top:var(--spido-space-lg)}
.spido .verlaufblock > summary{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  list-style:none;padding:8px 0;
  font-size:14.5px;font-weight:var(--spido-fw-halb);
  color:var(--spido-text-leise);min-height:var(--spido-touch-min);
}
.spido .verlaufblock > summary::-webkit-details-marker{display:none}
.spido .verlaufblock > summary::after{content:'↓';font-size:13px}
.spido .verlaufblock[open] > summary::after{content:'↑'}
.spido .verlaufblock > summary:hover{color:var(--spido-purple)}
.spido .verlaufblock[open] > summary::before{content:'Verlauf ausblenden'}
.spido .verlaufblock[open] > summary{font-size:0}
.spido .verlaufblock[open] > summary::before,
.spido .verlaufblock[open] > summary::after{font-size:14.5px}

.spido .verlauf{list-style:none;margin:8px 0 0;padding:0}
.spido .verlauf li{
  display:flex;gap:14px;align-items:baseline;
  padding:7px 0;border-top:1px solid var(--spido-linie);
  font-size:14.5px;line-height:1.5;
}
.spido .verlauf .vzeit{
  flex:0 0 150px;color:var(--spido-text-leise);font-variant-numeric:tabular-nums;
}
.spido .verlauf .vwas{color:var(--spido-text-2)}

/* =====================================================================
   DIE FRAGE NACH NEUEN INFORMATIONEN (10 bis 12)
   ===================================================================== */
.spido .lernfrage{
  margin:var(--spido-space-md) 0 0;padding:18px 20px;
  background:var(--spido-bg-2);border-radius:var(--spido-radius-sm);
}
.spido .lernfrage-frage{
  margin:0 0 12px;max-width:none;
  font-size:15.5px;font-weight:var(--spido-fw-halb);color:var(--spido-text);
}
.spido .lernwahl{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:10px}
.spido .lernwahl .wahlzeile{margin:0;padding:0;border:none;background:none}
.spido .lernfrage-warum{
  margin:0;font-size:13.5px;line-height:1.5;color:var(--spido-text-leise);
}
.spido .lernkommentar{margin-top:14px}
.spido .lernkommentar .optional{
  font-weight:600;letter-spacing:0;text-transform:none;
  color:var(--spido-text-leise);
}
.spido .lernkommentar textarea{
  width:100%;margin-top:6px;padding:10px 12px;
  border:1px solid var(--spido-linie);border-radius:var(--spido-radius-sm);
  font:inherit;font-size:15px;color:var(--spido-text);background:#fff;
  resize:vertical;
}
.spido .lernkommentar textarea:focus{
  outline:none;border-color:var(--spido-purple);
  box-shadow:0 0 0 3px var(--spido-purple-050);
}
.spido .lernfrage .msg:empty{display:none;min-height:0;margin:0}

@media(max-width:1023px){
  .spido .verlauf li{flex-direction:column;gap:2px}
  .spido .verlauf .vzeit{flex:0 0 auto;font-size:var(--m-meta)}
  .spido .verlauf .vwas{font-size:var(--m-text)}
  .spido .verlaufblock > summary{font-size:var(--m-knopf-zweit)}
  .spido .verlaufblock[open] > summary::before,
  .spido .verlaufblock[open] > summary::after{font-size:var(--m-knopf-zweit)}
  .spido .lernfrage{padding:var(--m-karte)}
  .spido .lernfrage-frage{font-size:var(--m-text-stark)}
  .spido .lernwahl{flex-direction:column;gap:0}
  .spido .lernfrage-warum{font-size:var(--m-meta)}
  .spido .lernkommentar textarea{font-size:16px}
}

/* =====================================================================
   MOBILE APPSHELL v1 (4 bis 9)

   Vier Ziele mit Icon UND Text, dazu ein Fach fuer alles Weitere.
   Sechs Piktogramme ohne Beschriftung nebeneinander waren keine
   Navigation, sondern ein Raten.
   ===================================================================== */
:root{ --spido-navi-hoehe: 62px; }

@media(max-width:1023px){
  /* Die Leiste: vier gleich breite Felder, Beschriftung sichtbar. */
  .spido .seitenleiste{
    padding:4px 4px calc(4px + env(safe-area-inset-bottom));
    background:#fff;
  }
  /* Ein festes Raster statt Flex: Vier Felder, gleich breit, und keines
     kann von einem laengeren Nachbarn herausgedraengt werden. Mit
     `flex` verschwand das vierte auf 375 px - sichtbar war es erst ab
     etwa 500 px, und genau das faellt beim Entwickeln nicht auf, weil
     das Fenster meistens breiter ist. */
  .spido .slnav:not(.slfuss){
    display:grid;grid-template-columns:repeat(4,1fr);
    flex:1;align-items:stretch;min-width:0;
  }
  /* Der sekundaere Bereich liegt im Fach, nicht in der Leiste. */
  .spido .slnav.slfuss{display:none}

  .spido .slnav:not(.slfuss) > a,
  .spido .slmehr{
    min-width:0;display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:3px;
    padding:6px 2px;min-height:var(--spido-navi-hoehe);
    border:none;background:none;cursor:pointer;
    color:var(--spido-text-leise);text-decoration:none;
  }
  .spido .slnav:not(.slfuss) > a svg,
  .spido .slmehr svg{width:22px;height:22px;flex:0 0 22px}
  .spido .slkurz{
    font-size:11.5px;font-weight:var(--spido-fw-halb);
    letter-spacing:.01em;line-height:1;
  }
  /* Die lange Beschriftung der Desktop-Leiste bleibt fuer Vorleser da,
     ist aber nicht zu sehen - sonst stuenden zwei Texte im Feld. */
  .spido .slnav:not(.slfuss) > a{font-size:0}
  .spido .slkurz{font-size:11.5px}

  /* 6: Der aktive Bereich ist sofort erkennbar. */
  .spido .slnav a.active,
  .spido .slmehr.active,
  .spido .slmehr.offen{color:var(--spido-purple)}
  .spido .slnav a.active::before{display:none}

  /* 7: Die Leiste verdeckt nichts. */
  .spido.app > .main{
    padding-bottom:calc(var(--spido-navi-hoehe) + env(safe-area-inset-bottom) + 24px);
  }

  /* Das Mehr-Fach. Es legt sich ueber die Seite und schliesst bei einem
     Klick daneben oder mit Escape. */
  .spido .mehrfach{
    position:fixed;inset:0;z-index:19;
    background:rgba(22,23,42,.42);
    display:flex;align-items:flex-end;
  }
  .spido .mehrflaeche{
    width:100%;background:#fff;
    border-radius:var(--spido-radius-karte) var(--spido-radius-karte) 0 0;
    padding:10px 8px calc(var(--spido-navi-hoehe) + env(safe-area-inset-bottom) + 10px);
    box-shadow:0 -8px 32px rgba(22,23,42,.18);
  }
  .spido .mehrflaeche a{
    display:flex;align-items:center;gap:14px;
    padding:14px 16px;min-height:var(--m-hoehe-touch);
    font-size:var(--m-text);font-weight:var(--spido-fw-halb);
    color:var(--spido-text);text-decoration:none;
    border-radius:var(--spido-radius-sm);
  }
  .spido .mehrflaeche a svg{width:22px;height:22px;flex:0 0 22px;
    color:var(--spido-text-leise)}
  .spido .mehrflaeche a:hover{background:var(--spido-bg-2)}
  .spido .mehrflaeche a.slraus{
    display:flex;margin-top:6px;padding-top:18px;
    border-top:1px solid var(--spido-linie);border-radius:0;
    color:var(--spido-text-leise);
  }
}

/* Tablet: die Schale ist mobil, der Inhalt darf zweispaltig bleiben,
   wo die Breite reicht (29). */
@media(min-width:768px) and (max-width:1023px){
  .spido .slnav:not(.slfuss) > a,
  .spido .slmehr{max-width:180px}
  .spido .mehrflaeche{
    max-width:520px;margin:0 auto;
    border-radius:var(--spido-radius-karte) var(--spido-radius-karte) 0 0;
  }
}

/* =====================================================================
   TABLET (29)

   Der Mobilstandard gilt ab jetzt bis 1023 px: Schriftgroessen,
   Touchmasse und Dichte sind auf einem Tablet dieselbe Anforderung wie
   auf einem Telefon - es wird mit dem Finger bedient und im Stehen
   gelesen.

   Was NICHT dasselbe ist: die Breite. 16 px Rand sind auf 768 px kein
   Rand mehr, sondern ein randloser Block. Deshalb hier eine eigene
   Stufe.
   ===================================================================== */
@media(min-width:768px) and (max-width:1023px){
  :root{ --m-rand: 28px; }
  .spido .wrap,
  :is(.spido.app,.spido.flow) .wrap,
  .spido .wrap.schmal,
  :is(.spido.app,.spido.flow) .wrap.schmal{
    padding-left:var(--m-rand);padding-right:var(--m-rand);
  }
  /* Wo die Breite reicht, duerfen zwei Karten nebeneinander stehen. */
  .spido .arbeitskarten{grid-template-columns:repeat(2,1fr)}
  .spido .listenleiste{flex-direction:row;align-items:center}
  .spido .listensort select{width:auto}
}

/* =====================================================================
   DIE ERGEBNISSEITE ALS ERFOLGSMOMENT (3, 13, 16)

   VALUE-MOMENT-FIRST: Zuerst das Ergebnis, dann alles andere. Der
   Kaufaufruf stand unmittelbar unter der Fertigmeldung; jetzt steht er
   ganz unten und ohne Preis.
   ===================================================================== */
.spido .fertighaken{
  display:inline-flex;align-items:center;justify-content:center;
  width:1em;height:1em;margin-right:.42em;
  color:var(--spido-gruen);font-weight:700;
  /* Sehr dezent: Der Haken erscheint, er springt nicht. */
  animation:spidohaken 420ms ease-out both;
}
@keyframes spidohaken{
  from{opacity:0;transform:scale(.72)}
  to{opacity:1;transform:scale(1)}
}
@media(prefers-reduced-motion:reduce){
  .spido .fertighaken{animation:none}
}

.spido .ergebnissatz{
  margin:4px 0 0;max-width:none;
  font-size:15.5px;line-height:1.5;color:var(--spido-text-2);
}

/* Der ruhige Abschluss. Eine Frage, eine Aktion, ein Nebenweg - und
   kein Preisschild am Ergebnis. */
.spido .weiterblock{margin:0 0 var(--spido-space-md)}
.spido .weitertitel{
  margin:0 0 12px;font-size:18px;font-weight:var(--spido-fw-fett);
  color:var(--spido-text);
}
.spido .weiterblock .weiterzeile{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:0;
}

@media(max-width:1023px){
  .spido .ergebnissatz{font-size:var(--m-text)}
  .spido .weitertitel{font-size:var(--m-h2)}
  .spido .weiterblock .weiterzeile{
    flex-direction:column;align-items:stretch;gap:var(--m-eng);
  }
  .spido .weiterblock .weiterzeile .btn{
    width:100%;justify-content:center;
    min-height:var(--m-hoehe-cta);font-size:var(--m-knopf);
  }
  .spido .weiterblock .weiterzeile .lnk{
    text-align:center;min-height:var(--m-hoehe-touch);
    display:flex;align-items:center;justify-content:center;
    font-size:var(--m-knopf-zweit);
  }
}

/* =====================================================================
   DIE DOKUMENTZEILE - EINE Komponente, EIN Raster

   Vorher steuerten ueber zwanzig Regeln in acht Bloecken dieselben
   fuenf Zeilen: Desktop, App, Flow und drei Mobilstufen, jede mit
   eigenen Einrueckungen. Zusammen ergab das mehrere Layoutmuster in
   derselben Liste - Nummer, Titel und Aktion sassen nicht auf
   denselben Achsen, und Dokument 2 sah anders aus als Dokument 3.

   Jetzt: zwei Spalten. Nummer links, alles andere rechts. Auf jeder
   Breite, in jeder Schale, fuer jedes der fuenf Dokumente. Das interne
   Dokument bekommt ein Abzeichen und einen Hinweis - keine andere
   Ausrichtung.
   ===================================================================== */
.spido .docs{margin:0 0 var(--spido-space-sm)}

.spido .dokeintrag{
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  column-gap:16px;
  padding:16px 0;
  margin:0;
}
/* Der Trenner gehoert zwischen die Zeilen, nicht an jede einzelne -
   sonst haengt einer unter der letzten. */
.spido .dokeintrag + .dokeintrag{border-top:1px solid var(--spido-linie)}

.spido .dokeintrag .dic{
  grid-column:1;grid-row:1;
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:12px;
  background:var(--spido-purple-050);color:var(--spido-purple);
  font-size:15px;font-weight:700;
}

/* Spalte zwei traegt ALLES uebrige - Titel, Beschreibung, Aktion.
   Damit beginnen sie auf derselben Achse. */
.spido .dokeintrag .doccard{
  grid-column:2;grid-row:1;
  display:flex;flex-direction:column;align-items:flex-start;
  gap:0;min-width:0;padding:0;border:none;background:none;
  text-decoration:none;color:inherit;
}
.spido .dokeintrag .dt{
  margin:0;font-size:16px;line-height:1.3;
  font-weight:var(--spido-fw-halb);color:var(--spido-purple);
}
.spido .dokeintrag .ds{
  margin:6px 0 0;font-size:14px;line-height:1.4;color:var(--spido-text-leise);
}
.spido .dokeintrag .open{
  margin:12px 0 0;font-size:14.5px;font-weight:var(--spido-fw-halb);
  color:var(--spido-purple);white-space:nowrap;
}
.spido .dokeintrag .doccard:hover .dt{text-decoration:underline}

/* Das interne Dokument: ein Abzeichen und ein Hinweis, mehr nicht. */
.spido .dokeintrag .intern{
  display:inline-block;margin:6px 0 0;
  padding:2px 8px;border-radius:var(--spido-radius-pille);
  background:#fff5e6;color:#9a6400;
  font-size:11.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;
}
/* OBJECT-BOUND NOTICE: Der Hinweis steht in derselben Spalte wie der
   Titel, zu dem er gehoert - und ueber deren volle Breite. */
.spido .dokeintrag .internhinweis{
  grid-column:2;grid-row:2;
  margin:10px 0 0;max-width:none;
  font-size:14px;line-height:1.55;color:var(--spido-text-2);
}
.spido .dokeintrag .internhinweis strong{color:var(--spido-text)}

/* Auf dem Desktop darf die Aktion nach rechts - die Achsen bleiben. */
@media(min-width:1024px){
  .spido .dokeintrag{padding:12px 0}
  .spido .dokeintrag .doccard{
    flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:0 14px;
  }
  .spido .dokeintrag .ds{margin:0}
  .spido .dokeintrag .intern{margin:0}
  .spido .dokeintrag .open{margin:0 0 0 auto}
}

@media(max-width:1023px){
  /* Mobilstandard: groessere Schrift, gleiche Achsen. */
  .spido .dokeintrag{grid-template-columns:44px minmax(0,1fr);padding:18px 0}
  .spido .dokeintrag .dt{font-size:var(--m-h2);line-height:1.25}
  .spido .dokeintrag .ds{font-size:var(--m-text)}
  .spido .dokeintrag .open{font-size:var(--m-knopf-zweit);white-space:normal}
  .spido .dokeintrag .internhinweis{font-size:var(--m-meta)}
  .spido .dokeintrag .intern{font-size:var(--m-meta);text-transform:none}
}

/* =====================================================================
   PUBLIC-SHELL und APP-SHELL

   Die oeffentliche Website darf einen vollstaendigen Fuss haben. Die
   angemeldete Anwendung auf dem Telefon nicht: Dort wurde er zu einer
   senkrechten Liste gestapelt und hing mit grossen Abstaenden unter der
   Arbeit - sechs Links, die niemand dort sucht, waehrend "Zur
   Spido-Homepage" ohnehin im Mehr-Fach steht.

   Rechtliches ist ueber "Mehr" erreichbar. Nichts geht verloren
   (NAVIGATION-PARITY), es wird nur umgeformt.
   ===================================================================== */
/* APP_SHELL != PUBLIC_FOOTER - und zwar auf JEDER Breite.

   Bis eben galt das nur auf dem Telefon. Auf dem Laptop stand unter
   dem Uploadflow weiterhin die Fussnavigation der oeffentlichen
   Website. Das ist derselbe Fehler, nur breiter: Eine Arbeitsflaeche
   endet mit ihrer Arbeit.

   Die rechtlichen Ziele gehen dabei nicht verloren (NAVIGATION-PARITY):
   auf dem Telefon im Mehr-Fach, auf dem Desktop als kleine Zeile unten
   in der Seitenleiste. Beide Listen werden aus dem Fuss KOPIERT, nicht
   getippt - zwei getippte Listen veralten einzeln. */
:is(.spido.app,.spido.flow) .fuss,
:is(.spido.app,.spido.flow) .foot-dsgvo{display:none}

@media(max-width:1023px){
  .spido .mehrrecht{
    display:flex;flex-wrap:wrap;gap:2px 4px;
    margin-top:6px;padding-top:14px;
    border-top:1px solid var(--spido-linie);
  }
  .spido .mehrrechtlink{
    padding:10px 12px;min-height:var(--m-hoehe-touch);
    display:inline-flex;align-items:center;
    font-size:var(--m-meta);font-weight:var(--spido-fw-halb);
    color:var(--spido-text-leise);text-decoration:none;
    border-radius:var(--spido-radius-sm);
  }
  .spido .mehrrechtlink:hover{background:var(--spido-bg-2)}
}

/* =====================================================================
   RESPONSIVE-ISOLATION

   Mobile Anpassungen duerfen die Desktop-Schale nicht veraendern.
   Genau das war passiert: Das Mehr-Feld steht seit dem Mobilumbau fest
   im Markup der Seitenleiste - es soll nicht davon abhaengen, ob und
   wann JavaScript laeuft -, aber es gab keine Regel, die es oberhalb
   von 1024 px wieder ausblendet. Der Kommentar im Baustein behauptete
   "auf dem Desktop unsichtbar". Behauptet, nicht gemessen.

   Ab 1024 px zeichnete der Browser deshalb einen gewoehnlichen Knopf
   mit drei Punkten in die Seitenleiste, und die kurzen Beschriftungen
   standen hinter den langen: "Startseite Start".

   NAVIGATION_MODE = viewport >= 1024 ? DESKTOP_SIDEBAR : MOBILE_BOTTOM_NAV
   Genau ein Modus. Nie beide.
   ===================================================================== */
@media(min-width:1024px){
  /* Das Mehr-Feld und sein Fach gehoeren der unteren Leiste. Auf dem
     Desktop steht der sekundaere Bereich unten in der Seitenleiste -
     ein zweiter Zugang daneben waere eine zweite Navigation. */
  .spido .slmehr,
  .spido .mehrfach{display:none}

  /* Die Kurzform ist fuer 375 px gedacht. Neben der ausgeschriebenen
     Beschriftung wird sie zur Dopplung. */
  .spido .slnav .slkurz{display:none}

  /* Rechtliches in der Seitenleiste (17). Klein, ruhig, unten - es ist
     Pflichtnavigation, kein Arbeitsziel. */
  .spido .slrecht{
    display:flex;flex-wrap:wrap;gap:0 10px;
    margin:12px 12px 0;padding-top:12px;
    border-top:1px solid var(--spido-linie);
  }
  /* Der Selektor nennt die Leiste mit, sonst gewinnt `.slnav a` mit
     seinen 44 px Mindesthoehe - die Rechtszeile waere dann fuenf
     Zeilen hoch und ragte wieder aus der Leiste. */
  .spido .slnav .slrechtlink{
    display:inline;padding:0;gap:0;min-height:0;border-radius:0;
    font-size:11.5px;line-height:1.9;font-weight:400;
    color:var(--spido-text-leise);text-decoration:none;
  }
  .spido .slnav .slrechtlink:hover{
    background:none;color:var(--spido-purple);text-decoration:underline;
  }
}

/* Unter 1024 traegt das Mehr-Fach diese Ziele - die Seitenleiste ist
   dort eine Zeile mit vier Feldern und hat keinen Platz dafuer. */
@media(max-width:1023px){
  .spido .slrecht{display:none}
}