/* Schriften vom eigenen Server statt von Google (21.08.2026). Hier standen
   zwei @import auf fonts.googleapis.com; siehe schriften.css. */
@import url("schriften.css");

/* Ein Stilblatt für die ganze Website, seit 11.08.2026 auch mit dem
 * Design-System darin.
 *
 * Vorher lud jede Seite zwei Dateien: erst styles.css des Design-Systems
 * (Tokens, Grundtypografie, Bauteile), dann seite.css, das 29 dieser Tokens
 * mit den NAMMERT-Farben überschrieb. Zwei Anfragen für ein Ergebnis, das die
 * Kaskade ohnehin zusammenrechnet, und das auf 293 Seiten.
 *
 * Reihenfolge wie zuvor: erst das Design-System, dann die Website. Wer eine
 * Farbe ändern will, ändert sie im NAMMERT-Teil weiter unten, dort gewinnt sie.
 *
 * Die Schriften stehen oben zusammen, weil @import in CSS vor jeder Regel
 * stehen muss: Manrope für Überschriften, Inter für den Fließtext.
 *
 * Die Datei des Design-Systems bleibt unter
 * _ds/nocturne-153c801e-6f55-4691-bd72-b09b6c0ce718/styles.css liegen,
 * unverändert, als Nachweis der Herkunft.
 */

/* ===================================================================
   Teil 1: Design-System Nocturne, unverändert übernommen
   =================================================================== */

/* Nocturne — design-system tokens and component classes. This file is the source of truth for the system's look; retune it here and see readme.md. */

:root {
  --color-bg: #161826;
  --color-surface: #232532;
  --color-text: #e9e9ed;
  --color-accent: #9184d9; /* review round 7 (Barron): the accent moves to
     the product's blurple — OKLCH hue 289.2, the hue of the app's own Pro
     accent (#9a8fe0, --om-accent-pro) — at the same lightness the steel
     accent held (L 0.660, so the documented ratios survive) and chroma
     in the product blurple's own range (its token sits at C 0.118; the
     accent takes 0.125, from the old steel's 0.030):
     the accent now reads as an accent rather than another neutral. */
  --color-accent-2: #a7a1db; /* the machine-derived stand-in follows: same
     hue, same L 0.734, chroma at the same 2:3 proportion it held */
  --color-divider: color-mix(in srgb, #e9e9ed 16%, transparent);

  /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #f3f5fe;
  --color-neutral-200: #e4e7f5;
  --color-neutral-300: #cfd3e5;
  --color-neutral-400: #b2b6ca;
  --color-neutral-500: #9397ab;
  --color-neutral-600: #75798c;
  --color-neutral-700: #595d6c;
  --color-neutral-800: #3f424d;
  --color-neutral-900: #292b31;

  --color-accent-100: #f5f4ff;
  --color-accent-200: #e7e5fe;
  --color-accent-300: #d2cefd;
  --color-accent-400: #b5abfc;
  --color-accent-500: #968ae0;
  --color-accent-600: #796cbf;
  --color-accent-700: #5d5294;
  --color-accent-800: #423a6a;
  --color-accent-900: #2b2741;

  --color-accent-2-100: #f5f4ff;
  --color-accent-2-200: #e7e5fe;
  --color-accent-2-300: #d2cefd;
  --color-accent-2-400: #b5afe8;
  --color-accent-2-500: #9690c9;
  --color-accent-2-600: #7972a9;
  --color-accent-2-700: #5c5783;
  --color-accent-2-800: #423e5d;
  --color-accent-2-900: #2b293a;

  /* Deck section-divider ground — review round 3: saturation as presence.
     Dividers take a saturated deep indigo (hue 277, the neutral ramp's own
     family; C 0.094 — written when the accent held C 0.030, before the
     round-7 blurple raised it past the ground's) with a lighter bloom and
     a ghost tint of the same hue, while the slide grounds stay
     desaturated. Deck-scale fills only — not interface colors. */
  --color-section: #262a60;
  --color-section-glow: #353b80;
  --color-section-ghost: #4c5397;

  --font-heading: "Inter", system-ui, sans-serif;
  --font-heading-weight: 500;
  --font-body: "Inter", system-ui, sans-serif;

  --space-1: 2.8px;
  --space-2: 5.6px;
  --space-3: 8.4px;
  --space-4: 11.2px;
  --space-6: 16.8px;
  --space-8: 22.4px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  /* Elevation — derived from the ground: soft ink-tinted shadows on a
     light theme, a hairline edge + ambient darkness on a dark one. */
  --shadow-sm: 0 0 0 1px #3f424d;
  --shadow-md: 0 0 0 1px #595d6c, 0 6px 18px rgba(0,0,0,0.55);
  --shadow-lg: 0 0 0 1px #9397ab, 0 16px 40px rgba(0,0,0,0.65);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

.lighten{mix-blend-mode:lighten;background-color:transparent}

/* ══════════════════════════════════════════════════════════════════════════
   Components — built with the tokens above. Plain CSS
   on plain HTML: no JavaScript, no build step. Each class is documented in
   readme.md and demonstrated in foundations/ and components/.
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; }
h6 { letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 72%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* — rules — */
/* Rules fade to transparent at both ends instead of stopping cleanly — a
   Nocturne signature. The ramp is 48px an end (one deck baseline unit),
   painted from the same divider token. Freestanding rules fade; box
   outlines, in-control separators, and short accent marks stay solid. */
.hr {
  height: 1px; border: 0; margin: var(--space-4) 0;
  background: linear-gradient(to right,
    transparent, var(--color-divider) 48px,
    var(--color-divider) calc(100% - 48px), transparent);
}

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text); /* matches the .input's 14px —
     the pair sits side by side in sign-up rows */
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { color: var(--color-accent); border-color: var(--color-accent); }
.btn-primary:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.btn-primary:active { background: color-mix(in srgb, var(--color-accent) 22%, transparent); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* — forms — */
.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 72%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input, .seg-opt input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.radio .dot {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--color-divider);
}
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot {
  border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 4px var(--color-bg);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg {
  display: inline-flex; overflow: hidden;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.seg-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font-size: 13px; cursor: pointer;
}
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* — cards — */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface);
}
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; line-height: 1.2;
}
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* — tags — */
.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-800); color: var(--color-accent-100); }
.tag-accent-2 { background: var(--color-accent-2-800); color: var(--color-accent-2-100); }
.tag-neutral { background: var(--color-neutral-800); color: var(--color-neutral-100); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* — navigation — */
.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: none;
}
.nav-brand {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; margin-right: auto;
}
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }

/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
  padding: var(--space-2); border-bottom: 1px solid transparent; /* keeps layout; the row paints the fading rule */
}
.table td {
  padding: var(--space-2);
  border-bottom: 1px solid transparent;
}
/* Row rules as row-level strips so the end-fade spans the row, not each cell. */
.table thead tr {
  background: linear-gradient(to right,
    transparent, var(--color-divider) 48px,
    var(--color-divider) calc(100% - 48px), transparent) no-repeat bottom / 100% 1px;
}
.table tbody tr {
  background: linear-gradient(to right,
    transparent, color-mix(in srgb, var(--color-text) 8%, transparent) 48px,
    color-mix(in srgb, var(--color-text) 8%, transparent) calc(100% - 48px), transparent) no-repeat bottom / 100% 1px;
}
.table tbody tr:hover {
  /* the hover tint layers over the row rule, which keeps painting */
  background:
    linear-gradient(color-mix(in srgb, var(--color-text) 4%, transparent),
                    color-mix(in srgb, var(--color-text) 4%, transparent)) no-repeat 0 0 / 100% 100%,
    linear-gradient(to right,
      transparent, color-mix(in srgb, var(--color-text) 8%, transparent) 48px,
      color-mix(in srgb, var(--color-text) 8%, transparent) calc(100% - 48px), transparent) no-repeat bottom / 100% 1px;
}

/* — dialog — */
.dialog-backdrop {
  position: fixed; inset: 0; display: grid; place-items: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}
.dialog {
  width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-lg);
}
.dialog-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px;
}
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }



/* ===================================================================
   Teil 2: NAMMERT, überschreibt die Tokens des Design-Systems
   =================================================================== */

/* Ein Stilblatt für die ganze Website.
 *
 * Hier steht alles, was auf jeder Seite gleich aussehen soll: die Farbtokens,
 * die Grundtypografie, die Bedienelemente und die Glasoptik. Die Seiten selbst
 * enthalten nur noch, was wirklich nur dort gilt.
 *
 * Reihenfolge: Tokens, Grundlagen, Schriftgrößen, Bauteile, Glas, Sonderfälle.
 * Wer eine Farbe oder ein Maß ändern will, ändert es hier einmal.
 */

/* ---------- 1. Tokens ---------- */

html:root {
  /* Manrope: modern und geometrisch, aber mit offenen Formen und großer
     x-Höhe, deshalb auch in kleineren Graden gut lesbar. */
  --font-heading: 'Manrope', system-ui, sans-serif;
}

:root {
  /* Grundfläche und Schrift */
  --color-bg: #05070d;
  --color-text: #f2f6fc;
  --color-section: #101820;
  --color-section-glow: #16c8ff;

  /* Leuchtfarbe eins: das Blau aus dem Zeichen, eine Stufe strahlender */
  --color-accent: #16c8ff;
  --color-accent-100: #eaf9ff;
  --color-accent-200: #cceeff;
  --color-accent-300: #a4e2ff;
  --color-accent-400: #63d3ff;
  --color-accent-500: #16c8ff;
  --color-accent-600: #00a9e4;
  --color-accent-700: #0088b8;
  --color-accent-800: #00658a;
  --color-accent-900: #00445e;

  /* Leuchtfarbe zwei: das Pink aus dem Zeichen, eine Stufe strahlender */
  --color-accent-2: #ff47ab;
  --color-accent-2-100: #ffe7f1;
  --color-accent-2-200: #ffc4de;
  --color-accent-2-300: #ff9ecb;
  --color-accent-2-400: #ff75b9;
  --color-accent-2-500: #ff47ab;
  --color-accent-2-600: #f60093;
  --color-accent-2-700: #c60076;
  --color-accent-2-900: #67003b;

  /* Leuchtfarbe vier: das Orange vom Firmenwagen. Nur als Kante und Marke für
     Fristen und Termine, nie als Fläche. */
  --color-accent-4: #ff8a1e;
  --color-accent-4-100: #ffe9d4;
  --color-accent-4-300: #ffbe7a;
  --color-accent-4-700: #b85a00;

  /* Leuchtfarbe drei: das Türkis aus dem Zeichen, eine Stufe strahlender */
  --color-accent-3: #14f5da;
  --color-accent-3-100: #d9fff8;
  --color-accent-3-300: #58ffe9;
  --color-accent-3-700: #00ab98;

  --color-neutral-700: #23262f;
  --color-neutral-800: #191b22;

  /* Kantige Ecken, wie zuvor. */
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;

  /* Glas auf Schwarz: die Fläche trägt etwas mehr Licht als auf Blau. */
  --glas-flaeche: color-mix(in srgb, var(--color-text) 5%, transparent);
  --glas-flaeche-tief: color-mix(in srgb, var(--color-text) 1.2%, transparent);
  --glas-kante: color-mix(in srgb, var(--color-text) 12%, transparent);
  --glas-licht: color-mix(in srgb, var(--color-text) 14%, transparent);
  --glas-schatten: #000;

  /* Leuchtstärken, kräftiger als zuvor, damit die Farben wirklich strahlen */
  --neon: color-mix(in srgb, var(--color-accent) 94%, transparent);
  --neon-weit: color-mix(in srgb, var(--color-accent) 55%, transparent);
  --neon-2: color-mix(in srgb, var(--color-accent-2) 92%, transparent);
  --neon-2-weit: color-mix(in srgb, var(--color-accent-2) 54%, transparent);
}

/* ---------- 2. Grundlagen ---------- */

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--color-text);
  text-wrap: pretty;
  /* Die beiden Lichter waren auf 1200px Inhaltsbreite gerechnet und wirkten auf
     breiten Schirmen wie zwei Flecken. Jetzt wachsen sie mit dem Fenster mit,
     mit einer Untergrenze für Handy und einer Obergrenze für sehr breite Schirme. */
  /* Drei Lichter über Schwarz mit Marineblau darunter, wie im Entwurf. Die
     Lichter wachsen mit dem Fenster, damit sie auf breiten Schirmen nicht
     als Flecken stehen. */
  background:
    radial-gradient(clamp(900px, 78vw, 1500px) clamp(560px, 48vw, 900px) at 50% -220px,
      color-mix(in srgb, var(--color-accent) 28%, transparent), transparent 64%),
    radial-gradient(clamp(700px, 60vw, 1200px) clamp(480px, 42vw, 800px) at 96% 12%,
      color-mix(in srgb, var(--color-accent-2) 22%, transparent), transparent 60%),
    radial-gradient(clamp(620px, 54vw, 1050px) clamp(440px, 38vw, 740px) at 4% 46%,
      color-mix(in srgb, var(--color-accent-3) 17%, transparent), transparent 62%),
    linear-gradient(180deg, #0c1520 0%, #101c2c 54%, #0c1520 100%);
  background-attachment: fixed, fixed, fixed, fixed;
}

