/* Fairhours – Website mit Unterseiten (Nachbau der Design-Übergabe „Website mit Unterseiten“): Kopf mit Menü
   „Funktionen“ und Handy-Menü, Brotkrumen, Abschnitte der Vorlagen A–I, Fragen, Preisrechner, Abschluss-Band, Fuß.
   Farben und Schriften aus basis.css. Raster mit auto-fit/minmax, dadurch fast ohne Media Queries responsiv. */

/* Schrift-Stufen und Radien (Design-Bericht 29.10.2026): Display nur im Start-Hero, H1 der Unterseiten, H2, H3;
   Radien nur 6 px (Eingaben, Kleinteile), 12 px (Rahmen, Tabellen, Knöpfe) und 999 px (Hauptknopf, Pillenform).
   Die Stufen wachsen gleichmäßig von 320 px Fensterbreite (kleinster Wert) bis 1440 px (größter Wert), damit die H1 am
   schmalen Handy in drei bis vier Zeilen passt. */
:root {
  --t-display: clamp(32px, 22.86px + 2.857vw, 64px);
  --t-h1: clamp(28px, 21.14px + 2.143vw, 52px);
  --t-h2: clamp(24px, 20.57px + 1.071vw, 36px);
  --t-h3: 22px;
  --r-klein: 6px; --r: 12px; --r-rund: 999px;
}

.skip-link {
  position: absolute; left: 12px; top: -80px; z-index: 200;
  padding: 10px 16px; border-radius: 12px; background: var(--pt); color: var(--on-pt); font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 12px; color: var(--on-pt); }
.wrap-960 { max-width: 960px; margin: 0 auto; padding: 0 var(--gutter); }
.wrap-820 { max-width: 820px; margin: 0 auto; padding: 0 var(--gutter); }
.links { align-items: flex-start; }

/* ---------- Kleine Helfer ---------- */
.stapel { display: flex; flex-direction: column; gap: clamp(36px, 5vw, 56px); }
.stapel-eng { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 40px); }
.stapel-2 { display: flex; flex-direction: column; gap: 2px; }
.stapel-6 { display: flex; flex-direction: column; gap: 6px; }
.stapel-12 { display: flex; flex-direction: column; gap: 12px; }
.stapel-16 { display: flex; flex-direction: column; gap: 16px; }
.stapel-20 { display: flex; flex-direction: column; gap: 20px; }
.stapel-22 { display: flex; flex-direction: column; gap: 22px; }
.stapel-24 { display: flex; flex-direction: column; gap: 24px; }
.zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.zeile-umbruch { flex-wrap: wrap; }
.wachsen { flex: 1; min-width: 0; }
.fett { font-weight: 700; }
.fett-17 { font-weight: 700; font-size: 17px; }
.text-13-ink2 { font-size: 13px; color: var(--ink2); }
.text-14 { font-size: 14px; }
.text-14-ink2 { font-size: 14px; line-height: 1.5; color: var(--ink2); margin: 0; }
.text-15 { font-size: 15px; line-height: 1.45; }
.text-15-ink2 { font-size: 15px; line-height: 1.45; color: var(--ink2); }
.text-16-ink2 { margin: 0; font-size: 16px; color: var(--ink2); }
.text-17-ink2 { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ink2); }
.text-18 { margin: 0; font-size: 18px; line-height: 1.5; }
.text-18-ink2 { margin: 0; max-width: 62ch; font-size: 18px; line-height: 1.55; color: var(--ink2); text-wrap: pretty; }
.person-12 { display: flex; align-items: center; gap: 12px; }
.avatar {
  border-radius: 50%; background: var(--pt-s); color: var(--pt); display: flex; align-items: center;
  justify-content: center; font-weight: 700; flex: none;
}
.av-52 { width: 52px; height: 52px; font-size: 17px; }
.av-40 { width: 40px; height: 40px; font-size: 14px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 14px; font-weight: 700; white-space: nowrap; }
.chip-warn { background: var(--warn-s); color: var(--warn); }
.chip-ok { background: var(--ok-s); color: var(--ok); }
.chip-13 { padding: 4px 10px; font-size: 13px; }
.meldung { padding: 12px 14px; border-radius: 12px; font-size: 15px; font-weight: 700; line-height: 1.4; animation: fhIn .35s var(--ez) both; }
.meldung-ok { background: var(--ok-s); color: var(--ok); }
.haken { flex: none; margin-top: 2px; fill: none; stroke: var(--pt); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
code { font-family: var(--fm); font-size: .88em; }
/* Überschriften trennt der Browser nach deutschem Wörterbuch, nur Wörter ab 10 Buchstaben und mit mindestens 4 Buchstaben
   je Teil; Wörter mit Bindestrich hält der Generator zusammen (bausteine.js ueberschriften) */
h1, h2, h3 { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 10 4 4; overflow-wrap: break-word; }
.wort { white-space: nowrap; }
@media (min-width: 600px) { .wort-lang { white-space: nowrap; } }

/* ---------- Überschriften und Texte ---------- */
.eyebrow-ohne { margin-bottom: 0; }
.eyebrow-h { margin: 0; font-family: var(--fb); font-size: 15px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pt); }
.h1 {
  margin: 0; font-family: var(--fd); font-weight: 800; font-size: var(--t-display);
  line-height: 1.02; letter-spacing: -.03em; text-wrap: balance;
}
/* Dachzeile in der Startseiten-H1: Suchbegriff klein über dem Leitsatz */
.h1-dach {
  display: block; margin-bottom: 14px; font-family: var(--fb); font-size: 15px; font-weight: 700;
  line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; color: var(--pt);
}
.h1-seite, .h1-artikel, .h1-recht {
  margin: 0; max-width: 18em; font-family: var(--fd); font-weight: 750; font-size: var(--t-h1);
  line-height: 1.05; letter-spacing: -.03em; text-wrap: balance;
}
.h1-schmal { max-width: 16em; }
.h1-17 { max-width: 17em; }
/* Alle H2 gleich groß (Stufe H2), H3 22 px; ohne Schlusspunkt, ausgewogen umbrochen */
.h2, .h2-mittel, .h2-klein, .h2-klein2, .h2-gruppe {
  margin: 0; font-family: var(--fd); font-weight: 700; font-size: var(--t-h2); line-height: 1.15; letter-spacing: -.02em; text-wrap: balance;
}
.h2-breit { max-width: 24ch; }
.h2-schmal { max-width: 18ch; }
.h3-klein { margin: 0; font-family: var(--fd); font-weight: 700; font-size: var(--t-h3); letter-spacing: -.01em; line-height: 1.25; }
.einleitung { margin: 0; max-width: 62ch; font-size: 20px; line-height: 30px; color: var(--ink2); text-wrap: pretty; }
.flaeche-tief .einleitung { color: var(--on-deep2); }
.einleitung-breit { margin: 0; max-width: 62ch; font-size: 20px; line-height: 30px; color: var(--ink2); text-wrap: pretty; }
.fliess-18 { margin: 0; max-width: 68ch; font-size: 17px; line-height: 27px; color: var(--ink2); text-wrap: pretty; }
.nr { font-family: var(--fd); font-weight: 800; font-size: 18px; color: var(--pt); }
.pfeil-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 17px; font-weight: 700; }
.pfeil-link-18 { align-self: flex-start; font-size: 18px; }
.pfeil-link span[aria-hidden] { transition: transform .2s var(--ez); }
.pfeil-link:hover span[aria-hidden] { transform: translateX(3px); }

/* ---------- Knöpfe ---------- */
.knopf-reihe { display: flex; flex-wrap: wrap; gap: 12px; }
.knopf-rahmen.knopf { gap: 10px; }
.knopf-heben:hover { transform: translateY(-2px); }
.knopf-mittel { min-height: 52px; padding: 0 22px; font-size: 16px; }
.knopf-hell { background: var(--on-deep); color: var(--deep); }
.knopf-hell:hover { background: var(--on-deep2); color: var(--deep); }
.knopf-hell-rahmen { padding: 0 24px; border: 2px solid var(--on-deep); color: var(--on-deep); }
.knopf-hell-rahmen:hover { background: var(--deep2); color: var(--on-deep); }
.knopf-klein-primaer {
  align-self: flex-start; display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; border-radius: 12px;
  background: var(--pt); color: var(--on-pt); font-weight: 700; font-size: 15px; transition: background .2s var(--ez);
}
.knopf-klein-primaer:hover { background: var(--pt-d); }
.knopf-demo {
  display: inline-flex; align-items: center; gap: 14px; min-height: 68px; padding: 0 34px; border-radius: 999px;
  background: var(--pt); color: var(--on-pt); font-family: var(--fd); font-weight: 750; font-size: 24px; letter-spacing: -.02em;
  text-decoration: none; transition: background .2s var(--ez), transform .2s var(--ez);
}
.knopf-demo:hover { background: var(--pt-d); color: var(--on-pt); transform: translateY(-2px); }

