/* /Components/Anfrageformular.razor.rz.scp.css */
/* Anfrageformular.
   Ausschliesslich var(--...)-Referenzen auf tokens.css/tokens-ergaenzung.css (gleiche Haltung wie
   Register.razor.css/Wegweisertafel.razor.css) -- Basis-Primitive (Formularfelder/-Buttons:
   se-field/se-input/se-select/se-textarea/se-checkbox/se-check-row/se-field-error/se-btn) kommen
   von dort, hier nur, was noch keiner geteilten Komponente gehoert.

   Floating-Label-Redesign (dieses Segment): Name/E-Mail/Paket/Nachricht bekommen ein modernes
   Floating-Label statt der bisherigen festen Ueberschrift oberhalb des Feldes. CSS-only, kein JS --
   ".se-label" steht im Markup bewusst NACH dem Feld (Anfrageformular.razor), damit der
   Geschwister-Selektor "input + label" greift; die "for"/"id"-Verknuepfung bleibt unveraendert, die
   DOM-Reihenfolge ist fuer Screenreader irrelevant. Der Trigger fuer den "hat Inhalt"-Zustand ist
   ":not(:placeholder-shown)" (dafuer traegt jedes Feld ein leeres placeholder=" " im Markup) plus
   ":focus" fuer den Zwischenzustand waehrend der Eingabe. "select" hat kein ":placeholder-shown" --
   dessen Label steht deshalb permanent im geflotteten Zustand (die Default-Option "Kein Paket
   ausgewaehlt" ist bereits sichtbarer Inhalt).

   Kontrast-Konsequenz gegenueber der Vorgaenger-Version: das Label lag vorher OBERHALB des Feldes,
   direkt auf dem Sektionshintergrund (Navy in Landing.razor) -- das erzwang die
   ".se-sec--navy .anfrage-formular .se-label"-Gegenkorrektur weiter unten in der Historie dieser
   Datei. Jetzt liegt das Label IN der Feldflaeche selbst (siehe ".anfrage-floating" unten), die per
   Design immer hell ist (--blau-50), unabhaengig vom Sektionshintergrund -- die Label-Farb-
   Gegenkorrektur entfaellt deshalb ersatzlos. Checkbox-Rand und Feld-Fehlertext bleiben betroffen,
   weil sie weiterhin direkt auf dem Sektionshintergrund liegen. */

/* Kein "display:flex; gap:" auf ".anfrage-formular" selbst (frueherer Ansatz, wirkungslos): das
   Element, das die Klasse traegt, ist das <form>, das EditForm INTERN rendert -- EditForm steht
   in diesem File nur als Komponenten-Tag, keine literale HTML-Markierung, deshalb haengt Blazors
   CSS-Isolation hier KEIN Scope-Attribut an (anders als bei div/input/label/button, die alle
   literal in diesem File stehen). ".anfrage-formular[b-xxx] { gap: ... }" verlangt das
   Scope-Attribut aber genau auf diesem Element -- die Regel matcht dadurch nie, unabhaengig vom
   Wert. Gleiches Muster, gleicher Fix wie bei ".se-field--invalid .se-input" weiter unten: der
   Vertikalabstand wird stattdessen ueber Nachbarschafts-Selektoren auf Elementen gesetzt, die
   tatsaechlich literal hier stehen (".se-field", ".se-btn") und das Scope-Attribut deshalb tragen. */
.anfrage-formular .se-field + .se-field[b-qhk3dzksqf] {
    margin-top: var(--space-8);
}

.anfrage-formular .se-btn[b-qhk3dzksqf] {
    margin-top: var(--space-8);
}

/* ---------- Feld-Rhythmus (innerhalb eines Feldes) ----------
   Frueher gap zwischen Label (oberhalb) und Feld; das Label liegt jetzt IN der Feldflaeche
   (".anfrage-floating"), der verbleibende gap ist nur noch fuer den Fehlertext unterhalb des
   Feldes noetig -- kompakter als vorher, naechster vorhandener Space-Token. */
.anfrage-formular .se-field[b-qhk3dzksqf] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* ---------- Floating-Label-Traeger ----------
   Eigene Zwischenebene statt direkt auf ".se-field", weil ".se-field" auch den Fehlertext haelt
   (der nicht Teil der relativen Positionierung sein soll). */
.anfrage-floating[b-qhk3dzksqf] {
    position: relative;
}

.anfrage-floating .se-input[b-qhk3dzksqf],
.anfrage-floating .se-select[b-qhk3dzksqf],
.anfrage-floating .se-textarea[b-qhk3dzksqf] {
    /* Radius: tokens.css dokumentiert "max 4px erlaubt, real verbaut 0px" -- dieses Segment nutzt
       erstmals die dokumentierte Obergrenze (kein neuer/erfundener Wert, kein Custom-Property
       vorhanden, deshalb Literal wie bereits bei --shadow-sm/--tip in tokens.css ueblich). */
    border-radius: 4px;
    border: thin solid var(--linie);
    /* Sehr helle, abgesetzte Flaeche statt hartem Weiss auf Weiss (StepDetail.razor-Kontext) bzw.
       Weiss auf Navy (Landing.razor-Kontext) -- --blau-50 ist bereits als "ruhige Flaeche" tokenisiert
       und traegt in beiden Kontexten genug Kontrast zum jeweiligen Umfeld. */
    background: var(--blau-50);
    color: var(--text);
    font-family: var(--sans);
    font-size: var(--font-size-body);
    width: 100%;
    /* Vertikal genug Raum, damit das geflottete Label (oben, klein) nie mit dem Eingabetext
       kollidiert; unten bewusst etwas weniger, das Feld bleibt dadurch insgesamt kompakter als die
       vorherige Version mit separater Ueberschrift. */
    padding: 22px var(--space-4) var(--space-2);
    min-height: var(--space-11);
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.anfrage-floating .se-textarea[b-qhk3dzksqf] {
    /* "deutlich hoeher" als Name/E-Mail/Paket (--space-11, 56px) -- naechster vorhandener
       Space-Token, keine Zwischen-/Erfindungsgroesse. */
    min-height: var(--space-13);
    padding-top: 26px;
    resize: vertical;
}

.anfrage-floating .se-input[b-qhk3dzksqf]::placeholder,
.anfrage-floating .se-textarea[b-qhk3dzksqf]::placeholder {
    /* placeholder=" " im Markup ist rein technisch (Trigger fuer :placeholder-shown) -- unsichtbar
       im Feld, deshalb keine eigene Farbe noetig, aber explizit transparent statt der Basis-
       Primitive-Placeholder-Farbe, damit kein Leerzeichen-Cursor-Artefakt sichtbar wird. */
    color: transparent;
}

.anfrage-floating .se-input:focus[b-qhk3dzksqf],
.anfrage-floating .se-select:focus[b-qhk3dzksqf],
.anfrage-floating .se-textarea:focus[b-qhk3dzksqf] {
    border-color: var(--rot);
    outline: none;
    /* Sehr dezenter Glow statt starkem Schatten -- rgba-Literal aus --rot (#D61E24 = rgb(214,30,36)),
       gleiche Konvention wie --shadow-sm (rgba-Literal statt Custom Property, da tokens.css keine
       Alpha-Varianten der Farbtokens kennt). ":focus" statt ":focus-visible", damit der Glow auch
       bei Maus-Fokus erscheint -- der Tastatur-Fokusring (":focus-visible", global in
       swissentry.css) bleibt zusaetzlich unveraendert bestehen und traegt die Barrierefreiheits-
       garantie, der Glow ist rein kosmetisch obendrauf. */
    box-shadow: 0 0 0 3px rgba(214, 30, 36, 0.15);
}

.se-field--invalid .anfrage-floating .se-input[b-qhk3dzksqf],
.se-field--invalid .anfrage-floating .se-select[b-qhk3dzksqf],
.se-field--invalid .anfrage-floating .se-textarea[b-qhk3dzksqf] {
    border-color: var(--rot);
}

/* ---------- Label: Ruhezustand (mittig im leeren Feld, wirkt wie ein Placeholder) ---------- */
.anfrage-floating .se-label[b-qhk3dzksqf] {
    position: absolute;
    left: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--sans);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-regular);
    color: var(--text-2);
    line-height: 1;
    max-width: calc(100% - 2 * var(--space-4));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    transform-origin: left top;
    transition: top 180ms ease, transform 180ms ease, color 180ms ease;
}

/* ---------- Label: geflotteter Zustand (fokussiert oder mit Inhalt) ----------
   "select" hat kein ":placeholder-shown" -- dessen Label bekommt den geflotteten Zustand deshalb
   unbedingt (letzte Regel), nicht ueber einen Zustands-Selektor. */
.anfrage-floating .se-input:focus + .se-label[b-qhk3dzksqf],
.anfrage-floating .se-input:not(:placeholder-shown) + .se-label[b-qhk3dzksqf],
.anfrage-floating .se-textarea:focus + .se-label[b-qhk3dzksqf],
.anfrage-floating .se-textarea:not(:placeholder-shown) + .se-label[b-qhk3dzksqf],
.anfrage-floating .se-select + .se-label[b-qhk3dzksqf] {
    top: var(--space-2);
    transform: translateY(0) scale(0.82);
    color: var(--navy-700);
    font-weight: var(--font-weight-bold);
}

.anfrage-floating .se-input:focus + .se-label[b-qhk3dzksqf],
.anfrage-floating .se-textarea:focus + .se-label[b-qhk3dzksqf],
.anfrage-floating .se-select:focus + .se-label[b-qhk3dzksqf] {
    color: var(--rot);
}

/* Das "(optional)"-Suffix im Paket-Label erbt die geflottete Groesse automatisch (kein eigener
   Skalierungsschritt), soll darin aber wie bisher als Sekundaertext wirken. */
.anfrage-floating .se-label .se-klein[b-qhk3dzksqf] {
    font-size: inherit;
    color: inherit;
    opacity: 0.75;
}

/* ---------- Select: eigener Pfeil statt Browser-Default ----------
   appearance:none entfernt auch den nativen Pfeil -- Ersatzpfeil als eingebettetes SVG (kein
   Bild-Asset, keine externe Anfrage). Farbe ist ein Literal, das --navy-700 (#0D2B5A) spiegelt --
   eine data-URI kann keine Custom Property referenzieren. */
.anfrage-floating--select .se-select[b-qhk3dzksqf] {
    appearance: none;
    -webkit-appearance: none;
    padding-right: var(--space-9);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%230D2B5A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-4) center;
    background-size: 12px 8px;
    cursor: pointer;
}