a { color: var(--color-accent-300); text-decoration: none; }
a:hover { color: var(--color-accent); }

::selection { background: color-mix(in srgb, var(--color-accent-2) 40%, transparent); }

summary::-webkit-details-marker { display: none; }

/* ---------- 3. Schriftgrößen ---------- */
/* Größer und luftiger als zuvor: die Seite wird auch von Eignern gelesen, die
   abends am Steg auf ein Telefon schauen. Überschriften enger und kräftiger,
   damit sie sich ohne zweite Schriftfamilie vom Fließtext absetzen. */
body { font-size: 17.5px; line-height: 29px; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); letter-spacing: -.02em; }
p, li { text-wrap: pretty; }


h6 { font-size: 17px; }
figcaption { font-size: 16px; }
.card-body { font-size: 17px; line-height: 28px; }
.card-kicker { font-size: 16px; }
.card-meta { font-size: 16px; }
.tag { font-size: 15.5px; }
.table, .table th, .table td { font-size: 16.5px; }
.field > label { font-size: 16px; }
.radio, .seg-opt { font-size: 17px; }
.dialog-body { font-size: 17px; line-height: 28px; }
.nav a { font-size: 17px; }
.nav a.btn, .nav .btn { font-size: 17px; }
.btn { font-size: 17px; min-height: 52px; }
.input, select.input, textarea.input { font-size: 17px; min-height: 52px; }

/* ---------- 4. Bauteile ---------- */

.btn { white-space: nowrap; }
.btn:hover { transform: translateY(-2px); }

.btn-primary {
  background: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: #04131c !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent), 0 0 22px -6px var(--neon) !important;
  font-weight: 500;
}
.btn-primary:hover {
  background: var(--color-accent-400) !important;
  border-color: var(--color-accent-400) !important;
  --rand-hover: var(--color-accent-400);
}

.btn-ghost {
  border: 1px solid color-mix(in srgb, var(--color-accent) 45%, transparent) !important;
  color: var(--color-accent-100) !important;
}
.btn-ghost:hover {
  border-color: var(--color-accent) !important;
  background: color-mix(in srgb, var(--color-accent) 12%, transparent) !important;
  --rand-hover: var(--color-accent);
}

.card { transition: transform .18s ease-out, border-color .2s ease-out; }
.card:hover {
  transform: translateY(-3px);
  --rand-hover: color-mix(in srgb, var(--color-accent) 55%, transparent);
}

.nav-brand span { color: var(--color-accent-2) !important; text-shadow: 0 0 14px var(--neon-2-weit); }

/* ---------- 5. Glasoptik ---------- */
/* Drei Ebenen: durchscheinende Fläche, helle Innenkante, ruhiger Glanz von oben.
   Kein dem Zeiger folgendes Licht, das ruckelt auf langen Seiten. */

.card, .glas {
  position: relative;
  isolation: isolate;
  background: linear-gradient(160deg, var(--glas-flaeche), var(--glas-flaeche-tief)) !important;
  border: 1px solid var(--glas-kante) !important;
  border-radius: 0 !important;
  box-shadow:
    inset 0 1px 0 var(--glas-licht),
    inset 0 -1px 0 color-mix(in srgb, #000 26%, transparent),
    0 12px 28px -18px var(--glas-schatten) !important;
}
.card::before, .glas::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-text) 5%, transparent) 0%, transparent 42%);
}
/* Kantenbrechung: der schmale Lichtring trennt Glas von bloßer Transparenz. */
.card::after, .glas::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  padding: 1px;
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--color-text) 78%, transparent) 0%,
    color-mix(in srgb, var(--color-text) 18%, transparent) 18%,
    transparent 46%,
    transparent 62%,
    color-mix(in srgb, var(--color-accent) 40%, transparent) 92%,
    color-mix(in srgb, var(--color-text) 30%, transparent) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.9;
}
.card:hover, .glas:hover {
  border-color: color-mix(in srgb, var(--color-accent) 42%, transparent) !important;
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--color-text) 12%, transparent),
    color-mix(in srgb, var(--color-text) 4%, transparent)) !important;
}

/* Inline gestaltete Panels führen einheitlich --rand für ihren Rahmen.
   Darüber greift die Glasoptik, ohne jede Vorlage anzufassen. */
[style*="--rand"] {
  position: relative;
  isolation: isolate;
  border-color: color-mix(in srgb, var(--rand, var(--color-text)) 55%, transparent) !important;
  border-radius: 0 !important;
  background:
    linear-gradient(160deg, var(--glas-flaeche), var(--glas-flaeche-tief)),
    color-mix(in srgb, var(--rand, var(--color-bg)) 6%, transparent) !important;
  box-shadow:
    inset 0 1px 0 var(--glas-licht),
    inset 0 -1px 0 color-mix(in srgb, #000 26%, transparent),
    0 12px 28px -18px var(--glas-schatten) !important;
}
[style*="--rand"]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-text) 4%, transparent) 0%, transparent 44%);
}
/* Aufklappmenüs im Kopf schweben über dem Inhalt. Eine durchscheinende Fläche
   macht sie unlesbar, deshalb bekommen sie eine deckende Fläche zurück. */
nav .nm-weich, nav .nm-weich[style*="--rand"], .nvmobile, .nvmobile[style*="--rand"] {
  background: var(--color-neutral-800) !important;
  border: 1px solid color-mix(in srgb, var(--color-text) 20%, transparent) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 24px 60px -24px color-mix(in srgb, #000 80%, transparent) !important;
}
nav .nm-weich::before, .nvmobile::before { content: none; }

/* Kleine Elemente mit derselben Variable bekommen keine Kartenfläche. */
.tag[style*="--rand"], .btn[style*="--rand"], a.tag[style*="--rand"], span.tag[style*="--rand"] {
  border-radius: 0 !important;
  background: color-mix(in srgb, var(--color-text) 7%, transparent) !important;
  box-shadow: none !important;
}

.tag, .tag-outline {
  border-radius: 0 !important;
  background: color-mix(in srgb, var(--color-text) 4%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--color-text) 22%, transparent) !important;
}
.tag-outline:hover { border-color: color-mix(in srgb, var(--color-accent) 55%, transparent) !important; }
.tag-aktiv {
  border-color: var(--color-accent) !important;
  background: color-mix(in srgb, var(--color-accent) 20%, transparent) !important;
  color: var(--color-accent-100) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--color-accent) 45%, transparent),
    0 8px 22px -12px color-mix(in srgb, var(--color-accent) 65%, transparent) !important;
}

.btn {
  border-radius: 0 !important;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, #fff 26%, transparent), transparent 48%);
  opacity: 0.55;
}
.btn-primary {
  background: linear-gradient(160deg, color-mix(in srgb, var(--color-accent) 92%, white), var(--color-accent)) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 45%, transparent),
    0 12px 30px -14px color-mix(in srgb, var(--color-accent) 70%, transparent) !important;
}
.btn-ghost {
  background: color-mix(in srgb, var(--color-text) 7%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--color-text) 16%, transparent) !important;
}
.btn-ghost:hover { background: color-mix(in srgb, var(--color-text) 12%, transparent) !important; }

.input, select.input, textarea.input {
  border-radius: 0 !important;
  background: color-mix(in srgb, var(--color-text) 4%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--color-text) 22%, transparent) !important;
}
.input:focus-visible, select.input:focus-visible, textarea.input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Kein overflow: hidden hier. Es sass frueher am Tabellenelement selbst und
   nahm jeder Tabelle die Moeglichkeit, auf schmalen Schirmen seitwaerts zu
   laufen. Den Seitwaertslauf setzt jetzt Teil 4 am umgebenden Kasten. */
.table {
  border-radius: 0;
  background: color-mix(in srgb, var(--color-text) 5%, transparent);
}
.table th { background: color-mix(in srgb, var(--color-text) 7%, transparent); }

.nav {
  backdrop-filter: blur(8px) saturate(125%);
  -webkit-backdrop-filter: blur(8px) saturate(125%);
  background: color-mix(in srgb, var(--color-bg) 62%, transparent) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent) !important;
}

.dialog {
  border-radius: 0 !important;
  background: linear-gradient(160deg, var(--glas-flaeche), var(--glas-flaeche-tief)) !important;
  border: 1px solid var(--glas-kante) !important;
  backdrop-filter: blur(10px) saturate(125%);
  -webkit-backdrop-filter: blur(10px) saturate(125%);
}
.dialog-backdrop {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ---------- 6. Sonderfälle ---------- */

/* Aufklappfelder zeichnet das Betriebssystem, nicht die Seite. Ohne deckende
   Fläche erben die Einträge das durchscheinende Feld und werden unlesbar. */
select.input, select, input.input, input[type="date"], input[type="time"], input[type="number"] { color: var(--color-text); color-scheme: dark; }
select option, select optgroup, select.input option, select.input optgroup {
  background-color: #0a2237;
  color: #e9e9ed;
}
select option:checked, select option:hover { background-color: #1c5480; color: #ffffff; }

/* Geräte ohne Weichzeichnung: Flächen werden deckender, damit Text trägt. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card, .glas, .dialog { background: color-mix(in srgb, var(--color-bg) 86%, var(--color-text)) !important; }
  .nav { background: var(--color-bg) !important; }
}

/* ---------- 7. Neon ---------- */
/* Der Schein hängt an Deckkraft, nicht an Schatten: Schatten werden bei jedem
   Bild neu gerechnet, Deckkraft übernimmt die Grafikkarte. Ruhezustand und
   Aufleuchten sind deshalb zwei feste Ebenen. */

.card, .glas, [style*="--rand"] {
  border-color: color-mix(in srgb, var(--color-accent) 20%, transparent) !important;
  transition: border-color .2s ease-out, transform .18s ease-out;
}
.card::before, .glas::before, [style*="--rand"]::before {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--color-accent) 30%, transparent),
    0 0 34px -14px var(--neon-weit),
    inset 0 0 34px -14px color-mix(in srgb, var(--color-accent) 70%, transparent);
  opacity: 0;
  transition: opacity .2s ease-out;
}
.card:hover::before, .glas:hover::before, [style*="--rand"]:hover::before { opacity: 1; }
.card:hover, .glas:hover, [style*="--rand"]:hover {
  border-color: color-mix(in srgb, var(--color-accent) 55%, transparent) !important;
}

/* Zeichen leuchten über Textschatten; ein Filter erzwingt je Zeichen eine
   eigene Ebene, davon gibt es auf manchen Seiten hundert. */
.ph[style*="--color-accent)"], i.ph[style*="accent);"] { text-shadow: 0 0 8px var(--neon-weit); }
.ph[style*="accent-2"] { text-shadow: 0 0 8px var(--neon-2-weit); }

/* Die Stärke steht auf vielen Seiten inline am Element, deshalb !important. */
h1, h2 { text-shadow: 0 0 26px color-mix(in srgb, var(--color-accent) 20%, transparent); font-weight: 700 !important; }
h3, h4, .card-title { font-weight: 600 !important; }
.nav-brand { font-weight: 700 !important; letter-spacing: -.01em; }

.btn-ghost { box-shadow: inset 0 0 20px -16px var(--neon), 0 0 22px -14px var(--neon-weit) !important; }
.btn-ghost:hover { border-color: var(--color-accent) !important; }

.tag-outline, .tag { border-color: color-mix(in srgb, var(--color-accent) 24%, transparent) !important; }
.tag-aktiv {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 45%, transparent), 0 0 24px -12px var(--neon-weit) !important;
}
.input:focus-visible, select.input:focus-visible, textarea.input:focus-visible {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 50%, transparent), 0 0 26px -12px var(--neon-weit) !important;
}

hr, .hr {
  border: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--neon), transparent);
  box-shadow: 0 0 14px -6px var(--neon-weit);
}

/* Kein Schein auf Links: im Fließtext ermüdet er, dort trägt die Unterstreichung. */
a:hover { text-decoration: underline; text-underline-offset: 4px; }
.nav a:hover, .btn:hover { text-decoration: none; }
/* Türkis leuchtet mit, es ist die dritte Farbe des Zeichens. */
.ph[style*="accent-3"] { text-shadow: 0 0 8px color-mix(in srgb, var(--color-accent-3) 42%, transparent); }

.nav {
  border-bottom-color: color-mix(in srgb, var(--color-accent) 28%, transparent) !important;
  box-shadow: 0 1px 24px -14px var(--neon);
}

