/* ==========================================================================
   lp-page.css - seitenlokale Klassen der oeffentlichen Seiten.
   Baut ausschliesslich auf Tokens aus _ds/tokens/ auf; keine eigenen Hex-Werte,
   keine zweite Radien- oder Schattensprache. lp.css bleibt die gemeinsame
   Designsystem-Schicht und wird hier nicht ueberschrieben.
   ========================================================================== */

html { scroll-behavior: smooth; overflow-x: clip; }
body { overflow-x: clip; }

/* Die Kopfzeile klebt oben (64px). Ohne diesen Reserveabstand landet jedes
   Sprungziel exakt unter ihr und die erste Zeile der Ueberschrift ist verdeckt. */
:target, section[id], [id^="f-"] { scroll-margin-top: 88px; }

/* ── Kopfzeile: Navigation als eine Leiste ───────────────────────────────── */
/* Das Problem war nicht die Anzahl der Punkte, sondern dass nichts sie
   zusammenhielt: fuenf frei stehende Woerter direkt neben zwei fast gleich
   schweren Buttons. Ohne gemeinsame Grundlinie liest das Auge sie einzeln.

   Loesung in drei Schritten:
   1. Jeder Punkt bekommt dieselbe Hoehe und eine 2px-Grundlinie, die im
      Ruhezustand transparent ist. Damit sitzen alle auf einer Achse und die
      Leiste hat einen Boden - auch wenn man ihn nicht sieht.
   2. Hover und aktive Seite faerben genau diese Linie ein. Der Zustand
      passiert damit IN der Leiste, nicht daneben.
   3. Eine Haarlinie trennt Navigation von Aktionen. Danach steht rechts nur
      noch ein gefuellter CTA plus "Anmelden" als ruhiger Textlink. */
.lp-nav { gap: 4px; align-items: stretch; }
.lp-nav a {
  display: inline-flex; align-items: center; padding: 0 12px; min-height: 44px;
  border-bottom: 2px solid transparent; color: var(--text-2);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.lp-nav a:hover { color: var(--text-1); border-bottom-color: var(--accent); text-decoration: none; }
.lp-nav a[aria-current="page"] { color: var(--accent-strong); border-bottom-color: var(--accent); font-weight: var(--fw-semibold); }
.lp-nav a:focus-visible { outline: none; box-shadow: var(--focus-ring-on-surface); border-radius: var(--r-sm); }

/* Trennt Navigation von Aktionen. 1px Linie statt Abstand allein - Abstand
   haetten die Nutzer als "gehoert noch dazu" gelesen. */
.lp-act { padding-left: 18px; border-left: 1px solid var(--line); }

.lp-login {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px;
  color: var(--text-1); font-size: var(--fs-sm); font-weight: var(--fw-medium); white-space: nowrap;
}
.lp-login:hover { color: var(--accent-strong); text-decoration: underline; }
.lp-login:focus-visible { outline: none; box-shadow: var(--focus-ring-on-surface); border-radius: var(--r-sm); }

/* ── Korrektur an der Designsystem-Schicht ───────────────────────────────── */
/* .pill-line traegt in lp.css `border: 1px solid var(--line-strong)` und
   `background: var(--surface)`. Auf einer Karte, die selbst --surface ist,
   unterscheidet also NUR der Rand den Button vom Untergrund - und der erreicht
   gemessen 1,63:1 hell und 1,97:1 dunkel. WCAG 1.4.11 verlangt 3:1 fuer die
   Grenze eines Bedienelements. --control-off ist im Designsystem genau dafuer
   vorgesehen und liefert hier 3,4:1 bzw. 3,6:1.
   Steht hier statt in lp.css, damit lp.css eine unveraenderte Kopie aus dem
   Designsystem bleibt - der Befund gehoert dorthin zurueckgemeldet. */
.pill-line { border-color: var(--control-off); }

/* Trefferflaechen aus lp.css lagen knapp unter dem Minimum: Fusszeilen-Links
   42px (padding 10px auf 22px Zeilenhoehe), der Marken-Link 28px. Das
   Designsystem verlangt mindestens 44x44 - "knapp daneben" ist auf einem
   Touchscreen derselbe Fehlgriff wie deutlich daneben. */
footer a { padding: 11px 0; }
.lp-brand { min-height: 44px; }

/* ── Nachpruefbare Belege in der Vertrauens-Sektion ──────────────────────── */
/* Bewusst zurueckhaltend: das sind Belege, keine Auszeichnungen. Wuerden sie
   wie Siegel aussehen, waeren sie genau das, was sie ersetzen sollen. */
.pruefen { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.pruefen-text { margin: 0 0 10px; font-size: var(--fs-sm); color: var(--text-2); line-height: 1.6; }
.pruefen-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pruefen-liste li { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pruefen-liste a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--accent-strong);
}
.pruefen-liste a:hover { text-decoration: underline; }
.pruefen-liste a:focus-visible { outline: none; box-shadow: var(--focus-ring-on-surface); border-radius: var(--r-sm); }
.pruefen-liste span { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-3); }