/* ---------- Kopf ---------- */
.kopf { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--line); }
.kopf-innen { height: 72px; display: flex; align-items: center; gap: clamp(12px, 2vw, 24px); padding: 0 clamp(16px, 4vw, 48px); }
.kopf-marke { display: flex; align-items: center; min-height: 44px; flex: none; color: var(--ink); text-decoration: none; font-size: 26px; }
.kopf-marke:hover { color: var(--ink); }
.kopf-nav { display: flex; align-items: center; gap: 2px; }
.nav-link {
  position: relative; display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: 999px;
  font-size: 16px; font-weight: 700; color: var(--ink); text-decoration: none;
}
.nav-link:hover { background: var(--sf2); color: var(--ink); }
.nav-link.ist-aktuell::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 5px; height: 2.5px; border-radius: 2px; background: var(--ac);
}
.nav-pfeil { transition: transform .2s var(--ez); }
.nav-dd-knopf[aria-expanded="true"] .nav-pfeil { transform: rotate(180deg); }
.nav-dd { position: relative; }
.nav-dd-feld {
  position: absolute; left: 0; top: calc(100% + 12px); z-index: 60; width: min(760px, calc(100vw - 48px));
  padding: 20px; border-radius: 12px; background: var(--sf); border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(0, 0, 0, .16);
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; animation: fhIn .2s var(--ez) both;
}
.nav-dd-gruppe, .menue-gruppe { display: flex; flex-direction: column; gap: 4px; }
.nav-gruppe-t { padding: 4px 10px 6px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); }
.nav-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.nav-eintrag {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px; border-radius: 12px;
  color: var(--ink); text-decoration: none;
}
.nav-eintrag:hover, .nav-eintrag[aria-current="page"] { background: var(--sf2); color: var(--ink); }
.nav-icon { width: 40px; height: 40px; border-radius: 12px; background: var(--pt-s); color: var(--pt); display: flex; align-items: center; justify-content: center; }
.nav-text { display: flex; flex-direction: column; gap: 1px; }
.nav-name { font-size: 16px; font-weight: 700; }
.nav-zeile { font-size: 14px; line-height: 1.35; color: var(--ink2); }
.nav-dd-preise {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; min-height: 48px; margin-top: 6px;
  padding: 0 14px; border-radius: 12px; background: var(--sf2); color: var(--ink); font-weight: 700; text-decoration: none;
}
.nav-dd-preise:hover { color: var(--ink); text-decoration: underline; }
.kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: clamp(8px, 1.4vw, 16px); }
.kopf-anmelden { display: flex; align-items: center; min-height: 44px; font-size: 16px; font-weight: 700; color: var(--ink); text-decoration: none; }
.kopf-anmelden:hover { color: var(--ink); text-decoration: underline; }
.kopf-cta {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; white-space: nowrap;
  background: var(--pt); color: var(--on-pt); font-size: 15px; font-weight: 700; text-decoration: none; transition: background .2s var(--ez);
}
.kopf-cta:hover { background: var(--pt-d); color: var(--on-pt); }
.cta-kurz { display: none; }
.sprache { display: flex; align-items: center; font-size: 14px; font-weight: 700; color: var(--ink2); }
.sprache-de, .sprache-bald { display: flex; align-items: center; min-height: 44px; padding: 0 6px; }
.sprache-de { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.sprache-de:hover { color: var(--ink); }
.sprache-bald { color: var(--ink2); cursor: default; }
.menue-knopf, .menue-zu {
  flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--ink); display: none; align-items: center; justify-content: center;
}
.menue-zu { display: flex; }
@media (max-width: 1079.98px) {
  .kopf-nav, .kopf-anmelden, .kopf-rechts > .sprache { display: none; }
  .menue-knopf { display: flex; }
}
@media (max-width: 519.98px) {
  .cta-lang { display: none; }
  .cta-kurz { display: inline; }
  .kopf-innen { gap: 8px; }
  .kopf-cta { padding: 0 14px; }
}
/* Schmale Handys (bis 409 px, z. B. 390 px): Wortmarke, Menü-Knopf – der Knopf steht dann im Menü; „Pilotkunde werden“
   braucht neben Marke, Design-Schalter und Menü-Knopf etwa 400 px */
@media (max-width: 409.98px) { .kopf-cta { display: none; } }
@media (max-width: 379.98px) { .kopf-marke { font-size: 23px; } }

/* Handy-Menü (Vollbild) */
.menue {
  position: fixed; inset: 0; z-index: 150; overflow-y: auto; background: var(--bg); color: var(--ink);
  display: flex; flex-direction: column; animation: fhIn .2s var(--ez) both;
}
.menue[hidden] { display: none; }
.menue-kopf {
  flex: none; display: flex; align-items: center; justify-content: space-between; height: 72px;
  padding: 0 clamp(16px, 4vw, 48px); border-bottom: 1px solid var(--line);
}
.menue-nav { padding: 20px clamp(16px, 4vw, 48px) 40px; display: flex; flex-direction: column; gap: 24px; }
.menue .nav-gruppe-t { padding: 0; }
.menue .nav-eintrag { padding: 10px 0; }
.menue .nav-name { font-size: 17px; }
.menue-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1.5px solid var(--ink); }
.menue-links li { border-bottom: 1px solid var(--line); }
.menue-links a {
  display: flex; align-items: center; justify-content: space-between; min-height: 60px; color: var(--ink); text-decoration: none;
  font-family: var(--fd); font-weight: 750; font-size: 26px; letter-spacing: -.02em;
}
.menue-cta { justify-content: center; }
.sprache-gross { gap: 4px; font-size: 16px; }
.sprache-gross .sprache-de, .sprache-gross .sprache-bald { padding: 0 8px; }
/* Schalter „Dunkles Design“ im Handy-Menü: auf hellem Grund statt Tiefpetrol */
.menue-schalter { align-self: flex-start; border-color: var(--line); color: var(--ink); }
.menue-schalter .schalter-bahn { background: var(--sf2); box-shadow: inset 0 0 0 1.5px var(--ink2); }
.menue-schalter .schalter-knauf { background: var(--ink2); }
body.menue-offen { overflow: hidden; }

/* ---------- Brotkrumen ---------- */
.krumen { padding-top: 18px; }
.krumen ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 15px; color: var(--ink2); }
.krumen li { display: flex; align-items: center; gap: 8px; }
.krumen a { display: flex; align-items: center; min-height: 32px; color: var(--ink2); }
.krumen a:hover { color: var(--ink); }
.krumen [aria-current="page"] { font-weight: 700; color: var(--ink); }

/* ---------- Abschnitte ---------- */
.abschnitt { padding: var(--sec) 0; }
.abschnitt-kurz { padding: clamp(48px, 7vw, 88px) 0; }
.abschnitt-oben { padding: var(--sec) 0 0; }
.abschnitt-oben-nein { padding: 0 0 var(--sec); }
.abschnitt-unten { padding: 0 0 var(--sec); }
.mit-linie-oben { border-top: 1px solid var(--line); }
.anker { scroll-margin-top: 80px; }
.flaeche-sf2 { background: var(--sf2); }
.flaeche-tief { background: var(--deep); color: var(--on-deep); }
.kopf-760 { max-width: 760px; }
.kopf-luft { display: flex; flex-direction: column; gap: 18px; }
.kopf-luft .eyebrow { margin-bottom: 0; }
.seiten-kopf { padding: clamp(28px, 5vw, 64px) 0 clamp(32px, 4vw, 48px); }
.seiten-kopf-luft { padding-bottom: clamp(48px, 7vw, 88px); }

/* ---------- Hero (Startseite, Funktionsseiten) ---------- */
.hero { padding: clamp(40px, 7vw, 96px) 0 clamp(64px, 9vw, 120px); }
.seiten-hero { padding: clamp(28px, 5vw, 64px) 0 clamp(56px, 8vw, 104px); }
.hero-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); gap: clamp(40px, 6vw, 72px); align-items: center; }
.hero-text { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.hero .hero-text { gap: 28px; }
/* Zeile über der H1 der Funktionsseiten (statt Pille): Art des Bausteins, Preis, Link zu allen Preisen */
.seiten-dach { margin: 0; font-size: 15px; letter-spacing: .02em; color: var(--ink2); }
.seiten-dach a { font-weight: 700; }
.hero-unter { margin: 0; max-width: 40ch; font-size: 20px; line-height: 30px; color: var(--ink2); text-wrap: pretty; }
.hero-unter-breit { max-width: 52ch; }
/* Ein Satz mit Links auf passende Funktionsseiten und Ratgeber (Themen-Cluster) */
.cluster-satz { margin: 0; max-width: 62ch; font-size: 17px; line-height: 27px; color: var(--ink2); text-wrap: pretty; }
.cluster-satz a { font-weight: 700; }
.hero-meta { margin: 0; font-size: 15px; color: var(--ink2); }

/* ---------- Startseite ---------- */
/* Faktenzeile unter dem Hero: volle Breite, Linien oben und unten, vier Fakten mit 1-px-Trennern */
.fakten { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fakten-liste {
  list-style: none; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; min-height: 64px;
  padding-top: 12px; padding-bottom: 12px; gap: 8px 0; font-size: 15px; font-weight: 700; color: var(--ink);
}
.fakten-liste li { padding: 0 20px; border-left: 1px solid var(--line); }
.fakten-liste li:first-child { padding-left: 0; border-left: 0; }
@media (max-width: 719.98px) {
  .fakten-liste { flex-direction: column; align-items: flex-start; }
  .fakten-liste li { padding: 4px 0; border-left: 0; }
}
.karten-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: inherit; text-decoration: none; }
.karten-link:hover { color: inherit; text-decoration: underline; text-underline-offset: 4px; }
.karten-link span[aria-hidden] { transition: transform .2s var(--ez); }
.karten-link:hover span[aria-hidden] { transform: translateX(3px); }
.preise-start { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(32px, 5vw, 72px); align-items: start; }
.preis-beispiel { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding-top: 20px; border-top: 3px solid var(--ink); }
.beispiel-zahl {
  margin: 0; font-family: var(--fd); font-weight: 800; font-size: clamp(36px, 5vw, 56px); line-height: 1.05; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; text-wrap: balance;
}
.beispiel-weg { margin: 0; font-size: 17px; line-height: 27px; color: var(--ink2); font-variant-numeric: tabular-nums; }
.warum-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(28px, 5vw, 64px); align-items: end; }
.jahr { font-family: var(--fd); font-weight: 800; font-size: clamp(64px, 11vw, 150px); line-height: .85; letter-spacing: -.06em; color: var(--pt); }
.warum-text { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 560px; }
.drei { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(28px, 4vw, 48px); }
.drei li { display: flex; flex-direction: column; gap: 16px; padding-top: 20px; border-top: 3px solid var(--ink); }
.drei-nr { font-family: var(--fd); font-weight: 800; font-size: 56px; line-height: .8; letter-spacing: -.05em; color: var(--pt); }
.drei p { margin: 0; font-size: 17px; line-height: 27px; }
.cta-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }

