/* ══ Der helle Look in den Logofarben (seit 12.10.2026) ══════════════════════
 *
 * Warum es diese Datei gibt: Ansage des Inhabers vom 12.10.2026, die Seite
 * sah aus "wie meine pmfinanz.com und vermutlich Millionen andere". Dunkler
 * Grund, Leuchtfarben, Glas: das Muster jeder Vorlage. Abgestimmt wurde ein
 * eigener Look an einer Musterseite (Desktop\Design-Vorschau\eigener-look,
 * startseite-v3.html), dann sitewide umgesetzt.
 *
 * Die Regeln:
 *   - Nur Logofarben: Blau #41A9E0, Pink #E8408E, Weiß. Text dunkles
 *     Logoblau #0B2A40. Kleine pinke Schrift und pinke Flächen mit kleiner
 *     weißer Schrift in #C8256F (5,3 : 1 auf Weiß).
 *   - Hell ist die Grundeinstellung. Steht das Gerät auf Dunkel, wird die
 *     Seite dunkel; der Schalter in der Kopfleiste überstimmt beides und
 *     merkt sich die Wahl (localStorage "nm-ansicht", gesetzt im Kopf vor
 *     dem ersten Zeichnen, siehe lib/kopf.php).
 *   - Lesbar für ältere Augen: Fließtext 18 px, Kontrast mindestens 4,5 : 1
 *     in beiden Ansichten.
 *
 * Wie es geht: Die Seite färbt sich fast vollständig über die Tonleitern
 * aus styles.css und seite.css (--color-neutral-*, --color-accent-*). Für
 * Schwarz waren sie so benutzt: 100 bis 300 als helle Schrift, 700 bis 900
 * als dunkle Fläche. Im hellen Look sind sie deshalb GESPIEGELT: 100 ist
 * jetzt das Dunkelste, 900 das Hellste. Damit stimmt jede der rund 20.000
 * Verwendungen ohne Eingriff in die Seiten. Diese Datei lädt als letztes
 * Stilblatt und gewinnt deshalb gegen beide Tokendateien.
 */