/* ── Vorbehalt auf der Preisseite ────────────────────────────────────────── */
/* Warnton, nicht Akzentton: das ist eine Einschraenkung, kein Angebot. Auf
   --warn-dim, weil --brand-warm-dim im dunklen Theme keine lesbare Tinte
   traegt. --text-1 haelt in beiden Themes ueber 4,5:1. */
.preis-vorbehalt {
  margin: 22px auto 0; max-width: 62ch;
  border: 1px solid var(--warn); background: var(--warn-dim); color: var(--text-1);
  border-radius: var(--r); padding: 14px 18px;
  font-size: var(--fs-sm); line-height: 1.6; text-align: left;
}
.preis-vorbehalt strong { font-weight: var(--fw-semibold); }

/* Der Vorbehalt noch einmal direkt an der Zahl - wer nur ueberfliegt, liest
   die Zahl und sonst nichts. */
.preis-zeile { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.geplant-chip {
  font-family: var(--font-mono); font-size: var(--fs-micro); line-height: 1;
  padding: 4px 8px; border-radius: var(--r-sm);
  background: var(--warn-dim); color: var(--warn); border: 1px solid var(--warn);
  white-space: nowrap;
}

/* ── Sektion "So funktioniert es" ────────────────────────────────────────── */
/* Grafik plus Beschriftung, keine Karten. Die Texte tragen bewusst KEIN
   Kartengehaeuse: sie sind Bildunterschrift zu den drei Zonen der Grafik,
   nicht drei gleichrangige Kacheln. Genau das war vorher zu trocken. */
.schritte { margin: 0; }
.schritte img {
  display: block; width: 100%; height: auto;
  border-radius: var(--r); background: var(--surface);
}
.schritte-liste {
  list-style: none; margin: 20px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 3vw, 32px);
}
.schritte-liste li { min-width: 0; }
.schritte-liste .step-head { margin: 8px 0 6px; }
/* Unterhalb des Umbruchs stapeln die Beschriftungen; dann traegt die Nummer
   die Zuordnung zur Grafik, nicht mehr die Spaltenposition. */
@media (max-width: 860px) {
  .schritte-liste { grid-template-columns: 1fr; gap: 20px; }
}

/* ── Problemkarten ───────────────────────────────────────────────────────── */
/* Mono traegt auf dieser Seite Zahlen, Micro-Labels und die nachgebaute
   Oberflaeche - ueberall dort ist es Beschriftung. Der Problem-Kicker war die
   einzige Stelle, an der Mono als Ueberschrift in Lesegroesse auftrat: genau
   deshalb las sich das als Schriftwechsel und nicht als System. Jetzt Sans
   wie jede andere Kartenueberschrift.
   Zweitens war der Kicker exakt so gross wie der Fliesstext darunter
   (13,5px auf 13,5px) - zwei gleich grosse Zeilen ergeben keine Hierarchie.
   --fs-h3 (17px) liegt mit Faktor 1,26 ueber --fs-sm.
   Die warme Tinte bleibt: sie markiert auf dieser Seite das Problem, nicht
   die Loesung. Gemessen 7,22:1 hell und 9,63:1 dunkel auf --surface. */
.problem-kicker {
  display: block; margin: 0;
  font-family: var(--font-sans); font-size: var(--fs-h3); font-weight: var(--fw-semibold);
  line-height: var(--lh-tight); color: var(--brand-warm-deep);
}

/* ── Hero-Eyebrow ────────────────────────────────────────────────────────── */
/* Der Pfeil hinter "Neu: Konto-Vollexport" versprach ein Ziel, das es nicht
   gab. Jetzt ist die Zeile ein Link - und muss als solcher aussehen und
   bedienbar sein. --on-field-3 traf mit 4,80:1 hell zwar AA, aber bei 12px
   in Grossbuchstaben mit Sperrung ist das gemessen bestanden und gelesen
   muehsam - so kam die Rueckmeldung auch zurueck. --on-field-2 misst 6,11:1
   hell und 8,87:1 dunkel. Die Trefferflaeche erreicht 44px. */