/* ---------- Fokus-Ring auf Navy-Grund (hartes Verbot) ----------
   Die globale ":focus-visible"-Regel (swissentry.css) faerbt den Ring ueberall auf --rot, ausser
   ein Vorfahre traegt ".on-dark" -- diese Klasse setzt weder Landing.razor noch dieses Segment
   (ausserhalb des erlaubten Aenderungsbereichs). Ohne Korrektur waere der Fokus-Ring auf den
   Feldern dieses Formulars in der Navy-Sektion --rot auf Navy-900 (2-3:1, fuer einen duennen Ring
   kein Grosstext-Fall) -- exakt die laut Token-Kommentar verbotene Kombination. Lokale Korrektur,
   gleicher Zielwert wie ".on-dark :focus-visible" andernorts. Gilt weiterhin, weil der Ring an der
   Aussenkante des Feldes gegen den Sektionshintergrund erscheint -- unabhaengig davon, dass die
   Feldflaeche selbst jetzt immer hell ist. */
.se-sec--navy .anfrage-formular .se-input:focus-visible[b-qhk3dzksqf],
.se-sec--navy .anfrage-formular .se-select:focus-visible[b-qhk3dzksqf],
.se-sec--navy .anfrage-formular .se-textarea:focus-visible[b-qhk3dzksqf],
.se-sec--navy .anfrage-formular .se-checkbox:focus-visible[b-qhk3dzksqf],
.se-sec--navy .anfrage-formular .se-btn:focus-visible[b-qhk3dzksqf] {
    outline-color: var(--weiss);
}

/* ---------- Kontrast-Fix: Navy-Kontext (WCAG AA) ----------
   Nur die zwei Basis-Primitiven, die ihre Farbe *explizit* auf Navy-700/Rot setzen (und damit die
   von .se-sec--navy ererbte helle Vorgabe ueberschreiben) und weiterhin direkt auf dem
   Sektionshintergrund liegen, brauchen eine Gegenkorrektur:
   - Checkbox-Rand: Navy-700 auf Navy-900 (~1,3:1) -> --on-navy-2 (9,9:1 auf Navy-900, gleicher
     Token wie das bereits vorhandene ".se-sec--navy .se-klein"-Muster).
   - Feld-Fehlertext: --rot direkt auf Navy-900 ist fuer normalen Text hart verboten (tokens.css-
     Kommentar "Rot auf Navy-900 nur Grosstext ab 24px Bold/30px Regular") -- das ungueltige Feld
     zeigt seinen Fehlerzustand weiterhin ueber die rote Feldumrandung (auf der hellen
     Eingabefeld-Flaeche, unveraendert), der Fehler-FLIESSTEXT selbst laeuft auf --on-navy weiter.
   Das Label selbst braucht hier keine Regel mehr -- es liegt jetzt in der Feldflaeche
   (".anfrage-floating .se-label"), nicht mehr direkt auf Navy, siehe Datei-Kopfkommentar. */
.se-sec--navy .anfrage-formular .se-checkbox[b-qhk3dzksqf] {
    border-color: var(--on-navy-2);
}

.se-sec--navy .anfrage-formular .se-field-error[b-qhk3dzksqf] {
    color: var(--on-navy);
}

/* Bestaetigungstext nach erfolgreichem Absenden -- ersetzt das Formular (kein bestimmtes
   Element vorgeschrieben). */
.anfrage-erfolg[b-qhk3dzksqf] {
    margin: 0;
    padding: var(--space-4);
    border-radius: var(--radius-sm);
    background: var(--blau-50);
    color: var(--text);
    font-weight: var(--font-weight-bold);
}
/* /Components/KiBild.razor.rz.scp.css */
/*
  KiBild -- Anatomie .ki-bild/.ki-marke.

  Bewusst KEINE Bildgeometrie hier: aspect-ratio/object-fit/object-position/width/height stehen je
  Platz global in swissentry.css (".se-hero-bild img", ".se-etappen-bild img", ".se-beratung-bild
  img", ".se-kontakt-bild img"). Isolierte Selektoren wiegen durch das angehaengte Scope-Attribut
  schwerer als die globalen -- eine Geometrie-Eigenschaft hier wuerde die Zuschnitte aller vier
  Plaetze stillschweigend ueberschreiben. display:block ist die einzige Ausnahme: sie kollidiert
  mit keiner der globalen Regeln und entfernt die Grundlinien-Luecke, die ein inline-Bild sonst
  zwischen Bildunterkante und Figure-Rand laesst -- ohne sie sitzt die Marke nicht auf dem Bild,
  sondern ein paar Pixel darunter.
*/

.ki-bild[b-mrpzlw6i8n] {
  margin: 0; /* Browser-Default fuer <figure> ist 1em 40px -- wuerde die Sektionsraster verschieben. */
  position: relative; /* Bezugsrahmen fuer die absolut positionierte Marke. */
}

.ki-bild img[b-mrpzlw6i8n] {
  display: block;
}

.ki-marke[b-mrpzlw6i8n] {
  /* Rechts unten flach in der Bildecke, nicht als schwebende Kachel: passt zur Beschilderungs-
     Sprache des Designs (--radius-sm ist 0px) und bleibt so dezent wie moeglich, ohne die
     Lesbarkeit zu opfern -- die Offenlegung nach Art. 50 Abs. 4 AI Act muss klar erkennbar sein,
     ein blasser oder erst beim Hover erscheinender Hinweis erfuellt das nicht. Deshalb auch
     volldeckendes --navy-900 statt eines transparenten Overlays: Weiss auf Navy-900 ist 17,2:1
     und damit unabhaengig davon lesbar, welcher Bildausschnitt gerade darunter liegt. */
  position: absolute;
  inset: auto 0 0 auto;
  background: var(--navy-900);
  color: var(--on-navy);
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-eyebrow);
  font-weight: var(--font-weight-bold);
  font-stretch: var(--stretch-signage-standard);
  line-height: var(--leading-eyebrow);
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
  border-radius: var(--radius-sm);
}
/* /Components/Paketkachel.razor.rz.scp.css */
/*
  Paketkachel -- Anatomie .paket/.paket-innen/.paket-name/.paket-zusatz/.paket-preis auf Tokens
  uebertragen.

  ACHTUNG: in diesem Kommentar niemals "p-*" direkt vor einem Schraegstrich schreiben — die
  Folge "*" + "/" beendet den Kommentar vorzeitig und frisst die erste Regel darunter.

  Die Farbklassen p-… und n-… (dieselbe Zuordnung fuer Paketbalken/-Haekchen/-Namen) stehen
  bewusst NICHT hier, sondern global in swissentry.css: Blazor-CSS-Isolation scoped
  Klassenregeln nur auf die Elemente der eigenen Komponente -- Vergleich.razor rendert dieselben
  Klassen in eigenem Markup und wuerde eine hier scoped Definition nicht sehen. Eine globale
  Definition statt zweier widerspruechlicher Kopien.
*/

.paket[b-lb7gs0t8g8] {
  border: thin solid var(--linie);
  background: var(--weiss);
  padding: 0 0 var(--space-6); /* Original 22px aufgerundet -- naechster Token --space-6 24px */
  border-radius: var(--radius-sm);
}

.paket-balken[b-lb7gs0t8g8] {
  height: 6px; /* feste Balken-Staerke, kein Space-Token passt */
}

.paket-innen[b-lb7gs0t8g8] {
  padding: var(--space-5) var(--space-5) 0;
}

.paket-name[b-lb7gs0t8g8] {
  margin: 0;
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-h3); /* Original 1.2 aufgerundet -- naechster Token --leading-h3 1.3 */
}

.paket-zusatz[b-lb7gs0t8g8] {
  margin: var(--space-2) 0 0; /* Original 6px aufgerundet -- naechster Token --space-2 8px */
  font-size: var(--font-size-eyebrow);
  font-weight: var(--font-weight-bold);
  font-stretch: var(--stretch-signage-standard);
  text-transform: uppercase;
  color: var(--text-2);
  /* Original letter-spacing .14em hat keine nahe Token-Entsprechung (einzige Tokens: -0.005em/
     0.16em) -- bewusst weggelassen statt eine unpassende Rundung zu erzwingen, gleiche Haltung
     wie .se-sprache/.se-fuss-marke b in swissentry.css. */
}

.paket-preis[b-lb7gs0t8g8] {
  /* 24px feste Preis-Groesse hat keine Token-Entsprechung:
     --font-size-h2 waere ein fluider clamp(24px..36px) und wuerde den Preis auf breiten
     Bildschirmen ueber 24px hinaus vergroessern -- keine Design-Erfindung, deshalb Literal
     wie bereits an anderer Stelle dokumentiert (Rundungs-Hinweis-Konvention gilt fuer die
     Space-Skala, nicht fuer Typografiegroessen ohne fixe Rolle). */
  font-size: 24px;
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--navy-700);
  margin: var(--space-5) 0 0; /* Original 18px aufgerundet -- naechster Token --space-5 20px */
  line-height: var(--leading-h3); /* Original 1.2 aufgerundet, siehe .paket-name */
}

.paket-endpreis[b-lb7gs0t8g8] {
  margin: var(--space-1) 0 0; /* Original 4px, exakte Entsprechung */
  font-size: var(--font-size-rest); /* Original 13px aufgerundet -- naechster Token 14px */
  color: var(--text-2);
}
/* /Components/Segment.razor.rz.scp.css */
/*
  Segment -- Anatomie von .segment/.segment-icon auf Tokens uebertragen.
  Rundungs-Hinweis-Konvention (gleiche Haltung wie swissentry.css): Werte ohne
  exakte Token-Entsprechung werden auf den naechsten VORHANDENEN Token aufgerundet, nie
  abgerundet (Original 18px Icon/Text-Abstand -> --space-5 20px, Original 24px Vertikalpolster
  ist exakt --space-6). Der Grid-Container (.se-segmente, Spaltenzahl je Breakpoint) lebt in
  swissentry.css analog zu .se-hero/.se-etappen -- diese Datei deckt nur die
  Segment-Karte selbst.
*/

.segment[b-12epnywho1] {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
  padding: var(--space-6) 0;
  border-bottom: thin solid var(--linie);
}

.segment-icon[b-12epnywho1] {
  flex: none;
  /* 52px/26px sind eine feste Icon-Anatomie-Groesse, kein
     passender Space-Token -- gleiche Haltung wie --tip in tokens.css: benannte
     Design-Konstante, keine erfundene Rundung. */
  width: 52px;
  height: 52px;
  border: 1.5px solid var(--linie);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy-700); /* currentColor fuer die Icon-SVG-Strichfarbe, siehe Segment.razor */
}

.segment-icon[b-12epnywho1]  svg {
  width: 26px;
  height: 26px;
}

.segment h3[b-12epnywho1] {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-h3);
  line-height: var(--leading-h3);
  font-weight: var(--font-weight-bold);
  color: var(--navy-700);
}

.segment p[b-12epnywho1] {
  margin: 0;
  font-size: var(--font-size-klein);
  line-height: var(--leading-klein);
  color: var(--text-2);
}

