/* =====================================================================
   Besoldungsrechner für Soldatinnen und Soldaten
   Gestaltung: ruhig-technisch. Weiche Radien, satte Flächen, gerade
   Sektionsgrenzen, Präzisionslinien, Monospace-Ziffern für alle Beträge.
   Farbklang: Amber-Signal auf Anthrazit bzw. hellem Neutralton.

   Überarbeitet 06.08.2026 (AVIDIS Design-Geschmack, siehe Befehlsbuch):
   Abgeschrägte Kanten → Radien · Vermessungsraster und Höhenlinien raus
   · Scanlines und Korn raus · HUD-Eckklammern raus · Hellmodus entbeigt.
   Begründung: Mustertexturen im Hintergrund und gezackte/angeschnittene
   Kanten sind bei Laumen und beim Feldjäger zweimal zurückgebaut worden.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Farbschema. Das Attribut data-theme wird vom Inline-Skript im <head>
   immer explizit gesetzt (Systemvorgabe oder gespeicherte Wahl), deshalb
   genügen zwei Token-Sätze ohne Media-Query-Dopplung.
   --------------------------------------------------------------------- */

:root, :root[data-theme="light"] {
  /* =====================================================================
     FARBSCHEMA FÜR SYSTEMBEDIENTEILE

     Die aufgeklappte Liste eines <select> zeichnet nicht der Browser,
     sondern das Betriebssystem. Kein CSS der Seite erreicht sie — weder
     Hintergrund noch Schrift noch der Balken auf dem gewählten Eintrag.
     Der EINE Hebel ist `color-scheme`: Er sagt dem System, in welcher
     Welt es zeichnen soll. Ohne die Angabe nahm es immer sein Hellschema
     mit Systemblau — auf der dunklen Seite ein weiß leuchtender Kasten.

     `accent-color` färbt zusätzlich den Auswahlbalken sowie Haken- und
     Punktfelder. Die Kontrastfarbe der Schrift darin bestimmt der Browser
     selbst, deshalb je Schema ein Grün mit passender Helligkeit.
     ===================================================================== */
  color-scheme: light;
  accent-color: var(--sage);

  /* Flächen — frisches, sehr helles Grünweiss. Die Karten stehen in reinem
     Weiss darauf; Tiefe entsteht über weiche Schatten statt über Rahmen.
     Überarbeitet 06.08.2026: der vorherige Grundton (#E7EDE0) war ein
     gedecktes Graugrün und liess die Oberfläche grau statt frisch wirken. */
  --bg: #F5F8EF;
  --bg-2: #EDF3E2;
  --panel: #FFFFFF;
  --panel-2: #FFFFFF;
  --feld: #F7FAF2;
  --line: #DEE8CE;
  --line-soft: #EBF1E0;

  /* Text — Kontrast auf --bg: tx 15,6:1 · tx-2 7,6:1 · tx-3 5,0:1 */
  --tx: #16210F;
  --tx-2: #47563D;
  --tx-3: #667359;

  /* Signalfarben.
     Grün = Bundeswehr-Oliv aus der Vorlage, trägt Struktur und Bestätigung.
     Amber = warmes, erdiges Orange, trägt Ergebnis und Handlung. */
  --sage: #47601F;
  --sage-tief: #34490F;
  --sage-tint: #E8F1D6;
  /* Drei Orangetöne nach Funktion getrennt, damit das leuchtende Orange
     der Vorlage erhalten bleibt, ohne Textkontraste zu unterlaufen:
     --amber       Text, Symbole, Marker  (5,2:1 auf Weiss)
     --amber-flaeche  gefüllte Flächen, dunkle Schrift darauf (9,0:1)
     --amber-hell  nur Verläufe, Schleier und Tönungen — trägt nie Text */
  --amber: #A05F0A;
  --amber-dim: #C9821E;
  --amber-flaeche: #E9A22E;
  --amber-hell: #F5BE5E;
  --amber-glow: rgba(233, 162, 46, 0.16);
  --amber-tint: #FDF2DE;
  --amber-kontrast: #241A06;
  --alert: #B03A1E;
  --alert-tint: #FBEAE5;
  --signal: #0F7A62;
  --signal-tint: #DEF3EE;

  /* Weicher Farbschleier im Kopfbereich */
  --wolke-1: rgba(233, 162, 46, 0.16);
  --wolke-2: rgba(71, 96, 31, 0.17);
  --korn: 0;
  --hover: rgba(233, 162, 46, 0.11);
  --hover-reihe: rgba(71, 96, 31, 0.055);
  --glas: rgba(255, 255, 255, 0.9);
  --glas-leiste: rgba(245, 248, 239, 0.97);
  --pfeil: %2347563D;
  --schatten: 0 1px 2px rgba(22, 33, 15, 0.04), 0 5px 14px rgba(22, 33, 15, 0.05);
  --schatten-hoch: 0 2px 6px rgba(22, 33, 15, 0.06), 0 16px 36px rgba(22, 33, 15, 0.11);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  /* Flächen — tiefes Grünschwarz, Karten deutlich abgesetzt */
  --bg: #101610;
  --bg-2: #151C14;
  --panel: #1B231A;
  --panel-2: #1B231A;
  --feld: #131A12;
  --line: #33422C;
  --line-soft: #26311F;

  /* Text — Kontrast auf --bg: tx 15,3:1 · tx-2 8,8:1 · tx-3 5,5:1 */
  --tx: #ECF3E4;
  --tx-2: #AFC0A6;
  --tx-3: #85977C;

  /* Signalfarben */
  --sage: #A9C973;
  --sage-tief: #C3DD96;
  --sage-tint: rgba(169, 201, 115, 0.13);
  --amber: #EFAE2A;
  --amber-dim: #B87F17;
  --amber-flaeche: #EFAE2A;
  --amber-hell: #EFAE2A;
  --amber-glow: rgba(239, 174, 42, 0.15);
  --amber-tint: rgba(239, 174, 42, 0.12);
  --amber-kontrast: #14180F;
  --alert: #F2917A;
  --alert-tint: rgba(242, 145, 122, 0.13);
  --signal: #4BD6B0;
  --signal-tint: rgba(75, 214, 176, 0.13);

  /* Weicher Farbschleier im Kopfbereich */
  --wolke-1: rgba(239, 174, 42, 0.16);
  --wolke-2: rgba(169, 201, 115, 0.11);
  --korn: 0;
  --hover: rgba(239, 174, 42, 0.10);
  --hover-reihe: rgba(169, 201, 115, 0.06);
  --glas: rgba(27, 35, 26, 0.86);
  --glas-leiste: rgba(16, 22, 16, 0.97);
  --pfeil: %23AFC0A6;
  --schatten: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.26);
  --schatten-hoch: 0 2px 6px rgba(0, 0, 0, 0.34), 0 18px 40px rgba(0, 0, 0, 0.38);
}

:root {
  /* Typografie */
  /* Schriftsystem, überarbeitet 06.08.2026.
     Weg von Inter: es ist die Vorgabeschrift jedes Baukastens und jeder
     KI-Ausgabe und trägt keine eigene Handschrift.

     Space Grotesk (Florian Karsten) — geometrische Groteske mit
     scharfen Schnitten und Gewichten bis 1000. Schmal ist bei deutschen
     Wortungetümen wie „Erschwerniszulagenverordnung" kein Stilmittel,
     sondern Notwendigkeit.

     IBM Plex Sans + IBM Plex Mono (Bold Monday für IBM) — eine Familie
     für Text UND Zahlen. Dadurch sitzen Beträge und Fließtext auf
     demselben Skelett; die Monospace-Ziffern brechen den Satz nicht auf.
     Plex ist für technische und finanzielle Inhalte gezeichnet und hat
     eigene Details (das einstöckige g, die abgeschrägten Endstriche). */
  --f-display: 'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif;
  --f-text: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Bewegung */
  --e-cubic: cubic-bezier(0.35, 0.35, 0, 1);
  --e-smooth: cubic-bezier(0.5, 0, 0.3, 1);
  --e-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --d-1: 0.28s;
  --d-2: 1.2s;

  /* Maße */
  --wrap: 1280px;
  --pad: clamp(1.15rem, 4vw, 2.5rem);
  /* Radien statt Fasen. --ch bleibt als Variable bestehen, damit ältere
     Regeln nicht ins Leere greifen, wird aber nirgends mehr zum Schneiden
     benutzt. Wer die Fasen zurückholen will, dreht hier UND ersetzt die
     border-radius-Zeilen wieder durch clip-path. */
  --r: 20px;    /* Radius grosser Flächen (Panels, Ergebnis) */
  --r-s: 12px;  /* Radius kleiner Flächen (Chips, Knöpfe, Felder) */
  --r-pille: 999px;
  --ch: 0px;
  --ch-s: 0px;

  /* Oberer Abstand, den der fest stehende Hell/Dunkel-Knopf beansprucht.
     Bezugspunkt für alles, was in derselben Ecke klebt. */
  --thema-frei: calc(clamp(0.8rem, 2vh, 1.4rem) + 44px + 0.75rem);
  /* Hoehe der klebenden Kopfleiste. Stand an drei Stellen als 72px im
     Code; seit der Vergroesserung der Bildmarke hier zentral. Wer sie
     aendert, muss nichts weiter suchen. */
  --leiste-h: 118px;
  /* Groesse der Bildmarke. Waechst mit der Breite, gedeckelt bei 90px. */
  --marke-h: clamp(72px, 5.85vw, 90px);
  --marke-schrift: clamp(1.3rem, 1.12rem + 0.66vw, 1.58rem);
}

/* Sobald die Seite ein Stueck gescrollt ist, zieht sich die Kopfleiste auf
   zwei Drittel zusammen — der Rechner bekommt Platz, die Marke bleibt.
   Die Klasse setzt assets/js/kopfleiste.js. */
:root.kopf-klein {
  --leiste-h: 78px;
  --marke-h: clamp(48px, 3.9vw, 60px);
  --marke-schrift: clamp(1.1rem, 0.98rem + 0.44vw, 1.28rem);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth;
       background: var(--bg); }   /* traegt die Flaeche, damit die Tarn-Ebene sichtbar bleibt */

/* ---------------------------------------------------------------------
   GRUNDTEXTUR — nur im Dunkelmodus
   ---------------------------------------------------------------------
   Im Hellmodus bewusst KEINE Textur: die vorherige Segeltuch-Ebene lag
   als multiply über der ganzen Seite und zog sie ins Graue. Der helle
   Modus lebt jetzt von reinen Flächen, weichen Schatten und Farbe.

   Im Dunkelmodus trägt ein stark abgedunkeltes Geländebild dezent Tiefe.
   Bild liegt lokal als WebP vor (vorher externe PNG-Adresse, 1,6 MB).

   ABSCHALTEN / STAERKE: eine Zahl — --tarn (0 = aus, 1 = wie entworfen).
   --------------------------------------------------------------------- */
:root { --tarn: 1; }

:root[data-theme="dark"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: calc(.30 * var(--tarn));
  background-image: url("../img/gelaende-dunkel.webp");
  background-size: cover;
  background-position: center;
  filter: saturate(.8) brightness(.85);
}
/* Farbschleier darueber — haelt den Text lesbar, egal wie das Bild ausfaellt */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 62%, transparent) 0%,
                            color-mix(in srgb, var(--bg) 88%, transparent) 55%,
                            var(--bg) 100%),
    linear-gradient(90deg, var(--bg) 0%, transparent 22%, transparent 78%, var(--bg) 100%);
}



@media (prefers-reduced-motion: reduce) { :root { --tarn: .6; } }
@media print { body::before, body::after { display: none; } }

body {
  margin: 0;
  background: transparent;   /* Flaeche liegt auf <html>, siehe oben */
  color: var(--tx);
  font-family: var(--f-text);
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.02rem);
  line-height: 1.65;
  font-feature-settings: 'kern', 'liga';
  /* clip statt hidden: hidden macht den Body zum Scroll-Container und setzt
     damit jedes position:sticky im Dokument außer Kraft. */
  overflow-x: clip;
}

h1, h2, h3, legend {
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: -.018em;   /* Space Grotesk traegt ohne Versalien */
  line-height: 1.12;
}
/* Technischer Marker vor Sektions-Ueberschriften */
h2::before {
  content: "";
  display: inline-block;
  width: .62em; height: .1em;
  margin-right: .42em;
  vertical-align: .28em;
  background: var(--amber);
}
p { margin: 0 0 1em; }
a { color: inherit; }