.eyebrow-link {
  /* inline-flex schluckt das Leerzeichen vor dem Pfeil - ohne gap klebte er
     als "KONTO-VOLLEXPORT→" am Wort. */
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  color: var(--on-field-2); text-decoration: none;
}
.eyebrow-link:hover { color: var(--on-field); text-decoration: underline; }
.eyebrow-link:focus-visible { outline: none; box-shadow: var(--focus-ring-on-field); border-radius: var(--r-sm); }
/* Die Zeile trug die Sprungmarke fuer die Hero-Polsterung; die 44px-Flaeche
   ersetzt ihren eigenen Aussenabstand nach unten. */
.hero-copy .eyebrow { margin: 0 0 4px; }

/* ── Reifegrad-Zeile an der Falz ─────────────────────────────────────────── */
/* --hero-overlap existiert, damit eine KARTE in die Markenflaeche ragen kann.
   Hier steht keine Karte mehr, sondern eine Textzeile - und Text kann nicht
   halb auf --field und halb auf --bg liegen, ohne dass eine der beiden
   Haelften den Kontrast verliert. Auf der Beta-Seite steht dort weiterhin
   eine Karte, deshalb faellt der Betrag nur dort weg, wo die schlichte
   Variante steht, und nicht global. */
body:has(.hero-proof--plain) { --hero-overlap: 0px; }
.hero-proof--plain { padding-top: clamp(24px, 3.5vh, 40px); }

/* Eine Zeile, kein Kartengehaeuse. Der Vorgaenger war eine Karte mit Badge und
   drei Fakten - auf 375px wurde daraus eine fuenfzeilige Wand direkt unter der
   Hero, und der Leser musste sie durchqueren, bevor die Seite ueberhaupt
   anfaengt. Eine Aussage vertraegt kein Gehaeuse. */
.reifegrad {
  margin-inline: auto; margin-block: 0; max-width: 76ch; text-align: center;
  font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--text-2);
  text-wrap: pretty;
}
.reifegrad strong { font-weight: var(--fw-semibold); color: var(--text-1); }
/* Der Link steht am Satzende und traegt den Verweis auf die pruefbaren Fakten.
   Eigene Zeile ab dem Umbruch, damit er nicht als Teil des Satzes verrutscht. */
.reifegrad a { color: var(--accent-strong); white-space: nowrap; }
@media (max-width: 620px) {
  .reifegrad a { display: block; margin-top: 6px; }
}

/* ── Vergleichstabelle ───────────────────────────────────────────────────── */
/* Echte Tabelle, keine Layout-Tabelle: eine Zeile pro Vorgang, zwei Antworten
   nebeneinander. Die eigene Spalte traegt eine Flaeche statt eines Randes -
   das Auge findet sie ohne Beschriftung wieder, und ein farbiger Seitenstrich
   waere die schlechtere Loesung fuer dasselbe Ziel. */
.vgl { width: 100%; border-collapse: collapse; margin-top: 24px; }
.vgl caption {
  caption-side: top; text-align: left; margin: 0 0 20px;
  color: var(--text-2); max-width: 58ch; text-wrap: pretty;
}
.vgl th, .vgl td {
  padding: 14px 18px; text-align: left; vertical-align: top;
  font-size: var(--fs-sm); line-height: var(--lh-body); font-weight: var(--fw-regular);
  border-top: 1px solid var(--line);
  overflow-wrap: break-word;
}
/* Silbentrennung nur dort, wo ein einzelnes Wort breiter ist als seine Spalte:
   "BewerbungsManager" passt auf 375px in keine der drei Spalten. Ueberall
   sonst bricht der Satz ohnehin am Wortende, und `hyphens: auto` erzeugte
   dann Trennungen wie "Word-Ord-ner", "Da-teien" und "Nachfas-sen" - vier
   Trennstriche in einer Tabelle lesen sich wie ein Fehler, nicht wie Satz. */
.vgl thead th { hyphens: auto; }
.vgl thead td, .vgl thead th { border-top: 0; padding-bottom: 12px; }
.vgl thead th { font-weight: var(--fw-semibold); color: var(--text-2); font-size: var(--fs-body); }
.vgl tbody th { font-weight: var(--fw-semibold); color: var(--text-1); width: 22%; }
.vgl tbody td { color: var(--text-2); }