/* Aufklappfelder auf der schwarzen Fläche */
select option, select optgroup, select.input option, select.input optgroup {
  background-color: #121419;
  color: #f2f6fc;
}
select option:checked, select option:hover { background-color: #1e5f88; color: #ffffff; }

/* ---------- 8. Rückmeldung beim Drücken ---------- */
/* Ein Klick soll sich anfühlen wie ein Druck: das Element gibt kurz nach.
   Nur transform und opacity, damit die Grafikkarte es übernimmt und kein
   Layout neu gerechnet wird. Die Dauer ist bewusst sehr kurz, ein Knopf wird
   am Tag dutzendfach gedrückt. */

.btn, .opt, .tag-outline, a.tag, button.tag {
  transition: transform .12s ease-out, border-color .18s ease-out, background .18s ease-out, opacity .18s ease-out;
}
.btn:active, .opt:active, .tag-outline:active, a.tag:active, button.tag:active {
  transform: scale(.975);
}
/* Karten sind größer, sie geben weniger nach als ein Knopf. */
.card:active { transform: translateY(-1px) scale(.995); }

/* Aufklappen: der Pfeil dreht, statt zu springen. */
details > summary > .ph-plus,
details > summary > i.ph-plus { transition: transform .18s ease-out; }
details[open] > summary > .ph-plus,
details[open] > summary > i.ph-plus { transform: rotate(45deg); }

/* Wer Bewegung reduziert, behält die Rückmeldung, verliert nur den Weg:
   Farbe und Deckkraft wechseln weiter, nichts verschiebt sich mehr. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .card:hover, .glas:hover, .btn:hover, [style*="--rand"]:hover,
  .btn:active, .opt:active, .card:active { transform: none !important; }
}

/* ---------- 8. Aus dem Landing-Entwurf ---------- */
/* Knöpfe mit Verlauf und gesperrter Schrift, Karten mit Lichtmarke an der
   oberen Kante, Regler als Leuchtschiene. Farben aus dem Zeichen. */

.btn {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: .03em;
}
.btn-primary {
  background: linear-gradient(150deg, var(--color-accent-300), var(--color-accent)) !important;
  border-color: var(--color-accent-300) !important;
  color: #04131c !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 70%, transparent),
    0 0 30px -8px var(--neon) !important;
}
.btn-primary:hover {
  background: linear-gradient(150deg, var(--color-accent-200), var(--color-accent-400)) !important;
  border-color: var(--color-accent-200) !important;
}
.btn-ghost {
  color: var(--color-accent-2-300) !important;
  border-color: color-mix(in srgb, var(--color-accent-2) 50%, transparent) !important;
  background: color-mix(in srgb, var(--color-accent-2) 7%, transparent) !important;
  box-shadow: inset 0 0 26px -16px var(--neon-2) !important;
}
.btn-ghost:hover {
  border-color: var(--color-accent-2) !important;
  background: color-mix(in srgb, var(--color-accent-2) 12%, transparent) !important;
}

/* Karten tragen oben links eine kurze Lichtmarke. Sie liegt als Bildebene auf
   der Fläche, nicht auf ::after: dort sitzt der Kantenring der Glasoptik mit
   seiner Ausschnittmaske. Größe und Wiederholung stehen in derselben
   Kurzschreibweise, weil die Glasregel die Kurzform mit !important setzt und
   getrennte Angaben dagegen verlieren. */
.card {
  background:
    linear-gradient(to right, var(--color-accent) 0 46px, transparent 46px) 0 0 / 46px 2px no-repeat,
    linear-gradient(160deg, var(--glas-flaeche), var(--glas-flaeche-tief)) !important;
}
.card:hover {
  background:
    linear-gradient(to right, var(--color-accent) 0 46px, transparent 46px) 0 0 / 46px 2px no-repeat,
    linear-gradient(160deg,
      color-mix(in srgb, var(--color-text) 12%, transparent),
      color-mix(in srgb, var(--color-text) 4%, transparent)) !important;
}

/* Vorzeilen und Marken als gesperrte Versalien mit Leuchtpunkt. */
.card-kicker { font-weight: 600; }
.tag {
  font-family: var(--font-heading);
  letter-spacing: .12em;
  text-transform: uppercase;
  /* 15,5 px ist der kleinste Grad der Seite. Hier stand 14 px mit !important
     und schlug damit die Anhebung weiter oben, auf jeder Seite. */
  font-size: 15.5px !important;
}

/* Regler: Leuchtschiene mit Ring als Griff.
   Die Schiene bleibt schmal, gegriffen wird aber die volle Höhe: eine 4 px hohe
   Linie in der Mitte einer 26 px hohen, durchsichtigen Fläche. Vorher war das
   ganze Element 4 px hoch, und damit war der Regler mit der Maus kaum und mit
   dem Finger gar nicht zu treffen. */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 26px;
  background: linear-gradient(to right, var(--color-accent), var(--color-accent-3)) center / 100% 4px no-repeat;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--color-accent) 30%, transparent));
  outline: 0;
  cursor: pointer;
  touch-action: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  background: var(--color-bg);
  border: 2px solid var(--color-accent);
  box-shadow: 0 0 16px -2px var(--neon), inset 0 0 10px -4px var(--neon);
  cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  background: var(--color-bg);
  border: 2px solid var(--color-accent);
  box-shadow: 0 0 16px -2px var(--neon);
  cursor: pointer;
}
input[type="range"]:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--color-accent-3);
  outline-offset: 2px;
}

/* Tabellenköpfe in der technischen Schrift. */
.table th {
  font-family: var(--font-heading);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 15.5px;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
}


/* ---------- 8. Flüssigkeit ---------- */
/* Grundsätze aus der Gestaltung berührbarer Oberflächen, hier auf die Bausteine
   angewandt, die es auf dieser Seite gibt. Die Rechenteile stehen in fluid.js. */

/* Rückmeldung liegt auf dem Drücken, nicht auf dem Loslassen. [data-druck]
   setzt fluid.js beim pointerdown, damit auf dem Handy nichts nachhängt. */
.btn[data-druck], .opt[data-druck], .tag-outline[data-druck],
a.tag[data-druck], button.tag[data-druck] { transform: scale(.975); }
.card[data-druck] { transform: translateY(-1px) scale(.995); }
summary[data-druck] { opacity: .82; }

/* Nur verschieben und verblassen, das rechnet die Grafikkarte. Der Hinweis
   steht auf den Flächen, die wirklich gleich in Bewegung geraten. */
.btn, .opt, .card { will-change: transform; }

/* Zeichnung folgt der Größe: große Schrift steht von selbst zu weit
   auseinander, kleine zu eng. Ein fester Wert für alle Grade ist irgendwo
   falsch. */
h1 { letter-spacing: -.028em; line-height: 1.08; }
h2 { letter-spacing: -.022em; line-height: 1.14; }
h3 { letter-spacing: -.016em; line-height: 1.22; }
h4, h5, h6 { letter-spacing: -.008em; }
.card-title { letter-spacing: -.012em; }
small, .card-meta, figcaption { letter-spacing: .005em; }

/* Was sich öffnet, wächst aus seinem Auslöser heraus und kommt als Material
   an: Unschärfe und Größe zusammen, keine bloße Blende. */
.dialog {
  transform-origin: var(--herkunft-x, 50%) var(--herkunft-y, 50%);
  animation: nm-material .34s cubic-bezier(.22,1,.36,1);
}
@keyframes nm-material {
  from { opacity: 0; transform: scale(.965); backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); }
  to { opacity: 1; transform: none; }
}

/* Schwebende Leiste statt Trennlinie: der Übergang wird weich ausgeblendet,
   dort wo Inhalt unter die Leiste läuft. */
.nav { position: relative; }
.nav::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: 22px;
  pointer-events: none;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--color-bg) 60%, transparent), transparent);
}

/* Reglergriffe folgen dem Finger, deshalb keine Übergangszeit auf ihnen:
   eine Zeitkurve auf dem Griff hieße, dass er dem Zeiger hinterherläuft. */
input[type="range"] { touch-action: pan-y; }
input[type="range"]::-webkit-slider-thumb { transition: none; }
input[type="range"]::-moz-range-thumb { transition: none; }

/* Wer weniger Durchsicht will, bekommt Fläche statt Milchglas: die Unschärfe
   fällt weg, die Fläche wird deckend, die Struktur bleibt. */
@media (prefers-reduced-transparency: reduce) {
  .card, .glas, .dialog, .nav, .table, .tag, .tag-outline,
  .input, select.input, textarea.input, [style*="--rand"] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .card, .glas, .dialog, [style*="--rand"] {
    background: color-mix(in srgb, var(--color-bg) 88%, var(--color-text)) !important;
  }
  .nav { background: var(--color-bg) !important; }
}

