/*
 * EUmanual, Gestaltung der Website.
 *
 * DREI RANDBEDINGUNGEN, die fast jede Entscheidung hier erklären:
 *
 * 1. KEIN JAVASCRIPT. Die Content-Security-Policy steht auf
 *    `default-src 'none'`, Skripte sind also nicht nur unerwünscht, sondern
 *    unmöglich. Alles, was aussieht wie Interaktion, ist CSS: Zustände über
 *    :hover und :focus-visible.
 * 2. KEINE FREMDEN RESSOURCEN. Keine Schrift von einem CDN, kein Icon-Paket,
 *    kein Tracker. Die Schrift ist der Systemstapel, die Zeichnung im Kopf
 *    der Startseite ist Inline-SVG, die Flächen sind CSS-Verläufe.
 * 3. LESBARKEIT VOR WIRKUNG. Die Besucher sind Compliance-Verantwortliche und
 *    technische Redakteure, die eine Verordnung im Kopf haben. Sie lesen
 *    lange Absätze und brauchen dafür Kontrast, Zeilenlänge und Ruhe.
 *
 * DAS BILD DAHINTER (seit 04.10.2026): Typenschild und technische Zeichnung.
 * Dunkles Stahlblau wie eine Blaupause für Kopf und Fuß, kühles Papier für
 * den Inhalt, Haarlinien statt Schatten, Kennzeilen in Festbreitenschrift
 * wie im Schriftfeld einer Zeichnung, kleine Radien wie an einem gefrästen
 * Schild. Eine einzige Akzentfarbe: das Gelb der Warn- und Hinweisschilder.
 * Sie markiert, sie färbt keinen Lesetext, denn Gelb auf Weiß liest niemand.
 */

:root {
  /* Flächen und Text */
  --tinte: #0e2030;
  --tinte-leise: #45586a;
  --tinte-still: #5f7183;
  --papier: #ffffff;
  --papier-warm: #f3f6f8;
  --papier-tief: #e8edf1;
  --linie: #d6dee5;
  --linie-stark: #b6c3ce;

  /* Blaupause: Kopf, Abschluss und Fuß. In beiden Farbschemata dunkel. */
  --nacht: #0b1d2b;
  --nacht-hell: #12304a;
  --nacht-text: #e8f0f6;
  --nacht-leise: #b7c9d8;
  --nacht-linie: rgba(255, 255, 255, 0.12);

  /* Marke und Akzent */
  --marke: #123b5c;
  --link: #14507f;
  --signal: #f0b232;
  --signal-hell: #f7c659;
  --fokus: #14507f;

  /* Hinweise */
  --warn-flaeche: #fdf6e7;
  --warn-linie: #d9a441;

  /* Rhythmus */
  --radius: 4px;
  --radius-gross: 6px;
  --schatten: 0 1px 2px rgba(11, 29, 43, 0.06), 0 8px 24px rgba(11, 29, 43, 0.08);
  --bahn: 72rem;
  --lesebreite: 44rem;

  --schrift: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, "DejaVu Sans", sans-serif;
  --schrift-kopf: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, "DejaVu Sans", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", "DejaVu Sans Mono", monospace;
}

/*
 * Dunkelmodus, weil ein Teil der Leser abends in der Werkhalle oder am
 * Zweitbildschirm sitzt. Es ist dieselbe Seite mit anderen Werten, keine
 * zweite Gestaltung; das hält beide Fassungen dauerhaft gleich gepflegt.
 */