/* Die eigene Spalte: Flaeche, Akzenttinte in der Kopfzeile, Volltinte im
   Inhalt. --accent-strong auf --accent-dim misst 6,11:1 hell und 6,61:1
   dunkel, --text-1 auf --accent-dim 12,75:1 und 10,24:1. */
.vgl .vgl-uns { background: var(--accent-dim); }
.vgl thead .vgl-uns { color: var(--accent-strong); border-radius: var(--r) var(--r) 0 0; }
.vgl tbody .vgl-uns { color: var(--text-1); border-top-color: var(--accent-line); }
.vgl tbody tr:last-child .vgl-uns { border-radius: 0 0 var(--r) var(--r); }

/* Drei Spalten auf 375px. Die Beschriftungsspalte braucht so viel Platz, dass
   "Nachfassen" in eine Zeile passt - bei 24% brach es zu "Nachfas-sen". */
@media (max-width: 620px) {
  .vgl th, .vgl td { padding: 12px 10px; font-size: var(--fs-micro); }
  .vgl thead th { font-size: var(--fs-sm); }
  .vgl tbody th { width: 29%; }
}

/* ── Pipeline-Nachbau ────────────────────────────────────────────────────── */
.pipe-cols { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; align-items: start; }
.pipe-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.colhead {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  font-size: var(--fs-micro); font-weight: var(--fw-semibold); color: var(--text-2);
  letter-spacing: var(--ls-caps); text-transform: uppercase; padding: 0 2px 2px;
}
.colhead .n { font-family: var(--font-mono); font-weight: var(--fw-regular); color: var(--text-3); }
.mini {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 10px; font-size: var(--fs-sm); box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
}
.mini strong { display: block; font-size: var(--fs-sm); line-height: 1.3; overflow-wrap: anywhere; }
.mini .co { display: block; color: var(--text-3); font-size: var(--fs-micro); overflow-wrap: anywhere; }

/* ══ Umschaltbare Produktvorschau ═══════════════════════════════════════════
   Fuenf Nachbauten der Anwendungsoberflaeche in einem Fensterrahmen. Die Chips
   sind echte Tabs (role="tab"), also Bedienelemente: ihre Grenze traegt
   --control-off (3:1, WCAG 1.4.11) statt der reinen Trennlinie --line.
   Die Buehne hat eine feste Hoehe, damit der Wechsel die Seite nicht springen
   laesst; was nicht hineinpasst, scrollt INNERHALB des Rahmens - nie das
   Dokument. Alle Flaechen kommen aus Tokens, damit beide Themes mitdrehen.
   ========================================================================== */
.shot-tabs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 24px 0; }
.chip-tab[role="tab"] {
  min-height: 44px; border-color: var(--control-off); cursor: pointer;
  font-family: var(--font-sans); font-size: var(--fs-sm);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease);
}
.chip-tab[role="tab"]:hover { color: var(--text-1); border-color: var(--accent); }
.chip-tab[role="tab"][aria-selected="true"] {
  background: var(--accent-dim); color: var(--accent-strong);
  border-color: var(--accent); font-weight: var(--fw-semibold);
}
.chip-tab[role="tab"]:focus-visible { outline: none; box-shadow: var(--focus-ring-on-surface); }

.shot-frame { padding: 14px; text-align: left; box-shadow: var(--shadow-pop); }
.shot-bar { display: flex; gap: 6px; align-items: center; padding: 2px 6px 12px; }
.shot-dot { width: 10px; height: 10px; border-radius: var(--r-pill); background: var(--line-strong); flex: none; }
.shot-url {
  font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-3);
  margin-left: 8px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Feste Buehnenhoehe: der Wechsel darf die Seite nicht springen lassen. Sie ist
   so gewaehlt, dass die dichteste Ansicht (CV-Studio) auf breiten Schirmen
   hineinpasst; schmalere Schirme scrollen INNERHALB des Rahmens. */
.shot-stage { height: 32rem; background: var(--surface-2); border-radius: var(--r); }
.shot-panel { height: 100%; overflow: auto; padding: 14px; box-sizing: border-box; }
.shot-panel:focus-visible { outline: none; box-shadow: var(--focus-ring-on-surface); border-radius: var(--r); }

/* Ein kurzes Einblenden beim Wechsel - nur opacity/transform, nie `infinite`.
   Die Klasse setzt das Skript beim Umschalten, nicht beim ersten Laden. */