.wrap { width: min(100% - 2 * var(--pad), var(--wrap)); margin-inline: auto; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Alle Beträge und Kennzahlen laufen monospaced */
.num, output, .chip__v, .result__netto, .result__sum dd, .detail td:last-child,
.grid td, .grid th, .zulage__betrag, .minibar__v, .range__marks,
input[type="number"], select, .result__year strong, .zfeld .satz {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'zero' 1;
}

/* Korn und Scanlines sind abgeschaltet (--korn: 0). Die Elemente bleiben
   im Markup, damit nichts bricht; wer den Effekt zurückholen will, setzt
   --korn wieder auf 0.014 bzw. 0.02. */
.grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: var(--korn);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =====================================================================
   Flächenform — weiche Radien statt abgeschrägter Kanten
   ===================================================================== */

.chamfer { border-radius: var(--r); }

/* HUD-Eckklammern entfernt: sie waren die Gegenrichtung zu ruhigen
   Flächen und wirkten neben Radien wie ein Fremdkörper. Die Klasse
   bleibt wirkungslos bestehen, damit das Markup unverändert trägt. */
.hud::before, .hud::after { content: none; }

/* =====================================================================
   Kopfbereich
   ===================================================================== */

.hero {
  position: relative;
  min-height: min(92svh, 900px);
  display: flex;
  align-items: flex-end;
  padding: clamp(4.5rem, 13vh, 8rem) 0 clamp(3rem, 8vh, 5rem);
  overflow: hidden;
  border-bottom: 1px solid var(--line-soft);
}

/* Optionale Fotoebene im Kopfbereich.
   Sobald Bilder vorliegen, diesen Block einkommentieren und die Dateien unter
   assets/img/ ablegen (WebP-Pflicht, Portrait- und Landscape-Fassung).
   Das Raster darunter bleibt bestehen und trägt die Gestaltung auch ohne Bild.

.hero__foto {
  position: absolute; inset: 0;
  background: url('../img/hero-landscape.webp') center / cover no-repeat;
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 55%);
  mask-image: linear-gradient(to right, transparent 0%, #000 55%);
}
.hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, var(--bg) 2%, transparent 45%),
              linear-gradient(to right, var(--bg) 8%, transparent 60%);
}
@media (max-width: 760px) {
  .hero__foto { background-image: url('../img/hero-portrait.webp'); }
}
*/

/* Ruhiger Farbschleier statt Vermessungsraster.
   Zwei weiche, grosszügige Wolken ohne jede Kachelung — kein Raster, keine
   Höhenlinien, keine sichtbare Wiederholung. Der Verlauf trägt die Fläche,
   ohne mit der Typografie zu konkurrieren. */
.hero__grid {
  position: absolute; inset: -10%;
  background-image:
    radial-gradient(78% 62% at 78% 16%, var(--wolke-1), transparent 68%),
    radial-gradient(64% 58% at 12% 88%, var(--wolke-2), transparent 70%);
  -webkit-mask-image: radial-gradient(130% 95% at 60% 40%, #000 25%, transparent 88%);
  mask-image: radial-gradient(130% 95% at 60% 40%, #000 25%, transparent 88%);
  will-change: transform;
}

.hero__inner { position: relative; z-index: 1; }

/* Statuszeile in der Anmutung eines Einsatzgeräts */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-family: var(--f-mono);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.68rem;
  color: var(--sage);
  margin-bottom: 1.6rem;
  padding: 0.35rem 0.8rem 0.35rem 0.6rem;
  border: 1px solid var(--line);
  background: var(--glas);
  border-radius: var(--r-s);
}
.eyebrow::before {
  content: ''; width: 7px; height: 7px; flex: 0 0 auto;
  background: var(--amber);
  box-shadow: 0 0 8px var(--amber);
  animation: puls 2.6s var(--e-smooth) infinite;
}
@keyframes puls { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.hero__title {
  font-size: clamp(2.6rem, 8vw, 6.4rem);
  line-height: 0.92;
  margin: 0 0 1.4rem;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  font-weight: 700;
}
.hero__title span { color: var(--tx-2); font-weight: 500; }

.hero__lead {
  max-width: 54ch;
  color: var(--tx-2);
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.15rem);
  margin-bottom: 2.2rem;
  border-left: 2px solid var(--amber-dim);
  padding-left: 1.1rem;
}

.hero__meta { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 2.6rem; }

.chip {
  position: relative;
  display: flex; flex-direction: column; gap: 0.15rem;
  padding: 0.6rem 1.05rem;
  border: 1px solid var(--line);
  background: var(--glas);
  backdrop-filter: blur(6px);
  border-radius: var(--r-s);
}
.chip__k {
  font-family: var(--f-mono); text-transform: uppercase;
  letter-spacing: 0.16em; font-size: 0.62rem; color: var(--tx-3);
}
.chip__v { font-size: 0.85rem; color: var(--tx); }

.hero__cta {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.7rem;
  min-height: 54px; padding: 0.85rem 2rem;
  border: 0;
  background: var(--amber-flaeche);
  color: var(--amber-kontrast);
  text-decoration: none;
  font-family: var(--f-display);
  letter-spacing: 0.02em; font-size: 1rem; font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(22, 33, 15, 0.10), 0 10px 24px rgba(233, 162, 46, 0.30);
  transition: transform 0.25s var(--e-expo), box-shadow 0.25s var(--e-smooth), background 0.2s;
}
.hero__cta svg { transition: transform var(--d-1) var(--e-expo); }
.hero__cta:hover {
  transform: translateY(-2px);
  background: var(--amber-hell);
  box-shadow: 0 4px 10px rgba(22, 33, 15, 0.12), 0 16px 34px rgba(233, 162, 46, 0.40);
}
.hero__cta:active { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .hero__cta:hover { transform: none; } }
.hero__cta:hover svg { transform: translateY(3px); }

/* =====================================================================
   Rechner-Layout
   ===================================================================== */

.calc { padding: clamp(3.5rem, 9vh, 6.5rem) 0; }

.calc__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 410px);
  gap: clamp(1.4rem, 2.6vw, 2.6rem);
  align-items: start;
}

.panels { display: flex; flex-direction: column; gap: clamp(0.9rem, 1.8vw, 1.4rem); min-width: 0; }

.panel {
  position: relative;
  /* PFLICHT, weil .panel ein <fieldset> ist.
     Browser geben fieldset von Haus aus `min-width: min-content` — das
     Element weigert sich also, schmaler zu werden als sein längstes
     unteilbares Wort. Auf einem 320-px-Bildschirm stand das Panel dadurch
     8 px über den Rand hinaus und die ganze Seite ließ sich seitwärts
     schieben. `min-width: 0` hebt die Sonderregel auf; sichtbar ändert
     sich sonst nichts. */
  min-width: 0;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--schatten);
  padding: clamp(1.4rem, 2.5vw, 2.1rem);
  margin: 0;
  border-radius: var(--r);
  /* Panels enthalten Bedienelemente — sie heben sich beim Überfahren nicht
     an, sondern gewinnen nur Tiefe. Ein Versatz würde beim Zielen stören. */
  transition: box-shadow 0.25s var(--e-smooth), border-color 0.25s var(--e-smooth);
}
.panel:hover { box-shadow: var(--schatten-hoch); border-color: var(--line-soft); }

/* Farbmarke am oberen Rand statt Balken an der Seite: ruhiger und
   verträgt die grösseren Radien. */
.panel::before {
  content: ''; position: absolute; top: 0; left: clamp(1.4rem, 2.5vw, 2.1rem);
  width: 42px; height: 3px; border-radius: 0 0 3px 3px;
  background: var(--sage);
  transition: width 0.3s var(--e-expo), background 0.25s var(--e-smooth);
}
.panel:hover::before { width: 72px; background: var(--amber); }

.panel__legend {
  /* Wie beim fieldset: <legend> hat eigene Größenregeln und läuft sonst
     auf schmalen Bildschirmen über den Panelrand hinaus. */
  max-width: 100%; min-width: 0; overflow-wrap: anywhere;
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0;
  font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem);
  text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 600;
  margin-bottom: 0.2rem;
}
.panel__nr {
  font-family: var(--f-mono);
  font-size: 0.7rem; letter-spacing: 0.12em; color: var(--amber);
  border: 1px solid var(--amber-dim);
  padding: 0.15rem 0.45rem;
  background: var(--amber-glow);
}
.panel__intro { color: var(--tx-2); font-size: 0.87rem; margin: 0.9rem 0 1.5rem; max-width: 68ch; }

.panel--actions {
  display: flex; flex-wrap: wrap; gap: 0.7rem;
  background: none; border-style: dashed;
}

/* --------------------- Formularelemente --------------------- */

.field { margin-bottom: 1.35rem; }
.field:last-child { margin-bottom: 0; }

.field--split { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.1rem; }
@media (max-width: 560px) { .field--split { grid-template-columns: 1fr; } }

label {
  display: block;
  font-family: var(--f-mono);
  text-transform: uppercase; letter-spacing: 0.12em;
  font-size: 0.7rem; color: var(--tx-3);
  margin-bottom: 0.55rem;
}
.unit { color: var(--tx-3); }

select, input[type="number"], input[type="text"] {
  width: 100%;
  min-height: 48px;
  padding: 0.6rem 0.9rem;
  background: var(--feld);
  color: var(--tx);
  border: 1px solid var(--line);
  border-radius: 0;
  font-family: var(--f-text);
  font-size: 0.95rem;
  transition: border-color 0.2s var(--e-smooth), box-shadow 0.2s var(--e-smooth);
}
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234B564C' stroke-width='1.8'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  background-size: 17px;
  padding-right: 2.5rem;
}
select:hover, input:hover { border-color: var(--tx-3); }
select:focus-visible, input:focus-visible {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 1px var(--amber), 0 0 14px var(--amber-glow);
}
button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--amber); outline-offset: 2px;
}
option { background: var(--bg-2); color: var(--tx); }

.hint { font-size: 0.79rem; color: var(--tx-3); margin: 0.55rem 0 0; line-height: 1.55; }

/* Segmentierte Auswahl */
.segmented { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.segmented button {
  flex: 1 1 auto; min-height: 46px; padding: 0.5rem 0.9rem;
  background: var(--feld); color: var(--tx-2);
  border: 1px solid var(--line); border-radius: 0;
  font-family: var(--f-display); text-transform: uppercase;
  letter-spacing: 0.12em; font-size: 0.82rem; font-weight: 500;
  cursor: pointer;
  transition: color 0.2s var(--e-smooth), border-color 0.2s var(--e-smooth), background 0.2s var(--e-smooth);
}
.segmented button:hover { color: var(--tx); border-color: var(--tx-3); }
.segmented button[aria-checked="true"] {
  color: var(--amber); border-color: var(--amber-dim);
  background: var(--amber-glow);
  box-shadow: inset 0 -2px 0 var(--amber);
}

/* Kontrollkästchen */
.check {
  display: flex; align-items: center; gap: 0.75rem;
  text-transform: none; letter-spacing: 0; font-family: var(--f-text);
  font-size: 0.92rem; color: var(--tx); margin: 0;
  cursor: pointer; min-height: 44px;
}
.check input[type="checkbox"] {
  appearance: none; flex: 0 0 auto;
  width: 20px; height: 20px; margin: 0;
  border: 1px solid var(--line); border-radius: 0;
  background: var(--feld); cursor: pointer;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.check input[type="checkbox"]:checked {
  background: var(--amber) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat;
  border-color: var(--amber);
  box-shadow: 0 0 10px var(--amber-glow);
}
.check:hover input[type="checkbox"] { border-color: var(--tx-3); }

/* Schieberegler */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 44px; background: none; cursor: pointer; margin: 0;
}
input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: var(--line); }
input[type="range"]::-moz-range-track { height: 2px; background: var(--line); }
/* Griff: runde Scheibe statt Sechseck — dieselbe Begründung wie bei den
   Panelecken. Der Ring aus Flächenfarbe hebt ihn von der Schiene ab. */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; margin-top: -9px;
  background: var(--amber); border: 3px solid var(--panel);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
  transition: transform 0.2s var(--e-smooth);
}
input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; background: var(--amber);
  border: 3px solid var(--panel); border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
}
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.2); }

.range__marks {
  display: flex; justify-content: space-between;
  font-size: 0.7rem; color: var(--tx-3);
  margin-top: -0.2rem;
}

output {
  float: right;
  color: var(--amber); font-size: 0.85rem;
  letter-spacing: 0;
}

/* --------------------- Zulagen --------------------- */

.zulagen { display: flex; flex-direction: column; gap: 0.5rem; }

.zgruppe {
  border: 1px solid var(--line-soft);
  background: var(--bg-2);
  border-radius: var(--r-s);
  transition: border-color 0.25s var(--e-smooth);
}
.zgruppe[open] { border-color: var(--line); }

/* <summary> als Bedienleiste: Das Auf- und Zuklappen macht der Browser. */
.zgruppe__head {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 54px; padding: 0.75rem 1.05rem;
  cursor: pointer;
  color: var(--tx);
  font-family: var(--f-display); text-transform: uppercase;
  letter-spacing: 0.13em; font-size: 0.88rem; font-weight: 500;
  text-align: left;
  list-style: none;
  transition: background 0.25s var(--e-smooth), color 0.25s var(--e-smooth);
  -webkit-tap-highlight-color: transparent;
}
.zgruppe__head::-webkit-details-marker { display: none; }
.zgruppe__head::marker { content: ''; }
.zgruppe__head:hover { background: var(--hover); color: var(--amber); }
.zgruppe__head:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }
.zgruppe[open] > .zgruppe__head {
  border-bottom: 1px solid var(--line-soft);
  color: var(--amber);
}

/* Der Titel gibt nach, die Knöpfe rechts nicht.
   Ohne `min-width: 0` bleibt ein Flex-Kind mindestens so breit wie sein
   längstes Wort — „Erschwerniszulagen" schob auf 320 px die ganze Seite
   nach rechts. `overflow-wrap` erlaubt zusätzlich den Umbruch im Wort,
   falls es allein schon breiter ist als der Bildschirm. */
.zgruppe__head > :first-child { min-width: 0; overflow-wrap: anywhere; }
.zgruppe__rechts { display: flex; align-items: center; gap: 0.7rem; flex: 0 0 auto; }
.zgruppe__head svg { flex: 0 0 auto; transition: transform 0.35s var(--e-expo); color: var(--tx-3); }
.zgruppe[open] > .zgruppe__head svg { transform: rotate(180deg); color: var(--amber); }

.zgruppe__count {
  font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0;
  color: var(--amber-kontrast); background: var(--amber);
  padding: 0.08rem 0.45rem;
  font-weight: 700;
}

.zgruppe__body { padding: 1rem 1.05rem 1.1rem; display: flex; flex-direction: column; gap: 1.1rem; }

.zulage { border-top: 1px solid var(--line-soft); padding-top: 1rem; }
.zulage:first-child { border-top: 0; padding-top: 0.1rem; }

.zulage__top { display: flex; align-items: flex-start; gap: 0.75rem; min-height: 44px; }
/* Ohne feste Basis schrumpft das Kästchen im Flex-Container.
   Das Pseudo-Element vergrößert die Trefferfläche auf 44 × 44 px,
   ohne das Layout zu verändern. */
.zulage__top input[type="checkbox"] {
  flex: 0 0 20px;
  width: 20px; height: 20px;
  margin-top: 0.2rem;
  position: relative;
}
.zulage__top input[type="checkbox"]::after {
  content: ''; position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px;
}

/* Die Beschriftung IST die Klickfläche des Ankreuzfelds — das Kästchen
   selbst misst nur 20 px. Ohne Mindesthöhe kam sie auf 40 px und lag damit
   unter den 44 px, die auf dem Handy sicher zu treffen sind. Als Spalte
   gesetzt, damit die Fundstelle darunter wie bisher umbricht. */
.zulage__name {
  font-size: 0.93rem; line-height: 1.45;
  min-height: 44px;
  display: flex; flex-direction: column; justify-content: center;
}
.zulage__recht {
  display: block;
  font-family: var(--f-mono); text-transform: uppercase;
  letter-spacing: 0.1em; font-size: 0.66rem; color: var(--tx-3);
  margin-top: 0.2rem;
}
.zulage__betrag {
  margin-left: auto; flex: 0 0 auto;
  color: var(--sage); font-size: 0.86rem;
  white-space: nowrap;
}
.zulage__opts { margin: 0.8rem 0 0 1.95rem; display: flex; flex-direction: column; gap: 0.6rem; }
.zulage__info { font-size: 0.79rem; color: var(--tx-3); margin: 0.4rem 0 0 1.95rem; }

.zfeld { display: grid; grid-template-columns: 1fr 96px; gap: 0.7rem; align-items: center; }
.zfeld label { margin: 0; text-transform: none; letter-spacing: 0; font-family: var(--f-text); font-size: 0.87rem; color: var(--tx); }
.zfeld .satz { display: block; font-size: 0.72rem; color: var(--tx-3); }
.zfeld input { min-height: 44px; text-align: right; }

/* --------------------- Schaltflächen --------------------- */

.btn {
  min-height: 48px; padding: 0.6rem 1.4rem;
  cursor: pointer; border-radius: 0;
  font-family: var(--f-display); text-transform: uppercase;
  letter-spacing: 0.14em; font-size: 0.84rem; font-weight: 500;
  border-radius: var(--r-s);
  transition: color 0.2s var(--e-smooth), border-color 0.2s var(--e-smooth), background 0.2s var(--e-smooth);
}
.btn--ghost { background: var(--feld); border: 1px solid var(--line); color: var(--tx-2); }
.btn--ghost:hover { color: var(--amber); border-color: var(--amber-dim); background: var(--amber-glow); }

/* =====================================================================
   Ergebnisanzeige
   ===================================================================== */

