/*
  SwissEntry — Komponenten-Schicht

  Diese Datei enthaelt ausschliesslich `var(--...)`-Referenzen auf tokens.css und
  tokens-ergaenzung.css. Keine hartkodierten Farb-, Abstands-, Radius- oder Schattenwerte.
  Einzige zulaessige Ausnahme: die zwei Breakpoint-Zahlen (sm/md aus tokens.json "breakpoint")
  in @media-Bedingungen und clip-path-Geometrie (--tip-abgeleitet, Wegweisertafel).

  Ladereihenfolge: tokens.css -> tokens-ergaenzung.css -> swissentry.css (siehe index.html).

  Inhalt: seitenweite Primitive (Reset, Schrift, Fokus, Buttons, Formularfelder, Container,
  Sektionsraster) und alles, was ueber mehrere Komponenten hinweg geteilt wird. Was nur eine
  Komponente betrifft, gehoert in deren gescopte .razor.css.

  Rundungs-Hinweis: einige Referenzmasse (Button-Padding, Fokusring-Staerke und -Abstand,
  Eingabefeld-Schriftgroesse) liegen ausserhalb des Vier-Einheiten-Rasters der
  tokens.json-Space-Skala und haben dort keine exakte Entsprechung. Diese Datei rundet auf den
  naechsten vorhandenen Space-/Typografie-Token auf (nie nach unten unter
  Barrierefreiheits-Mindestmasse), statt neue Werte zu erfinden.
*/

/* ---------- Schrift: Archivo, selbst gehostet (kein Google-Fonts-Abruf, kein Tracking) ---------- */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url('../fonts/Archivo-Variable.woff2') format('woff2');
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--font-size-body);
  line-height: var(--leading-body);
  color: var(--text);
  background: var(--weiss);
}

h1, h2, h3, p, ul, ol, dl, figure {
  margin: 0;
}

img, svg {
  display: block;
  max-width: 100%;
}

/* ---------- Sichtbar nur fuer Screenreader (Vergleich.razor "enthalten"/"nicht
   enthalten"-Zusatztext) ---------- Standard-Technik, keine Farb-/Space-Tokens beteiligt. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* ---------- Fokus-Sichtbarkeit ----------
   Ring wird nie entfernt. Ring-Staerke/-Abstand bewusst dem Browser-Standard ueberlassen
   (kein passender Token vorhanden) — nur die Farbe ist markenverbindlich gesetzt.
   Kontrast-Kontext: --rot ist die helle-Flaeche-Farbe (5,2:1 auf Weiss, AA). Auf dunklem
   Grund ist --rot als Ring VERBOTEN (--rot auf --navy-700 = 2,7:1) — Komponenten auf Navy
   setzen die Klasse `.on-dark`, die auf --weiss umschaltet (17,2:1 / 13,9:1 auf
   Navy-900 / Navy-700, AAA). Wird von Kopf/Fuss/Standorttafel konsumiert. */
:focus-visible {
  outline-style: solid;
  outline-color: var(--rot);
}

.on-dark :focus-visible,
.on-dark:focus-visible {
  outline-color: var(--weiss);
}

/* ---------- Bewegungsreduktion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transform: none !important;
  }
}

/* ---------- Lade-Anzeige (initiales WASM-Laden, vor App-Start) ---------- */
.loading-progress {
  position: relative;
  display: block;
  width: 5rem;
  height: 5rem;
  margin: 20vh auto 0 auto;
}

.loading-progress circle {
  fill: none;
  stroke: var(--linie);
  stroke-width: 0.5rem;
  transform-origin: 50% 50%;
  transform: rotate(-90deg);
}

.loading-progress circle:last-child {
  stroke: var(--navy-700);
  stroke-linecap: round;
  stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
  transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
  display: none;
}

/* ---------- Basis-Primitive: Knoepfe ---------- */
.se-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--space-10);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-sm);
  border: thin solid transparent;
  font-family: var(--sans);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.se-btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.se-btn--primaer {
  background: var(--rot);
  color: var(--weiss);
}

.se-btn--primaer:hover:not(:disabled) {
  filter: brightness(88%);
}

.se-btn--sekundaer {
  background: transparent;
  border-color: var(--navy-700);
  color: var(--navy-700);
}