@media (prefers-color-scheme: dark) {
  :root {
    --tinte: #e6edf3;
    --tinte-leise: #a9bac7;
    --tinte-still: #8fa1af;
    --papier: #0e1a24;
    --papier-warm: #12212d;
    --papier-tief: #182a38;
    --linie: #24384a;
    --linie-stark: #37506a;

    --nacht: #07131d;
    --nacht-hell: #0e2536;

    --marke: #8cc6ee;
    --link: #8cc6ee;
    --fokus: #f0b232;

    --warn-flaeche: #2a2314;
    --warn-linie: #a87f2e;

    --schatten: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
  }
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  font-size: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 1.0625rem;
  color: var(--tinte);
  background: var(--papier);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.wrap {
  max-width: var(--bahn);
  margin: 0 auto;
  padding: 0 1.5rem;
  width: 100%;
}

/* ---------------------------------------------------------------- Textsatz */

h1, h2, h3, h4 {
  font-family: var(--schrift-kopf);
  color: var(--tinte);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3rem);
  margin: 0 0 1rem;
}

h2 {
  font-size: clamp(1.45rem, 1.15rem + 1.1vw, 2rem);
  margin: 3.5rem 0 1rem;
}

h3 {
  font-size: clamp(1.08rem, 1rem + 0.35vw, 1.25rem);
  letter-spacing: -0.01em;
  margin: 2.2rem 0 0.6rem;
}

p, ul, ol { max-width: var(--lesebreite); }

p { margin: 0 0 1.1rem; text-wrap: pretty; }

a {
  color: var(--link);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

a:hover { text-decoration-thickness: 2px; }

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Auf den dunklen Flächen ist das Gelb der sichtbare Fokus, nicht das Blau. */
.site-header,
.hero,
.band-abschluss,
.site-footer { --fokus: var(--signal); }

strong { font-weight: 650; }

time, .stichtag { font-variant-numeric: tabular-nums; }

code, kbd {
  font-family: var(--mono);
  font-size: 0.92em;
  background: var(--papier-tief);
  padding: 0.1em 0.35em;
  border-radius: 3px;
}

/*
 * Die Kennzeile über einer Überschrift, gesetzt wie ein Feld im Schriftfeld
 * einer Zeichnung. Das Quadrat davor ist die Akzentfarbe; der Text selbst
 * bleibt in Tinte, damit er auf hellem Grund lesbar ist.
 */
.kennzeile {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1rem;
  max-width: none;
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinte-leise);
}

.kennzeile::before {
  content: "";
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  background: var(--signal);
}

/* ------------------------------------------------- Lesetext der Unterseiten */

/*
 * Der kurze Strich über jeder Zwischenüberschrift. Auf einer Seite mit zehn
 * Abschnitten sucht das Auge sonst den Anfang des nächsten.
 */
.inhalt h2::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 3px;
  margin-bottom: 1.1rem;
  background: var(--signal);
}

/* Aufzählungen mit eigenem Zeichen statt des blassen Punktes der Browser. */
.inhalt ul {
  list-style: none;
  padding-left: 0;
}

.inhalt ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.55rem;
}

.inhalt ul li::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 0.68em;
  width: 0.45rem;
  height: 0.45rem;
  background: var(--signal);
}

/* Nummerierte Schritte bekommen Ziffern in Festbreite auf dunklem Feld. */
.inhalt ol {
  list-style: none;
  padding-left: 0;
  counter-reset: schritt;
}

.inhalt ol li {
  position: relative;
  counter-increment: schritt;
  padding-left: 3rem;
  margin-bottom: 1rem;
  min-height: 2rem;
}

.inhalt ol li::before {
  content: counter(schritt, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.05em;
  width: 2.1rem;
  height: 1.9rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: var(--nacht);
  color: #fff;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1;
}

@media (prefers-color-scheme: dark) {
  .inhalt ol li::before { background: var(--papier-tief); border: 1px solid var(--linie-stark); }
}

/* ------------------------------------------------------------ Sprungmarke */

.skip-link {
  position: absolute;
  left: -999rem;
  z-index: 100;
  background: var(--signal);
  color: #0b1d2b;
  padding: 0.6rem 1.1rem;
  border-radius: 0 0 var(--radius) 0;
  font-weight: 650;
}

.skip-link:focus {
  left: 0;
  top: 0;
}

/* ------------------------------------------------------------- Kopfleiste */

/*
 * DIE KOPFZEILE IST DECKEND UND DUNKEL. Sie hat die Farbe des Kopfbereichs
 * darunter und geht ohne Kante in ihn über. Eine durchscheinende Leiste sieht
 * auf einem Bildschirmfoto gut aus und ist beim Scrollen unlesbar: Der Text
 * darunter schiebt sich durch die Navigation.
 */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--nacht);
  border-bottom: 1px solid var(--nacht-linie);
}