.result { min-width: 0; align-self: stretch; height: 100%; }

/* Der Umschalter für Hell/Dunkel liegt fest in derselben Bildschirmecke.
   Ohne diesen Abstand schiebt sich das klebende Ergebnispanel unter den
   Knopf und verdeckt seine obere Ecke. --thema-frei hält den Platz frei. */
.result__sticky {
  /* Abstand nach oben hält den fest stehenden Hell/Dunkel-Knopf frei */
  position: sticky; top: var(--thema-frei);
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--schatten);
  border-radius: var(--r);
  /* Auf Sichtfeldhöhe begrenzt: Der grüne Kopf mit dem Nettobetrag bleibt
     immer sichtbar, der Rumpf (Summen + vollständige Aufschlüsselung)
     scrollt bei Überlänge IN SICH — sonst verschwindet das Ende der
     Aufschlüsselung unsichtbar unterhalb des Sichtfelds.
     WICHTIG: bewusst OHNE overscroll-behavior:contain — am Ende des
     inneren Scrollbereichs läuft das Mausrad normal auf der Seite weiter
     (das frühere contain hatte genau das blockiert). */
  display: flex; flex-direction: column;
  max-height: calc(100vh - var(--leiste-h) - clamp(0.8rem, 2.5vh, 1.5rem) - 1rem);
  overflow: hidden;
}
.result__kopf { flex: 0 0 auto; }
.result__rumpf {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

.result__label {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--f-mono); text-transform: uppercase;
  letter-spacing: 0.18em; font-size: 0.66rem; color: var(--tx-3); margin: 0 0 0.5rem;
}
.result__label::after {
  content: ''; flex: 1 1 auto; height: 1px;
  background: linear-gradient(to right, var(--line), transparent);
}

.result__netto {
  font-size: clamp(2.6rem, 2rem + 3.4vw, 3.5rem);
  line-height: 1; margin: 0 0 0.5rem;
  color: var(--amber);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-shadow: 0 0 26px var(--amber-glow);
}
.result__cur { font-size: 0.4em; color: var(--amber-dim); vertical-align: 0.5em; }
.result__sub { font-size: 0.81rem; color: var(--tx-2); margin: 0 0 1.4rem; line-height: 1.5; }

.bar {
  display: flex; height: 6px; overflow: hidden;
  background: var(--feld); margin-bottom: 0.6rem;
  border: 1px solid var(--line-soft);
}
.bar__fill { display: block; height: 100%; transition: width 0.6s var(--e-expo); }
.bar__fill--netto { background: var(--amber); }
.bar__fill--abzug { background: var(--alert); }
.bar__legend {
  display: flex; gap: 1.2rem; font-size: 0.72rem; color: var(--tx-3);
  margin-bottom: 1.4rem; font-family: var(--f-mono);
  text-transform: uppercase; letter-spacing: 0.1em;
}
.dot { display: inline-block; width: 8px; height: 8px; margin-right: 0.45rem; }
.dot--netto { background: var(--amber); }
.dot--abzug { background: var(--alert); }

.result__sum { margin: 0 0 1.2rem; font-size: 0.89rem; }
.result__sum > div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.55rem 0; border-bottom: 1px solid var(--line-soft);
}
.result__sum dt { color: var(--tx-2); }
.result__sum dd { margin: 0; font-size: 0.9rem; }
.result__sum .is-minus dd { color: var(--alert); }
.result__sum .is-free dd { color: var(--signal); }
.result__sum .is-total {
  border-bottom: 0; border-top: 1px solid var(--line);
  margin-top: 0.4rem; padding-top: 0.8rem;
}
.result__sum .is-total dt {
  color: var(--tx); font-family: var(--f-display); text-transform: uppercase;
  letter-spacing: 0.14em; font-size: 0.84rem; font-weight: 600;
}
.result__sum .is-total dd { color: var(--amber); font-weight: 700; }

.result__toggle {
  width: 100%; min-height: 48px;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--feld); border: 1px solid var(--line);
  color: var(--tx-2); cursor: pointer;
  font-family: var(--f-display); text-transform: uppercase;
  letter-spacing: 0.14em; font-size: 0.8rem; font-weight: 500;
  padding: 0.6rem 1rem;
  border-radius: var(--r-s);
  transition: color 0.2s var(--e-smooth), border-color 0.2s var(--e-smooth), background 0.2s var(--e-smooth);
}
.result__toggle:hover { color: var(--amber); border-color: var(--amber-dim); background: var(--amber-glow); }
.result__toggle svg { transition: transform 0.35s var(--e-expo); }
.result__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.result__detail { margin-top: 1.1rem; }

.detail { width: 100%; border-collapse: collapse; font-size: 0.83rem; }
.detail tr { border-bottom: 1px solid var(--line-soft); }
.detail th, .detail td { padding: 0.55rem 0; text-align: left; vertical-align: top; font-weight: 400; }
/* Die Betragsspalte darf nicht umbrechen — „3.414,12 €“ auf zwei Zeilen
   wäre unlesbar. Ausgenommen sind Zellen mit colspan: Eine Notizzeile
   spannt über beide Spalten und ist damit ebenfalls :last-child. Ohne die
   Ausnahme erbt sie das nowrap, wird so breit wie ihr Text und schiebt die
   ganze Tabelle waagerecht aus dem Panel — die Beträge stehen dann
   ausserhalb des Sichtfelds und man muss seitwärts scrollen. */
.detail td:last-child { text-align: right; white-space: nowrap; padding-left: 0.8rem; }
.detail td[colspan] { text-align: left; white-space: normal; padding-left: 0; }
.detail .d-gruppe td {
  font-family: var(--f-mono); text-transform: uppercase;
  letter-spacing: 0.14em; font-size: 0.66rem; color: var(--amber);
  padding-top: 1.2rem; border: 0;
}
.detail .d-minus td:last-child { color: var(--alert); }
.detail .d-free td:last-child { color: var(--signal); }
.detail .d-summe { border-top: 1px solid var(--line); border-bottom: 0; }
.detail .d-summe td { padding-top: 0.75rem; color: var(--tx); font-weight: 600; }
.detail .d-note td {
  font-size: 0.74rem; color: var(--tx-3); border: 0;
  padding: 0.1rem 0 0.65rem; font-style: italic;
}
.detail .d-recht {
  display: block; font-size: 0.68rem; color: var(--tx-3);
  font-family: var(--f-mono); text-transform: uppercase; letter-spacing: 0.1em;
}
.detail .d-durch td:last-child { color: var(--tx-3); text-decoration: line-through; }

.result__year {
  font-size: 0.79rem; color: var(--tx-3); margin: 1.1rem 0 0;
  padding-top: 0.85rem; border-top: 1px solid var(--line-soft);
}
.result__year strong { color: var(--tx-2); font-weight: 500; font-size: 0.82rem; }

/* =====================================================================
   Ergebnisleiste auf schmalen Bildschirmen
   ===================================================================== */

.minibar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--glas-leiste);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--amber-dim);
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(101%);
  transition: transform 0.45s var(--e-expo);
}
.minibar.is-in { transform: none; }
.minibar__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: min(100% - 2 * var(--pad), var(--wrap));
  margin-inline: auto; padding: 0.7rem 0;
}
.minibar__k {
  display: block;
  font-family: var(--f-mono); text-transform: uppercase;
  letter-spacing: 0.16em; font-size: 0.63rem; color: var(--tx-3);
}
.minibar__v { font-size: 1.4rem; color: var(--amber); line-height: 1.2; font-weight: 700; }
.minibar__btn {
  min-height: 46px; padding: 0.5rem 1.2rem;
  background: var(--amber-glow); border: 1px solid var(--amber-dim); border-radius: 0;
  color: var(--amber); cursor: pointer;
  font-family: var(--f-display); text-transform: uppercase;
  letter-spacing: 0.14em; font-size: 0.78rem; font-weight: 500;
  border-radius: var(--r-s);
}

@media (min-width: 1001px) { .minibar { display: none !important; } }

/* =====================================================================
   Besoldungstabelle
   ===================================================================== */

.tabelle, .recht { padding: clamp(3.5rem, 9vh, 6.5rem) 0; border-top: 1px solid var(--line-soft); }

.h2 {
  font-size: clamp(1.9rem, 1.4rem + 2.6vw, 3.2rem);
  line-height: 1.02; margin: 0 0 1rem;
  text-transform: uppercase; font-weight: 700;
}
.section__lead { color: var(--tx-2); max-width: 66ch; margin-bottom: 2.4rem; }

.tabelle__scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  -webkit-overflow-scrolling: touch;
}

.grid { width: 100%; border-collapse: collapse; font-size: 0.83rem; min-width: 760px; }
.grid th, .grid td {
  padding: 0.6rem 0.9rem; text-align: right;
  border-bottom: 1px solid var(--line-soft);
  white-space: nowrap;
}
.grid thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--panel-2); color: var(--tx-3);
  text-transform: uppercase;
  letter-spacing: 0.12em; font-size: 0.68rem; font-weight: 500;
  border-bottom: 1px solid var(--line);
}
.grid th:first-child, .grid td:first-child {
  text-align: left; color: var(--tx);
  font-family: var(--f-display); letter-spacing: 0.08em; font-size: 0.92rem;
  position: sticky; left: 0; background: var(--bg-2);
}
.grid thead th:first-child { background: var(--panel-2); z-index: 2; }
.grid tbody tr:hover td { background: var(--hover-reihe); }
.grid tbody tr.is-active td { background: var(--amber-glow); color: var(--tx); }
.grid tbody tr.is-active td:first-child { background: var(--hover); color: var(--amber); }
.grid td.is-cell {
  color: var(--amber); font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--amber-dim);
  background: var(--hover) !important;
}

/* =====================================================================
   Rechtsgrundlagen
   ===================================================================== */

.recht__cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: clamp(1.2rem, 2.5vw, 2.2rem);
  margin-bottom: 2.6rem;
}
.recht__cols h3 {
  font-size: 1rem; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--sage); margin: 0 0 0.7rem;
  padding-top: 1rem; border-top: 2px solid var(--line);
}
.recht__cols p { color: var(--tx-2); font-size: 0.88rem; margin: 0; }

.disclaimer {
  color: var(--tx-3); font-size: 0.82rem; max-width: 82ch;
  border-left: 2px solid var(--amber-dim); padding-left: 1.2rem; margin: 0;
}

/* =====================================================================
   Fußbereich
   ===================================================================== */

.footer { border-top: 1px solid var(--line-soft); padding: 2.4rem 0 3rem; }
.footer__inner {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6rem;
  font-size: 0.79rem; color: var(--tx-3);
  font-family: var(--f-mono);
}
.footer p { margin: 0; }

/* =====================================================================
   Reveal-Zustände (JS ergänzt .is-in)
   ===================================================================== */

.js [data-reveal] { opacity: 0; transform: translateY(20px); }
.js [data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity var(--d-2) var(--e-expo), transform var(--d-2) var(--e-expo);
}
.split-line { display: block; overflow: hidden; }
.js .split-line > span { display: block; transform: translateY(105%); }
.js .split-line.is-in > span {
  transform: none;
  transition: transform var(--d-2) var(--e-expo);
}

/* =====================================================================
   Responsiv
   ===================================================================== */

@media (max-width: 1000px) {
  .calc__layout { grid-template-columns: 1fr; }
  .result { order: -1; }
  /* Nicht klebend → auch kein innerer Scrollbereich: alles fließt normal */
  .result__sticky { position: static; max-height: none; display: block; overflow: visible; }
  .result__rumpf { overflow: visible; }
  body.has-minibar { padding-bottom: 4.6rem; }
}

@media (max-width: 620px) {
  :root { --ch: 9px; }
  .hero { min-height: auto; padding-top: 4.5rem; }
  .panel--actions { flex-direction: column; }
  .panel--actions .btn { width: 100%; }
  .zfeld { grid-template-columns: 1fr 86px; }
  .zulage__opts, .zulage__info { margin-left: 0; }
  .hero__lead { padding-left: 0.9rem; }

  /* Der Betrag rückt unter den Namen, damit die Bezeichnung nicht in
     schmale Spalten gequetscht wird. */
  .zulage__top { flex-wrap: wrap; }
  .zulage__name { flex: 1 1 auto; }
  .zulage__betrag {
    flex: 1 0 100%; margin: 0.45rem 0 0 1.95rem;
    color: var(--amber); font-size: 0.9rem;
  }
}

/* =====================================================================
   Bewegungsreduktion und Druck
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .split-line > span { transform: none; }
  .grain::after { display: none; }
}

@media print {
  .grain, .hero__grid, .hero__cta, .panel--actions, .result__toggle,
  .segmented, .footer, .tabelle, .minibar { display: none !important; }
  body { background: #fff; color: #111; font-size: 10.5pt; }
  .hero { min-height: auto; padding: 0 0 1.5rem; border: 0; }
  .hero__title { font-size: 2rem; color: #111; }
  .hero__title span, .hero__lead, .hint, .panel__intro { color: #444; }
  .calc__layout { display: block; }
  .panel, .result__sticky {
    border-color: #ccc; background: none; position: static;
    break-inside: avoid; clip-path: none; max-height: none; overflow: visible;
  }
  .result__detail { display: block !important; }
  .result__netto, .result__sum .is-total dd { color: #111; text-shadow: none; }
  .hud::before, .hud::after { display: none; }
  [data-reveal] { opacity: 1; transform: none; }
  .split-line > span { transform: none; }
}


/* =====================================================================
   Symbole, die als Data-URL vorliegen und daher je Modus gesetzt werden
   ===================================================================== */

:root[data-theme="dark"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B5C2B7' stroke-width='1.8'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] .check input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312100D' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}

/* =====================================================================
   Umschalter für das Farbschema
   ===================================================================== */

.thema {
  position: fixed; top: clamp(0.8rem, 2vh, 1.4rem); right: clamp(0.9rem, 3vw, 2rem);
  z-index: 70;
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 44px; padding: 0.5rem 0.9rem;
  /* Deckend, nicht durchscheinend: Der Knopf steht fest über der Seite und
     wandert beim Scrollen über Panels hinweg. Halbtransparent würde die
     Beschriftung dort unlesbar. */
  background: var(--panel);
  box-shadow: var(--schatten);
  border: 1px solid var(--line);
  color: var(--tx-2); cursor: pointer;
  font-family: var(--f-mono); text-transform: uppercase;
  letter-spacing: 0.12em; font-size: 0.66rem;
  border-radius: var(--r-s);
  transition: color 0.2s var(--e-smooth), border-color 0.2s var(--e-smooth), background 0.2s var(--e-smooth);
}
.thema:hover { color: var(--amber); border-color: var(--amber-dim); }
.thema svg { flex: 0 0 auto; }
.thema__sonne { display: none; }
.thema__mond { display: block; }
:root[data-theme="dark"] .thema__sonne { display: block; }
:root[data-theme="dark"] .thema__mond { display: none; }
.thema__text { display: none; }
@media (min-width: 700px) { .thema__text { display: inline; } }

@media print { .thema { display: none !important; } }