@keyframes shot-enter { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
/* Bewusst ohne `both`: der Ruhezustand des Panels ist sichtbar. Bliebe die
   Animation haengen (gedrosselter Hintergrund-Tab), stuende sonst ein leeres
   Panel da - Motion darf Inhalt nie erst freischalten. */
.shot-panel.is-enter { animation: shot-enter var(--dur-fast) var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .shot-panel.is-enter { animation: none; }
  .chip-tab[role="tab"] { transition: none; }
}

/* ── Bausteine der Nachbauten ────────────────────────────────────────────── */
.sh-stack { display: flex; flex-direction: column; gap: 12px; }
.sh-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sh-title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-display); color: var(--text-1); }
.sh-mono { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-3); }
.sh-caps { letter-spacing: var(--ls-caps); text-transform: uppercase; }
.sh-note { margin: 0; font-size: var(--fs-micro); color: var(--text-2); line-height: 1.5; }

.sh-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-card); min-width: 0;
}
.sh-card-t {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 14px; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-1);
}
.sh-pad { padding: 12px 14px; }
.sh-row { padding: 9px 14px; border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.sh-row.hd {
  font-size: var(--fs-micro); font-weight: var(--fw-semibold); color: var(--text-2);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
}
.sh-row.grid { display: grid; gap: 10px; align-items: center; }
.sh-row.flex { display: flex; gap: 10px; align-items: center; }

.sh-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.sh-kpi {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-card); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.sh-kpi .lbl { font-size: var(--fs-micro); color: var(--text-2); }
.sh-kpi .val { font-family: var(--font-mono); font-size: var(--fs-h3); font-weight: var(--fw-semibold); color: var(--text-1); line-height: 1.2; }
.sh-kpi .unit, .sh-kpi .up { font-size: var(--fs-micro); color: var(--text-2); }
.sh-kpi .up { color: var(--ok); font-family: var(--font-mono); margin-left: auto; }
.sh-kpi .vrow { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
/* Die Akzentkachel traegt --on-accent - ungedaempft. Ein abgesenktes Label
   waere genau der Kontrastverlust, den das Designsystem ausdruecklich verbietet. */
.sh-kpi.accent { background: var(--accent); border-color: var(--accent); }
.sh-kpi.accent .lbl, .sh-kpi.accent .val, .sh-kpi.accent .unit { color: var(--on-accent); }
.sh-kpi.accent .tag {
  margin-left: auto; background: var(--surface); color: var(--accent-strong);
  border-radius: var(--r-sm); padding: 2px 8px; font-size: var(--fs-micro); font-weight: var(--fw-medium);
}

/* Statusmarker: Flaeche und Tinte immer als Paar aus dem Designsystem. */
.mchip.st-neu { background: var(--surface-3); color: var(--text-2); border-color: var(--surface-3); }
.mchip.st-analysiert { background: var(--info-dim); color: var(--info); border-color: var(--info-dim); }
.mchip.st-beworben { background: var(--accent-dim); color: var(--accent-strong); border-color: var(--accent-line); }
.mchip.st-rueckmeldung { background: var(--warn-dim); color: var(--warn); border-color: var(--warn-dim); }
.mchip.st-interview { background: var(--brand-warm-dim); color: var(--brand-warm-deep); border-color: var(--brand-warm-dim); }
.mchip.st-abschluss { background: var(--ok-dim); color: var(--ok); border-color: var(--ok-dim); }
.mchip.st-absage { background: var(--danger-dim); color: var(--danger); border-color: var(--danger-dim); }

.sh-score {
  display: inline-flex; align-items: baseline; gap: 2px; padding: 2px 8px; border-radius: var(--r-sm);
  font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: var(--fw-semibold); white-space: nowrap;
}
.sh-score .of { font-size: var(--fs-micro); color: var(--text-2); }
.sh-score.s-hi { background: var(--ok-dim); color: var(--ok); }
.sh-score.s-mid { background: var(--accent-dim); color: var(--accent-strong); }
.sh-score.s-low { background: var(--warn-dim); color: var(--warn); }

.sh-tag { font-size: var(--fs-micro); color: var(--text-2); background: var(--surface-2); border-radius: var(--r-sm); padding: 3px 9px; white-space: nowrap; }
.sh-btn {
  display: inline-flex; align-items: center; border-radius: var(--r-ctl); padding: 9px 14px;
  font-size: var(--fs-sm); font-weight: var(--fw-medium); background: var(--accent); color: var(--on-accent); white-space: nowrap;
}
.sh-btn.sec { background: var(--surface); color: var(--accent-strong); border: 1px solid var(--control-off); }
.sh-field {
  display: block; border: 1px solid var(--control-off); border-radius: var(--r-ctl);
  background: var(--surface); color: var(--text-1); padding: 9px 12px; font-size: var(--fs-sm);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sh-lbl { display: block; font-size: var(--fs-micro); color: var(--text-2); margin-bottom: 4px; }

.sh-bar { display: block; height: 8px; border-radius: var(--r-sm); background: var(--surface-2); overflow: hidden; }
.sh-bar > span { display: block; height: 100%; border-radius: var(--r-sm); background: var(--accent); }
.sh-bar > span.warm { background: var(--brand-warm); }
.sh-bar > span.ok { background: var(--ok); }

.sh-chart { display: flex; align-items: flex-end; gap: 6px; height: 96px; }
.sh-chart .col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 5px; height: 100%; min-width: 0; }
.sh-chart .bar { width: 100%; background: var(--accent); border-radius: var(--r-sm) var(--r-sm) 0 0; }
.sh-chart .bar.c3 { background: var(--chart-3); }
.sh-chart .x { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-3); }

.sh-funnel { display: flex; height: 8px; border-radius: var(--r-sm); overflow: hidden; }
.sh-funnel > span { display: block; }
.sh-key { width: 9px; height: 9px; border-radius: var(--r-sm); flex: none; }
.f1 { background: var(--chart-1); } .f2 { background: var(--chart-2); } .f3 { background: var(--chart-3); }
.f4 { background: var(--chart-4); } .f5 { background: var(--chart-5); } .f6 { background: var(--chart-6); }

/* CV-Bewertungspunkte bleiben echte Kreise - dort ist die Rundung Bedeutung. */
.sh-dots { display: inline-flex; gap: 3px; flex: none; }
.sh-dots i { width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--line); }
.sh-dots i.f { background: var(--text-1); }