/* Hero der Startseite: Text oben (Spalte 1–8), darunter die Antragskarte über die volle Inhaltsbreite – so erscheint ihre
   Schrift bei 1440 px fast in Originalgröße (Prüfung 30.10.2026: neben dem Text war sie zu klein) */
.hero-start { padding: clamp(32px, 6vw, 72px) 0 clamp(56px, 8vw, 96px); overflow-x: clip; }
.hero-start-raster { display: grid; gap: 40px; align-items: center; }
.hero-start .hero-text { gap: 24px; }
/* Links, deren Text umbrechen kann: Pfeil bleibt am Wortende (inline statt Flex), Klickfläche über den Innenabstand */
.hero-preis.pfeil-link, .h3-reihe .karten-link { display: inline; padding: 10px 0; }
.hero-preis span[aria-hidden], .h3-reihe .karten-link span[aria-hidden] { display: inline-block; margin-left: 6px; }
@media (min-width: 900px) {
  .hero-start-raster { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(40px, 5vw, 64px) clamp(32px, 4vw, 56px); }
  .hero-start .hero-text { grid-column: 1 / span 8; }
  .hero-start-raster > .bildschirmfoto { grid-column: 1 / -1; }
}

/* Band „Urlaub und Outlook“: volle Breite in Tiefpetrol, je Station eine Zeile „Bisher“ gegen „Mit Fairhours“ */
.band-tief { padding: clamp(56px, 8vw, 96px) 0; }
.strecke-kopf { display: none; }
.strecke { list-style: none; margin: 0; padding: 0; counter-reset: station; }
.strecke li {
  position: relative; display: grid; gap: 10px 32px; padding: 0 0 28px 44px; counter-increment: station;
}
.strecke li::before {
  content: counter(station); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: var(--on-deep); color: var(--deep);
  font-family: var(--fd); font-weight: 800; font-size: 15px;
}
.strecke li::after { content: ""; position: absolute; left: 13px; top: 34px; bottom: 6px; width: 2px; background: var(--deep2); }
.strecke li:last-child { padding-bottom: 0; }
.strecke li:last-child::after { display: none; }
.station { font-family: var(--fd); font-weight: 700; font-size: var(--t-h3); line-height: 1.25; letter-spacing: -.01em; }
.station-bisher, .station-mit { margin: 0; font-size: 17px; line-height: 27px; }
.station-bisher { color: var(--on-deep2); }
.station-label { display: block; font-size: 14px; font-weight: 700; letter-spacing: .02em; color: var(--on-deep2); }
.station-mit .station-label { color: var(--on-deep); }
@media (min-width: 900px) {
  .strecke-kopf, .strecke li { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 4fr); gap: 0 40px; }
  .strecke-kopf { padding: 0 0 14px 44px; border-bottom: 1px solid var(--deep2); margin-bottom: 28px; font-size: 15px; font-weight: 700; color: var(--on-deep2); }
  .strecke-kopf span:last-child { color: var(--on-deep); }
  .station-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.auf-tief .pfeil-link { color: var(--on-deep); }

/* Reihen mit unterschiedlichem Gewicht: Text 5/12 neben Bildschirmfoto 7/12 (jede zweite gespiegelt), breit = Text oben in
   zwei Spalten und das Bild über die volle Breite, handy = Handy schmal neben dem Text; H3 22 px ohne Symbol */
.reihen { display: flex; flex-direction: column; gap: clamp(56px, 8vw, 96px); }
.reihe { display: grid; gap: 28px; align-items: center; }
.reihe-text { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.reihe-text p { margin: 0; max-width: 46ch; font-size: 17px; line-height: 27px; color: var(--ink2); text-wrap: pretty; }
.h3-reihe { margin: 0; font-family: var(--fd); font-weight: 700; font-size: var(--t-h3); line-height: 1.25; letter-spacing: -.01em; }
/* Das Handy in Handygröße (300 von 390 px) */
.reihe-handy .bildschirmfoto { max-width: 300px; justify-self: center; }
@media (min-width: 900px) {
  .reihe { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 clamp(32px, 4vw, 56px); }
  .reihe-text { grid-column: 1 / span 5; }
  .reihe > .bildschirmfoto { grid-column: 6 / span 7; justify-self: end; }
  .reihe-gespiegelt .reihe-text { grid-column: 8 / span 5; grid-row: 1; }
  .reihe-gespiegelt > .bildschirmfoto { grid-column: 1 / span 7; grid-row: 1; justify-self: start; }
  .reihe-handy > .bildschirmfoto { justify-self: center; }
  .reihe-handy .reihe-text { grid-column: 1 / span 6; }
  .reihe-handy > .bildschirmfoto { grid-column: 8 / span 4; }
  .reihe-handy.reihe-gespiegelt .reihe-text { grid-column: 7 / span 6; }
  .reihe-handy.reihe-gespiegelt > .bildschirmfoto { grid-column: 2 / span 4; }
  .reihe-breit .reihe-text, .reihe-breit.reihe-gespiegelt .reihe-text {
    grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: subgrid; align-items: baseline;
  }
  .reihe-breit .h3-reihe { grid-column: 1 / span 5; }
  .reihe-breit .reihe-text p { grid-column: 6 / span 7; }
  .reihe-breit > .bildschirmfoto, .reihe-breit.reihe-gespiegelt > .bildschirmfoto {
    grid-column: 1 / -1; grid-row: 2; justify-self: stretch; margin-top: clamp(24px, 3vw, 36px);
  }
}

/* Erweiterungen als Tabelle: Name · Was · Abrechnung · Link; am Handy je Baustein ein Block */
.bausteine-tabelle { width: 100%; border-collapse: collapse; font-size: 17px; line-height: 1.5; }
.bausteine-tabelle thead th { padding: 0 16px 12px 0; text-align: left; font-size: 14px; font-weight: 700; color: var(--ink2); border-bottom: 1.5px solid var(--ink); }
.bausteine-tabelle tbody th, .bausteine-tabelle td { padding: 18px 16px 18px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.bausteine-tabelle tbody th { font-family: var(--fd); font-weight: 700; font-size: var(--t-h3); line-height: 1.25; letter-spacing: -.01em; white-space: nowrap; }
.bausteine-tabelle td { color: var(--ink2); }
.bausteine-tabelle .bt-preis { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.bausteine-tabelle td:last-child { padding-right: 0; white-space: nowrap; }
.bausteine-tabelle a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; }
@media (max-width: 719.98px) {
  .bausteine-tabelle thead { display: none; }
  .bausteine-tabelle, .bausteine-tabelle tbody, .bausteine-tabelle tr, .bausteine-tabelle th, .bausteine-tabelle td { display: block; }
  .bausteine-tabelle tr { padding: 18px 0; border-top: 1.5px solid var(--ink); }
  .bausteine-tabelle tbody th, .bausteine-tabelle td { padding: 4px 0; border: 0; white-space: normal; }
}

/* Für IT-Admins: was Fairhours firmenweit liest gegen das, was nur für eine Gruppe freigegeben wird */
.rechte-zwei { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 40px clamp(32px, 5vw, 72px); }
.rechte-spalte { display: flex; flex-direction: column; gap: 12px; padding-top: 20px; border-top: 3px solid var(--ink); }
.rechte-spalte ul { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; font-size: 17px; line-height: 27px; color: var(--ink2); }
/* Wer hinter Fairhours steht: rundes Foto, Textspalte höchstens 680 px, Kontakt darunter */
.wer-raster { display: grid; gap: 28px; align-items: start; }
@media (min-width: 720px) {
  .wer-raster { grid-template-columns: 160px minmax(0, 680px); gap: 0 48px; }
  .wer-ohne-foto { grid-template-columns: minmax(0, 680px); }
}
.foto-rund { display: block; width: 120px; height: 120px; border-radius: 50%; object-fit: cover; background: var(--sf2); }
@media (min-width: 720px) { .foto-rund { width: 160px; height: 160px; } }
.wer-text { display: flex; flex-direction: column; gap: 16px; }
.wer-kontakt { display: flex; flex-direction: column; align-items: flex-start; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--line); font-style: normal; font-size: 17px; line-height: 27px; }
.wer-kontakt a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.wer-name { font-weight: 700; }
.wer-anbieter { color: var(--ink2); }
.start-titel { margin: 0; font-family: var(--fd); font-weight: 700; font-size: var(--t-h3); line-height: 1.25; letter-spacing: -.01em; }
.start-satz { margin: 0; font-size: 17px; line-height: 27px; color: var(--ink2); }
.abschnitt-vor-preisen { padding-top: clamp(72px, 11vw, 144px); }

/* ---------- Funktionsseiten ---------- */
.haken-raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); column-gap: 48px; }
.haken-raster li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 18px 0; border-top: 1.5px solid var(--ink); font-size: 17px; line-height: 27px; }
.schritt-raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: clamp(24px, 3vw, 40px); }
.schritt-raster li { display: flex; flex-direction: column; gap: 14px; padding-top: 20px; border-top: 3px solid var(--ink); }
.schritt-zahl { font-family: var(--fd); font-weight: 800; font-size: 60px; line-height: .8; letter-spacing: -.05em; color: var(--pt); }
.schritt-raster p { margin: 0; font-size: 17px; line-height: 27px; }