/* =====================================================================
   Werbeflächen, häufige Fragen, Einwilligungsbanner
   Ergänzt 06.08.2026 — das Projekt trägt sich über Suchverkehr und
   Anzeigen, deshalb sind beide Bausteine von Anfang an eingeplant und
   nicht nachträglich aufgesetzt.
   ===================================================================== */

/* --- Werbefläche ---------------------------------------------------
   Die Höhe ist FEST reserviert. Ein nachladender Anzeigenblock, der das
   Layout verschiebt, kostet doppelt: schlechtere Core Web Vitals (und
   damit Ranking) und geringere Sichtbarkeit der Anzeige selbst. */
.anzeige {
  padding: clamp(1.6rem, 4vh, 2.8rem) 0;
  background: var(--bg-2);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.anzeige__label {
  display: block;
  font-family: var(--f-mono);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.6rem;
  color: var(--tx-3);
  margin-bottom: 0.6rem;
}
.anzeige__slot {
  min-height: 280px;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel-2);
  border: 1px dashed var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
/* Solange kein Anzeigencode drinsteht, bleibt der Platz sichtbar leer
   markiert — damit beim Testen niemand rätselt, was der Kasten soll. */
.anzeige__slot:empty::before {
  content: 'Werbeplatz ' attr(data-slot);
  font-family: var(--f-mono); font-size: 0.68rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--tx-3);
}
@media (max-width: 700px) { .anzeige__slot { min-height: 250px; } }
@media print { .anzeige { display: none !important; } }

/* --- Inhalt der Werbeplätze ----------------------------------------
   Eingesetzt von assets/js/werbung.js aus dem Backend (admin/). Alles
   bleibt INNERHALB der reservierten Höhe: Das Motiv wird eingepasst
   statt den Kasten zu dehnen, damit auch ein falsch zugeschnittenes
   Bild nichts anschiebt. */
.anzeige__link {
  display: block; width: 100%; height: 100%;
  line-height: 0;                       /* kein Zeilenrest unter dem Bild */
}
.anzeige__link picture { display: block; width: 100%; height: 100%; }
.anzeige__motiv {
  display: block; width: 100%; height: 100%;
  max-height: 280px; object-fit: contain;
}
@media (max-width: 700px) { .anzeige__motiv { max-height: 250px; } }

.anzeige__text {
  display: flex; flex-direction: column; align-items: flex-start;
  justify-content: center; gap: 0.7rem;
  width: 100%; height: 100%;
  padding: clamp(1.2rem, 3vw, 2rem);
  text-align: left;
}
.anzeige__kopf {
  margin: 0; font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.15rem, 2.6vw, 1.6rem); line-height: 1.2;
  letter-spacing: -0.01em; color: var(--tx);
}
.anzeige__leib {
  margin: 0; color: var(--tx-2); font-size: 0.95rem;
  max-width: 60ch;
}
.anzeige__knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 1.3rem; margin-top: 0.2rem;
  border-radius: var(--r-s); text-decoration: none;
  font-weight: 700; font-size: 0.94rem; line-height: 1.2;
  background: var(--amber-flaeche); color: var(--amber-kontrast);
  border: 1px solid var(--amber-flaeche);
  transition: background 0.18s ease, border-color 0.18s ease;
}
.anzeige__knopf:hover { background: var(--amber-dim); border-color: var(--amber-dim); }
@media (prefers-reduced-motion: reduce) { .anzeige__knopf { transition: none; } }

/* --- Häufige Fragen ------------------------------------------------- */
.faq { padding: clamp(3rem, 9vh, 6rem) 0; }
.faq__liste {
  margin-top: clamp(1.6rem, 4vh, 2.6rem);
  display: grid; gap: 0.75rem;
  max-width: 68ch;
}
.faq__item {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  box-shadow: var(--schatten);
  overflow: hidden;
}
.faq__item > summary {
  cursor: pointer; list-style: none;
  padding: 1.05rem clamp(1rem, 2.5vw, 1.5rem);
  display: flex; align-items: center; gap: 0.9rem;
  min-height: 56px;
  transition: background 0.2s var(--e-smooth);
}
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary:hover { background: var(--hover); }
.faq__item > summary h3 {
  margin: 0; flex: 1 1 auto;
  font-family: var(--f-display);
  font-size: clamp(1rem, 2vw, 1.12rem);
  font-weight: 600; letter-spacing: 0.02em;
  color: var(--tx);
}
/* Pluszeichen, das sich beim Öffnen zum Minus dreht */
.faq__item > summary::after {
  content: ''; flex: 0 0 auto; width: 13px; height: 13px;
  background:
    linear-gradient(var(--amber), var(--amber)) center / 100% 1.5px no-repeat,
    linear-gradient(var(--amber), var(--amber)) center / 1.5px 100% no-repeat;
  transition: transform 0.28s var(--e-expo);
}
.faq__item[open] > summary::after { transform: rotate(135deg); }
.faq__text {
  padding: 0 clamp(1rem, 2.5vw, 1.5rem) 1.35rem;
  color: var(--tx-2); max-width: 62ch;
}
.faq__text p { margin: 0 0 0.85rem; }
.faq__text p:last-child { margin-bottom: 0; }
.faq__text strong { color: var(--tx); }

/* --- Einwilligungsbanner -------------------------------------------- */
.consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  padding: clamp(0.8rem, 2.5vw, 1.4rem);
  display: flex; justify-content: center;
}
.consent__box {
  width: min(100%, 620px);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.22);
  padding: clamp(1.1rem, 3vw, 1.6rem);
}
.consent__titel {
  margin: 0 0 0.6rem;
  font-family: var(--f-display); text-transform: uppercase;
  letter-spacing: 0.08em; font-size: 1.05rem; color: var(--tx);
}
.consent__text { margin: 0 0 1.1rem; color: var(--tx-2); font-size: 0.92rem; }
.consent__aktionen { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.consent__btn {
  min-height: 46px; padding: 0.6rem 1.3rem;
  border: 1px solid var(--line); border-radius: var(--r-s);
  background: var(--panel-2); color: var(--tx); cursor: pointer;
  font-family: var(--f-display); text-transform: uppercase;
  letter-spacing: 0.12em; font-size: 0.8rem;
  transition: border-color 0.2s var(--e-smooth), background 0.2s var(--e-smooth);
}
.consent__btn:hover { border-color: var(--amber-dim); background: var(--hover); }
.consent__btn--ja {
  background: var(--amber); border-color: var(--amber);
  color: var(--amber-kontrast); font-weight: 600;
}
.consent__btn--ja:hover { background: var(--amber-dim); border-color: var(--amber-dim); }
.consent__fein { margin: 0.9rem 0 0; font-size: 0.8rem; }
.consent__fein a { color: var(--tx-3); }
@media print { .consent { display: none !important; } }

/* --- Fußzeile mit Rechtslinks ---------------------------------------- */
.footer__nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.3rem; align-items: center; }
.footer__nav a, .footer__link {
  color: var(--tx-2); font-size: 0.88rem; text-decoration: none;
  border-bottom: 1px solid transparent; transition: color 0.2s var(--e-smooth), border-color 0.2s var(--e-smooth);
}
.footer__link {
  background: none; border: 0; border-bottom: 1px solid transparent;
  padding: 0; cursor: pointer; font-family: inherit;
}
.footer__nav a:hover, .footer__link:hover { color: var(--amber); border-bottom-color: var(--amber-dim); }

/* --- Rechtstextseiten (Impressum, Datenschutz) ------------------------ */
.legal { padding: clamp(3rem, 9vh, 6rem) 0 clamp(2rem, 6vh, 4rem); }
.legal__inhalt { max-width: 70ch; color: var(--tx-2); }
.legal__inhalt h2 {
  font-family: var(--f-display); text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--tx);
  font-size: clamp(1.15rem, 2.6vw, 1.45rem);
  margin: 2.4rem 0 0.8rem;
}
.legal__inhalt h2:first-child { margin-top: 0; }
.legal__inhalt h3 {
  font-family: var(--f-text); font-size: 1rem; font-weight: 600;
  color: var(--tx); margin: 1.6rem 0 0.5rem;
}
.legal__inhalt p, .legal__inhalt li { margin: 0 0 0.85rem; }
.legal__inhalt ul { padding-left: 1.2rem; }
.legal__inhalt a { color: var(--amber); }
.legal__platzhalter {
  display: inline-block;
  background: var(--amber-glow); border: 1px solid var(--amber-dim);
  border-radius: 4px; padding: 0.05rem 0.4rem;
  font-family: var(--f-mono); font-size: 0.85em; color: var(--amber);
}
.legal__zurueck {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-bottom: 2rem; color: var(--tx-2);
  font-family: var(--f-mono); text-transform: uppercase;
  letter-spacing: 0.12em; font-size: 0.7rem; text-decoration: none;
}
.legal__zurueck:hover { color: var(--amber); }

/* =====================================================================
   HERO — Neufassung 06.08.2026
   Vorher: eine Textspalte am unteren Rand, darüber 40 % leere Fläche.
   Jetzt: zwei Spalten. Links die Ansage, rechts eine Beispielkarte, die
   sofort zeigt, was hinten herauskommt — bei einem Werkzeug überzeugt
   ein echtes Ergebnis mehr als jeder Satz darüber.
   ===================================================================== */

.hero {
  /* Auf grossen Schirmen mittig statt am Boden klebend. */
  align-items: center;
  padding: clamp(5.5rem, 14vh, 9rem) 0 clamp(4rem, 10vh, 6rem);
}

/* --- Bildebene ------------------------------------------------------
   Zweistufig maskiert: die Fläche selbst blendet nach links aus, eine
   Abdunklung darüber hält den Text lesbar. Solange kein Bild eingehängt
   ist, ist der Container leer und damit unsichtbar — kein Platzhalter,
   kein Sprung, wenn das Bild später dazukommt. */
.hero__bild {
  position: absolute; inset: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(100deg, transparent 8%, #000 52%);
  mask-image: linear-gradient(100deg, transparent 8%, #000 52%);
}
.hero__bild img {
  width: 100%; height: 100%; object-fit: cover; object-position: 68% 40%;
  opacity: 0.5;
}
:root[data-theme="light"] .hero__bild img { opacity: 0.28; }

/* Abdunklung über dem Bild — nur dort nötig, wo Text steht. */
.hero__schleier {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to right, var(--bg) 4%, rgba(0, 0, 0, 0) 62%),
    linear-gradient(to top, var(--bg) 1%, rgba(0, 0, 0, 0) 34%);
}

/* --- Zweispaltiger Aufbau -------------------------------------------- */
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; gap: 2.4rem; }
}

.hero__text { min-width: 0; }

/* --- Beispielkarte ---------------------------------------------------- */
.hero__probe {
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--schatten);
  padding: clamp(1.15rem, 2.2vw, 1.6rem);
}
.probe__kopf {
  margin: 0 0 1.1rem;
  font-family: var(--f-mono);
  text-transform: uppercase; letter-spacing: 0.16em;
  font-size: 0.62rem; color: var(--tx-3);
}
.probe__liste { list-style: none; margin: 0; padding: 0; }
.probe__liste li {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding: 0.72rem 0;
  border-top: 1px solid var(--line-soft);
}
.probe__liste li:first-child { border-top: 0; padding-top: 0; }

.probe__rang {
  display: flex; flex-direction: column; min-width: 0;
  font-family: var(--f-display);
  font-size: 1.02rem; font-weight: 700; letter-spacing: 0.015em;
  color: var(--tx); line-height: 1.2;
}
.probe__rang em {
  font-family: var(--f-mono); font-style: normal;
  font-size: 0.63rem; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--tx-3); margin-top: 0.22rem;
}
.probe__zahl {
  display: flex; flex-direction: column; align-items: flex-end;
  flex: 0 0 auto;
  font-family: var(--f-mono); font-variant-numeric: tabular-nums;
  font-size: 0.82rem; color: var(--tx-2);
}
.probe__zahl b {
  font-size: 1.18rem; font-weight: 600; color: var(--amber);
  letter-spacing: -0.01em;
}
.probe__zahl em {
  font-style: normal; font-size: 0.6rem;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--tx-3);
  margin-top: 0.15rem;
}
.probe__fuss {
  margin: 1.1rem 0 0; padding-top: 0.95rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.8rem; line-height: 1.5; color: var(--tx-3);
}

/* --- Scroll-Hinweis ---------------------------------------------------
   Eine Linie, die von oben nach unten durchläuft. Kein Pfeil, kein Wort —
   die Geste allein genügt und sie funktioniert in jeder Sprache. */
.hero__cue {
  position: absolute; left: 50%; bottom: clamp(1.1rem, 3vh, 2rem);
  width: 1px; height: 46px; overflow: hidden;
  background: var(--line);
}
.hero__cue::after {
  content: ''; position: absolute; inset: 0;
  background: var(--amber);
  animation: cue 2.4s var(--e-smooth) infinite;
}
@keyframes cue {
  0%   { transform: translateY(-100%); }
  55%  { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}
@media (max-width: 900px) { .hero__cue { display: none; } }

/* --- Typografische Feinjustierung nach dem Schriftwechsel -------------
   Space Grotesk: geometrische Groteske mit technischem Charakter —
   die Zeile verträgt mehr Gewicht, braucht aber engeren Durchschuss. */
.hero__title {
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.005em;
}
.hero__title span { font-weight: 600; }
h2, h3, legend { letter-spacing: 0.01em; }

@media (prefers-reduced-motion: reduce) {
  .hero__cue::after { animation: none; transform: none; opacity: 0.5; }
}
@media print { .hero__cue, .hero__probe { display: none !important; } }

/* --- Korrektur nach Sichtprüfung 06.08.2026 --------------------------
   1) Die H1 lief im zweispaltigen Hero über die Spaltenkante hinaus und
      wurde vom overflow:hidden der Reveal-Zeilen abgeschnitten. Die alte
      Größe (bis 6.4rem) stammt aus dem einspaltigen Aufbau, in dem die
      volle Seitenbreite zur Verfügung stand. Jetzt an die Spalte gebunden.
   2) Betrag und Euro-Zeichen bilden eine Einheit und dürfen nicht
      umbrechen — sonst steht das € allein auf der nächsten Zeile.
   -------------------------------------------------------------------- */
.hero__title { font-size: clamp(2.2rem, 4.6vw, 4.3rem); }

@media (max-width: 900px) {
  /* Einspaltig steht wieder die ganze Breite zur Verfügung. */
  .hero__title { font-size: clamp(2.4rem, 9vw, 4.6rem); }
}

.probe__zahl { white-space: nowrap; }
.probe__zahl b { display: block; }


/* =====================================================================
   UI-FEINSCHLIFF (ui-ux-pro-max, Pre-Delivery-Checkliste)
   Fokusringe sichtbar · Zeiger auf Klickbarem · weiche Übergänge ·
   Bewegung nur, wenn erwünscht.
   ===================================================================== */
:where(a, button, select, summary, [role="button"], input[type="checkbox"], input[type="radio"]) {
  cursor: pointer;
}
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
  border-radius: 6px;
}
:where(button, a, input, select, textarea) {
  transition: background-color .18s ease, border-color .18s ease,
              color .18s ease, box-shadow .18s ease, transform .18s ease;
}
:where(button, [role="button"]):active { transform: scale(.985); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}


