/*
  SwissEntry — Leitfaden-Schicht

  Ausschliesslich fuer die 64 statischen Dokumente, die tools/Relocation.Leitfaden beim Image-Bau
  erzeugt (/ratgeber/, /en/guides/ und die 62 Einzelseiten). Die Blazor-Anwendung bindet diese
  Datei NICHT ein: keine ihrer Komponenten benutzt eine dieser Klassen, und in swissentry.css
  stuenden sie als totes Gewicht in jedem App-Start.

  Ladereihenfolge: tokens.css -> tokens-ergaenzung.css -> swissentry.css -> leitfaden.css
  (siehe leitfaden-vorlage.html und leitfaden-uebersicht.html). Die Reihenfolge ist Teil des
  Vertrags: .lf-kopfband und .lf-abschlussband ueberschreiben das Polster von .se-sec bei
  gleicher Spezifitaet und wirken nur, weil diese Datei danach kommt.

  Dieselbe Regel wie in swissentry.css: nur `var(--...)`-Referenzen auf tokens.css und
  tokens-ergaenzung.css, keine hartkodierten Farb-, Abstands-, Radius- oder Schattenwerte.
  Zulaessige Ausnahmen, jede mit Vorbild in swissentry.css: die zwei Breakpoint-Zahlen (700/1000)
  in @media-Bedingungen, Verhaeltniswerte in grid-template-columns (8fr 3fr, wie .se-hero) und
  ch-Masse fuer Lesebreiten (wie .se-lead/.se-rechtsseite).

  Warum diese Klassen ueberhaupt noetig sind: .se-sec traegt den Sektionsrhythmus der Landingpage
  (64/96px oben UND unten), und zwischen zwei Abschnitten eines Artikels ergibt das 192px Leere.
  .se-lead ist Fliesstext in --text-2 mit 52ch — als Titel einer Checklistenzeile faerbt und
  begrenzt es falsch. Die Leitfaden-Seiten brauchen darum einen eigenen, engeren Satz von
  Primitiven; die Typografie-, Farb- und Knopfklassen von swissentry.css bleiben unveraendert in
  Gebrauch.
*/

/* ---------- Gemeinsam: Seitenkopf, Abschlussband, Brotkrume, Abschnitt, Ueberschrift ----------

   ACHTUNG BEI JEDER KLASSE, DIE NEBEN .se-wrap STEHT: die Kurzform `padding: oben 0 unten` setzt
   auch links und rechts auf 0 und loescht damit den Seitenabstand, den .se-wrap als Langform
   (padding-left/-right) mitbringt. Sichtbar wird das erst unterhalb von 1200px, weil oberhalb der
   automatische Rand des Containers die Luecke ohnehin stellt -- auf dem Handy klebt der Text dann
   am Displayrand. Deshalb stehen hier ueberall Langformen. */

/* Der Seitenkopf der Uebersicht: weisser Grund, Navy-Schrift -- wie der Artikelkopf der
   Einzelseiten. Ein Navy-Band an dieser Stelle machte die Seite zu einer zweiten Landingpage;
   Navy bleibt der Kopfzeile, dem Abschlussband und dem Fuss. Die Haarlinie unten trennt den Kopf
   vom Register, weil ihm ohne Flaechenfarbe sonst die Kante fehlt -- sie laeuft ueber die ganze
   Seitenbreite (die Klasse sitzt auf dem Behaelter UM das .se-wrap, nicht auf ihm), weil eine
   Linie, die breiter als der Inhalt aber schmaler als die Seite ist, wie ein Messfehler aussieht. */
.lf-kopfband {
  padding-top: var(--space-9);
  padding-bottom: var(--space-8);
  border-bottom: thin solid var(--linie);
}

/* .se-lead traegt margin:0 und 52ch — im Seitenkopf steht es allein unter der H1 und darf
   etwas breiter laufen, ohne die Zeile ueber die Lesbarkeitsgrenze zu ziehen. */
.lf-kopfband .se-lead {
  margin-top: var(--space-5);
  max-width: 62ch;
}

/* Das Abschlussband ist das eine Navy-Feld im Inhalt. Farben, Ueberschriften- und
   Lead-Umfaerbung kommen aus .se-sec--navy; hier wird ausschliesslich das Polster ersetzt -- das
   Band schliesst eine Seite ab, es ist keine Sektion einer Landingpage. `on-dark` gehoert im
   Markup dazu: der Fokusring ist auf Navy sonst rot und damit unsichtbar (swissentry.css,
   "Fokus-Sichtbarkeit"). Es umschliesst seinerseits ein .se-wrap, traegt also selbst keinen
   Seitenabstand und darf die Kurzform benutzen. */
.lf-abschlussband {
  padding: var(--space-11) 0;
}