/* Mehr Kontrast heißt: klare Kante, weniger Schein, deckender Grund. */
@media (prefers-contrast: more) {
  .card, .glas, .dialog, [style*="--rand"] {
    border-color: var(--color-accent) !important;
    box-shadow: none !important;
    background: color-mix(in srgb, var(--color-bg) 92%, var(--color-text)) !important;
  }
  h1, h2, .card-title, .card-kicker { text-shadow: none; }
  .btn-primary { background: var(--color-accent) !important; color: #04131c !important; }
  a { text-decoration: underline; }
}

@media (prefers-reduced-motion: reduce) {
  .dialog { animation: none; }
  .btn[data-druck], .opt[data-druck], .card[data-druck],
  .tag-outline[data-druck], a.tag[data-druck], button.tag[data-druck] { transform: none; }
}

/* ---------- 9. Ruhe: Licht bündeln, Bewegung dosieren ---------- */
/* Aus dem Muster Wechselservice, seit 11.08.2026 für alle Seiten.
 *
 * Vier Regeln:
 * 1. Blau handelt, Türkis sagt zu, Pink warnt und trägt die Marke, nie einen Knopf.
 * 2. Bewegung nur bei Eintritt und Hover, nichts pulsiert dauerhaft.
 * 3. Überschriften ohne Schein, Gewicht 600, Hierarchie über Größe und Weißraum.
 * 4. Vorzeilen klein, gesperrt, gedämpft, die Farbe steht als kurze Marke davor.
 */

h1, h2 { text-shadow: none; font-weight: 600 !important; }
h3, h4, .card-title { text-shadow: none; }

/* Sekundärknöpfe: Haarlinie statt Pink, kein Schein. Der primäre Knopf
   soll auf einer Seite der einzige leuchtende Punkt sein. */
.btn-ghost {
  color: var(--color-text) !important;
  background: transparent !important;
  border: 1px solid color-mix(in srgb, var(--color-text) 20%, transparent) !important;
  box-shadow: none !important;
}
.btn-ghost:hover {
  color: var(--color-text) !important;
  border-color: color-mix(in srgb, var(--color-accent) 60%, transparent) !important;
  background: color-mix(in srgb, var(--color-text) 6%, transparent) !important;
}

/* Dauerbewegung aus. Die Endlosbilder stehen in den Stilblöcken einzelner
   Seiten, hier werden sie zentral stillgelegt. */
.btn-primary, .arrow-r, .arrow-l, .wx-card { animation: none !important; }

/* Vorzeilen. */
.card-kicker {
  font-size: 15.5px !important;
  letter-spacing: .14em !important;
  color: color-mix(in srgb, var(--color-text) 72%, transparent) !important;
}
.vz {
  display: flex; align-items: center; gap: 10px; margin: 0 0 18px;
  font-family: var(--font-heading); font-size: 15.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
}
.vz::before { content: ""; width: 22px; height: 2px; background: var(--marke, var(--color-accent)); flex: none; }

/* Die Vorzeilen der Altseiten stehen inline in 15,5px Versalien. Die Sperrung
   wird hier vereinheitlicht, die Farbe bleibt: sie trägt die Bedeutung des
   Abschnitts. Der Grad wurde früher auf 13,5 px zurückgenommen, das griff auf
   jeder Seite und war für ältere Augen zu klein. */
main p[style*="uppercase"][style*="15.5px"] {
  font-size: 15.5px !important;
  letter-spacing: .14em !important;
  line-height: 1.5 !important;
}

/* Drei Abschnittstypen: frei auf dem Grund, Rahmen, Bande.
   .spalte hält die Inhaltsbreite, .rahmen zieht die Haarlinie darum,
   .bande läuft randlos über die volle Breite. */
.spalte { max-width: 1320px; margin: 0 auto; padding-inline: clamp(20px, 5vw, 72px); }
.rahmen {
  border: 1px solid color-mix(in srgb, var(--color-text) 13%, transparent);
  padding: clamp(26px, 3.6vw, 48px);
  background: color-mix(in srgb, var(--color-text) 2%, transparent);
}
.bande {
  border-top: 1px solid color-mix(in srgb, var(--color-text) 9%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 9%, transparent);
  background: linear-gradient(180deg,
    color-mix(in srgb, #05070d 88%, transparent),
    color-mix(in srgb, #05070d 66%, transparent));
}

/* Kachel mit Klarnamen, etwa die Anbieterwand: keine Versalien, ruhige Kante. */
.anb {
  display: inline-flex; align-items: center; min-height: 46px;
  padding: 10px 15px; font-size: 16px; line-height: 1.25;
  color: var(--color-text); text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--color-text) 15%, transparent);
  background: color-mix(in srgb, var(--color-text) 3%, transparent);
  transition: border-color .16s ease-out, background .16s ease-out, transform .12s ease-out;
}
.anb:hover {
  color: var(--color-text); text-decoration: none;
  border-color: color-mix(in srgb, var(--color-accent) 62%, transparent);
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
}
.anb:active { transform: scale(.98); }

/* ---------- 10. Rahmen für alle Seiten ---------- */
/* Jeder Inhaltsblock im Hauptteil steht in einer Haarlinie, gleiche Innenkante,
 * gleicher Abstand. Ausgenommen: Banden, die absichtlich randlos über die volle
 * Breite laufen, Blöcke, die ihren Rahmen schon selbst setzen (.rahmen darin),
 * und alles mit .ohne-rahmen.
 *
 * Seit 12.08.2026 zeichnet dieser Abschnitt keinen Rahmen mehr: Teil 3 trennt
 * die Blöcke durch Abstand statt durch Linien. Die Regel bleibt nur wegen
 * box-sizing stehen, ihre Kante, Fläche und ihr Innenraum sind entfernt. Das
 * ist wichtig: ihr padding stand mit !important und hätte den Seitenabstand
 * aller Seiten überschrieben, die auf .spalte gebaut sind.
 */
main > section:not(.bande):not(.rahmen):not(.ohne-rahmen):not(:has(> .rahmen)):not(:has(> .nm-weich)):not(:has(> [style*="--rand"])):not(:has(> nav:only-child)):not(:has(> details:only-child)):not(:has(> .card:only-child)):not(:has(> .sc-host > .nm-weich)):not(:has(> .sc-host > [style*="--rand"])):not(:has(> .sc-host > [style*="border:"])),
main > div:not(:empty):not(.bande):not(.rahmen):not(.ohne-rahmen):not(:has(> .rahmen)):not(:has(> .nm-weich)):not(:has(> [style*="--rand"])):not(:has(> nav:only-child)):not(:has(> details:only-child)):not(:has(> .card:only-child)):not(:has(> .sc-host > .nm-weich)):not(:has(> .sc-host > [style*="--rand"])):not(:has(> .sc-host > [style*="border:"])) {
  box-sizing: border-box;
}
main > *:first-child { margin-top: clamp(28px, 4vw, 48px); }
main > *:last-child { margin-bottom: clamp(40px, 5vw, 72px); }
/* Damit die Rahmen nicht an der Fensterkante kleben. Seiten, die schon mit
   .spalte und .bande gebaut sind, regeln ihre Ränder selbst, sonst verlöre
   die Bande ihren randlosen Lauf. */
main:not(:has(> .spalte)):not(:has(> .bande)) { padding-inline: clamp(16px, 3vw, 40px); box-sizing: border-box; }

/* Auf dem Telefon zählt jeder Millimeter: der Rahmen rückt näher an den Inhalt,
   sonst bleibt für lange Beschriftungen keine Breite mehr übrig.
   ACHTUNG: die frühere padding-inline-Zeile stand hier wirkungslos, weil der
   gleichlautende Selektor weiter unten (Grundabstand von main) später kommt
   und Media Queries die Spezifität nicht erhöhen. Der Seitenabstand fürs
   Telefon steht deshalb jetzt in Teil 4 am Dateiende. */
@media (max-width: 700px) {
  :root { --rahmen-innen: 15px; }
  main > * { margin-block: 16px !important; }
}


/* ===================================================================
   Teil 3: Wertigkeit (Fassung drei), gilt ab hier für alle Seiten
   =================================================================== */

/* Wertigkeit: die Schicht der dritten Fassung, seit 12.08.2026 für alle Seiten.
 *
 * Wer die Wirkung zurücknehmen will, löscht diesen Abschnitt bis zum Dateiende,
 * dann bleibt nichts davon in den Seiten zurück.
 *
 * Die erste Fassung nimmt zurück, die zweite belegt. Diese dritte tut etwas
 * Drittes: sie macht die Schrift zum Ereignis.
 *
 * Beim Vorbild gibt es kein Glas, keinen Schein, keine Kachel mit Kante. Es
 * gibt eine fast schwarze Fläche, Haarlinien, sehr große Sätze, sehr kleine
 * Versalzeilen und Fotografien in voller Breite. Wertigkeit entsteht dort
 * dadurch, dass fast nichts da ist und das Wenige groß ist.
 *
 * Für NAMMERT heißt das: die Leuchtfarben bleiben, aber sie leuchten nicht
 * mehr. Sie werden Linie, Versalzeile und Fläche. Der Knopf wird ein satter
 * Block ohne Verlauf und ohne Schein, und das ist der größte Sprung dieser
 * Fassung: ein flacher Block wirkt wie ein Studio, ein leuchtender wie eine
 * Leuchtreklame.
 *
 * Reihenfolge: Grund, Raster, Typografie, Flächen, Bedienelemente,
 * Satzstücke, Belege, Eintritt.
 */

/* ---------- 1. Grund ---------- */
/* Fast schwarz, fast flach. Ein einziger schwacher Schein hinter dem Kopf,
 * darunter nichts. Die drei Lichter der Seite sind hier bewusst weg: sie sind
 * das Gegenteil dessen, was dieses Vorbild macht. */
body {
  background:
    radial-gradient(clamp(760px, 62vw, 1240px) clamp(400px, 34vw, 660px) at 50% -240px,
      color-mix(in srgb, var(--color-accent) 11%, transparent), transparent 68%),
    linear-gradient(180deg, #05070c 0%, #070a10 60%, #05070c 100%);
  background-attachment: fixed, fixed;
}

/* ---------- 2. Raster ---------- */
/* Abschnitt 10 legte um jeden Block im Hauptteil eine Haarlinie mit getönter
 * Fläche. In den Blöcken stehen dann wieder Karten mit Kante, darin Panels mit
 * Kante. Kasten in Kasten in Kasten, und genau das lässt eine Seite billig
 * wirken. Die Kante ist dort jetzt entfernt, hier steht nur noch der Abstand,
 * der sie ersetzt.
 *
 * Der Seitenabstand bleibt unberührt. Seiten, die auf .spalte und .rahmen
 * gebaut sind, regeln ihre Ränder selbst und sind deshalb ausgenommen: sonst
 * stünde ihr Text an der Fensterkante. */
main > section:not(.bande):not(.bk-band):not(.spalte):not(.rahmen),
main > div:not(.bande):not(.spalte):not(.rahmen) {
  border: 0 !important;
  background: none !important;
  padding-block: 0 !important;
  margin-block: clamp(62px, 8vw, 126px) !important;
}
main > .spalte, main > .rahmen { margin-block: clamp(8px, 1vw, 16px) !important; }

/* Ein Seitenabstand für die ganze Seite, am Hauptteil geführt.
 *
 * Vorher erzwang Abschnitt 10 mit padding !important auf jedem Block einen
 * einheitlichen Abstand und verdeckte damit, dass die Seiten ihren
 * Seitenabstand uneinheitlich setzen: die handgeschriebenen Abschnitte tragen
 * ihn inline, die Hüllen der eingebundenen Bauteile gar nicht. Ohne diese
 * Krücke stand die linke Kante ausgefranst da, teils 46px, teils 0.
 *
 * Deshalb jetzt eine einzige Quelle: der Hauptteil hält den Abstand, die Kinder
 * geben ihren ab. Ausgenommen bleiben .bande, .ohne-rahmen und die Bande der
 * dritten Fassung, sie sollen randlos laufen, und .spalte und .rahmen, die ihn
 * selbst führen. */
main:not(:has(> .spalte)):not(:has(> .bande)) { padding-inline: clamp(20px, 5vw, 72px); box-sizing: border-box; }
main > *:not(.bande):not(.ohne-rahmen):not(.spalte):not(.rahmen):not(.bk-band) { padding-inline: 0 !important; }
/* Bauteile bringen ihren eigenen Seitenabstand mit. Eingebunden in eine Seite,
 * die ihn schon hält, wäre er der zweite. */
main > * > section[style*="clamp(20px, 5vw, 72px)"],
main > * > * > section[style*="clamp(20px, 5vw, 72px)"] { padding-inline: 0 !important; }
main > *:first-child { margin-top: clamp(28px, 3.6vw, 50px) !important; }
main > *:last-child { margin-bottom: clamp(70px, 8.5vw, 128px) !important; }
main > .ohne-rahmen { overflow: visible !important; }
/* Die Bande behält Fläche und Innenraum, der Rücksetzer oben nimmt beides
 * allen anderen. Rahmen und Abstände setzt sie sich selbst. */
main > section.bk-band {
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
  margin-block: clamp(62px, 8vw, 126px);
  padding-block: clamp(44px, 6vw, 96px);
  padding-inline: clamp(24px, 5vw, 76px);
}

/* ---------- 3. Typografie ---------- */
/* Kein !important auf Schriftgraden. Es stand hier und hat zwei Dinge kaputt
 * gemacht: die Karten-überschriften (h2.card-title, im Design-System 17px)
 * wurden auf bis zu 52px geblasen, und jede Seite, die ihre h2 inline auf 32px
 * setzt, verlor ihre eigene Abstufung. Ohne !important gilt: wer seinen Grad
 * inline führt, behält ihn, alle anderen bekommen den größeren. */
h1:not([style*="line-height"]) { line-height: .98; }
h1 { letter-spacing: -.034em; }
h2:not([style*="font-size"]) { font-size: clamp(28px, 3.4vw, 44px); }
h2:not([style*="line-height"]) { line-height: 1.06; }
h2 { letter-spacing: -.028em; }
h3:not([style*="line-height"]) { line-height: 1.18; }
h3 { letter-spacing: -.018em; }

/* Überschriften in Karten sind Kachelüberschriften, keine Abschnittstitel. Im
 * Design-System stehen sie auf 17px, das ist neben 17,5px Flächentext kein
 * Unterschied mehr, deshalb 21px. */
.card-title,
.card h2:not([style*="font-size"]),
.card h3:not([style*="font-size"]),
.card h4:not([style*="font-size"]) {
  font-size: 21px;
  line-height: 1.26;
  letter-spacing: -.012em;
}

main p, main li { max-width: 70ch; }
main p[style*="max-width"] { max-width: revert; }

/* ---------- 4. Flächen: keine ---------- */
/* Kein Glas, kein Kantenring, kein Schein, kein Anheben. Karten sind Blöcke
 * mit einer Haarlinie, sonst nichts. Die kurze Lichtmarke oben links bleibt,
 * sie ist das einzige Zeichen, das die Karte noch trägt. */
main .card, main .glas, main [style*="--rand"] {
  background:
    linear-gradient(to right, var(--color-accent) 0 40px, transparent 40px) 0 0 / 40px 2px no-repeat,
    color-mix(in srgb, var(--color-text) 2.5%, transparent) !important;
  border-color: color-mix(in srgb, var(--color-text) 72%, transparent) !important;
  box-shadow: none !important;
}
.card::after, .glas::after { opacity: 0 !important; }
.card::before, .glas::before, [style*="--rand"]::before { box-shadow: none !important; }
.card:hover, .glas:hover, [style*="--rand"]:hover {
  border-color: color-mix(in srgb, var(--color-accent) 42%, transparent) !important;
  transform: none !important;
  background:
    linear-gradient(to right, var(--color-accent) 0 40px, transparent 40px) 0 0 / 40px 2px no-repeat,
    color-mix(in srgb, var(--color-text) 5%, transparent) !important;
}

/* ---------- 5. Bedienelemente ---------- */
/* Der Hauptknopf: ein satter Block, kein Verlauf, kein Schein, kein Glanz. */
.btn {
  min-height: 56px !important;
  padding: 16px 26px !important;
  font-size: 16.5px !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
}
.btn::after { content: none !important; }
.btn-primary {
  background: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: #05070c !important;
  box-shadow: none !important;
}
.btn-primary:hover {
  background: var(--color-accent-300) !important;
  border-color: var(--color-accent-300) !important;
}
.btn-ghost {
  background: transparent !important;
  border-color: color-mix(in srgb, var(--color-text) 72%, transparent) !important;
  box-shadow: none !important;
}
.btn-ghost:hover { border-color: var(--color-text) !important; background: transparent !important; }
.btn:hover { transform: none !important; }
.input, select.input, textarea.input { min-height: 56px !important; }

.nav {
  border-bottom-color: color-mix(in srgb, var(--color-text) 72%, transparent) !important;
  box-shadow: none !important;
  background: color-mix(in srgb, #05070c 80%, transparent) !important;
}
.nav::after { content: none; }

/* Kleine Versalzeile als Verweis, statt eines zweiten Knopfs. Beim Vorbild
 * sind fast alle Verweise so gesetzt: keine Fläche, nur Schrift mit einer
 * Linie, die beim Überfahren wächst. */
.bk-mini {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-heading);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
  margin: 0;
}
a.bk-mini { color: var(--color-accent-300); text-decoration: none; padding-bottom: 5px; position: relative; }
a.bk-mini::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background:
    linear-gradient(var(--color-accent), var(--color-accent)) no-repeat left bottom / 0% 100%,
    color-mix(in srgb, var(--color-accent) 34%, transparent);
  transition: background-size .38s cubic-bezier(.22, 1, .36, 1);
}
a.bk-mini:hover { color: var(--color-accent); text-decoration: none; }
a.bk-mini:hover::after { background-size: 100% 100%; }
a.bk-mini:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

/* ---------- 6. Satzstücke ---------- */
/* Die Bande läuft bis an die Kante der Spalte und trägt eine Fotografie mit
 * einem dunklen Verlauf darüber. Darauf drei Wörter, gestapelt, jedes auf
 * einer Haarlinie. Das ist der typografische Moment des Vorbilds. */
.bk-band {
  margin-inline: calc(-1 * clamp(20px, 5vw, 72px));
  padding: clamp(44px, 6vw, 96px) clamp(24px, 5vw, 76px);
  background-size: cover;
  background-position: center;
  border-top: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
}
.bk-trip {
  display: flex;
  flex-direction: column;
  margin: 26px 0 0;
  max-width: none !important;
}
.bk-trip span {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(38px, 8.4vw, 108px);
  line-height: 1.0;
  letter-spacing: -.038em;
  text-transform: uppercase;
  padding-block: clamp(8px, 1.2vw, 18px);
  border-top: 1px solid color-mix(in srgb, var(--color-text) 16%, transparent);
}
.bk-trip span:last-child { border-bottom: 1px solid color-mix(in srgb, var(--color-text) 16%, transparent); }
.bk-satz {
  margin: clamp(22px, 2.6vw, 34px) 0 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(24px, 3.2vw, 42px);
  line-height: 1.12;
  letter-spacing: -.026em;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  max-width: 30ch !important;
}

/* Zweizeiliger Satz mit Lücke: die zweite Hälfte rückt ein und tiefer, wie
   beim Vorbild. Ein Satz, der in zwei Teilen steht, liest sich langsamer. */
.bk-zwei {
  display: flex;
  flex-direction: column;
  margin: 0;
  max-width: none !important;
}
.bk-zwei span {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(34px, 5.4vw, 74px);
  line-height: 1.0;
  letter-spacing: -.034em;
}
.bk-zwei span:last-child {
  margin-top: clamp(10px, 1.4vw, 20px);
  margin-left: clamp(0px, 8vw, 130px);
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
}

/* ---------- 7. Belege ---------- */
/* Sechs Felder, Foto oben, Name und eine Zeile darunter. Keine Kante, keine
 * Fläche: die Fotografie trägt das Feld, der Weißraum trennt. */
.bk-belege {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(26px, 3vw, 44px) clamp(22px, 2.6vw, 36px);
  margin-top: clamp(34px, 4vw, 56px);
}
.bk-beleg figure { margin: 0; overflow: hidden; }
.bk-beleg img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.bk-beleg b {
  display: block;
  margin: 16px 0 5px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 19px;
  line-height: 25px;
  /* Zwei Zeilen sind überall reserviert. "7.295 Bewertungen" und "231 Vorgänge
   * offen" brauchen zwei, "Seit 1989" eine. Ohne das Reservat begann jeder
   * Beschreibungstext auf einer anderen Höhe. */
  min-height: 50px;
  letter-spacing: -.014em;
}
.bk-beleg span {
  display: block;
  font-size: 16px;
  line-height: 25px;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
}

@media (max-width: 700px) {
  main > section:not(.bande):not(.spalte):not(.rahmen),
  main > div:not(.bande):not(.spalte):not(.rahmen) { margin-block: 52px !important; }
  main > .spalte, main > .rahmen { margin-block: 8px !important; }
  main > section.bk-band { margin-block: 52px; margin-inline: -10px; }
  .bk-zwei span:last-child { margin-left: 0; }
  .bk-belege { grid-template-columns: 1fr; }
}

/* ---------- 8. Eintritt ---------- */
main > [data-auf] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .78s cubic-bezier(.22, 1, .36, 1), transform .78s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}
main > [data-auf][data-sichtbar] { opacity: 1; transform: none; will-change: auto; }

@media (prefers-reduced-motion: reduce) {
  main > [data-auf] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- 9. Abstände ---------- */
/* Das Design-System rechnet seine Abstandsskala auf 15px Text, diese Website
 * setzt 17,5px auf 29px Zeile. Damit war jeder Abstand, der aus var(--space-*)
 * kommt, zu klein: Karten trugen 8,4px Innenabstand, Tabellenzellen 5,6px,
 * Gitter 11,2px zwischen den Kacheln. Solange um jeden Block ein Rahmen mit
 * 24 bis 42px stand, fiel es nicht auf, weil die Luft von außen kam. Ohne
 * Rahmen klebt der Text an der Kante.
 *
 * Deshalb wird die Skala um den Faktor 1,7 angehoben, das ist derselbe Sprung,
 * den die Schrift gegenüber dem Design-System gemacht hat. Flächen, die eine
 * Kante haben, bekommen zusätzlich einen eigenen Innenabstand: eine Karte
 * braucht mehr als eine Lücke in einem Gitter. */
:root {
  --space-1: 4.8px;
  --space-2: 9.5px;
  --space-3: 14.3px;
  --space-4: 19px;
  --space-6: 28.6px;
  --space-8: 38px;
}

.card { padding: clamp(22px, 2.4vw, 32px) !important; gap: 11px; }
.table th, .table td { padding: 12px 15px; }
/* Erste und letzte Spalte bekommen ihren Innenabstand, statt bündig an der
   Kante zu stehen. Bündig wäre richtig, wenn die Tabelle nur Zeilen auf dem
   Seitengrund wäre; sie trägt aber eine eigene Fläche (siehe .table weiter
   oben, 5 Prozent Grauschleier) und in schmalen Fenstern zusätzlich einen
   Rahmen zum Seitwärtslauf. Auf dieser Fläche klebte die Schrift links und
   rechts direkt an der Kante. */
.table th:first-child, .table td:first-child { padding-left: 15px; }
.table th:last-child, .table td:last-child { padding-right: 15px; }
.dialog { padding: clamp(24px, 2.6vw, 34px) !important; gap: 14px; }
.dialog-actions { gap: 10px; margin-top: 6px; }
.field > label { margin-bottom: 7px; }

/* ---------- 10. Bewegung ---------- */
/* Der Griff des Vorbilds: eine Zeile steht nicht da, sie steigt hinter ihrer
 * Haarlinie hervor. Dafür bekommt jede Zeile einen Kasten mit beschnittenem
 * Überstand und darin ein Element, das von unten hereinfährt. Die Verzögerung
 * je Zeile steht in --ver, das setzt der Bewegungsteil in fluid.js.
 *
 * Die Sicherung liegt in der Bewegung selbst: animation-fill-mode both plus
 * 260 ms Vorlauf. Ohne Skript spielt jede Zeile nach diesen 260 ms von selbst,
 * es kann also kein Text unsichtbar hängen bleiben. fluid.js nutzt den Vorlauf
 * nur, um mit data-warten anzuhalten, was noch unter dem Falz steht, und gibt
 * es frei, sobald es ins Bild kommt. */
.bk-mask { display: block; overflow: hidden; }
.bk-mask > em { display: block; font-style: normal; }
/* Die Maske braucht Luft nach unten, sonst schneidet sie die Unterlängen ab:
 * das g in "Beitrag" reicht bei Zeilenhöhe .96 deutlich unter das Zeilenfeld.
 * Der negative Rand nimmt die Luft aus dem Umbruch wieder heraus, das Layout
 * bleibt also gleich. */
h1 .bk-mask, .bk-zwei > .bk-mask { padding-bottom: .24em; margin-bottom: -.24em; }

.bk-mask > em {
  animation: nm-zeile-auf .95s cubic-bezier(.19, 1, .22, 1) both;
  animation-delay: calc(var(--ver, 0ms) + 260ms);
}
/* Was noch unter dem Falz steht, wartet: fluid.js hält es an, bis es ins Bild
   kommt. Ohne Skript spielt es beim Laden, sichtbar wird es in jedem Fall. */
.bk-mask[data-warten] > em { animation-play-state: paused; }
/* 136 statt 106 Prozent: der Startpunkt muss unter die gepolsterte Maske
 * fallen, sonst schauen die Oberlängen im ersten Bild schon heraus. */
@keyframes nm-zeile-auf {
  from { transform: translateY(136%); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* Bilder öffnen ihren Ausschnitt von unten und fahren dabei auf Maß. */
.bk-beleg img {
  animation: nm-bild-auf 1.15s cubic-bezier(.19, 1, .22, 1) both;
  animation-delay: calc(var(--ver, 0ms) + 260ms);
}
.bk-beleg[data-warten] img { animation-play-state: paused; }

/* Beim Überfahren wird am Bild selbst nichts verändert. Aufhellen hob den fast
 * schwarzen Fotogrund über den Seitengrund und legte eine Lichtkante um die
 * Silhouette. Das Zeichen liegt in der Beschriftung.
 *
 * Die Linie hängt am Text, nicht am Kasten: Seit die Überschrift zwei Zeilen
 * reserviert, läge eine am Kastenboden verankerte Linie bei einzeiligen Titeln
 * 25 Pixel unter der Schrift. Als Unterstreichung folgt sie der Zeile, auch
 * wenn der Titel umbricht, und der abgeschaltete Durchlass hält sie unter
 * Unterlängen wie in "günstiger" durchgehend. */
.bk-beleg figcaption b {
  text-decoration: underline 1px transparent;
  text-decoration-skip-ink: none;
  text-underline-offset: 5px;
  transition: text-decoration-color .38s cubic-bezier(.22, 1, .36, 1);
}
.bk-beleg:hover figcaption b,
.bk-beleg:focus-visible figcaption b { text-decoration-color: var(--color-accent); }
@keyframes nm-bild-auf {
  from { clip-path: inset(0 0 100% 0); transform: scale(1.07); }
  to { clip-path: inset(0); transform: none; }
}

/* Die Leiste wird dichter, sobald der Inhalt darunter läuft. Kein Springen:
 * nur Fläche und Kante wechseln, die Höhe bleibt. */
.nav { transition: background .3s ease-out, border-color .3s ease-out; }
html[data-ab] .nav {
  background: color-mix(in srgb, #05070c 95%, transparent) !important;
  border-bottom-color: color-mix(in srgb, var(--color-text) 72%, transparent) !important;
}

@media (prefers-reduced-motion: reduce) {
  .bk-mask > em, .bk-beleg img { animation: none !important; }
}


/* ============================================================
   Leben: Kopfbild, Zahlen, mitlaufende Bänder, Schrittstrecke
   Seit 12.08.2026. Farben unverändert, es kommen nur Fläche,
   Weg und Zeit dazu. Alles läuft über transform, opacity und
   background-position, kein Layout wird neu gerechnet.
   ============================================================ */

/* ---------- Kopfbild ganzflächig hinter dem Einstieg ----------
 * Der Ausbruch auf Fensterbreite rechnet die Bildlaufleiste heraus
 * (--sbw setzt fluid.js), sonst entsteht auf Windows ein waagerechter
 * Balken. Zwei Schleier darüber: einer von links, damit die Zeile
 * trägt, einer nach unten, damit das Bild in den Seitengrund ausläuft. */
.bk-kopf { position: relative; isolation: isolate; --ueber: clamp(34px, 5vw, 66px); }
.bk-kopf::before,
.bk-kopf::after {
  content: "";
  position: absolute;
  pointer-events: none;
  top: calc(-1 * var(--ueber));
  bottom: 0;
  left: 50%;
  margin-left: calc(-50vw + var(--sbw, 0px) / 2);
  width: calc(100vw - var(--sbw, 0px));
}
.bk-kopf::before {
  z-index: -2;
  background: var(--kopfbild) center 44% / cover no-repeat;
  /* Das Bild endet nicht, es läuft aus, oben wie unten. Ein harter Schnitt am
     Fuß zeigt sich sonst als helle Kante, wo gerade eine Welle steht.

     Der obere Einlauf endet genau am Überstand. Auf der Startseite liegt dieser
     Streifen hinter der Navigation, dort ändert er nichts. Auf den Seiten mit
     Sprungnav über dem Inhalt liegt er in offener Fläche, und dort schnitt das
     Bild vorher waagerecht durch, quer über die ganze Fensterbreite. */
  mask-image: linear-gradient(180deg, transparent 0, #000 var(--ueber), #000 52%, transparent 100%);
  animation: nm-kopf-auf 1.7s cubic-bezier(.19, 1, .22, 1) both,
             nm-kopf-zug 44s 1.7s ease-in-out infinite alternate;
}
.bk-kopf::after {
  z-index: -1;
  background:
    linear-gradient(97deg,
      var(--color-bg) 0%,
      color-mix(in srgb, var(--color-bg) 93%, transparent) 34%,
      color-mix(in srgb, var(--color-bg) 62%, transparent) 62%,
      color-mix(in srgb, var(--color-bg) 26%, transparent) 100%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--color-bg) 62%, transparent) 0%,
      transparent 26%,
      color-mix(in srgb, var(--color-bg) 92%, transparent) 74%,
      var(--color-bg) 92%);
}
@keyframes nm-kopf-auf {
  from { opacity: 0; transform: scale(1.06); }
  to { opacity: 1; transform: none; }
}
/* Das Kopfbild liegt über die volle Fensterbreite und fährt beim Einblenden von
 * 1,06 auf 1 zusammen. In diesen 1,7 Sekunden steht es links und rechts je drei
 * Prozent über den Fensterrand hinaus, und solange ließ sich die ganze Seite
 * seitwärts schieben, samt kurz aufblitzender waagerechter Bildlaufleiste.
 * Der Seitenrahmen schneidet den Überstand jetzt ab. „clip" und nicht „hidden":
 * hidden würde den Rahmen zu einem Bildlaufbereich machen und die klebende
 * Navigation darin einsperren, clip schneidet nur. Ältere Browser ohne clip
 * verhalten sich wie bisher. */
.nm-seite { overflow-x: clip; }
@keyframes nm-kopf-zug {
  from { background-position: center 44%; }
  to { background-position: center 56%; }
}

/* Die Haarlinie über den Belegen lief quer über das Kopfbild und las sich dort,
 * wo die Welle am hellsten ist, als weiße Kante. Sie beginnt jetzt links auf
 * dunklem Grund und läuft nach rechts aus, statt als Rahmen durchzulaufen. */
.bk-kopf-linie {
  border-top: 0 !important;
  background-image: linear-gradient(90deg,
    color-mix(in srgb, var(--color-text) 15%, transparent) 0%,
    color-mix(in srgb, var(--color-text) 11%, transparent) 40%,
    transparent 86%);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: left top;
}

/* ---------- Zahlen, die auf ihren Wert laufen ----------
 * Der Platz steht von Anfang an: tabellarische Ziffern, damit die
 * Zeile beim Zählen nicht zappelt. */
.bk-zahl, .bk-zahl-lauf { font-variant-numeric: tabular-nums; }

/* ---------- Bänder stehen still ----------
 * Hier lief das Bild gegen den Scrollstand mit. Das flackerte an der unteren
 * Kante, und zwar nicht wegen der Rundung: Die Bandhöhe kommt aus einer
 * vw-Angabe und ist mit 194,10 Pixel selbst gebrochen. Ein Bild, das sich in
 * einem gebrochen hohen Kasten bewegt, wird bei jedem Bild in einer anderen
 * Teilpixel-Lage abgetastet und schimmert an harten Kanten, am Wagen also an
 * den Neonlinien. Ganze Pixel im Versatz ändern daran nichts, weil die Lage
 * des Kastens selbst gebrochen bleibt.
 *
 * Das Bild steht deshalb still. Die Fläche in Grundfarbe bleibt, sie fängt den
 * Rundungsrest an der unteren Kante ab. Bewegte Bilder trägt jetzt das
 * Typenband, das waagerecht läuft und dabei nichts abtastet. */
.nmband { background: var(--color-bg); }

/* ---------- Karten antworten auf den Zeiger ----------
 * Kein Anheben, kein Schatten: die Kante nimmt ihre Farbe an, das
 * Zeichen rückt einen Hauch nach oben. */
.nm-weich { transition: border-color .32s ease, box-shadow .32s ease; }
.nm-weich > i[class*="ph-"] { transition: transform .34s cubic-bezier(.22, 1, .36, 1); }
.nm-weich:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--rand, var(--color-accent)) 30%, transparent); }
.nm-weich:hover > i[class*="ph-"] { transform: translateY(-3px); }

/* ---------- Typenband: läuft langsam durchs Bild ---------- */
.bk-lauf { overflow: hidden; position: relative; }
.bk-lauf::before,
.bk-lauf::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(60px, 12vw, 150px);
  z-index: 2;
  pointer-events: none;
}
.bk-lauf::before { left: 0; background: linear-gradient(90deg, var(--color-bg), transparent); }
.bk-lauf::after { right: 0; background: linear-gradient(270deg, var(--color-bg), transparent); }
.bk-lauf-spur {
  display: flex;
  width: max-content;
  animation: nm-lauf 64s linear infinite;
}
.bk-lauf:hover .bk-lauf-spur { animation-play-state: paused; }
.bk-lauf-satz {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  padding-right: clamp(20px, 3vw, 40px);
  flex-shrink: 0;
}
.bk-lauf-satz > span {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(22px, 3vw, 38px);
  line-height: 1.1;
  letter-spacing: -.018em;
  white-space: nowrap;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
  transition: color .3s ease;
}
.bk-lauf-satz > span:hover { color: var(--color-text); }
.bk-lauf-satz > i {
  font-size: 9px;
  color: var(--color-accent);
  flex-shrink: 0;
}
@keyframes nm-lauf {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

/* ---------- Schrittstrecke: der Abschnitt bleibt stehen ----------
 * Die Hülle ist hoch, der Halt klebt darin. fluid.js schreibt
 * data-stufe 0 bis 2 aus dem Scrollstand. Unter 820 px und bei
 * ruhiger Bewegung fällt alles auf eine gewöhnliche Liste zurück,
 * dort steht jeder Schritt sichtbar untereinander. */
.bk-stufen { position: relative; }
.bk-stufen-halt {
  position: sticky;
  top: 12vh;
  min-height: 62vh;
  display: grid;
  align-content: start;
  gap: clamp(18px, 3vw, 30px);
}
.bk-stufe {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(16px, 2.4vw, 30px);
  align-items: start;
  transition: opacity .55s ease, transform .55s cubic-bezier(.22, 1, .36, 1);
}
.bk-stufe-nr {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 1;
  padding-top: .5em;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}
.bk-stufe b {
  display: block;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(26px, 4.6vw, 54px);
  line-height: 1.04;
  letter-spacing: -.026em;
  margin-bottom: .3em;
}
.bk-stufe span {
  display: block;
  font-size: clamp(16px, 1.9vw, 19px);
  line-height: 1.55;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  max-width: 46ch;
}
.bk-stufen-strich {
  height: 1px;
  background: color-mix(in srgb, var(--color-text) 14%, transparent);
  position: relative;
  overflow: hidden;
}
.bk-stufen-strich::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-accent);
  transform: scaleX(var(--fort, 0));
  transform-origin: left center;
}
@media (min-width: 821px) {
  .bk-stufen[data-lauf] { height: 300vh; }
  .bk-stufen[data-lauf] .bk-stufe { opacity: .2; transform: translateY(6px); }
  .bk-stufen[data-lauf][data-stufe="0"] .bk-stufe:nth-of-type(1),
  .bk-stufen[data-lauf][data-stufe="1"] .bk-stufe:nth-of-type(2),
  .bk-stufen[data-lauf][data-stufe="2"] .bk-stufe:nth-of-type(3) {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bk-kopf::before { animation: none; }
  .bk-lauf-spur { animation: none; }
  .bk-stufen[data-lauf] { height: auto; }
  .bk-stufen[data-lauf] .bk-stufe { opacity: 1; transform: none; }
}


/* ══ Teil 4: Handy ══════════════════════════════════════════════════════════
 *
 * Vorher hatte diese Datei auf 73 KB genau zwei Breakpoints, beide bei 700px,
 * und einer davon war wirkungslos (siehe Kommentar dort). Für die Breiten, auf
 * denen tatsächlich gelesen wird, 320px bis 430px, war nichts hinterlegt.
 * Gemessen liefen dadurch Seiten bis 521px breit, während das Fenster 320px
 * hat. Sichtbar wurde das nie, weil maritim.css am Seitenkörper ein
 * overflow-x: clip hält: der überstehende Teil war nicht etwa wegscrollbar,
 * sondern schlicht abgeschnitten und unerreichbar.
 *
 * Zwei Dinge zur Bauweise, damit der nächste Leser nicht rätselt:
 *
 * 1. Dieser Teil steht bewusst ganz am Ende. Die Seiten setzen ihren eigenen
 *    style-Block über style_vor_css, also VOR dieser Datei; ein Block hier
 *    unten schlägt sie ohne !important.
 * 2. !important steht nur dort, wo gegen ein style-Attribut der Seite
 *    angeschrieben wird. Inline schlägt jede Regel, unabhängig von der
 *    Reihenfolge, dagegen hilft sonst nichts. Der Bestand trägt rund 830
 *    inline gesetzte Raster und 231 der 233 Überschriften mit fester Größe,
 *    die Fälle sind also die Regel und nicht die Ausnahme.
 * ══════════════════════════════════════════════════════════════════════════ */

/* ---------- 4.1 Wortumbruch, auf jeder Breite ----------
 * Deutsche Komposita sind die häufigste Einzelursache für Überlauf: ein Wort,
 * das breiter ist als seine Spalte, schiebt den ganzen Block auf, und zwar
 * unabhängig von jedem Container. overflow-wrap kam in allen drei
 * Stilblättern vorher kein einziges Mal vor.
 *
 * Hier steht bewusst NUR overflow-wrap und keine Silbentrennung. break-word
 * greift ausschließlich bei Wörtern, die ohnehin überlaufen würden, am
 * Schriftbild eines normalen Absatzes ändert es also nichts. Silbentrennung
 * dagegen ist am ganzen Fließtext sichtbar, und am großen Schirm ist sie
 * weder nötig noch bestellt. Sie steht deshalb weiter unten im Telefonblock. */
h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
:is(main, .nm-seite) :is(p, li, dd, dt, td, th),
.card, .btn, .tag { overflow-wrap: break-word; }

@media (max-width: 700px) {

  /* ---------- 4.2 Beschriftungen dürfen umbrechen ----------
   * .btn trägt weiter oben white-space: nowrap. Eine Versalzeile wie
   * "Beitrag jetzt berechnen" misst mit Sperrung über 300px und läuft bei
   * rund 290px nutzbarer Breite jedes Mal über. */
  .btn {
    white-space: normal !important;
    padding: 14px 16px !important;
    letter-spacing: .02em !important;
    text-align: center;
    line-height: 1.25;
  }
  /* Gesetztes nowrap auflösen, aber nicht überall. Zwei Ausnahmen, beide im
   * Bestand belegt:
   *
   * Rufnummern. Die Fußzeile schützt ihre drei Nummern ausdrücklich mit einem
   * eigenen nowrap-Span, damit "03375 / 29 28 95" zusammenbleibt. Diese Regel
   * hätte die Notrufnummer auf JEDER Seite des Hauses mitten durchbrochen.
   * Eine Telefonnummer in zwei Zeilen ist keine Kleinigkeit: sie wird
   * abgetippt, und zwar oft in dem Moment, in dem etwas passiert ist.
   *
   * Absolut gesetzte Beschriftungen. Sie sitzen an einer festen Stelle einer
   * Zeichnung, etwa als Achsenbeschriftung. Bricht so eine Zeile um, wächst
   * sie in die Grafik hinein statt sich einzufügen. */
  :is(main, .nm-seite) :is([style*="white-space: nowrap"], [style*="white-space:nowrap"]):not([style*="position: absolute"]):not([style*="position:absolute"]) {
    white-space: normal !important;
  }
  /* Die Ziffern einer Rufnummer bleiben in einer Zeile. Geschützt wird genau
   * das, was der Verfasser selbst geschützt hat: der eigens gesetzte Span um
   * die Nummer. Der Satz drumherum ("Notruf nach Feierabend") darf umbrechen,
   * ein erster Entwurf hielt auch ihn zusammen und machte daraus eine 376px
   * lange Zeile, also aus dem Schutz ein neues Loch.
   *
   * Die drei angehängten :not() sind kein Zierrat, sie entscheiden das
   * Spezifitätsduell: die auflösende Regel darüber trägt selbst zwei davon
   * und käme sonst auf den höheren Wert, obwohl sie weiter oben steht. Ohne
   * sie stand die Notrufnummer gemessen zweizeilig da. */
  :is(main, .nm-seite) a[href^="tel:"] [style*="nowrap"]:not([hidden]):not([aria-hidden="true"]):not([style*="position: absolute"]) {
    white-space: nowrap !important;
  }

  /* Schilder und Marken. Die Zeile a.tag{white-space:nowrap} ist über den
   * Bestand hinweg in rund 40 Seiten wortgleich kopiert, steht dort also in
   * je eigenen Stilblöcken und ist nicht an einer Stelle zu fassen. Ein
   * Markenname wie "Nirgendwo-Günstiger-Garantie" misst als gesperrte
   * Versalzeile über 370px und schob die Seite auf. */
  :is(main, .nm-seite) :is(a, span, button, div).tag {
    white-space: normal !important;
    max-width: 100%;
  }

  /* ---------- 4.3 Überschriften werden mitwachsend ----------
   * 231 der 233 h1 im Bestand tragen ihre Größe als style-Attribut, fast alle
   * als clamp() mit einem Boden zwischen 34px und 46px. Bei 320px regiert
   * dieser Boden allein, und er wurde nie für diese Breite geprüft: ein Wort
   * wie Bootshaftpflichtversicherung misst bei 38px rund 530px. Deshalb hier
   * mit !important, ein ausweichender :not()-Selektor würde 231 Fälle
   * verfehlen und nur so aussehen, als sei das Problem gelöst. */
  :is(main, .nm-seite) h1 { font-size: clamp(26px, 8vw, 42px) !important; line-height: 1.08 !important; }
  :is(main, .nm-seite) h2:not([style*="font-size"]) { font-size: clamp(23px, 6.4vw, 32px); }
  :is(main, .nm-seite) h3:not([style*="font-size"]) { font-size: clamp(19px, 5vw, 25px); }

  /* ---------- 4.4 Abstandsdiät ----------
   * Vier Innenabstände stapelten sich: main 40px, Rahmen 52px, Karte 44px,
   * Tabellenzellen 30px je Spalte. Von 320px blieben im schlimmsten Fall
   * unter 150px für Text übrig. Die erste und letzte Tabellenspalte bleiben
   * bündig, das regeln die Regeln weiter oben mit höherer Spezifität. */
  main:not(:has(> .spalte)):not(:has(> .bande)) { padding-inline: 14px; }
  .table th, .table td { padding: 10px 7px; }

  /* ---------- 4.5 Tabellen laufen seitwärts statt über ----------
   * Eine breite Tabelle auf 320px zusammenzuquetschen macht sie unlesbar. Sie
   * bekommt deshalb ihren eigenen Scrollrahmen, so wie es der Kostenatlas
   * schon vorgemacht hat. :is() hebt die Spezifität so weit, dass der Rahmen
   * auch gegen Klassenregeln der Seiten steht. */
  :is(main, .nm-seite) :is(div, section, figure, form, details, article):has(> table) {
    overflow-x: auto !important;
  }

  /* Tabellen mit Fließtext werden zu Karten, eine je Zeile.
   *
   * Der Seitwärtslauf oben ist die richtige Antwort für Zahlenkolonnen. Für
   * eine Vergleichstabelle mit ganzen Sätzen ist er es nicht: gemessen war
   * auf /leistungsvergleich.php eine EINZELNE Spalte 250 bis 350px breit, bei
   * 320px Fenster. Man wischt, liest einen Satz und weiß nicht mehr, ob er in
   * der Spalte "NAMMERT" oder "Andere Anbieter" stand. Die Tabelle passte
   * danach ins Fenster und war trotzdem nicht zu gebrauchen.
   *
   * Welche Tabelle umgebaut wird, entscheidet fluid.js an der mittleren
   * Zeichenzahl je Zelle, nicht an einer Liste von Seiten. Dasselbe Skript
   * hängt jeder Zelle ihre Spaltenüberschrift als data-titel an, damit beim
   * Umbau kein Bezug verloren geht. */
  /* !important, weil die Mindestbreite inline am Tabellenelement steht (720
   * bis 820px). Für den Seitwärtslauf ist sie richtig und bleibt dort auch
   * stehen; im Kartenmodus ist sie genau das, was weg muss. */
  :is(main, .nm-seite) table[data-nm-karten="ja"] {
    display: block;
    min-width: 0 !important;
    width: 100% !important;
    border-collapse: separate;
    border-spacing: 0;
  }
  /* Der Scrollrahmen hat im Kartenmodus nichts mehr zu rollen, und sein
   * Randausgleich muss mit weg. Er stammt aus der Zeit des Seitwärtslaufs
   * (margin: 0 -4px; padding: 0 4px) und gab dem Rahmen etwas Luft nach
   * außen. Ohne Rollbalken zieht er die Kante der Tabelle 4px weiter nach
   * links als jeden Absatz daneben. Gemessen begann die Seite dadurch an
   * zwei verschiedenen Kanten, 10px und 14px, und wirkte ausgefranst. */
  :is(main, .nm-seite) :is(div, section, figure, form, details, article):has(> table[data-nm-karten="ja"]) {
    overflow-x: visible !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
  }
  :is(main, .nm-seite) table[data-nm-karten="ja"] thead { display: none; }
  :is(main, .nm-seite) table[data-nm-karten="ja"] tbody { display: block; }
  :is(main, .nm-seite) table[data-nm-karten="ja"] tr {
    display: block;
    padding: 14px 0;
    border-top: 1px solid color-mix(in srgb, var(--color-text) 14%, transparent);
  }
  :is(main, .nm-seite) table[data-nm-karten="ja"] tr:first-child { border-top: 0; }
  /* Der seitliche Einzug muss hier weg, und zwar mit !important: der ältere
   * Handy-Block in lib/partials/kopf/site-nav.php setzt table-Zellen auf
   * "padding: 12px 10px !important" und wird nach dieser Datei geladen. In
   * einer Tabelle ist dieser Einzug richtig, in der Karte steht der Text
   * dadurch 10px weiter rechts als jeder Absatz daneben, und die Seite wirkt
   * an der Kante ausgefranst. Senkrecht bleibt der Abstand erhalten, er
   * trennt die Zeilen der Karte. */
  :is(main, .nm-seite) table[data-nm-karten="ja"] :is(td, th) {
    display: block;
    width: auto !important;
    max-width: none;
    padding: 0 0 10px !important;
    border: 0;
  }
  :is(main, .nm-seite) table[data-nm-karten="ja"] :is(td, th):last-child { padding-bottom: 0 !important; }
  /* In der Karte darf jeder Zelleninhalt umbrechen. Ein erzwungenes nowrap
   * ist in einer breiten Tabellenspalte sinnvoll, in einer 292px schmalen
   * Karte nicht: auf einer Vergleichsseite stand so ein Satz wie
   * "kein Angebot (erst Auflagen: Kurzgutachten, Fotos, Telefonat, ...)"
   * einzeilig da und war 711px breit. Rufnummern bleiben ausgenommen, die
   * schützt ihre eigene Regel weiter oben mit !important. */
  :is(main, .nm-seite) table[data-nm-karten="ja"] :is(td, th),
  :is(main, .nm-seite) table[data-nm-karten="ja"] :is(td, th) * {
    white-space: normal;
    max-width: 100%;
  }
  /* Erste Zelle ist die Überschrift der Karte. */
  :is(main, .nm-seite) table[data-nm-karten="ja"] tr > :is(td, th):first-child {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 18px !important;
    line-height: 1.3;
    padding-bottom: 8px !important;
  }
  /* Die Spaltenüberschrift steht als Etikett über ihrem Wert. */
  :is(main, .nm-seite) table[data-nm-karten="ja"] [data-titel]::before {
    content: attr(data-titel);
    display: block;
    font-size: 13px;
    line-height: 1.35;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 3px;
  }
  /* ---------- 4.6 Kinder von Rastern und Flex-Reihen ----------
   * Sie tragen von Haus aus min-width: auto und blähen sich damit auf die
   * Breite ihres Inhalts auf, statt sich der Spalte zu fügen: eine
   * Zeichenfläche mit 966px Attributbreite machte so aus einer 260px-Spalte
   * eine 452px-Spalte. Das ist die häufigste Einzelursache für zu breite
   * Raster überhaupt.
   *
   * Drei Dinge sind hier bewusst NICHT drin, und das ist der wichtigere Teil
   * der Regel:
   *
   * Erstens kein !important und keine Fassung, die auf das style-Attribut
   * zielt. Eine gesetzte Mindestbreite ist im Bestand fast immer Absicht und
   * die halbe Miete des Seitwärtslaufs: eine Vergleichsseite hielt .bv-tab
   * mit 1580px und .vg-tab mit 660px in einem Kasten, der rollt.
   * Wer die nullt, nimmt der Tabelle genau das, was sie lesbar macht. Ohne
   * !important schlägt jede gesetzte Breite diese Regel, und das ist richtig.
   *
   * Zweitens keine Tabellen. Siehe oben, dort ist Überbreite die Lösung.
   *
   * Drittens kein a, span oder label. Bei denen ist eine Mindestbreite fast
   * immer ein Antippziel: public/werftverzeichnis.php gibt 27 Sprungzielen
   * 38px, public/glossar.php seiner Buchstabenleiste 34px. Genullt zerfällt
   * ein gleichmäßiges Band in ungleiche Kästchen unter dem Antippmaß. Ihr
   * Überlaufschutz steht ohnehin im Wortumbruch von 4.1. */
  :is(main, .nm-seite) :is(div, section, article, aside, figure, form, details,
                            ul, ol, li, dl, dd, dt, p, blockquote,
                            h1, h2, h3, h4, h5, h6) {
    min-width: 0;
  }

  /* Silbentrennung, und die trägt hier zwei Lasten auf einmal.
   *
   * Erstens die sichtbare: break-word allein bricht ein langes Wort ohne
   * Vorwarnung mitten durch ("Motoryachtver / band"). Mit hyphens trennt der
   * Browser an echten Silbengrenzen und setzt einen Trennstrich, so wie es
   * ein Setzer täte. Das lang-Attribut steht serverseitig am html-Element,
   * auf den EN- und ES-Seiten entsprechend deren Sprache.
   *
   * Zweitens die unsichtbare, und die ist der eigentliche Grund: break-word
   * bricht erst beim Zeichnen um, die gemessene Mindestbreite eines Wortes
   * bleibt das ganze Wort. Ein Raster- oder Flex-Kind wird auf genau diese
   * Mindestbreite aufgebläht und steht dann über, obwohl der Text sichtbar
   * umbricht. Silbentrennung senkt die Mindestbreite auf die längste Silbe
   * und löst damit auch das Layout. Gemessen machte "Deutschland/Internatio-
   * nal" aus einem 236px breiten Kasten ein 303px breites Kind. */
  :is(main, .nm-seite) :is(p, li, dd, dt, td, th, span, a, label,
                           h1, h2, h3, h4, h5, h6) {
    hyphens: auto;
    overflow-wrap: break-word;
  }

  /* Ketten, die keine Silbengrenzen haben und die deshalb auch die Trennung
   * nicht fassen kann: Schrägstrichpaare, Adressen, Kennungen. Hier ist der
   * harte Bruch das kleinere Übel, sonst steht das Etikett über. */
  :is(main, .nm-seite) :is(.tag, .card-kicker, code, .vz) {
    overflow-wrap: anywhere;
  }
  :is(main, .nm-seite) [style*="display: flex"]:not([style*="wrap"]),
  :is(main, .nm-seite) [style*="display:flex"]:not([style*="wrap"]) { flex-wrap: wrap; }
  /* Mitwachsende Raster, deren Mindestboden breiter ist als das Telefon.
   *
   * Das ist der Fall, der wirklich überläuft: auto-fit klingt nach Anpassung,
   * aber sobald der Kasten schmaler ist als der Boden, gewinnt der Boden und
   * die Spalte steht über. min() deckelt ihn auf das, was da ist.
   *
   * Entscheidend ist, WELCHE Raster die Regel anfasst. Sie greift nur bei
   * einem Boden ab 200px, erkennbar an minmax(2.. und minmax(3.. im
   * style-Attribut. Der Grund steht im Bestand: das Beitragspanel legt seine
   * 21 Bootstyp-Kacheln auf 146px, die Fußzeile ihre Kennzahlen auf 112px und
   * ihre vier Linkspalten auf 184px. Diese Raster passen auf dem Telefon
   * längst, zwei Spalten sind dort genau richtig. Eine Regel über alle
   * auto-fit-Raster hätte sie auf eine Spalte gezwungen und damit jede Seite
   * des Hauses schlechter gemacht, um ein Problem zu lösen, das sie nicht
   * haben. Verschlimmbessern ist auch dann ein Fehler, wenn hinterher nichts
   * mehr übersteht. */
  :is(main, .nm-seite) :is([style*="minmax(2"], [style*="minmax(3"],
                           [style*="minmax(4"], [style*="minmax(min(2"],
                           [style*="minmax(min(3"]) {
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)) !important;
  }

  /* Nachtrag 27.08.2026: ein Zweispalter, den die Regel darüber nicht sieht.
   * „minmax(190px, 1fr) 2fr" hat links einen Boden von 190px, der aufs Telefon
   * passt, und deshalb greift der Boden-ab-200px-Filter nicht. Der Überlauf
   * kommt aus der zweiten Spalte: 2fr fällt nie unter ihren min-content, und
   * 190px plus Textbreite ergeben mehr, als das Fenster hat. Gemessen bei
   * 360px: /yachtversicherung-spanien.php stand 87px über. Sichtbar war das
   * nie, weil maritim.css am Seitenkörper overflow-x: clip hält; der Text war
   * schlicht abgeschnitten und unerreichbar.
   *
   * Der Treffer sitzt bewusst am Muster „fr) 2fr" und nicht am Boden: genau
   * diese Bauform ist das Paar aus schmaler Beschriftung und breitem Text,
   * und ein solches Paar gehört auf dem Telefon untereinander. Vier Seiten
   * tragen es (yachtversicherung-spanien, oesterreich-bootsversicherung,
   * oesterreich-trailer, oesterreich-wechselservice). */
  :is(main, .nm-seite) [style*="fr) 2fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Raster mit fester Spaltenzahl bleiben unangetastet, solange sie in 1fr
   * rechnen: 1fr schrumpft mit und kann gar nicht überlaufen. Ein früherer
   * Entwurf schrieb sie trotzdem um und hätte damit das sechsteilige
   * Stationenband der Elektroboot-Seite senkrecht gestapelt, während die
   * absolut gesetzte Verbindungslinie darüber waagerecht liegen geblieben
   * wäre. Eine Regel, die nichts repariert, aber etwas zerlegt, gehört
   * nicht in eine Datei. */

  /* ---------- 4.7 Bilder, Zeichnungen, Kopfleiste ---------- */
  :is(main, .nm-seite) img, :is(main, .nm-seite) svg, :is(main, .nm-seite) canvas { max-width: 100%; height: auto; }
  .nav { flex-wrap: wrap; }
}