@media (min-width: 700px) {
  .segment[b-12epnywho1] {
    border-bottom: none;
    border-top: thin solid var(--linie);
    border-left: thin solid var(--linie);
    margin-left: -1px; /* kompensiert die Container-Randlinie (.se-segmente), gleiche Technik
                           wie die 3px-Kompensation bei .tafel-arbeit */
    padding: var(--space-6) var(--space-6);
  }
}
/* /Components/TafelRail.razor.rz.scp.css */
/*
  TafelRail — Rail-Container.
  ::deep durchdringt die Komponentengrenze zu den von Wegweisertafel gerenderten .row/.etappe-
  Elementen (Blazor-CSS-Isolation: ohne ::deep wuerden Kind-Komponenten-Elemente nicht getroffen).
*/

.rail[b-15tui0w1y8] {
  position: relative;
  max-width: 780px;
}

/* Keine testid-spezifischen Regeln mehr: die vier verbleibenden Rails stehen alle in BREITEN Spalten.
   Die vier Sonderregeln fuer "wizard-fortschritt-rail" (keine Breitenbeschraenkung, dichterer
   Zeilenabstand, umbrechende Zielangabe, Restangabe in eigener Zeile) sind mit dieser Rail entfallen
   — die Erfassung zeigt ihren Fortschritt in einem eigenen waagrechten Stufenband und nicht mehr in
   einer Rail. Steht je wieder eine Rail in einer schmalen Spalte, sind alle vier Regeln erneut
   noetig: die Tafel-Anatomie ist auf breite Spalten ausgelegt, und ohne sie liegen Ziel- und
   Restangabe uebereinander und die Tafelspitze ragt aus der Spalte. */

.rail[b-15tui0w1y8]  .row + .row {
  margin-top: var(--space-4); /* 16px, aufgerundet von 14px (Referenz), siehe Rundungs-Hinweis */
}

/* 2px-Verbindungslinie zwischen den Etappennummern (§6.1 "Rail"). Rein strukturell (:not(:last-
   child)), keine Sibling-Kenntnis noetig, kein JS. left = Kreis-Mitte (44px Touch-Target / 2)
   minus halbe Linienbreite. */
.rail[b-15tui0w1y8]  .row:not(:last-child)::before {
  content: "";
  position: absolute;
  left: calc(44px / 2 - 1px);
  top: 44px;
  bottom: calc(-1 * var(--space-4));
  width: 2px;
  background: var(--linie);
}

/* Etappe 01/05 rot, 02-04 navy-700 (§6.1 "Rail"). data-nummer ist ein reiner CSS-Hook, den
   Wegweisertafel zusaetzlich zum Vertrags-Testid "etappe-nummer" traegt (siehe dort). Nur
   innerhalb dieses Rail-Containers wirksam (.rail-Praefix), kein globales Leck. */
.rail[b-15tui0w1y8]  [data-nummer="01"],
.rail[b-15tui0w1y8]  [data-nummer="05"] {
  background: var(--rot);
}
/* /Components/Vergleich.razor.rz.scp.css */
/* Vergleich -- Anatomie auf Tokens uebertragen. */

/* Kurz gehalten: ein langer Kommentarblock (>~10 Zeilen) vor der ersten Selektor-Regel bringt
   den .NET-SDK-CSS-Isolation-Rewriter fuer dieses File nachweislich aus dem Takt -- er verliert
   dann das Scope-Attribut fuer JEDE eigene Regel dieser Datei und haengt Bruchstuecke davon an
   zwei falsche Stellen (mitten in einen Kommentar weiter oben sowie hinter die letzte Regel der
   Datei, wo sie in die naechste Bundle-Datei durchschlagen -- reproduzierbar am direkten
   Rewriter-Output unter obj/Release/net8.0/scopedcss/Components/Vergleich.razor.rz.scp.css
   nachvollzogen). Deshalb ist die ausfuehrliche Doku unten auf mehrere kurze Bloecke verteilt,
   naeher an dem, was sie beschreibt, statt in einem einzigen Block ganz oben. */

.vgl-tabelle-wrap[b-za07rakekg] {
  margin-top: var(--space-9); /* Original 40px, exakte Entsprechung */
  overflow-x: auto; /* Referenz-Markup: Tabelle bleibt immer Tabelle, scrollt schmal statt
    umzubrechen oder auf eine zweite Listen-Struktur umzuschalten. */
}

.vgl-tabelle[b-za07rakekg] {
  width: 100%;
  border-collapse: collapse;
  background: var(--weiss);
  table-layout: fixed;
}

.vgl-tabelle col:first-child[b-za07rakekg] {
  width: 40.5%; /* Referenz-Markup-Proportion: Merkmalspalte deutlich breiter als die 4 Paketspalten */
}

.vgl-tabelle col:not(:first-child)[b-za07rakekg] {
  width: 14.875%;
}

@media (max-width: 650px) {
  .vgl-tabelle[b-za07rakekg] {
    min-width: 620px; /* erzwingt horizontales Scrollen im Wrap statt Zeilenumbruch/Ueberlappung */
  }
}

.vgl-tabelle th[b-za07rakekg],
.vgl-tabelle td[b-za07rakekg] {
  text-align: left;
  padding: var(--space-3) var(--space-4); /* kein border-bottom (siehe unten) -- die Zebrastreifen
    (tbody tr:nth-child(even)) uebernehmen die Zeilentrennung allein. */
  font-size: var(--font-size-klein); /* bewusst NICHT das 9.5px-Literal aus dem Referenz-Markup
    uebernommen: das wuerde unter der kleinsten Typo-Skala-Stufe (--font-size-eyebrow 12px)
    liegen und mit dem uebrigen Seiten-Fliesstext (15px) brechen -- gleiche Groesse wie die
    vorherige Tabellenfassung. */
}

.vgl-tabelle thead th[b-za07rakekg] {
  color: var(--weiss);
  vertical-align: middle;
}

.vgl-merkmalkopf[b-za07rakekg] {
  background: var(--navy-700);
  text-align: left;
}

.vgl-kopf-titel[b-za07rakekg],
.vgl-paketkopf-name[b-za07rakekg] {
  display: block;
  font-size: var(--font-size-rest); /* Original 12/11px aufgerundet -- naechster Token 14px */
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  margin-bottom: var(--space-2); /* Original 11px aufgerundet -- naechster Token 8px waere kleiner;
    hier bewusst der naechstgroessere Nachbarwert der Skala (space-2 8px liegt naeher als
    space-3 12px am Original), gleiche Rundungshaltung wie sonst im File. */
}

.vgl-kopf-untertitel[b-za07rakekg],
.vgl-paketkopf-zusatz[b-za07rakekg],
.vgl-paketkopf-preis[b-za07rakekg] {
  display: block;
  font-size: var(--font-size-eyebrow); /* Original 7-9px aufgerundet -- kleinster Token 12px;
    die Groessenstufe title/subtitle aus dem Referenz-Markup wird stattdessen ueber
    --font-size-rest (Titel) vs. --font-size-eyebrow (Untertitel/Preis) nachgebildet, siehe
    oben -- zwei echte Skalenstufen statt eines erfundenen Zwischenwerts. */
  opacity: .92;
}

.vgl-paketkopf-preis[b-za07rakekg] {
  font-weight: var(--font-weight-bold);
  margin-top: var(--space-2);
  opacity: 1;
}

.vgl-paketkopf[b-za07rakekg] {
  text-align: center;
}

/* Kopf-Zellen NICHT ueber die globalen p-.../n-...-Klassen (swissentry.css) eingefaerbt: die
   sind fuer duenne Balken/Text ohne Flaechen-Kontrastanforderung gedacht. Volle Flaeche + weisser
   Text braucht die kontrastsichere -ink-Variante bei Comfort/Familien, exakt wie zuvor bei den
   Haekchen-Kreisen unten begruendet. */
.vgl-kopf-basic[b-za07rakekg] {
  background: var(--navy-700);
}

.vgl-kopf-comfort[b-za07rakekg] {
  background: var(--gold-ink); /* nicht --gold: Weiss auf --gold nur ~2,5:1, faellt WCAG AA
    durch. --gold-ink mit Weiss ist die gleiche Paarung, die die Tokens selbst fuer
    Comfort-Text auf hell dokumentieren (5,5:1), hier als Flaeche genutzt. */
}

.vgl-kopf-premium[b-za07rakekg] {
  background: var(--rot); /* Weiss auf --rot: 5,2:1 WCAG AA, laut tokens-ergaenzung.css */
}

.vgl-kopf-familien[b-za07rakekg] {
  background: var(--gruen-ink); /* nicht --gruen: Weiss auf --gruen nur ~4,0:1, faellt fuer
    die kleine Eyebrow-Schrift knapp durch. --gruen-ink mit Weiss: 5,8:1 WCAG AA. */
}

.vgl-tabelle tbody th[b-za07rakekg] {
  font-weight: var(--font-weight-regular); /* Referenz-Markup: Merkmalstext standardmaessig
    regulaer, nur "starke" Zeilen (siehe unten) sind fett -- anders als die vorherige Fassung,
    die jede Zeile fett zeigte. */
  color: var(--text-2);
}

.vgl-merkmal-stark[b-za07rakekg] {
  font-weight: var(--font-weight-bold);
  color: var(--text);
}

.vgl-tabelle tbody tr:nth-child(even)[b-za07rakekg] {
  background: var(--blau-50);
}

/* ACHTUNG: in diesem Kommentar niemals "p-" direkt vor einem Schraegstrich schreiben -- die
   Folge "*" + "/" beendet den Kommentar vorzeitig und frisst die erste Regel darunter (exakt
   die Falle, vor der Paketkachel.razor.css bereits warnt).
   Die globalen p-.../n-...-Klassen (dieselben wie in Paketkachel.razor.css) sind fuer die
   Paket-Kacheln unten gedacht (duenner Balken + Name, kein Flaechenkontrast-Problem). */

.vgl-check[b-za07rakekg] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-5); /* kein Icon-Groessen-Token vorhanden -- naechstliegender Space-Token */
  height: var(--space-5);
  border-radius: var(--radius-full);
  color: var(--weiss);
  font-size: var(--font-size-eyebrow);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.vgl-basic-zelle .vgl-check[b-za07rakekg] {
  background: var(--navy-700);
}

.vgl-comfort-zelle .vgl-check[b-za07rakekg] {
  background: var(--gold-ink); /* Kontrast-Begruendung siehe Kopfzeile oben */
}

.vgl-premium-zelle .vgl-check[b-za07rakekg] {
  background: var(--rot);
}

.vgl-familien-zelle .vgl-check[b-za07rakekg] {
  background: var(--gruen-ink); /* Kontrast-Begruendung siehe Kopfzeile oben */
}

.vgl-leer[b-za07rakekg] {
  color: var(--text-2);
}

.vgl-basic-zelle[b-za07rakekg],
.vgl-comfort-zelle[b-za07rakekg],
.vgl-premium-zelle[b-za07rakekg],
.vgl-familien-zelle[b-za07rakekg] {
  text-align: center;
}

/* ---------- Paket-Kachelreihe unter der Tabelle ("Welches Paket passt zu dir?") ----------
   Gleiches Grid/Breakpoint-Muster wie .se-pakete (swissentry.css) -- beide Paket-Reihen auf
   derselben Seite (Landing.razor) sollen sich visuell entsprechen. */