/* ---------- Fragen (Aufklappen) ---------- */
.fragen-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: clamp(28px, 5vw, 64px); align-items: start; }
.fragen-kopf { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.fragen-kopf .pfeil-link { margin-top: -8px; }
.fragen-liste { display: flex; flex-direction: column; }
.frage { border-top: 1.5px solid var(--ink); scroll-margin-top: 96px; }
.frage-h { margin: 0; }
.frage-knopf {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 16px 0;
  text-align: left; font-family: var(--fd); font-weight: 700; font-size: clamp(19px, 2vw, 22px); letter-spacing: -.02em; line-height: 1.25; color: var(--ink);
}
.frage-icon {
  display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; flex: none;
  background: var(--sf2); color: var(--ink); transition: transform .25s var(--ez), background .25s var(--ez);
}
.frage-knopf[aria-expanded="true"] .frage-icon { transform: rotate(45deg); background: var(--pt); color: var(--on-pt); }
.frage-antwort { padding: 0 clamp(0px, 4vw, 52px) 24px 0; animation: fhIn .3s var(--ez) both; }
/* Zugeklappt: ohne Skript offen lesbar; mit Skript (data-fh-js aus thema.js) gleich zu, bis seite.js hidden="until-found" setzt */
[data-fh-js] .frage-antwort[data-zu] { display: none; }
.frage-antwort[hidden="until-found"] { padding: 0; }
.frage-antwort p { margin: 0; max-width: 68ch; font-size: 17px; line-height: 27px; color: var(--ink2); text-wrap: pretty; }
.frage-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; margin-top: 10px; font-size: 15px; }
.frage-mehr { display: flex; align-items: center; min-height: 44px; font-weight: 700; }
.frage-link { display: flex; align-items: center; gap: 6px; min-height: 44px; color: var(--ink2); }
.frage-link:hover { color: var(--ink); }

/* Fragen-Seite */
.suche { display: flex; flex-direction: column; gap: 8px; }
.suche-l { font-size: 16px; font-weight: 700; }
.suche-feld { position: relative; }
.suche-lupe { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--ink2); }
.suche-eingabe {
  width: 100%; min-height: 60px; padding: 0 56px 0 52px; border-radius: 999px; border: 2px solid var(--ink);
  background: var(--sf); font-size: 18px;
}
.suche-eingabe:focus { border-color: var(--pt); }
.suche-eingabe::-webkit-search-cancel-button { display: none; }
.suche-leeren { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.suche-leeren:hover { background: var(--sf2); }
.suche-ergebnis { margin: 0; min-height: 22px; font-size: 15px; color: var(--ink2); }
.sprungmarken { display: flex; flex-wrap: wrap; gap: 8px; }
.sprungmarke {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px;
  background: var(--sf2); color: var(--ink); font-size: 15px; font-weight: 700; text-decoration: none;
}
.sprungmarke:hover { background: var(--pt-s); color: var(--ink); }
.sprung-zahl { font-weight: 500; color: var(--ink2); }
.fragen-gruppen { padding-bottom: clamp(40px, 6vw, 72px); display: flex; flex-direction: column; gap: clamp(40px, 6vw, 64px); }
.fragen-gruppe { scroll-margin-top: 96px; display: flex; flex-direction: column; gap: 14px; }
.keine-treffer { margin: 0; padding: 24px; border-radius: 12px; background: var(--sf2); font-size: 18px; line-height: 1.5; }
.kontakt-band {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px;
  padding: clamp(24px, 4vw, 40px); border-radius: 12px; background: var(--pt-s);
}
.h2-kontakt { margin: 0; font-family: var(--fd); font-weight: 700; font-size: var(--t-h2); line-height: 1.15; letter-spacing: -.02em; }

/* ---------- Abschluss-Band ---------- */
.abschluss-bereich { padding: clamp(48px, 7vw, 96px) 0; }
.abschluss {
  position: relative; overflow: hidden; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 24px 48px; align-items: center; padding: clamp(28px, 5vw, 56px); border-radius: 12px; background: var(--deep); color: var(--on-deep);
}
.abschluss-deko { position: absolute; right: -110px; bottom: -130px; }
.abschluss-deko circle { fill: none; stroke: var(--deep2); stroke-width: 14; }
.abschluss-deko path { fill: var(--deep2); }
.abschluss-text { position: relative; display: flex; flex-direction: column; gap: 12px; }
.abschluss-text h2 { margin: 0; font-family: var(--fd); font-weight: 700; font-size: var(--t-h2); line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; }
.abschluss-text p { margin: 0; font-size: 18px; line-height: 1.5; color: var(--on-deep2); }
.abschluss-knoepfe { position: relative; display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Preise ---------- */
.rechner-bereich { padding: 0 0 var(--sec); }
/* Mit Preisen steht der Rechner ohne hidden im HTML (gleich sichtbar, nichts springt); ohne Skript bleibt er aus. Was rechner.js
   füllt, hält bis dahin eine Zeile frei. */
html:not([data-fh-js]) .rechner-bereich { display: none; }
.r-h:empty::before, .r-summe:empty::before, .r-pro:empty::before, .r-hinweis:empty::before { content: "\a0"; }
.rechner {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); border-radius: 12px; overflow: hidden;
  background: var(--sf); border: 1px solid var(--line);
}
.rechner-eingaben { display: flex; flex-direction: column; gap: 28px; padding: clamp(22px, 4vw, 44px); }
.h2-rechner { margin: 0; font-family: var(--fd); font-weight: 700; font-size: var(--t-h2); letter-spacing: -.02em; line-height: 1.15; }
.r-gruppe { display: flex; flex-direction: column; gap: 12px; }
.r-zeile { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.r-zeile-umbruch { flex-wrap: wrap; }
.r-zeile[hidden] { display: none; }
.r-trenner { padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.r-trenner-oben { padding-top: 18px; border-top: 1px solid var(--line); }
.r-label { display: flex; flex-direction: column; gap: 2px; }
.r-l { font-size: 18px; font-weight: 700; }
.r-h { font-size: 15px; color: var(--ink2); }
.r-zahl {
  width: 84px; min-height: 48px; padding: 0 10px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--bg);
  font-family: var(--fd); font-weight: 700; font-size: 20px; text-align: center;
}
.r-zahl-gross { width: 120px; min-height: 52px; padding: 0 14px; font-size: 22px; text-align: right; }
.r-zahl:focus, .r-auswahl:focus { border-color: var(--pt); }
.r-regler { width: 100%; height: 32px; accent-color: var(--pt); cursor: pointer; }
.r-skala { position: relative; height: 18px; font-size: 13px; color: var(--ink2); }
.r-skala span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.r-skala span:first-child { transform: none; }
.r-skala span:last-child { transform: translateX(-100%); }
.r-schalter { position: relative; flex: none; width: 56px; height: 32px; border-radius: 999px; background: var(--line); transition: background .2s var(--ez); }
.r-knauf { position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: left .2s var(--ez); }
.r-schalter[aria-checked="true"] { background: var(--pt); }
.r-schalter[aria-checked="true"] .r-knauf { left: 28px; }
.r-stepper { display: flex; align-items: center; gap: 6px; }
.r-plusminus { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--line); font-size: 22px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.r-plusminus:hover { background: var(--sf2); }
.r-plusminus:disabled { opacity: .45; cursor: default; }
.r-auswahl { min-height: 52px; min-width: 220px; max-width: 100%; padding: 0 12px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--bg); font-size: 17px; font-weight: 700; }
.rechner-ergebnis { display: flex; flex-direction: column; gap: 22px; padding: clamp(22px, 4vw, 44px); background: var(--deep); color: var(--on-deep); }
.r-eyebrow { font-size: 15px; font-weight: 700; letter-spacing: .02em; color: var(--on-deep2); }
.r-summe { font-family: var(--fd); font-weight: 800; font-size: clamp(40px, 10vw, 88px); overflow-wrap: anywhere; line-height: .9; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.r-pro { font-size: 18px; font-weight: 700; color: var(--on-deep2); }
.r-posten { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.r-posten li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-top: 1px solid var(--deep2); }
.r-posten-text { display: flex; flex-direction: column; gap: 2px; }
.r-posten-name { font-size: 17px; font-weight: 700; }
.r-posten-weg { font-size: 14px; color: var(--on-deep2); font-variant-numeric: tabular-nums; }
.r-posten-betrag { font-family: var(--fd); font-weight: 700; font-size: 20px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.r-hinweis { margin: 0; font-size: 14px; line-height: 1.5; color: var(--on-deep2); }
.r-cta { margin-top: auto; align-self: flex-start; }
.preise-folgen { margin: 0; padding: 24px 0; border-top: 1.5px solid var(--ink); font-family: var(--fd); font-weight: 700; font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -.02em; }
.bausteine-bereich { padding: 0 0 clamp(32px, 5vw, 56px); }
.bausteine { display: flex; flex-direction: column; }
.baustein {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px 40px;
  padding: 28px 0; border-top: 1.5px solid var(--ink);
}
.baustein:last-child { border-bottom: 1.5px solid var(--ink); }
.baustein-text { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.baustein-name-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.baustein-name { margin: 0; font-family: var(--fd); font-weight: 700; font-size: var(--t-h3); line-height: 1.25; letter-spacing: -.01em; }
.tag-kern { padding: 4px 12px; border-radius: 999px; background: var(--pt); color: var(--on-pt); font-size: 13px; font-weight: 700; }
.tag-erw { padding: 4px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--ink); font-size: 13px; font-weight: 700; }
.baustein-desc { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ink2); }
.baustein-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 16px; font-weight: 700; }
.baustein-preis { display: flex; flex-direction: column; gap: 10px; }
.baustein-einfach { align-self: center; gap: 4px; }
.baustein-betrag { font-family: var(--fd); font-weight: 800; font-size: clamp(26px, 3vw, 34px); letter-spacing: -.03em; }
.baustein-einheit { font-size: 16px; color: var(--ink2); }
.preis-tabelle { width: 100%; border-collapse: collapse; font-size: 17px; font-variant-numeric: tabular-nums; }
.preis-tabelle caption { text-align: left; font-size: 14px; font-weight: 700; color: var(--ink2); padding-bottom: 6px; }
.preis-tabelle thead th { text-align: left; font-size: 14px; font-weight: 700; color: var(--ink2); padding: 6px 0; }
.preis-tabelle thead th:last-child { text-align: right; }
.preis-tabelle tbody tr { border-top: 1px solid var(--line); }
.preis-tabelle tbody tr:last-child { border-bottom: 1px solid var(--line); }
.preis-tabelle tbody th { text-align: left; font-weight: 500; padding: 10px 0; }
.preis-tabelle td { text-align: right; font-family: var(--fd); font-weight: 700; font-size: 20px; padding: 10px 0; }
.preis-notiz { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink2); }
.preis-notiz a { font-weight: 700; }
.haken-zeilen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.haken-zeilen li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 16px 0; border-top: 1.5px solid var(--ink); font-size: 18px; line-height: 1.5; }
/* Umschalter Monats- und Jahresvertrag im Rechner (echte Radioknöpfe, Pfeiltasten wie gewohnt) */
.r-vertrag { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0; padding: 4px; border: 0; border-radius: 999px; background: var(--deep2); }
.r-vertrag-wahl { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 8px; min-height: 48px; padding: 6px 14px; border-radius: 999px; font-size: 16px; font-weight: 700; color: var(--on-deep2); cursor: pointer; text-align: center; transition: background .2s var(--ez), color .2s var(--ez); }
.r-vertrag-wahl input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.r-vertrag-wahl:hover { color: var(--on-deep); }
.r-vertrag-wahl:has(input:checked) { background: var(--on-deep); color: var(--deep); }
.r-vertrag-wahl:has(input:focus-visible) { outline: 3px solid var(--ac); outline-offset: 2px; }
.r-vertrag-marke { padding: 1px 8px; border-radius: 999px; background: var(--ac); color: var(--on-ac); font-size: 12px; font-weight: 700; letter-spacing: .01em; white-space: nowrap; }
.r-vertrag-marke:empty { display: none; }
.r-jahr-hinweis { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--deep2); font-size: 15px; line-height: 1.5; color: var(--on-deep); }
.r-jahr-hinweis:empty { display: none; }
.r-jahr-hinweis strong { color: var(--ac); }
/* „So wird abgerechnet“: Monats- und Jahresvertrag nebeneinander, der Jahresvertrag hervorgehoben */
.vertrag-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(20px, 3vw, 32px); align-items: stretch; }
.vertrag-spalte { display: flex; flex-direction: column; gap: 14px; padding: clamp(22px, 3vw, 32px); border-radius: 12px; background: var(--sf); border: 1px solid var(--line); }
.vertrag-jahr { border: 2px solid var(--pt); box-shadow: 0 18px 40px -28px rgba(13, 85, 82, .55); }
.vertrag-name-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.vertrag-name { margin: 0; font-family: var(--fd); font-weight: 800; font-size: clamp(24px, 2.6vw, 30px); letter-spacing: -.03em; line-height: 1.1; }
.vertrag-marke { padding: 3px 10px; border-radius: 999px; background: var(--ac); color: var(--on-ac); font-size: 14px; font-weight: 700; white-space: nowrap; }
.vertrag-kurz { margin: 0; font-size: 17px; line-height: 1.5; color: var(--ink2); }
.vertrag-spalte .haken-zeilen li { font-size: 17px; padding: 13px 0; border-top-width: 1px; border-top-color: var(--line); }
.vertrag-beide li { font-size: 17px; }