.se-btn--sekundaer:hover:not(:disabled) {
  color: var(--rot);
  border-color: var(--rot);
}

/* K-1-Fix: Referenz index.html ".sec-navy .knopf-linie" (Zeile 132/133) faerbt den
   sekundaeren Knopf auf Navy-Hintergrund um -- --navy-700-Text/-Rand ist auf Navy
   praktisch unsichtbar (WCAG-Fail). Ohne Gegenstueck hier blieb der
   Hero-CTA "Unverbindlich Kontakt aufnehmen" auf der Landingpage kaum lesbar. */
.se-sec--navy .se-btn--sekundaer {
  color: var(--on-navy);
  border-color: var(--on-navy-2);
}

.se-sec--navy .se-btn--sekundaer:hover:not(:disabled) {
  color: var(--on-navy);
  border-color: var(--on-navy);
}

/* ---------- Basis-Primitive: Formularfelder ---------- */
.se-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.se-label {
  font-size: var(--font-size-rest);
  font-weight: var(--font-weight-bold);
  color: var(--navy-700);
}

.se-input,
.se-select,
.se-textarea {
  min-height: var(--space-10);
  padding: var(--space-3) var(--space-4);
  border: thin solid var(--linie);
  border-radius: var(--radius-sm);
  font-family: var(--sans);
  /* Bewusst font-size-body statt font-size-klein: liegt oberhalb der ueblichen Mobil-
     Zoom-Schwelle fuer Eingabefelder und ist der naechste dokumentierte Typografie-Token
     ueber dieser Schwelle (typography.scale kennt keinen eigenen Eingabefeld-Wert). */
  font-size: var(--font-size-body);
  color: var(--text);
  background: var(--weiss);
}

.se-textarea {
  min-height: var(--space-12);
  resize: vertical;
}

.se-input::placeholder,
.se-textarea::placeholder {
  color: var(--text-2);
}

.se-checkbox {
  width: var(--space-6);
  height: var(--space-6);
  border: thin solid var(--navy-700);
  border-radius: var(--radius-sm);
  accent-color: var(--rot);
  cursor: pointer;
}

.se-check-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.se-field--invalid .se-input,
.se-field--invalid .se-select,
.se-field--invalid .se-textarea {
  border-color: var(--rot);
}

.se-field-error {
  font-size: var(--font-size-rest);
  color: var(--rot);
}

/* ---------- Basis-Primitive: Container ----------
   Cross-cutting Layout-Primitive, von Kopf/Fuss (und jeder Sektion) benoetigt. Seitenabstand
   aus vorhandenen Space-Tokens. max-width:1200px bleibt Literal wie in tokens.css/tokens-
   ergaenzung.css dokumentiert ("Container max-width: 1200px" steht dort nur im Kommentar, nicht
   als Custom Property — keine Design-Erfindung, kein Refactor, gleiche Haltung wie Breakpoints/
   Logo-Breite unten). */
.se-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: var(--space-5);
  padding-right: var(--space-5);
}

@media (min-width: 700px) {
  .se-wrap {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }
}

@media (min-width: 1000px) {
  .se-wrap {
    padding-left: var(--space-10);
    padding-right: var(--space-10);
  }
}

/* ---------- Kopf + Standorttafel + Sprachumschalter ---------- */
.se-kopf {
  padding: var(--space-5) 0;
  background: var(--navy-900);
  color: var(--on-navy);
}

.se-kopf-innen {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.se-kopf-nav {
  display: flex;
  align-items: center;
  gap: var(--space-5) var(--space-7);
  margin-left: auto;
  flex-wrap: wrap;
}

.se-kopf-link {
  display: none;
  color: var(--on-navy);
  text-decoration: none;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
}

.se-kopf-link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* K-2-Fix: "Abmelden" (PortalLayout.razor) ist ein <button>, kein <a> -- loest eine Aktion aus,
   navigiert nicht. .se-kopf-link liefert Farbe/Groesse/Gewicht bereits identisch; hier nur die
   Browser-Button-Defaults (Rahmen/Hintergrund/Polster/Schriftart) zurueckgesetzt, damit es optisch
   nicht von den <a>-Links dieser Navigation abweicht. */
.se-kopf-link--knopf {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--sans);
  cursor: pointer;
}

