/* ================================================================
   staffect/src/aueg-rechner.css
   AÜG-Fristenrechner — Eingabe + Zeitstrahl
   Baut auf den Bestands-Tokens aus src/style.css. Nur ein neuer Token.
   ================================================================ */

:root {
  /* 🔴 Der EINE neue Token — und warum er nötig ist:
     Gemessen (WCAG-Kontrast gegen den Seitenhintergrund):
       Teal #0B7285 auf Light #F8F9FB = 5,30:1 ✅ | auf Dark #0d1117 = 3,39:1 ❌
       Sky  #4B88A2 auf Light #F8F9FB = 3,73:1 ❌ | auf Dark #0d1117 = 4,81:1 ✅
     Teal und Sky sind komplementär, nicht austauschbar. Nur der Wechsel je
     Modus hält ≥4,5:1 in BEIDEN — und trägt damit auch kleinen Text.
     Zusätzlich: --hs-navy wird im Dark Mode auf #4B88A2 überschrieben und ist
     dort identisch mit --hs-sky. Eine Bedeutung, die auf "Navy vs. Sky" beruht,
     wäre nachts unsichtbar. Deshalb trägt hier keine Station diese Achse. */
  --tl-accent: var(--hs-teal);
  --tl-ease-out: cubic-bezier(0.16, 1, 0.3, 1);   /* = Hauskurve aus .animate-fade-up */
}
@media (prefers-color-scheme: dark) {
  :root { --tl-accent: var(--hs-sky); }
}

/* ── Eingabe-Karte ────────────────────────────────────────────── */
.rk-card {
  background: var(--hs-surface);
  border: 1px solid var(--hs-border);
  border-radius: 1rem;
  padding: 1.5rem;
}
@media (min-width: 768px) { .rk-card { padding: 2rem; } }

.rk-grid { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .rk-grid { grid-template-columns: repeat(2, 1fr); } }

.rk-feld { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; }
.rk-feld--voll { grid-column: 1 / -1; }

/* 🔴 hidden MUSS wirken. Das HTML-[hidden]-Attribut setzt display:none, aber
   Tailwind-Preflight (`[hidden]:where(...) { display:none }`) und unser
   `.rk-feld { display:flex }` haben dieselbe Spezifität (0,1,0) — und .rk-feld
   lädt später, gewinnt also die Kaskade. Ergebnis am Live-Objekt gemessen:
   ein als hidden markiertes Feld blieb SICHTBAR (offsetParent !== null), leer
   und aktiv. Genau der von Tobias gefundene Defekt. Wir überstimmen die
   Kaskade robust — NICHT das Tailwind-Preflight patchen. Nach dem Fix gilt
   offsetParent === null, wenn das Feld hidden ist. */
.rk-feld[hidden] { display: none !important; }

.rk-label {
  font-size: 0.875rem; font-weight: 600; color: var(--hs-text);
  display: flex; align-items: center; gap: 0.5rem;
}
.rk-hilfe { font-size: 0.8125rem; color: var(--hs-text-muted); line-height: 1.5; }

/* ── "Gilt für alle Entgeltgruppen" — ruhiger Hinweis, kein Warn-Styling ── */
.rk-alle-egs {
  border: 1px solid var(--hs-border); border-radius: 0.625rem;
  padding: 0.875rem 1rem;
  background: color-mix(in srgb, var(--tl-accent) 5%, var(--hs-surface));
}
.rk-alle-egs-text { font-size: 0.875rem; line-height: 1.55; color: var(--hs-text-muted); margin: 0; }
.rk-alle-egs-text strong { color: var(--hs-text); }

/* ── ERTV-Eingruppierungs-Hilfe (aufklappbar) ──────────────────── */
.rk-ertv {
  border: 1px solid var(--hs-border); border-radius: 0.625rem;
  background: var(--hs-bg); overflow: hidden;
}
.rk-ertv > summary {
  cursor: pointer; list-style: none;
  padding: 0.625rem 0.75rem; font-size: 0.8125rem; font-weight: 600;
  color: var(--tl-accent);
  display: flex; align-items: center; gap: 0.5rem;
  min-height: 44px;   /* Daumen-Zone */
}
.rk-ertv > summary::-webkit-details-marker { display: none; }
.rk-ertv > summary::before {
  content: "›"; font-size: 1.1rem; line-height: 1;
  transition: transform 160ms var(--tl-ease-out);
}
.rk-ertv[open] > summary::before { transform: rotate(90deg); }
.rk-ertv > summary:focus-visible {
  outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--tl-accent) 22%, transparent);
}
.rk-ertv-body { padding: 0 0.875rem 0.875rem; }
.rk-ertv-kern {
  font-size: 0.8125rem; line-height: 1.6; color: var(--hs-text);
  padding: 0.75rem; margin: 0 0 0.75rem;
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--tl-accent) 8%, var(--hs-surface));
  border-left: 3px solid var(--tl-accent);
}
.rk-ertv-liste { margin: 0; font-size: 0.8125rem; line-height: 1.5; }
.rk-ertv-liste dt { font-weight: 600; color: var(--hs-text); margin-top: 0.5rem; }
.rk-ertv-liste dd { margin: 0.125rem 0 0; color: var(--hs-text-muted); }
.rk-ertv-quelle { font-size: 0.75rem; color: var(--hs-text-muted); margin: 0.75rem 0 0; }