/* =====================================================================
   Frische Flächenwirkung: sanftes Anheben beim Überfahren.
   Nur bei Flächen ohne Bedienelemente darunter, damit das Zielen mit der
   Maus nicht gestört wird. Bei reduzierter Bewegung entfällt der Versatz.
   ===================================================================== */

.zgruppe {
  transition: box-shadow 0.25s var(--e-smooth), border-color 0.25s var(--e-smooth),
              transform 0.25s var(--e-smooth), background 0.25s var(--e-smooth);
}
.zgruppe:hover {
  border-color: var(--amber-dim);
  box-shadow: var(--schatten);
}
.zgruppe[open] { box-shadow: var(--schatten); }

.chip {
  transition: transform 0.25s var(--e-expo), box-shadow 0.25s var(--e-smooth),
              border-color 0.25s var(--e-smooth);
}
.chip:hover {
  transform: translateY(-3px);
  box-shadow: var(--schatten-hoch);
  border-color: var(--amber-dim);
}

.recht__cols article {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(1.2rem, 2vw, 1.6rem);
  box-shadow: var(--schatten);
  transition: transform 0.25s var(--e-expo), box-shadow 0.25s var(--e-smooth),
              border-color 0.25s var(--e-smooth);
}
.recht__cols article:hover {
  transform: translateY(-4px);
  box-shadow: var(--schatten-hoch);
  border-color: var(--sage);
}
.recht__cols h3 { border-top: 0; padding-top: 0; }

/* Der Ergebnisblock bekommt beim Überfahren nur Tiefe, keinen Versatz —
   er klebt und darf beim Scrollen nicht wandern. */
.result__sticky { transition: box-shadow 0.3s var(--e-smooth); }
.result__sticky:hover { box-shadow: var(--schatten-hoch); }

/* Zeilen der Aufschlüsselung heben sich leicht hervor */
.detail tbody tr:not(.d-gruppe):not(.d-note):hover { background: var(--hover-reihe); }

/* Weiche Rundungen für die kleinen Flächen */
.zgruppe, .chip, .btn, .segmented button, .result__toggle, .thema,
.zgruppe__head, .minibar__btn, .hero__cta { border-radius: var(--r-s); }
.zgruppe__head { border-radius: var(--r-s) var(--r-s) 0 0; }
.zgruppe:not([open]) .zgruppe__head { border-radius: var(--r-s); }
.check input[type="checkbox"] { border-radius: 5px; }
select, input[type="number"], input[type="text"] { border-radius: var(--r-s); }
.hero__cta, .btn { border-radius: var(--r-pille); }
.zgruppe__count { border-radius: var(--r-pille); padding: 0.1rem 0.55rem; }

@media (prefers-reduced-motion: reduce) {
  .chip:hover, .recht__cols article:hover { transform: none; }
}

/* Fusszeilen-Verweise auf volle Trefferhöhe bringen (44 px), ohne die
   Textzeile optisch auseinanderzuziehen. */
.footer__nav a, .footer__link, .footer a[href] {
  display: inline-flex; align-items: center;
  min-height: 44px; padding-block: 0.35rem;
}


/* =====================================================================
   FARBSTRUKTUR — überarbeitet 10.08.2026
   ---------------------------------------------------------------------
   Rückmeldung: „Farben sollen stärker zum Vorschein kommen, auch das
   Grüne, nicht so dezent." Vorher trug Grün nur Text und ein 3-px-Band,
   die Seite war praktisch eine weisse Fläche.

   Jetzt arbeitet die Seite in farbigen Zonen: ein sattgrüner Kopfbereich,
   helle Arbeitsfläche mit weissen Karten, ein grüner Ergebniskopf, grüner
   Tabellenkopf, grün getönte Schlusszone und grüner Fuss. Orange bleibt
   der Gegenpol für Beträge und Handlung.
   ===================================================================== */

:root, :root[data-theme="light"] {
  --gruen-tief: #2C3D13;
  --gruen-satt: #3D5419;
  --gruen-band: #47601F;
  --auf-gruen: #F2F6E8;
  --auf-gruen-2: #C3D6A1;
}
:root[data-theme="dark"] {
  --gruen-tief: #16200F;
  --gruen-satt: #1D2A14;
  --gruen-band: #27381A;
  --auf-gruen: #ECF3E4;
  --auf-gruen-2: #A9C973;
}

/* ---------- Kopfbereich als sattgrüne Fläche ---------- */

.hero {
  background: var(--gruen-tief);
  border-bottom: 0;
  /* Innerhalb des Kopfbereichs gelten helle Textwerte — dadurch ziehen
     alle Kindelemente automatisch nach, ohne Einzelregeln. */
  --tx: var(--auf-gruen);
  --tx-2: var(--auf-gruen-2);
  --tx-3: #9DB37D;
  --line: rgba(242, 246, 232, 0.22);
  --line-soft: rgba(242, 246, 232, 0.14);
  --panel: #FFFFFF;
  --amber: #F0B03A;
  color: var(--auf-gruen);
}
.hero__grid {
  background-image:
    radial-gradient(90% 70% at 78% 18%, rgba(240, 176, 58, 0.22), transparent 62%),
    radial-gradient(80% 80% at 12% 88%, rgba(169, 201, 115, 0.16), transparent 66%);
  -webkit-mask-image: none; mask-image: none;
}
.hero__title { color: var(--auf-gruen); }
.hero__title span { color: var(--auf-gruen-2); }
.hero__lead { color: var(--auf-gruen); border-left-color: var(--amber-flaeche); }
.hero .eyebrow {
  background: rgba(242, 246, 232, 0.1);
  border-color: rgba(242, 246, 232, 0.22);
  color: var(--auf-gruen-2);
}
.hero .chip {
  background: rgba(242, 246, 232, 0.08);
  border-color: rgba(242, 246, 232, 0.2);
  backdrop-filter: none;
}
.hero .chip:hover {
  background: rgba(242, 246, 232, 0.14);
  border-color: var(--amber-flaeche);
}
.hero .chip__k { color: var(--auf-gruen-2); }
.hero .chip__v { color: var(--auf-gruen); }

/* Die Beispielkarte hebt sich als eigene Fläche vom grünen Kopfbereich ab.
   Sie muss dessen helle Textwerte zurücksetzen — sonst steht heller Text
   auf heller Fläche. Die Werte hängen am Farbschema, damit die Karte im
   Dunkelmodus dunkel bleibt statt weiss mit dunkler Schrift. */
.hero__probe {
  --tx: #16210F;
  --tx-2: #47563D;
  --tx-3: #626D64;
  --line: #DEE8CE;
  --line-soft: #EBF1E0;
  --amber: #A05F0A;
  color: var(--tx);
}
.hero__probe .probe__rang,
.hero__probe li,
.hero__probe p { color: var(--tx); }
.hero__probe .probe__gruppe,
.hero__probe .probe__kopf { color: var(--tx-3); }

:root[data-theme="dark"] .hero { --panel: #1B231A; }
:root[data-theme="dark"] .hero__probe {
  --tx: #ECF3E4;
  --tx-2: #AFC0A6;
  --tx-3: #85977C;
  --line: #33422C;
  --line-soft: #26311F;
  --amber: #EFAE2A;
}

/* Lange Zusammensetzungen dürfen trennen, statt aus der Zeile zu laufen.
   „BESOLDUNGSRECHNER" ist ein Wort und kann sonst nirgends umbrechen —
   die Reveal-Zeile mit overflow:hidden hätte es beschnitten. */
.hero__title, .h2 {
  overflow-wrap: anywhere;
  hyphens: auto;
  max-width: 100%;
}
.split-line { overflow: clip visible; }
.js .split-line { overflow: hidden; }
.js .split-line.is-in { overflow: clip visible; }

/* ---------- Ergebnisblock mit grünem Kopf ---------- */

.result__sticky { padding: 0; overflow: visible; }
.result__kopf {
  background: var(--gruen-satt);
  color: var(--auf-gruen);
  padding: clamp(1.3rem, 2.2vw, 1.7rem);
  border-radius: var(--r) var(--r) 0 0;
  --tx-3: #A9BE86;
  --line: rgba(242, 246, 232, 0.2);
  --line-soft: rgba(242, 246, 232, 0.14);
}
.result__kopf .result__label { color: var(--auf-gruen-2); }
.result__kopf .result__label::after { background: linear-gradient(to right, rgba(242,246,232,0.3), transparent); }
.result__kopf .result__netto { color: var(--amber-flaeche); text-shadow: none; }
.result__kopf .result__cur { color: #C9A253; }
.result__kopf .result__sub { color: var(--auf-gruen-2); margin-bottom: 1.1rem; }
.result__kopf .bar { background: rgba(0,0,0,0.28); border-color: rgba(242,246,232,0.16); }
.result__kopf .bar__legend { color: var(--auf-gruen-2); margin-bottom: 0; }
.result__rumpf { padding: clamp(1.2rem, 2.2vw, 1.6rem); }

/* ---------- Kennzeichnung der Abschnitte ---------- */

.panel__nr {
  background: var(--gruen-band);
  border-color: var(--gruen-band);
  color: #F2F6E8;
  font-weight: 600;
}
.panel:hover .panel__nr { background: var(--amber); border-color: var(--amber); color: #FFF; }
.panel::before { background: var(--gruen-band); height: 4px; }

/* ---------- Tabellenkopf in Grün ---------- */

.grid thead th {
  background: var(--gruen-satt);
  color: #C3D6A1;
  border-bottom-color: var(--gruen-tief);
}
.grid thead th:first-child { background: var(--gruen-satt); color: #F2F6E8; }

/* ---------- Schlusszone grün getönt, Fuss sattgrün ---------- */

.recht { background: var(--sage-tint); border-top: 0; }
.footer {
  background: var(--gruen-tief);
  border-top: 0;
  --tx-3: #A9BE86;
  color: var(--auf-gruen-2);
}
.footer a { color: var(--auf-gruen); }
.footer__nav a:hover, .footer__link:hover { color: var(--amber-flaeche); }

/* ---------- Aktive Zustände kräftiger ---------- */

.segmented button[aria-checked="true"] {
  background: var(--gruen-band);
  border-color: var(--gruen-band);
  color: #F2F6E8;
  box-shadow: none;
}
.zgruppe[open] > .zgruppe__head {
  background: var(--sage-tint);
  color: var(--sage);
}
.check input[type="checkbox"]:checked {
  background-color: var(--gruen-band);
  border-color: var(--gruen-band);
}

/* Der Kopfbereich trägt jetzt eine eigene, satte Grundfarbe. Die Schleier
   darüber müssen mit dieser Farbe ausblenden statt mit der hellen Seiten-
   fläche — sonst hellen sie genau die Zone auf, in der die Überschrift
   steht, und der helle Text verliert seinen Untergrund. */
.hero__schleier {
  background:
    linear-gradient(to right, var(--gruen-tief) 30%,
                    color-mix(in srgb, var(--gruen-tief) 55%, transparent) 62%,
                    color-mix(in srgb, var(--gruen-tief) 25%, transparent) 100%),
    linear-gradient(to top, var(--gruen-tief) 2%, rgba(0, 0, 0, 0) 38%);
}
.hero__bild img { opacity: 0.42; }
:root[data-theme="light"] .hero__bild img { opacity: 0.34; }

/* Der seitenweite Schleier darf den Kopfbereich nicht aufhellen */
.hero { isolation: isolate; }

/* =====================================================================
   AUFBAU DER EINGABESPALTE — überarbeitet 10.08.2026
   Familienzuschlag und Arbeitszeit teilen sich eine Zeile; die drei
   Zulagenbereiche sind zugeklappt, bis jemand sie braucht.
   ===================================================================== */

.panel-paar {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(0.9rem, 1.8vw, 1.4rem);
  align-items: start;
}
@media (max-width: 880px) { .panel-paar { grid-template-columns: 1fr; } }

/* Arbeitszeit braucht wenig Platz — der Regelfall sind 100 % */
.panel--schmal .hint { font-size: 0.76rem; }
.panel--schmal .range__marks { font-size: 0.68rem; }

/* --------------------- Aufklappbare Bereiche --------------------- */

.panel--klapp { padding: 0; }
.panel--klapp > .panel__legend {
  display: flex; align-items: center; gap: 0.8rem;
  padding: clamp(1.1rem, 2vw, 1.5rem) clamp(1.4rem, 2.5vw, 2.1rem);
  margin: 0;
  cursor: pointer;
  list-style: none;
  border-radius: var(--r);
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s var(--e-smooth), color 0.2s var(--e-smooth);
}
.panel--klapp > .panel__legend::-webkit-details-marker { display: none; }
.panel--klapp > .panel__legend::marker { content: ''; }
.panel--klapp > .panel__legend:hover { background: var(--sage-tint); }
.panel--klapp > .panel__legend:focus-visible { outline: 2px solid var(--amber); outline-offset: -3px; }
.panel--klapp[open] > .panel__legend {
  border-radius: var(--r) var(--r) 0 0;
  border-bottom: 1px solid var(--line-soft);
}

.panel__titel { flex: 1 1 auto; }

.panel__zaehler {
  flex: 0 0 auto;
  min-width: 1.6rem; text-align: center;
  background: var(--amber-flaeche); color: var(--amber-kontrast);
  border-radius: var(--r-pille);
  padding: 0.1rem 0.55rem;
  font-family: var(--f-mono); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0;
}
.panel__zaehler[hidden] { display: none; }

.panel__pfeil {
  flex: 0 0 auto; color: var(--tx-3);
  transition: transform 0.3s var(--e-expo), color 0.2s var(--e-smooth);
}
.panel--klapp[open] > .panel__legend .panel__pfeil { transform: rotate(180deg); color: var(--sage); }

/* Inhalt der aufgeklappten Bereiche */
.panel--klapp > .panel__intro,
.panel--klapp > .zulagen {
  margin-inline: clamp(1.4rem, 2.5vw, 2.1rem);
}
.panel--klapp > .panel__intro { margin-top: clamp(1.1rem, 2vw, 1.4rem); }
.panel--klapp > .zulagen { margin-bottom: clamp(1.4rem, 2.5vw, 2.1rem); }

/* Die Farbmarke am Kopf entfällt bei den Klappbereichen — dort führt
   die Zeile selbst, und ein Balken über der Klappfläche stört. */
.panel--klapp::before { display: none; }

/* =====================================================================
   ÜBERSCHRIFT IM KOPFBEREICH — garantiert einzeilig
   ---------------------------------------------------------------------
   „Besoldungsrechner" ist ein einzelnes Wort von rund 8 em Breite. Eine
   an die Fensterbreite gekoppelte Größe (vw) passt nicht, weil die Zeile
   in der linken Spalte des zweispaltigen Kopfbereichs steht. Deshalb ist
   die Größe an die Breite der Spalte gebunden (cqw). Im Browser gemessen
   belegt das Wort in Outfit 800 als Versalien 11,37 em. Daraus folgt die
   Höchstgröße Spaltenbreite ÷ 11,37 — als 8,2 cqw notiert, was rund 7 %
   Reserve lässt. Wer die Schrift austauscht, muss diesen Wert neu messen:
   probe.style.whiteSpace='nowrap' setzen und Breite ÷ Schriftgrösse.
   ===================================================================== */

.hero__text { container-type: inline-size; }

.hero__title {
  font-size: min(4.3rem, 8.2cqw);
  /* Innerhalb der Zeile nicht mehr mitten im Wort trennen — die Größe
     oben stellt sicher, dass es passt. anywhere bleibt als Notnagel für
     sehr schmale Fenster erhalten. */
  overflow-wrap: normal;
  hyphens: manual;
}
@media (max-width: 380px) {
  .hero__title { overflow-wrap: anywhere; }
}

/* Ohne Container-Query-Unterstützung greift der bisherige Wert */
@supports not (font-size: 1cqw) {
  .hero__title { font-size: clamp(2.2rem, 4.2vw, 4rem); }
}

/* In zweispaltigen Feldern kann eine Beschriftung umbrechen und die andere
   nicht — dann stehen die Eingabefelder versetzt. Die Beschriftungen
   bekommen deshalb eine gemeinsame Mindesthöhe und sitzen unten bündig. */
.field--split > div > label {
  display: flex; align-items: flex-end;
  min-height: 2.5em;
  margin-bottom: 0.5rem;
}
.panel--schmal .field--split > div > label { min-height: 0; }

/* =====================================================================
   UNTERSEITEN — Erfahrungsstufen und Beförderung
   ===================================================================== */

/* Kompakter Kopfbereich: die Unterseiten führen direkt zum Werkzeug.
   Seit V2.0 mit demselben Bildhintergrund wie die Startseite. */
.hero--klein { min-height: auto; padding: clamp(4.5rem, 11vh, 7rem) 0 clamp(2.5rem, 6vh, 4rem); }
.hero--klein .hero__bild img { object-position: 72% 32%; }
.hero__inner--einspaltig { display: block; position: relative; z-index: 1; }
.hero--klein .hero__text { max-width: 62ch; }
.hero--klein .hero__title { margin-bottom: 1rem; }
.hero--klein .hero__lead { margin-bottom: 0; }

.brotkrumen {
  display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap;
  font-family: var(--f-mono); font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--auf-gruen-2); margin-bottom: 1.4rem;
}
.brotkrumen a { color: var(--auf-gruen-2); text-decoration: none; border-bottom: 1px solid transparent; }
.brotkrumen a:hover { color: var(--amber-flaeche); border-bottom-color: currentColor; }
.brotkrumen [aria-current] { color: var(--auf-gruen); }

/* Das Ergebnis der Unterseiten trägt Text statt Beträge — etwas kleiner */
#ergebnis .result__netto { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.7rem); }

/* Hinweisblock mit deutlicher, aber ruhiger Kennzeichnung */
.panel--hinweis {
  border-left: 4px solid var(--amber-flaeche);
}
.hinweis__titel {
  font-family: var(--f-display); font-size: 1.05rem; font-weight: 600;
  text-transform: none; letter-spacing: 0;
  margin: 0 0 0.6rem; color: var(--amber);
}
.panel--hinweis p { margin: 0; color: var(--tx-2); font-size: 0.9rem; }

/* Marke für verkürzte Fristen */
.marke {
  display: inline-block; margin-left: 0.5rem;
  background: var(--sage-tint); color: var(--sage);
  border-radius: var(--r-pille); padding: 0.05rem 0.5rem;
  font-family: var(--f-text); font-size: 0.68rem; letter-spacing: 0;
  text-transform: uppercase; font-weight: 600;
}
.ist-offen { color: var(--tx-3); font-style: italic; }

/* Erläuterung unter einer Tabellenzeile */
.zeile__hinweis td {
  color: var(--tx-3); font-size: 0.78rem; font-style: italic;
  white-space: normal; text-align: left;
  padding-top: 0; padding-bottom: 0.7rem;
}

/* Die Tabellen der Unterseiten haben Textspalten und dürfen umbrechen */
#verlauf, #fahrplan { min-width: 560px; }
#verlauf td, #fahrplan td { white-space: nowrap; }
#fahrplan td:last-child { font-family: var(--f-mono); font-size: 0.74rem; color: var(--tx-3); }

/* Datumsfelder wie die übrigen Eingaben */
input[type="date"] {
  width: 100%; min-height: 48px; padding: 0.6rem 0.9rem;
  background: var(--feld); color: var(--tx);
  border: 1px solid var(--line); border-radius: var(--r-s);
  font-family: var(--f-mono); font-size: 0.95rem;
}
input[type="date"]:hover { border-color: var(--tx-3); }
input[type="date"]:focus-visible {
  outline: none; border-color: var(--amber);
  box-shadow: 0 0 0 1px var(--amber), 0 0 14px var(--amber-glow);
}
:root[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(0.7);
}

/* Verweise auf die weiteren Rechner */
.werkzeuge { padding: clamp(3rem, 7vh, 5rem) 0; border-top: 1px solid var(--line-soft); }
.werkzeuge__liste {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem); margin-top: 2rem;
}
.werkzeug {
  display: block; text-decoration: none; color: inherit;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); padding: clamp(1.3rem, 2.2vw, 1.8rem);
  box-shadow: var(--schatten);
  transition: transform 0.25s var(--e-expo), box-shadow 0.25s var(--e-smooth),
              border-color 0.25s var(--e-smooth);
}
.werkzeug:hover {
  transform: translateY(-4px); box-shadow: var(--schatten-hoch);
  border-color: var(--sage);
}
.werkzeug h3 {
  font-size: 1.15rem; margin: 0 0 0.5rem; color: var(--sage);
  text-transform: none; letter-spacing: 0;
}
.werkzeug p { margin: 0 0 0.9rem; color: var(--tx-2); font-size: 0.89rem; }
.werkzeug__mehr {
  font-family: var(--f-display); font-weight: 600; color: var(--amber);
  font-size: 0.9rem;
}
.werkzeug:hover .werkzeug__mehr::after { transform: translateX(4px); }
.werkzeug__mehr::after {
  content: '→'; display: inline-block; margin-left: 0.45rem;
  transition: transform 0.25s var(--e-expo);
}
@media (prefers-reduced-motion: reduce) {
  .werkzeug:hover { transform: none; }
  .werkzeug:hover .werkzeug__mehr::after { transform: none; }
}

/* Der Verweis in der Brotkrumen-Navigation braucht volle Trefferhöhe */
.brotkrumen a { display: inline-flex; align-items: center; min-height: 44px; }

/* =====================================================================
   KOPFMENÜ — auf allen Seiten gleich
   ===================================================================== */

/* Überarbeitet (V2.0): weg von der orangenen, abgerundeten Pille. Die aktive
   Seite wird jetzt über eine kräftige Unterstreichungslinie am Leistenboden
   markiert — größer, ruhiger, moderner. Die Leiste selbst ist höher und die
   Menüpunkte sind deutlich gewachsen, weil sie die Hauptnavigation zwischen
   den drei Rechnern tragen. */
.kopf {
  position: sticky; top: 0; z-index: 60;
  background: var(--glas-leiste);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line-soft);
}
.kopf__inner {
  display: flex; align-items: stretch; gap: clamp(0.7rem, 2.5vw, 2.2rem);
  min-height: var(--leiste-h);
}