.se-kopf-cta {
  display: none;
}

/* Mobiles Menue offen (Kopf.razor @_menuOffen): Links/CTA erzwungen sichtbar unterhalb 700px,
   wo die Navigation sonst zum Menue-Knopf zusammenfaellt. */
.se-kopf-nav--offen .se-kopf-link,
.se-kopf-nav--offen .se-kopf-cta {
  display: inline-flex;
  flex-basis: 100%;
}

.se-menu-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-10);
  height: var(--space-10);
  background: transparent;
  border: thin solid var(--on-navy-2);
  color: var(--on-navy);
  cursor: pointer;
  border-radius: var(--radius-sm);
}

@media (min-width: 700px) {
  .se-kopf-link,
  .se-kopf-cta {
    display: inline-flex;
  }

  .se-menu-knopf {
    display: none;
  }
}

.se-standorttafel {
  /* Tafelpolster 12/24/12/16px (space-3 space-6 space-3 space-4) */
  background: var(--weiss);
  padding: var(--space-3) var(--space-6) var(--space-3) var(--space-4);
  flex: none;
  border-radius: var(--radius-sm);
  clip-path: polygon(0 0, calc(100% - var(--tip)) 0, 100% 50%, calc(100% - var(--tip)) 100%, 0 100%);
  box-shadow: var(--shadow-sm);
}

.se-standorttafel img {
  /* 200px/150px bleiben Literale (kein --logo-breite-Token vorhanden) — gleiche Haltung wie
     Breakpoints/Container-max-width oben. */
  width: 200px;
  max-width: 100%;
  display: block;
}

.se-standorttafel--klein img {
  width: 150px;
}

/* Kopfzeile mobil (<=700px): Logo 150px. Nur die Standard-(nicht-"klein"-)Standorttafel im Kopf
   schrumpft hier — die Portal-"klein"-Variante ist ohnehin permanent 150px. */
@media (max-width: 700px) {
  .se-kopf .se-standorttafel:not(.se-standorttafel--klein) img {
    width: 150px;
  }
}

.se-sprache {
  /* Kein letter-spacing-Token passt semantisch (nur "display"/"eyebrow" existieren) — bewusst
     weggelassen statt eine Zahl zu erfinden, siehe Fuss-Marke-Kommentar unten. */
  display: flex;
  gap: var(--space-2);
  font-size: var(--font-size-rest);
  color: var(--on-navy-2);
  margin: 0;
}

.se-sprache a {
  color: var(--on-navy-2);
  text-decoration: none;
  font-weight: var(--font-weight-regular);
  padding: var(--space-3) var(--space-1);
  min-height: var(--space-10);
  display: inline-flex;
  align-items: center;
}

.se-sprache a.aktiv {
  color: var(--on-navy);
  font-weight: var(--font-weight-bold);
}

.se-sprache--hell a {
  color: var(--text-2);
}

.se-sprache--hell a.aktiv {
  color: var(--navy-700);
}

/* ---------- Fuss ---------- */
.se-fuss {
  padding: var(--space-11) 0 0;
  background: var(--navy-900);
  color: var(--on-navy-2);
}

.se-fuss-grid {
  display: grid;
  gap: var(--space-8);
  padding-bottom: var(--space-8);
}

.se-fuss-marke b {
  /* Kein letter-spacing-Token passt semantisch (nur "display"/"eyebrow" existieren, tokens-
     ergaenzung.css) — bewusst weggelassen statt einen Wert zu erfinden (gleiche Haltung wie die
     "Rundungs-Hinweis"-Notiz oben: kein passender Token, kein Nachbau als harte Zahl). */
  color: var(--on-navy);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-h3);
}

.se-fuss-marke p {
  margin: var(--space-2) 0 0;
}

.se-fuss-spalte h3 {
  font-size: var(--font-size-rest);
  color: var(--on-navy);
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}

.se-fuss-spalte ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-1);
}

.se-fuss-spalte a {
  color: var(--on-navy-2);
  text-decoration: none;
  font-size: var(--font-size-klein);
  min-height: var(--space-10);
  display: inline-flex;
  align-items: center;
}