.vgl-pakete-titel[b-za07rakekg] {
  margin: var(--space-9) 0 var(--space-5);
  color: var(--navy-700);
  font-size: var(--font-size-eyebrow);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
}

.vgl-pakete[b-za07rakekg] {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5); /* Original 9px stark aufgerundet -- an .se-pakete angeglichen statt
    einen eigenen, kaum wahrnehmbaren Zwischenwert einzufuehren. */
}

@media (min-width: 700px) {
  .vgl-pakete[b-za07rakekg] {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .vgl-pakete[b-za07rakekg] {
    grid-template-columns: repeat(4, 1fr);
  }
}

.vgl-paket[b-za07rakekg] {
  border: thin solid var(--linie);
  background: var(--weiss);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.vgl-paket-balken[b-za07rakekg] {
  height: 6px; /* feste Balken-Staerke, kein Space-Token passt -- gleiche Hoehe wie .paket-balken */
}

.vgl-paket-inhalt[b-za07rakekg] {
  padding: var(--space-5);
}

.vgl-paket-name[b-za07rakekg] {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-rest);
  font-weight: var(--font-weight-bold);
}

.vgl-paket-beschreibung[b-za07rakekg] {
  margin: 0;
  color: var(--text-2);
  font-size: var(--font-size-klein);
  line-height: var(--leading-klein);
}
/* /Components/Wegweisertafel.razor.rz.scp.css */
/*
  Wegweisertafel — die Anatomie hier ist verbindlich.
  Nur var(--...)-Referenzen auf tokens.css/tokens-ergaenzung.css, ausser den drei
  dokumentierten Geometrie-Ausnahmen (siehe Kommentare unten): clip-path-Polygone,
  --tip-Ableitung fuer die Rail-Linien-Position und der 44px Touch-Target-Kreis.

  Rundungs-Hinweis (gleiche Konvention wie swissentry.css): Referenzwerte
  ohne exakte Space-Token-Entsprechung werden auf den naechsten
  vorhandenen Token aufgerundet (Original 14px Tafel-Padding -> --space-4 16px, Original 22px
  Marke -> --space-6 24px, Original 14px Zeilenabstand -> --space-4 16px), nie unter das
  Original abgerundet.
*/

/* ---------- Zeile: Etappennummer + Tafel nebeneinander ---------- */
/* minmax(0, 1fr) statt 1fr: die automatische Mindestbreite einer Grid-Spur ist die Min-Content-
   Breite ihres Inhalts, und die ist bei einzeiliger Zielangabe (white-space: nowrap ab 700px) die
   volle Textbreite. In einer schmalen Spalte -- die Fortschrittsanzeige der Erfassung steht in
   einer 320px breiten -- sprengte die Zeile damit ihren Container und die Tafel samt Spitze ragte
   in den Inhalt daneben. Die 0-Untergrenze bindet die Spur an die verfuegbare Breite; wo Platz
   ist, aendert sich nichts. */
.row[b-bnfr4bcrux] {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr); /* 44px = Touch-Target-Minimum des Etappenkreises, keine Space-Rhythmus-Zahl */
  gap: var(--space-4);
  align-items: start;
  position: relative;
}

.row--ohne-nummer[b-bnfr4bcrux] {
  grid-template-columns: minmax(0, 1fr);
}

/* ---------- Etappennummer-Kreis ---------- */
.etappe[b-bnfr4bcrux] {
  width: 44px;
  height: 44px; /* Touch-Target-Minimum (globale Layout-Regel §5), keine Space-Rhythmus-Zahl */
  border-radius: var(--radius-full);
  flex: none;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: var(--font-size-klein);
  font-weight: var(--font-weight-bold);
  font-stretch: var(--stretch-signage-standard);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em; /* kein passender Token in tokens-ergaenzung.css, kleinstmoegliche Abweichung */
  background: var(--navy-700);
  color: var(--weiss);
  position: relative;
  z-index: 1;
}

/* ---------- Tafel ---------- */
.tafel[b-bnfr4bcrux] {
  position: relative;
  min-height: var(--space-12); /* 64px, exakte Entsprechung */
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: var(--space-5);
  /* Der Umbruch bleibt in JEDER Fensterbreite erlaubt: die Restangabe rutscht in Zeile 2, sobald
     sie neben der Zielangabe keinen Platz mehr hat (§6.1) -- und nicht erst unterhalb 700px
     Fensterbreite. Die Fensterbreite ist dafuer das falsche Mass, weil eine Tafel auch auf einem
     breiten Bildschirm in einer schmalen Spalte stehen kann (Fuenferschritt-Sektion der
     Landingpage ab 1000px, Fortschrittsanzeige der Erfassung). Erzwungene Einzeiligkeit legte die
     Zielangabe dort sichtbar ueber die Restangabe, ohne Fehlermeldung. Wo der Platz reicht, aendert
     die Erlaubnis nichts: flex-wrap bricht nur um, wenn es muss. */
  flex-wrap: wrap;
  padding: var(--space-4) calc(var(--tip) + var(--space-5)) var(--space-4) var(--space-5);
  background: var(--blau-50);
  color: var(--text);
  text-decoration: none;
  cursor: default;
  clip-path: polygon(0 0, calc(100% - var(--tip)) 0, 100% 50%, calc(100% - var(--tip)) 100%, 0 100%);
  transition: background-color 150ms, border-color 150ms; /* Motion nur Zustandswechsel, ≤150ms (§5) */
}

a.tafel[b-bnfr4bcrux],
button.tafel[b-bnfr4bcrux] {
  cursor: pointer;
  font: inherit;
  border: none;
  width: 100%;
  text-align: left;
}

.tafel-weiss[b-bnfr4bcrux] {
  background: var(--weiss);
}

/* Spezifitaets-Fix: a.tafel/button.tafel (0-1-1) schlagen sonst .tafel-arbeit (0-1-0) immer,
   sobald die Tafel als <a>/<button> gerendert wird (Href/OnClick gesetzt) -- die Navy-Kante
   wuerde dann nie sichtbar. a.tafel-arbeit/button.tafel-arbeit heben die Spezifitaet auf 0-1-1
   an, damit border-left real gewinnt, unabhaengig von Deklarationsreihenfolge. */
a.tafel-arbeit[b-bnfr4bcrux],
button.tafel-arbeit[b-bnfr4bcrux],
.tafel-arbeit[b-bnfr4bcrux] {
  background: var(--weiss);
  border-left: 3px solid var(--navy-700);
  padding-left: calc(var(--space-5) - 3px); /* kompensiert die 3px-Kante, haelt Textkante bei 20px */
}

/* ---------- Spitze: zustandskodierte Fuellung, kein Chevron-Icon ---------- */
.spitze[b-bnfr4bcrux] {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: var(--tip);
  clip-path: polygon(0 0, 100% 50%, 0 100%); /* 18px Einzug ueber --tip, exakt vertikal mittig */
  background: var(--linie);
  transition: background-color 150ms;
}

.spitze-arbeit[b-bnfr4bcrux] {
  background: var(--navy-700);
}

.spitze-erledigt[b-bnfr4bcrux] {
  background: var(--rot);
}

/* ---------- Zielangabe: CSS-only Stauchung, kein JSInterop ---------- */
.ziel[b-bnfr4bcrux] {
  font-family: var(--sans);
  font-size: var(--font-size-ziel);
  line-height: var(--leading-ziel);
  font-weight: var(--font-weight-bold);
  font-stretch: var(--stretch-signage-standard);
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
}

.ziel-lang[b-bnfr4bcrux] {
  font-stretch: var(--stretch-signage-gestaucht); /* >~34 Zeichen: staucht statt zu verkleinern */
}

@media (min-width: 700px) {
  .ziel[b-bnfr4bcrux] {
    white-space: nowrap; /* ab 700px darf die Zielangabe nicht umbrechen (globale Layout-Regel §5) */
  }
}

/* ---------- Restangabe: rechtsbuendig, tabular-nums ---------- */
.rest[b-bnfr4bcrux] {
  font-family: var(--sans);
  font-size: var(--font-size-rest);
  line-height: var(--leading-rest);
  font-weight: var(--font-weight-bold);
  font-stretch: var(--stretch-signage-standard);
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
  margin-left: auto;
  text-align: right;
  flex: none;
}

/* ---------- Marke: nur "erledigt" ---------- */
.marke[b-bnfr4bcrux] {
  flex: none;
  width: var(--space-6); /* 24px, aufgerundet von 22px */
  height: var(--space-6);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.marke-erledigt[b-bnfr4bcrux] {
  background: var(--rot);
}

@media (prefers-reduced-motion: reduce) {
  .tafel[b-bnfr4bcrux],
  .spitze[b-bnfr4bcrux] {
    transition-duration: 0.01ms;
  }
}
/* /Pages/Dashboard.razor.rz.scp.css */
.onboarding-prompt[b-idgkdkycf2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3rem 2rem;
    gap: 0.5rem;
}

.onboarding-prompt h1[b-idgkdkycf2] {
    margin: 0 0 0.25rem;
}

.onboarding-prompt .subtitle[b-idgkdkycf2] {
    max-width: 380px;
    margin: 0 0 1.75rem;
}

.onboarding-icon[b-idgkdkycf2] {
    font-size: 3.5rem;
    line-height: 1;
    margin-bottom: 0.75rem;
}

.btn-onboarding[b-idgkdkycf2] {
    width: auto;
    padding: 0.75rem 2.25rem;
    font-size: 1rem;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35);
    transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
    margin-top: 0;
}

.btn-onboarding:hover[b-idgkdkycf2] {
    background: #4338ca;
    box-shadow: 0 6px 18px rgba(79, 70, 229, 0.45);
    transform: translateY(-1px);
}

.btn-onboarding:active[b-idgkdkycf2] {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
}

/* ---------- "_plan is not null"-Zweig (Plan-Uebersicht-Rail) ----------
   Ausschliesslich var(--...)-Referenzen auf tokens.css/tokens-ergaenzung.css (gleiche Haltung
   wie StepDetail.razor.css). Die Regeln oben (.onboarding-prompt/.btn-onboarding/
   .onboarding-icon) gehoeren zum "_noProfile"-Zweig. */

.dashboard-seite[b-idgkdkycf2] {
    /* Portal-Dichte statt Landing-Kadenz, gleiche
       Haltung wie .sd-seite in StepDetail.razor.css. */
    padding: var(--space-10) 0;
}

.db-titel[b-idgkdkycf2] {
    margin-bottom: var(--space-3);
}

.db-untertitel[b-idgkdkycf2] {
    margin-bottom: var(--space-8);
}

.db-fehler[b-idgkdkycf2] {
    margin-bottom: var(--space-5);
    font-size: var(--font-size-rest);
    color: var(--rot);
}