/* ---------- Demo ---------- */
/* Geführter Rundgang: ansichten.css (nur /demo) */
.rollen-raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.rolle { display: flex; flex-direction: column; gap: 16px; padding: clamp(22px, 3vw, 32px); border-radius: 12px; background: var(--sf); border: 1px solid var(--line); }
.rolle-ini { width: 52px; height: 52px; border-radius: 50%; background: var(--pt-s); color: var(--pt); display: flex; align-items: center; justify-content: center; font-family: var(--fd); font-weight: 800; font-size: 18px; }
.h3-rolle { margin: 0; font-family: var(--fd); font-weight: 700; font-size: var(--t-h3); line-height: 1.25; letter-spacing: -.01em; }
.rolle-punkte { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rolle-punkte li { padding: 12px 0; border-top: 1px solid var(--line); font-size: 17px; line-height: 1.45; }

/* ---------- Ratgeber ---------- */
.ratgeber-liste { list-style: none; margin: clamp(12px, 2vw, 24px) 0 0; padding: 0; display: flex; flex-direction: column; }
.ratgeber-liste li { border-top: 1.5px solid var(--ink); }
.ratgeber-liste li:last-child { border-bottom: 1.5px solid var(--ink); }
.ratgeber-eintrag { display: flex; flex-direction: column; gap: 8px; padding: 24px 0; color: var(--ink); text-decoration: none; }
.ratgeber-eintrag:hover { color: var(--ink); }
.ratgeber-eintrag:hover .ratgeber-t { text-decoration: underline; text-underline-offset: 4px; }
.ratgeber-meta { font-size: 14px; font-weight: 700; color: var(--ink2); }
.ratgeber-t { font-family: var(--fd); font-weight: 750; font-size: clamp(24px, 2.8vw, 34px); line-height: 1.1; letter-spacing: -.025em; }
.ratgeber-d { font-size: 17px; line-height: 1.55; color: var(--ink2); }
.artikel-kopf { padding-top: clamp(28px, 5vw, 64px); padding-bottom: clamp(32px, 4vw, 48px); display: flex; flex-direction: column; gap: 20px; }
.artikel-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 15px; font-weight: 700; color: var(--ink2); }
.artikel-raster { display: flex; gap: clamp(40px, 5vw, 72px); align-items: flex-start; }
.artikel-toc { position: sticky; top: 96px; flex: none; width: 250px; display: flex; flex-direction: column; gap: 10px; }
.toc-h { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); }
.artikel-toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-left: 2px solid var(--line); }
.toc-link {
  display: flex; align-items: center; min-height: 44px; margin-left: -2px; padding: 6px 0 6px 16px; font-size: 16px; line-height: 1.3;
  color: var(--ink2); text-decoration: none; border-left: 2px solid transparent;
}
.toc-link:hover { color: var(--ink); }
.toc-link[aria-current="location"] { border-left-color: var(--ac); color: var(--ink); font-weight: 700; }
.toc-klein { display: none; border-radius: 12px; background: var(--sf); border: 1px solid var(--line); }
.toc-klein summary { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 18px; font-size: 17px; font-weight: 700; cursor: pointer; list-style: none; }
.toc-klein summary::-webkit-details-marker { display: none; }
.toc-klein ol { margin: 0; padding: 0 18px 16px 40px; display: flex; flex-direction: column; gap: 2px; font-size: 16px; }
.toc-klein-link { display: inline-flex; align-items: center; min-height: 40px; color: var(--ink); }
@media (max-width: 999.98px) { .artikel-toc { display: none; } .toc-klein { display: block; } }
.artikel-text { flex: 1; min-width: 0; max-width: 740px; display: flex; flex-direction: column; gap: 28px; font-size: 19px; line-height: 1.65; }
.artikel-text p { margin: 0; }
.artikel-abschnitt { scroll-margin-top: 96px; display: flex; flex-direction: column; gap: 20px; }
.artikel-fragen { gap: 12px; }
.h2-artikel { margin: 12px 0 0; font-family: var(--fd); font-weight: 700; font-size: var(--t-h2); line-height: 1.15; letter-spacing: -.02em; }
.kasten-kurz { padding: clamp(20px, 3vw, 28px); border-radius: 12px; background: var(--pt-s); }
.kasten-titel { margin: 0 0 8px !important; font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pt); }
.kasten-wichtig { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; padding: 18px 20px; border-radius: 12px; background: var(--pt-s); }
.kasten-wichtig p { font-size: 18px; line-height: 1.55; }
.kasten-zeichen { width: 36px; height: 36px; border-radius: 50%; background: var(--pt); color: var(--on-pt); display: flex; align-items: center; justify-content: center; font-family: var(--fd); font-weight: 800; font-size: 20px; }
.zitat { margin: 0; padding: clamp(20px, 3vw, 28px) clamp(20px, 3vw, 32px); border-left: 4px solid var(--pt); background: var(--sf); border-radius: 0 12px 12px 0; }
.zitat blockquote { margin: 0; font-family: var(--fd); font-weight: 600; font-size: clamp(19px, 2vw, 22px); line-height: 1.45; letter-spacing: -.01em; }
.zitat figcaption { margin-top: 12px; font-size: 15px; font-weight: 700; color: var(--ink2); }
.tabelle-rahmen { overflow-x: auto; border-radius: 12px; border: 1px solid var(--line); background: var(--sf); }
.vergleich { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 16px; line-height: 1.45; }
.vergleich caption { text-align: left; padding: 16px 18px 4px; font-size: 15px; font-weight: 700; color: var(--ink2); }
.vergleich thead th { text-align: left; padding: 12px 18px; border-bottom: 1.5px solid var(--ink); }
.vergleich tbody th, .vergleich td { padding: 14px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.vergleich tbody tr:last-child th, .vergleich tbody tr:last-child td { border-bottom: 0; }
.checkliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.checkliste li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-top: 1.5px solid var(--ink); font-size: 18px; line-height: 1.55; }
.check-nr { width: 32px; height: 32px; border-radius: 6px; border: 2px solid var(--pt); color: var(--pt); display: flex; align-items: center; justify-content: center; font-family: var(--fd); font-weight: 800; font-size: 16px; }
.kasten-rechtsrat { padding: 20px 22px; border-radius: 12px; border: 2px solid var(--ink); }
.kasten-rechtsrat p { font-size: 17px; line-height: 1.55; }
.kasten-rechtsrat p + p { margin-top: 6px; color: var(--ink2); }
.quellen { display: flex; flex-direction: column; gap: 12px; }
.h2-quellen { margin: 0; font-family: var(--fd); font-weight: 750; font-size: 24px; letter-spacing: -.02em; }
.quellen ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; font-size: 16px; line-height: 1.5; color: var(--ink2); }
.quellen-abruf { font-size: 15px; color: var(--ink2); }
/* Ratgeber: Autor, Checkliste zum Abhaken (nichts wird gespeichert), Aufzählung, Formeln, Mustertexte */
.artikel-autor { margin: 0; font-size: 17px; color: var(--ink2); }
.artikel-autor strong { color: var(--ink); }
.artikel-text { overflow-wrap: break-word; }
@media (max-width: 599.98px) { .artikel-text { hyphens: auto; } }
.checkliste-haken li { align-items: start; }
.check-kasten { width: 26px; height: 26px; margin: 2px 0 0; accent-color: var(--pt); cursor: pointer; }
.checkliste-haken label { cursor: pointer; }
.check-kasten:checked + label { color: var(--ink2); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.punkte { margin: 0; padding-left: 24px; display: flex; flex-direction: column; gap: 8px; }
.formel-kasten { display: flex; flex-direction: column; gap: 12px; padding: clamp(20px, 3vw, 28px); border-radius: 22px; background: var(--pt-s); }
.formel { margin: 0; padding: 12px 16px; border-radius: 12px; background: var(--sf); font-family: var(--fd); font-weight: 700; font-size: 18px; line-height: 1.4; letter-spacing: -.01em; }
.mustertext { margin: 0; border-radius: 18px; border: 1.5px dashed var(--line); background: var(--sf); overflow: hidden; }
.mustertext figcaption { padding: 12px 18px; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 700; color: var(--ink2); }
.mustertext-text { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; font-size: 17px; line-height: 1.55; }
.vergleich-schmal { min-width: 0; }
/* Ratgeber: Knopf zum Herunterladen einer Vorlage, so breit wie sein Text, am Handy darf er umbrechen */
.knopf-herunterladen { align-self: flex-start; max-width: 100%; padding-top: 10px; padding-bottom: 10px; text-align: center; }
/* Urlaubs- und Überstundenrechner (urlaubsrechner.js, ueberstundenrechner.js): ohne Skript bleiben sie aus, die Formeln darunter
   stehen immer da */
html:not([data-fh-js]) .urlaubsrechner, html:not([data-fh-js]) .ueberstundenrechner { display: none; }
.urlaubsrechner .rechner, .ueberstundenrechner .rechner { border-radius: 24px; }
.urlaubsrechner .rechner-eingaben, .urlaubsrechner .rechner-ergebnis, .ueberstundenrechner .rechner-eingaben, .ueberstundenrechner .rechner-ergebnis { gap: 18px; }
.h3-rechner { margin: 0; font-family: var(--fd); font-weight: 800; font-size: clamp(24px, 2.6vw, 30px); letter-spacing: -.03em; line-height: 1.1; }
.r-feld { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.r-feld .r-label { flex: 1 1 220px; }
.r-feld .r-l { font-size: 17px; }
.r-auswahl-schmal { min-width: 96px; }
.r-datum { min-height: 52px; padding: 0 12px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--bg); font-size: 17px; font-weight: 700; }
.r-datum:focus, .r-feld .r-zahl:focus { border-color: var(--pt); }
.urlaubsrechner .r-summe, .ueberstundenrechner .r-summe { margin: 0; font-size: clamp(56px, 12vw, 88px); }
.urlaubsrechner .r-pro, .ueberstundenrechner .r-pro { margin: 0; }
.ueberstundenrechner .r-hinweis strong { color: var(--on-deep); }
.r-fehler { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--bad-s); color: var(--bad); font-size: 16px; font-weight: 700; }
.r-weg { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; font-size: 16px; line-height: 1.5; }
.r-weg li::marker { color: var(--on-deep2); }
.weiter-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 0 32px; }
.weiter-liste li { border-top: 1.5px solid var(--ink); }
.weiter-liste-eng { width: 100%; max-width: 960px; }
.weiter-link { display: flex; flex-direction: column; gap: 6px; padding: 20px 0; color: var(--ink); text-decoration: none; }
.weiter-link:hover { color: var(--ink); text-decoration: underline; }
.weiter-tag { font-size: 14px; font-weight: 700; color: var(--ink2); }
.weiter-t { font-family: var(--fd); font-weight: 700; font-size: 22px; letter-spacing: -.02em; line-height: 1.2; }