/* ---------- 4.8 Platz für die festgeklebten Fußleisten ----------
 * 84 Seiten kleben eine Leiste ans untere Fensterende und halten dafür 80px
 * Abstand frei. Gemessen ist die Leiste bei 320px aber über 100px hoch, der
 * letzte Inhalt lag also dauerhaft darunter. Der Zuschnitt auf :has() sorgt
 * dafür, dass die übrigen rund 200 Seiten keinen toten Streifen bekommen. */
@media (max-width: 820px) {
  body:has([class$="-sticky"]) {
    padding-bottom: calc(148px + env(safe-area-inset-bottom));
  }

  /* Die Leiste selbst schob die ganze Seite seitlich aus dem Rahmen: Text und
   * Schaltfläche stehen als Flexkinder nebeneinander, und Flexkinder schrumpfen
   * ohne min-width: 0 nicht unter ihre Inhaltsbreite. Bei 360px gemessen:
   * 237px Text plus 142px Schaltfläche plus Abstände ergaben 421px Dokument-
   * breite, also 61px Querlauf auf jeder der 83 Seiten mit dieser Leiste.
   * Umbrechen statt überlaufen; die Höhe fängt der Abstand oben ab. */
  [class$="-sticky"] {
    flex-wrap: wrap;
  }

  [class$="-sticky"] > * {
    min-width: 0;
  }
}