.lf-band-innen {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

.lf-band-innen .se-lead {
  margin-top: var(--space-4);
}

@media (min-width: 700px) {
  .lf-band-innen {
    grid-template-columns: 1fr auto;
    gap: var(--space-9);
  }
}

/* Brotkrume. Sie zeigt dieselbe Kette wie die BreadcrumbList in den strukturierten Daten —
   bisher stand der Pfad nur dort, also fuer Maschinen, und fuer den Leser nirgends. */
.lf-krume {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-rest);
  line-height: var(--leading-klein);
  color: var(--text-2);
  margin: 0 0 var(--space-6);
}

.lf-krume a {
  color: inherit;
  text-decoration: none;
  border-bottom: thin solid var(--linie);
}

.lf-krume a:hover {
  color: var(--rot);
  border-bottom-color: var(--rot);
}

.lf-krume span {
  color: var(--linie);
}

/* Zwischenueberschrift im Artikel: dieselbe Anmutung wie .se-h2 (Grossbuchstaben, Navy,
   Display-Laufweite), aber auf der dritten Groesse der Skala. Eine .se-h2 waere hier 36px —
   so gross wie die Sektionsueberschrift der Landingpage, ueber einer Checkliste mit fuenf
   Zeilen. */
.lf-h2 {
  margin: 0;
  font-size: var(--font-size-h3);
  line-height: var(--leading-h3);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-display);
  color: var(--navy-700);
}

.lf-abschnitt {
  margin-top: var(--space-9);
}

.lf-abschnitt > * + * {
  margin-top: var(--space-4);
}

/* ---------- Uebersichtsseite: Sprungleiste, Bloecke, Karten ---------- */

.lf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-8);
}

.lf-chip {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: thin solid var(--linie);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-rest);
  line-height: var(--leading-rest);
  color: var(--text-2);
  text-decoration: none;
}

.lf-chip b {
  color: var(--navy-700);
  font-variant-numeric: tabular-nums;
}

.lf-chip:hover {
  color: var(--rot);
  border-color: var(--rot);
}

.lf-register {
  display: grid;
  gap: var(--space-11);
  padding-top: var(--space-10);
  padding-bottom: var(--space-12);
}

.lf-block-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-4);
  border-bottom: 3px solid var(--navy-700);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-6);
}

/* 3px wie der Eyebrow-Strich (swissentry.css, "28x3px ist eine feste Anatomie-Groesse"):
   benannte Design-Konstante, kein erfundener Rundungswert — `thin` waere als Blockkante zu
   schwach, um einen Etappenwechsel zu markieren. */

.lf-block-nr {
  font-size: var(--font-size-rest);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--rot);
}

.lf-block-zahl {
  margin-left: auto;
  font-size: var(--font-size-rest);
  color: var(--text-2);
}

.lf-raster {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
}

.lf-raster > li {
  display: flex;
}

@media (min-width: 700px) {
  .lf-raster {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1000px) {
  .lf-raster {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.lf-karte {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  border: thin solid var(--linie);
  border-radius: var(--radius-sm);
  background: var(--weiss);
  text-decoration: none;
}

.lf-karte:hover {
  border-color: var(--rot);
  box-shadow: var(--shadow-sm);
}

.lf-karte-titel {
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-h3);
  color: var(--navy-700);
}

.lf-karte-text {
  flex: 1 1 auto;
  font-size: var(--font-size-klein);
  line-height: var(--leading-klein);
  color: var(--text-2);
}

.lf-karte-fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: thin solid var(--linie);
  font-size: var(--font-size-rest);
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

.lf-karte-pfeil {
  color: var(--rot);
  font-weight: var(--font-weight-bold);
}

/* ---------- Einzelseite: Artikel, Faktenspalte ---------- */

.lf-artikel {
  padding-top: var(--space-9);
  padding-bottom: var(--space-12);
}

@media (min-width: 1000px) {
  .lf-artikel {
    padding-top: var(--space-10);
    padding-bottom: var(--space-13);
  }
}

.lf-layout {
  display: grid;
  gap: var(--space-9);
}

/* 8fr 3fr statt fester Breite — dieselbe Bauweise wie .se-hero (8fr 5fr) in swissentry.css. */
@media (min-width: 1000px) {
  .lf-layout {
    grid-template-columns: 8fr 3fr;
    gap: var(--space-10);
  }
}

.lf-haupt > * + * {
  margin-top: var(--space-5);
}

/* Lesebreite des Artikeltexts: .se-lead begrenzt auf 52ch, was fuer eine Lead-Zeile neben einem
   Bild richtig ist, fuer den Fliesstext eines Leitfadens aber eine zu schmale Saeule ergibt. */
.lf-haupt .se-lead {
  max-width: 66ch;
}

.lf-titel {
  margin-bottom: var(--space-5);
}

/* Zielgruppe. Roter Anriss wie der Eyebrow-Strich (3px, siehe oben), damit die eine Aussage,
   an der ein Leser erkennt, ob die Seite ihn ueberhaupt betrifft, nicht wie ein weiterer
   Absatz aussieht. */
.lf-hinweis {
  border-left: 3px solid var(--rot);
  background: var(--blau-50);
  padding: var(--space-4) var(--space-5);
}

.lf-hinweis .se-lead {
  max-width: 60ch;
}

.lf-hinweis b {
  color: var(--navy-700);
}

/* Checkliste. Der Reset in swissentry.css nimmt ol/ul nur die Aussenabstaende; die Zaehlung
   uebernimmt hier ein CSS-Counter, weil die Ziffer eine eigene Spalte, Farbe und Groesse
   bekommt — als Listenmarke des Browsers waere sie nicht gestaltbar. */
.lf-schritte {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: lf-schritt;
}

.lf-schritte > li {
  counter-increment: lf-schritt;
  display: grid;
  grid-template-columns: var(--space-8) 1fr;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  border-top: thin solid var(--linie);
}

.lf-schritte > li:last-child {
  border-bottom: thin solid var(--linie);
}

.lf-schritte > li::before {
  content: counter(lf-schritt);
  font-size: var(--font-size-h3);
  line-height: var(--leading-h3);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--rot);
}

.lf-schritt-titel {
  margin: 0;
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-body);
  color: var(--navy-700);
}