.kopf__marke {
  display: inline-flex; align-items: center; gap: 0.7rem;
  align-self: center;
  text-decoration: none; color: var(--sage);
  font-family: var(--f-display); font-weight: 700;
  /* Wortmarke waechst leicht mit der Bildschirmbreite mit, bleibt aber
     unter der Hoehe der Leiste (--leiste-h). */
  font-size: var(--marke-schrift);
  letter-spacing: -0.015em; flex: 0 0 auto;
  min-height: 44px;
  transition: opacity 0.2s var(--e-smooth);
}
.kopf__marke svg,
.kopf__marke img {
  flex: 0 0 auto;
  width: var(--marke-h);
  height: var(--marke-h);
}

/* Uebergang beim Schrumpfen. Nur wenn Bewegung erwuenscht ist — sonst
   springt die Leiste ohne Animation in die kleine Groesse. */
@media (prefers-reduced-motion: no-preference) {
  .kopf__inner { transition: min-height 0.3s var(--e-smooth); }
  .kopf__marke { transition: opacity 0.2s var(--e-smooth), font-size 0.3s var(--e-smooth); }
  .kopf__marke svg,
  .kopf__marke img {
    transition: width 0.3s var(--e-smooth), height 0.3s var(--e-smooth);
  }
}
.kopf__marke:hover { opacity: 0.75; }
/* =====================================================================
   MARKE UND BEDIENKNÖPFE AUF SCHMALEN BILDSCHIRMEN

   Hier stand einmal `.kopf__marke span { display: none }` — der Schriftzug
   verschwand unter 680 px komplett. Übrig blieb die Bildmarke, und weil
   der Hamburger im Markup direkt hinter der Marke steht, klebten Logo und
   Menüknopf aneinander: zwei Kästchen links, viel Leere rechts. Auf dem
   Handy war damit nirgends zu lesen, worauf man sich befindet.

   Jetzt: Der Schriftzug bleibt und darf schrumpfen, die beiden Knöpfe
   wandern nach rechts außen. Die Reihenfolge wird über `order` gedreht,
   nicht über das Markup — die Tastatur-Reihenfolge (Marke, Menü, Thema)
   bleibt dadurch die sinnvolle, auch wenn optisch das Thema vor dem
   Menüknopf sitzt.
   ===================================================================== */
@media (max-width: 680px) {
  /* Darf schmaler werden als sein Inhalt — sonst drückt der Schriftzug
     die Knöpfe aus der Leiste, statt selbst zu kürzen. */
  .kopf__marke { flex: 0 1 auto; min-width: 0; gap: 0.5rem; }
  .kopf__marke span {
    display: block; min-width: 0;
    font-size: clamp(0.95rem, 0.55rem + 2vw, 1.2rem);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
}

@media (max-width: 960px) {
  .kopf__inner { align-items: center; gap: 0.45rem; }
  .kopf__marke img { width: 42px; height: 42px; }

  /* Beide Knöpfe nach rechts; der Menüknopf ganz außen, weil dort der
     Daumen liegt. `margin-left: auto` am ersten der beiden schiebt die
     Gruppe geschlossen an den Rand. */
  .kopf[data-menue] .thema        { order: 2; margin-left: auto; padding: 0.4rem 0.6rem; }
  .kopf[data-menue] .kopf__burger { order: 3; }
  .kopf__marke                    { order: 1; }
}

/* Ganz schmal (iPhone SE): Der Schriftzug hat Vorrang vor der Bildmarke —
   ein Logo ohne Namen sagt einem Erstbesucher nichts. */
@media (max-width: 360px) {
  .kopf__marke img { width: 34px; height: 34px; }
  .kopf__marke span { font-size: 0.92rem; }
}

.kopf__nav {
  display: flex; align-items: stretch; gap: clamp(0.2rem, 1.4vw, 0.9rem);
  flex: 1 1 auto; min-width: 0;
  overflow-x: auto; scrollbar-width: none;
}
.kopf__nav::-webkit-scrollbar { display: none; }
.kopf__nav a {
  position: relative;
  display: inline-flex; align-items: center;
  padding: 0 clamp(0.55rem, 1.6vw, 1.05rem); white-space: nowrap;
  text-decoration: none; color: var(--tx-2);
  font-family: var(--f-display); font-weight: 600;
  font-size: 1.04rem; letter-spacing: 0.005em;
  transition: color 0.18s var(--e-smooth);
}
/* Die Markierungslinie wächst beim Überfahren aus der Mitte, bei der
   aktiven Seite steht sie dauerhaft in voller Breite. */
.kopf__nav a::after {
  content: '';
  position: absolute; left: clamp(0.55rem, 1.6vw, 1.05rem); right: clamp(0.55rem, 1.6vw, 1.05rem);
  bottom: -1px; height: 3px;
  background: linear-gradient(90deg, var(--sage), var(--amber-flaeche));
  transform: scaleX(0); transform-origin: 50% 50%;
  transition: transform 0.24s var(--e-expo);
}
.kopf__nav a:hover { color: var(--tx); }
.kopf__nav a:hover::after { transform: scaleX(0.55); }
.kopf__nav a.ist-hier { color: var(--tx); }
.kopf__nav a.ist-hier::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .kopf__nav a::after { transition: none; }
}

/* Auf schmalen Schirmen passen die vollen Namen nicht nebeneinander. Die Leiste
   ließe sich zwar seitwärts wischen, aber das sieht niemand — der dritte Rechner
   wäre praktisch unauffindbar. Deshalb kurze Namen statt verstecktem Scrollen. */
.nav__kurz { display: none; }
@media (max-width: 680px) {
  /* Auf dem Handy sitzt die Marke allein in der Leiste (die Wortmarke ist
     ausgeblendet), deshalb faellt die Leiste hier knapper aus. */
  :root { --leiste-h: 84px; }
  :root.kopf-klein { --leiste-h: 62px; }
  .kopf__nav { justify-content: space-between; gap: 0.1rem; }
  .kopf__nav a { font-size: 0.95rem; padding: 0 0.55rem; }
  .kopf__nav a::after { left: 0.55rem; right: 0.55rem; }
}

/* Fünf Menüpunkte statt vier: Die langen Wörter (mit Logo-Wortmarke und
   Schalter) passen erst ab rund 1300 px nebeneinander. Bis dahin zeigen wir
   die Kurzformen und setzen die Punkte enger. Unter 960 px übernimmt ohnehin
   das Hamburger-Panel (kopfleiste.js), das im Panel wieder die Langformen zeigt. */
@media (max-width: 1300px) {
  .nav__lang { display: none; }
  .nav__kurz { display: inline; }
  .kopf__nav a { padding: 0 0.55rem; }
}

/* Der Umschalter sitzt in der Leiste; eckiger Radius statt Pille */
.thema {
  position: static; flex: 0 0 auto; align-self: center;
  background: transparent; border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.4rem 0.85rem; min-height: 44px;
}
:root { --thema-frei: 0px; }

/* Der Kopfbereich darf nicht unter der klebenden Leiste verschwinden */
.result__sticky { top: calc(var(--leiste-h) + clamp(0.8rem, 2.5vh, 1.5rem)); }

@media print { .kopf { display: none !important; } }

/* ---------------------------------------------------------------------
   Ergebniszeile mit WORT statt Betrag.

   .result__netto ist für Geldbeträge gebaut: monospaced, mindestens
   2,6 rem. Auf der Beförderungs- und der Stufenseite steht dort aber ein
   Dienstgrad. „Oberstabsfeldwebel“ sind 18 Zeichen — in einer dicktengleichen
   Schrift rund 450 px und damit breiter als die Karte; das Wort lief rechts
   heraus. Für Wörter gilt deshalb: kleiner beginnen, umbrechen dürfen,
   notfalls trennen. Die Beträge auf der Startseite bleiben unberührt.
   --------------------------------------------------------------------- */