/* ---------- 4.9 Antippziele ----------
 * Gilt nur für Finger, am Bildschirm mit Maus ändert sich nichts. Unter 44px
 * trifft man auf einem Telefon zuverlässig daneben.
 *
 * Die Breitengrenze gehört dazu, auch wenn sie auf den ersten Blick überflüssig
 * aussieht: pointer: coarse allein trifft auch ein Tablet im Querformat mit
 * 1366px. Diese Schicht ist für 320 bis 430px gebaut und soll oberhalb davon
 * nichts anfassen, sonst wächst der Regler, den die Grundregel bewusst auf
 * 26px hält, auf einem großen Schirm ungefragt mit. */
@media (pointer: coarse) and (max-width: 820px) {
  a.tag, button.tag, .btn-icon { min-height: 44px; }
  a.tag, button.tag { padding-block: 10px; display: inline-flex; align-items: center; }
  .nav a { min-height: 44px; display: inline-flex; align-items: center; }
  input[type="range"] { height: 44px; }
}

/* ---------- 4.10 Eingabefelder ----------
 * Unter 16px zoomt iOS beim Antippen ungefragt in die Seite hinein, und der
 * Nutzer sitzt danach in einer verschobenen Ansicht fest. */
@media (max-width: 820px) {
  input, select, textarea { font-size: max(16px, 1em); }
}