.sh-paper {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-pop); padding: 16px 20px; min-width: 0;
}
.sh-paper-name {
  display: block; text-align: center; font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--fs-h3); letter-spacing: .22em; text-transform: uppercase; color: var(--text-1);
}
.sh-paper-role { display: block; text-align: center; font-size: var(--fs-micro); font-style: italic; color: var(--text-2); margin-top: 2px; }
.sh-paper-h {
  display: block; font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-1);
  border-bottom: 1px solid var(--line-strong); padding-bottom: 5px; margin-bottom: 7px;
}
.sh-paper-b { font-size: var(--fs-micro); line-height: 1.55; color: var(--text-2); display: flex; flex-direction: column; gap: 5px; }
.sh-paper-b .kv { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sh-paper-b .job { color: var(--text-1); font-weight: var(--fw-semibold); letter-spacing: .04em; }

/* ── Raster der einzelnen Ansichten ──────────────────────────────────────── */
.sh-2col { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.sh-cv { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 14px; align-items: start; }
.sh-cards2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; align-items: start; }
.sh-dash-row { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.5fr) 56px 112px 34px; }
.sh-week { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: center; }
.sh-week .d { display: block; text-align: center; font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-1); line-height: 1.1; }
.sh-week .wd { display: block; text-align: center; font-size: var(--fs-micro); color: var(--text-3); letter-spacing: var(--ls-caps); text-transform: uppercase; }
.sh-ev { display: inline-flex; font-size: var(--fs-micro); border-radius: var(--r-sm); padding: 3px 8px; }
.sh-ev.danger { background: var(--danger-dim); color: var(--danger); }
.sh-ev.warn { background: var(--warn-dim); color: var(--warn); }
.sh-ev.accent { background: var(--accent-dim); color: var(--accent-strong); }
.sh-search { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.sh-search .fld { flex: 1 1 240px; min-width: 0; max-width: 420px; }
.sh-job { display: flex; gap: 12px; align-items: center; }
.sh-job .txt { flex: 1; min-width: 0; }
.sh-job .role { display: block; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-1); overflow-wrap: anywhere; }
.sh-job .meta { display: block; font-size: var(--fs-micro); color: var(--text-2); overflow-wrap: anywhere; }
.sh-src { font-family: var(--font-mono); font-size: var(--fs-micro); width: 66px; flex: none; }
.sh-src.ba { color: var(--info); }
.sh-src.adzuna { color: var(--brand-warm-deep); }
.sh-src.arbeitnow { color: var(--accent-strong); }
.sh-danger { color: var(--danger); }
.sh-warn { color: var(--warn); }
.sh-ok { color: var(--ok); }
.sh-muted { color: var(--text-3); }
.sh-firm { color: var(--accent-strong); font-weight: var(--fw-medium); min-width: 0; overflow-wrap: anywhere; }
.sh-txt2 { color: var(--text-2); min-width: 0; overflow-wrap: anywhere; }
.sh-right { text-align: right; }