.result__netto--wort {
  font-size: clamp(1.5rem, 0.9rem + 3vw, 2.5rem);
  line-height: 1.06;
  overflow-wrap: anywhere;   /* Notbremse: bricht auch ohne Trennstelle */
  hyphens: auto;             /* bevorzugt eine saubere Trennung (lang="de") */
}

/* =====================================================================
   DATUMSFELD — Tag, Monat und Jahr als Auswahllisten
   ===================================================================== */

.datum { position: relative; }

.datum__gruppe {
  display: grid;
  grid-template-columns: 5.2rem 1fr 6rem auto;
  gap: 0.4rem;
  align-items: center;
}
@media (max-width: 520px) {
  .datum__gruppe { grid-template-columns: 4.6rem 1fr 5.4rem auto; gap: 0.3rem; }
}

.datum__teil {
  min-height: 48px; padding: 0.6rem 0.5rem 0.6rem 0.7rem;
  /* Kein background-Kurzschreib: es würde das Pfeil-Bild der select-Regel
     zurücksetzen und im Dunkelmodus als gekacheltes Muster wiederkehren. */
  background-color: var(--feld); color: var(--tx);
  border: 1px solid var(--line); border-radius: var(--r-s);
  font-family: var(--f-mono); font-size: 0.95rem;
  background-repeat: no-repeat;
  background-position: right 0.4rem center; background-size: 15px;
  padding-right: 1.7rem;
}
.datum__monat { font-family: var(--f-text); }
.datum__teil:hover { border-color: var(--tx-3); }
.datum__teil:focus-visible {
  outline: none; border-color: var(--amber);
  box-shadow: 0 0 0 1px var(--amber), 0 0 14px var(--amber-glow);
}

/* Der native Datumswähler bleibt als Kalenderknopf erreichbar */
/* Der Knopf war früher ein <input type="date">; color: transparent versteckte
   dessen Text, und die ::-webkit-Regeln bogen den Auswahlknopf zurecht. Seit
   er ein echter <button> mit eigenem Symbol ist, hätte transparent das Symbol
   gleich mit unsichtbar gemacht — die Regeln sind deshalb ersetzt. */
.datum__kalender {
  width: 48px; min-height: 48px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--r-s);
  background: var(--feld); color: var(--tx-2);
  cursor: pointer;
}
.datum__kalender:hover { border-color: var(--amber-dim); color: var(--amber); }
.datum__kalender[aria-expanded="true"] {
  border-color: var(--amber); color: var(--amber); background: var(--amber-tint);
}
.datum__kalender:focus-visible {
  outline: 2px solid var(--amber); outline-offset: 2px;
}

/* =====================================================================
   IST-STAND im Beförderungsrechner
   ===================================================================== */

.zeile__istStand th, .zeile__istStand td {
  background: var(--sage-tint);
  font-weight: 600;
}
.zeile__vergangen th, .zeile__vergangen td { color: var(--tx-3); }
.marke--jetzt {
  display: inline-block; margin-left: 0.5rem;
  background: var(--sage); color: var(--amber-kontrast);
  border-radius: var(--r-pille); padding: 0.05rem 0.55rem;
  font-family: var(--f-text); font-size: 0.68rem; letter-spacing: 0;
  text-transform: uppercase; font-weight: 700;
}

/* =====================================================================
   QUELLEN-SEKTION (V2.0)
   ===================================================================== */
.recht--quellen { border-top: 1px solid var(--line-soft); }
.quelle__links {
  margin-top: 0.7rem;
  font-size: 0.82rem;
  color: var(--tx-3);
}
.quelle__links a {
  color: var(--tx-2);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
}
.quelle__links a:hover { color: var(--tx); text-decoration-color: var(--amber); }
.recht--quellen em { font-style: italic; color: var(--tx-2); }

/* =====================================================================
   BLÄTTERKALENDER (assets/js/datumsfeld.js)

   Eigener Kalender statt des Datumswählers des Browsers. Der native
   liess sich nicht schliessen und sah in jedem Browser anders aus;
   dieser gehorcht der Seite und ist automatisiert prüfbar.
   ===================================================================== */

.kal {
  position: absolute; z-index: 40;
  top: calc(100% + 0.4rem); right: 0;
  width: min(19rem, calc(100vw - 2rem));
  padding: 0.7rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--schatten-hoch);
}
.kal[hidden] { display: none; }

.kal__kopf {
  display: grid; grid-template-columns: 2.2rem 1fr 2.2rem;
  align-items: center; gap: 0.3rem; margin-bottom: 0.5rem;
}
.kal__titel {
  text-align: center; font-weight: 600; font-size: 0.9rem; color: var(--tx);
}
.kal__nav {
  min-height: 2.2rem; border: 1px solid var(--line); border-radius: var(--r-s);
  background: var(--feld); color: var(--tx); cursor: pointer;
  font-size: 1.1rem; line-height: 1; padding: 0;
}
.kal__nav:hover:not(:disabled) { border-color: var(--amber-dim); background: var(--hover); }
.kal__nav:disabled { opacity: 0.35; cursor: default; }

.kal__wochentage, .kal__gitter {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.15rem;
}
.kal__wochentage span {
  text-align: center; font-family: var(--f-mono); font-size: 0.62rem;
  letter-spacing: 0.06em; color: var(--tx-3); padding-bottom: 0.25rem;
}
.kal__tag {
  /* 2,3 rem statt der sonst üblichen 44 px: Sieben Spalten mit 44 px
     wären 308 px und sprengten auf schmalen Geräten die Karte. Der
     Kalender ist die BEQUEME Zweitbedienung — wer präzise zielen will
     oder muss, nimmt die drei Auswahllisten daneben, die die volle
     Zielgrösse haben. */
  min-height: 2.3rem; padding: 0;
  border: 1px solid transparent; border-radius: var(--r-s);
  background: transparent; color: var(--tx);
  font-family: var(--f-mono); font-size: 0.8rem; cursor: pointer;
}
.kal__tag:hover { background: var(--hover); border-color: var(--amber-dim); }
.kal__tag.ist-gewaehlt {
  background: var(--sage); border-color: var(--sage); color: #fff; font-weight: 700;
}
:root[data-theme="dark"] .kal__tag.ist-gewaehlt { color: #101610; }
.kal__tag:focus-visible, .kal__nav:focus-visible {
  outline: 2px solid var(--amber); outline-offset: 1px;
}
.kal__leer { min-height: 2.3rem; }

@media print { .kal { display: none !important; } }

/* =====================================================================
   FUSSZEILE — Signatur des Herstellers

   Schmal und zurückhaltend am unteren Rand: Die Seite gehört dem
   Betreiber, nicht der Agentur. Das Herz ist als Bild ausgezeichnet
   und trägt einen Alternativtext, sonst liest ein Screenreader
   „schwarzes Herz" mitten im Satz vor.
   ===================================================================== */
.footer__signatur {
  grid-column: 1 / -1;
  margin: 1.4rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.76rem;
  color: var(--tx-3);
  text-align: right;
  letter-spacing: 0.01em;
}
.footer__signatur a { color: var(--tx-2); text-decoration: none; border-bottom: 1px solid var(--line); }
.footer__signatur a:hover { color: var(--amber); border-bottom-color: var(--amber); }
.footer__herz { color: var(--alert); font-style: normal; }

@media (max-width: 700px) {
  .footer__signatur { text-align: left; }
}
@media print { .footer__signatur { display: none; } }

/* =====================================================================
   KOPFLEISTE AUF SCHMALEN SCHIRMEN

   Befund vom 17.08.2026: Bei 375 px waren von vier Menüpunkten nur zwei
   sichtbar — „Beförderung" abgeschnitten, „Handbuch" gar nicht. Die Leiste
   lässt sich zwar seitwärts wischen, aber ohne sichtbaren Hinweis versucht
   das niemand; genau das steht schon länger als Bedenken im README. Für
   das Handbuch ist das teuer: Es ist der Einstieg in die Mailliste.

   Zwei Maßnahmen, gemessen statt geraten:
   1. Enger setzen — Bildmarke kleiner, Polsterung und Schriftgrad der
      Menüpunkte reduziert. Das schafft rund 65 px.
   2. Ein Verlauf am rechten Rand zeigt an, dass es weitergeht, und
      verschwindet, sobald das Ende erreicht ist (assets/js/kopfleiste.js).
   ===================================================================== */
@media (max-width: 520px) {
  .kopf__marke img { width: 48px; height: 48px; }
  .kopf__inner { gap: 0.5rem; }
  .kopf__nav { gap: 0.1rem; }
  .kopf__nav a { padding: 0 0.4rem; font-size: 0.95rem; }
  .kopf__nav a::after { left: 0.4rem; right: 0.4rem; }
}

/* Wischhinweis: Verlauf am rechten Rand der Leiste. Liegt auf einem
   Elternelement, nicht auf .kopf__nav selbst — ein Pseudoelement im
   scrollbaren Behälter würde mitscrollen und wäre sofort weg. */
.kopf__navhuelle { position: relative; flex: 1 1 auto; min-width: 0; display: flex; }
.kopf__navhuelle::after {
  content: '';
  position: absolute; top: 0; right: 0; bottom: 0; width: 2.2rem;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--glas-leiste) 70%);
  opacity: 0; transition: opacity 0.2s ease;
}
.kopf__navhuelle[data-mehr="ja"]::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .kopf__navhuelle::after { transition: none; }
}

/* =====================================================================
   MOBILES MENÜ (Hamburger)

   Unter 620 px wandern die Menüpunkte in ein aufklappbares Feld. Vorher
   lagen sie in einer seitwärts scrollbaren Leiste — bei 375 px waren zwei
   von vier Punkten unerreichbar, darunter das Handbuch.

   Zwei Dinge sind hier bewusst so gelöst:

   1. OHNE JAVASCRIPT bleibt alles wie vorher. Alle Regeln hängen an
      `.kopf[data-menue]`, und dieses Attribut setzt erst kopfleiste.js.
      Wer kein JavaScript hat, bekommt weiterhin die wischbare Leiste —
      lieber unbequem als unerreichbar.

   2. IM PANEL stehen die VOLLEN Namen. In der Zeile mussten sie zu
      „Sold" und „Stufen" gekürzt werden, weil der Platz fehlte; im Panel
      ist er da, und „Besoldung" ist verständlicher als „Sold".
   ===================================================================== */

.kopf__burger {
  display: none;              /* nur unter 620 px, siehe unten */
  align-items: center; justify-content: center;
  width: 48px; height: 48px; flex: 0 0 auto;
  padding: 0; border: 1px solid var(--line); border-radius: var(--r-s);
  background: var(--feld); color: var(--tx);
  cursor: pointer;
}
.kopf__burger:hover { border-color: var(--amber-dim); color: var(--amber); }
.kopf__burger:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* Drei Striche, die sich zum Kreuz legen. Nur transform und opacity —
   beides läuft auf der Grafikkarte und ruckelt nicht. */
.kopf__burger span {
  position: absolute; width: 20px; height: 2px; border-radius: 2px;
  background: currentColor;
  transition: transform 0.22s var(--e-smooth), opacity 0.16s linear;
}
.kopf__burger span:nth-child(1) { transform: translateY(-6px); }
.kopf__burger span:nth-child(3) { transform: translateY(6px); }
.kopf[data-menue="offen"] .kopf__burger span:nth-child(1) { transform: rotate(45deg); }
.kopf[data-menue="offen"] .kopf__burger span:nth-child(2) { opacity: 0; }
.kopf[data-menue="offen"] .kopf__burger span:nth-child(3) { transform: rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
  .kopf__burger span { transition: none; }
}

@media (max-width: 960px) {
  .kopf[data-menue] .kopf__burger { display: inline-flex; position: relative; }

  /* Die Menüleiste wird zum Panel unter der Kopfleiste. */
  .kopf[data-menue] .kopf__navhuelle {
    position: absolute; left: 0; right: 0; top: 100%;
    display: block; padding: 0.5rem clamp(1rem, 4vw, 2rem) 1rem;
    /* DECKEND, nicht durchscheinend. Die Kopfleiste selbst darf milchig
       sein — sie ist schmal und man liest darin nur zwei Wörter. Ein
       aufgeklapptes Menü liegt dagegen über Fließtext und Überschriften;
       bei 97 % Deckkraft schlug die Hero-Headline sichtbar durch und die
       Menüpunkte wurden unruhig. Lesbarkeit schlägt Glaseffekt. */
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--schatten-hoch);
    /* Zugeklappt: nicht nur unsichtbar, sondern auch nicht fokussierbar.
       Ein bloßes opacity:0 ließe sich weiter mit dem Tabulator erreichen. */
    visibility: hidden; opacity: 0;
    transform: translateY(-0.5rem);
    transition: opacity 0.2s ease, transform 0.2s var(--e-smooth), visibility 0.2s;
  }
  .kopf[data-menue="offen"] .kopf__navhuelle {
    visibility: visible; opacity: 1; transform: translateY(0);
  }
  .kopf[data-menue] .kopf__navhuelle::after { display: none; }  /* kein Wischverlauf im Panel */

  .kopf[data-menue] .kopf__nav {
    flex-direction: column; align-items: stretch;
    gap: 0.1rem; overflow: visible;
  }
  .kopf[data-menue] .kopf__nav a {
    min-height: 52px; padding: 0 0.7rem;
    font-size: 1.08rem;
    border-radius: var(--r-s);
    border-bottom: 1px solid var(--line-soft);
  }
  .kopf[data-menue] .kopf__nav a:last-child { border-bottom: 0; }
  .kopf[data-menue] .kopf__nav a.ist-hier { background: var(--sage-tint); color: var(--sage-tief); }
  /* Der Verlaufsstrich der Zeilenfassung hat im Panel keinen Sinn. */
  .kopf[data-menue] .kopf__nav a::after { display: none; }

  /* Im Panel ist Platz für die ausgeschriebenen Namen. */
  .kopf[data-menue] .kopf__nav .nav__kurz { display: none; }
  .kopf[data-menue] .kopf__nav .nav__lang { display: inline; }

  @media (prefers-reduced-motion: reduce) {
    .kopf[data-menue] .kopf__navhuelle { transition: none; }
  }
}

/* Schleier hinter dem offenen Panel: macht sichtbar, dass die Seite
   dahinter wartet, und fängt den Klick zum Schließen ab. */
.kopf__schleier {
  position: fixed; inset: 0; z-index: 55;
  background: rgba(10, 14, 9, 0.38);
  opacity: 0; visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s;
  border: 0; padding: 0; cursor: pointer;
}
.kopf__schleier[data-offen="ja"] { opacity: 1; visibility: visible; }
@media (min-width: 961px) { .kopf__schleier { display: none; } }
@media (prefers-reduced-motion: reduce) { .kopf__schleier { transition: none; } }
@media print { .kopf__burger, .kopf__schleier { display: none !important; } }

/* =====================================================================
   WEITEREMPFEHLEN

   Eigenes Band zwischen Inhalt und Fuß, in der ruhigen Sekundärfläche.
   Bewusst kein Farbklecks: Die Bitte soll auffallen, weil sie an der
   richtigen Stelle steht, nicht weil sie schreit.
   ===================================================================== */