.se-fuss-spalte a:hover {
  color: var(--on-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.se-fuss-zeile {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-klein);
}

.se-fuss-zeile svg {
  flex: none;
}

.se-fuss-unten {
  /* Quelle nutzt rgba(185,198,218,.35) (= --on-navy-2 bei 35% Alpha) fuer eine dezentere Linie;
     Tokens kennen nur Volltoene, kein Alpha-Derivat — volle --on-navy-2-Deckkraft statt einer
     erfundenen rgba-Zahl. */
  border-top: thin solid var(--on-navy-2);
  padding: var(--space-6) 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  justify-content: space-between;
  font-size: var(--font-size-rest);
}

@media (min-width: 700px) {
  .se-fuss-grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}

/* Fokus auf Navy-Grund: --rot ist dort verboten (2,7:1), --weiss stattdessen.
   Kopf/Fuss stehen immer auf Navy-900 (nie eine "hell"-Variante), daher direkt selektiert statt
   ueber die generische .on-dark-Klasse aus dem Reset. */
.se-kopf a:focus-visible,
.se-kopf button:focus-visible,
.se-fuss a:focus-visible {
  outline-color: var(--weiss);
}

/* ---------- Basis-Primitive: Rechtsseite ----------
   Impressum/Datenschutz/Haftung sind reiner Fliesstext und tragen keine eigenen
   Vertrags-Selektoren — schmale Lesebreite + vertikaler Rhythmus ausschliesslich aus
   vorhandenen Tokens, keine neue Farbe/Form. */
.se-rechtsseite {
  padding: var(--space-10) 0 var(--space-13);
  max-width: 70ch;
}

.se-rechtsseite h1 {
  font-size: var(--font-size-h1);
  line-height: var(--leading-h1);
  color: var(--navy-700);
  margin-bottom: var(--space-6);
}

.se-rechtsseite h2 {
  font-size: var(--font-size-h3);
  line-height: var(--leading-h3);
  color: var(--navy-700);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}

.se-rechtsseite p {
  margin-top: var(--space-4);
  color: var(--text);
}

.se-rechtsseite h2 + p {
  margin-top: var(--space-3);
}

/* Dritte Ebene (AGB: Widerrufsbelehrung und Muster-Widerrufsformular innerhalb von § 9).
   Kleiner als h2, aber weiterhin Navy — die Belehrung muss als eigener Block erkennbar sein. */
.se-rechtsseite h3 {
  font-size: var(--font-size-body);
  line-height: var(--leading-body);
  color: var(--navy-700);
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
}

/* Aufzaehlungen (Datenschutz: Datenkategorien, Auftragsbearbeiter; AGB: Leistungsausschluesse,
   Muster-Widerrufsformular). Der Reset oben nimmt ul/ol die Aussenabstaende, aber nicht die
   Einrueckung — beides hier aus Tokens statt aus dem Browserstandard, damit die Liste im selben
   vertikalen Rhythmus steht wie der Fliesstext. */
.se-rechtsseite ul,
.se-rechtsseite ol {
  margin-top: var(--space-4);
  padding-left: var(--space-5);
  color: var(--text);
}

.se-rechtsseite h2 + ul,
.se-rechtsseite h3 + ul,
.se-rechtsseite p + ul,
.se-rechtsseite h2 + ol,
.se-rechtsseite h3 + ol,
.se-rechtsseite p + ol {
  margin-top: var(--space-3);
}

.se-rechtsseite li + li {
  margin-top: var(--space-2);
}

/* Nachgeordneter Hinweis (Datenschutz: Stand der Erklaerung): kleiner gesetzt und abgesetzt,
   weil er den Rechtstext einordnet statt ihn fortzusetzen. */
.se-rechtsseite__hinweis {
  border-left: thin solid var(--linie);
  padding-left: var(--space-4);
  color: var(--text-2);
  font-size: var(--font-size-klein);
  line-height: var(--leading-klein);
}

/* ---------- Landing Teil 1: Sektionsraster, Typografie-Primitive ----------
   Gleiche Konvention wie Kopf/Fuss/Rechtsseite oben: seitenweite Layout-/Typo-Primitive leben
   hier statt in einer gescopten .razor.css, weil sie ueber mehrere Sektionen der Landingpage
   hinweg wiederverwendet werden. Space-13/-12 = 96px/64px Sektionsrhythmus, exakte
   Tokenentsprechung. */
.se-sec {
  padding: var(--space-12) 0;
}

@media (min-width: 1000px) {
  .se-sec {
    padding: var(--space-13) 0;
  }
}

.se-sec--navy {
  background: var(--navy-900);
  color: var(--on-navy);
}

.se-sec--grau {
  background: var(--grau-50);
}

.se-sec--blau {
  background: var(--blau-50);
}

/* ---------- Typografie-Primitive: Eyebrow, H1/H2, Lead, Klein ----------
   Global (nicht auf .se-rechtsseite beschraenkt wie oben) -- .se-h1/.se-h2 sind eigene Klassen,
   keine Kollision mit den Element-Selektoren ".se-rechtsseite h1/h2" oben. */
.se-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  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(--navy-700);
  margin: 0 0 var(--space-5);
}