/* ---------- Sicherheit ---------- */
.zwei-spalten-text { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(32px, 5vw, 72px); align-items: start; }
.punkte-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.punkte-liste li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); font-size: 18px; line-height: 1.4; font-weight: 700; }
.punkte-liste li:first-child { border-top: 1.5px solid var(--ink); }
.punkt-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--pt-s); color: var(--pt); display: flex; align-items: center; justify-content: center; }
.schaubild { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.schaubild-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; align-items: stretch; }
.sb-spalte { display: flex; flex-direction: column; gap: 14px; padding: clamp(20px, 3vw, 28px); border-radius: 12px; background: var(--sf); border: 1px solid var(--line); }
.sb-spalte p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink2); }
.sb-mitte { background: var(--deep); color: var(--on-deep); border-color: var(--deep); }
.sb-mitte p { color: var(--on-deep2); }
.sb-nr { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pt); }
.sb-mitte .sb-nr { color: var(--on-deep2); }
.sb-ms { display: flex; align-items: center; gap: 12px; font-family: var(--fd); font-weight: 750; font-size: 22px; letter-spacing: -.02em; }
.sb-titel { font-family: var(--fd); font-weight: 750; font-size: 22px; letter-spacing: -.02em; }
.sb-pille { align-self: flex-start; padding: 5px 12px; border-radius: 999px; background: var(--pt-s); color: var(--pt); font-size: 13px; font-weight: 700; }
.sb-dbs { display: flex; flex-direction: column; gap: 8px; }
.db-karte { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 12px; background: var(--deep2); }
.db-name { font-weight: 700; font-size: 16px; }
.db-inhalt { font-size: 14px; color: var(--on-deep2); }
.db-schloss { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--on-deep2); }
.sb-trenner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; color: var(--on-deep2); }
.sb-trenner span:first-child, .sb-trenner span:last-child { height: 0; border-top: 1.5px dashed var(--on-deep2); }
.sb-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sb-liste li { padding: 10px 0; border-top: 1px solid var(--line); font-size: 16px; font-weight: 700; }
.schaubild figcaption { font-size: 15px; color: var(--ink2); }