.teilen {
  background: var(--bg-2);
  border-top: 1px solid var(--line-soft);
  padding: clamp(2.2rem, 5vw, 3.4rem) 0;
}
.teilen__inner {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(1rem, 3vw, 2.4rem);
}
.teilen__wort { flex: 1 1 22rem; min-width: 0; }
.teilen__titel {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.15rem, 0.95rem + 0.9vw, 1.5rem);
  letter-spacing: -0.01em; margin: 0 0 0.35rem; color: var(--tx);
}
.teilen__text { margin: 0; color: var(--tx-2); max-width: 46ch; }
.teilen__knoepfe {
  display: flex; flex-wrap: wrap; gap: 0.6rem; flex: 0 1 auto;
}
/* Der WhatsApp-Weg ist ein <a> — ohne diese Zeile trägt er die
   Unterstreichung aller Verweise und fällt aus der Knopfreihe. */
.teilen__knoepfe .btn { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; }
.teilen__knoepfe .btn svg { flex: 0 0 auto; }
/* Die Rückmeldung nach dem Kopieren steht in einer eigenen Zeile über die
   volle Breite — sonst springt die Knopfreihe um, sobald sie erscheint. */
.teilen__meldung {
  flex: 1 0 100%; margin: 0; min-height: 1.4em;
  font-family: var(--f-mono); font-size: 0.78rem;
  letter-spacing: 0.04em; color: var(--sage-tief, var(--sage));
}
@media (max-width: 620px) {
  .teilen__knoepfe { width: 100%; }
  /* Auf dem Handy volle Breite: Zwei halbe Knöpfe nebeneinander sind auf
     375 px für keinen Daumen mehr sicher zu treffen. */
  .teilen__knoepfe .btn { flex: 1 1 100%; justify-content: center; min-height: 48px; }
}
@media print { .teilen { display: none !important; } }

/* =====================================================================
   SCROLLEN AUF BERÜHRGERÄTEN

   `backdrop-filter` zwingt den Browser, in JEDEM Bild die Fläche hinter
   dem Element neu abzutasten und weichzuzeichnen. Bei einem Element, das
   während des ganzen Bildlaufs sichtbar ist — der klebenden Kopfleiste und
   der festen Ergebnisleiste am unteren Rand —, fällt diese Arbeit
   sechzigmal je Sekunde an. Auf iOS ist das eine der häufigsten Ursachen
   für ein Scrollen, das „ab und zu hakt".

   Der Witz dabei: --glas-leiste ist zu 97 % deckend. Hinter der Leiste ist
   also ohnehin fast nichts zu sehen — der Weichzeichner kostet viel und
   zeigt kaum etwas. Auf dem Schreibtisch, wo Rechenleistung reichlich da
   ist und ein Mauszeiger langsamer scrollt, bleibt er erhalten.

   ⚠ Ehrlich gesagt: Im Prüfstand war das Ruckeln NICHT nachstellbar
   (16,7 ms Mittel, keine blockierenden Aufgaben, selbst bei sechsfach
   gedrosselter CPU). Headless-Chromium bildet iOS-Safari aber nicht ab.
   Das hier ist die begründete Maßnahme an der wahrscheinlichsten Stelle,
   kein belegter Befund — nachzuprüfen bleibt es am echten Gerät.
   ===================================================================== */
@media (hover: none) {
  .kopf, .minibar, .chip {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  /* Ohne Weichzeichner muss die Fläche selbst tragen — deckend statt
     durchscheinend, sonst schimmert der Inhalt durch die restlichen 3 %. */
  .kopf, .minibar { background: var(--bg); }
  .chip { background: var(--panel); }
}

/* =====================================================================
   MITLAUFENDER TEILEN-KNOPF (unten rechts)

   Die Ecke ist nicht frei. Dort liegen bereits:
     .minibar   feste Ergebnisleiste, unter 1001 px sichtbar, rund 4,6rem
     .consent   Einwilligungsbanner, z-index 80
   Der Knopf muss also ÜBER der Ergebnisleiste sitzen und UNTER dem
   Banner — sonst verdeckt er entweder das Ergebnis oder er steht vor
   einer Einwilligung, die zuerst beantwortet werden will.

   Der Abstand nach unten ist fest und nicht an `.minibar.is-in`
   gekoppelt, obwohl die Leiste erst beim Rechnen hereinfährt. Grund:
   `body.has-minibar` reserviert den Platz ohnehin dauerhaft. Ein Knopf,
   der bei jedem Ein- und Ausfahren mitspringt, ist unruhiger als einer,
   der zwischendurch etwas hoch steht.
   ===================================================================== */
.teilenfix {
  position: fixed;
  right: clamp(0.9rem, 3vw, 1.6rem);
  bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: 70;
  display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem;
}

/* Unter 1001 px steht die Ergebnisleiste im Weg — der Knopf rückt über
   sie. 4,6rem ist ihre reservierte Höhe (siehe body.has-minibar), plus
   ein Finger breit Abstand. */
@media (max-width: 1000px) {
  body.has-minibar .teilenfix { bottom: calc(5.4rem + env(safe-area-inset-bottom)); }
}

.teilenfix__knopf {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 48px; padding: 0 1.15rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  box-shadow: var(--schatten-hoch);
  color: var(--tx);
  cursor: pointer;
  font-family: var(--f-mono); text-transform: uppercase;
  letter-spacing: 0.1em; font-size: 0.7rem;
  transition: color 0.2s var(--e-smooth), border-color 0.2s var(--e-smooth), transform 0.2s var(--e-smooth);
}
.teilenfix__knopf:hover { color: var(--amber); border-color: var(--amber-dim); }
.teilenfix__knopf:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.teilenfix__knopf svg { flex: 0 0 auto; }

.teilenfix__menue {
  display: flex; flex-direction: column; gap: 0.3rem;
  padding: 0.4rem;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  /* Deckend: Das Menü liegt über Fließtext und Zahlen. */
  background: var(--panel);
  box-shadow: var(--schatten-hoch);
  min-width: 12.5rem;
}
.teilenfix__eintrag {
  display: flex; align-items: center; gap: 0.55rem;
  min-height: 44px; padding: 0 0.8rem;
  border: 0; border-radius: var(--r-s);
  background: transparent; color: var(--tx-2);
  text-decoration: none; cursor: pointer; text-align: left;
  font-family: var(--f-mono); text-transform: uppercase;
  letter-spacing: 0.08em; font-size: 0.68rem;
  transition: background 0.18s var(--e-smooth), color 0.18s var(--e-smooth);
}
.teilenfix__eintrag:hover { background: var(--hover); color: var(--amber); }
.teilenfix__eintrag:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }

.teilenfix__meldung {
  margin: 0; max-width: 14rem; text-align: right;
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.04em;
  color: var(--tx-2);
}
.teilenfix__meldung:empty { display: none; }

/* Ist der große Block über dem Fuß im Bild, tritt der mitlaufende Knopf
   zurück — sichtbar bleiben beide zugleich wäre doppelt gemoppelt.
   visibility statt display, damit er nicht mehr mit dem Tabulator
   erreichbar ist, aber weich verschwindet. */
.teilenfix[data-still="ja"] {
  opacity: 0; visibility: hidden; transform: translateY(0.4rem);
  transition: opacity 0.25s ease, transform 0.25s var(--e-smooth), visibility 0.25s;
}
.teilenfix[data-still="nein"] {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 0.25s ease, transform 0.25s var(--e-smooth);
}
@media (prefers-reduced-motion: reduce) {
  .teilenfix, .teilenfix__knopf { transition: none; }
}

@media print { .teilenfix { display: none !important; } }

/* =====================================================================
   AUSBAU BAUTEIL 1 — Alimentation, Nachzahlung, Musterwiderspruch
   Alle Farben über Tokens, damit der Dunkelmodus automatisch mitzieht.
   ===================================================================== */

/* ---- Statusbaustein (alimentation.html, ganz oben) ---------------- */
.status {
  display: flex; gap: 0.9rem; align-items: flex-start;
  background: var(--amber-tint); border: 1px solid var(--amber-hell);
  border-left: 4px solid var(--amber-flaeche);
  border-radius: var(--r-s); padding: 1rem 1.2rem; margin: 0 0 1.6rem;
}
.status__punkt {
  flex: 0 0 auto; width: 10px; height: 10px; margin-top: 0.35rem;
  border-radius: 50%; background: var(--amber-flaeche);
}
.status__text { margin: 0; color: var(--tx); font-size: 0.98rem; line-height: 1.5; }
.status__stand {
  font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--amber); display: block; margin-bottom: 0.15rem;
}

/* ---- Zeitleiste --------------------------------------------------- */
.zeitleiste { list-style: none; margin: 0; padding: 0; position: relative; }
.zeitleiste::before {
  content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px;
  width: 2px; background: var(--line);
}
.zeitleiste li { position: relative; padding: 0 0 1.3rem 1.9rem; }
.zeitleiste li::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--panel); border: 3px solid var(--sage);
}
.zeitleiste li:last-child { padding-bottom: 0; }
.zeitleiste li[data-jetzt]::before { border-color: var(--amber-flaeche); background: var(--amber-flaeche); }
.zeitleiste__datum {
  font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--tx-3); display: block; margin-bottom: 0.15rem;
}
.zeitleiste__titel { font-weight: 700; color: var(--tx); }
.zeitleiste p { margin: 0.25rem 0 0; color: var(--tx-2); font-size: 0.94rem; }

/* ---- Vorbehalt-Kasten (über jedem Ergebnis mit Modellcharakter) --- */
.vorbehalt {
  background: var(--alert-tint); border: 1px solid var(--alert);
  border-radius: var(--r-s); padding: 0.85rem 1.1rem; margin: 0 0 1rem;
  color: var(--tx); font-size: 0.92rem; line-height: 1.5;
}
.vorbehalt strong { color: var(--alert); }

/* ---- Betroffenheits-Ergebnis (nachzahlung.html) ------------------ */
.nz__verdikt { font-family: var(--f-display); font-weight: 700; font-size: 1.35rem; line-height: 1.2; margin: 0.2rem 0 0; }
.nz__verdikt[data-stand="betroffen"] { color: var(--sage-tief); }
.nz__verdikt[data-stand="neutral"] { color: var(--tx-3); }
.nz__grad { font-weight: 600; color: var(--amber); margin: 0.4rem 0 0; }
.nz__liste { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.nz__liste li { margin: 0.35rem 0; color: var(--tx-2); font-size: 0.92rem; line-height: 1.5; }
.nz__block { margin-top: 1rem; }
.nz__block h3 {
  font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--tx-3); margin: 0 0 0.3rem;
}

/* ---- Newsletter-Baustein (alle drei neuen Seiten) ---------------- */
.newsletter { padding: 2.4rem 0; }
.newsletter__inner {
  background: var(--sage-tint); border: 1px solid var(--line);
  border-radius: 18px; padding: 1.8rem; box-shadow: var(--schatten);
}
.newsletter__titel { font-family: var(--f-display); font-weight: 700; font-size: 1.3rem; color: var(--sage-tief); margin: 0 0 0.4rem; }
.newsletter__text { color: var(--tx-2); margin: 0 0 1rem; max-width: 46rem; line-height: 1.6; }
.newsletter__form { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.newsletter__form input[type="email"] {
  flex: 1 1 240px; min-height: 48px; padding: 0.6rem 0.9rem;
  border: 1px solid var(--line); border-radius: var(--r-s);
  background: var(--panel); color: var(--tx); font-size: 1rem;
}
.newsletter__form button {
  min-height: 48px; padding: 0.6rem 1.4rem; border: 0; border-radius: var(--r-s);
  background: var(--amber-flaeche); color: var(--amber-kontrast); cursor: pointer;
  font-weight: 700; letter-spacing: 0.04em; font-size: 0.95rem;
}
.newsletter__form button:disabled { opacity: 0.6; cursor: default; }
.newsletter__falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.newsletter__zustimmung { margin: 0.8rem 0 0; font-size: 0.82rem; color: var(--tx-3); line-height: 1.5; }
.newsletter__meldung { margin: 0.8rem 0 0; font-weight: 600; }
.newsletter__meldung--gut { color: var(--sage-tief); }
.newsletter__meldung--schlecht { color: var(--alert); }

/* ---- Quellen-Liste ------------------------------------------------ */
.quellen__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.quellen__liste > li {
  border-left: 3px solid var(--line); padding-left: 1rem;
}
.quellen__titel { font-weight: 700; color: var(--tx); }
.quellen__zitat { margin: 0.3rem 0; color: var(--tx-2); font-style: italic; font-size: 0.94rem; }
.quellen__liste a { word-break: break-word; font-size: 0.9rem; }

/* ---- Musterwiderspruch-Generator (widerspruch.html) -------------- */
.wider__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; align-items: start; }
@media (max-width: 860px) { .wider__grid { grid-template-columns: 1fr; } }
.wider__brief {
  background: #fff; color: #16210f; border: 1px solid var(--line); border-radius: var(--r-s);
  padding: 1.6rem; font-family: var(--f-text); font-size: 0.9rem; line-height: 1.55;
  white-space: pre-wrap; box-shadow: var(--schatten); min-height: 320px;
}
:root[data-theme="dark"] .wider__brief { background: #fff; color: #16210f; }
.wider__brief-kopf {
  font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--tx-3); margin: 0 0 0.5rem;
}

@media print {
  /* Nur der Brief wird gedruckt. Das visibility-Muster wirkt unabhängig
     davon, wie tief #druckbereich im Dokument steckt: Alles wird unsichtbar,
     der Briefbereich und sein Inhalt wieder sichtbar, und er überlagert die
     Seite oben links. So liefert „Als PDF speichern" ein sauberes Schreiben. */
  body { background: #fff; }
  body * { visibility: hidden; }
  #druckbereich, #druckbereich * { visibility: visible; }
  #druckbereich {
    position: absolute; left: 0; top: 0; width: 100%; margin: 0; padding: 1.6cm 1.8cm;
    background: #fff; color: #000; box-shadow: none; border: 0;
    white-space: pre-wrap; font-family: var(--f-text); font-size: 12pt; line-height: 1.5;
  }
}

/* Einwilligung in den Anmeldeformularen (Handbuch, Ausbauseiten).
   Eigene Zeile zwischen Adressfeld und Knopf; das ganze Etikett ist
   anklickbar, damit die Trefferfläche nicht an 20 px Kästchen hängt. */
.optin-einwilligung {
  flex: 1 0 100%; display: flex; gap: 0.65rem; align-items: flex-start;
  min-height: 44px; margin: 0.15rem 0 0.1rem; cursor: pointer;
  font-size: 0.85rem; line-height: 1.5; color: var(--tx-2);
  /* Die allgemeine label-Regel setzt Versalien in Monospace (für kurze
     Feldnamen). Ein ganzer Einwilligungssatz muss als Fließtext lesbar sein. */
  font-family: var(--f-text); font-weight: 400; text-transform: none; letter-spacing: normal;
}
.optin-einwilligung input {
  flex: 0 0 auto; width: 20px; height: 20px; margin: 0.12rem 0 0;
  accent-color: var(--sage); cursor: pointer;
}
.optin-einwilligung a { color: var(--amber); }