/* ---------- 4.11 Lange Seiten falten sich auf Telefon und Tablet ----------
 * Gestaltung zur Faltung aus fluid.js. Die Grenze liegt bei 1024px und damit
 * bewusst höher als die der übrigen Telefonschicht: sie schließt Tablets im
 * Hochformat ein (iPad mini 744, Air 820, Pro 1024), denn dort ist eine Seite
 * von 66 Bildschirmlängen genauso wenig zu überblicken wie am Telefon. Im
 * Querformat liegen dieselben Geräte darüber und laufen wie am Rechner.
 * Am großen Schirm gibt es die Aufklapper gar nicht erst, dort baut das
 * Skript nichts um. */
@media (max-width: 1024px) {

  /* Verzeichnis: was steht auf dieser Seite, und wie weit ist es noch. */
  .nm-inhalt {
    margin: 4px 0 22px;
    padding: 16px 0 18px;
    border-top: 1px solid color-mix(in srgb, var(--color-text) 16%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--color-text) 16%, transparent);
  }
  .nm-inhalt-titel {
    font-size: 13px !important;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin: 0 0 12px !important;
    line-height: 1.2 !important;
  }
  .nm-inhalt ol {
    list-style: none;
    counter-reset: nm-inhalt;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 2px;
  }
  .nm-inhalt li { counter-increment: nm-inhalt; margin: 0; }
  .nm-inhalt a {
    display: grid;
    grid-template-columns: 26px 1fr;
    align-items: baseline;
    gap: 4px;
    min-height: 44px;
    align-content: center;
    padding: 4px 0;
    font-size: 16.5px !important;
    line-height: 1.35 !important;
    color: var(--color-text);
    text-decoration: none !important;
  }
  .nm-inhalt a::before {
    content: counter(nm-inhalt, decimal-leading-zero);
    font-variant-numeric: tabular-nums;
    font-size: 12.5px;
    letter-spacing: .04em;
    color: color-mix(in srgb, var(--color-text) 55%, transparent);
  }

  /* Der Aufklapper selbst. */
  .nm-falt {
    border-top: 1px solid color-mix(in srgb, var(--color-text) 16%, transparent);
    margin: 0 !important;
  }
  .nm-falt:last-of-type {
    border-bottom: 1px solid color-mix(in srgb, var(--color-text) 16%, transparent);
  }
  .nm-falt-kopf {
    display: grid;
    grid-template-columns: 1fr 22px;
    align-items: center;
    gap: 10px;
    padding: 17px 0 !important;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 19px !important;
    line-height: 1.3 !important;
    cursor: pointer;
    list-style: none;
    text-wrap: balance;
  }
  .nm-falt-kopf::-webkit-details-marker { display: none; }
  /* Zeichen rechts: ein Winkel, der sich beim Öffnen dreht. */
  .nm-falt-kopf::after {
    content: "";
    justify-self: end;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--color-accent);
    border-bottom: 2px solid var(--color-accent);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .18s ease;
  }
  .nm-falt[open] > .nm-falt-kopf::after {
    transform: rotate(225deg) translate(-2px, -2px);
  }
  .nm-falt[open] > .nm-falt-kopf { color: var(--color-accent-100); }
  .nm-falt-kopf:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
  }
  /* Der Abschnitt darin trägt seinen Abstand jetzt selbst, und seine eigene
     Überschrift ist überflüssig geworden: sie steht oben im Aufklapper. */
  .nm-falt > *:not(.nm-falt-kopf) {
    margin-block: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 26px !important;
  }
  .nm-falt-weg { display: none !important; }

  @media (prefers-reduced-motion: reduce) {
    .nm-falt-kopf::after { transition: none; }
  }
}