.se-sec--navy .se-eyebrow {
  color: var(--on-navy);
}

.se-eyebrow::before {
  /* 28x3px Strich ist eine feste Anatomie-Groesse (§6.3 "Eyebrow-Anatomie"), kein Space-Token
     passt -- gleiche Haltung wie --tip in tokens.css: benannte Design-Konstante, kein
     erfundener Rundungswert. */
  content: "";
  width: 28px;
  height: 3px;
  background: var(--rot);
  flex: none;
}

.se-h1,
.se-h2 {
  margin: 0;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-display);
  color: var(--navy-700);
}

.se-h1 {
  font-size: var(--font-size-h1);
  line-height: var(--leading-h1);
}

.se-h2 {
  font-size: var(--font-size-h2);
  line-height: var(--leading-h2);
}

.se-sec--navy .se-h1,
.se-sec--navy .se-h2 {
  color: var(--on-navy);
}

/* --rot auf --navy-900 ist nur fuer Grosstext erlaubt (ab 24px Bold bzw. 30px Regular).
   H1 (32-48px) und H2 (24-36px) sind hier immer Bold und ueberschreiten die Schwelle in beiden
   Faellen -- deshalb dieselbe Klasse fuer beide Headline-Rollen. */
.se-zeile2 {
  display: block;
  color: var(--rot);
}

.se-lead {
  margin: 0;
  font-size: var(--font-size-body);
  line-height: var(--leading-body);
  color: var(--text-2);
  max-width: 52ch;
}

.se-sec--navy .se-lead {
  color: var(--on-navy-2);
}

.se-klein {
  margin: 0;
  font-size: var(--font-size-klein);
  line-height: var(--leading-klein);
  color: var(--text-2);
}

.se-sec--navy .se-klein {
  color: var(--on-navy-2);
}

.se-fussnote {
  /* Referenz: 13px/1.5 -- kein Token trifft beide Werte exakt; jede Dimension einzeln auf die
     naechste vorhandene Groesse aufgerundet (Rundungs-Hinweis aus der Datei-Kopfnotiz):
     Groesse -> --font-size-rest (14px, naechste ueber 13px), Zeilenhoehe -> --leading-klein
     (1.55, naechste ueber 1.5) statt eine neue 1.5-Zahl zu erfinden. */
  margin-top: var(--space-5);
  font-size: var(--font-size-rest);
  line-height: var(--leading-klein);
  color: var(--text-2);
  max-width: 74ch;
}

/* ---------- Hero-Split 8:5 ---------- */
.se-hero {
  display: grid;
  gap: var(--space-9);
  align-items: center;
  padding-bottom: var(--space-9);
}

.se-hero-text > * + * {
  margin-top: var(--space-6);
}

.se-hero-cta {
  /* P1-KOPF-Fix (Kundenbefund "Header-Buttons ungleich gross", 2026-08-24): primaerer und
     sekundaerer Hero-CTA (se-hero-cta-primaer/-sekundaer) tragen identische Hoehe bereits ueber
     .se-btn (min-height, padding, box-sizing:border-box), aber ungleiche Breite -- jeder Knopf
     wird content-breit, und "Unverbindlich Kontakt aufnehmen" ist ein anderes Wortbild als
     "Kostenlos meinen Plan erstellen". display:grid mit einer einzigen max-content-Spalte macht
     beide Knoepfe exakt so breit wie der breitere von beiden (kein geratener Pixelwert, keine
     neue Design-Erfindung). minmax(0, ...) verhindert ein Ueberlaufen auf sehr schmalen
     Viewports: die Spalte darf unter max-content schrumpfen, der Button-Text bricht dann um
     (kein overflow:hidden, kein Beschnitt). */
  display: grid;
  grid-template-columns: minmax(0, max-content);
  gap: var(--space-3);
}