.lf-schritt-text {
  margin: var(--space-1) 0 0;
  font-size: var(--font-size-klein);
  line-height: var(--leading-klein);
  color: var(--text-2);
  max-width: 62ch;
}

/* Kosten. Betrag in einer eigenen, rechtsbuendigen Spalte mit Tabellenziffern — bisher stand er
   mitten im Satz ("Ausweiskarte — CHF 30 · einmalig") und war ueber mehrere Posten hinweg nicht
   vergleichbar. Umbricht die Zeile, steht der Betrag unter dem Label statt daneben. */
.lf-kosten {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lf-kosten > li {
  padding: var(--space-4) 0;
  border-top: thin solid var(--linie);
}

.lf-kosten > li:last-child {
  border-bottom: thin solid var(--linie);
}

.lf-kosten-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.lf-kosten-label {
  font-weight: var(--font-weight-bold);
  color: var(--navy-700);
}

.lf-kosten-betrag {
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--navy-700);
  white-space: nowrap;
}

.lf-kosten-einheit {
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-rest);
  color: var(--text-2);
}

.lf-kosten-note {
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-rest);
  line-height: var(--leading-klein);
  color: var(--text-2);
  max-width: 70ch;
}

/* FAQ. Dieselben Trennlinien wie Checkliste und Kosten darueber -- der Abschnitt ist die kurze
   Fassung von beiden und soll nicht wie ein fremdes Bauteil wirken. Kein Aufklappen: die Antworten
   sind zwei bis drei Saetze, und ein zugeklappter Text ist fuer den Leser ein Klick und fuer eine
   Antwortmaschine im Zweifel gar nicht sichtbar -- wovon die FAQPage-Auszeichnung gerade abhaengt
   (siehe Faqtexter). */
.lf-faq-eintrag {
  padding: var(--space-4) 0;
  border-top: thin solid var(--linie);
}

.lf-faq-eintrag:last-child {
  border-bottom: thin solid var(--linie);
}

.lf-faq-frage {
  margin: 0;
  font-size: var(--font-size-body);
  line-height: var(--leading-body);
  font-weight: var(--font-weight-bold);
  color: var(--navy-700);
}

.lf-faq-antwort {
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-klein);
  line-height: var(--leading-klein);
  color: var(--text-2);
  max-width: 70ch;
}

/* Faktenspalte. Klebt erst ab 1000px, wo sie neben dem Text steht; darunter ist sie ein
   gewoehnlicher Block ueber dem Artikelende. */
.lf-fakten {
  align-self: start;
  padding: var(--space-5);
  border: thin solid var(--linie);
  border-radius: var(--radius-sm);
  background: var(--blau-50);
}

@media (min-width: 1000px) {
  .lf-fakten {
    position: sticky;
    top: var(--space-6);
  }
}

.lf-fakten h2 {
  margin: 0;
  padding-bottom: var(--space-3);
  border-bottom: thin solid var(--linie);
  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);
}

.lf-fakten dl {
  margin: 0;
}

.lf-fakten dt {
  margin-top: var(--space-4);
  font-size: var(--font-size-eyebrow);
  line-height: var(--leading-eyebrow);
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
  color: var(--text-2);
}

.lf-fakten dd {
  margin: var(--space-1) 0 0;
  font-size: var(--font-size-klein);
  line-height: var(--leading-klein);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--navy-700);
}

.lf-fakten .se-btn {
  width: 100%;
  margin-top: var(--space-6);
}

.lf-fakten-hinweis {
  margin: var(--space-2) 0 0;
  text-align: center;
  font-size: var(--font-size-rest);
  line-height: var(--leading-klein);
  color: var(--text-2);
}

.lf-stand {
  margin-top: var(--space-8);
}