@media (prefers-reduced-motion: reduce) {
  .rk-ertv > summary::before { transition: none; }
}

.rk-input, .rk-select {
  font-family: inherit; font-size: 0.9375rem; color: var(--hs-text);
  background: var(--hs-bg);
  border: 1px solid var(--hs-border); border-radius: 0.625rem;
  padding: 0.625rem 0.75rem; width: 100%;
  min-height: 44px;   /* Daumen-Zone: gemessen lag das Select bei 41px */
  transition: border-color 160ms var(--tl-ease-out), box-shadow 160ms var(--tl-ease-out);
}
.rk-input:focus-visible, .rk-select:focus-visible {
  outline: none; border-color: var(--tl-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tl-accent) 22%, transparent);
}
.rk-input[aria-invalid="true"] { border-color: #B42318; }
@media (prefers-color-scheme: dark) { .rk-input[aria-invalid="true"] { border-color: #F97066; } }

.rk-fehler { font-size: 0.8125rem; color: #B42318; font-weight: 500; }
@media (prefers-color-scheme: dark) { .rk-fehler { color: #F97066; } }

/* Radio-Gruppe */
.rk-optionen { display: flex; flex-direction: column; gap: 0.5rem; }
.rk-option {
  display: flex; align-items: flex-start; gap: 0.625rem;
  padding: 0.75rem; border: 1px solid var(--hs-border); border-radius: 0.625rem;
  cursor: pointer; background: var(--hs-bg);
  transition: border-color 160ms var(--tl-ease-out), background-color 160ms var(--tl-ease-out);
}
.rk-option:has(input:checked) {
  border-color: var(--tl-accent);
  background: color-mix(in srgb, var(--tl-accent) 7%, var(--hs-surface));
}
.rk-option:has(input:focus-visible) {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tl-accent) 22%, transparent);
}
.rk-option input { margin-top: 0.1875rem; accent-color: var(--tl-accent); flex-shrink: 0; }
.rk-option-text { font-size: 0.875rem; line-height: 1.45; min-width: 0; }
.rk-option-text b { font-weight: 600; color: var(--hs-text); display: block; }
.rk-option-text span { color: var(--hs-text-muted); font-size: 0.8125rem; }

/* Perspektiv-Umschalter */
.rk-switch {
  display: inline-flex; padding: 0.25rem; gap: 0.25rem;
  background: var(--hs-bg); border: 1px solid var(--hs-border); border-radius: 9999px;
}
.rk-switch button {
  font-family: inherit; font-size: 0.8125rem; font-weight: 600;
  padding: 0.5rem 1rem; border-radius: 9999px; border: none;
  background: transparent; color: var(--hs-text-muted); cursor: pointer;
  transition: color 140ms var(--tl-ease-out), background-color 140ms var(--tl-ease-out);
}
.rk-switch button[aria-pressed="true"] { background: var(--tl-accent); color: #fff; }
.rk-switch button:focus-visible {
  outline: 2px solid var(--tl-accent); outline-offset: 2px;
}

/* ── Zeitstrahl ───────────────────────────────────────────────── */
.tl-wrap { margin-top: 2rem; }

.tl-status {
  font-size: 0.8125rem; color: var(--hs-text-muted);
  margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem;
}

.tl {
  list-style: none; margin: 0; padding: 0;
  position: relative;
}

/* ── MOBIL: vertikal ──────────────────────────────────────────
   Auf 360px trägt die Zeit-Distanz der TEXT ("in 14 Monaten"), nicht der
   Pixelabstand. Ein proportional gestauchter Horizontalstrahl wäre hier
   unlesbar — Klarheit schlägt Proportion. */
.tl { padding-left: 1.75rem; }
.tl::before {
  content: ''; position: absolute; left: 0.3125rem; top: 0.5rem; bottom: 0.5rem;
  width: 2px; background: var(--hs-border);
  transform-origin: top; /* Draw-in läuft oben->unten = Zeit vergeht */
}
.tl-station { position: relative; padding-bottom: 1.75rem; }
.tl-station:last-child { padding-bottom: 0; }
.tl-station::before {
  content: ''; position: absolute; left: -1.75rem; top: 0.3125rem;
  width: 0.75rem; height: 0.75rem; border-radius: 9999px;
  background: var(--tl-accent);
  box-shadow: 0 0 0 4px var(--hs-bg);
}

/* Formen tragen die Bedeutung, Farbe verstärkt nur.
   Grund: im Dark Mode kollabieren Navy und Sky zur selben Farbe — eine rein
   farbkodierte Unterscheidung wäre dort weg. Und Farbe darf ohnehin nie
   alleinige Bedeutungsträgerin sein (a11y). */
.tl-station[data-typ="ep"]::before {          /* Equal Pay = Ring (hohl) */
  background: var(--hs-bg); border: 2px solid var(--tl-accent);
}
.tl-station[data-typ="ende"]::before {        /* Ende HÜD = stärkste Marke */
  background: var(--hs-text); width: 0.875rem; height: 0.875rem;
  left: -1.8125rem; top: 0.25rem;
}
.tl-station[data-typ="wieder"]::before {      /* Wiedereinsatz = hohl, gedämpft */
  background: var(--hs-bg); border: 2px solid var(--hs-text-muted);
}
/* Gestrichelter Achsenabschnitt = Unterbrechung. Die Form sagt es vor der Farbe. */
.tl-station[data-typ="wieder"]::after {
  content: ''; position: absolute; left: -1.4375rem; top: -1.75rem; height: 1.75rem;
  border-left: 2px dashed var(--hs-text-muted);
}

.tl-datum {
  font-size: 0.9375rem; font-weight: 600; color: var(--hs-text);
  font-variant-numeric: tabular-nums; display: block;
}
.tl-titel { font-size: 0.875rem; font-weight: 600; color: var(--tl-accent); display: block; margin-top: 0.125rem; }
.tl-station[data-typ="ende"] .tl-titel { color: var(--hs-text); }
.tl-erklaerung {
  margin-top: 1.5rem; display: grid; gap: 0.75rem;
}
@media (min-width: 768px) { .tl-erklaerung { grid-template-columns: repeat(2, 1fr); } }
/* Bewusst KEINE Cards und kein farbiger border-left als Akzent:
   Side-Stripe-Cards sind das erste, was man einem generierten Layout ansieht.
   Hier trägt eine Haarlinie oben + Typo-Hierarchie — ruhiger und ehrlicher. */
.tl-erk {
  padding-top: 0.75rem;
  border-top: 1px solid var(--hs-border);
}
.tl-erk h3 {
  font-size: 0.8125rem; font-weight: 700; color: var(--hs-text); margin: 0 0 0.25rem;
  font-variant-numeric: tabular-nums;
}
.tl-erk p { font-size: 0.8125rem; color: var(--hs-text-muted); line-height: 1.6; margin: 0; max-width: 62ch; }
.tl-zweit {
  font-size: 0.8125rem; color: var(--hs-text-muted);
  margin-top: 0.375rem; padding-left: 0.625rem;
  border-left: 2px solid var(--hs-border);
  font-variant-numeric: tabular-nums;
}
.tl-rel { font-size: 0.75rem; color: var(--hs-text-muted); font-weight: 500; }

/* ── DESKTOP: horizontal, Labels alternierend ─────────────────
   Alternierend, weil sich der effektive Mindestabstand dadurch halbiert —
   das löst Kollision. Die Proportion löst die Achse selbst: die Stationen
   liegen bei ~0 / 1,4 / 9 / 18 / 21 Monaten und drängen sich nicht.
   Deshalb KEIN Stauchungs-Bruch: er wäre hier Deko ohne Anlass. */
/* Sperrzeit: vom ersten unzulässigen Tag bis zum letzten Sperrtag.
   Gestrichelt = Unterbrechung; die Form trägt die Bedeutung, nicht die Farbe. */
.tl-sperre {
  position: absolute; pointer-events: none;
  border-color: var(--hs-text-muted);
}
/* 🔴 Auf Mobil NICHT anzeigen: dort stehen die Stationen im normalen Textfluss,
   die Sperr-Strecke wäre aber proportional positioniert — sie träfe die
   Stationen nur zufällig und liefe über die letzte hinaus. Die Unterbrechung
   trägt auf Mobil der gestrichelte Zuleiter an der Wiedereinsatz-Station
   (.tl-station[data-typ="wieder"]::after), der im Fluss sitzt und deshalb
   immer stimmt. Proportion gibt es nur dort, wo die Achse proportional IST. */
.tl-sperre { display: none; }

@media (min-width: 900px) {
  .tl-sperre {
    display: block;
    left: var(--sperr-von); width: var(--sperr-bis);
    top: 50%; height: 0;
    border-left: none; border-top: 2px dashed var(--hs-text-muted);
    transform: translateY(-50%);
  }

  .tl {
    padding: 0;
    /* Höhe gemessen, nicht geschätzt: das höchste Label (Equal Pay mit
       Zweitdatum) ist 164px hoch, plus 20px Abstand zur Achse = 184px je
       Seite. 24rem = 384px, Mitte bei 192px — passt mit Reserve. Zu wenig
       Höhe lässt die oberen Labels aus dem Container ragen und die
       Statuszeile überdecken. */
    height: 24rem;
    display: block;
  }
  .tl::before {
    left: 0; right: 0; top: 50%; bottom: auto;
    width: auto; height: 2px;
    transform-origin: left;
  }
  .tl-station {
    position: absolute; top: 50%; padding: 0;
    /* Position über transform, NICHT über left.
       transform-Transitions sind unterbrechbar und retargetbar: hält jemand
       den Datums-Spinner gedrückt, gleiten die Stationen durchgehend mit,
       statt bei jedem Tick neu anzusetzen. Mit `left` würde es zucken. */
    transform: translate(-50%, -50%);
    left: 0;
    margin-left: var(--pos);
    width: 13.5rem;
    transition: margin-left 180ms cubic-bezier(0.77, 0, 0.175, 1);
  }
  .tl-station::before {
    left: 50%; top: 50%; transform: translate(-50%, -50%);
  }
  .tl-station::after { display: none; }

  /* Labels abwechselnd oben/unten */
  .tl-station > .tl-inhalt {
    position: absolute; left: 50%; transform: translateX(-50%);
    width: 13.5rem; text-align: center;
  }
  .tl-station:nth-child(odd)  > .tl-inhalt { bottom: 1.25rem; }
  .tl-station:nth-child(even) > .tl-inhalt { top: 1.25rem; }
  .tl-zweit { border-left: none; padding-left: 0; border-top: 1px solid var(--hs-border); padding-top: 0.375rem; }

  /* Randstationen nicht aus dem Container schieben */
  .tl-station[data-rand="links"]  > .tl-inhalt { transform: none; left: 0; text-align: left; }
  .tl-station[data-rand="rechts"] > .tl-inhalt { transform: none; left: auto; right: 0; text-align: right; }
}

/* ── Motion ───────────────────────────────────────────────────
   Bewusst NICHT animiert:
   - Datums-/Zahlentext: kein Count-up. Es sind Rechtsfristen — Würde vor Effekt.
   - Scroll-Reveal: der Strahl ist Ergebnis einer Handlung, keine Scroll-Deko.
   - Neuberechnung: KEINE Entrance-Animation. Das Datum ist per Spinner schnell
     wiederholt änderbar; eine Entrance pro Änderung würde stroboskopieren.
     Es läuft nur die margin-left-Transition oben (unterbrechbar). */
.tl[data-erstlauf="ja"]::before { animation: tl-achse 320ms var(--tl-ease-out) both; }
.tl[data-erstlauf="ja"] .tl-station { animation: tl-station 220ms var(--tl-ease-out) both; }
@keyframes tl-achse   { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes tl-station { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (min-width: 900px) {
  @keyframes tl-achse { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  /* Desktop: die Station trägt bereits ein Positionierungs-transform.
     Eine transform-Keyframe würde es überschreiben und die Station an den
     Achsenanfang reißen — deshalb hier nur opacity. */
  @keyframes tl-station { from { opacity: 0; } to { opacity: 1; } }
}

@media (prefers-reduced-motion: reduce) {
  /* 🔴 style-base.css neutralisiert animation-duration/-iteration-count und
     transition-duration — aber NICHT animation-delay. Ohne die folgende Zeile
     würde der Stagger trotzdem laufen: Dauer 0,01ms, Delay voll => die
     Stationen ploppen einzeln über 420ms herein. Genau das, was die
     Reduced-Motion-Einstellung verhindern soll. */
  .tl-station { animation-delay: 0ms !important; }
}

/* ── Ergebnis-Blöcke ──────────────────────────────────────────── */
.rk-block {
  border: 1px solid var(--hs-border); border-radius: 1rem;
  padding: 1.25rem 1.5rem; background: var(--hs-surface);
}
.rk-block h3 { font-size: 1rem; font-weight: 700; color: var(--hs-text); margin: 0 0 0.5rem; }
.rk-block p  { font-size: 0.875rem; color: var(--hs-text-muted); line-height: 1.65; margin: 0 0 0.75rem; }
.rk-block p:last-child { margin-bottom: 0; }
.rk-block strong { color: var(--hs-text); font-weight: 600; }
.rk-block ul { margin: 0.5rem 0 0.75rem; padding-left: 1.125rem; }
.rk-block li { font-size: 0.875rem; color: var(--hs-text-muted); line-height: 1.6; margin-bottom: 0.375rem; }

/* Der Deckelungs-Block trägt Ergebnis-Gewicht, keine Fußnoten-Optik:
   Wer den Zuschlag sieht, muss die Deckelung mitsehen. */
.rk-block--betont {
  border-color: color-mix(in srgb, var(--tl-accent) 45%, var(--hs-border));
  background: color-mix(in srgb, var(--tl-accent) 5%, var(--hs-surface));
}

/* Normalfall-Zeile "keine Branchenzuschläge": ruhige Information.
   Kein gelber Kasten, kein Warn-Icon — es ist ein Ergebnis, kein Defekt. */
.rk-normalfall {
  font-size: 0.875rem; color: var(--hs-text-muted); line-height: 1.6;
  padding: 0.875rem 1rem; border-radius: 0.75rem;
  background: var(--hs-bg); border: 1px solid var(--hs-border);
}

/* Hinweis, der wirklich zählt (Vorbeschäftigung / fehlende Angabe) */
.rk-achtung {
  font-size: 0.875rem; line-height: 1.6; color: var(--hs-text);
  padding: 0.875rem 1rem; border-radius: 0.75rem;
  background: color-mix(in srgb, var(--tl-accent) 8%, var(--hs-surface));
  border: 1px solid color-mix(in srgb, var(--tl-accent) 40%, var(--hs-border));
}
.rk-achtung strong { font-weight: 700; }

/* Rechenweg — aufklappbar, weil Detail. Das ERGEBNIS steht immer offen. */
.rk-weg { border-top: 1px solid var(--hs-border); margin-top: 1rem; padding-top: 1rem; }
.rk-weg > summary {
  cursor: pointer; font-size: 0.8125rem; font-weight: 600; color: var(--tl-accent);
  list-style: none; display: inline-flex; align-items: center; gap: 0.375rem;
}
.rk-weg > summary::-webkit-details-marker { display: none; }
.rk-weg > summary::after {
  content: ''; width: 0.5rem; height: 0.5rem; flex-shrink: 0;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform 180ms var(--tl-ease-out);
}
.rk-weg[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
.rk-weg > summary:focus-visible { outline: 2px solid var(--tl-accent); outline-offset: 3px; border-radius: 0.25rem; }
.rk-weg-inhalt { margin-top: 0.875rem; }
.rk-weg-zeile {
  display: grid; grid-template-columns: 1fr auto; gap: 0.75rem;
  padding: 0.5rem 0; border-bottom: 1px dashed var(--hs-border);
  font-size: 0.8125rem; align-items: baseline;
}
.rk-weg-zeile:last-child { border-bottom: none; }
.rk-weg-zeile > span:first-child { color: var(--hs-text-muted); }
.rk-weg-zeile > span:last-child { color: var(--hs-text); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rk-weg-norm { font-size: 0.75rem; color: var(--hs-text-muted); display: block; margin-top: 0.125rem; }

/* Disclaimer — direkt unter dem Rechner, nicht in der Fußzeile. */
.rk-disclaimer {
  border: 1px solid var(--hs-border); border-radius: 1rem;
  padding: 1.25rem 1.5rem; background: var(--hs-bg);
}
.rk-disclaimer h3 { font-size: 0.9375rem; font-weight: 700; color: var(--hs-text); margin: 0 0 0.625rem; }
.rk-disclaimer p, .rk-disclaimer li { font-size: 0.8125rem; color: var(--hs-text-muted); line-height: 1.6; }
.rk-disclaimer p { margin: 0 0 0.625rem; }
.rk-disclaimer ul { margin: 0 0 0.625rem; padding-left: 1.125rem; }
.rk-disclaimer li { margin-bottom: 0.25rem; }
.rk-disclaimer strong { color: var(--hs-text); font-weight: 600; }
.rk-stand { font-size: 0.75rem; color: var(--hs-text-muted); margin-top: 0.75rem; }

/* FAQ */
.rk-faq { border-bottom: 1px solid var(--hs-border); }
.rk-faq > summary {
  cursor: pointer; padding: 1rem 0; font-size: 0.9375rem; font-weight: 600;
  color: var(--hs-text); list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.rk-faq > summary::-webkit-details-marker { display: none; }
.rk-faq > summary::after {
  content: '+'; font-size: 1.25rem; font-weight: 400; color: var(--tl-accent); flex-shrink: 0;
  transition: transform 180ms var(--tl-ease-out);
}
.rk-faq[open] > summary::after { transform: rotate(45deg); }
.rk-faq > summary:focus-visible { outline: 2px solid var(--tl-accent); outline-offset: 2px; border-radius: 0.25rem; }
.rk-faq-a { padding: 0 0 1rem; font-size: 0.875rem; color: var(--hs-text-muted); line-height: 1.65; max-width: 68ch; }

.rk-nur-screenreader {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── Fokus für Links ──────────────────────────────────────────
   Gemessen: der Bestand hat für Links/Buttons KEINE :focus-visible-Regel
   (in shared/style-base.css steht als einziges .form-input:focus). Für einen
   Tastatur-Nutzer ist ein unsichtbarer Fokus dasselbe wie kein Fokus.
   Diese Datei wird nur auf der Rechner-Seite geladen — die Regel wirkt also
   bewusst nur hier. Die site-weite Lücke gehört ins Design-System
   (shared/style-base.css) und ist ein eigener Vorgang: shared/ anzufassen
   würde beide Marken auf einmal ändern, und das gehört nicht in diesen PR. */
main a:focus-visible {
  outline: 2px solid var(--tl-accent);
  outline-offset: 3px;
  border-radius: 0.25rem;
}

/* ═══════════════════════════════════════════════════════════════════
   DIE TREPPE — Zuschlagsstufen mit Deckel

   🔴 Gestaltungs-Grundsatz, aus dem sich hier alles ableitet:
   Der Prozentsatz und sein Deckel müssen im SELBEN Blick liegen.
   Deshalb ist der Deckel keine Fussnote und kein <details>, sondern
   eine Linie IN der Grafik plus ein Text, der immer offen darunter
   steht. Wer "+65 %" liest, soll im selben Moment sehen, wo Schluss ist.

   Warum eine Treppe und keine Cards: die Stufen sind eine Sequenz mit
   Hoehe — genau das, was eine Treppe zeigt und ein Card-Grid vernichtet.
   Das Bild traegt bis in die Sprache ("Treppe zu einem Podest").
   ═══════════════════════════════════════════════════════════════════ */
.tr-wrap { border-top: 1px solid var(--hs-border); padding-top: 1.5rem; }
.tr-h { font-size: 1.0625rem; font-weight: 700; color: var(--hs-text); margin: 0 0 0.25rem; }
.tr-sub { font-size: 0.8125rem; color: var(--hs-text-muted); margin: 0 0 1.25rem; }

/* Die Buehne traegt die Saeulen und die Deckel-Linie im selben
   Koordinatensystem. Beide rechnen in "% des Tarifentgelts" — nur
   deshalb laesst sich der Deckel ueberhaupt einzeichnen. */
.tr-buehne { position: relative; padding: 2.25rem 0 0; }
.tr-treppe { display: flex; align-items: flex-end; gap: 0.375rem; height: 13rem; }

.tr-stufe { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.tr-saeulen { position: relative; height: 13rem; display: flex; align-items: flex-end; }

/* Was ankommt — voll, in Markenfarbe. */
.tr-ist {
  position: absolute; inset-inline: 0; bottom: 0; height: var(--ist);
  background: var(--tl-accent);
  border-radius: 0.25rem 0.25rem 0 0;
  transition: height 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Was der Tarif verspricht, wenn der Deckel kappt — als Umriss darueber.
   🔴 Der Unterschied soll SICHTBAR sein, nicht nur lesbar: das ist der
   ganze Zweck der Grafik. */
.tr-nominal {
  position: absolute; inset-inline: 0; bottom: 0; height: var(--nominal);
  border: 1px dashed color-mix(in srgb, var(--hs-text-muted) 60%, transparent);
  border-bottom: 0;
  border-radius: 0.25rem 0.25rem 0 0;
  background: repeating-linear-gradient(135deg,
    transparent 0 5px,
    color-mix(in srgb, var(--hs-text-muted) 12%, transparent) 5px 6px);
}
.tr-kopf {
  position: absolute; inset-inline: 0; bottom: var(--ist);
  display: flex; flex-direction: column; align-items: center; gap: 0.0625rem;
  padding-bottom: 0.25rem; pointer-events: none;
}
.tr-proz { font-size: 0.8125rem; font-weight: 700; color: var(--hs-text); font-variant-numeric: tabular-nums; }
.tr-proz--klein { font-size: 0.6875rem; font-weight: 500; color: var(--hs-text-muted); }
.tr-eur { font-size: 0.8125rem; font-weight: 700; color: var(--hs-text); font-variant-numeric: tabular-nums; }

/* Zweite Auspraegung — nur KS (unter Tage). Nie unterschlagen, aber auch
   nicht als eigene Saeule: es ist derselbe Zeitpunkt, nur eine andere
   Einsatzart. Deshalb eine Marke auf derselben Achse. */
.tr-zweitwert {
  position: absolute; inset-inline: 0; bottom: var(--h);
  border-top: 2px dotted var(--tl-accent);
  display: flex; justify-content: center;
}
.tr-zweitwert span {
  font-size: 0.625rem; font-weight: 600; color: var(--tl-accent);
  background: var(--hs-surface); padding: 0 0.25rem; transform: translateY(-0.75rem);
  white-space: nowrap;
}
.tr-stufe { position: relative; }

.tr-fuss {
  display: flex; flex-direction: column; align-items: center; gap: 0.0625rem;
  padding-top: 0.5rem; border-top: 1px solid var(--hs-border); margin-top: 0.375rem;
  text-align: center;
}
.tr-fuss time { font-size: 0.6875rem; font-weight: 600; color: var(--hs-text); font-variant-numeric: tabular-nums; }
.tr-wann { font-size: 0.625rem; color: var(--hs-text-muted); line-height: 1.3; }
/* 🔴 "kein Zuwachs" ist die wichtigste Beschriftung der ganzen Seite.
   Sie sagt einem Menschen, dass eine Stufe, auf die er sich freut, ihm
   nichts bringt. Sie darf nicht dezent sein. */
.tr-null {
  font-size: 0.625rem; font-weight: 700; color: var(--hs-text);
  background: color-mix(in srgb, var(--hs-text-muted) 18%, var(--hs-surface));
  border-radius: 9999px; padding: 0.0625rem 0.375rem; margin-top: 0.125rem;
  white-space: nowrap;
}
.tr-stufe[data-gedeckelt="ja"] .tr-ist { background: color-mix(in srgb, var(--tl-accent) 62%, var(--hs-bg)); }

/* Der Deckel. */
.tr-deckel { position: absolute; inset-inline: 0; pointer-events: none; }
/* 🔴 --bis begrenzt die Linie auf die Stufen, fuer die der Deckel GILT.
   Nach dem 15. vollendeten Monat entfaellt er — dort bricht die Treppe
   bewusst durch, und die Linie hoert vorher auf. */
.tr-deckel--fest {
  bottom: var(--h);
  inset-inline: 0 auto; width: var(--bis, 100%);
  border-top: 2px solid var(--hs-text);
  display: flex; justify-content: flex-end;
}
/* Der Auslauf zeigt, dass die Grenze hier endet und nicht einfach abreisst. */
.tr-deckel--fest::after {
  content: ''; position: absolute; left: 100%; top: -2px; width: 2.5rem;
  border-top: 2px dashed var(--hs-text); opacity: 0.35;
}
.tr-deckel--fest .tr-deckel-marke {
  font-size: 0.6875rem; font-weight: 700; color: var(--hs-text);
  background: var(--hs-surface); padding: 0 0.375rem;
  transform: translateY(-1.15rem); white-space: nowrap;
}
/* 🔴 Ohne Entgelte KEINE Linie an irgendeiner Hoehe — der Deckel kann
   ueber der ganzen Treppe liegen (dann kommt alles an) oder unter der
   ersten Stufe. Eine Linie wuerde einen Wert behaupten, den wir nicht
   kennen. Stattdessen ein Feld ueber die GESAMTE Hoehe: "irgendwo hier". */
.tr-deckel--offen {
  top: 0; bottom: 0;
  background: repeating-linear-gradient(135deg,
    transparent 0 7px,
    color-mix(in srgb, var(--hs-text-muted) 9%, transparent) 7px 8px);
  border: 1px dashed color-mix(in srgb, var(--hs-text-muted) 35%, transparent);
  border-radius: 0.375rem;
  display: flex; align-items: flex-start; justify-content: flex-end;
}
.tr-deckel--offen .tr-deckel-marke {
  font-size: 0.6875rem; font-weight: 600; color: var(--hs-text-muted);
  background: var(--hs-surface); padding: 0.125rem 0.375rem;
  transform: translateY(-0.75rem); margin-right: 0.25rem; white-space: nowrap;
}

.tr-legende { display: flex; flex-wrap: wrap; gap: 0.875rem; margin-top: 1rem; }
.tr-leg { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.6875rem; color: var(--hs-text-muted); }
.tr-leg i { width: 0.75rem; height: 0.75rem; border-radius: 0.1875rem; flex: none; }
.tr-leg-ist { background: var(--tl-accent); }
.tr-leg-nominal { border: 1px dashed var(--hs-text-muted); }
.tr-leg-linie { height: 0 !important; border-top: 2px solid var(--hs-text); border-radius: 0 !important; }

/* Der Deckel-Text — steht IMMER offen, nie in einem <details>. */
.tr-deckel-text {
  margin-top: 1.25rem; padding: 1rem 1.125rem; border-radius: 0.75rem;
  background: color-mix(in srgb, var(--tl-accent) 8%, var(--hs-surface));
  border: 1px solid color-mix(in srgb, var(--tl-accent) 40%, var(--hs-border));
  font-size: 0.875rem; line-height: 1.6; color: var(--hs-text);
}
.tr-deckel-text p { margin: 0 0 0.625rem; max-width: 68ch; text-wrap: pretty; }
.tr-deckel-text p:last-child { margin-bottom: 0; }
.tr-warn { font-weight: 500; }
.tr-einladung { font-size: 0.8125rem; color: var(--hs-text-muted); }
.tr-fein { font-size: 0.75rem; color: var(--hs-text-muted); padding-top: 0.5rem; border-top: 1px solid var(--hs-border); }

/* Quellenangabe je Tarifwerk — Anzeige-Auflage UND Qualitaetsbeweis.
   Der Pflicht-Hinweis steht ungekuerzt und nicht kleiner als der Rest
   des Kleingedruckten. */
.tr-quelle { margin-top: 0.875rem; }
.tr-pflicht { font-size: 0.75rem; color: var(--hs-text); margin: 0 0 0.375rem; line-height: 1.5; }
.tr-ref { font-size: 0.6875rem; color: var(--hs-text-muted); margin: 0; line-height: 1.5; max-width: 78ch; }
.tr-ref a { color: var(--tl-accent); }

/* Optionale Entgelt-Felder */
.rk-euro { border: 1px dashed var(--hs-border); border-radius: 0.75rem; padding: 0.875rem 1rem; }
.rk-optional {
  font-size: 0.6875rem; font-weight: 600; color: var(--hs-text-muted);
  background: var(--hs-bg); border-radius: 9999px; padding: 0.0625rem 0.5rem; margin-left: 0.375rem;
}
.rk-euro-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.875rem; }
.rk-euro-eingabe { position: relative; display: flex; align-items: center; }
.rk-euro-eingabe .rk-input { padding-right: 3rem; width: 100%; }
.rk-euro-zeichen {
  position: absolute; right: 0.75rem; font-size: 0.8125rem; color: var(--hs-text-muted); pointer-events: none;
}
.rk-label--klein { font-size: 0.8125rem; }
.rk-hilfe--klein { font-size: 0.75rem; display: block; margin-top: 0.25rem; }
.rk-verweis {
  margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--hs-border);
  font-size: 0.8125rem; color: var(--hs-text-muted);
}

/* Mobil: sechs Stufen nebeneinander sind auf 360 px nicht lesbar.
   🔴 Die Treppe wird deshalb gekippt — nicht verkleinert. Eine Treppe
   mit 3-Punkt-Schrift ist keine Information, sondern eine Behauptung.
   Gekippt bleibt die Sequenz erhalten, die Hoehe wird zur Laenge. */
@media (max-width: 640px) {
  .tr-buehne { padding-top: 0.5rem; }
  .tr-treppe { flex-direction: column; align-items: stretch; height: auto; gap: 0; }
  .tr-stufe { flex-direction: row; align-items: center; gap: 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid var(--hs-border); }
  .tr-saeulen { height: auto; flex: 1 1 auto; order: 2; min-height: 1.5rem; }
  .tr-ist {
    position: relative; height: 1.5rem !important; width: var(--ist);
    border-radius: 0 0.25rem 0.25rem 0; min-width: 0.125rem;
  }
  .tr-nominal {
    height: 1.5rem; width: var(--nominal);
    border-radius: 0 0.25rem 0.25rem 0; border: 1px dashed color-mix(in srgb, var(--hs-text-muted) 60%, transparent);
    border-left: 0;
  }
  .tr-kopf {
    position: static; flex-direction: row; align-items: center; gap: 0.375rem;
    padding: 0 0 0 0.5rem; inset: auto; justify-content: flex-start;
  }
  .tr-saeulen { display: flex; align-items: center; }
  .tr-fuss {
    order: 1; align-items: flex-start; text-align: left; border-top: 0; margin: 0; padding: 0;
    flex: 0 0 7.5rem; min-width: 7.5rem;
  }
  .tr-zweitwert {
    position: static; border-top: 0; order: 3; flex: 0 0 auto;
  }
  .tr-zweitwert span { transform: none; background: transparent; padding: 0; }
  /* Der Deckel als Linie ergibt gekippt keinen Sinn — die Aussage steht
     im Text darunter, der ohnehin Pflicht ist. */
  .tr-deckel { display: none; }
}

/* 🔴 Pflicht bei jeder Animation. Die Treppe darf nicht wachsen, wenn
   jemand Bewegung abbestellt hat. */
@media (prefers-reduced-motion: reduce) {
  .tr-ist { transition: none; }
}

/* 🔴 Die 15-Monats-Stufe, wenn Euro-Betraege eingegeben sind: wir zeigen dort
   die Stufenhoehe, aber KEINEN Betrag ("gleichwertig" ist tariflich festgelegt,
   nicht betragsgleich — offene Auslegungsfrage). Sie darf deshalb NICHT
   aussehen wie die uebrigen Saeulen, die "was kommt an" zeigen. Volle Farbe
   an dieser Stelle waere eine Luege durch Bildsprache: die unbekannte Groesse
   saehe aus wie der groesste sichere Gewinn. */
.tr-stufe[data-unbestimmt="ja"] .tr-ist {
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--tl-accent) 22%, transparent) 0 6px,
    transparent 6px 12px);
  border: 1px dashed color-mix(in srgb, var(--tl-accent) 70%, transparent);
  border-bottom: 0;
}
.tr-unbestimmt-marke {
  font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.02em;
  color: var(--hs-text-muted); text-transform: uppercase;
  border: 1px dashed var(--hs-border); border-radius: 9999px;
  padding: 0.0625rem 0.3125rem; margin-top: 0.125rem; white-space: nowrap;
}
@media (max-width: 640px) {
  .tr-stufe[data-unbestimmt="ja"] .tr-ist { border-bottom: 1px dashed color-mix(in srgb, var(--tl-accent) 70%, transparent); border-left: 0; }
}

.tr-leg-unbestimmt {
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--tl-accent) 22%, transparent) 0 3px, transparent 3px 6px);
  border: 1px dashed color-mix(in srgb, var(--tl-accent) 70%, transparent);
}