/* ---------- IT-Admins ---------- */
.it-schritte { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.it-schritte li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 16px; padding: 20px 0; border-top: 1.5px solid var(--ink); }
.it-nr { grid-row: span 2; font-family: var(--fd); font-weight: 800; font-size: 48px; line-height: .9; letter-spacing: -.05em; color: var(--pt); }
.h3-schritt { margin: 0; font-family: var(--fd); font-weight: 700; font-size: var(--t-h3); line-height: 1.25; letter-spacing: -.01em; }
.it-schritte p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ink2); }
.rechte-tabelle { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 16px; line-height: 1.45; }
.rechte-tabelle thead th { text-align: left; padding: 14px 18px; border-bottom: 1.5px solid var(--ink); font-size: 14px; color: var(--ink2); }
.rechte-tabelle tbody th, .rechte-tabelle td { padding: 16px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.rechte-tabelle tbody tr:last-child th, .rechte-tabelle tbody tr:last-child td { border-bottom: 0; }
.rechte-tabelle tbody th { display: flex; flex-direction: column; gap: 6px; font-weight: 700; }
.rechte-tabelle code, .gruppenrechte code, .skript-ablauf code {
  align-self: flex-start; padding: 2px 8px; border-radius: 6px; background: var(--sf2); color: var(--ink2); font-size: 13px; font-weight: 500;
}
.recht-name { font-size: 17px; }
.it-rbac { gap: clamp(28px, 4vw, 44px); }
.gruppenrechte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.gruppenrechte li { display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: 12px; background: var(--sf); border: 1px solid var(--line); }
.gr-t { font-size: 18px; font-weight: 700; }
.gr-w { font-size: 16px; line-height: 1.5; color: var(--ink2); }
.gr-fuer { align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: var(--pt-s); color: var(--pt); font-size: 13px; font-weight: 700; }
.skript-bereich { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(24px, 4vw, 48px); align-items: start; }
.skript-bereich .knopf { align-self: flex-start; }
.skript-ablauf { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; font-size: 16px; line-height: 1.5; }
.skript-ablauf li { padding-left: 4px; }
.skript-ablauf li span { display: block; }
.skript-ablauf code { display: inline-block; margin-top: 4px; }
.code-block { margin: 0; border-radius: 12px; overflow: hidden; background: #061211; color: #EAF2EF; }
.code-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 8px 0 18px; border-bottom: 1px solid #1B3634; }
.code-kopf figcaption { font-size: 14px; font-weight: 700; color: #A8BFBA; }
.code-kopieren { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 700; color: #EAF2EF; }
.code-kopieren:hover { background: #12302E; }
.code-block pre { margin: 0; padding: 18px; overflow-x: auto; font-size: 14px; line-height: 1.6; }
.code-block code { font-size: inherit; white-space: pre; }
.code-block { --focus: var(--ac); }
.pruef-beispiel { display: flex; flex-direction: column; gap: 14px; padding: clamp(20px, 3vw, 28px); border-radius: 12px; background: var(--sf); border: 1px solid var(--line); }
.pruef-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.pruef-ergebnis { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; animation: fhIn .3s var(--ez) both; }
.pruef-ergebnis li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 16px; line-height: 1.45; }
.pruef-ergebnis .haken { stroke: var(--ok); }
.kasten-schluessel { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; align-items: center; padding: 18px 20px; border-radius: 12px; background: var(--pt-s); }
.kasten-schluessel p { margin: 0; font-size: 18px; font-weight: 700; }
.kasten-icon { width: 48px; height: 48px; border-radius: 12px; background: var(--sf); color: var(--pt); display: flex; align-items: center; justify-content: center; }

/* ---------- Rechtstexte ---------- */
.recht { padding-top: clamp(28px, 5vw, 64px); padding-bottom: var(--sec); display: flex; flex-direction: column; gap: 28px; }
.recht-kopf { display: flex; flex-direction: column; gap: 16px; }
.recht-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; font-size: 15px; font-weight: 700; color: var(--ink2); }
.knopf-drucken { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--ink); color: var(--ink); font-size: 15px; font-weight: 700; }
.recht-folgt { margin: 0; padding: 24px; border-radius: 12px; background: var(--sf2); font-size: 18px; line-height: 1.5; }
/* Text aus der Betreiber-Datei (nur h2, h3, p, Listen, Links, Tabellen) */
.recht-inhalt { font-size: 17px; line-height: 1.65; overflow-wrap: anywhere; }
.recht-inhalt h2 { margin: 32px 0 10px; font-family: var(--fd); font-weight: 750; font-size: 24px; letter-spacing: -.02em; line-height: 1.2; }
.recht-inhalt h3 { margin: 24px 0 8px; font-size: 19px; font-weight: 700; }
.recht-inhalt p { margin: 0 0 14px; }
.recht-inhalt ul, .recht-inhalt ol { margin: 0 0 14px; padding-left: 24px; }
.recht-inhalt li { margin-bottom: 4px; }
.recht-inhalt table { display: block; max-width: 100%; overflow-x: auto; margin: 0 0 14px; border-collapse: collapse; font-size: 16px; }
.recht-inhalt th, .recht-inhalt td { padding: 8px 12px; text-align: left; vertical-align: top; border: 1px solid var(--line); }

/* ---------- Fuß ---------- */
.fuss { background: var(--deep); color: var(--on-deep); padding: clamp(48px, 6vw, 80px) 0 28px; }
.fuss-innen { display: flex; flex-direction: column; gap: 48px; }
.fuss-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 36px 32px; }
.fuss-spalte { display: flex; flex-direction: column; gap: 10px; }
.fuss-t { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: .02em; color: var(--on-deep2); }
.fuss-spalte ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.fuss-spalte a, .fuss-spalte p { display: flex; align-items: center; min-height: 44px; margin: 0; font-size: 16px; color: var(--on-deep); text-decoration: none; }
.fuss-spalte a:hover { color: var(--on-deep); text-decoration: underline; }
.fuss-adresse { display: flex; flex-direction: column; font-style: normal; }
.fuss-spalte .fuss-profile { margin-top: 12px; }

.fuss-mitte { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 32px; padding-top: 32px; border-top: 1px solid var(--deep2); }
.fuss-marke { font-size: clamp(48px, 8vw, 96px); line-height: .9; }
.fuss-claim { margin: 0; font-size: 17px; font-weight: 700; }
.fuss-unten { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.schalter-reihe { display: flex; flex-wrap: wrap; gap: 12px; }
.copy { font-size: 15px; color: var(--on-deep2); }

/* ---------- Drucken (Rechtstexte) ---------- */
@media print {
  [data-fh-noprint], .skip-link, .menue { display: none !important; }
  body { background: #fff; color: #000; }
  .recht { padding: 0; }
}

/* ---------- Bildschirmfoto der App (bausteine.js bildschirmfoto, Bilder in assets/bilder/) ---------- */
/* Höchstens so groß wie aufgenommen (width/height im HTML), kleiner wenn der Platz fehlt. Schatten nur hier. */
.bildschirmfoto { margin: 0; min-width: 0; }
.bildschirmfoto img {
  display: block; max-width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: 12px; background: var(--sf);
  box-shadow: 0 1px 2px rgba(14, 42, 43, .08), 0 12px 32px rgba(14, 42, 43, .10);
}
[data-fh-theme="dunkel"] .bildschirmfoto img { box-shadow: 0 1px 2px rgba(0, 0, 0, .30), 0 12px 32px rgba(0, 0, 0, .35); }

/* ---------- Hilfe (/hilfe, /hilfe/<rolle>; Text aus app/hilfe/*.md, Umwandler seiten/md.js) ---------- */
/* Übersicht: drei Kacheln je Rolle, Suche (hilfe.js), darunter alle Themen als Liste mit Linien wie im Ratgeber */
.hilfe-suche { max-width: 760px; }
.hilfe-kacheln { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.hilfe-kachel {
  height: 100%; display: flex; flex-direction: column; gap: 10px; padding: clamp(22px, 3vw, 30px); border-radius: var(--r);
  background: var(--sf); border: 1.5px solid var(--line); color: var(--ink); text-decoration: none;
  transition: border-color .2s var(--ez), transform .2s var(--ez), box-shadow .2s var(--ez);
}
.hilfe-kachel:hover { color: var(--ink); border-color: var(--pt); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(14, 42, 43, .10); }
.hilfe-kachel:active { transform: translateY(0); box-shadow: none; }
[data-fh-motion="reduziert"] .hilfe-kachel, [data-fh-motion="reduziert"] .hilfe-kachel:hover { transition: none; transform: none; }
.hilfe-kachel-icon { width: 52px; height: 52px; margin-bottom: 6px; border-radius: 50%; background: var(--pt-s); color: var(--pt); display: flex; align-items: center; justify-content: center; }
.hilfe-kachel-t { font-family: var(--fd); font-weight: 750; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.1; letter-spacing: -.025em; }
.hilfe-kachel-z { font-size: 17px; line-height: 1.5; color: var(--ink2); }
.hilfe-kachel-n { margin-top: auto; padding-top: 10px; display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: var(--pt); }
.hilfe-kachel-n span[aria-hidden] { transition: transform .2s var(--ez); }
.hilfe-kachel:hover .hilfe-kachel-n span[aria-hidden] { transform: translateX(3px); }
.hilfe-uebersicht { padding-bottom: clamp(24px, 4vw, 48px); display: flex; flex-direction: column; gap: clamp(40px, 6vw, 64px); }
.hilfe-rolle { scroll-margin-top: 96px; display: flex; flex-direction: column; gap: 16px; }
.hilfe-rolle-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 24px; }
.hilfe-themen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 0 32px; }
.hilfe-eintrag { display: flex; flex-direction: column; gap: 6px; padding: 12px 0 14px; border-top: 1.5px solid var(--ink); }
.hilfe-thema { font-size: 18px; font-weight: 700; line-height: 1.35; color: var(--ink); text-decoration: none; }
.hilfe-thema:hover { color: var(--pt); text-decoration: underline; text-underline-offset: 3px; }
.hilfe-auszug { font-size: 15px; line-height: 1.5; color: var(--ink2); text-decoration: none; overflow-wrap: anywhere; }
.hilfe-auszug:hover { color: var(--ink); text-decoration: underline; }
/* Hinweis auf den Hilfe-Chat in der App */
.hilfe-hinweis { max-width: 820px; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px 20px; border-radius: var(--r); background: var(--pt-s); }
.hilfe-hinweis p { margin: 0; font-size: 17px; line-height: 1.55; }
.hilfe-hinweis-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--sf); color: var(--pt); display: flex; align-items: center; justify-content: center; }
/* Seite je Rolle: Gerüst der Ratgeber-Artikel, Text etwas kleiner und dichter, das Inhaltsverzeichnis scrollt selbst */
.hilfe-toc { max-height: calc(100vh - 120px); overflow-y: auto; overscroll-behavior: contain; }
.hilfe-toc .toc-link { min-height: 36px; padding-top: 4px; padding-bottom: 4px; font-size: 15px; }
.hilfe-text { gap: clamp(40px, 5vw, 56px); font-size: 18px; line-height: 1.6; }
.hilfe-abschnitt { gap: 16px; }
.h2-hilfe { margin: 0; padding-top: 18px; border-top: 1.5px solid var(--ink); }
.h3-hilfe { margin: 12px 0 0; font-family: var(--fd); font-weight: 700; font-size: var(--t-h3); line-height: 1.25; letter-spacing: -.01em; scroll-margin-top: 96px; }
.hilfe-text .punkte .punkte { margin-top: 8px; }
.hilfe-text li::marker { color: var(--pt); font-weight: 700; }
.hilfe-text code { overflow-wrap: anywhere; }
.artikel-meta a { color: var(--pt); }

/* ---------- Funktionsseiten (Welle 3, Design-Bericht Abschnitt 4): echte Bildschirmfotos, je Seite eine Hauptkomponente ---------- */
/* Rechte Hero-Spalte ohne Fläche dahinter: Bildschirmfoto, Tabelle oder Gegenüberstellung stehen direkt auf dem Seitengrund.
   Bildschirmfotos neben dem Text sind eng zugeschnitten; breit: Text 5, Bühne 7 (Spesen), handy: das Handy in Handygröße. */