/* ── Warteliste ──────────────────────────────────────────────────────────── */
.wl-grid { display: grid; gap: 6px; }
.wl-grid label { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-1); }
.wl-grid label + input { margin-bottom: 10px; }
.lp-waitlist .ds-field {
  width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 14px;
  border: 1px solid var(--control-off); border-radius: var(--r-ctl);
  background: var(--surface); color: var(--text-1);
  font-family: var(--font-sans); font-size: var(--fs-body); outline: none;
}
.wl-consent {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start;
  min-height: 44px; padding: 6px 0; margin-top: 4px;
  font-size: var(--fs-sm); line-height: 1.6; color: var(--text-2);
}
.wl-consent input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--accent); }
.wl-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
/* Rueckmeldung traegt Farbe UND Text - Farbe allein ist kein Signal. */
.wl-status:empty { display: none; }
.wl-status {
  margin: 10px 0 0; padding: 10px 12px; border-radius: var(--r); font-size: var(--fs-sm);
  border: 1px solid var(--line); background: var(--surface-2); color: var(--text-1);
}
.wl-status[data-art="ok"] { border-color: var(--ok); background: var(--ok-dim); color: var(--text-1); }
.wl-status[data-art="fehler"] { border-color: var(--danger); background: var(--danger-dim); color: var(--text-1); }

/* ── Chip (Segment- und Kategorie-Marker) ─────────────────────────────────── */
.chip-tab {
  display: inline-flex; align-items: center; height: 36px; padding: 0 16px;
  border-radius: var(--r-ctl); font-size: var(--fs-sm); font-weight: var(--fw-medium);
  background: var(--surface); color: var(--text-2); border: 1px solid var(--line); white-space: nowrap;
}
.chip-tab.on { background: var(--accent-dim); color: var(--accent-strong); border-color: var(--accent-line); }

/* ── Mono-Marker (Beispieldaten, Zustaende) ───────────────────────────────── */
.mchip {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px;
  border-radius: var(--r-sm); font-size: var(--fs-micro); font-weight: var(--fw-medium);
  white-space: nowrap; border: 1px solid var(--line); color: var(--text-2);
}
.mchip.on { background: var(--accent-dim); color: var(--accent-strong); border-color: var(--accent-line); }

/* ── Feature-Karten ──────────────────────────────────────────────────────── */
/* Sechs eingefaerbte Leitkarten, danach die uebrigen als ruhige Flaechen.
   Kein gleichfoermiges Kartenraster: die Farbtraeger sind die Ausnahme. */
.fcard {
  border-radius: var(--r); padding: 24px; display: flex; flex-direction: column; gap: 8px;
  min-height: 168px; justify-content: flex-end;
}
.fcard .big { font-family: var(--font-display); font-size: 24px; font-weight: var(--fw-display); line-height: 1.12; }
.fcard p { margin: 0; font-size: var(--fs-sm); line-height: 1.55; }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fgrid > :nth-child(even) { margin-top: 28px; }

.plaincard {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-card); padding: 24px; display: grid; gap: 8px; align-content: start;
}
.plaincard h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); font-family: var(--font-sans); margin: 0; }
.plaincard p { margin: 0; color: var(--text-2); font-size: var(--fs-sm); line-height: 1.6; }

/* ── Schritte ────────────────────────────────────────────────────────────── */
.step-num { font-family: var(--font-mono); font-size: 18px; color: var(--text-3); }
.step-head { font-size: var(--fs-h3); font-weight: var(--fw-semibold); font-family: var(--font-sans); color: var(--text-1); margin: 12px 0 8px; }

/* ── Argumentliste "Warum" ───────────────────────────────────────────────── */
.arg-item { padding: 18px 0; border-bottom: 1px solid var(--line); }
.arg-item:last-child { border-bottom: none; }
.arg-item strong { color: var(--text-1); font-weight: var(--fw-semibold); }
.arg-item span { color: var(--text-2); }