/*
 * Eine Zeile ab 76rem, darunter zwei: Marke und Anmeldung oben, die
 * Navigation darunter in EINER Zeile, die sich seitlich schieben lässt. Neun
 * Menüpunkte brauchten umbrochen drei Zeilen und ein Fünftel des Telefons.
 */
.header-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 2rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  max-width: 78rem;
}

.header-row .brand { order: 1; }
.header-row nav { order: 2; margin-left: auto; min-width: 0; }
.header-row .login { order: 3; }

@media (max-width: 76rem) {
  .header-row .login { order: 2; margin-left: auto; }
  .header-row nav { order: 3; width: 100%; margin-left: 0; }
  .header-row { padding-bottom: 0.4rem; }
  .main-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 0.2rem;
  }
  .main-nav::-webkit-scrollbar { display: none; }
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--schrift-kopf);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  color: #fff;
  text-decoration: none;
}

.brand img { border-radius: var(--radius-gross); }

.main-nav {
  list-style: none;
  display: flex;
  gap: 0.15rem 1.35rem;
  margin: 0;
  padding: 0;
  max-width: none;
  font-size: 0.94rem;
  white-space: nowrap;
}

.main-nav a {
  display: inline-block;
  text-decoration: none;
  color: var(--nacht-leise);
  padding: 0.4rem 0;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.main-nav a:hover { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.35); }

.main-nav a[aria-current="page"] {
  color: #fff;
  font-weight: 600;
  border-bottom-color: var(--signal);
}

.login {
  display: inline-block;
  color: #fff;
  padding: 0.42rem 1.05rem;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.93rem;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.login:hover,
.login:focus-visible {
  background: #fff;
  border-color: #fff;
  color: #0b1d2b;
}

.login:active { transform: translateY(1px); }

/* ------------------------------------------------------------------- Hero */

.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(56rem 30rem at 88% -20%, rgba(27, 90, 140, 0.55), transparent 65%),
    linear-gradient(180deg, var(--nacht) 0%, var(--nacht-hell) 140%);
  color: var(--nacht-text);
  padding: 3.25rem 0 3rem;
}

/*
 * Das Raster im Hintergrund ist das Millimeterpapier einer Zeichnung und
 * kein Muster von der Stange. Es kommt aus zwei Verläufen statt aus einer
 * Bilddatei: kein zusätzlicher Abruf, keine Lizenzfrage, kein Bildnachweis.
 */
.hero::before,
.band-abschluss::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 3rem 3rem;
  mask-image: radial-gradient(75% 90% at 70% 10%, #000 15%, transparent 78%);
  pointer-events: none;
}

.hero > .wrap { position: relative; }

.hero h1 { color: #fff; margin-bottom: 1.1rem; }

.hero .lead {
  color: var(--nacht-leise);
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.22rem);
  max-width: 46rem;
  margin-bottom: 0;
}