/* ---------- Teil 5: Papier ----------
 * Ein A4-Bogen ist 210mm breit, also rund 794 Pixel. Damit greift beim Drucken
 * jede Regel, die auf max-width 820px oder 1024px hört, obwohl sie fürs
 * Smartphone gedacht ist. Zwei Folgen, beide beim Notfallblatt aufgefallen:
 * die Schrift wuchs auf 18px und sprengte den Satzspiegel, und die Faltung aus
 * Teil 4.11 klappte Abschnitte zu, die dann gar nicht mit aufs Papier kamen.
 * Deshalb hier: Papier ist kein schmaler Bildschirm. */
@media print {
  /* Zugeklappte Abschnitte gehören vollständig aufs Blatt. */
  :is(main, .nm-seite) details,
  :is(main, .nm-seite) details.nm-falt {
    display: block !important;
  }

  :is(main, .nm-seite) details > *,
  :is(main, .nm-seite) .nm-inhalt {
    display: revert !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Der Aufklapp-Pfeil ist auf Papier sinnlos. */
  .nm-falt-kopf::after { content: none !important; }

  /* Hier stand eine Regel, die Schriftgrößen im Druck auf den geerbten Wert
   * zurücksetzte (font-size: revert), gedacht gegen die Fingergrößen aus
   * Teil 4. Sie war das falsche Mittel: die Ursache, die 18px-Regel aus dem
   * Kopf-Beitrag von site-nav, gilt seit demselben Tag nur noch für screen.
   * Die Rücksetzung traf dafür die Druckbögen, deren Satz in pt gerechnet ist:
   * aus 8,6pt in einer Tabellenzelle wurden 16px, der Bogen lief über, und auf
   * dem Notfallblatt fielen unten die Rufnummern vom Blatt. Wer die Fingergrößen
   * je wieder im Druck sieht, sucht zuerst nach einem @media ohne "screen". */

  /* Was am Bildschirm seitlich scrollt, muss auf Papier umbrechen. */
  :is(main, .nm-seite) :is(div, section, figure, form):has(> table) {
    overflow-x: visible !important;
  }

  /* Bedienelemente, die auf Papier nichts verloren haben. */
  [class$="-sticky"], .nvburger, .nvmobile { display: none !important; }
}

/* — gemeinsame Bewegungen — */
/* Diese drei Ablaeufe standen wortgleich in 80 Seitenstilen. Keyframes tragen
   keine Spezifitaet, sie duerfen deshalb hier stehen, ohne dass sich an
   irgendeiner Seite etwas verschiebt. Wer eine Bewegung aendern will, aendert
   sie ab jetzt hier. */
@keyframes vkAuf{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes vkPuls{0%,100%{box-shadow:0 6px 18px color-mix(in srgb,var(--color-accent) 20%,transparent)}50%{box-shadow:0 8px 28px color-mix(in srgb,var(--color-accent) 44%,transparent)}}
@keyframes heroFloat{from{transform:translateY(0);filter:drop-shadow(0 0 0 transparent)}to{transform:translateY(-8px);filter:drop-shadow(0 8px 18px color-mix(in srgb,var(--color-accent) 22%,transparent))}}

/* — Abschlussleiste am unteren Rand — */
/* Stand bis zum 28.08.2026 in 55 Seitenstilen, dort schon in vier
   Fassungen, die auseinandergelaufen waren. Die Regeln sind harmlos fuer
   Seiten ohne die Leiste: ohne <div class="vk-sticky"> im Markup greift
   nichts. Der Innenabstand traegt !important, weil ihn .btn sonst
   ueberschreibt (so hielten es 18 der 55 Seiten). */
.vk-sticky{display:none}
@media (max-width:820px){
.vk-sticky{display:flex !important;position:fixed;left:0;right:0;bottom:0;z-index:200;gap:10px;align-items:center;justify-content:space-between;
padding:11px 16px calc(11px + env(safe-area-inset-bottom));background:color-mix(in srgb,#051526 94%,transparent);
border-top:1px solid var(--color-accent-700);backdrop-filter:blur(10px)}
.vk-sticky .btn{padding:10px 16px!important;font-size:15.5px;animation:none}
body{padding-bottom:80px}
}

/* — Merkzeile (nm-pill) — */
/* Stand wortgleich in 42 Seitenstilen. Die Klasse kommt nur auf diesen
   Seiten im Markup vor, das Verschieben aendert an keiner anderen etwas. */
.nm-pill{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius: 0;font-size:15.5px;font-weight:500;line-height:1;border:1px solid;white-space:nowrap}

/* ---------- Sprungmarke zum Inhalt ---------- */
/* WCAG 2.4.1 "Bypass Blocks", Stufe A: Wer mit der Tastatur bedient, musste
   bisher auf jeder Seite durch die komplette Kopfleiste tabben, bevor der
   Inhalt kam. Der Link steht als erstes Element im Dokument, ist unsichtbar,
   bis er den Fokus bekommt, und springt hinter die Navigation. Er darf nicht
   mit display:none oder visibility:hidden versteckt werden, sonst ist er auch
   fuer die Tastatur weg. */
.nm-sprung {
  position: fixed; left: 12px; top: -60px; z-index: 1000;
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 10px 18px; border-radius: 0;
  background: var(--color-accent); color: #04131a;
  font-size: 17px; font-weight: 500; text-decoration: none;
  transition: top .12s ease-out;
}
.nm-sprung:focus-visible, .nm-sprung:focus {
  top: 10px; outline: 2px solid var(--color-text); outline-offset: 2px;
}
#inhalt { display: block; scroll-margin-top: 84px; }
#inhalt:focus { outline: none; }