/* ── Vertrauenszeilen ────────────────────────────────────────────────────── */
.trust-row {
  display: grid; grid-template-columns: 22px 1fr; gap: 14px; align-items: start;
  padding: 16px 0; border-bottom: 1px solid var(--line);
}
.trust-row:last-child { border-bottom: none; }
.trust-row svg { width: 22px; height: 22px; color: var(--accent); margin-top: 2px; }
.trust-row p { margin: 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--text-2); }
.trust-row strong { color: var(--text-1); font-weight: var(--fw-semibold); }

/* Ionicons: die Strichstaerke kommt vom Aufrufer, nicht aus der Datei. */
.ion { stroke-width: 32; }

/* ── Hinweisfeld (Reifegrad) ─────────────────────────────────────────────── */
/* Textfarbe ist --text-1, NICHT --on-warm. --on-warm ist die dunkle Tinte fuer
   die gesaettigte Flaeche --brand-warm; auf der gedaempften Flaeche liegt es im
   Dark Theme (--brand-warm-dim #3A2812) dunkel auf dunkel. --warn-dim ist die
   theme-gepaarte Hinweisflaeche und traegt --text-1 in beiden Themes. */
.note-warm {
  border: 1px solid var(--brand-warm); background: var(--warn-dim); color: var(--text-1);
  border-radius: var(--r); padding: 14px 16px; font-size: var(--fs-sm); line-height: 1.6; margin: 16px 0 0;
}

/* ── Produktvorschau ─────────────────────────────────────────────────────── */
.shot-cap {
  display: flex; justify-content: space-between; gap: 12px; padding: 10px 16px;
  border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: var(--fs-micro);
  text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--text-3);
}

/* ── Theme-Umschalter ────────────────────────────────────────────────────── */
/* Der Knopf ist geometrisch rund - das ist der dokumentierte Ausnahmefall
   fuer --r-pill, keine Stilentscheidung. Die Spur bleibt eckig. */
.lp-theme-toggle {
  width: 46px; height: 26px; border-radius: var(--r-ctl); border: 1px solid var(--control-off);
  background: var(--surface); position: relative; cursor: pointer; padding: 0; flex-shrink: 0;
  transition: border-color var(--dur-fast) var(--ease);
}
.lp-theme-toggle:hover { border-color: var(--accent); }
.lp-theme-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring-on-surface); }
.lp-theme-toggle .lp-knob {
  position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: var(--r-pill);
  background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-knob); transition: transform var(--dur-fast) var(--ease);
}
[data-theme="dark"] .lp-theme-toggle .lp-knob { transform: translateX(20px); }
.lp-theme-toggle .lp-knob svg { width: 12px; height: 12px; stroke-width: 44; }
.lp-theme-toggle .ico-moon { display: none; }
[data-theme="dark"] .lp-theme-toggle .ico-moon { display: block; }
[data-theme="dark"] .lp-theme-toggle .ico-sun { display: none; }

/* ── Umbrueche ───────────────────────────────────────────────────────────── */
/* lp.css blendet die Navigation unter 1120px aus. Dann haengt die Trennlinie
   der Aktionen im Nichts - sie gehoert zur Navigation, nicht zum Rand. */
@media (max-width: 1120px) {
  .lp-act { padding-left: 0; border-left: none; }
}
/* Sechs Pipeline-Spalten passen nur auf breiten Schirmen nebeneinander.
   Sie brechen um, statt das Dokument zu ueberlaufen. */
@media (max-width: 900px) {
  .pipe-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .sh-2col { grid-template-columns: minmax(0, 1fr); }
  .sh-cv { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .pipe-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Zwei Spalten der Bewerbungstabelle tragen im Schmalen nichts bei, was die
     anderen drei nicht schon sagen - sie fallen weg statt zu quetschen. */
  .sh-dash-row { grid-template-columns: minmax(0, 1fr) 104px 34px; }
  .sh-dash-row .c-pos, .sh-dash-row .c-frist { display: none; }
  .sh-job .sh-tag, .sh-job .sh-btn { display: none; }
}
@media (max-width: 420px) {
  .pipe-cols { grid-template-columns: minmax(0, 1fr); }
  .shot-stage { height: 24rem; }
}
@media (max-width: 980px) {
  .g3, .g2, .fgrid, .g4 { grid-template-columns: 1fr !important; }
  .fgrid > :nth-child(even) { margin-top: 0; }
}
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr !important; gap: 24px !important; }
  .split > div:first-child { position: static !important; }
}
@media (max-width: 560px) {
  .lp-theme-toggle { display: none; }
}