.se-hero-bild img {
  width: 100%;
  height: auto; /* K-1-Fix: HTML width/height-Attribute (Anti-CLS) machen height sonst
    "definite" (2967px) statt "auto" -- aspect-ratio greift laut Spezifikation nur, wenn
    mind. eine Dimension auto ist. Ohne height:auto blieb die Box literal 2967px hoch,
    aspect-ratio wurde nur berechnet, nie angewendet (Kundenbefund K-1). */
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: 50% 40%;
}

@media (min-width: 1000px) {
  .se-hero {
    grid-template-columns: 8fr 5fr;
    gap: var(--space-11);
    padding-bottom: var(--space-11);
  }

  .se-hero-bild img {
    aspect-ratio: 4 / 5;
  }
}

/* ---------- Hinweisband (Abgrenzung: keine Rechtsberatung) ---------- */
.se-hinweis {
  /* Referenz nutzt rgba(185,198,218,.35) fuer eine dezente Trennlinie -- Tokens kennen keine
     Alpha-Derivate, gleiche Haltung wie .se-fuss-unten oben: volle --on-navy-2-Deckkraft statt
     erfundener rgba-Zahl. */
  border-top: thin solid var(--on-navy-2);
  padding-top: var(--space-5);
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.se-hinweis svg {
  flex: none;
  /* 2px Feinausrichtung zur ersten Textzeile, kein Space-Token so klein vorhanden. */
  margin-top: 2px;
}

.se-hinweis p {
  margin: 0;
  font-size: var(--font-size-klein);
  line-height: var(--leading-klein);
  color: var(--on-navy-2);
  max-width: 70ch;
}

.se-hinweis b {
  color: var(--on-navy);
  font-weight: var(--font-weight-bold);
}

/* ---------- Fuenferschritt-Sektion (Bildspalte) ---------- */
.se-etappen {
  display: grid;
  gap: var(--space-9);
  align-items: start;
}

.se-etappen-bild img {
  width: 100%;
  height: auto; /* K-1-Fix, siehe Begruendung bei .se-hero-bild img oben. */
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 50% 45%;
}

@media (min-width: 1000px) {
  .se-etappen {
    grid-template-columns: 8fr 5fr;
    gap: var(--space-11);
  }

  .se-etappen-bild img {
    aspect-ratio: 4 / 5;
  }
}

/* ---------- Landing Teil 2: Sektionsraster, Paketfarben ----------
   Gleiche Konvention wie oben: seitenweite Layout-Primitive leben hier,
   weil sie ueber mehrere Sektionen/Komponenten hinweg wiederverwendet werden. */

/* ---------- Paketfarben p-… und n-… ----------
   ACHTUNG: in diesem Kommentar niemals "p-*" direkt vor einem Schraegstrich schreiben — die
   Folge "*" + "/" beendet den Kommentar vorzeitig und frisst die erste Regel darunter.
   Bewusst global statt in Paketkachel.razor.css/Vergleich.razor.css: Blazor-CSS-Isolation
   scoped Klassenregeln nur auf die Elemente der jeweils eigenen Komponente. Beide Praefixe
   werden von BEIDEN Komponenten im eigenen Markup gerendert (Paketkachel-Balken/-Name,
   Vergleich-Tabellenkopf-Balken/-Haekchen/-Listentitel) -- eine globale Definition statt
   zweier widerspruechlicher Kopien je Komponente. */
.p-basic {
  background: var(--navy-700);
}

.p-comfort {
  background: var(--gold);
}

.p-premium {
  background: var(--rot);
}

.p-familien {
  background: var(--gruen);
}

.n-basic {
  color: var(--navy-700);
}

.n-comfort {
  color: var(--gold-ink);
}

.n-premium {
  color: var(--rot);
}

.n-familien {
  color: var(--gruen-ink);
}

/* ---------- Segmente-Grid ---------- */
.se-segmente {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: var(--space-9); /* Original 36px aufgerundet -- naechster Token --space-9 40px */
  border-top: thin solid var(--linie);
}

@media (min-width: 700px) {
  .se-segmente {
    grid-template-columns: repeat(2, 1fr);
    border-top: none;
    border-left: thin solid var(--linie);
  }
}

@media (min-width: 1000px) {
  .se-segmente {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- Pakete-Sektion: Intro-Split + Kachel-Grid ---------- */
.se-beratung-intro {
  display: grid;
  gap: var(--space-9); /* Original 40px, exakte Entsprechung */
  align-items: center;
  margin-bottom: var(--space-11); /* Original 56px, exakte Entsprechung */
}

.se-beratung-bild img {
  width: 100%;
  height: auto; /* K-1-Fix, siehe Begruendung bei .se-hero-bild img oben. */
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 50% 45%;
}

@media (min-width: 700px) {
  .se-beratung-intro {
    grid-template-columns: 7fr 5fr;
  }
}

.se-pakete {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5); /* Original 20px, exakte Entsprechung */
  margin-top: var(--space-2); /* Original 8px, exakte Entsprechung */
}

@media (min-width: 700px) {
  .se-pakete {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .se-pakete {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---------- Anfrage-/Kontakt-Sektion (nur Sektionsrahmen + Anker; das Formular selbst ist
   Anfrageformular.razor, eingebunden aus Landing.razor) ---------- */
.se-kontakt-grid {
  display: grid;
  gap: var(--space-10); /* Original 48px, exakte Entsprechung */
  align-items: start;
}

.se-kontaktwege {
  display: grid;
  gap: var(--space-4); /* Original 16px, exakte Entsprechung */
  margin: var(--space-6) 0 var(--space-8);
  max-width: 52ch;
}

.se-kontaktweg {
  display: flex;
  align-items: center;
  gap: var(--space-4); /* Original 14px aufgerundet -- naechster Token --space-4 16px */
  font-size: var(--font-size-klein);
  color: var(--on-navy-2);
}

.se-kontaktweg svg {
  flex: none;
}

.se-kontakt-bild img {
  width: 100%;
  height: auto; /* K-1-Fix, siehe Begruendung bei .se-hero-bild img oben. */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 35%;
}

/* ----------------------------------------------------------------------
   Rework K-3-Fix (2026-08-21): Blazor-Standard-Fehlerleiste (#blazor-error-ui).
   Reine Blazor-WASM-Framework-Infrastruktur, kein SwissEntry-Designelement
   -- deshalb hier hartkodierte Werte statt var(--...)-Tokens (analog zur
   Breakpoint-/clip-path-Ausnahme oben in der Datei-Kopfnotiz). Diese Regel lag
   ursprünglich in app.css und ist bei der Umstellung auf tokens.css/
   tokens-ergaenzung.css/swissentry.css versehentlich verlorengegangen,
   wodurch die Leiste per Browser-Default (display: block fuer <div>) auf jeder
   Seite dauerhaft sichtbar war, unabhaengig von einem echten Fehler. tokens.css
   hat keinen Fehler-/Danger-Token (--rot ist exklusiv "Anfang/Ziel"-Bedeutung,
   siehe tokens.css Kommentar "Genau eine Bedeutung" -- fuer Fehler-UI nicht
   zulaessig) -- deshalb Werte 1:1 aus dem historischen Blazor-Template
   uebernommen (git show fa73e37:.../app.css), keine Design-Erfindung.
   Sichtbarkeit steuert weiterhin Blazor selbst per JS: bei einem kritischen .NET-Fehler
   (aufgerufen ueber window.Blazor._internal.dotNetCriticalError bzw. den stderr-Handler des
   Mono-Runtimes) setzt Blazor direkt document.querySelector("#blazor-error-ui").style.display =
   "block" -- ein Inline-Style, KEINE CSS-Klasse ("blazor-error-ui-visible" existiert nicht im
   echten blazor.webassembly.js). display: none unten ist nur der Ruhezustand.
   ---------------------------------------------------------------------- */
#blazor-error-ui {
  background: #fef2f2;
  border-top: 1px solid #fecaca;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
  color: #b91c1c;
}

#blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: 0.75rem;
  top: 0.5rem;
}

@media (min-width: 1000px) {
  .se-kontakt-grid {
    grid-template-columns: 7fr 5fr;
  }
}

/* ---------- Login/Registrierung/Kontoübersicht: Split 5:7 ----------
   Links (Navy-900): Standorttafel, Nutzenversprechen, Tafel-Rail-Vorschau. Rechts (Weiss):
   Formular. Stapelt mobil (Marke vor Formular), 5:7-Grid
   ab 1000px. Padding-Werte 40/24px (mobil) und 56/48px (ab 1000px) sind exakte Entsprechungen
   von --space-9/--space-6 bzw. --space-11/--space-10 (index.html .konto-marke/.konto-
   formularseite). */
.se-konto-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.se-konto-marke {
  background: var(--navy-900);
  color: var(--on-navy);
  padding: var(--space-9) var(--space-6);
}

.se-konto-marke .se-lead {
  margin-top: var(--space-4);
}

.se-konto-vorschau {
  margin-top: var(--space-8); /* Original 32px, exakte Entsprechung */
}

.se-konto-vorschau .rail {
  margin-top: var(--space-5);
}

.se-konto-formularseite {
  background: var(--weiss);
  padding: var(--space-9) var(--space-6);
  border: thin solid var(--linie);
  border-top: none;
}

.se-konto-subtitle {
  margin-top: var(--space-3);
}

.se-konto-formular {
  max-width: 420px;
  margin-top: var(--space-7); /* Original 28px, exakte Entsprechung */
}

.se-konto-formular-fuss {
  margin-top: var(--space-7);
}

.se-konto-fuss {
  margin-top: var(--space-6); /* Original 24px, exakte Entsprechung */
  display: grid;
  gap: 2px;
}

.se-konto-vertrauen {
  margin-top: var(--space-5); /* Original 20px, exakte Entsprechung */
}

@media (min-width: 1000px) {
  .se-konto-split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .se-konto-marke {
    padding: var(--space-11) var(--space-10);
  }

  .se-konto-formularseite {
    padding: var(--space-11) var(--space-10);
    border-top: thin solid var(--linie);
    border-left: none;
  }
}

/* ---------- Leerzustand: Portal ohne Plan ----------
   portal-leer traegt bewusst kein src -- die Bildrechte sind bis zum Livegang ungeklaert, siehe
   Kommentar in Dashboard.razor. Scrim nutzt volle --navy-900-Deckkraft statt
   rgba(7,27,56,.82) -- Tokens kennen keine Alpha-Derivate (gleiche Haltung wie .se-fuss-unten/
   .se-hinweis oben); ohne Bild-src ist der Unterschied ohnehin nicht sichtbar (Navy-Scrim auf
   Navy-Flaeche). Fokusring-Farbe auf diesem dunklen Grund kommt ueber die bereits vorhandene
   .on-dark-Klasse (Reset oben) -- Dashboard.razor setzt sie auf .leer-zustand, keine neue
   Fokus-Regel noetig (--rot ist als Ring auf Navy verboten). */
.leer-zustand {
  position: relative;
  overflow: hidden;
  margin-top: var(--space-7);
  background: var(--navy-900);
}

.leer-zustand-bild {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.leer-zustand-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 21 / 9;
}

.leer-zustand-scrim {
  position: absolute;
  inset: 0;
  background: var(--navy-900);
  z-index: 1;
}

.leer-zustand-inhalt {
  position: relative;
  z-index: 2;
  padding: var(--space-9) var(--space-6);
  max-width: 60ch;
}

.leer-zustand-icon {
  margin-bottom: var(--space-5);
  color: var(--linie);
}

.leer-zustand h2 {
  color: var(--on-navy);
}

.leer-zustand p {
  color: var(--on-navy-2);
  margin-top: var(--space-3);
}

.leer-zustand .se-btn {
  margin-top: var(--space-6);
}

@media (min-width: 700px) {
  .leer-zustand-inhalt {
    padding: var(--space-11) var(--space-10);
  }
}