/* ---------- 1. Hell (Grundeinstellung) ---------- */
:root {
  color-scheme: light;
  --color-bg: #ffffff;
  --color-surface: #e8f5fc;
  /* Etwas dunkler als das Logoblau-Dunkel #0b2a40: viele Stellen mischen die
     Schriftfarbe auf 55 bis 70 Prozent, erst so bleiben sie über 4,5 : 1. */
  --color-text: #061a29;
  --color-divider: color-mix(in srgb, #061a29 16%, transparent);
  --color-section: #e8f5fc;
  --color-section-glow: #41a9e0;
  --color-section-ghost: #8ccdee;

  /* Blau: Schriftblau dunkel genug für kleine Schrift, das Logoblau selbst
     nur für Großes und Flächen. */
  --color-accent: #1a6fa3;
  --color-accent-100: #0b3550;
  --color-accent-200: #0f4466;
  --color-accent-300: #135a86;
  --color-accent-400: #1a6fa3;
  --color-accent-500: #2386c2;
  --color-accent-600: #41a9e0;
  --color-accent-700: #8ccdee;
  --color-accent-800: #c7e6f7;
  --color-accent-900: #e8f5fc;

  /* Pink */
  --color-accent-2: #c8256f;
  --color-accent-2-100: #5e0a30;
  --color-accent-2-200: #7e0e41;
  --color-accent-2-300: #a3195a;
  --color-accent-2-400: #c8256f;
  --color-accent-2-500: #e8408e;
  --color-accent-2-600: #f06aa6;
  --color-accent-2-700: #f7a9cb;
  --color-accent-2-800: #fbd3e4;
  --color-accent-2-900: #fdebf3;

  /* Türkis und Orange gibt es im Logo nicht: beide folgen Blau bzw. Pink. */
  --color-accent-3: #1a6fa3;
  --color-accent-3-100: #0b3550;
  --color-accent-3-300: #135a86;
  --color-accent-3-700: #8ccdee;
  --color-accent-4: #c8256f;
  --color-accent-4-100: #5e0a30;
  --color-accent-4-300: #a3195a;
  --color-accent-4-700: #f7a9cb;

  --color-neutral-100: #0b2a40;
  --color-neutral-200: #1e3b52;
  --color-neutral-300: #3e5a6e;
  --color-neutral-400: #5c7689;
  --color-neutral-500: #7e95a6;
  --color-neutral-600: #a5b6c3;
  --color-neutral-700: #d3dee6;
  --color-neutral-800: #eef4f8;
  --color-neutral-900: #f6f9fb;

  --glas-flaeche: #f3f9fd;
  --glas-flaeche-tief: #fafcfe;
  --glas-kante: color-mix(in srgb, #0b2a40 14%, transparent);
  --glas-licht: transparent;
  --glas-schatten: rgba(11, 42, 64, .12);
  --neon: transparent;
  --neon-weit: transparent;
  --neon-2: transparent;
  --neon-2-weit: transparent;

  --shadow-sm: 0 0 0 1px #d3dee6;
  --shadow-md: 0 0 0 1px #d3dee6, 0 6px 18px rgba(11, 42, 64, .10);
  --shadow-lg: 0 0 0 1px #a5b6c3, 0 16px 40px rgba(11, 42, 64, .14);

  /* Eigene Rollen des Looks */
  --nm-logoblau: #41a9e0;
  --nm-logopink: #e8408e;
  --nm-tinte: #0b2a40;
  --nm-pinkschrift: #c8256f;
  --nm-pinkflaeche: #c8256f;
  --nm-flaeche: #e8f5fc;
  --nm-grund: #ffffff;
  /* Schrift auf Akzentflächen (Knöpfe, Marken, Ziffern): im hellen Look sind
     Blau und Pink dunkel, die Schrift darauf weiß. Ersetzt am 12.10.2026 das
     fest eingetragene Fast-Schwarz (#04131c und Verwandte) an rund 60 Stellen. */
  --nm-auf-akzent: #ffffff;
}

/* ---------- 2. Dunkel (Gerät auf Dunkel oder Schalter) ---------- */
/* Die Werte stehen zweimal: einmal für das Gerät, einmal für den Schalter.
   :not([data-theme=hell]) lässt den Schalter das Gerät überstimmen. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=hell]) {
    color-scheme: dark;
    --color-bg: #06141f;
    --color-surface: #0b2a40;
    --color-text: #eaf6fd;
    --color-divider: color-mix(in srgb, #eaf6fd 16%, transparent);
    --color-section: #0b2a40;
    --color-section-glow: #41a9e0;
    --color-section-ghost: #1a6fa3;
    --color-accent: #41a9e0;
    --color-accent-100: #e8f5fc;
    --color-accent-200: #c7e6f7;
    --color-accent-300: #8ccdee;
    --color-accent-400: #63bbe7;
    --color-accent-500: #41a9e0;
    --color-accent-600: #2386c2;
    --color-accent-700: #1a6fa3;
    --color-accent-800: #135a86;
    --color-accent-900: #0b3550;
    --color-accent-2: #f06aa6;
    --color-accent-2-100: #fdebf3;
    --color-accent-2-200: #fbd3e4;
    --color-accent-2-300: #f7a9cb;
    --color-accent-2-400: #f06aa6;
    --color-accent-2-500: #e8408e;
    --color-accent-2-600: #c8256f;
    --color-accent-2-700: #a3195a;
    --color-accent-2-800: #7e0e41;
    --color-accent-2-900: #5e0a30;
    --color-accent-3: #8ccdee;
    --color-accent-3-100: #e8f5fc;
    --color-accent-3-300: #c7e6f7;
    --color-accent-3-700: #1a6fa3;
    --color-accent-4: #f06aa6;
    --color-accent-4-100: #fdebf3;
    --color-accent-4-300: #f7a9cb;
    --color-accent-4-700: #a3195a;
    --color-neutral-100: #f3f8fc;
    --color-neutral-200: #dbe8f1;
    --color-neutral-300: #bfd2df;
    --color-neutral-400: #a9c6d8;
    --color-neutral-500: #7e95a6;
    --color-neutral-600: #5c7689;
    --color-neutral-700: #1b3d55;
    --color-neutral-800: #0e2a3e;
    --color-neutral-900: #0a2233;
    --glas-flaeche: color-mix(in srgb, #eaf6fd 5%, transparent);
    --glas-flaeche-tief: color-mix(in srgb, #eaf6fd 2%, transparent);
    --glas-kante: color-mix(in srgb, #eaf6fd 14%, transparent);
    --glas-licht: transparent;
    --glas-schatten: #000;
    --shadow-sm: 0 0 0 1px #1b3d55;
    --shadow-md: 0 0 0 1px #1b3d55, 0 6px 18px rgba(0, 0, 0, .45);
    --shadow-lg: 0 0 0 1px #5c7689, 0 16px 40px rgba(0, 0, 0, .55);
    --nm-pinkschrift: #f06aa6;
    --nm-flaeche: #0b2a40;
    --nm-grund: #06141f;
    --nm-auf-akzent: #04131c;
  }
}
:root[data-theme=dunkel] {
  color-scheme: dark;
  --color-bg: #06141f;
  --color-surface: #0b2a40;
  --color-text: #eaf6fd;
  --color-divider: color-mix(in srgb, #eaf6fd 16%, transparent);
  --color-section: #0b2a40;
  --color-section-glow: #41a9e0;
  --color-section-ghost: #1a6fa3;
  --color-accent: #41a9e0;
  --color-accent-100: #e8f5fc;
  --color-accent-200: #c7e6f7;
  --color-accent-300: #8ccdee;
  --color-accent-400: #63bbe7;
  --color-accent-500: #41a9e0;
  --color-accent-600: #2386c2;
  --color-accent-700: #1a6fa3;
  --color-accent-800: #135a86;
  --color-accent-900: #0b3550;
  --color-accent-2: #f06aa6;
  --color-accent-2-100: #fdebf3;
  --color-accent-2-200: #fbd3e4;
  --color-accent-2-300: #f7a9cb;
  --color-accent-2-400: #f06aa6;
  --color-accent-2-500: #e8408e;
  --color-accent-2-600: #c8256f;
  --color-accent-2-700: #a3195a;
  --color-accent-2-800: #7e0e41;
  --color-accent-2-900: #5e0a30;
  --color-accent-3: #8ccdee;
  --color-accent-3-100: #e8f5fc;
  --color-accent-3-300: #c7e6f7;
  --color-accent-3-700: #1a6fa3;
  --color-accent-4: #f06aa6;
  --color-accent-4-100: #fdebf3;
  --color-accent-4-300: #f7a9cb;
  --color-accent-4-700: #a3195a;
  --color-neutral-100: #f3f8fc;
  --color-neutral-200: #dbe8f1;
  --color-neutral-300: #bfd2df;
  --color-neutral-400: #a9c6d8;
  --color-neutral-500: #7e95a6;
  --color-neutral-600: #5c7689;
  --color-neutral-700: #1b3d55;
  --color-neutral-800: #0e2a3e;
  --color-neutral-900: #0a2233;
  --glas-flaeche: color-mix(in srgb, #eaf6fd 5%, transparent);
  --glas-flaeche-tief: color-mix(in srgb, #eaf6fd 2%, transparent);
  --glas-kante: color-mix(in srgb, #eaf6fd 14%, transparent);
  --glas-licht: transparent;
  --glas-schatten: #000;
  --shadow-sm: 0 0 0 1px #1b3d55;
  --shadow-md: 0 0 0 1px #1b3d55, 0 6px 18px rgba(0, 0, 0, .45);
  --shadow-lg: 0 0 0 1px #5c7689, 0 16px 40px rgba(0, 0, 0, .55);
  --nm-pinkschrift: #f06aa6;
  --nm-flaeche: #0b2a40;
  --nm-grund: #06141f;
  --nm-auf-akzent: #04131c;
}

/* ---------- 3. Grund und Schrift ---------- */
/* Die drei Lichter über Schwarz (seite.css) entfallen: ruhiger Grund. */
body {
  background: var(--color-bg) !important;
  background-attachment: scroll !important;
  font-size: 18px;
  line-height: 1.6;
}
a { color: var(--color-accent); }
/* Kein allgemeines a:hover: Knöpfe aus <a> mit hellblauer Fläche wurden sonst
   pink auf hellblau (Sichtprüfung 12.10.2026: 3,9 : 1). */
::selection { background: color-mix(in srgb, var(--nm-logopink) 30%, transparent); }

/* ---------- 4. Knöpfe: Pink mit weißer Schrift, eckig, ohne Leuchten ---------- */
html :is(.btn-primary, #nm-vorrang) {
  background: var(--nm-pinkflaeche) !important;
  border-color: var(--nm-pinkflaeche) !important;
  color: #fff !important;
  box-shadow: none !important;
  font-weight: 700;
}
html :is(.btn-primary, #nm-vorrang):hover {
  background: var(--nm-tinte) !important;
  border-color: var(--nm-tinte) !important;
  color: #fff !important;
  box-shadow: none !important;
}
:root[data-theme=dunkel] :is(.btn-primary, #nm-vorrang):hover { background: #fff !important; border-color: #fff !important; color: var(--nm-tinte) !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=hell]) :is(.btn-primary, #nm-vorrang):hover { background: #fff !important; border-color: #fff !important; color: var(--nm-tinte) !important; }
}
.btn-primary svg, .btn-primary .ic { color: inherit; }

/* ---------- 5. Nichts steht über ---------- */
/* Ansage des Inhabers vom 12.10.2026: Tabellen, Kästen, Inhalte und Rahmen
   brauchen genug Abstand zur Schrift und dürfen nicht überstehen. Lange
   deutsche Wörter brechen mit Trennstrich statt aus der Spalte zu laufen;
   breite Tabellen scrollen am Handy in sich, statt die Seite zu verbreitern. */
html, body { overflow-x: clip; }
main :is(p, li, dd, dt, td, th, h1, h2, h3, h4, h5, h6, figcaption, blockquote, summary, label) {
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}
img, video, iframe, svg, canvas { max-width: 100%; }
img, video { height: auto; }
@media (max-width: 760px) {
  main table:not([role=presentation]) {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  main pre, main code { white-space: pre-wrap; overflow-wrap: anywhere; }
}
main table th, main table td { padding: .55em .8em; }

/* ---------- 6. Schalter Hell/Dunkel in der Kopfleiste ---------- */
/* Runder Symbolknopf: einer der wenigen Kreise, die rund sein dürfen
   (siehe bin/pruefe-ecken.py, Regel "nur echte Kreise rund"). */
.nm-ansicht {
  width: 44px; height: 44px; flex: none;
  display: inline-grid; place-items: center;
  border-radius: 50%;
  border: 2px solid currentColor;
  background: transparent; color: var(--color-text);
  cursor: pointer; padding: 0;
}
.nm-ansicht:hover { color: var(--nm-pinkschrift); }
.nm-ansicht:focus-visible { outline: 3px solid var(--nm-logoblau); outline-offset: 3px; }
.nm-ansicht svg { width: 22px; height: 22px; display: block; }
.nm-ansicht .nm-mond { display: none; }
:root[data-theme=dunkel] .nm-ansicht .nm-sonne { display: none; }
:root[data-theme=dunkel] .nm-ansicht .nm-mond { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=hell]) .nm-ansicht .nm-sonne { display: none; }
  :root:not([data-theme=hell]) .nm-ansicht .nm-mond { display: block; }
}
@media (max-width: 620px) {
  .nm-ansicht { width: 40px; height: 40px; }
  .nm-ansicht svg { width: 20px; height: 20px; }
}

/* ---------- 7. Kopfleiste, Sprungmarke, Bänder ---------- */
/* seite.css färbte die Leiste fest fast schwarz (#05070c). Jetzt folgt sie
   dem Grund: hell im hellen Look, dunkel im dunklen. */
html .nav, html[data-ab] .nav {
  background: color-mix(in srgb, var(--color-bg) 94%, transparent) !important;
  border-bottom-color: var(--color-divider) !important;
}
a.nm-sprung { color: #fff !important; background: var(--nm-tinte) !important; }
/* Die allgemeinen Bänder (.bande) trugen einen fast schwarzen Verlauf. */
.bande { background: var(--color-section); }

/* ---------- 8. Erlebnisstrecke in den Logofarben ---------- */
/* motion.css hatte eigene Leuchtfarben: Orange, Koralle, Violett. Im Logo
   gibt es nur Blau und Pink. Die runden Leuchtkreise an den drei Schritten
   (das Vorlagenmuster, das der Inhaber am 12.10.2026 beanstandet hat)
   werden große blaue Ziffern. */
:root {
  --xp-sea: #41a9e0;
  --xp-pink: #e8408e;
  --xp-coral: #e8408e;
  --xp-sun: var(--nm-pinkschrift);
  --xp-grad: linear-gradient(100deg, #41a9e0 0%, #e8408e 100%);
  --xp-grad-warm: linear-gradient(100deg, #e8408e 0%, #41a9e0 100%);
}
/* Auf Foto und dunklem Band bleibt die kleine Zeile hellpink. */
.xp-hero, .xp-film, .xp-daily-out { --xp-sun: #f7a9cb; }
.xp-hero-wave path { fill: var(--color-bg) !important; }

.xp-step {
  background: transparent !important;
  border: 0 !important;
  border-left: 3px solid var(--nm-logoblau) !important;
  box-shadow: none !important;
}
.xp-step:hover { transform: none !important; box-shadow: none !important; }
.xp-step-num, .xp-step:nth-child(2) .xp-step-num, .xp-step:nth-child(3) .xp-step-num {
  width: auto; height: auto; border-radius: 0; display: block;
  background: none !important; box-shadow: none !important;
  font: 600 clamp(56px, 6vw, 88px)/.9 var(--font-num) !important;
  letter-spacing: -.04em; color: var(--nm-logoblau) !important;
}

/* Die Preistafel: die eine dunkelblaue Fläche, weiße Schrift. */
.xp-daily-box { background: transparent !important; border-color: var(--color-divider) !important; }
.xp-daily-out:is(.xp-daily-out, #nm-vorrang) { background: var(--nm-tinte) !important; color: #fff; }
.xp-day {
  background: linear-gradient(100deg, #ffffff 0%, #c7e6f7 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
}
.xp-chip { color: var(--color-text); }
.xp-chip[aria-checked="true"] {
  background: var(--nm-pinkflaeche) !important; color: #fff !important; border-color: var(--nm-pinkflaeche) !important;
}
.xp-chip:hover { border-color: var(--nm-logopink); }

/* ---------- 9. Startseiten-Kopf: Satz zum Ausfüllen und drei Wege ---------- */
/* Baustein lib/partials/start-kopf.php. Vorlage: startseite-v3.html. */
.sk-satz { background: var(--nm-flaeche); padding: clamp(36px, 6vw, 96px) clamp(16px, 5vw, 80px) clamp(32px, 4vw, 56px); }
.sk-w { max-width: 1320px; margin: 0 auto; }
.sk-h1 {
  font: 600 15px/1.4 var(--font-num) !important; letter-spacing: 0 !important; text-transform: none !important;
  color: var(--nm-pinkschrift); margin: 0 0 6px !important; max-width: none !important;
}
.sk-vor { font: 500 15px/1.4 var(--font-num); color: var(--color-neutral-300); margin: 0 0 22px; }
.sk-gross {
  font-family: var(--font-heading); font-weight: 900; font-stretch: 72%; text-transform: uppercase;
  font-size: clamp(42px, 6.2vw, 108px); line-height: 1; letter-spacing: 0; margin: 0; max-width: 21ch;
  color: var(--color-text); hyphens: manual; overflow-wrap: normal;
}
.sk-wahl { position: relative; display: inline-block; color: var(--nm-pinkschrift); border-bottom: .06em solid currentColor; cursor: pointer; white-space: nowrap; }
.sk-wahl select { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.sk-wahl::after { content: ""; display: inline-block; width: .3em; height: .3em; border-right: .07em solid currentColor; border-bottom: .07em solid currentColor; transform: rotate(45deg); margin: 0 .08em .2em .2em; }
.sk-wahl:focus-within { outline: 3px solid var(--nm-logoblau); outline-offset: 4px; }
.sk-lead { font-size: clamp(19px, 1.5vw, 22px); line-height: 1.5; max-width: 56ch; margin: 28px 0 0; color: var(--color-neutral-200); }
.sk-reihe { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 30px; }
.sk-reihe .btn { font-size: 19px; min-height: 56px; padding: 14px 26px !important; }
.sk-zwei { font-weight: 700; color: var(--color-text) !important; text-decoration: none; border-bottom: 3px solid var(--nm-logopink); padding-bottom: 2px; }
.sk-zwei:hover { color: var(--nm-pinkschrift) !important; }
.sk-bsp { margin: 0; font: 500 16px/1.5 var(--font-num); color: var(--color-neutral-200); }
.sk-bsp b { font-size: 22px; font-weight: 600; color: var(--color-text); }
.sk-zusagen { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 32px; margin: 36px 0 0; padding: 18px 0 0; border-top: 2px solid var(--color-text); font-weight: 600; font-size: 18px; }
.sk-zusagen li, .sk-haken li { position: relative; padding-left: 28px; }
.sk-zusagen li::before, .sk-haken li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 13px; height: 7px; border-left: 3px solid var(--nm-pinkschrift); border-bottom: 3px solid var(--nm-pinkschrift); transform: rotate(-45deg); }

.sk-wege { border-bottom: 2px solid var(--color-text); background: var(--color-bg); }
.sk-knoepfe { display: grid; grid-template-columns: repeat(3, 1fr); }
.sk-weg {
  font: inherit; color: var(--color-text); background: var(--color-bg); border: 0; border-left: 2px solid var(--color-text);
  text-align: left; cursor: pointer; padding: clamp(22px, 3vw, 40px) clamp(16px, 2.5vw, 40px); display: flex; flex-direction: column; gap: 10px;
}
.sk-weg:first-child { border-left: 0; padding-left: clamp(16px, 5vw, 80px); }
.sk-weg b { font-family: var(--font-heading); font-weight: 900; font-stretch: 72%; text-transform: uppercase; font-size: clamp(28px, 3vw, 50px); line-height: .95; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.sk-weg b i { font-style: normal; color: var(--nm-pinkschrift); font-size: .8em; transition: transform .25s; }
.sk-weg span { font: 500 15px/1.4 var(--font-num); color: var(--color-neutral-300); }
.sk-weg:hover b { color: var(--nm-pinkschrift); }
.sk-weg[aria-expanded=true] { background: var(--nm-pinkflaeche); color: #fff; }
.sk-weg[aria-expanded=true] b, .sk-weg[aria-expanded=true] b i, .sk-weg[aria-expanded=true] span { color: #fff; }
.sk-weg[aria-expanded=true] b i { transform: rotate(90deg); }
.sk-weg:focus-visible { outline: 3px solid var(--nm-logoblau); outline-offset: -3px; }
.sk-tafel { padding: clamp(36px, 5vw, 72px) clamp(16px, 5vw, 80px); background: var(--nm-flaeche); border-top: 2px solid var(--color-text); }
.sk-tafel[hidden] { display: none; }
.sk-innen { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 96px); align-items: start; }
.sk-sagt { font-size: clamp(19px, 1.7vw, 24px); line-height: 1.45; margin: 0; }
.sk-sagt + .sk-sagt { margin-top: 16px; }
.sk-sagt a { color: inherit; }
.sk-riesig { display: block; font: 600 clamp(72px, 9vw, 152px)/.9 var(--font-num); letter-spacing: -.05em; color: var(--nm-pinkschrift); margin: 10px 0 12px; }
.sk-riesig.sk-tel { font-size: clamp(30px, 8.4vw, 88px); white-space: nowrap; letter-spacing: -.06em; color: var(--color-text); text-decoration: none; }
.sk-riesig.sk-tel:hover { color: var(--nm-pinkschrift); }
.sk-klein { font-size: 16px; color: var(--color-neutral-300); margin: 10px 0 0; }
.sk-bootwahl { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.sk-bootwahl a { font-weight: 800; font-size: 18px; text-decoration: none; color: var(--color-text); padding: 11px 16px; border: 2px solid var(--nm-logopink); background: var(--color-bg); }
.sk-bootwahl a:hover { background: var(--nm-pinkflaeche); border-color: var(--nm-pinkflaeche); color: #fff; }
.sk-haken { list-style: none; margin: 22px 0 0; padding: 0; }
.sk-haken li { padding-top: 10px; padding-bottom: 10px; border-top: 1px solid var(--color-divider); font-size: 18px; }
.sk-gesichter { display: flex; flex-wrap: wrap; gap: 18px 28px; margin-top: 22px; }
.sk-gesichter figure { display: flex; gap: 12px; align-items: center; margin: 0; font-size: 16px; line-height: 1.35; }
.sk-gesichter img { width: 64px; height: 64px; object-fit: cover; }
.sk-gesichter b { display: block; font-weight: 800; font-size: 17px; }
@media (max-width: 860px) {
  .sk-knoepfe, .sk-innen { grid-template-columns: 1fr; }
  .sk-weg, .sk-weg:first-child { border-left: 0; border-top: 2px solid var(--color-text); padding: 20px 16px; }
  .sk-weg:first-child { border-top: 0; }
}
@media (max-width: 700px) {
  .sk-gross { font-size: clamp(40px, 12vw, 64px); line-height: 1.06; }
  .sk-wahl { white-space: normal; }
  .sk-reihe .btn { width: 100%; }
}

/* ---------- 10. Unterer Teil der Startseiten (lib/partials/start-teil.php) ---------- */
.st-w { max-width: 1320px; margin: 0 auto; padding-inline: clamp(16px, 5vw, 80px); }
.st-h2 { font-family: var(--font-heading); font-weight: 900; font-stretch: 72%; text-transform: uppercase; font-size: clamp(36px, 5vw, 80px); line-height: .95; letter-spacing: 0; margin: 0 0 32px; max-width: 18ch; }
.st-vor { font: 600 15px/1.4 var(--font-num); color: var(--nm-pinkschrift); margin: 0 0 14px; }
.st-wertung { background: var(--nm-logoblau); color: var(--nm-tinte); padding: clamp(40px, 6vw, 88px) 0; margin-top: clamp(56px, 8vw, 120px); }
.st-wertung-in { display: grid; grid-template-columns: auto 1fr auto; gap: clamp(24px, 4vw, 64px); align-items: center; }
.st-note { font: 600 clamp(88px, 12vw, 200px)/.8 var(--font-num); letter-spacing: -.05em; margin: 0; color: var(--nm-tinte); }
.st-sterne { display: flex; gap: 6px; margin: 18px 0 0; }
.st-sterne svg { width: clamp(34px, 3.6vw, 52px); height: clamp(34px, 3.6vw, 52px); fill: var(--nm-tinte); }
.st-bew { font-weight: 700; font-size: clamp(21px, 1.9vw, 28px); line-height: 1.25; margin: 0; color: var(--nm-tinte); }
.st-bew small { display: block; font-weight: 400; font-size: 17px; margin-top: 10px; }
.st-bew-links { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.st-bew-links a, .st-links a { font-weight: 700; color: var(--nm-tinte) !important; text-decoration: none; border-bottom: 3px solid var(--nm-pinkflaeche); padding-bottom: 2px; align-self: flex-start; }
.st-links a { color: var(--color-text) !important; }
.st-antworten, .st-mehr { padding: clamp(64px, 9vw, 136px) 0 0; }
.st-ant-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 64px); }
.st-ant { border-top: 2px solid var(--color-text); padding: 22px 0 26px; }
.st-ant h3 { font-family: var(--font-heading); font-weight: 900; font-stretch: 72%; text-transform: uppercase; font-size: clamp(22px, 2vw, 30px); line-height: 1.05; margin: 0 0 12px; }
.st-ant p { margin: 0; font-size: 18px; line-height: 1.6; }
.st-links { display: flex; flex-wrap: wrap; gap: 14px 28px; margin: 28px 0 0; }
.st-menschen { padding-top: clamp(64px, 9vw, 120px); }
.st-mehr-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(20px, 2.5vw, 40px); }
.st-mehr-liste li { border-top: 2px solid var(--color-text); padding: 18px 0 22px; }
.st-mehr-liste a { font-family: var(--font-heading); font-weight: 900; font-stretch: 72%; text-transform: uppercase; font-size: 23px; line-height: 1.05; color: var(--color-text) !important; text-decoration: none; display: block; }
.st-mehr-liste a::after { content: " \2192"; color: var(--nm-pinkschrift); }
.st-mehr-liste a:hover { color: var(--nm-pinkschrift) !important; }
.st-mehr-liste p { margin: 8px 0 0; font-size: 17px; line-height: 1.5; color: var(--color-neutral-200); }
.st-typen { margin: 36px 0 0; padding-top: 20px; border-top: 2px solid var(--color-text); font-size: 17px; line-height: 1.9; color: var(--color-neutral-200); }
.st-typen b { color: var(--color-text); }
.st-typen a { color: var(--color-text) !important; font-weight: 600; text-decoration: none; }
.st-typen a:hover { color: var(--nm-pinkschrift) !important; }
.st-notruf, .st-details { padding-top: clamp(48px, 6vw, 84px); }
.st-details { padding-bottom: clamp(48px, 6vw, 84px); }
@media (max-width: 1000px) { .st-mehr-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } .st-wertung-in { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .st-mehr-liste, .st-ant-liste { grid-template-columns: 1fr; } }

/* seite.css nimmt allen direkten Abschnitten in <main> Grund, Innenabstand
   und setzt einen eigenen Außenabstand (main > section:not(.bande) ...
   !important). Die Abschnitte der Startseite bringen ihren eigenen mit. */
main > section:is(.sk-satz, #nm-vorrang) { background: var(--nm-flaeche) !important; padding-block: clamp(36px, 6vw, 96px) clamp(32px, 4vw, 56px) !important; margin-block: 0 !important; }
main > section:is(.sk-wege, #nm-vorrang) { background: var(--color-bg) !important; margin-block: 0 !important; }
main > section:is(.st-wertung, #nm-vorrang) { background: var(--nm-logoblau) !important; padding-block: clamp(40px, 6vw, 88px) !important; margin-block: clamp(56px, 8vw, 120px) 0 !important; }
main > section:is(.st-antworten, .st-mehr, #nm-vorrang) { margin-block: clamp(64px, 9vw, 136px) 0 !important; padding-block: 0 !important; }
main > div:is(.st-menschen, .st-notruf, .st-details, #nm-vorrang) { margin-block: clamp(48px, 6vw, 96px) 0 !important; }
main > div:is(.st-details, #nm-vorrang) { margin-bottom: clamp(48px, 6vw, 96px) !important; }
.st-antworten .st-h2 { max-width: 24ch; hyphens: manual; overflow-wrap: normal; }
.sk-ende { white-space: nowrap; }

/* Foto- und Filmbänder (Kopf der Produktseiten, Schlussfilm) bleiben dunkel,
   die Schrift darauf ist weiß. Am Handy überschrieb eine allgemeine
   Farbregel sie mit der (jetzt dunklen) Textfarbe. */
.xp-hero, .xp-film { --color-text: #ffffff; color: #fff; }
.xp-hero :is(h1, h2, p, li, span, b, small, dt, dd):not(.btn *):not(.btn),
.xp-film :is(h2, h3, p, span, b, small):not(.btn *):not(.btn) { color: #fff !important; }
.xp-hero .xp-kicker, .xp-film .xp-kicker, .xp-hero .xp-term { color: #f7a9cb !important; }
.xp-film-tel a { color: #fff !important; }
.xp-hero .btn-light, .xp-film .btn-light, .xp-daily-out .btn-light {
  background: transparent !important; border: 2px solid #fff !important; color: #fff !important;
}
.xp-hero .btn-light:hover, .xp-film .btn-light:hover, .xp-daily-out .btn-light:hover { background: #fff !important; color: var(--nm-tinte) !important; }

/* Erklärung zu ":is(..., #nm-vorrang)": #nm-vorrang gibt es nicht, es hebt nur
   die Gewichtung der Regel auf die einer Kennung. Nötig, weil seite.css und
   offen.css mit langen :not()-Ketten und !important arbeiten; ohne das
   gewannen sie trotz späterer Ladung. */

/* Am Handy setzt lib/partials/kopf/site-nav.php alle Absätze auf 18 px und
   h1/h2/h3 auf feste Größen (!important). Satz, große Zahlen und die kleine
   H1-Zeile der Startseite sind bewusst anders groß. */
@media screen and (max-width: 820px) {
  main p:is(.sk-gross, #nm-vorrang) { font-size: clamp(38px, 11vw, 64px) !important; line-height: 1.06 !important; }
  main :is(.sk-h1, #nm-vorrang) { font-size: 15px !important; line-height: 1.4 !important; }
  main p:is(.st-note, #nm-vorrang) { font-size: clamp(80px, 26vw, 120px) !important; line-height: .85 !important; }
  main :is(.sk-riesig, #nm-vorrang) { font-size: clamp(64px, 20vw, 110px) !important; line-height: .9 !important; }
  main :is(.sk-riesig.sk-tel, #nm-vorrang) { font-size: clamp(28px, 8.4vw, 44px) !important; }
  main p:is(.xp-day, #nm-vorrang) { font-size: clamp(56px, 16vw, 88px) !important; line-height: .95 !important; }
  main p:is(.sk-vor, .sk-bsp, .st-vor, #nm-vorrang) { font-size: 15px !important; }
  main :is(.st-h2, #nm-vorrang) { font-size: clamp(34px, 10vw, 48px) !important; line-height: 1 !important; }
  main :is(.st-ant h3, #nm-vorrang) { font-size: 22px !important; line-height: 1.1 !important; }
}
/* Die feste Leiste unten auf den Produktseiten (Handy): solide statt
   halbdurchsichtig, der Knopf trägt die Schrift. */
.xp-dock .btn { box-shadow: 0 10px 30px -10px rgba(11, 42, 64, .5) !important; }
/* Schnellabschluss-Leiste am Handy (seite.css .vk-sticky): Grund und Schrift
   aus dem Look, ohne Durchscheinen, damit nichts dahinter die Schrift stört. */
.vk-sticky { background: var(--nm-tinte) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-top-color: transparent !important; }
.vk-sticky p { color: #fff !important; }
.vk-sticky p + p { color: #c7e6f7 !important; }

/* Alle festen Schnellabschluss-Leisten am Handy (vk-, mb-, sb-, ... -sticky
   je Produktseite, gleicher Aufbau): dunkelblauer Grund, weiße Schrift. */
:is(.vk-sticky, .mb-sticky, .bb-sticky, .el-sticky, .ga-sticky, .hb-sticky, .kt-sticky, .my-sticky, .rb-sticky, .sb-sticky, .sd-sticky, .sj-sticky, .sy-sticky, .tr-sticky, .ws-sticky, #nm-vorrang) {
  background: var(--nm-tinte) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
:is(.vk-sticky, .mb-sticky, .bb-sticky, .el-sticky, .ga-sticky, .hb-sticky, .kt-sticky, .my-sticky, .rb-sticky, .sb-sticky, .sd-sticky, .sj-sticky, .sy-sticky, .tr-sticky, .ws-sticky, #nm-vorrang) p { color: #fff !important; }
:is(.vk-sticky, .mb-sticky, .bb-sticky, .el-sticky, .ga-sticky, .hb-sticky, .kt-sticky, .my-sticky, .rb-sticky, .sb-sticky, .sd-sticky, .sj-sticky, .sy-sticky, .tr-sticky, .ws-sticky, #nm-vorrang) p + p { color: #c7e6f7 !important; }

/* Marken auf Karten und Bildern (fester dunkler Grund): weiße Schrift. */
:is(.dw .marke, .rl .fahne, .wb .tage, .wk-fahne, .wk-zoom button, .lb-rahmen a, #nm-vorrang) { color: #fff !important; }

/* Kleine Grautöne, die knapp unter 4,5 : 1 lagen (Messung 12.10.2026). */
:is(.bk-hint p, .nmmb-datum, .we-zahl, .bk-chip-group, .jsv-gruppe th, .nmmb-rubrik, #nm-vorrang) { color: var(--color-neutral-300) !important; }
/* Kopier- und Download-Knöpfe (Verlinken, Pressematerial): Schrift bleibt
   beim Darüberfahren dunkel, sonst Akzentblau auf hellblau (4 : 1). */
:is(.pm-kopieren, .vl-kopieren, #nm-vorrang):hover { color: var(--color-accent-100) !important; }

/* Seitenabstand auf den Startseiten (Live-Sicht am Handy, 13.10.2026):
   seite.css nimmt direkten Abschnitten in <main> den Seitenrand
   (padding-inline: 0 !important), und <main> selbst hat auf den Startseiten
   keinen, weil dort .spalte-Abschnitte stehen. Satz und die automatische
   Inhaltsliste (.nm-inhalt aus fluid.js) standen dadurch am Fensterrand. */
main > section:is(.sk-satz, #nm-vorrang) { padding-inline: clamp(16px, 5vw, 80px) !important; }
body:has(.sk-satz) main > :is(.nm-inhalt, #nm-vorrang) { margin-inline: clamp(16px, 5vw, 80px) !important; max-width: none !important; }
@media screen and (max-width: 820px) {
  main p:is(.sk-gross, #nm-vorrang) { font-size: clamp(34px, 9.6vw, 60px) !important; }
}