/* ---------- Entfallene Schritte ----------
   Steht ausserhalb des Rails und eingeklappt: der Plan waechst monoton, jede zurueckgenommene
   Antwort hinterlaesst dauerhaft einen Eintrag. Bewusst unauffaellig -- diese Schritte sind
   nicht mehr zu erledigen, sie belegen nur, dass der Fortschritt daran nicht verloren ist. */
.db-entfallen[b-idgkdkycf2] {
    margin-top: var(--space-8);
}

.db-entfallen-hinweis[b-idgkdkycf2] {
    margin-top: var(--space-4);
    font-size: var(--font-size-rest);
}

.db-entfallen-liste[b-idgkdkycf2] {
    margin-top: var(--space-3);
    padding-left: var(--space-5);
    font-size: var(--font-size-rest);
    opacity: 0.7;
}

/* ---------- "Beratung anfordern" -- genau EIN Link, ersetzt den frueheren
   db-beratung-Block samt eingebettetem Anfrageformular. ---------- */
.db-beratung-knopf[b-idgkdkycf2] {
    margin-top: var(--space-8);
    margin-right: var(--space-3);
}

/* =====================================================================================
   Lokale, kommentierte Kopie der Signature-Anatomie (Rail/Wegweisertafel:
   .rail/.rail-zeile/.etappe/.reiter-link/.tafel/.spitze/.ziel/.rest/.marke +
   Zustandsvarianten). Wegweisertafel.razor/TafelRail.razor.css bleiben unveraendert (vier
   weitere Rails nutzen sie weiter) -- diese Kopie gehoert ausschliesslich der Dashboard-Seite
   (CSS-Isolation, kein ::deep noetig). Nur var(--...)-Token, keine neuen Farben. Aendert sich
   die Anatomie in Wegweisertafel.razor.css, muss diese Kopie manuell nachgezogen
   werden. ===================== */

.rail[b-idgkdkycf2] {
    margin-top: var(--space-8);
    position: relative;
    max-width: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.rail-eintrag[b-idgkdkycf2] {
    position: relative;
}

.rail-eintrag:not(:last-child)[b-idgkdkycf2]::before {
    content: "";
    position: absolute;
    left: 21px;
    top: 44px;
    bottom: calc(-1 * var(--space-6));
    width: 2px;
    background: var(--linie);
}

.rail-zeile[b-idgkdkycf2] {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: var(--space-4);
    align-items: start;
    position: relative;
}

.etappe[b-idgkdkycf2] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-klein);
    font-weight: 700;
    font-stretch: 87%;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    background: var(--navy-700);
    color: var(--weiss);
    position: relative;
    z-index: 1;
    margin: 0;
}

.reiter-link[b-idgkdkycf2] {
    display: block;
    text-decoration: none;
    color: inherit;
    min-height: 44px;
}

.reiter-link:hover .tafel[b-idgkdkycf2] {
    outline: 2px solid var(--navy-700);
    outline-offset: -2px;
}

.reiter-link:focus-visible[b-idgkdkycf2] {
    outline: 3px solid var(--rot);
    outline-offset: 3px;
}

.reiter-link:focus-visible .tafel[b-idgkdkycf2] {
    outline: none;
}

.tafel[b-idgkdkycf2] {
    position: relative;
    min-height: 64px;
    border-radius: 0;
    display: flex;
    align-items: center;
    gap: var(--space-5);
    flex-wrap: wrap;
    padding: 14px calc(var(--tip) + var(--space-5)) 14px var(--space-5);
    background: var(--blau-50);
    color: var(--text);
    clip-path: polygon(0 0, calc(100% - var(--tip)) 0, 100% 50%, calc(100% - var(--tip)) 100%, 0 100%);
}

.tafel-weiss[b-idgkdkycf2] {
    background: var(--weiss);
}

.tafel-arbeit[b-idgkdkycf2] {
    background: var(--weiss);
    border-left: 3px solid var(--navy-700);
    padding-left: 17px;
}

.spitze[b-idgkdkycf2] {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: var(--tip);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    background: var(--linie);
}

.spitze-arbeit[b-idgkdkycf2] {
    background: var(--navy-700);
}

.spitze-erledigt[b-idgkdkycf2] {
    background: var(--rot);
}

.ziel[b-idgkdkycf2] {
    font-size: var(--font-size-rest);
    line-height: 1.25;
    font-weight: 700;
    font-stretch: 87%;
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.rest[b-idgkdkycf2] {
    font-size: var(--font-size-klein);
    line-height: 1.25;
    font-weight: 700;
    font-stretch: 87%;
    font-variant-numeric: tabular-nums;
    color: var(--text-2);
    margin-left: auto;
    text-align: right;
    flex: none;
}

.marke[b-idgkdkycf2] {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    background: var(--rot);
    color: var(--weiss);
}

@media (min-width: 700px) {
    .tafel[b-idgkdkycf2] {
        flex-wrap: nowrap;
    }
}

/* ---------- Checklisten-Detail-Panels je Reiter ---------- */

.schritt-detail[b-idgkdkycf2] {
    background: var(--weiss);
    border: 1px solid var(--linie);
    padding: var(--space-5) var(--space-5);
    margin-top: var(--space-5);
    margin-left: calc(44px + var(--space-4));
}

.schritt-detail .eyebrow[b-idgkdkycf2] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
    font-stretch: 87%;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--navy-700);
    margin-bottom: var(--space-3);
}

.schritt-detail .eyebrow[b-idgkdkycf2]::before {
    content: "";
    width: 28px;
    height: 3px;
    background: var(--rot);
    flex: none;
}

.schritt-detail h2[b-idgkdkycf2] {
    margin: 0;
    font-size: var(--font-size-h3);
    line-height: var(--leading-h3);
    color: var(--navy-700);
}

.schritt-detail .lead[b-idgkdkycf2] {
    margin-top: var(--space-4);
    font-size: var(--font-size-rest);
    line-height: 1.6;
    color: var(--text-2);
    max-width: 52ch;
}

.status-chip[b-idgkdkycf2] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-rest);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--navy-700);
    background: var(--blau-50);
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--linie);
    margin-top: var(--space-3);
}

.status-punkt[b-idgkdkycf2] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--navy-700);
    flex: none;
}

.haken-leer-hinweis[b-idgkdkycf2] {
    margin-top: var(--space-4);
    font-size: var(--font-size-klein);
    color: var(--text-2);
}

.haken-liste[b-idgkdkycf2] {
    list-style: none;
    margin: var(--space-5) 0 0;
    padding: 0;
    border-top: 1px solid var(--linie);
}

.haken-liste li[b-idgkdkycf2] {
    border-bottom: 1px solid var(--linie);
}

.haken-item[b-idgkdkycf2] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 44px;
    cursor: pointer;
    padding: 4px 0;
}

.haken-input[b-idgkdkycf2] {
    appearance: none;
    -webkit-appearance: none;
    flex: none;
    margin: 0;
    position: relative;
    width: 24px;
    height: 24px;
    border: 2px solid var(--navy-700);
    background: var(--weiss);
    border-radius: 0;
    cursor: pointer;
}

.haken-input:checked[b-idgkdkycf2] {
    background: var(--rot);
    border-color: var(--rot);
}

.haken-input:checked[b-idgkdkycf2]::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 6px;
    width: 12px;
    height: 7px;
    border-left: 2px solid var(--weiss);
    border-bottom: 2px solid var(--weiss);
    transform: rotate(-45deg);
}

.haken-input:focus-visible[b-idgkdkycf2] {
    outline: 3px solid var(--rot);
    outline-offset: 2px;
}

.haken-input:disabled[b-idgkdkycf2] {
    opacity: 0.6;
    cursor: default;
}

.haken-text[b-idgkdkycf2] {
    font-size: var(--font-size-rest);
    color: var(--text);
    text-decoration: none;
}
/* /Pages/Konto.razor.rz.scp.css */
/* Konto.razor -- Master/Detail-Layout.

   ACHTUNG: in diesem Kommentar niemals einen Klassen-Platzhalter mit "*" direkt vor einem
   Schraegstrich schreiben — die Folge "*" + "/" beendet den Kommentar vorzeitig und frisst die
   erste Regel darunter.

   Ausschliesslich var(--...)-Referenzen auf tokens.css/tokens-ergaenzung.css -- keine neuen
   Farben, keine neuen Tokens. Ersetzt die fruehere Vier-Tafeln-Kachel-Optik (konto-tafeln,
   konto-tafel…, kt-vorschau) vollstaendig. Bewusst gescopt statt in swissentry.css ergaenzt:
   diese Klassen gehoeren (noch) keiner geteilten Komponente. */

/* ---------- Master/Detail-Grundgerüst (.konto-dash, .konto-dash-grid, .konto-nav…) ---------- */
.konto-dash[b-etfdnkte81] {
  padding: var(--space-9) 0 var(--space-12); /* Original 40px/64px, exakte Entsprechung */
}

.konto-dash-grid[b-etfdnkte81] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6); /* Original 24px, exakte Entsprechung */
  align-items: start;
}

.konto-nav[b-etfdnkte81] {
  display: flex;
  flex-direction: column;
  gap: 2px; /* Original 2px, kein passender Token unterhalb --space-1 (4px) */
  background: var(--weiss);
  border: thin solid var(--linie);
  padding: var(--space-2); /* Original 8px, exakte Entsprechung */
}

.konto-nav-item[b-etfdnkte81] {
  display: flex;
  align-items: center;
  min-height: var(--space-10); /* Original 48px, exakte Entsprechung */
  width: 100%;
  background: transparent;
  border: 0;
  border-left: 3px solid transparent; /* Original 3px, gleiche Kantenstaerke wie .tafel-arbeit */
  padding: var(--space-3) var(--space-4); /* Original 12px/16px, exakte Entsprechung */
  font-family: var(--sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-klein); /* Original 15px, exakte Entsprechung */
  font-stretch: var(--stretch-signage-standard);
  color: var(--navy-700);
  text-align: left;
  cursor: pointer;
}

.konto-nav-item:hover[b-etfdnkte81] {
  background: var(--grau-50);
}

.konto-nav-item[aria-current="true"][b-etfdnkte81] {
  background: var(--blau-50);
  border-left-color: var(--rot);
  color: var(--navy-700);
}

.konto-nav-item:focus-visible[b-etfdnkte81] {
  outline: 3px solid var(--rot);
  outline-offset: 2px;
}

.konto-content[b-etfdnkte81] {
  min-width: 0;
}

.konto-panel[b-etfdnkte81] {
  background: var(--weiss);
  border: thin solid var(--linie);
  padding: var(--space-7) var(--space-5); /* Original 28px/20px, exakte Entsprechung */
}

@media (min-width: 700px) {
  .konto-dash-grid[b-etfdnkte81] {
    grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
    gap: var(--space-8); /* Original 32px, exakte Entsprechung */
  }

  .konto-panel[b-etfdnkte81] {
    padding: var(--space-9); /* Original 40px, exakte Entsprechung */
  }
}