.fx-hero { align-items: start; }
@media (min-width: 1100px) {
  .fx-hero-breit { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
.fx-buehne { min-width: 0; display: flex; flex-direction: column; align-items: center; }
.fx-buehne > * { width: 100%; }
.fx-buehne-handy > .bildschirmfoto { max-width: 320px; }

/* Zeiterfassung: die Desktop-Übersicht unter dem Hero über die volle Breite */
.fx-bild-voll { padding-bottom: var(--sec); }

/* Zeitstrahl eines Arbeitstags: Balken 06:00–19:00 in 5-Minuten-Spalten (156), Arbeit Petrol, Pause schraffiert */
.fx-tag { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.fx-tag-balken, .fx-tag-skala { display: grid; grid-template-columns: repeat(156, minmax(0, 1fr)); }
.fx-tag-balken { height: 44px; border-radius: var(--r); background: var(--sf2); overflow: hidden; }
.fx-tag-balken > span { grid-row: 1; }
.fx-tag-arbeit { background: var(--pt); }
.fx-tag-a1 { grid-column: 21 / 76; }
.fx-tag-pause { grid-column: 76 / 82; background: repeating-linear-gradient(135deg, var(--ink2) 0 2px, transparent 2px 6px); opacity: .45; }
.fx-tag-a2 { grid-column: 82 / 125; }
.fx-tag-skala span { padding-left: 6px; border-left: 1px solid var(--line); font-size: 14px; color: var(--ink2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fx-tag-skala span:nth-child(1) { grid-column: 1 / span 30; }
.fx-tag-skala span:nth-child(2) { grid-column: 37 / span 30; }
.fx-tag-skala span:nth-child(3) { grid-column: 73 / span 30; }
.fx-tag-skala span:nth-child(4) { grid-column: 109 / span 30; }
.fx-tag-skala span:nth-child(5) { grid-column: 145 / -1; }
.fx-tag-summe { font-size: 15px; color: var(--ink2); font-variant-numeric: tabular-nums; }
.fx-tag-liste { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 28px clamp(24px, 3vw, 40px); }
.fx-tag-liste li { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1.5px solid var(--ink); }
.fx-tag-zeit { font-family: var(--fd); font-weight: 800; font-size: 32px; line-height: 1; letter-spacing: -.03em; color: var(--pt); font-variant-numeric: tabular-nums; }
.fx-tag-was, .fx-strecke-t, .fx-rolle-t, .fx-kk-h { margin: 0; font-family: var(--fd); font-weight: 700; font-size: var(--t-h3); line-height: 1.25; letter-spacing: -.01em; }
.fx-tag-liste p, .fx-strecke p, .fx-rollen p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink2); text-wrap: pretty; }
@media (max-width: 559.98px) {
  .fx-tag-skala span:nth-child(even), .fx-tag-skala span:nth-child(5) { display: none; }
}

/* Urlaub: fünf Stationen als Strecke über die volle Breite, unter 900 px senkrecht */
.fx-strecke { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 28px; }
.fx-strecke li { position: relative; display: flex; flex-direction: column; gap: 12px; }
.fx-strecke li::before { content: ""; position: absolute; top: 21px; left: 52px; right: -20px; height: 2px; background: var(--line); }
.fx-strecke li:last-child::before { display: none; }
.fx-strecke-nr {
  position: relative; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--pt); background: var(--bg); color: var(--pt);
  display: flex; align-items: center; justify-content: center; font-family: var(--fd); font-weight: 800; font-size: 18px;
}
.fx-strecke li:last-child .fx-strecke-nr { background: var(--pt); color: var(--on-pt); }
@media (max-width: 899.98px) {
  .fx-strecke { grid-template-columns: minmax(0, 1fr); }
  .fx-strecke li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 6px 16px; padding-bottom: 28px; }
  .fx-strecke li:last-child { padding-bottom: 0; }
  .fx-strecke-nr { grid-row: span 2; }
  .fx-strecke li::before { top: 52px; bottom: 6px; left: 21px; right: auto; width: 2px; height: auto; }
}

/* Zeile aus Text und Bildschirmfoto (5 : 7); breit: Überschrift und Text nebeneinander, das Bild darunter über die volle Breite;
   Personalakte: drei Textblöcke nebeneinander, die Aufnahme darunter */
.fx-zeile-abschnitt { padding: 0 0 var(--sec); }
.fx-zeile { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.fx-zeile-text { display: flex; flex-direction: column; gap: 14px; }
.fx-zeile-text p { margin: 0; max-width: 46ch; font-size: 17px; line-height: 27px; color: var(--ink2); text-wrap: pretty; }
.fx-zeile-text .h3-klein { margin-top: 14px; }
.fx-zeile-breit { grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 48px); }
.fx-zeile-breit .fx-zeile-text { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 14px clamp(28px, 5vw, 72px); align-items: start; }
.fx-zeile-breit .fx-zeile-text h2 { grid-row: span 3; }
.fx-zeile-breit .fx-zeile-text p { grid-column: 2; }
.fx-zeile-breit > .bildschirmfoto, .fx-zeile-akte > .bildschirmfoto { width: 100%; }
.fx-zeile-akte { grid-template-columns: minmax(0, 1fr); align-items: start; gap: clamp(28px, 4vw, 48px); }
@media (min-width: 900px) {
  /* je Spalte eine H3 mit ihrem Absatz: feste Zeilen, die Spalten füllen sich der Reihe nach */
  .fx-zeile-akte .fx-zeile-text { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px clamp(24px, 3vw, 40px); }
  .fx-zeile-akte .fx-zeile-text h2 { grid-column: 1 / -1; }
  .fx-zeile-akte .fx-zeile-text h3 { grid-row: 2; }
  .fx-zeile-akte .fx-zeile-text p { grid-row: 3; }
}
@media (max-width: 899.98px) {
  .fx-zeile { grid-template-columns: minmax(0, 1fr); }
  .fx-zeile-breit .fx-zeile-text { grid-template-columns: minmax(0, 1fr); }
  .fx-zeile-breit .fx-zeile-text h2 { grid-row: auto; }
  .fx-zeile-breit .fx-zeile-text p { grid-column: auto; }
}

/* Tabellen: technische Angaben (Stempelterminals) und Register der Personalakte */
.fx-tabelle { min-width: 0; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--sf); }
.fx-spez, .fx-register { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.45; }
.fx-spez caption, .fx-register caption { padding: 18px 20px 14px; text-align: left; font-family: var(--fd); font-weight: 700; font-size: 18px; letter-spacing: -.01em; }
.fx-spez th, .fx-spez td, .fx-register th, .fx-register td { padding: 12px 20px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.fx-spez tbody th { width: 30%; font-weight: 700; }
.fx-register thead th { padding-top: 8px; padding-bottom: 8px; font-size: 14px; font-weight: 700; color: var(--ink2); }
.fx-register tbody th { font-weight: 700; }
.fx-register td { font-size: 15px; color: var(--ink2); }
.fx-register .fx-reg-nr { width: 3em; padding-right: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.fx-register tr.ist-vertraulich { background: var(--pt-s); }
.fx-recht, .fx-reg-zusatz { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 14px; }
.fx-recht { color: var(--pt); }
.fx-reg-zusatz { font-weight: 400; color: var(--ink2); }
@media (max-width: 519.98px) {
  .fx-spez th, .fx-spez td, .fx-register th, .fx-register td { padding: 10px 12px; }
  .fx-spez caption, .fx-register caption { padding: 16px 12px 12px; }
  .fx-spez tbody th { width: auto; }
  .fx-spez tbody tr { display: grid; }
  .fx-spez tbody td { padding-top: 0; border-top: 0; }
  /* Register: Nr. und Name in einer Zeile, die Frist darunter */
  .fx-register tr { display: grid; grid-template-columns: 2.6em minmax(0, 1fr); }
  .fx-register tr > :last-child { grid-column: 2; padding-top: 0; border-top: 0; }
}

/* Urlaub: Kasten „Was Fairhours in Outlook darf“ */
.fx-kasten { max-width: 820px; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: clamp(24px, 4vw, 40px); border-radius: var(--r); background: var(--pt-s); }
.fx-kasten-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.fx-kasten-liste li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; font-size: 17px; line-height: 27px; }

/* Spesen: wer was macht, drei Spalten mit Trennlinien, unter 900 px untereinander */
.fx-rollen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1.5px solid var(--ink); }
.fx-rollen li { display: flex; flex-direction: column; gap: 10px; padding: 24px 28px 0 0; }
.fx-rollen li + li { padding-left: 28px; border-left: 1px solid var(--line); }
.fx-rolle-wer { font-size: 15px; font-weight: 700; color: var(--pt); }
@media (max-width: 899.98px) {
  .fx-rollen { grid-template-columns: minmax(0, 1fr); }
  .fx-rollen li { padding: 20px 0; }
  .fx-rollen li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
}

/* KI-Seiten: Gegenüberstellung „Was die KI macht / Was sie nicht macht“ */
.fx-kk { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); border: 1px solid var(--line); border-radius: var(--r); background: var(--sf); overflow: hidden; }
.fx-kk-spalte { display: flex; flex-direction: column; gap: 14px; padding: clamp(20px, 3vw, 28px); }
.fx-kk-nein { background: var(--sf2); }
.fx-kk-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.fx-kk-liste li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 16px; line-height: 1.5; }
.fx-kk-liste .haken { width: 22px; height: 22px; }
.fx-nein-icon { flex: none; margin-top: 2px; fill: none; stroke: var(--ink2); stroke-width: 2.6; stroke-linecap: round; }
.fx-kk-fuss { grid-column: 1 / -1; margin: 0; padding: 16px clamp(20px, 3vw, 28px); border-top: 1px solid var(--line); font-size: 16px; }
.fx-kk-fuss a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; }

/* Fünf Schritte („So läuft es ab“) ab 1080 px in einer Reihe statt vier und einem einzelnen darunter */
@media (min-width: 1080px) {
  .schritt-raster:has(> li:nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}