.hero a { color: #cfe6f7; }

.hero .kennzeile { color: var(--signal); }

.hero .kennzeile::before { display: none; }

/* Die Brotkrume liegt im Hero und muss dort hell sein. */
.hero .breadcrumb {
  color: #9fb6c8;
  margin-bottom: 1.25rem;
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

.hero .breadcrumb a { color: #cfe0ec; }

/* Der Kopf der Startseite: links der Text, rechts die Zeichnung. */
.startseite .hero { padding: 4.25rem 0 6.5rem; }

.hero-raster {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 3.5rem;
  align-items: center;
}

.startseite .hero h1 {
  font-size: clamp(2.2rem, 1.2rem + 3vw, 3.3rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  max-width: 17ch;
  margin-bottom: 1.4rem;
}

.startseite .hero .lead { max-width: 37rem; font-size: 1.08rem; }

.hero .cta-row { margin: 2rem 0 0; }

.hero-bild { margin: 0; }

.hero-bild svg {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.35));
}

.hero-bild figcaption {
  margin-top: 1rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #9fb6c8;
  max-width: 30rem;
}

/* Die Zeichnung: Farben nur hier, das SVG trägt keine Stilangaben. */
.z-masslinie { fill: none; stroke: var(--signal); stroke-width: 1; opacity: 0.75; }
.z-mass { fill: var(--signal); font: 600 11px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.z-schild { fill: #dde4e9; }
.z-schild-rand { fill: none; stroke: #9aa9b6; stroke-width: 1; }
.z-niete { fill: #8494a2; }
.z-feld { fill: #4d5d6b; font: 600 10.5px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.z-wert { fill: #0e2030; font: 700 19px var(--schrift-kopf); }
.z-linie { fill: none; stroke: #9aa9b6; stroke-width: 1; }
.z-qr-flaeche { fill: #fff; }
.z-qr { fill: #0b1d2b; }
.z-code { fill: #0e2030; font: 700 17px var(--mono); letter-spacing: 0.06em; }
.z-weg { fill: none; stroke: var(--signal); stroke-width: 2; stroke-dasharray: 5 5; }
.z-pfeil { fill: none; stroke: var(--signal); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.z-blatt-schatten { fill: rgba(3, 10, 16, 0.4); }
.z-blatt { fill: #fff; }
.z-blatt-kopf { fill: #123b5c; }
.z-blatt-titel { fill: #dbe8f2; font: 600 11px var(--mono); letter-spacing: 0.03em; }
.z-blatt-h { fill: #0e2030; font: 700 15px var(--schrift-kopf); }
.z-blatt-p { fill: #45586a; font: 400 12px var(--schrift); }
.z-marke { fill: #0e2030; }
.z-marke-t { fill: #fff; font: 700 11px var(--mono); }
.z-marke-leer { fill: none; stroke: #b6c3ce; stroke-width: 1; }
.z-marke-l { fill: #45586a; font: 600 11px var(--mono); }
.z-zeile { fill: none; stroke: #d6dee5; stroke-width: 6; stroke-linecap: round; }
.z-pdf { fill: var(--signal); }
.z-pdf-t { fill: #0b1d2b; font: 800 14px var(--mono); letter-spacing: 0.06em; }

/* -------------------------------------------------------------- Der Text */

main { flex: 1; }

.inhalt {
  padding: 3rem 1.5rem 4.5rem;
}

.inhalt > *:first-child { margin-top: 0; }

.lead {
  font-size: 1.15rem;
  color: var(--tinte-leise);
  max-width: 48rem;
}

.breadcrumb {
  font-size: 0.9rem;
  color: var(--tinte-still);
}

/* ------------------------------------------------------ Bänder der Startseite */

/*
 * Die Startseite besteht aus Bändern über die volle Breite. Jedes bringt
 * seine Bahn selbst mit. Unten etwas mehr Luft als oben: Rechnerisch gleiche
 * Abstände sehen so aus, als hinge der Inhalt nach unten durch.
 */
.band { padding: 5rem 0 5.5rem; }

.band-tief {
  background: var(--papier-warm);
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}

.band h2 {
  font-size: clamp(1.6rem, 1.15rem + 1.7vw, 2.35rem);
  letter-spacing: -0.025em;
  margin: 0 0 1.1rem;
  max-width: 24ch;
}

.band h3 { margin: 0 0 0.4rem; }

.vorspann {
  font-size: 1.1rem;
  color: var(--tinte-leise);
  max-width: 46rem;
}

/* Zwei Spalten: links die Aussage, rechts das Material dazu. */
.zwei {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 3rem 4.5rem;
  align-items: start;
}

.zwei > * > p:last-child { margin-bottom: 0; }

/* Ein Verweis, der weiterführt: Pfeil statt Unterstreichung. */
.weiter {
  font-weight: 650;
  text-decoration: none;
  border-bottom: 2px solid var(--signal);
  padding-bottom: 0.1rem;
}

.weiter::after { content: " →"; }

.weiter:hover { border-bottom-width: 3px; }

/*
 * Die Faktenleiste ragt in den Kopf hinein.
 *
 * Sie nennt drei Dinge, die anderswo auf der Seite belegt sind, und erfindet
 * keine vierte. Keine Zahl hier, die nicht schon im Fließtext steht: Eine
 * Kennzahlenleiste ist genau die Stelle, an der Websites anfangen, sich
 * Belege auszudenken.
 */
.band-fakten { padding: 0 0 4rem; }

.fakten {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: -3.25rem 0 0;
  padding: 0;
  max-width: none;
  background: var(--papier);
  border: 1px solid var(--linie);
  border-top: 3px solid var(--signal);
  border-radius: var(--radius-gross);
  box-shadow: var(--schatten);
}

.fakten > div { padding: 1.6rem 1.75rem 1.7rem; }

.fakten > div + div { border-left: 1px solid var(--linie); }

.fakten dt {
  font-family: var(--schrift-kopf);
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--tinte);
}

.fakten dd {
  margin: 0.4rem 0 0;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--tinte-leise);
}

.randnotiz {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 3.5rem;
  margin-top: 2.25rem;
}

.randnotiz p {
  margin: 0;
  max-width: none;
  font-size: 0.97rem;
  color: var(--tinte-leise);
}

/* Die zwei Regelwerke, jedes mit seinem Stichtag wie ein Stempel. */
.regeln {
  display: grid;
  gap: 1.25rem;
}

.regel {
  display: grid;
  grid-template-columns: 10.5rem minmax(0, 1fr);
  gap: 0 1.5rem;
  align-items: start;
  background: var(--papier);
  border: 1px solid var(--linie);
  border-left: 3px solid var(--tinte);
  border-radius: 0 var(--radius-gross) var(--radius-gross) 0;
  padding: 1.5rem 1.6rem 1.6rem;
}

.regel .stichtag { grid-row: 1 / span 2; }

.regel h3,
.regel p:last-child { grid-column: 2; }

.regel .stichtag {
  margin: 0;
  font-family: var(--mono);
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--tinte);
}

.regel p:last-child {
  margin: 0;
  font-size: 0.96rem;
  color: var(--tinte-leise);
}

/* Die fünf Fragen: eine linierte Liste mit laufender Nummer. */
.fragen {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
  counter-reset: frage;
  border-bottom: 1px solid var(--linie-stark);
}

.fragen li {
  position: relative;
  counter-increment: frage;
  padding: 1rem 0 1rem 3.25rem;
  border-top: 1px solid var(--linie-stark);
  font-weight: 550;
  line-height: 1.45;
}

.fragen li::before {
  content: counter(frage, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1.1rem;
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--tinte-still);
}

/* Vier Schritte nebeneinander, jeder unter einer Linie mit seiner Nummer. */
.schritte {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
  margin: 2.75rem 0 0;
  padding: 0;
  max-width: none;
  counter-reset: schritt;
}

.schritte li {
  counter-increment: schritt;
  border-top: 2px solid var(--tinte);
  padding-top: 1.1rem;
}

.schritte li::before {
  content: counter(schritt, decimal-leading-zero);
  display: block;
  margin-bottom: 1.5rem;
  font-family: var(--mono);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--tinte-still);
}

.schritte li:first-child { border-top-color: var(--signal); }

.schritte p {
  margin: 0;
  font-size: 0.97rem;
  color: var(--tinte-leise);
}

/* Die Leistungen als linierte Liste in zwei Spalten, keine Kartenwand. */
.leistung {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 4.5rem;
  margin: 2.25rem 0 0;
  padding: 0;
  max-width: none;
}

.leistung > div {
  padding: 1.35rem 0 1.5rem;
  border-top: 1px solid var(--linie-stark);
}

.leistung dt {
  font-family: var(--schrift-kopf);
  font-size: 1.08rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.leistung dd {
  margin: 0.35rem 0 0;
  font-size: 0.97rem;
  color: var(--tinte-leise);
}

/* Die Rollen als Schilder. */
.rollen {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.5rem 0 0;
  padding: 0;
  max-width: none;
}

.rollen li {
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius);
  background: var(--papier-warm);
  font-size: 0.93rem;
  line-height: 1.4;
}

.grenze {
  background: var(--papier-warm);
  border: 1px solid var(--linie);
  border-left: 3px solid var(--signal);
  border-radius: 0 var(--radius-gross) var(--radius-gross) 0;
  padding: 2rem 2rem 2.1rem;
}

.grenze h2 { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem); }

/*
 * Der Abschluss: eine Fläche, die sagt, was jetzt zu tun ist. Dunkel wie der
 * Kopf, damit die Seite zwischen zwei gleichen Flächen hängt.
 */
.band-abschluss {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(46rem 24rem at 10% 120%, rgba(27, 90, 140, 0.5), transparent 65%),
    var(--nacht);
  color: var(--nacht-text);
  padding: 5rem 0;
  border-bottom: 1px solid var(--nacht-linie);
}

.band-abschluss > .wrap { position: relative; }

.band-abschluss h2 { color: #fff; max-width: none; }

.band-abschluss p { color: var(--nacht-leise); max-width: 48rem; }

.band-abschluss .cta-row { margin: 2rem 0 0; }

/* ------------------------------------------------- Definitionslisten */

/*
 * Jede Definitionsliste im Fließtext der Unterseiten bekommt eine farbige
 * Kante und läuft bei Platz zweispaltig.
 *
 * MEHRSPALTENSATZ UND NICHT GRID. Ein Raster füllt zeilenweise und trennt
 * dabei Begriff und Erklärung: Der erste Versuch stellte die Erklärung des
 * ersten Begriffs neben den zweiten Begriff. `columns` hält ein Paar
 * zusammen, weil `break-after: avoid` auf dem Begriff wirkt, und braucht
 * dafür kein zusätzliches Element im Markup.
 */
.inhalt dl:not(.fact-grid) {
  margin: 1.75rem 0;
  max-width: none;
  padding: 0;
  columns: 2;
  column-gap: 3rem;
}

.inhalt dl:not(.fact-grid) dt {
  margin: 0;
  padding: 0.1rem 0 0.35rem 1.1rem;
  border-left: 3px solid var(--signal);
  font-weight: 650;
  color: var(--tinte);
  line-height: 1.4;
  break-after: avoid;
  break-inside: avoid;
}

.inhalt dl:not(.fact-grid) dd {
  margin: 0 0 1.6rem;
  padding: 0 0 0.2rem 1.1rem;
  border-left: 3px solid var(--linie);
  color: var(--tinte-leise);
  font-size: 0.97rem;
  break-inside: avoid;
}

@media (max-width: 52rem) {
  .inhalt dl:not(.fact-grid) { columns: 1; }
}

/* Das Faktenraster bleibt zweispaltig; es ist eine Tabelle, keine Karte. */
.fact-grid {
  display: grid;
  grid-template-columns: minmax(10rem, 15rem) 1fr;
  gap: 0.15rem 1.5rem;
  border: 1px solid var(--linie);
  border-top: 3px solid var(--tinte);
  border-radius: var(--radius-gross);
  padding: 1.35rem 1.5rem;
  background: var(--papier-warm);
  margin: 1.75rem 0;
  max-width: none;
}

.fact-grid dt {
  font-weight: 650;
  padding: 0.45rem 0;
  border-top: 1px solid var(--linie);
}

.fact-grid dd {
  margin: 0;
  padding: 0.45rem 0;
  border-top: 1px solid var(--linie);
  color: var(--tinte-leise);
}

.fact-grid dt:first-of-type,
.fact-grid dt:first-of-type + dd { border-top: none; }

/* ------------------------------------------------------------- Hinweise */

.notice, .draft-note {
  border: 1px solid var(--warn-linie);
  border-left-width: 4px;
  background: var(--warn-flaeche);
  padding: 1rem 1.25rem;
  border-radius: 0 var(--radius-gross) var(--radius-gross) 0;
  max-width: var(--lesebreite);
  margin: 1.5rem 0;
}

.notice p:last-child,
.draft-note p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- Knöpfe */

/*
 * Der Hauptknopf trägt das Gelb mit dunkler Schrift. Weiß auf Gelb wäre
 * unlesbar; dunkel auf Gelb liegt weit über dem geforderten Kontrast.
 */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--signal);
  color: #0b1d2b;
  padding: 0.8rem 1.5rem;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 650;
  transition: transform 0.15s ease, background 0.15s ease;
}

.hero a.cta,
.band-abschluss a.cta { color: #0b1d2b; }

.cta:hover { background: var(--signal-hell); transform: translateY(-1px); }

.cta:active { transform: translateY(1px); }

/* Der zweite Knopf daneben: gleiche Größe, weniger Gewicht. */
.cta-leise {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.5rem;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
  color: inherit;
  border: 1px solid currentColor;
  transition: background 0.15s ease, transform 0.15s ease;
}

.hero a.cta-leise,
.band-abschluss a.cta-leise { color: #fff; border-color: rgba(255, 255, 255, 0.5); }

.cta-leise:hover { background: rgba(127, 160, 190, 0.16); transform: translateY(-1px); }

.cta-leise:active { transform: translateY(1px); }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: center;
  margin: 1.75rem 0;
  max-width: none;
}

/* ------------------------------------------------------- Kartenraster */

.karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.1rem;
  margin: 1.75rem 0;
  padding: 0;
  list-style: none;
  max-width: none;
}

.karte {
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  padding: 1.4rem 1.5rem;
}

.karte h3 { margin-top: 0; }

.karte p:last-child { margin-bottom: 0; }

/* Ein Paar gegenübergestellter Blöcke. */
.paar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1.25rem;
  margin: 1.75rem 0;
  max-width: none;
}

/* ------------------------------------------------------------- Fußzeile */

.site-footer {
  background: var(--nacht);
  color: var(--nacht-leise);
  padding: 3.5rem 0 2rem;
  font-size: 0.93rem;
}

.seite .site-footer { border-top: 3px solid var(--signal); }

.footer-raster {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.5rem 4rem;
}

.footer-name {
  margin: 0 0 0.75rem;
  font-family: var(--schrift-kopf);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
}

.footer-note {
  max-width: 30rem;
  margin: 0;
  line-height: 1.6;
}

.footer-titel {
  margin: 0 0 0.9rem;
  font-family: var(--mono);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #8fa6b8;
}

.footer-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
}

.footer-liste li { margin-bottom: 0.45rem; }

.site-footer a { color: #d5e3ee; text-decoration: none; }

.site-footer a:hover { color: #fff; text-decoration: underline; }

.footer-bridge {
  font-size: 0.82rem;
  margin: 2.75rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--nacht-linie);
  max-width: none;
  color: #8fa6b8;
}

.footer-bridge a { text-decoration: underline; }

.brand-geo { color: #0cf57e; font-weight: 700; }

/* ------------------------------------------------------------- Schmalbild */

@media (max-width: 62rem) {
  .hero-raster { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero-bild { max-width: 32rem; }
  .startseite .hero { padding: 3.25rem 0 5.5rem; }
  .startseite .hero h1 { max-width: 18ch; }
  .zwei { grid-template-columns: 1fr; gap: 2.25rem; }
  .schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 2rem; }
  .schritte li::before { margin-bottom: 0.9rem; }
  .band { padding: 3.75rem 0 4rem; }
  .band-fakten { padding: 0 0 3rem; }
}

@media (max-width: 52rem) {
  .header-row { gap: 0.35rem 1rem; }
  .fakten { grid-template-columns: 1fr; margin-top: -2.75rem; }
  .fakten > div + div { border-left: none; border-top: 1px solid var(--linie); }
  .fakten > div { padding: 1.2rem 1.4rem 1.3rem; }
  .randnotiz { grid-template-columns: 1fr; }
  .leistung { grid-template-columns: 1fr; }
  .footer-raster { grid-template-columns: 1fr 1fr; }
  .footer-marke { grid-column: 1 / -1; }
  .fact-grid { grid-template-columns: 1fr; padding: 1.1rem 1.25rem; }
  .fact-grid dt { padding-bottom: 0; border-top: 1px solid var(--linie); }
  .fact-grid dd { padding-top: 0.15rem; border-top: none; }
  .fact-grid dt:first-of-type + dd { border-top: none; }
}

@media (max-width: 34rem) {
  body { font-size: 1rem; }
  .wrap { padding: 0 1.1rem; }
  .inhalt { padding: 2.25rem 1.1rem 3.25rem; }
  .hero { padding: 2.5rem 0 2.25rem; }
  .startseite .hero { padding: 2.5rem 0 4.75rem; }
  .cta, .cta-leise { width: 100%; justify-content: center; }
  .regel { grid-template-columns: 1fr; }
  .footer-raster { grid-template-columns: 1fr; }
  .regel .stichtag { grid-row: auto; margin-bottom: 0.8rem; }
  .regel h3, .regel p:last-child { grid-column: 1; }
  .schritte { grid-template-columns: 1fr; }
  .grenze { padding: 1.5rem 1.25rem 1.6rem; }
  .band-abschluss { padding: 3.5rem 0; }

  /*
   * AUF DEM TELEFON KLEBT DIE KOPFZEILE NICHT. Zwei Zeilen Kopf nähmen beim
   * Lesen dauerhaft Platz weg. Sie scrollt mit nach oben weg und ist nach
   * einem Wisch wieder da.
   */
  .site-header { position: static; }
  .main-nav { font-size: 0.9rem; gap: 0.05rem 1.1rem; }
  .brand { font-size: 1.05rem; }
  .login { padding: 0.36rem 0.9rem; font-size: 0.9rem; }
}

/* ------------------------------------------------------------ Für Papier */

/*
 * Compliance-Unterlagen werden ausgedruckt und abgeheftet. Ohne diese Regeln
 * kostet jeder Ausdruck eine Seite dunkles Blau und zeigt Navigation, die auf
 * Papier nichts nützt.
 */
@media print {
  .site-header, .site-footer, .skip-link, .breadcrumb, .hero-bild { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .hero, .band-abschluss { background: none; color: #000; border-bottom: 1pt solid #000; padding: 0 0 1rem; }
  .hero h1, .hero .lead, .hero .kennzeile, .band-abschluss h2, .band-abschluss p { color: #000; }
  .hero::before, .band-abschluss::before { display: none; }
  .hero-raster { display: block; }
  .band, .band-fakten { padding: 1.5rem 0; }
  .band-tief { background: none; border: none; }
  .fakten { margin-top: 1rem; box-shadow: none; }
  .karte, .fact-grid, .regel, .grenze, .fakten, .inhalt dl:not(.fact-grid) dt, .inhalt dl:not(.fact-grid) dd {
    box-shadow: none;
    border: 1pt solid #999;
    background: none;
  }
  a { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}