/* ---------- Layout-Hilfsklasse ---------- */
.mt-24[b-etfdnkte81] {
  margin-top: var(--space-6); /* Original 24px, exakte Entsprechung */
}

/* ---------- Lade-/Fehler-/Leerzustandstexte (Profil- und Anfragen-Panel) ---------- */
.kt-anfrage-status-text[b-etfdnkte81] {
  margin: 0;
  color: var(--text-2);
  font-size: var(--font-size-klein);
}

/* ---------- Profil-Ansicht (nur lesend; bearbeitet wird das Profil an genau einer Stelle) ----------
   Zweispaltige Beschreibungsliste: links die Bezeichnung, rechts der Wert. */
.kt-profil-ansicht[b-etfdnkte81] {
  margin-top: var(--space-4);
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  gap: var(--space-2) var(--space-5);
  max-width: 560px;
}

.kt-profil-ansicht dt[b-etfdnkte81] {
  font-size: var(--font-size-klein);
  color: var(--text-2);
}

.kt-profil-ansicht dd[b-etfdnkte81] {
  margin: 0;
  font-size: var(--font-size-body);
}

/* Auf schmalen Anzeigen untereinander -- zwei Spalten drueckten die Werte sonst in den Umbruch. */
@media (max-width: 480px) {
  .kt-profil-ansicht[b-etfdnkte81] {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .kt-profil-ansicht dd[b-etfdnkte81] {
    margin-bottom: var(--space-3);
  }
}

.kt-familienstand[b-etfdnkte81] {
  border: none;
  padding: 0;
  margin: var(--space-5) 0 0;
}

/* Sprache-Fieldset (§2.5) teilt dieselbe Radio-Zeilen-Anatomie wie Familienstand -- ein
   generischer Name statt einer zweiten, fast identischen Kopie. */
.kt-familienstand-radios[b-etfdnkte81] {
  display: flex;
  gap: var(--space-5); /* Original 20px, exakte Entsprechung */
  flex-wrap: wrap;
  margin-top: var(--space-2);
}

.kt-radio-item[b-etfdnkte81] {
  display: flex;
  align-items: center;
  gap: var(--space-3); /* Original 10px aufgerundet -- naechster Token --space-3 12px */
  min-height: var(--space-10); /* Original 44px aufgerundet -- naechster Token --space-10 48px, Klickflaeche */
  cursor: pointer;
  font-size: var(--font-size-body); /* Original 16px aufgerundet -- naechster Token --font-size-body 17px */
}

.kt-radio-item input[type="radio"][b-etfdnkte81] {
  width: var(--space-5); /* Original 20px, exakte Entsprechung */
  height: var(--space-5);
  accent-color: var(--rot);
  margin: 0;
}

/* ---------- Signature-Element: Tafel (Anfragen-Liste) ----------
   Lokale, kommentierte Kopie der Wegweisertafel-Anatomie (Components/Wegweisertafel.razor.css)
   -- Blazor-CSS-Isolation reicht Komponenten-CSS nicht in fremdes Markup hinein, siehe §3.1/§4.
   Nur der fuer eine nicht-interaktive Listenzeile noetige Ausschnitt (kein .marke/.row/.etappe,
   die Anfragen-Liste hat keine "erledigt"-Markierung und keine Etappennummer). */
.anfrage-liste[b-etfdnkte81] {
  display: grid;
  gap: var(--space-3); /* Original 12px, exakte Entsprechung */
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}

.tafel[b-etfdnkte81] {
  position: relative;
  min-height: var(--space-12); /* 64px, exakte Entsprechung wie Wegweisertafel.razor.css */
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-4) calc(var(--tip) + var(--space-5)) var(--space-4) var(--space-5);
  background: var(--blau-50);
  color: var(--text);
  clip-path: polygon(0 0, calc(100% - var(--tip)) 0, 100% 50%, calc(100% - var(--tip)) 100%, 0 100%);
}

.tafel-weiss[b-etfdnkte81] {
  background: var(--weiss);
  border: thin solid var(--linie);
}

.tafel-arbeit[b-etfdnkte81] {
  background: var(--weiss);
  border-left: 3px solid var(--navy-700); /* Original 3px, gleiche Kantenstaerke wie Wegweisertafel */
  padding-left: calc(var(--space-5) - 3px);
}

.spitze[b-etfdnkte81] {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: var(--tip);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  background: var(--linie);
}

.spitze-arbeit[b-etfdnkte81] {
  background: var(--navy-700);
}

.spitze-erledigt[b-etfdnkte81] {
  background: var(--rot);
}

.ziel[b-etfdnkte81] {
  font-size: var(--font-size-body);
  line-height: 1.3;
  font-weight: var(--font-weight-bold);
  font-stretch: var(--stretch-signage-standard);
  flex: 1 1 220px;
  min-width: 0;
}

.rest[b-etfdnkte81] {
  font-size: var(--font-size-rest);
  line-height: var(--leading-rest);
  font-weight: var(--font-weight-bold);
  font-stretch: var(--stretch-signage-standard);
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
  flex: none;
  margin-left: auto;
}

/* ---------- Paket-Kacheln (Neue Anfrage) ---------- */
.paket-wahl[b-etfdnkte81] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3); /* Original 12px, exakte Entsprechung */
  margin-top: var(--space-1);
}

.paket-kachel[b-etfdnkte81] {
  position: relative;
  border: 2px solid var(--linie); /* Original 2px, gleiche Kantenstaerke wie .konto-tafel-loeschen frueher */
  background: var(--weiss);
  cursor: pointer;
  padding-top: 3px;
}

.paket-kachel:has(.paket-radio:checked)[b-etfdnkte81] {
  border-color: var(--navy-700);
}

.paket-radio[b-etfdnkte81] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.paket-kachel-balken[b-etfdnkte81] {
  display: block;
  height: 5px; /* Original 5px, kein passender Token fuer diese schmale Balkenstaerke */
}

.paket-kachel-inhalt[b-etfdnkte81] {
  display: block;
  padding: var(--space-3) var(--space-4); /* Original 12px/14px aufgerundet */
  min-height: var(--space-10); /* Original 44px aufgerundet -- naechster Token --space-10 48px */
}

.paket-kachel-name[b-etfdnkte81] {
  font-size: var(--font-size-rest); /* Original 14px, exakte Entsprechung */
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
}

@media (min-width: 600px) {
  .paket-wahl[b-etfdnkte81] {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---------- Leerzustand (klein, Anfragen-Panel) ---------- */
.leerzustand-klein[b-etfdnkte81] {
  background: var(--navy-900);
  color: var(--on-navy);
  padding: var(--space-8) var(--space-6); /* Original 32px/24px, exakte Entsprechung */
  text-align: left;
}

.leerzustand-klein h3[b-etfdnkte81] {
  margin: 0;
  font-size: var(--font-size-h3);
  line-height: var(--leading-h3);
  color: var(--on-navy);
}

.leerzustand-klein p[b-etfdnkte81] {
  color: var(--on-navy-2);
  margin: var(--space-3) 0 0;
  max-width: 52ch;
}

.leerzustand-klein .se-btn[b-etfdnkte81] {
  margin-top: var(--space-5);
}

.leerzustand-klein a:focus-visible[b-etfdnkte81],
.leerzustand-klein button:focus-visible[b-etfdnkte81] {
  outline-color: var(--weiss);
}

/* ---------- Passwort ändern (Panel "Dein Konto") ---------- */
.kt-passwort-formular[b-etfdnkte81] {
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 420px;
}

.kt-erfolg[b-etfdnkte81] {
  margin: 0;
  color: var(--gruen-ink);
  font-size: var(--font-size-rest);
}

.formular-fuss[b-etfdnkte81] {
  display: flex;
  align-items: center;
  gap: var(--space-5); /* Original 20px, exakte Entsprechung */
  flex-wrap: wrap;
  margin-top: var(--space-2);
}

/* ---------- Gefahrenzone: Konto löschen, zweistufig ---------- */
.gefahr-zone[b-etfdnkte81] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: thin solid var(--linie);
}

.gefahr-zone p[b-etfdnkte81] {
  margin: 0;
  font-size: var(--font-size-rest);
  color: var(--text-2);
  max-width: 44ch;
}

.kt-loeschen-formular[b-etfdnkte81] {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.kt-loeschen-formular p[role="alert"][b-etfdnkte81] {
  margin: 0;
  color: var(--rot);
  font-size: var(--font-size-rest);
}

/* se-btn-Basis kommt aus swissentry.css (Padding/Groesse/Radius) -- hier nur die Gefahren-
   Farbvariante, transparent + 2px --rot-Kontur. */
.se-btn--gefahr[b-etfdnkte81] {
  background: transparent;
  border: 2px solid var(--rot);
  color: var(--rot);
}

.se-btn--gefahr:hover:not(:disabled)[b-etfdnkte81] {
  background: var(--rot);
  color: var(--weiss);
}
/* /Pages/PasswortVergessen.razor.rz.scp.css */
/* PasswortVergessen.razor (api.md §2.5). Ausschliesslich var(--...)-Referenzen
   auf tokens.css/tokens-ergaenzung.css (gleiche Haltung wie Register.razor.css) --
   keine hartkodierten Werte. */

.pwv-lead[b-jt4mlalj21] {
    margin-top: var(--space-3);
}

.pwv-formular[b-jt4mlalj21] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    margin-top: var(--space-6);
}

.pwv-bestaetigung[b-jt4mlalj21] {
    margin: var(--space-6) 0 0;
    padding: var(--space-4);
    border-radius: var(--radius-sm);
    border: thin solid var(--linie);
    background: var(--blau-50);
    color: var(--text);
}

/* Die Adresse, an die der Link ging -- steht direkt unter der Bestaetigung, damit ein Tippfehler
   auffaellt, bevor jemand auf "erneut senden" drueckt. */
.pwv-gesendet-adresse[b-jt4mlalj21] {
    margin: var(--space-3) 0 0;
    font-weight: var(--font-weight-bold);
}

.pwv-fehler-allgemein[b-jt4mlalj21] {
    margin: 0;
    font-size: var(--font-size-rest);
    color: var(--rot);
}

.pwv-zurueck[b-jt4mlalj21] {
    margin-top: var(--space-4);
}
/* /Pages/PasswortZuruecksetzen.razor.rz.scp.css */
/* PasswortZuruecksetzen.razor (api.md §2.5). Ausschliesslich var(--...)-
   Referenzen auf tokens.css/tokens-ergaenzung.css (gleiche Haltung wie Register.razor.css/
   PasswortVergessen.razor.css) -- keine hartkodierten Werte. */

.pwz-lead[b-3uxdw55cnw] {
    margin-top: var(--space-3);
}

.pwz-formular[b-3uxdw55cnw] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    margin-top: var(--space-6);
}

/* Gleiche Optik wie reg-pw-anforderungen (Register.razor.css) -- eigener Aufzaehlungspunkt statt
   Browser-Standardmarker. Bewusst dupliziert statt geteilt: keine gemeinsame Komponente fuer
   diese Liste existiert bisher, und beide Formulare sind unabhaengig voneinander entstanden. */
.pwz-pw-anforderungen[b-3uxdw55cnw] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
    padding: 0;
    list-style: none;
    font-size: var(--font-size-rest);
    color: var(--text-2);
}

.pwz-pw-anforderungen li[b-3uxdw55cnw] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.pwz-pw-anforderungen li[b-3uxdw55cnw]::before {
    content: "";
    width: var(--space-2);
    height: var(--space-2);
    border-radius: 50%;
    border: thin solid var(--text-2);
    flex: none;
}

.pwz-bestaetigung[b-3uxdw55cnw] {
    margin: var(--space-6) 0 0;
    padding: var(--space-4);
    border-radius: var(--radius-sm);
    border: thin solid var(--linie);
    background: var(--blau-50);
    color: var(--text);
}

.pwz-fehler-allgemein[b-3uxdw55cnw] {
    margin: var(--space-4) 0 0;
    font-size: var(--font-size-rest);
    color: var(--rot);
}

.pwz-formular .pwz-fehler-allgemein[b-3uxdw55cnw] {
    margin-top: 0;
}

.pwz-zurueck[b-3uxdw55cnw] {
    margin-top: var(--space-4);
}
/* /Pages/Register.razor.rz.scp.css */
/* Register.razor. Ausschliesslich
   var(--...)-Referenzen auf tokens.css/tokens-ergaenzung.css (gleiche Haltung wie
   swissentry.css) -- Basis-Primitive (Formularfelder/-Buttons: se-field/se-input/se-checkbox/se-btn)
   kommen von dort, hier nur, was noch keiner geteilten Komponente gehört. */

.reg-formular[b-8g5l7175mc] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    margin-top: var(--space-6);
}

/* Passwort-Anforderungsliste (`reg-pw-anforderungen`): eigener Aufzaehlungspunkt statt
   Browser-Standardmarker, damit Abstand/Groesse konsistent aus Tokens kommen (design-
   decisions.md zeigt einen Kreis-Marker pro Zeile, keine dynamische Erfuellt/Offen-Unterscheidung
   -- die Liste ist laut Task vor jeder Eingabe sichtbar, nicht ein Fortschrittsanzeiger). */
.reg-pw-anforderungen[b-8g5l7175mc] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
    padding: 0;
    list-style: none;
    font-size: var(--font-size-rest);
    color: var(--text-2);
}

.reg-pw-anforderungen li[b-8g5l7175mc] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.reg-pw-anforderungen li[b-8g5l7175mc]::before {
    content: "";
    width: var(--space-2);
    height: var(--space-2);
    border-radius: 50%;
    border: thin solid var(--text-2);
    flex: none;
}

/* Allgemeiner Fehlertext (Netzwerkfehler/unbekannte Fehlerschluessel ohne eigenes Feld) --
   `se-field-error` ist an `.se-field` gebunden, hier bewusst eine eigene, gleich aussehende
   Klasse fuer die feldlose Fallback-Meldung. */
.reg-fehler-allgemein[b-8g5l7175mc] {
    margin: 0;
    font-size: var(--font-size-rest);
    color: var(--rot);
}

.reg-vertrauenssatz[b-8g5l7175mc] {
    margin-top: var(--space-4);
}
/* /Pages/StepDetail.razor.rz.scp.css */
/* StepDetail.razor (§5 "Portal dicht").
   Ausschliesslich var(--...)-Referenzen auf tokens.css/tokens-ergaenzung.css (gleiche Haltung wie
   swissentry.css/Register.razor.css) -- Basis-Primitive (Knopf/Checkbox: se-btn/
   se-checkbox/se-check-row, Ueberschrift: se-h2) kommen von dort, hier nur, was noch keiner
   geteilten Komponente gehoert. Der Status selbst (schrittdetail-status) ist die
   Wegweisertafel-Komponente -- ihre eigene .razor.css deckt die Tafel-Anatomie ab,
   hier nur der umgebende Abstand. */

/* ---------- Sektionsrahmen: Portal dicht statt Landing-Rhythmus (§5) ----------
   se-sec (swissentry.css) ist die 96px/64px-Landing-Kadenz -- Portal-Seiten nutzen stattdessen
   die dokumentierte 48px-Portal-Dichte (--space-10), ohne Breakpoint-Verdopplung. */
.sd-seite[b-v197128qmj] {
    padding: var(--space-10) 0;
}

/* ---------- Ladezustand / Leerzustand ---------- */
.sd-lade[b-v197128qmj] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--text-2);
}

.sd-spinner[b-v197128qmj] {
    width: var(--space-6);
    height: var(--space-6);
    border-radius: var(--radius-full);
    border: 3px solid var(--linie);
    border-top-color: var(--navy-700);
    animation: sd-dreh-b-v197128qmj 800ms linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .sd-spinner[b-v197128qmj] {
        animation-duration: 0.01ms;
    }
}

@keyframes sd-dreh-b-v197128qmj {
    to {
        transform: rotate(360deg);
    }
}

.sd-leer[b-v197128qmj] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
}

/* ---------- Kopfbereich: Zurueck-Link, Titel, Beschreibung ---------- */
.sd-zurueck[b-v197128qmj] {
    display: inline-block;
    margin-bottom: var(--space-4);
    color: var(--text-2);
    font-size: var(--font-size-rest);
    text-decoration: none;
}

.sd-zurueck:hover[b-v197128qmj] {
    color: var(--navy-700);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.sd-titel[b-v197128qmj] {
    margin-bottom: var(--space-5);
}

.sd-status[b-v197128qmj] {
    margin-bottom: var(--space-6);
}

/* Hinweis auf einen entfallenen Schritt: die Regel dazu trifft nicht mehr zu. Steht ueber der
   Beschreibung, weil er die Lesart der ganzen Seite aendert. */
.sd-entfallen-hinweis[b-v197128qmj] {
    color: var(--text-2);
    font-size: var(--font-size-rest);
    line-height: var(--leading-body);
    max-width: 70ch;
    margin-bottom: var(--space-6);
}

.sd-beschreibung[b-v197128qmj] {
    color: var(--text-2);
    font-size: var(--font-size-body);
    line-height: var(--leading-body);
    max-width: 70ch;
    margin-bottom: var(--space-8);
}

/* ---------- Checkliste ---------- */
.sd-checklist-titel[b-v197128qmj] {
    font-size: var(--font-size-h3);
    line-height: var(--leading-h3);
    color: var(--navy-700);
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-5);
    border-bottom: thin solid var(--linie);
}

.sd-fehler[b-v197128qmj] {
    margin-bottom: var(--space-5);
    font-size: var(--font-size-rest);
    color: var(--rot);
}

.sd-keine-punkte[b-v197128qmj] {
    color: var(--text-2);
    font-size: var(--font-size-klein);
}

.sd-haken-liste[b-v197128qmj] {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.sd-haken-feld[b-v197128qmj] {
    padding: var(--space-4);
    border: thin solid var(--linie);
    border-radius: var(--radius-sm);
    background: var(--blau-50);
    transition: background-color 150ms, border-color 150ms;
}

.sd-haken-feld--erledigt[b-v197128qmj] {
    background: var(--weiss);
    border-color: var(--rot);
}

@media (prefers-reduced-motion: reduce) {
    .sd-haken-feld[b-v197128qmj] {
        transition-duration: 0.01ms;
    }
}

.sd-haken-label[b-v197128qmj] {
    cursor: pointer;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-body);
    color: var(--text);
}

.sd-haken-titel[b-v197128qmj] {
    flex: 1;
}

.sd-haken-feld--erledigt .sd-haken-titel[b-v197128qmj] {
    color: var(--text-2);
}

.sd-haken-beschreibung[b-v197128qmj] {
    margin: var(--space-2) 0 0 calc(var(--space-6) + var(--space-3));
    font-size: var(--font-size-klein);
    line-height: var(--leading-klein);
    color: var(--text-2);
}

/* ---------- Hilfe ----------
   Verdrahtung siehe Markup-Kommentar in StepDetail.razor; der Knopf selbst bleibt
   se-btn/se-btn--sekundaer aus swissentry.css, hier nur der umgebende Abstand. */
.sd-hilfe[b-v197128qmj] {
    margin-top: var(--space-8);
}

/* Anfrageformular-Wrapper, wenn per schrittdetail-hilfe eingeblendet -- gleicher Abstand zum
   Knopf wie sd-status zu sd-titel oben (--space-6), keine eigene Kastenoptik (Anfrageformular
   traegt bereits eigene Feldabstaende, se-field). */
.sd-hilfe-formular[b-v197128qmj] {
    margin-top: var(--space-6);
}
/* /Pages/Wizard.razor.rz.scp.css */
/*
  Wizard — Erfassung in fuenf Schritten.

  Vier Baender uebereinander: Kopfband (weiss), Stufenband (weiss, quer laufende Fortschrittsspur),
  darunter auf grauem Grund die Formularkarte und die Seitenspalte. Mobil-zuerst: die Grundregeln
  gelten fuer schmale Geraete, die zwei Breakpoints (700/1000px, tokens.json "breakpoint") schalten
  Zweispaltigkeit, Stufenuntertitel und Seitenspalte hinzu.

  Der Fortschritt steht ausschliesslich im Stufenband. Die Seitenspalte traegt nur den Merkkasten und
  faellt unterhalb von 1000px weg.

  Keine erfundenen Farb-/Abstands-/Schattenwerte: Geometrie-Literale (Kreisrahmen 2px,
  Hinweiskasten-Kante 4px, Spaltenbreite 300px) bleiben Zahlen, weil die Tokens dafuer keine
  Entsprechung haben — gleiche Haltung wie die 2px-Rail-Linie in TafelRail.razor.css.
*/

.wz-seite[b-8tjv3dabo8] {
  background: var(--grau-50);
}

/* ---------- Kopfband ---------- */

.wz-kopfband[b-8tjv3dabo8] {
  background: var(--weiss);
  border-bottom: thin solid var(--linie);
  padding: var(--space-8) 0 var(--space-7);
}

.wz-kopfband-lead[b-8tjv3dabo8] {
  margin-top: var(--space-3);
  max-width: 60ch;
}

.wz-laden[b-8tjv3dabo8] {
  padding: var(--space-10) 0;
}

/* ---------- Stufenband ----------
   Fuenf gleich breite Spuren; der Kreis jeder Stufe sitzt waagrecht in der Mitte seiner Spur.
   --wz-kreis ist der Durchmesser und gleichzeitig die Bezugsgroesse fuer die Hoehe der
   Verbindungslinie — beide muessen zusammen wachsen, sonst laeuft die Linie nicht mehr durch die
   Kreismitte. */

.wz-stufenband[b-8tjv3dabo8] {
  background: var(--weiss);
  border-bottom: thin solid var(--linie);
  padding: var(--space-6) 0;
}

.wz-stufen-spur[b-8tjv3dabo8] {
  --wz-kreis: var(--space-8);
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.wz-stufe[b-8tjv3dabo8] {
  position: relative;
}

/* Die Verbindungslinie einer Stufe fuehrt vom RAND des vorigen Kreises zum Rand des eigenen: von
   -50% + Radius bis +50% - Radius der eigenen Spurbreite. Rein strukturell (:not(:first-child)) —
   welche Linie zurueckgelegt ist, entscheidet die Klasse "wz-stufe--verbunden", die die Seite setzt:
   ein Selektor kann nicht auf das vorangehende Geschwisterelement zurueckblicken.

   Die Kreisradien sind bewusst aus der Laenge herausgerechnet und nicht durch die Kreisflaeche
   verdeckt: eine Linie von Mitte zu Mitte haengt daran, dass der Kreis nach ihr gezeichnet wird, und
   diese Reihenfolge ergibt sich nur aus der Baumfolge zweier positionierter Elemente. Sie kippt,
   sobald ein Vorfahr einen Stapelkontext aufmacht — dann laeuft der Strich sichtbar durch die
   Kreise. Kuerzer gezeichnet kann das nicht passieren. */
.wz-stufe:not(:first-child)[b-8tjv3dabo8]::before {
  content: "";
  position: absolute;
  top: calc(var(--wz-kreis) / 2 - 1px);
  left: calc(-50% + var(--wz-kreis) / 2);
  width: calc(100% - var(--wz-kreis));
  height: 2px;
  background: var(--linie);
}

.wz-stufe--verbunden:not(:first-child)[b-8tjv3dabo8]::before {
  background: var(--navy-700);
}

.wz-stufe-link[b-8tjv3dabo8] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-1);
  text-align: center;
  text-decoration: none;
}

.wz-stufe-kreis[b-8tjv3dabo8] {
  flex: none;
  width: var(--wz-kreis);
  height: var(--wz-kreis);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  /* 2px statt "thin": der Kreis ist das Fortschrittszeichen und muss sich gegen die 2px starke
     Verbindungslinie behaupten, die hinter ihm durchlaeuft. */
  border: 2px solid var(--linie);
  background: var(--weiss);
  color: var(--text-2);
  font-size: var(--font-size-rest);
  font-weight: var(--font-weight-bold);
}

.wz-stufe--erledigt .wz-stufe-kreis[b-8tjv3dabo8] {
  background: var(--navy-700);
  border-color: var(--navy-700);
  color: var(--weiss);
}

/* Der aktive Schritt ist rot — die eine Bedeutung dieser Farbe ist "Anfang und Ziel" (tokens.css),
   und genau das ist die Stelle, an der der Nutzer steht. Der Hof ist --blau-50 und kein
   aufgehelltes Rot: die Tokens kennen keine Alpha-Derivate, und eine erfundene rgba-Zahl waere eine
   Design-Erfindung (gleiche Haltung wie .se-fuss-unten in swissentry.css). */
.wz-stufe--aktiv .wz-stufe-kreis[b-8tjv3dabo8] {
  background: var(--rot);
  border-color: var(--rot);
  color: var(--weiss);
  box-shadow: 0 0 0 5px var(--blau-50);
}

/* overflow-wrap, weil fuenf Spuren auf einem schmalen Geraet je rund 60px breit sind und die
   laengste Bezeichnung ("Mitzubringendes") keine Umbruchstelle enthaelt: ohne die Erlaubnis, im Wort
   zu brechen, liefe sie aus ihrer Spur und schoebe die Seite waagrecht auf. */
.wz-stufe-titel[b-8tjv3dabo8] {
  font-size: var(--font-size-eyebrow);
  line-height: var(--leading-rest);
  font-weight: var(--font-weight-bold);
  color: var(--text-2);
  overflow-wrap: break-word;
}

.wz-stufe--aktiv .wz-stufe-titel[b-8tjv3dabo8],
.wz-stufe--erledigt .wz-stufe-titel[b-8tjv3dabo8] {
  color: var(--navy-700);
}

.wz-stufe-rest[b-8tjv3dabo8] {
  display: none;
  font-size: var(--font-size-eyebrow);
  line-height: var(--leading-rest);
  color: var(--text-2);
}

/* ---------- Raster: Karte + Seitenspalte ---------- */

.wz-raster[b-8tjv3dabo8] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  padding-top: var(--space-9);
  padding-bottom: var(--space-12);
  align-items: start;
}

/* ---------- Formularkarte ---------- */

.wz-karte[b-8tjv3dabo8] {
  background: var(--weiss);
  border: thin solid var(--linie);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

.wz-karte-kopf[b-8tjv3dabo8] {
  padding: var(--space-6) var(--space-5) var(--space-5);
  border-bottom: thin solid var(--linie);
}

/* Der Schrittzaehler ist die Eyebrow der Karte, aber ohne den 28px-Strich des Seiten-Eyebrows: ein
   zweiter Strich unmittelbar unter dem des Kopfbands laese sich als neue Sektion. */
.wz-karte-marke[b-8tjv3dabo8] {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-eyebrow);
  line-height: var(--leading-eyebrow);
  font-weight: var(--font-weight-bold);
  font-stretch: var(--stretch-signage-standard);
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
  color: var(--rot);
}

/* "fuer den Plan noetig" / "jederzeit nachtragbar" steht neben dem Zaehler, aber nicht in Rot: die
   eine Bedeutung dieser Farbe ist "Anfang und Ziel" (tokens.css), und diese Angabe ist eine
   Nebenauskunft, kein Wegpunkt. */
.wz-karte-marke-rest[b-8tjv3dabo8] {
  color: var(--text-2);
}

.wz-karte-lead[b-8tjv3dabo8] {
  margin-top: var(--space-3);
}

/* Der Traeger dieser Klasse ist ein literales <div> INNERHALB des EditForm, nicht das <form> selbst:
   ein Komponenten-Tag bekommt von Blazors CSS-Isolation kein Scope-Attribut, eine Regel auf
   ".wz-formular" am EditForm matchte also nie (siehe die gleichlautende Notiz in
   Anfrageformular.razor.css). Als literales Element traegt das div das Scope-Attribut, und Polster
   und Feldrhythmus liegen damit an einer Stelle. */
.wz-formular[b-8tjv3dabo8] {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-5);
}

/* Zwei Felder je Zeile ab 700px, darunter untereinander. minmax(0, 1fr) fuer beide Spuren: die
   automatische Mindestbreite einer Grid-Spur ist die Min-Content-Breite ihres Inhalts, und ein
   Auswahlfeld bringt die Breite seines laengsten Eintrags mit (Laendernamen). Ohne die 0-Untergrenze
   wuechse die Spalte darueber hinaus und schoebe das Raster aus der Seite. */
.wz-reihe[b-8tjv3dabo8] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}

/* ---------- Hinweiskasten zum aktiven Schritt ---------- */

.wz-hinweiskasten[b-8tjv3dabo8] {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--blau-50);
  /* 4px Kante links: die Marke des Kastens. Kein Border-Token vorhanden, gleiche Haltung wie die
     28px-Eyebrow-Anatomie in swissentry.css. */
  border-left: 4px solid var(--navy-700);
}

.wz-hinweiskasten-marke[b-8tjv3dabo8] {
  flex: none;
  width: var(--space-6);
  height: var(--space-6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--navy-700);
  color: var(--weiss);
  font-size: var(--font-size-eyebrow);
  font-weight: var(--font-weight-bold);
}

.wz-hinweiskasten-text[b-8tjv3dabo8] {
  margin: 0;
  font-size: var(--font-size-klein);
  line-height: var(--leading-klein);
  color: var(--text);
}

/* ---------- Fuss der Karte ----------
   Mobil untereinander und in umgekehrter Reihenfolge (column-reverse), damit "Weiter" oben steht und
   der Daumen zuerst darauf trifft; ab 700px in einer Zeile, "Zurueck" links, "Weiter" rechts.
   Der Zurueck-Weg ist ein Verweis, kein zweiter Absende-Knopf. */

.wz-fuss[b-8tjv3dabo8] {
  display: flex;
  flex-direction: column-reverse;
  align-items: stretch;
  gap: var(--space-3);
  margin: 0;
  padding-top: var(--space-6);
  border-top: thin solid var(--linie);
}

.wz-fuss-nebenweg[b-8tjv3dabo8] {
  margin: 0;
  padding: 0 var(--space-5) var(--space-6);
  text-align: center;
  font-size: var(--font-size-rest);
}

.wz-fuss-nebenweg a[b-8tjv3dabo8] {
  color: var(--navy-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Seitenspalte ----------
   Traegt nur den Merkkasten; die Fortschrittsanzeige steht ausschliesslich im Stufenband. Unterhalb
   von 1000px faellt die Spalte weg und der Kasten mit ihr: er ist eine Beruhigung am Rand, kein
   Bedienelement, und ueber dem Formular eingeschoben stuende er im Weg. */

.wz-seitenspalte[b-8tjv3dabo8] {
  display: none;
}

.wz-merke[b-8tjv3dabo8] {
  padding: var(--space-4);
  background: var(--weiss);
  border: thin solid var(--linie);
  font-size: var(--font-size-rest);
  line-height: var(--leading-klein);
  color: var(--text-2);
}

.wz-merke b[b-8tjv3dabo8] {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--navy-700);
  font-weight: var(--font-weight-bold);
}

.wz-merke p[b-8tjv3dabo8] {
  margin: 0;
}

/* ---------- Breakpoints ---------- */

@media (min-width: 700px) {
  .wz-stufen-spur[b-8tjv3dabo8] {
    --wz-kreis: var(--space-9);
  }

  .wz-stufe-titel[b-8tjv3dabo8] {
    font-size: var(--font-size-rest);
  }

  .wz-stufe-rest[b-8tjv3dabo8] {
    display: block;
  }

  .wz-karte-kopf[b-8tjv3dabo8] {
    padding: var(--space-7) var(--space-8) var(--space-6);
  }

  .wz-formular[b-8tjv3dabo8] {
    padding: var(--space-7) var(--space-8) var(--space-8);
  }

  .wz-reihe[b-8tjv3dabo8] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wz-fuss[b-8tjv3dabo8] {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
  }

  /* Schiebt "Weiter" an den rechten Rand — auch im ersten Schritt, in dem "Zurueck" fehlt und
     justify-content:space-between den einzigen Knopf links stehen liesse. */
  .wz-fuss-weiter[b-8tjv3dabo8] {
    margin-left: auto;
  }

  .wz-fuss-nebenweg[b-8tjv3dabo8] {
    padding: 0 var(--space-8) var(--space-7);
  }
}

@media (min-width: 1000px) {
  /* 300px feste Spalte: die Rail-Regeln in TafelRail.razor.css sind auf 240-320px zugeschnitten. */
  .wz-raster[b-8tjv3dabo8] {
    grid-template-columns: minmax(0, 1fr) 300px;
  }

  .wz-seitenspalte[b-8tjv3dabo8] {
    display: block;
  }
}