/* ═══ 00-nav ═══ */
/* ═══ 00 · NAV — Styles ═══
   EBENE "glass": backdrop-filter auf der Pille. Ohne die Ebene ist die Pille
   fast deckend weiß — backdrop-filter über bewegtem Inhalt (Aurora) muss den
   Hintergrund jeden Frame neu weichzeichnen, das wird gemessen. */
.sk-nav {
  position: fixed; top: 16px; left: 0; right: 0; z-index: 50;
  padding: 0 24px;
  display: flex; justify-content: center;
  pointer-events: none;
}
/* Die Fläche der Pille steht als Variablen (--nav-*): Seit 08.10.2026 gibt es zwei Träger — das ::before und,
   auf Unterseiten mit Abschnitts-Nav, die Form aus Dock + Zunge (.sk-nav-form, sections/00-nav/abschnitte).
   Hell, Glas und Dunkel setzen nur die Variablen, eine Quelle statt einer Handkopie. */
.sk-nav-inner {
  --nav-flaeche: rgba(255, 255, 255, 0.94);
  --nav-rand: rgba(9, 9, 11, 0.08);
  --nav-schatten: 0 1px 0 0 rgba(255, 255, 255, 0.8) inset,
                  0 18px 44px -16px rgba(9, 9, 11, 0.22),
                  0 3px 10px -2px rgba(109, 40, 217, 0.10);
  --nav-filter: none;
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: 14px;
  padding: 9px 10px 9px 20px;
  border-radius: var(--radius-pill);
  pointer-events: auto;
  transition: padding 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.sk-nav-inner::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background: var(--nav-flaeche);
  border: 1px solid var(--nav-rand);
  box-shadow: var(--nav-schatten);
  backdrop-filter: var(--nav-filter);
  -webkit-backdrop-filter: var(--nav-filter);
}
html[data-layers~="glass"] .sk-nav-inner {
  --nav-flaeche: rgba(255, 255, 255, 0.85);
  --nav-filter: blur(24px) saturate(180%);
}

.sk-nav-logo { display: inline-flex; align-items: center; font-size: 16px; font-weight: 700; letter-spacing: -0.025em; color: var(--color-heading); }
/* Echtes Logo aus /logo (Verlaufskachel mit Funkel-Stern). Rundung 8px = rx 12/40 des SVG,
   damit der Schatten der Kachelform folgt. alt="" — der Link trägt Text + aria-label. */
.sk-nav-logo-icon {
  width: 26px; height: 26px; flex-shrink: 0;
  border-radius: 8px;
  box-shadow: 0 4px 10px -2px rgba(109, 40, 217, 0.4);
}

.sk-nav-sep { width: 1px; height: 18px; background: rgba(9, 9, 11, 0.12); }
.sk-nav-links { position: relative; display: flex; align-items: center; gap: 2px; font-size: 16px; font-weight: 500; }
.sk-nav-links a {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center;
  padding: 9px 15px; border-radius: var(--radius-pill);
  color: var(--color-body); white-space: nowrap;
  transition: color var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease);
}
/* Hover-Fläche macht der gleitende Griff (.sk-nav-pill), nicht der Link selbst */
@media (hover: hover) and (pointer: fine) { .sk-nav-links a:hover { color: var(--color-heading); } }
.sk-nav-links a.is-active { color: var(--color-brand-darker); }
.sk-nav-cta { padding: 10px 18px; min-height: 38px; }

/* Dunkles Glas, solange die Preise das Thema auf dunkel schalten (08-pricing).
   Zweiter Träger `.sk-wisch-dunkel`: Seit dem Nav-Wisch (18.09.2026) läuft die Kante durch das Dock,
   und der dunkle Nav-KLON im Wisch-Overlay braucht dieselben Werte, während die Seite noch hell ist —
   eine Quelle statt einer Handkopie (wie in global.css und pricing.css). Die frühere Klasse `nav-dark`
   (Dock kippt als Ganzes) ist damit weg. Steht NACH der glass-Regel: gleiche Spezifität, spätere gewinnt. */
:is(html.theme-dark, .sk-wisch-dunkel) .sk-nav-inner {
  --nav-flaeche: rgba(20, 19, 28, 0.78);
  --nav-rand: rgba(255, 255, 255, 0.08);
  --nav-schatten: 0 1px 0 0 rgba(255, 255, 255, 0.05) inset,
                  0 14px 40px -14px rgba(0, 0, 0, 0.65),
                  0 3px 10px -2px rgba(124, 58, 237, 0.18);
}
:is(html.theme-dark, .sk-wisch-dunkel) .sk-nav-logo,
:is(html.theme-dark, .sk-wisch-dunkel) .sk-nav-links a { color: rgba(255, 255, 255, 0.92); }
@media (hover: hover) and (pointer: fine) { :is(html.theme-dark, .sk-wisch-dunkel) .sk-nav-links a:hover { color: #fff; } }
:is(html.theme-dark, .sk-wisch-dunkel) .sk-nav-sep { background: rgba(255, 255, 255, 0.14); }

/* Touch-Ziel: Das Logo ist nur 26 px hoch. 44 px Mindesthöhe, die negative Margin
   gibt die 18 px wieder ab — die Pille bleibt gleich hoch. */
@media (max-width: 900px), (pointer: coarse) {
  .sk-nav-logo { min-height: 44px; margin-block: -9px; }
}

.sk-nav-links a:focus-visible,
.sk-nav-drop-btn:focus-visible,
.sk-nav-burger:focus-visible { outline: 2px solid var(--color-brand-main); outline-offset: 2px; }
/* Aktueller Bereich: eigene Seite (page), übergeordnete Seite einer Referenz/eines Beitrags (true),
   Leistungen-Knopf auf einer Leistungsseite (.is-current, nav.html.mjs). Die Pille setzt nav.js. */
.sk-nav-links a[aria-current],
.sk-nav-drop-btn.is-current { color: var(--color-brand-darker); }

/* Touch-Ziele Tablet/Touch: Links und Leistungen-Knopf 44 px hoch (sonst 40), der negative Rand gibt
   die 4 px wieder ab — Leiste, Griff und Dock behalten ihre Höhe, nur die Trefferfläche wächst. */
@media (max-width: 1024px), (pointer: coarse) {
  .sk-nav-links > a, .sk-nav-drop-btn { min-height: 44px; margin-block: -2px; }   /* nur die Leiste, nicht das Panel */
  .sk-nav-cta { min-height: 44px; margin-block: -1px; }   /* 42 → 44 */
}

/* ─── Leistungen-Menü (erscheint erst, wenn es mindestens eine Leistungsseite in PAGES gibt) ───
   Knopf sieht aus wie die Links daneben. Panel = gleiche Glaskarte wie die Pille, nur eckiger. */
.sk-nav-drop { position: relative; }
.sk-nav-drop-btn {
  font: inherit; color: var(--color-body); background: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px 9px 15px;
  border-radius: var(--radius-pill);
  transition: color var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease);
}
.sk-nav-drop-btn { position: relative; z-index: 1; }
@media (hover: hover) and (pointer: fine) { .sk-nav-drop-btn:hover { color: var(--color-heading); } }
.sk-nav-drop.is-open .sk-nav-drop-btn { color: var(--color-heading); }
@media (hover: hover) and (pointer: fine) { .sk-nav-links .sk-nav-drop-panel a:hover { background: var(--color-brand-subtle); } }
.sk-nav-drop-btn svg { width: 10px; height: 10px; opacity: .6; flex-shrink: 0; transition: transform var(--duration-fast) var(--ease); }
.sk-nav-drop.is-open .sk-nav-drop-btn svg { transform: rotate(180deg); }
.sk-nav-drop-panel {
  position: absolute; top: calc(100% + 18px); left: 50%; translate: -50% 0; width: 320px;
  display: grid; gap: 2px; padding: 8px;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(9, 9, 11, 0.08); border-radius: 18px;
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.8) inset,
              0 24px 48px -18px rgba(9, 9, 11, 0.24),
              0 4px 12px -2px rgba(109, 40, 217, 0.10);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease), visibility 0s linear var(--duration-fast);
}
.sk-nav-drop-panel::before { content: ''; position: absolute; left: 0; right: 0; top: -20px; height: 20px; } /* Hover-Brücke über die Lücke */
.sk-nav-drop.is-open .sk-nav-drop-panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (hover: hover) and (pointer: fine) {
  .sk-nav-drop:hover .sk-nav-drop-panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .sk-nav-drop:hover .sk-nav-drop-btn svg { transform: rotate(180deg); }
}
.sk-nav-links .sk-nav-drop-panel a {
  display: grid; gap: 1px; justify-items: start; padding: 11px 14px; min-height: 44px;
  border-radius: 12px; color: var(--color-body);
}
.sk-nav-drop-panel strong { font-size: 16px; font-weight: 600; color: var(--color-heading); }
.sk-nav-drop-panel span { font-size: 16px; font-weight: 400; color: var(--color-text-muted); }
@media (hover: hover) and (pointer: fine) { .sk-nav-links .sk-nav-drop-panel a:hover strong { color: var(--color-brand-main); } }
.sk-nav-links .sk-nav-drop-panel a[aria-current="page"] strong { color: var(--color-brand-main); }

:is(html.theme-dark, .sk-wisch-dunkel) .sk-nav-drop-btn { color: rgba(255, 255, 255, 0.92); }
@media (hover: hover) and (pointer: fine) { :is(html.theme-dark, .sk-wisch-dunkel) .sk-nav-drop-btn:hover { color: #fff; } }
:is(html.theme-dark, .sk-wisch-dunkel) .sk-nav-drop.is-open .sk-nav-drop-btn,
:is(html.theme-dark, .sk-wisch-dunkel) .sk-nav-links a[aria-current],
:is(html.theme-dark, .sk-wisch-dunkel) .sk-nav-drop-btn.is-current,
:is(html.theme-dark, .sk-wisch-dunkel) .sk-nav-links a.is-active { color: #fff; }
:is(html.theme-dark, .sk-wisch-dunkel) .sk-nav-drop-panel {
  background: rgba(20, 19, 28, 0.94);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.05) inset,
              0 24px 48px -18px rgba(0, 0, 0, 0.7),
              0 4px 12px -2px rgba(124, 58, 237, 0.18);
}
@media (hover: hover) and (pointer: fine) { :is(html.theme-dark, .sk-wisch-dunkel) .sk-nav-links .sk-nav-drop-panel a:hover { background: rgba(255, 255, 255, 0.06); } }
:is(html.theme-dark, .sk-wisch-dunkel) .sk-nav-drop-panel strong { color: #fff; }
:is(html.theme-dark, .sk-wisch-dunkel) .sk-nav-drop-panel span { color: rgba(255, 255, 255, 0.6); }
@media (hover: hover) and (pointer: fine) { :is(html.theme-dark, .sk-wisch-dunkel) .sk-nav-links .sk-nav-drop-panel a:hover strong { color: #C4B5FD; } }

/* ─── Gleit-Dock (aus v4, 16.09.2026 zurückgeholt) ─── */

/* Einklappen beim Scrollen: html.sk-nav-kompakt setzt nav.js, sobald der Seitenanfang aus dem Bild ist */
.sk-nav-logo-text {
  display: inline-block; max-width: 120px; margin-left: 10px;
  overflow: hidden; white-space: nowrap;
  transition: max-width 420ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 260ms var(--ease),
              margin-left 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
html.sk-nav-kompakt .sk-nav-logo-text { max-width: 0; margin-left: 0; opacity: 0; }
html.sk-nav-kompakt .sk-nav-inner { padding: 7px 8px 7px 14px; }
/* NAV-11: Im kompakten Dock ist das Logo nur 26 px breit → 44 px Trefferfläche, der negative Rand gibt sie wieder ab */
@media (min-width: 768px) and (max-width: 1024px), (min-width: 768px) and (pointer: coarse) {
  html.sk-nav-kompakt .sk-nav-logo { padding-inline: 9px; margin-inline: -9px; }
}

/* Gleitender Griff: ruht auf dem aktiven Link, folgt beim Hover dem Zeiger */
.sk-nav-pill {
  position: absolute; top: 0; bottom: 0; left: 0; z-index: 0;
  width: 0;
  border-radius: var(--radius-pill);
  background: var(--color-brand-subtle);
  border: 1px solid rgba(109, 40, 217, 0.18);
  opacity: 0; pointer-events: none;
  transition: transform 480ms cubic-bezier(0.34, 1.3, 0.3, 1),
              width 480ms cubic-bezier(0.34, 1.3, 0.3, 1),
              opacity 220ms var(--ease);
}
.sk-nav-pill.is-on { opacity: 1; }

/* Zählwerk »03 / 07«: Ziffernstreifen rollt zur Nummer des Abschnitts (--d setzt nav.js) */
.sk-nav-count {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  font-family: var(--font-mono); font-size: 16px; font-weight: 500; letter-spacing: 0.05em;
  color: var(--color-text-muted); font-variant-numeric: tabular-nums;
}
.sk-nav-count-cur { display: inline-flex; color: var(--color-brand-main); }
.sk-nav-count-clip { display: block; height: 1em; width: 1ch; overflow: hidden; line-height: 1; }
.sk-nav-count-cur > span:first-child { line-height: 1; }
.sk-nav-count-strip {
  display: block;
  transform: translateY(calc(var(--d, 0) * -1em));
  transition: transform 520ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.sk-nav-count-strip span { display: block; height: 1em; line-height: 1; text-align: center; }

:is(html.theme-dark, .sk-wisch-dunkel) .sk-nav-pill { background: rgba(139, 92, 246, 0.24); border-color: rgba(167, 139, 250, 0.35); }
:is(html.theme-dark, .sk-wisch-dunkel) .sk-nav-count { color: rgba(255, 255, 255, 0.55); }
:is(html.theme-dark, .sk-wisch-dunkel) .sk-nav-count-cur { color: #A78BFA; }

/* Seiten ohne nummerierte Abschnitte (Rechtstexte, Referenz-Detailseiten, News): Zählwerk UND sein
   Trenner fallen weg. `data-num` setzt build.mjs beim Zusammenbauen — die Regel greift deshalb ohne
   JavaScript und ohne Flackern. Seit 18.09.2026 rendert nav.html.mjs das Zählwerk auf jeder Seite,
   ohne diese Regel bliebe dort ein Trennstrich ohne Inhalt stehen. */
html:not(:has([data-num])) :is(.sk-nav-count, .sk-nav-sep--count) { display: none; }

/* Zählwerk braucht Platz: unter 1025 px nur Logo, Links und Knopf */
@media (max-width: 1024px) {
  .sk-nav-count, .sk-nav-sep--count { display: none; }
}
/* NAV-1: Tablet hoch / Handy quer 768–939 px — das Dock war 892 px breit und lief über beide Ränder.
   Nur die Bildmarke (wie nach dem Scrollen), engere Links, Knopf ohne Pfeil. */
@media (min-width: 768px) and (max-width: 939px) {
  .sk-nav { padding: 0 12px; }
  .sk-nav-inner, html.sk-nav-kompakt .sk-nav-inner { gap: 10px; padding: 9px 8px 9px 16px; }
  .sk-nav-logo-text { max-width: 0; margin-left: 0; opacity: 0; }
  .sk-nav-logo { padding-inline: 9px; margin-inline: -9px; flex-shrink: 0; }
  .sk-nav-links > a { padding-inline: 11px; }
  .sk-nav-drop-btn { padding-inline: 11px 9px; }
  .sk-nav-cta { padding-inline: 14px; flex-shrink: 0; }
  .sk-nav-cta svg { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sk-nav-count-strip, .sk-nav-logo-text, .sk-nav-inner { transition: none; }
  .sk-nav-pill { transition: opacity 220ms var(--ease); }
}

/* ─── Mobiles Menü (bis 767 px) ───
   Seit 26.10.2026 (Plan docs/superpowers/plans/2026-10-26-handy-nav.md, Wunsch Tunahan): Dock ohne „Projekt anfragen“, 48 px hoch,
   Menü-Knopf mit Wort in einer zart lila Pille (Sprache des Griffs). Das Menü ist eine Vollbild-Fläche unter dem Dock statt einer
   Karte über dunklem Schleier: Vorhang von oben, Einträge laufen je 80 ms versetzt ein (--i aus nav.html.mjs), Schließen fährt
   den Vorhang zurück (.is-zu, nav.js setzt hidden danach). Vorher: _LOESCHEN/vor-handy-nav-2026-10/. */
.sk-nav-burger { display: none; }
.sk-nav-sheet[hidden] { display: none; } /* display-Regeln überstimmen sonst [hidden] */

@media (max-width: 767px) {
  .sk-nav { top: 12px; padding: 0 12px; }
  /* Dock über dem Vollbild-Menü (beide liegen im Stapel von .sk-nav, z 50) */
  .sk-nav-inner { z-index: 2; }
  /* 4 + 40 + 4 = 48 px. Logo und „Menü“ rücken zusammen (Tunahan 26.10.2026): 2 px Lücke + 10 px Innenabstand des Knopfs
     = 12 px Luft zwischen Schriftzug bzw. Bildmarke und Wort, oben wie im kompakten Dock */
  .sk-nav-inner, html.sk-nav-kompakt .sk-nav-inner { gap: 2px; padding: 4px 4px 4px 14px; }
  .sk-nav-links, .sk-nav-sep, .sk-nav-cta { display: none; }
  .sk-nav-logo { margin-right: auto; margin-block: -2px; flex-shrink: 0; }   /* 44 px Trefferfläche im 40-px-Inhalt */
  html.sk-nav-kompakt .sk-nav-logo { padding-inline: 9px; margin-left: -9px; }   /* NAV-11: 44 px Trefferfläche */
  /* … rechts gibt der Rand sie wieder ab, sonst stünde „Menü“ 9 px weiter weg (nicht auf Zungen-Seiten: dort schiebt auto den Knopf nach rechts) */
  html.sk-nav-kompakt .sk-nav:not(.sk-nav--ab) .sk-nav-logo { margin-right: -9px; }
  /* Beim offenen Menü steht die Wortmarke wieder da, auch im kompakten Dock — oben links „webtastic.io“ wie ein Seitenkopf */
  html.sk-nav-sheet-offen .sk-nav-logo-text { max-width: 120px; margin-left: 10px; opacity: 1; }

  /* Menü-Knopf: nur Wort + Striche, ohne Fläche und Rand (Tunahan 26.10.2026, die lila Pille war ihm zu viel).
     Optisch 40 px, das ::after gibt 44 px Trefferfläche; rechts 10 px Innenabstand → die Striche stehen 14 px vor der
     Dock-Kante, so weit wie das Logo links. Links 10 px: zusammen mit der 2-px-Lücke 12 px zum Logo. Offen werden die Striche zum ✕, das Wort bleibt — die Breite springt nicht. */
  .sk-nav-burger {
    position: relative; flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 10px;
    height: 40px; padding: 0 10px;
    font: inherit; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; line-height: 1;
    color: var(--color-heading);   /* schwarz wie das Logo, nicht lila (Tunahan 26.10.2026) */
    background: none; border: 0; border-radius: var(--radius-pill);
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: color var(--duration-fast) var(--ease), opacity 160ms var(--ease), transform 160ms var(--ease);
  }
  .sk-nav-burger::after { content: ''; position: absolute; inset: -2px; border-radius: inherit; }
  .sk-nav-burger:active { transform: scale(0.96); opacity: 0.7; }
  @media (hover: hover) and (pointer: fine) { .sk-nav-burger:hover { opacity: 0.7; } }
  .sk-nav-burger-icon { display: inline-grid; gap: 4px; width: 16px; }
  .sk-nav-burger-icon span { display: block; height: 2px; border-radius: 2px; background: currentColor; transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1); }
  .sk-nav-burger[aria-expanded="true"] .sk-nav-burger-icon span:first-child { transform: translateY(3px) rotate(45deg); }
  .sk-nav-burger[aria-expanded="true"] .sk-nav-burger-icon span:last-child { transform: translateY(-3px) rotate(-45deg); }
  :is(html.theme-dark, .sk-wisch-dunkel) .sk-nav-burger { color: #fff; }

  /* Vollbild-Menü: Seitengrund mit stillem Schein unten (statisch), folgt dem Thema */
  .sk-nav-sheet {
    position: fixed; inset: 0; z-index: 1;
    pointer-events: auto;
    overflow-y: auto; overscroll-behavior: contain;
    padding: 92px 24px calc(24px + env(safe-area-inset-bottom, 0px));
    background:
      radial-gradient(120% 50% at 100% 100%, rgba(139, 92, 246, 0.13), transparent 65%),
      radial-gradient(100% 42% at 0% 100%, rgba(59, 130, 246, 0.09), transparent 62%),
      var(--color-bg-card);
    animation: sk-nav-sheet-auf 480ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .sk-nav-sheet.is-zu { animation: sk-nav-sheet-zu 320ms cubic-bezier(0.64, 0, 0.78, 0) forwards; pointer-events: none; }
  /* NAV-13: Seite hinter dem Menü gesperrt, auch ohne Lenis (Rechtsseiten) */
  html.sk-nav-sheet-offen { overflow: clip; }
  /* Feste Wisch-Overlays (z 51) liegen über der Nav — mitten im Hell→Dunkel-Wechsel stünde sonst der dunkle Nav-Klon über dem Menü */
  html:has(#sk-nav-sheet:not([hidden])) :is(.sk-wisch, .sk-wischu) { visibility: hidden; }

  /* Die Liste reicht 14 px in den Rand: Text fluchtet mit 24 px, die Fläche des aktuellen Eintrags hat Luft */
  .sk-nav-sheet nav { display: flex; flex-direction: column; min-height: 100%; margin-inline: -14px; transition: opacity 160ms var(--ease); }
  .sk-nav-sheet.is-zu nav { opacity: 0; }
  .sk-nav-sheet :is(nav > a, .sk-nav-sheet-label, .sk-nav-sheet-gruppe > a) {
    animation: sk-nav-eintrag 520ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
    animation-delay: calc(120ms + var(--i, 0) * 80ms);
  }
  .sk-nav-sheet nav > a:not(.btn) {
    display: flex; align-items: center; min-height: 52px; padding: 4px 14px;
    border-radius: 16px;
    font-size: 30px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.15;
    color: var(--color-heading);
  }
  /* Gruppe „Leistungen“: Label wie .mono-label, darunter eingerückt an einer Haarlinie */
  .sk-nav-sheet-label {
    margin-top: 10px; padding: 6px 14px;
    font-family: var(--font-mono); font-size: 16px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--color-text-muted);
  }
  .sk-nav-sheet-gruppe { display: grid; margin: 2px 0 12px 14px; border-left: 1px solid var(--color-border); }
  .sk-nav-sheet-gruppe > a {
    display: flex; align-items: center; min-height: 44px; padding: 0 14px 0 18px;
    border-radius: 0 14px 14px 0;
    font-size: 19px; font-weight: 500; letter-spacing: -0.01em; color: var(--color-body);
  }
  .sk-nav-sheet-luft { flex: 1 0 28px; }   /* schiebt den Knopf nach unten in Daumenreichweite, mindestens 28 px Abstand */
  .sk-nav-sheet .btn { margin-inline: 14px; min-height: 52px; }

  .sk-nav-sheet a:not(.btn)[aria-current] { background: var(--color-brand-subtle); color: var(--color-brand-darker); }
  .sk-nav-sheet a:not(.btn):focus-visible { outline: 2px solid var(--color-brand-main); outline-offset: -2px; }
  @media (hover: hover) and (pointer: fine) { .sk-nav-sheet a:not(.btn):hover { background: var(--color-brand-subtle); color: var(--color-brand-darker); } }
  /* GLOBAL-4 (19.10.2026): eigene Tipp-Rückmeldung statt Browser-Kasten — der gehaltene Eintrag zeigt den Maus-Hover-Ton */
  .sk-nav-sheet a { -webkit-tap-highlight-color: transparent; }
  @media (hover: none) {
    .sk-nav-sheet a:not(.btn):active { background: var(--color-brand-subtle); color: var(--color-brand-darker); }
    :is(html.theme-dark, .sk-wisch-dunkel) .sk-nav-sheet a:not(.btn):active { background: rgba(255, 255, 255, 0.08); color: #fff; }
  }

  /* NAV-16: im Dunkeln deckend, Grund = Seitengrund (#0B0A0F wie global.css unter html.theme-dark) */
  :is(html.theme-dark, .sk-wisch-dunkel) .sk-nav-sheet {
    background:
      radial-gradient(120% 50% at 100% 100%, rgba(139, 92, 246, 0.22), transparent 65%),
      radial-gradient(100% 42% at 0% 100%, rgba(59, 130, 246, 0.14), transparent 62%),
      #0B0A0F;
  }
  :is(html.theme-dark, .sk-wisch-dunkel) .sk-nav-sheet nav > a:not(.btn) { color: #fff; }
  :is(html.theme-dark, .sk-wisch-dunkel) .sk-nav-sheet-gruppe > a { color: rgba(255, 255, 255, 0.78); }
  :is(html.theme-dark, .sk-wisch-dunkel) .sk-nav-sheet a:not(.btn)[aria-current] { background: rgba(139, 92, 246, 0.24); color: #fff; }
  @media (hover: hover) and (pointer: fine) { :is(html.theme-dark, .sk-wisch-dunkel) .sk-nav-sheet a:not(.btn):hover { background: rgba(255, 255, 255, 0.08); color: #fff; } }
  :is(html.theme-dark, .sk-wisch-dunkel) .sk-nav-sheet-label { color: rgba(255, 255, 255, 0.6); }
  :is(html.theme-dark, .sk-wisch-dunkel) .sk-nav-sheet-gruppe { border-color: rgba(255, 255, 255, 0.12); }
}
/* Kurze Handys (iPhone SE, 548 px): etwas kleinere Seiten-Einträge — der Knopf lugt dann unten an und zeigt, dass das Menü weitergeht */
@media (max-width: 767px) and (max-height: 600px) {
  .sk-nav-sheet { padding-top: 84px; }
  .sk-nav-sheet nav > a:not(.btn) { min-height: 48px; font-size: 27px; }
  .sk-nav-sheet-label { margin-top: 6px; }
}
/* NAV-18: Handy quer — zwei Spalten, alle Einträge ohne Scrollen (Seiten links mit dem Knopf, Leistungen rechts) */
@media (max-width: 767px) and (max-height: 520px) {
  .sk-nav-sheet { padding-top: 76px; padding-bottom: 16px; }
  .sk-nav-sheet nav { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; align-content: start; min-height: 0; }
  .sk-nav-sheet nav > a:not(.btn) { grid-column: 1; min-height: 44px; font-size: 24px; }
  .sk-nav-sheet-label, .sk-nav-sheet-gruppe { grid-column: 2; }
  .sk-nav-sheet-label { grid-row: 1; margin-top: 0; }
  .sk-nav-sheet-gruppe { grid-row: 2 / span 5; align-self: start; margin-bottom: 0; }
  .sk-nav-sheet-luft { display: none; }
  .sk-nav-sheet .btn { grid-column: 1; margin-top: 12px; }
}
/* NAV-10: Auf flachen Fenstern (Handy quer) gleitet die Nav beim Runterscrollen weg, beim Hochscrollen sofort zurück
   (nav.js setzt html.sk-nav-weg; bei offenem Menü nie) */
@media (max-height: 520px) {
  .sk-nav { transition: transform 280ms var(--ease); }
  html.sk-nav-weg .sk-nav { transform: translateY(-160px); }
}
@keyframes sk-nav-sheet-auf { from { clip-path: inset(0 0 100% 0 round 0 0 40px 40px); } to { clip-path: inset(0 0 0 0 round 0); } }
@keyframes sk-nav-sheet-zu { from { clip-path: inset(0 0 0 0 round 0); } to { clip-path: inset(0 0 100% 0 round 0 0 40px 40px); } }
@keyframes sk-nav-eintrag { from { opacity: 0; transform: translateY(18px); } }
@media (prefers-reduced-motion: reduce) {
  .sk-nav-sheet, .sk-nav-sheet :is(nav > a, .sk-nav-sheet-label, .sk-nav-sheet-gruppe > a) { animation: none; }
  .sk-nav-sheet nav, .sk-nav-burger, .sk-nav-burger-icon span, .sk-nav { transition: none; }
}

/* ═══ 30-seitenkopf ═══ */
/* ═══ 30 · SEITENKOPF (Unterseiten) — Styles ═══
   Linksbündiger Kopf mit großem h1. Hintergrund = die Aurora aus 01-hero (gleiche Verläufe,
   halbe Auflösung, blur + invert). Seit 24.09.2026 bewegt (Ebene drift, nur transform) und stärker
   sichtbar; läuft nach unten und zur Textseite hin aus.
   Ebenen: aurora (html[data-layers~="aurora"]) · rise (global.css). */

.sk-b-kopf {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 64svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 172px 0 56px;               /* 172 = Platz für die schwebende Nav (wie 50-seitenkopf-referenzen) */
  background: var(--color-bg-light);
}
.sk-b-kopf--klein { min-height: 48svh; }

/* ── Aurora ──
   Verläufe als Token aus global.css (--aurora-weiss, --aurora-verlauf = die Werte aus 01-hero). Das ::after
   (difference) gleitet seit 24.09.2026 wie im Hero. Maske: zwei Verläufe geschnitten — nach links (Textseite) und nach unten aus. */
.sk-b-kopf-aurora {
  display: none;
  position: absolute;
  left: -10px; top: -10px;
  width: calc(50% + 10px);
  height: calc(50% + 10px);
  transform: scale(2);
  transform-origin: 0 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  background-image: var(--aurora-weiss), var(--aurora-verlauf);
  background-size: 300% 200%;
  background-position: 50% 50%, 50% 50%;
  filter: blur(5px) invert(1);
  opacity: 1;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 45%), linear-gradient(to bottom, #000 38%, transparent 96%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent 0%, #000 45%), linear-gradient(to bottom, #000 38%, transparent 96%);
          mask-composite: intersect;
}
html[data-layers~="aurora"] .sk-b-kopf-aurora { display: block; }
.sk-b-kopf-aurora::after {
  content: '';
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 300%;
  background-image: var(--aurora-weiss), var(--aurora-verlauf);
  background-size: calc(200% / 3) 100%;
  mix-blend-mode: difference;
}
/* Seit 24.09.2026 bewegt (Manuel, Loom „Animationen“ 5:55–6:30: „könnte man den nicht auch bewegen lassen und ein
   bisschen mehr zeigen … er ist schon sehr verschwunden“). Nur Transform → läuft auf dem Compositor. */
html[data-layers~="drift"] .sk-b-kopf-aurora::after {
  will-change: transform;
  animation: sk-aurora-drift 40s linear infinite;
}
/* Außer Sicht angehalten (KOPF-4, 19.10.2026): seitenkopf.js setzt .sk-b-kopf--weg, solange der Kopf nicht im Bild ist —
   sonst lief die 40-s-Schleife auf jeder Unterseite dauernd weiter (60 Bilder/s am Handy). Der html-Präfix ist Pflicht: Die
   Drift-Regel darüber hat 0,2,2, ihre animation-Kurzform setzt play-state sonst wieder auf running. Bedingung wie HERO-8:
   Desktop mit Maus bleibt unberührt. */
@media (max-width: 1279px), (hover: none) and (pointer: coarse) {
  html[data-layers~="drift"] .sk-b-kopf--weg .sk-b-kopf-aurora::after { animation-play-state: paused; }
}

/* ── Inhalt ── */
.sk-b-kopf > .container { position: relative; z-index: 1; width: 100%; }
.sk-b-kopf-raster { display: grid; grid-template-columns: minmax(0, 1fr); }
.sk-b-kopf-text { max-width: 1040px; }

.sk-b-kopf-titelblock .eyebrow { margin-bottom: 28px; }
.sk-b-kopf-titel {
  font-size: clamp(48px, 5.6vw, 104px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.sk-b-kopf--klein .sk-b-kopf-titel { font-size: clamp(44px, 4.8vw, 88px); }

.sk-b-kopf-sub {
  max-width: 32em;                     /* ≤ 70 Zeichen je Zeile (60ch ergaben in Manrope bis 83) */
  margin-top: 32px;
  font-size: clamp(18px, 1.35vw, 22px);
  line-height: 1.5;
  letter-spacing: -0.01em;
  font-weight: 500;
  color: var(--color-body);
  text-wrap: pretty;
}
.sk-b-kopf-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }

/* ── Sprungmarken „Auf dieser Seite“ (Prop sprungmarken) ──
   Bewusst leiser als die Buttons darüber: Haarlinie trennt Handlung (Buttons) von Orientierung,
   Pillen nur mit Rand und normaler Textfarbe. Jede Pille ist 44 px hoch (Touch-Ziel). */
.sk-b-kopf-sprung {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
  width: fit-content; max-width: 100%;             /* Haarlinie so lang wie die Marken, nicht bis ins Leere */
  margin-top: 48px; padding-top: 24px;
  border-top: 1px solid var(--color-border);
}
.sk-b-kopf-sprung-liste { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.sk-b-kopf-sprung-link {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 18px;
  font-size: 16px; font-weight: 500; letter-spacing: 0.01em;
  color: var(--color-body);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  transition: color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .sk-b-kopf-sprung-link:hover { color: var(--color-brand-main); border-color: var(--color-brand-lighter); background: var(--color-brand-subtle); }
}
.sk-b-kopf-sprung-link:active { background: var(--color-brand-subtle); }
.sk-b-kopf-sprung-link:focus-visible { outline: 2px solid var(--color-brand-main); outline-offset: 3px; }

/* ── Mit Beiwerk (Illustration): ab 1024 px zweispaltig ──
   Bis 19.10.2026 erst ab 1025 px (KOPF-8): iPad quer und iPad Pro hoch sind genau 1024 px breit und standen einspaltig,
   die Illustration unter dem Falz. */
.sk-b-kopf-beiwerk { min-width: 0; }
.sk-b-kopf-beiwerk > * { max-width: 100%; }
@media (min-width: 1024px) {
  .sk-b-kopf--beiwerk .sk-b-kopf-raster {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 72px;
    align-items: end;
  }
  .sk-b-kopf--beiwerk .sk-b-kopf-titel { font-size: clamp(44px, 4.6vw, 88px); }
}

/* ── Schmaler ── */
@media (max-width: 1023px) {
  /* unter dem Text: Illustration nicht auf volle Breite aufblasen */
  .sk-b-kopf-beiwerk { margin-top: 48px; max-width: 560px; }
}
/* Langes Wort im h1 (KOPF-1, 19.10.2026): „Sachverständigenbüro“ lief am Handy über den Rand und wurde abgeschnitten.
   Jedes Wort steht in einer eigenen Hülle (global.css .word) — getrennt wird also nur ein Wort, das allein breiter als die
   Zeile ist (ab 14 Zeichen). overflow-wrap: anywhere ist Pflicht, mit break-word bleibt Safari 18 über dem Rand. */
@media (max-width: 1279px) {
  .sk-b-kopf-titel { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 14 6 6; overflow-wrap: anywhere; }
  /* ohne Obergrenze blieb die Wort-Hülle 1–2 px breiter als die Zeile (Überstand gemessen 1,6–1,8 px) */
  .sk-b-kopf-titel .word, .sk-b-kopf-titel .word > span { max-width: 100%; }
}
/* Tablet hoch (KOPF-5, 19.10.2026): Die h1 sprang vom Handy (bis 56 px) auf 48/44 px zurück — 5.6vw greift erst ab 965 px.
   Bis 1023 px, weil der Beiwerk-Kopf ab 1024 px zweispaltig ist und dort die Desktop-Größe (4.6vw) braucht. */
@media (min-width: 768px) and (max-width: 1023px) {
  .sk-b-kopf-titel { font-size: clamp(54px, 5.6vw, 104px); }
  .sk-b-kopf--klein .sk-b-kopf-titel { font-size: clamp(50px, 4.8vw, 88px); }
}
/* Tablet hoch (KOPF-6): 64svh/48svh ließen auf hohen iPads 240–450 px leere Aurora über der Überzeile. 42svh statt 0: so liegt
   auf dem iPad Pro der nächste Abschnitt beim Laden noch nicht in der Spy-Zone der Abschnitts-Nav (die Zunge bliebe sonst offen).
   Köpfe mit Beiwerk (ChatGPT Ads, Detailseiten) bleiben wie sie sind: unter 1024 px trägt ihr Inhalt die Höhe ohnehin, ab 1024 px
   stehen sie zweispaltig (KOPF-8) mit der dort abgenommenen Höhe. */
@media (min-width: 768px) and (max-width: 1279px) and (orientation: portrait) {
  .sk-b-kopf:not(.sk-b-kopf--beiwerk) { min-height: 42svh; }
}
@media (max-width: 767px) {
  .sk-b-kopf { min-height: 0; padding: 130px 0 32px; }
  .sk-b-kopf-titelblock .eyebrow { margin-bottom: 20px; }
  .sk-b-kopf-titel,
  .sk-b-kopf--klein .sk-b-kopf-titel { font-size: clamp(40px, 11.5vw, 56px); letter-spacing: -0.04em; }
  .sk-b-kopf-sub { margin-top: 20px; font-size: 17px; }
  .sk-b-kopf-buttons { margin-top: 28px; }
  .sk-b-kopf-sprung { margin-top: 32px; padding-top: 20px; gap: 12px; }
  .sk-b-kopf-sprung-link { padding: 0 16px; }
  /* Mobil liegt der Text über der ganzen Breite: Aurora nur oben rechts, früher ausgeblendet */
  .sk-b-kopf-aurora {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 60%), linear-gradient(to bottom, #000 10%, transparent 62%);
            mask-image: linear-gradient(to right, transparent 0%, #000 60%), linear-gradient(to bottom, #000 10%, transparent 62%);
  }
}
/* Handy quer (KOPF-7, 19.10.2026): Fenster höchstens 520 px hoch — kompakter Kopf, damit Untertitel und Knöpfe im ersten Bild
   stehen (vorher 70–101 px Luft unter der Nav, nur Überzeile und h1 sichtbar). Bis 1024 px Breite: Große iPhones quer
   (852/932 px) bekamen sonst die Tablet-Werte (172 px Polster, 64svh). Bleibt am Dateiende, damit die h1 auch gegen
   die Tablet-Stufen gewinnt. Polster oben = 28 px Luft unter der Nav: das Dock (ab 768 px) endet bei 71 px, die
   Burger-Leiste (bis 767 px) bei 60 px. */
@media (max-width: 1024px) and (max-height: 520px) {
  .sk-b-kopf { min-height: 0; padding: 99px 0 32px; }
  .sk-b-kopf-titelblock .eyebrow { margin-bottom: 16px; }
  .sk-b-kopf-titel,
  .sk-b-kopf--klein .sk-b-kopf-titel { font-size: clamp(36px, 5.6vw, 48px); }
  .sk-b-kopf-sub { margin-top: 16px; }
  .sk-b-kopf-buttons { margin-top: 24px; }
  .sk-b-kopf-sprung { margin-top: 28px; padding-top: 18px; }
}
@media (max-width: 767px) and (max-height: 520px) {
  .sk-b-kopf { padding-top: 88px; }
}

/* ═══ 31-kacheln ═══ */
/* ═══ 31 · KACHELN (Unterseiten) — Styles ═══
   Offenes Raster mit Haarlinien statt Karten mit Schatten: Linie oben, Linie unter jeder Zeile,
   senkrechte Linien nur ZWISCHEN den Spalten (außen offen, Text fluchtet mit dem Abschnitts-Kopf).
   3 Spalten · ≤ 1024 px 2 Spalten (6 Kacheln) bzw. Zeilen „Icon · Titel · Text“ (3 Kacheln) · ≤ 767 px 1 Spalte.
   Handy quer (640–767 px und 768–1024 × ≤ 520 px, KACH-1): 2 Spalten mit der kompakten Handy-Kachel (Icon und Titel
   in einer Zeile), 3 Kacheln als Zeilen. 600–639 px bleibt einspaltig.
   Hover dezent: Icon-Kachel füllt sich,
   eine feine Markenlinie läuft oben über die Zelle. */

/* Titel ohne Untertitel über die volle Breite: regelt seit 18.10.2026 global.css für alle Köpfe (vorher hier mit max-width 17em) */

.sk-b-kacheln-raster {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--color-border);
}

.sk-b-kachel {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 44px 40px 52px;
  border-bottom: 1px solid var(--color-border);
}
/* senkrechte Haarlinie links an jeder Zelle außer der ersten Spalte */
.sk-b-kachel:not(:nth-child(3n + 1)) { border-left: 1px solid var(--color-border); }
.sk-b-kachel:nth-child(3n + 1) { padding-left: 0; }
.sk-b-kachel:nth-child(3n)     { padding-right: 0; }

/* Markenlinie oben (Hover): liegt auf der Rasterlinie, wächst von links */
.sk-b-kachel::before {
  content: '';
  position: absolute; left: 0; right: 0; top: -1px;
  height: 2px;
  background: var(--grad-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration) var(--ease);
}

.sk-b-kachel-icon {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--radius);
  background: var(--color-brand-subtle);
  color: var(--color-brand-main);
  transition: background-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.sk-b-kachel-icon svg { width: 22px; height: 22px; }

.sk-b-kachel-titel {
  margin-top: 28px;
  font-size: 22px; font-weight: 700;
  line-height: 1.2; letter-spacing: -0.02em;
}
.sk-b-kachel-text {
  margin-top: 12px;
  max-width: 44ch;
  font-size: 16px; line-height: 1.6;
  color: var(--color-text-muted);
  text-wrap: pretty;
}
.sk-b-kachel-text strong { color: var(--color-body); font-weight: 600; }
/* Ohne text-wrap: pretty (Safari 18) stand am Tablet oft ein einzelnes Wort in der letzten Zeile (KACH-6, 19.10.2026) */
@supports not (text-wrap: pretty) {
  @media (min-width: 768px) and (max-width: 1279px) { .sk-b-kachel-text { text-wrap: balance; } }
}

@media (hover: hover) and (pointer: fine) {
  .sk-b-kachel:hover::before { transform: scaleX(1); }
  .sk-b-kachel:hover .sk-b-kachel-icon { background: var(--color-brand-main); color: var(--color-bg-card); }
}

/* Einblend-Staffel nach der echten Spalte (KACH-3, 19.10.2026; vorher Inline-Stil --rise-i: i % 3 im Markup).
   Desktop wie bisher 0/1/2; die Medienblöcke am Dateiende setzen 2 Spalten (0/1) und 1 Spalte (0).
   Die erste Regel ist nötig, sonst käme Spalte 1 nur über den Rückfall var(--rise-i, 0) auf 0 (global.css). */
.sk-b-kachel:nth-child(3n + 1) { --rise-i: 0; }
.sk-b-kachel:nth-child(3n + 2) { --rise-i: 1; }
.sk-b-kachel:nth-child(3n)     { --rise-i: 2; }

/* ── 2 Spalten ── */
@media (max-width: 1024px) {
  .sk-b-kacheln-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* :nth-child(n) hebt die Spezifität auf die der 3-Spalten-Regeln (:not(:nth-child(…))), sonst behält Kachel 5 ihre Linie */
  .sk-b-kachel:nth-child(n) { padding: 36px 32px 44px; border-left: 0; }
  .sk-b-kachel:nth-child(2n)     { border-left: 1px solid var(--color-border); padding-right: 0; }
  .sk-b-kachel:nth-child(2n + 1) { padding-left: 0; }
}
/* 3 Kacheln bei 768–1024 px: als 2 + 1 blieb neben der dritten eine halbe Zeile leer. Stattdessen drei Zeilen
   mit Icon, Titel und Text nebeneinander — nutzt die Breite, und die Haarlinien trennen wie in der Tabelle. */
@media (min-width: 768px) and (max-width: 1024px) {
  .sk-b-kacheln-raster--3 { grid-template-columns: minmax(0, 1fr); }
  .sk-b-kacheln-raster--3 .sk-b-kachel:nth-child(n) {
    display: grid; grid-template-columns: 44px minmax(0, 0.8fr) minmax(0, 1.2fr);
    column-gap: 24px; align-items: start;
    padding: 32px 0 36px; border-left: 0;
  }
  .sk-b-kacheln-raster--3 .sk-b-kachel-titel { margin-top: 9px; font-size: 20px; text-wrap: balance; }
  /* margin-top 10 statt 6 px (KACH-5, 19.10.2026): Titel und Text stehen auf einer Grundlinie */
  .sk-b-kacheln-raster--3 .sk-b-kachel-text { margin-top: 10px; max-width: none; text-wrap: balance; }   /* kurze Texte: kein Einzelwort in der letzten Zeile */
}
/* Tablets (KACH-4, 19.10.2026): Texte einer Reihe auf gemeinsamer Linie, auch wenn ein Nachbartitel zweizeilig ist
   (Subgrid; vorher 26–27 px Versatz). Handys quer ab 768 px sind per Höhe ausgenommen (kompakte Kachel, KACH-1).
   Ohne Subgrid-Unterstützung wird die Deklaration verworfen, align-content: start lässt dann alles wie bisher. */
@media (min-width: 768px) and (max-width: 1279px) and (min-height: 521px) {
  .sk-b-kacheln-raster:not(.sk-b-kacheln-raster--3) .sk-b-kachel { display: grid; grid-template-rows: subgrid; grid-row: span 3; align-content: start; }
}
@media (min-width: 1025px) and (max-width: 1279px) {
  .sk-b-kacheln-raster--3 .sk-b-kachel { display: grid; grid-template-rows: subgrid; grid-row: span 3; align-content: start; }
}

/* ── 1 Spalte ── */
@media (max-width: 767px) {
  .sk-b-kacheln-raster { grid-template-columns: minmax(0, 1fr); }
  .sk-b-kachel:nth-child(n) { padding: 28px 0 32px; border-left: 0; }
  .sk-b-kachel { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; align-items: center; }
  .sk-b-kachel-titel { margin-top: 0; font-size: 20px; }
  .sk-b-kachel-text { grid-column: 1 / -1; margin-top: 14px; }
}

/* ── Handy quer: 2 Spalten, kompakte Kachel (KACH-1, 19.10.2026) ──
   640–767 px bei jeder Höhe (der 44ch-Text ließ einspaltig 40 % leer) und 768–1024 px nur flach (≤ 520 px, Handys quer).
   align-content: start, sonst dehnt die höhere Nachbarkachel die Zeilen. 3 Kacheln: Zeilen „Icon · Titel · Text“. */
@media (min-width: 640px) and (max-width: 767px), (min-width: 768px) and (max-width: 1024px) and (max-height: 520px) {
  .sk-b-kacheln-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sk-b-kacheln-raster--3 { grid-template-columns: minmax(0, 1fr); }
  .sk-b-kacheln-raster .sk-b-kachel:nth-child(n) { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; align-items: center; align-content: start; padding: 24px 28px 28px; border-left: 0; }
  .sk-b-kacheln-raster:not(.sk-b-kacheln-raster--3) .sk-b-kachel:nth-child(2n) { border-left: 1px solid var(--color-border); padding-right: 0; }
  .sk-b-kacheln-raster:not(.sk-b-kacheln-raster--3) .sk-b-kachel:nth-child(2n + 1) { padding-left: 0; }
  .sk-b-kacheln-raster .sk-b-kachel-titel { margin-top: 0; font-size: 20px; }
  .sk-b-kacheln-raster .sk-b-kachel-text { grid-column: 1 / -1; margin-top: 12px; }
  .sk-b-kacheln-raster--3 .sk-b-kachel:nth-child(n) { grid-template-columns: 44px minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: 24px; align-items: start; padding: 24px 0 28px; }
  .sk-b-kacheln-raster--3 .sk-b-kachel-titel { margin-top: 9px; text-wrap: balance; }
  .sk-b-kacheln-raster--3 .sk-b-kachel-text { grid-column: auto; margin-top: 10px; max-width: none; text-wrap: balance; }
}

/* 3er-Zeilen bei 901–1024 px (KACH-5, 19.10.2026): Textspalte beginnt auf der Kopf-Mittelachse (Untertitel-Kante).
   calc(50% − 32px) = Breite der rechten Kopfspalte. Unter 901 px (Kopf einspaltig) bleibt 0,8 : 1,2.
   Nach dem KACH-1-Block: gleiche Spezifität, die spätere Regel gewinnt (Handys quer 901–1024 px bekommen die Achse auch). */
@media (min-width: 901px) and (max-width: 1024px) {
  .sk-b-kacheln-raster--3 .sk-b-kachel:nth-child(n) { grid-template-columns: 44px minmax(0, 1fr) calc(50% - 32px); }
}

/* Kacheltitel am Handy ausgewogen umbrechen (KACH-2): „Datenschutz & ⏎ KI-Verordnung“ statt Trennung nach „KI-“ */
@media (max-width: 767px), (max-width: 1024px) and (max-height: 520px) {
  .sk-b-kachel-titel { text-wrap: balance; }
}

/* Einblend-Staffel (KACH-3): 2 Spalten links 0, rechts 1 · 1 Spalte alle 0. 3er-Zeilen behalten 0/1/2 (Welle von oben). */
@media (min-width: 640px) and (max-width: 1024px) {
  .sk-b-kacheln-raster:not(.sk-b-kacheln-raster--3) .sk-b-kachel:nth-child(2n + 1) { --rise-i: 0; }
  .sk-b-kacheln-raster:not(.sk-b-kacheln-raster--3) .sk-b-kachel:nth-child(2n)     { --rise-i: 1; }
}
@media (max-width: 639px) {
  .sk-b-kachel:nth-child(n) { --rise-i: 0; }
}

/* ═══ 32-schritte ═══ */
/* ═══ 32 · SCHRITTE (Unterseiten) — Styles ═══
   Timeline wie sections/07-process: Linie + Marker + große Ziffern, graue Fläche.
   Die Linie hängt über eine CSS-Scroll-Timeline am Scrollen (Compositor, kein JS).
   Bei „weniger Bewegung“ steht sie voll da; ohne Scroll-Timeline (Safari ≤ 18) schreibt schritte.js sie bis 1279 px
   mit (ABL-8), darüber steht sie voll da.
   Aktive Schritte (Marker lila, Ziffer satt) setzt schritte.js — ohne JS ist alles satt. */

/* Titel ohne Untertitel über die volle Breite: regelt seit 18.10.2026 global.css für alle Köpfe */

.sk-b-schritte-wrap {
  position: relative;
  max-width: 1100px;
  padding-left: 16px;
  view-timeline: --sk-b-schritte block;
}
.sk-b-schritte-linie {
  position: absolute;
  top: 12px; bottom: 12px; left: 35px;
  width: 2px;
  background: var(--color-border);
  border-radius: 2px;
  overflow: hidden;
}
.sk-b-schritte-fuellung {
  position: absolute; inset: 0;
  background: var(--grad-brand);
  border-radius: 2px;
  transform-origin: top;
}
/* Fortschritt: 0, wenn die Oberkante der Timeline 55 % hoch im Fenster steht, 1, wenn die
   Unterkante dort ankommt (Begründung „cover“ statt „entry“ steht in 07-process/process.css). */
@supports (animation-timeline: view()) {
  .sk-b-schritte-fuellung {
    transform: scaleY(0);
    animation: sk-b-schritte-linie linear both;
    animation-timeline: --sk-b-schritte;
    animation-range: cover 45vh cover calc(100% - 55vh);
  }
}
@supports not (animation-timeline: view()) {
  .sk-b-schritte-fuellung { transform: none; }
}
@keyframes sk-b-schritte-linie { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) {
  .sk-b-schritte-fuellung { animation: none; transform: none; }
}

.sk-b-schritte-liste {
  position: relative;
  display: flex; flex-direction: column; gap: 64px;
  list-style: none;
}
.sk-b-schritt {
  display: grid;
  grid-template-columns: 72px 140px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

/* Marker: Grund = Abschnittsgrund, verdeckt die Linie hinter dem Ring */
.sk-b-schritt-marker {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 38px; height: 38px;
  margin-left: 1px;
  background: var(--color-bg-accent);
  border-radius: 50%;
}
.sk-b-schritt-ring {
  position: absolute; inset: 0;
  border: 2px solid var(--color-brand-main);
  border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(109, 40, 217, 0.10);
  transition: border-color 360ms var(--ease), box-shadow 360ms var(--ease);
}
.sk-b-schritt-punkt {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--color-brand-main);
  transition: background-color 360ms var(--ease), transform 360ms var(--ease);
}

.sk-b-schritt-num {
  padding-top: 4px;
  font-size: 96px; font-weight: 700; line-height: 0.9; letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: transparent;
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  transition: opacity 480ms var(--ease);
}

/* Erst wenn schritte.js läuft (.ist-beobachtet): nicht erreichte Schritte gedämpft */
.sk-b-schritte-wrap.ist-beobachtet .sk-b-schritt:not(.is-active) .sk-b-schritt-ring { border-color: var(--color-border-strong); box-shadow: none; }
.sk-b-schritte-wrap.ist-beobachtet .sk-b-schritt:not(.is-active) .sk-b-schritt-punkt { background: var(--color-border-strong); transform: scale(0.87); }
.sk-b-schritte-wrap.ist-beobachtet .sk-b-schritt:not(.is-active) .sk-b-schritt-num { opacity: 0.18; }

.sk-b-schritt-body { padding-top: 4px; }
.sk-b-schritt-body h3 { font-size: 28px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 12px; }
.sk-b-schritt-body > p { max-width: 31em; font-size: 16px; line-height: 1.6; color: var(--color-text-muted); text-wrap: pretty; }   /* 31em ≈ 62–69 Zeichen (640 px ergaben bis 88) */

/* Meta als kleine Pille (Dauer o. Ä.) */
.sk-b-schritt-meta { margin-top: 18px; }
.sk-b-schritt-meta span {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  font-family: var(--font-mono); font-size: 16px; font-weight: 600;
  letter-spacing: 0.02em; font-variant-numeric: tabular-nums;
  color: var(--color-heading);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
}
.sk-b-schritt-meta span::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-brand-main);
}

@media (max-width: 1024px) {
  .sk-b-schritt { grid-template-columns: 72px 100px minmax(0, 1fr); gap: 24px; }
  .sk-b-schritt-num { font-size: 72px; }
}
/* Tablet (ABL-5, 19.10.2026): Schritt-Titel stufenlos 24 → 28 px wie im Ablauf der Startseite (07-process) */
@media (min-width: 768px) and (max-width: 1279px) {
  .sk-b-schritt-body h3 { font-size: clamp(24px, 2.2vw, 28px); }
}
@media (max-width: 767px) {
  .sk-b-schritte-wrap { padding-left: 4px; }
  .sk-b-schritte-linie { left: 17px; top: 16px; bottom: 16px; }
  .sk-b-schritte-liste { gap: 44px; }
  .sk-b-schritt { grid-template-columns: 28px minmax(0, 1fr); gap: 0 18px; }
  /* Marker mittig zur Ziffernzeile (Ziffern-Höhe ≈ 0,72 em ab ≈ 0,2 em) */
  .sk-b-schritt-marker { width: 28px; height: 28px; margin: 8px 0 0; }
  .sk-b-schritt-punkt { width: 8px; height: 8px; }
  .sk-b-schritt-ring { box-shadow: 0 0 0 4px rgba(109, 40, 217, 0.10); }
  /* line-height 1: kleiner würde der Verlaufstext (background-clip) unten abgeschnitten */
  .sk-b-schritt-num { grid-column: 2; grid-row: 1; padding-top: 0; font-size: 44px; line-height: 1; }
  .sk-b-schritt-body { grid-column: 2; padding-top: 8px; }
  .sk-b-schritt-body h3 { font-size: 22px; margin-bottom: 8px; }
  /* Linie endet am letzten Marker (ABL-10, 19.10.2026): ein Streifen im Abschnittsgrund deckt sie darunter ab.
     36 px = Marker-Abstand 8 + Marker 28; x 12–16 deckt die Linie (13–15 px in der Zeile). Der Abschnitt ist immer
     .sk-b--flaeche (Grund --color-bg-accent, folgt auch html.theme-dark). Der Marker (z-index 1) liegt darüber. */
  .sk-b-schritt:last-child { position: relative; }
  .sk-b-schritt:last-child::after { content: ''; position: absolute; left: 12px; width: 4px; top: 36px; bottom: 0; background: var(--color-bg-accent); }
}
/* Handy quer (600–767 px, ABL-9): Marker, Ziffer und Text nebeneinander — 176–220 px kürzer. Linie und Marker bleiben. */
@media (min-width: 600px) and (max-width: 767px) {
  .sk-b-schritt { grid-template-columns: 28px 64px minmax(0, 1fr); }
  .sk-b-schritt-body { grid-column: 3; grid-row: 1; }
}

/* ═══ 60-ref-liste ═══ */
/* ═══ 60 · REF-LISTE — Kachel-Übersicht der Referenzen ═══
   Drei Raster: "oben" = hervorgehobene Projekte (2 Spalten, groß), "gross" = 2 Spalten,
   "kompakt" = 3 Spalten. Große Projekte zeigen zusätzlich die Mobilansicht.
   Bewertungen (.sk-st) sind Teil der Karte: Manche Seiten sind schlicht, die Kunden
   aber sehr zufrieden — das soll man sehen, ohne das Projekt zu öffnen. */
.sk-rl { padding-block: 40px 96px; }
.sk-rl-text { max-width: 62ch; color: var(--color-text-muted); margin-bottom: 32px; }

.sk-rl-gruppe + .sk-rl-gruppe { margin-top: 88px; }
.sk-rl-kopf {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding-bottom: 14px; margin-bottom: 32px;
  border-bottom: 1px solid var(--color-border);
}
.sk-rl-kopf h2 { font-size: clamp(22px, 2.4vw, 32px); font-weight: 700; letter-spacing: -0.03em; }
.sk-rl-anzahl {
  flex-shrink: 0;
  font-family: var(--font-mono); font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-text-muted); font-variant-numeric: tabular-nums;
}

.sk-rl-grid { display: grid; gap: 28px; align-items: stretch; }
.sk-rl-grid--kompakt { grid-template-columns: repeat(3, 1fr); }
.sk-rl-grid--gross,
.sk-rl-grid--oben    { grid-template-columns: repeat(2, 1fr); gap: 36px; }

/* ── Karte ── */
.sk-rl-karte {
  display: flex; flex-direction: column;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: inherit;
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .sk-rl-karte:hover { border-color: var(--color-brand-main); box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
  .sk-rl-karte:hover .sk-rl-link svg { transform: translateX(3px); }
}
.sk-rl-karte:focus-visible { outline: 2px solid var(--color-brand-main); outline-offset: 3px; }

/* Browser-Rahmen wie im Portfolio der Startseite */
.sk-rl-rahmen {
  position: relative;
  margin: 12px 12px 0;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--color-bg-accent);
}
.sk-rl-chrome {
  display: flex; align-items: center; gap: 12px;
  height: 32px; padding: 8px 12px;
  background: var(--color-bg-accent);
  border-bottom: 1px solid var(--color-border);
}
.sk-rl-punkte { display: inline-flex; gap: 5px; flex-shrink: 0; }
.sk-rl-punkte i { display: block; width: 9px; height: 9px; border-radius: 50%; }
.sk-rl-punkte i:nth-child(1) { background: #FCA5A5; }
.sk-rl-punkte i:nth-child(2) { background: #FCD34D; }
.sk-rl-punkte i:nth-child(3) { background: #86EFAC; }
.sk-rl-url {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-mono); font-size: 16px; color: var(--color-text-muted);
}
/* height:auto ist Pflicht: das height-Attribut im <img> ist ein Präsentations-Hinweis
   und schlägt sonst aspect-ratio — die Kachel wurde 900 px hoch und das Bild gezoomt. */
.sk-rl-shot { width: 100%; height: auto; aspect-ratio: 1440 / 900; object-fit: cover; object-position: top center; }

/* Mobilansicht als kleines Gerät in der Ecke */
.sk-rl-mobil {
  position: absolute; right: 5%; bottom: -16%; z-index: 2;   /* ragt unten aus dem Rahmen: wirkt wie hochgehalten */
  width: 19%;
}

/* ── iPhone-Rahmen (Pro-Modell, Dynamic Island) — Markup aus iphone.mjs ──
   Proportionen nach iPhone 15 Pro (Gehäuse 71,6 × 146,6 mm, Screen 393 × 852 pt).
   Alles in cqw = Prozent der Gerätebreite, damit das Gerät in jeder Größe stimmt. */
.sk-iphone { display: block; container-type: inline-size; }   /* nur Maß-Container, keine Optik */
.sk-iphone-gehaeuse {
  position: relative; display: block;
  padding: 1.1cqw;                                   /* Titan-Rand */
  border-radius: 17cqw;
  background: linear-gradient(145deg, #5b5b60 0%, #2a2a2d 22%, #1c1c1e 50%, #3a3a3e 78%, #6b6b70 100%);
  box-shadow:
    inset 0 0 0 0.35cqw rgba(255, 255, 255, 0.18),
    0 2cqw 5cqw -1cqw rgba(9, 9, 11, 0.45),
    0 12cqw 24cqw -8cqw rgba(9, 9, 11, 0.35);
}
/* Tasten: links Action + Lautstärke (eine Leiste, Kopien per box-shadow), rechts Seitentaste */
.sk-iphone-gehaeuse::before,
.sk-iphone-gehaeuse::after {
  content: ''; position: absolute; width: 1cqw; border-radius: 0.5cqw;
  background: linear-gradient(90deg, #2a2a2d, #57575c);
}
.sk-iphone-gehaeuse::before { left: -0.8cqw; top: 22cqw; height: 6.5cqw; box-shadow: 0 11cqw 0 0 #3a3a3e, 0 25cqw 0 0 #3a3a3e; }
.sk-iphone-gehaeuse::after  { right: -0.8cqw; top: 38cqw; height: 20cqw; }
.sk-iphone-screen {
  position: relative; display: flex; flex-direction: column;
  aspect-ratio: 393 / 852;
  border: 3.2cqw solid #000;                         /* schwarzer Displayrand */
  border-radius: 15.9cqw;
  overflow: hidden;
  background: #fff;
}
.sk-iphone-status {
  flex: 0 0 auto; position: relative;
  height: 12.6cqw;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 7.5cqw 0 9.5cqw;
  color: #000; background: #fff;
}
.sk-iphone-zeit {
  font-family: -apple-system, 'SF Pro Text', var(--font-main);
  font-size: 4.1cqw; font-weight: 600; letter-spacing: -0.02em; line-height: 1;
}
.sk-iphone-island {
  position: absolute; left: 50%; top: 2.5cqw; translate: -50% 0;
  width: 30cqw; height: 8.8cqw; border-radius: 99cqw;
  background: #000;
}
/* angedeutete Kamera rechts in der Island */
.sk-iphone-island::after {
  content: ''; position: absolute; right: 2.6cqw; top: 50%; translate: 0 -50%;
  width: 3.2cqw; height: 3.2cqw; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #2b3a55 0%, #0c0f18 60%);
}
.sk-iphone-icons { display: inline-flex; align-items: center; gap: 1.2cqw; }
.sk-iphone-icons svg { height: 2.9cqw; width: auto; fill: currentColor; }
.sk-iphone-icons svg:last-child { height: 3.1cqw; }
.sk-iphone-screen img {
  flex: 1 1 auto; min-height: 0;
  width: 100%; height: auto;
  object-fit: cover; object-position: top center;
}

.sk-rl-meta { display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 0; }
.sk-rl-tag { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sk-rl-typ {
  font-family: var(--font-mono); font-size: 16px; letter-spacing: 0.06em;
  color: var(--color-brand-main); background: var(--color-brand-subtle);
  padding: 3px 8px; border-radius: var(--radius-sm); flex-shrink: 0;
}
/* RLD-8 (19.10.2026): bis 1279 px Plakette oben, Branche darunter — Muster aus dem Laufband (ref-laufband.css). Neben einer
   langen Branche („SACHVERSTÄNDIGENBÜRO“) ragte die Plakette über den Innenrand und wurde an der Kartenkante angeschnitten. */
@media (max-width: 1279px) {
  .sk-rl-tag { flex-direction: column; align-items: flex-start; gap: 8px; }
  .sk-rl-typ { order: -1; }
}
.sk-rl-meta h3 { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; }
.sk-rl-meta p { font-size: 16px; line-height: 1.55; color: var(--color-text-muted); }
.sk-rl-link {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: auto; padding: 16px 18px 20px;
  font-size: 16px; font-weight: 600; color: var(--color-brand-main);
}
.sk-rl-link svg { width: 15px; height: 15px; transition: transform var(--duration-fast) var(--ease); }

.sk-rl-grid--gross .sk-rl-meta,
.sk-rl-grid--oben .sk-rl-meta { padding: 22px 22px 0; }
.sk-rl-grid--gross .sk-rl-link,
.sk-rl-grid--oben .sk-rl-link { padding: 18px 22px 24px; }
.sk-rl-grid--gross .sk-rl-meta h3 { font-size: 25px; }
.sk-rl-grid--oben .sk-rl-meta h3 { font-size: 30px; letter-spacing: -0.03em; }
.sk-rl-grid--gross .sk-rl-meta p,
.sk-rl-grid--oben .sk-rl-meta p { font-size: 16px; }

/* ── Ausgewählte Projekte ──
   Ohne eigene Hintergrundfläche (lila Bühne auf Wunsch Tunahan 16.09. entfernt) — hervorgehoben
   werden die Karten nur noch durch den umlaufenden Lichtrand. isolation hält den Lichthof
   (z-index -1) über dem Seitenhintergrund und unter den Karten. */
.sk-rl-gruppe--oben { position: relative; isolation: isolate; }
.sk-rl-gruppe--oben .sk-rl-kopf h2 { display: inline-flex; align-items: center; gap: 12px; }
.sk-rl-gruppe--oben .sk-rl-kopf h2::before {
  content: ''; width: 10px; height: 10px; flex-shrink: 0;
  background: var(--grad-brand); border-radius: 3px;
}
/* Umlaufender Lichtrand (Wunsch Tunahan 16.09.): ein heller Punkt wandert als conic-gradient
   um die Karte, dazu ein weichgezeichneter Lichthof dahinter.
   Beides hängt an der Hülle .sk-rl-glanz, NICHT an der Karte: Die Hülle trägt data-rise
   (dessen translate macht sie zum Stapelkontext) und hat selbst keinen Hintergrund — so liegt
   ::after (z-index -1) sicher HINTER der weißen Karte und ::before als Ring darüber.
   Der Winkel ist per @property registriert, nur so lässt er sich animieren.
   Läuft nur, solange die Bühne im Bild ist (ref-liste.js). */
@property --sk-rl-winkel { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.sk-rl-glanz {
  position: relative; display: flex;
  border-radius: var(--radius-lg);
  transition: transform var(--duration) var(--ease);
}
/* RLD-7 (19.10.2026): Ohne min-width: 0 meldet die Hülle die ganze Adresszeile (nowrap) als Mindestbreite — die längste Domain
   hielt jede Spalte bei 377 px: am Handy rechts abgeschnitten, auf dem iPad ungleich breite Spalten. Jetzt kürzt die Adresse
   mit „…“ wie auf allen übrigen Karten. Ab 1280 px sind die Spalten ohnehin breiter. */
@media (max-width: 1279px) { .sk-rl-glanz { min-width: 0; } }
.sk-rl-glanz > .sk-rl-karte { flex: 1; border: 0; }
.sk-rl-glanz > .sk-rl-karte,
.sk-rl-glanz > .sk-rl-karte:hover {
  transform: none;
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.9) inset,
    0 28px 56px -28px rgba(109, 40, 217, 0.32),
    0 10px 24px -14px rgba(37, 99, 235, 0.18);
}
.sk-rl-glanz::before,
.sk-rl-glanz::after {
  content: ''; position: absolute; pointer-events: none;
  animation: sk-rl-umlauf 7s linear infinite paused;
}
/* Ring: Fläche minus Innenfläche per Maske */
.sk-rl-glanz::before {
  inset: 0; z-index: 4; padding: 2px; border-radius: inherit;
  background:
    conic-gradient(from var(--sk-rl-winkel),
      transparent 0deg 250deg,
      rgba(139, 92, 246, 0.4) 290deg,
      #8B5CF6 322deg,
      #60A5FA 343deg,
      #FFFFFF 352deg,
      transparent 360deg),
    linear-gradient(135deg, rgba(37, 99, 235, 0.35) 0%, rgba(109, 40, 217, 0.35) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* Lichthof hinter der Karte */
.sk-rl-glanz::after {
  inset: -2px; z-index: -1; border-radius: calc(var(--radius-lg) + 2px);
  background: conic-gradient(from var(--sk-rl-winkel),
    transparent 0deg 275deg,
    rgba(139, 92, 246, 0.55) 322deg,
    rgba(96, 165, 250, 0.6) 346deg,
    transparent 360deg);
  filter: blur(14px);
}
/* versetzt starten, damit nicht alle vier Lichter synchron laufen */
.sk-rl-glanz:nth-child(2)::before, .sk-rl-glanz:nth-child(2)::after { animation-delay: -1.75s; }
.sk-rl-glanz:nth-child(3)::before, .sk-rl-glanz:nth-child(3)::after { animation-delay: -3.5s; }
.sk-rl-glanz:nth-child(4)::before, .sk-rl-glanz:nth-child(4)::after { animation-delay: -5.25s; }
.sk-rl-gruppe--oben.is-sichtbar .sk-rl-glanz::before,
.sk-rl-gruppe--oben.is-sichtbar .sk-rl-glanz::after { animation-play-state: running; }
/* RLD-11 (19.10.2026): Unter 1280 px beobachtet ref-liste.js jede Karte einzeln — dort ist meist nur eine im Bild,
   und es läuft nur deren Licht. Ab 1280 px bleibt es bei der Gruppe (Regel darüber). */
.sk-rl-glanz.is-sichtbar::before,
.sk-rl-glanz.is-sichtbar::after { animation-play-state: running; }
@keyframes sk-rl-umlauf { to { --sk-rl-winkel: 360deg; } }

@media (hover: hover) and (pointer: fine) {
  .sk-rl-glanz:hover { transform: translateY(-3px); }
  .sk-rl-glanz:hover > .sk-rl-karte {
    box-shadow:
      0 1px 0 0 rgba(255, 255, 255, 0.9) inset,
      0 36px 64px -26px rgba(109, 40, 217, 0.42),
      0 14px 28px -14px rgba(37, 99, 235, 0.24);
  }
  /* Kein Tempowechsel beim Hover: Eine neue animation-duration rechnet die Position aus der
     schon vergangenen Zeit neu — das Licht sprang an eine andere Stelle. */
}
.sk-rl-glanz:focus-within { outline: 2px solid var(--color-brand-main); outline-offset: 4px; }
.sk-rl-glanz > .sk-rl-karte:focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) {
  .sk-rl-glanz::before { animation: none; }
  .sk-rl-glanz::after { display: none; }
}
.sk-rl-grid--oben .sk-rl-rahmen { border-color: rgba(109, 40, 217, 0.12); }

/* ── Bewertung (Karte + Detailseite) ── */
.sk-st {
  margin: 16px 12px 0;
  padding: 16px 18px 18px;
  background: var(--color-brand-subtle);
  border-radius: 10px;
}
.sk-st-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.sk-st-sterne { display: inline-flex; gap: 2px; }
.sk-st-sterne svg { width: 16px; height: 16px; fill: #F59E0B; }
.sk-st-sterne--tp .sk-st-tp { display: inline-grid; place-items: center; width: 18px; height: 18px; background: #00B67A; border-radius: 2px; }
.sk-st-sterne--tp svg { width: 13px; height: 13px; fill: #fff; }
.sk-st-quelle { font-family: var(--font-mono); font-size: 16px; letter-spacing: 0.04em; color: var(--color-text-muted); }
/* NZ-16 (19.10.2026): Fehlt neben den Sternen der Platz, rutscht die Quelle als Ganzes in die nächste Zeile, statt am
   Bindestrich zu brechen („Trustpilot-“ / „Bewertung“). Gilt auch für die Bewertung der Detailseiten. Desktop unverändert. */
@media (max-width: 1279px) {
  .sk-st-kopf { flex-wrap: wrap; row-gap: 4px; }
  .sk-st-quelle { white-space: nowrap; }
}
.sk-st blockquote p { font-size: 16px; line-height: 1.55; color: var(--color-heading); }
.sk-st blockquote p::before { content: '„'; }
.sk-st blockquote p::after { content: '“'; }
.sk-st figcaption { margin-top: 10px; font-size: 16px; font-weight: 600; color: var(--color-brand-darker); }
/* Auf Karten gekürzt, damit alle Karten einer Reihe ähnlich hoch bleiben */
.sk-st--karte blockquote p {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
}
.sk-rl-grid--oben .sk-st { margin: 20px 12px 0; padding: 20px 22px 22px; }
.sk-rl-grid--oben .sk-st blockquote p { font-size: 17px; -webkit-line-clamp: 5; }

@media (max-width: 1024px) {
  .sk-rl-grid--kompakt { grid-template-columns: repeat(2, 1fr); }
}
/* NZ-36 (20.10.2026): /referenzen/ auch 1025–1279 px (iPad quer) zweispaltig — drei Spalten ließen „Onepager“ mit einer
   einzelnen Karte enden (16 Karten). Nur die Seite /referenzen/ (.sk-rl-abschnitt); die Referenz-Auswahl auf
   /leistungen/webseite/ behält drei Spalten. Ab 1280 px unverändert. */
@media (min-width: 1025px) and (max-width: 1279px) {
  .sk-rl-abschnitt .sk-rl-grid--kompakt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .sk-rl { padding-block: 24px 64px; }
  .sk-rl-gruppe + .sk-rl-gruppe { margin-top: 56px; }
  .sk-rl-grid--kompakt, .sk-rl-grid--gross, .sk-rl-grid--oben { grid-template-columns: 1fr; gap: 20px; }
  .sk-rl-mobil { width: 24%; bottom: -20%; }
  .sk-rl-grid--oben .sk-rl-meta h3 { font-size: 25px; }
  /* NZ-30 (19.10.2026): Kompakt-Karten am Handy kürzer — ohne Adresszeile, Bild 2 : 1, Zitat in zwei Zeilen.
     Kurztext und Zitat bleiben sichtbar; das ganze Zitat steht auf der Detailseite. */
  .sk-rl-grid--kompakt .sk-rl-chrome { display: none; }
  .sk-rl-grid--kompakt .sk-rl-shot { aspect-ratio: 2 / 1; }
  .sk-rl-grid--kompakt .sk-st--karte blockquote p { -webkit-line-clamp: 2; line-clamp: 2; }
}
/* RLD-10 (19.10.2026): Handy quer (600–767 px) zweispaltig wie auf dem iPad mini. Eine 710 px breite Karte war höher als
   das Fenster, und die 920-px-Bilder wurden hochskaliert. Nur /referenzen/ (.sk-rl-abschnitt), die Fuge von 20 px bleibt. */
@media (min-width: 600px) and (max-width: 767px) {
  .sk-rl-abschnitt .sk-rl-grid--kompakt,
  .sk-rl-abschnitt .sk-rl-grid--gross,
  .sk-rl-abschnitt .sk-rl-grid--oben { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* RLD-9 (A) + NZ-36 (20.10.2026): Querkarte im zweispaltigen Raster von /referenzen/ (600–1279 px) — Bild links, Text rechts,
   über beide Spalten. Drei Fälle, alle nur auf /referenzen/ (.sk-rl-abschnitt):
   - S: die letzte Bewertungs-Karte bei ungerader Zahl (heute theuerkorn). Daneben stand eine Karte ohne Bewertung, gleich
     hoch gestreckt — 241–284 px Leere über „Zum Projekt“.
   - E: die einzige Karte einer Gruppe (heute Multipager onbau), sonst halb breit mit leerer Hälfte daneben.
   - L: die letzte Karte, wenn S eine ganze Reihe nimmt und danach eine ungerade Zahl folgt (heute tahan) — sonst endete das
     Raster mit einer halben Waise.
   Wird die Zahl der Bewertungs-Karten gerade, greifen S und L von selbst nicht mehr. :is() ist nachsichtig: Kennt ein Browser
   :has() nicht, fällt nur L weg. Ohne Spalten-Fuge in der Karte: Bild und Text halten ihre eigenen Ränder. */
@media (min-width: 600px) and (max-width: 1279px) {
  :is(.sk-rl-abschnitt .sk-rl-grid--kompakt > .sk-rl-karte--stimme:nth-child(odd of .sk-rl-karte--stimme):nth-last-child(1 of .sk-rl-karte--stimme),
      .sk-rl-abschnitt .sk-rl-grid > .sk-rl-karte:only-child,
      .sk-rl-abschnitt .sk-rl-grid--kompakt:has(> .sk-rl-karte--stimme:nth-child(odd of .sk-rl-karte--stimme):nth-last-child(1 of .sk-rl-karte--stimme)) > .sk-rl-karte:last-child:nth-child(even)) {
    grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto 1fr;
  }
  :is(.sk-rl-abschnitt .sk-rl-grid--kompakt > .sk-rl-karte--stimme:nth-child(odd of .sk-rl-karte--stimme):nth-last-child(1 of .sk-rl-karte--stimme),
      .sk-rl-abschnitt .sk-rl-grid > .sk-rl-karte:only-child,
      .sk-rl-abschnitt .sk-rl-grid--kompakt:has(> .sk-rl-karte--stimme:nth-child(odd of .sk-rl-karte--stimme):nth-last-child(1 of .sk-rl-karte--stimme)) > .sk-rl-karte:last-child:nth-child(even)) > .sk-rl-rahmen {
    grid-row: 1 / -1; align-self: start; margin-bottom: 12px;
  }
  :is(.sk-rl-abschnitt .sk-rl-grid--kompakt > .sk-rl-karte--stimme:nth-child(odd of .sk-rl-karte--stimme):nth-last-child(1 of .sk-rl-karte--stimme),
      .sk-rl-abschnitt .sk-rl-grid > .sk-rl-karte:only-child,
      .sk-rl-abschnitt .sk-rl-grid--kompakt:has(> .sk-rl-karte--stimme:nth-child(odd of .sk-rl-karte--stimme):nth-last-child(1 of .sk-rl-karte--stimme)) > .sk-rl-karte:last-child:nth-child(even)) > :not(.sk-rl-rahmen) {
    grid-column: 2;
  }
  :is(.sk-rl-abschnitt .sk-rl-grid--kompakt > .sk-rl-karte--stimme:nth-child(odd of .sk-rl-karte--stimme):nth-last-child(1 of .sk-rl-karte--stimme),
      .sk-rl-abschnitt .sk-rl-grid > .sk-rl-karte:only-child,
      .sk-rl-abschnitt .sk-rl-grid--kompakt:has(> .sk-rl-karte--stimme:nth-child(odd of .sk-rl-karte--stimme):nth-last-child(1 of .sk-rl-karte--stimme)) > .sk-rl-karte:last-child:nth-child(even)) > .sk-rl-link {
    align-self: end;
  }
}

/* ── Seite /referenzen/ im Stil der Unterseiten (17.09.2026) ──
   Jede Gruppe ist ein eigener .sk-b-Abschnitt mit Abschnitts-Kopf (global.css). Der Kopf trägt die
   Überschrift; die alte Gruppen-Zeile (.sk-rl-kopf) gibt es dort nicht mehr. Karten bleiben unverändert. */
.sk-rl-abschnitt .sk-section-head { margin-bottom: 56px; }
/* Köpfe ohne Untertitel: Titel über beide Kopf-Spalten, sonst bricht „Onepager & Landingpages“ unnötig um */
.sk-rl-abschnitt .sk-section-head .sk-section-title { grid-column: 1 / -1; }
@media (max-width: 767px) { .sk-rl-abschnitt .sk-section-head { margin-bottom: 36px; } }
/* GLOBAL-8 (19.10.2026): „Sonderanforderungen“ ist in der Mindestgröße des Titels (32 px) breiter als 320 px und stand
   10 px im Seitenrand. Bis 400 px darf der Titel trennen (lang="de"); die Grenzen halten kurze Wörter ganz. */
@media (max-width: 400px) {
  .sk-rl-abschnitt .sk-section-title {
    -webkit-hyphens: auto; hyphens: auto;
    -webkit-hyphenate-limit-before: 4; -webkit-hyphenate-limit-after: 4; hyphenate-limit-chars: 10 4 4;
  }
  /* Ein getrenntes Wort füllt als inline-block die ganze Zeile — mit dem Polster der Wort-Hülle (0,04em, global.css)
     stand seine Box 1,3 px im Rand. Obergrenze wie im Seitenkopf (KOPF-1). */
  .sk-rl-abschnitt .sk-section-title .word,
  .sk-rl-abschnitt .sk-section-title .word > span { max-width: 100%; }
}
/* NZ-34 (19.10.2026): Branchen-Label in Teilen (teileLabel, _bausteine/hilfen.mjs). Bis 1279 px bricht es nur zwischen den
   Teilen um; der Trenner „·“ beginnt dann die neue Zeile, statt am Ende der alten zu hängen. Ab 1280 px bleibt das Label
   wie gesetzt (Text Zeichen für Zeichen gleich). */
@media (max-width: 1279px) {
  .sk-rl-tag .mono-label { display: flex; flex-wrap: wrap; column-gap: .5em; }
  .sk-rl-tag .sk-trenner { display: none; }
  .sk-rl-tag .sk-teil ~ .sk-teil::before { content: '·'; margin-right: .5em; }
}

/* ═══ 42-ref-auswahl ═══ */
/* ═══ 42 · REF-AUSWAHL — Abschnitts-Kopf + Karten aus 60-ref-liste + Link zu allen Referenzen ═══
   Die Karten-Optik kommt komplett aus sections/60-ref-liste/ref-liste.css (Chat A). Hier nur der Rahmen:
   .sk-rl bringt eigenen Innenabstand für die Referenzen-Seite mit — im Baustein übernimmt .sk-b den Rhythmus. */

.sk-b-refs .sk-rl { padding-block: 0; }

.sk-b-refs-fuss { display: flex; justify-content: flex-end; margin-top: 40px; }
.sk-b-refs-link {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding-block: 10px;
  font-size: 16px; font-weight: 600;
  color: var(--color-heading);
  border-bottom: 1px solid var(--color-border-strong);
  transition: color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease), gap var(--duration-fast) var(--ease);
}
.sk-b-refs-link svg { width: 17px; height: 17px; color: var(--color-brand-main); }
@media (hover: hover) and (pointer: fine) {
  .sk-b-refs-link:hover { color: var(--color-brand-main); border-color: var(--color-brand-main); gap: 14px; }
}
.sk-b-refs-link:focus-visible { outline: 2px solid var(--color-brand-main); outline-offset: 4px; border-radius: 2px; }

/* 768–1279 px (2 und 3 Spalten aus 60-ref-liste): Karten mit und ohne Bewertung stehen nebeneinander, in der Karte
   ohne Bewertung klaffte dann 200–240 px Leere. Keine Reihenfolge passt zugleich für 3 und 2 Spalten →
   hier nur das Zitat ausblenden (Bewertungen bleiben auf den Detailseiten und im Anspruch-Abschnitt).
   KLEIN-3 (20.10.2026): bis 1279 px statt 1024 px — auf iPad quer (drei Spalten) klafften sonst 266 px. Ab 1280 px unverändert. */
@media (min-width: 768px) and (max-width: 1279px) {
  .sk-b-refs .sk-rl-karte--stimme .sk-st--karte { display: none; }
}

@media (max-width: 767px) {
  .sk-b-refs-fuss { justify-content: flex-start; margin-top: 32px; }
  /* Einspaltig nur die ersten drei Karten: sechs untereinander waren 3.800 px hoch und schoben Preise und
     Anfrage (die Ziele der Seite) weit nach unten. „Alle Referenzen“ steht direkt darunter. */
  .sk-b-refs .sk-rl-grid > :nth-child(n + 4) { display: none; }
}
/* NZ-14 (19.10.2026): Handy quer (600–767 px) 2 × 2 statt einer Spalte mit 710 px breiten Karten (Abschnitt 8,4 Bildschirme):
   vier Karten, ohne Zitat wie bei 768–1024 px. Steht nach dem Block bis 767 px, sonst gewinnt dessen display: none. */
@media (min-width: 600px) and (max-width: 767px) {
  .sk-b-refs .sk-rl-grid--kompakt { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .sk-b-refs .sk-rl-grid > :nth-child(4) { display: flex; }
  .sk-b-refs .sk-rl-karte--stimme .sk-st--karte { display: none; }
}

/* ═══ 33-preiskarten ═══ */
/* ═══ 33 · PREISKARTEN — helle Paket-Karten der Unterseiten ═══
   Grammatik wie 08-pricing (Badge · Beschreibung · Betrag · Häkchen · Button), aber ohne Theme-Wechsel.
   2–3 Karten: Raster mit Subgrid → Name, Beschreibung, Betrag, Liste und Button stehen über alle Karten
   auf gleicher Höhe, egal wie lang die Beschreibung ist. Die Hüllen .sk-b-preise-kern/-details sind dort
   display: contents und werden erst bei EINER Karte zu echten Spalten (links Preis, rechts Inhalt).
   Hervorgehoben = 1 px Verlaufs-Rand (zwei Hintergründe: Karte auf padding-box, Verlauf auf border-box)
   + --shadow-brand. Hover wie überall: Markenrand, Karten-Schatten, 2 px anheben (20.09.2026). */

.sk-b-preise-raster { display: grid; gap: 0 24px; align-items: stretch; }
.sk-b-preise-raster--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sk-b-preise-raster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; }

/* ── Karte ── */
.sk-b-preise-karte {
  position: relative;
  padding: 32px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--duration-fast) var(--ease),
              box-shadow var(--duration-fast) var(--ease),
              transform var(--duration-fast) var(--ease);
}
/* Das Muster aus 04-features / 60-ref-liste, damit die Preiskarten sich anfühlen wie der Rest der Seite.
   Bis 20.09.2026 wechselte nur die Randfarbe — Tunahan: „die Kasten haben kein Hover".
   `transform` fasst das Layout nicht an, die Subgrid-Zeilen der 2–3 Karten bleiben also auf gleicher Höhe. */
@media (hover: hover) and (pointer: fine) {
  .sk-b-preise-karte:not(.sk-b-preise-karte--hervor):hover {
    border-color: var(--color-brand-main);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px);
  }
  /* Die hervorgehobene Karte behält ihren Verlaufs-Rand (der Rand ist dort ein Hintergrund, keine Farbe)
     und steigert nur ihren eigenen Schatten. Ohne das wäre ausgerechnet die wichtigste Karte die einzige
     tote auf der Seite. */
  .sk-b-preise-karte--hervor:hover {
    box-shadow: var(--shadow-brand-hover);
    transform: translateY(-2px);
  }
  /* Die Karte ist ein <article>, kein Link — der Hover würde also ins Leere zeigen. Deshalb nimmt der
     Button in der Karte den Zustand mit auf: Die Bewegung führt zu dem, was man anklicken kann. */
  .sk-b-preise-karte:hover .btn-secondary { border-color: transparent; color: var(--color-brand-darker); }
  .sk-b-preise-karte:hover .btn-secondary::before { opacity: 1; }
}
.sk-b-preise-karte--hervor {
  border-color: transparent;
  background:
    linear-gradient(var(--color-bg-card), var(--color-bg-card)) padding-box,
    var(--grad-brand) border-box;
  box-shadow: var(--shadow-brand);
}

/* 2–3 Karten: jede Karte belegt 5 Zeilen des Rasters und übernimmt sie (Subgrid) */
.sk-b-preise-raster:not(.sk-b-preise-raster--1) .sk-b-preise-karte {
  grid-row: span 5;
  display: grid; grid-template-rows: subgrid; row-gap: 0;
}
.sk-b-preise-raster:not(.sk-b-preise-raster--1) :is(.sk-b-preise-kern, .sk-b-preise-details) { display: contents; }
.sk-b-preise-raster:not(.sk-b-preise-raster--1) .sk-b-preise-name         { grid-row: 1; }
.sk-b-preise-raster:not(.sk-b-preise-raster--1) .sk-b-preise-beschreibung { grid-row: 2; }
.sk-b-preise-raster:not(.sk-b-preise-raster--1) .sk-b-preise-betrag       { grid-row: 3; }
.sk-b-preise-raster:not(.sk-b-preise-raster--1) .sk-b-preise-inhalt       { grid-row: 4; }
.sk-b-preise-raster:not(.sk-b-preise-raster--1) .sk-b-preise-aktion       { grid-row: 5; align-self: end; }

/* ── Lichtrand (paket.glanz — Starter, Wunsch Tunahan 06.10.2026) ──
   Dasselbe Muster wie die „Ausgewählten Projekte“ (60-ref-liste): Ein heller Punkt wandert als
   conic-gradient um die Karte, dahinter ein weichgezeichneter Lichthof. Beides hängt an der Hülle
   .sk-b-preise-glanz, NICHT an der Karte: Die Hülle trägt data-rise und hat selbst keinen Hintergrund —
   so liegt ::after (z-index -1) sicher HINTER der weißen Karte und ::before als Ring darüber. isolation
   hält den Lichthof über dem Abschnittsgrund, auch wenn data-rise aus ist. Der Ring ersetzt den
   Verlaufs-Rand der hervorgehobenen Karte. Läuft nur, solange die Karte im Bild ist (preiskarten.js). */
@property --sk-pk-winkel { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.sk-b-preise-glanz {
  position: relative; isolation: isolate;
  display: flex;
  border-radius: var(--radius-lg);
  transition: transform var(--duration-fast) var(--ease);
}
.sk-b-preise-glanz > .sk-b-preise-karte { flex: 1; border-color: transparent; background: var(--color-bg-card); }
/* 2–3 Karten: Die Hülle übernimmt die fünf Zeilen und reicht sie an die Karte weiter (Subgrid im Subgrid),
   damit Name, Betrag und Button der Starter-Karte weiter mit den Nachbarkarten fluchten. */
.sk-b-preise-raster:not(.sk-b-preise-raster--1) .sk-b-preise-glanz {
  grid-row: span 5;
  display: grid; grid-template-rows: subgrid; row-gap: 0;
}
.sk-b-preise-glanz::before,
.sk-b-preise-glanz::after {
  content: ''; position: absolute; pointer-events: none;
  animation: sk-pk-umlauf 7s linear infinite paused;
}
/* Ring: Fläche minus Innenfläche per Maske */
.sk-b-preise-glanz::before {
  inset: 0; z-index: 4; padding: 2px; border-radius: inherit;
  background:
    conic-gradient(from var(--sk-pk-winkel),
      transparent 0deg 250deg,
      rgba(139, 92, 246, 0.4) 290deg,
      var(--color-brand-lighter) 322deg,
      #60A5FA 343deg,
      #FFFFFF 352deg,
      transparent 360deg),
    linear-gradient(135deg, rgba(37, 99, 235, 0.35) 0%, rgba(109, 40, 217, 0.35) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* Lichthof hinter der Karte */
.sk-b-preise-glanz::after {
  inset: -2px; z-index: -1; border-radius: calc(var(--radius-lg) + 2px);
  background: conic-gradient(from var(--sk-pk-winkel),
    transparent 0deg 275deg,
    rgba(139, 92, 246, 0.55) 322deg,
    rgba(96, 165, 250, 0.6) 346deg,
    transparent 360deg);
  filter: blur(14px);
}
.sk-b-preise-glanz.is-sichtbar::before,
.sk-b-preise-glanz.is-sichtbar::after { animation-play-state: running; }
@keyframes sk-pk-umlauf { to { --sk-pk-winkel: 360deg; } }
/* Hover: Die HÜLLE hebt sich (Ring und Lichthof gehen mit), die Karte darin bleibt stehen — sonst rutschte
   sie 2 px unter dem Ring weg. Den stärkeren Schatten bekommt weiter die Karte. Kein Tempowechsel beim
   Hover: eine neue animation-duration ließe das Licht an eine andere Stelle springen (60-ref-liste). */
@media (hover: hover) and (pointer: fine) {
  .sk-b-preise-glanz:hover { transform: translateY(-2px); }
  .sk-b-preise-glanz > .sk-b-preise-karte:hover {
    transform: none;
    border-color: transparent;
    box-shadow: var(--shadow-brand-hover);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sk-b-preise-glanz::before { animation: none; }
  .sk-b-preise-glanz::after { display: none; }
}

/* ── Teile ── */
.sk-b-preise-name { font-size: inherit; line-height: 1; }
.sk-b-preise-name .badge { padding: 6px 12px; font-size: 16px; font-weight: 600; letter-spacing: -0.005em; }
.sk-b-preise-beschreibung {
  margin-top: 16px;
  font-size: 16px; line-height: 1.55;
  color: var(--color-text-muted);
  max-width: 32em;                     /* ≤ 70 Zeichen, auch in der breiten Einzelkarte */
  text-wrap: pretty;
}

/* Betrag: Zahl groß in Manrope, Zusätze („ab“, „/ Monat“) klein in Mono.
   Bewusst KEINE tabular-nums: Die Beträge stehen nie untereinander, und tabellarische Ziffern reißen
   bei „125“ ein Loch hinter der 1. Mono als Zahlenschrift getestet (16.09.) — wirkt neben dem
   Text-Preis „Festpreis“ (Manrope) unruhig. */
.sk-b-preise-betrag {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px;
  margin-top: 28px; padding-bottom: 24px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-heading);
}
.sk-b-preise-zahl {
  font-size: 56px; font-weight: 700; line-height: 1;
  letter-spacing: -0.04em; font-variant-numeric: lining-nums;
}
.sk-b-preise-waehrung { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
.sk-b-preise-ab,
.sk-b-preise-einheit {
  font-family: var(--font-mono); font-size: 16px; font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
}
.sk-b-preise-ab { margin-right: 2px; }
.sk-b-preise-einheit { margin-left: 2px; }
/* „zzgl. MwSt.“ immer in eigener Zeile unter dem Betrag — so stehen die Beträge der Nachbarkarten gleich hoch,
   egal ob dort „/ Monat“ folgt (Preise netto, Tunahan 08.10.2026). */
.sk-b-preise-mwst { flex-basis: 100%; margin-top: 10px; font-size: 16px; line-height: 1.4; color: var(--color-text-muted); }
/* Text-Preis („Festpreis“, „Preis auf Anfrage“): wörtlich, groß, aber eine Stufe unter der Zahl */
.sk-b-preise-wort {
  font-size: 40px; font-weight: 700; line-height: 1.05;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
/* Fluchtet die Grundlinie des Text-Preises ungefähr mit den Zahlen der Nachbarkarte */
.sk-b-preise-raster:not(.sk-b-preise-raster--1) .sk-b-preise-betrag { align-content: end; }

/* Häkchen-Liste: Haken als Maske, Farbe = Marken-Token */
.sk-b-preise-inhalt { padding-top: 24px; }
.sk-b-preise-liste { display: flex; flex-direction: column; gap: 10px; list-style: none; }
.sk-b-preise-liste li {
  position: relative; padding-left: 28px;
  max-width: 34em;                     /* 34em minus Haken-Einzug ≈ 64 Zeichen */
  font-size: 16px; line-height: 1.5;
  color: var(--color-body);
  /* balance statt pretty: Punkte sind meist zweizeilig, und pretty lässt dort ein langes Wort allein
     in der zweiten Zeile stehen („Werkzeug‑Auswahl“). balance teilt die Zeilen gleichmäßig. */
  text-wrap: balance;
}
.sk-b-preise-liste li::before {
  content: ''; position: absolute; left: 0; top: 3px;
  width: 17px; height: 17px;
  background: var(--color-brand-main);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center / contain no-repeat;
}
.sk-b-preise-optional {
  margin-top: 18px; padding-top: 14px;
  border-top: 1px dashed var(--color-border);
  /* Einzelkarte / einspaltig: Text höchstens 34em breit (bis 94 Zeichen gemessen), die gestrichelte Linie
     bleibt trotzdem kartenbreit — darum Innenabstand rechts statt max-width */
  padding-right: max(0px, calc(100% - 34em));
  font-size: 16px; line-height: 1.5;
  color: var(--color-text-muted);
  text-wrap: pretty;
}

.sk-b-preise-aktion { padding-top: 32px; }
.sk-b-preise-aktion .btn { width: 100%; }

/* ── Hinweis unter den Karten ── */
.sk-b-preise-hinweis {
  max-width: 34em; margin-top: 32px;   /* ≈ 68 Zeichen (70ch ergaben bis 84) */
  font-size: 16px; line-height: 1.6;
  color: var(--color-text-muted);
  text-wrap: pretty;
}
.sk-b-preise-hinweis strong { font-weight: 600; color: var(--color-heading); }
.sk-b-preise-hinweis a { color: var(--color-brand-main); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--color-brand-subtle); }
@media (hover: hover) and (pointer: fine) { .sk-b-preise-hinweis a:hover { text-decoration-color: currentColor; } }   /* WISCH-13: Hover nur mit Maus */
.sk-b-preise-hinweis a:focus-visible { outline: 2px solid var(--color-brand-main); outline-offset: 2px; border-radius: 2px; }

/* ── EIN Paket: breite Karte, links Preis + Button, rechts Beschreibung + Liste ── */
.sk-b-preise-raster--1 .sk-b-preise-karte {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px;
  padding: 48px;
}
.sk-b-preise-raster--1 .sk-b-preise-kern { display: flex; flex-direction: column; }
.sk-b-preise-raster--1 .sk-b-preise-betrag { border-bottom: 0; padding-bottom: 0; margin-top: 32px; }
.sk-b-preise-raster--1 .sk-b-preise-aktion { align-self: flex-start; margin-top: auto; padding-top: 40px; }
.sk-b-preise-raster--1 .sk-b-preise-aktion .btn { width: auto; }
.sk-b-preise-raster--1 .sk-b-preise-details {
  display: flex; flex-direction: column; justify-content: center;
  padding-left: 56px;
  border-left: 1px solid var(--color-border);
}
.sk-b-preise-raster--1 .sk-b-preise-beschreibung { margin-top: 0; font-size: 17px; color: var(--color-body); }
.sk-b-preise-raster--1 .sk-b-preise-inhalt { padding-top: 24px; }
.sk-b-preise-raster--1 .sk-b-preise-beschreibung + .sk-b-preise-inhalt { margin-top: 24px; border-top: 1px solid var(--color-border); }

/* ── Schmaler ── */
@media (max-width: 1100px) {
  .sk-b-preise-raster--3 .sk-b-preise-karte { padding: 28px 24px; }
  .sk-b-preise-zahl { font-size: 48px; }
  /* 30 statt 34 px (NZ-50, 19.10.2026): Ab hier steht der Abschnittstitel auf seinem Minimum (32 px) — der Text-Preis
     lag darüber und las sich wie eine zweite Überschrift. Jetzt eine Stufe unter dem Titel, wie oben gemeint. */
  .sk-b-preise-wort { font-size: 30px; }
}
/* PK-2 (19.10.2026): In den Dreier-Rastern sind die Karten unter 1280 px zu schmal für lange Knopftexte („Mehr zur
   Automatisierung“) — .btn bricht nie um und ragte bis 27 px über die Karte. Hier darf der Text umbrechen, ausgewogen
   und mittig; was passt, bleibt einzeilig wie bisher. Ab 1280 px greift nichts. */
@media (max-width: 1279px) {
  .sk-b-preise-raster--3 .sk-b-preise-aktion .btn { white-space: normal; text-wrap: balance; text-align: center; padding-inline: 18px; }
}
@media (max-width: 900px) {
  /* Dreier-Raster ab hier untereinander (701–900 px als Querkarten, s. Ende); das Zweier-Raster erst ≤ 700 px
     (WISCH-7, E3 = a, 19.10.2026 — von 701 bis 900 px Subgrid und zwei Spalten wie am Desktop) */
  .sk-b-preise-raster--3 { grid-template-columns: 1fr; gap: 20px; }
  /* einspaltig: kein Subgrid mehr nötig, jede Karte für sich. .sk-b-preise-raster.…--3 hält die Spezifität 0,3,0 (Z. 55). */
  .sk-b-preise-raster.sk-b-preise-raster--3 .sk-b-preise-karte { grid-row: auto; display: flex; flex-direction: column; }
  /* PK-1 (19.10.2026): auch die Lichtrand-Hülle der Starter-Karte — sonst belegte sie weiter 5 Zeilen und ihr Ring
     rahmte 70 px leeren Streifen unter der Karte. Die Karte füllt die Hülle über flex: 1. */
  .sk-b-preise-raster.sk-b-preise-raster--3 .sk-b-preise-glanz { grid-row: auto; display: flex; }
  .sk-b-preise-raster.sk-b-preise-raster--3 :is(.sk-b-preise-name, .sk-b-preise-beschreibung, .sk-b-preise-betrag, .sk-b-preise-inhalt, .sk-b-preise-aktion) { grid-row: auto; }
  .sk-b-preise-raster.sk-b-preise-raster--3 .sk-b-preise-aktion { align-self: stretch; }
  /* Reihenfolge wie Desktop: Name · Beschreibung · Betrag · Liste · Button */
  .sk-b-preise-name { order: 1; }
  .sk-b-preise-beschreibung { order: 2; }
  .sk-b-preise-betrag { order: 3; }
  .sk-b-preise-inhalt { order: 4; }
  .sk-b-preise-aktion { order: 5; }

  .sk-b-preise-raster--1 .sk-b-preise-karte { grid-template-columns: 1fr; gap: 0; padding: 32px; }
  .sk-b-preise-raster--1 .sk-b-preise-kern { display: contents; }
  .sk-b-preise-raster--1 .sk-b-preise-details { display: contents; }
  .sk-b-preise-raster--1 .sk-b-preise-karte { display: flex; flex-direction: column; }
  .sk-b-preise-raster--1 .sk-b-preise-betrag { margin-top: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--color-border); }
  .sk-b-preise-raster--1 .sk-b-preise-beschreibung { margin-top: 16px; font-size: 16px; color: var(--color-text-muted); }
  .sk-b-preise-raster--1 .sk-b-preise-beschreibung + .sk-b-preise-inhalt { margin-top: 0; border-top: 0; }
  .sk-b-preise-raster--1 .sk-b-preise-aktion { align-self: stretch; margin-top: 0; padding-top: 28px; }
  .sk-b-preise-raster--1 .sk-b-preise-aktion .btn { width: 100%; }
}
/* Zweier-Raster ≤ 700 px untereinander — dieselben Regeln wie oben für das Dreier-Raster, samt Lichtrand-Hülle (PK-1) */
@media (max-width: 700px) {
  .sk-b-preise-raster--2 { grid-template-columns: 1fr; gap: 20px; }
  .sk-b-preise-raster.sk-b-preise-raster--2 .sk-b-preise-karte { grid-row: auto; display: flex; flex-direction: column; }
  .sk-b-preise-raster.sk-b-preise-raster--2 .sk-b-preise-glanz { grid-row: auto; display: flex; }
  .sk-b-preise-raster.sk-b-preise-raster--2 :is(.sk-b-preise-name, .sk-b-preise-beschreibung, .sk-b-preise-betrag, .sk-b-preise-inhalt, .sk-b-preise-aktion) { grid-row: auto; }
  .sk-b-preise-raster.sk-b-preise-raster--2 .sk-b-preise-aktion { align-self: stretch; }
}
@media (max-width: 767px) {
  .sk-b-preise-karte,
  .sk-b-preise-raster--1 .sk-b-preise-karte,
  .sk-b-preise-raster--3 .sk-b-preise-karte { padding: 24px 20px; }
  .sk-b-preise-zahl { font-size: 44px; }
  .sk-b-preise-wort { font-size: 28px; }   /* NZ-50: unter dem 32-px-Titel (vorher 30 px, fast gleich groß) */
  .sk-b-preise-hinweis { margin-top: 24px; }
}

/* ── Tablet hoch (701–900 px): Dreier-Raster als Querkarten (WISCH-7, E3 = a, 19.10.2026) ──
   Drei 420–470 px hohe Karten mit 654–706 px breiten Pillen-Knöpfen standen untereinander, der Inhalt nur im linken
   Drittel. Jetzt das Muster der Einzelkarte: links Name, Betrag und Knopf (≥ 284 px), rechts Beschreibung und Liste,
   getrennt durch eine Haarlinie. Spezifität 0,3,0 — schlägt die einspaltigen Regeln oben. */
@media (min-width: 701px) and (max-width: 900px) {
  .sk-b-preise .sk-b-preise-raster--3 .sk-b-preise-karte { display: grid; grid-template-columns: minmax(284px, 5fr) minmax(0, 7fr); column-gap: 36px; padding: 32px 28px; }
  .sk-b-preise .sk-b-preise-raster--3 .sk-b-preise-kern { display: flex; flex-direction: column; }
  .sk-b-preise .sk-b-preise-raster--3 .sk-b-preise-details { display: flex; flex-direction: column; justify-content: center; padding-left: 36px; border-left: 1px solid var(--color-border); }
  .sk-b-preise .sk-b-preise-raster--3 .sk-b-preise-betrag { border-bottom: 0; padding-bottom: 0; margin-top: 20px; }
  .sk-b-preise .sk-b-preise-raster--3 .sk-b-preise-aktion { margin-top: auto; padding-top: 24px; }
  .sk-b-preise .sk-b-preise-raster--3 .sk-b-preise-beschreibung { margin-top: 0; }
  .sk-b-preise .sk-b-preise-raster--3 .sk-b-preise-inhalt { padding-top: 0; }
  .sk-b-preise .sk-b-preise-raster--3 .sk-b-preise-beschreibung + .sk-b-preise-inhalt { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--color-border); }
}

/* ═══ 35-anspruch ═══ */
/* ═══ 35 · ANSPRUCH — Text links, Bewertung rechts (auf grauer Fläche .sk-b--flaeche) ═══
   Die Bewertung ist Typografie statt Grafik: große „5,0“, darüber die Sterne, darunter die Quellen.
   Sterngelb = --color-star (global.css, wie 01-hero). */

/* Folgt die FAQ (ebenfalls grau), regelt global.css den Abstand: dort entfällt ihr oberer Abstand,
   zwischen beiden stehen 128 px wie zwischen zwei weißen Abschnitten. Die frühere Haarlinie unten
   hätte dann direkt über dem FAQ-Kopf geklebt. */

/* 50 : 50 seit 18.10.2026 (vorher 7 : 5, Fuge 96) — die Karte beginnt auf der Mittelachse wie jeder Untertitel */
.sk-b-anspruch-raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 64px;
  align-items: center;
}

/* ── Links ── */
.sk-b-anspruch-kopf .eyebrow { margin-bottom: 24px; }
.sk-b-anspruch-titel { max-width: 14ch; }   /* Größe: .sk-section-title (global.css) */
.sk-b-anspruch-text {
  max-width: 32em; margin-top: 32px;   /* ≤ 70 Zeichen (60ch ergaben bis 77) */
  font-size: 18px; line-height: 1.6;
  color: var(--color-body);
  text-wrap: pretty;
}
.sk-b-anspruch-text + .sk-b-anspruch-text { margin-top: 16px; }

/* ── Rechts: Bewertung als weiße Karte auf der Fläche ── */
.sk-b-anspruch-bewertung {
  padding: 44px 44px 36px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-hover);
}
.sk-b-anspruch-sterne { display: inline-flex; gap: 4px; }
.sk-b-anspruch-sterne svg { width: 26px; height: 26px; fill: var(--color-star); }

.sk-b-anspruch-wert { display: flex; flex-direction: column; gap: 22px; margin-top: 22px; }
.sk-b-anspruch-note {
  font-size: clamp(88px, 8vw, 128px); font-weight: 700; line-height: 0.9;
  letter-spacing: -0.05em; font-variant-numeric: lining-nums;
  color: var(--color-heading);
}
.sk-b-anspruch-quellen { font-size: 17px; color: var(--color-text-muted); }
.sk-b-anspruch-quellen a {
  display: inline-block; padding-block: 10px; margin-block: -10px;   /* größere Tippfläche ohne Zeilensprung */
  font-weight: 600; color: var(--color-heading);
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: var(--color-border-strong);
  transition: color var(--duration-fast) var(--ease), text-decoration-color var(--duration-fast) var(--ease);
}
/* Hover nur mit Maus (LINK-1, 19.10.2026): auf Touch blieb der Link nach dem Tippen lila */
@media (hover: hover) and (pointer: fine) {
  .sk-b-anspruch-quellen a:hover { color: var(--color-brand-main); text-decoration-color: currentColor; }
}
.sk-b-anspruch-quellen a:focus-visible { outline: 2px solid var(--color-brand-main); outline-offset: 2px; border-radius: 2px; }

.sk-b-anspruch-projekte {
  display: flex; align-items: baseline; gap: 10px;
  margin-top: 32px; padding-top: 22px;
  border-top: 1px solid var(--color-border);
  font-size: 16px; color: var(--color-text-muted);
}
.sk-b-anspruch-zahl {
  font-family: var(--font-mono); font-size: 16px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-brand-main);
}

/* ── Schmaler ── */
@media (max-width: 1100px) {
  .sk-b-anspruch-raster { gap: 56px; }
  .sk-b-anspruch-bewertung { padding: 36px 32px 30px; }
}
@media (max-width: 900px) {
  .sk-b-anspruch-raster { grid-template-columns: 1fr; gap: 40px; }
  .sk-b-anspruch-titel { max-width: none; }
}
@media (max-width: 767px) {
  .sk-b-anspruch-text { font-size: 17px; margin-top: 24px; }
  .sk-b-anspruch-text + .sk-b-anspruch-text { margin-top: 14px; }
  .sk-b-anspruch-bewertung { padding: 28px 24px 24px; }
  .sk-b-anspruch-sterne svg { width: 22px; height: 22px; }
}
/* Handy quer (600–900 × ≤ 520 px, ANSP-1, 19.10.2026): Text und Karte nebeneinander wie am Desktop.
   Am Dateiende, damit das Kartenpolster bei 600–767 px den ≤ 767-Block schlägt. */
@media (min-width: 600px) and (max-width: 900px) and (max-height: 520px) {
  .sk-b-anspruch-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: center; }
  .sk-b-anspruch-bewertung { padding: 28px 28px 24px; }
}
/* Tablet hoch (700–900 × ≥ 521 px, ANSP-2 = B2, 19.10.2026): Bewertungskarte in zwei gleiche Hälften — links Sterne,
   „5,0“ und Quelle, rechts „72+ Projekte“, Haarlinie auf der Mittelachse (wie die 50 : 50-Köpfe). Vorher stand der Inhalt
   in 219 px links, zwei Drittel der Karte blieben leer. Handys quer bleiben bei ANSP-1 (Höhe trennt). */
@media (min-width: 700px) and (max-width: 900px) and (min-height: 521px) {
  .sk-b-anspruch-bewertung { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; column-gap: 0; padding: 36px 40px 32px; }
  .sk-b-anspruch-sterne { grid-column: 1; grid-row: 1; justify-self: start; }
  .sk-b-anspruch-wert { grid-column: 1; grid-row: 2; }
  .sk-b-anspruch-projekte { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; flex-wrap: wrap; align-content: center; margin: 0; padding: 0 0 0 40px; border-top: 0; border-left: 1px solid var(--color-border); }
}

/* ═══ 10-faq ═══ */
/* ═══ 10 · FAQ — Styles (2 Spalten, sticky Kopf, Akkordeon mit Plus-Icon) ═══
   Form 1:1 wie v4. Ebenen: rise = Einblenden (global.css) · nocv = Offscreen-Pause AUS.
   Anders als v4: kein will-change aufs Icon (11 Dauer-Ebenen für eine 240-ms-Drehung),
   Klickfläche der Frage reicht bis an die Item-Kante (v4: nur die ~25 px hohe Textzeile),
   Hover nur mit Maus, sichtbarer Tastatur-Fokus. */

.sk-faq {
  background: var(--color-bg-accent);
  padding-block: 120px;
  content-visibility: auto;
  contain-intrinsic-size: auto 1037px;   /* Inhalt ohne Padding ≥1101 (v4-Wert 1114 war veraltet) — weitere Breiten unten */
}
/* Weiße FAQ: wo davor schon eine graue Fläche liegt (Wechsel weiß/grau, Tunahan 06.10.2026 — /preise/, KI-Beratung, Automatisierung) */
.sk-faq--weiss { background: var(--color-bg-light); }
html[data-layers~="nocv"] .sk-faq { content-visibility: visible; }

/* ── Zwei Spalten: Kopf klebt links, Fragen rechts ── */
/* 50 : 50 seit 18.10.2026 (vorher 1 : 1,4) — die Fragen beginnen auf derselben Mittelachse wie jeder Untertitel (global.css) */
.sk-faq-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: start; }
/* sticky lebt komplett INNERHALB der Section — verträgt sich mit content-visibility */
.sk-faq-head { position: sticky; top: 100px; }
.sk-faq-head .section-num { display: block; margin-bottom: 12px; }
.sk-faq-head .eyebrow { margin-bottom: 24px; }
.sk-faq-title { margin-bottom: 16px; }   /* Größe: .sk-section-title (global.css) */
.sk-faq-head p { font-size: 17px; color: var(--color-text-muted); margin-bottom: 28px; max-width: 36ch; }

/* ── Akkordeon ── */
.sk-faq-list { display: flex; flex-direction: column; border-top: 1px solid var(--color-border); }
.sk-faq-item { border-bottom: 1px solid var(--color-border); padding: 24px 0; }
.sk-faq-item summary {
  /* z-index: die Antwort (contain: paint = eigene Ebene) liegt sonst über dem
     unteren Klickstreifen — der Klick knapp unter der Frage ginge ins Leere */
  position: relative; z-index: 1;
  display: flex; justify-content: space-between; align-items: center;
  /* Klickfläche 24 px nach oben, 16 px nach unten (bis zur Antwort) aufgezogen —
     die negativen Margins nehmen das Padding wieder weg, nichts verschiebt sich */
  margin: -24px 0 -16px; padding: 24px 0 16px;
  border-radius: var(--radius-sm);
  cursor: pointer; list-style: none;
  font-size: 18px; font-weight: 600; line-height: 1.4;
  color: var(--color-heading);
}
.sk-faq-item summary::-webkit-details-marker { display: none; }
@media (hover: hover) and (pointer: fine) {
  .sk-faq-item summary:hover { color: var(--color-brand-main); }
}
/* FAQ-5 (19.10.2026): Tipp-Rückmeldung auf Touch wie der Maus-Hover — Frage und Icon lila, solange der Finger liegt.
   Kein Kasten: die Klickfläche reicht absichtlich bis an die Trennlinie. Den Browser-Kasten schaltet global.css ab (GLOBAL-4). */
@media (hover: none) {
  .sk-faq-item summary:active { color: var(--color-brand-main); }
  .sk-faq-item summary:active .sk-faq-icon { background: var(--color-brand-main); color: #fff; }
}
/* Fokusring als Pseudo-Rahmen statt outline: die Klickfläche reicht bis an Trennlinie und
   Antwort — ein outline läge genau darauf. So sitzt er mit Luft um die Frage-Zeile. */
.sk-faq-item summary:focus-visible { outline: none; }
.sk-faq-item summary:focus-visible::after {
  content: ''; position: absolute; inset: 12px -10px 6px;
  border: 2px solid var(--color-brand-main); border-radius: var(--radius);
  pointer-events: none;
}

/* Plus → Minus: Kreis dreht 180°, der senkrechte Strich legt sich dabei um 90° flach */
.sk-faq-icon {
  position: relative;
  display: grid; place-items: center; flex-shrink: 0;
  width: 28px; height: 28px; margin-left: 16px;
  border-radius: 50%;
  background: var(--color-brand-subtle); color: var(--color-brand-darker);
  transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1), background 200ms ease;
}
.sk-faq-icon::before, .sk-faq-icon::after { content: ''; position: absolute; background: currentColor; }
.sk-faq-icon::before { width: 12px; height: 2px; }
.sk-faq-icon::after  { width: 2px; height: 12px; transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1); }
.sk-faq-item[open] .sk-faq-icon { background: var(--color-brand-main); color: #fff; transform: rotate(180deg); }
.sk-faq-item[open] .sk-faq-icon::after { transform: rotate(90deg); }
/* Beim Schließen ist [open] noch gesetzt, bis die Höhe unten ist — Icon dreht trotzdem sofort zurück */
.sk-faq-item.is-closing .sk-faq-icon { background: var(--color-brand-subtle); color: var(--color-brand-darker); transform: rotate(0deg); }
.sk-faq-item.is-closing .sk-faq-icon::after { transform: rotate(0deg); }

/* Höhen-Wrapper: faq.js animiert NUR ihn. contain hält den Reflow im Block. */
.sk-faq-answer-inner { overflow: hidden; contain: layout paint; }
.sk-faq-answer { margin-top: 16px; font-size: 16px; line-height: 1.6; color: var(--color-text-muted); max-width: 60ch; text-wrap: pretty; }
/* Links in Antworten (vor allem Unterseiten-FAQs, die diese Datei mitladen): als Link erkennbar — lila und
   unterstrichen, nicht nur über die Farbe (grauer Fließtext daneben). Fokus wie die übrigen Textlinks. */
.sk-faq-answer a {
  color: var(--color-brand-main); font-weight: 500;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  border-radius: 2px;
  transition: color var(--duration-fast) var(--ease), text-decoration-color var(--duration-fast) var(--ease);
}
@media (hover: hover) and (pointer: fine) { .sk-faq-answer a:hover { color: var(--color-brand-darker); } }   /* GLOBAL-3: Hover nur mit Maus */
.sk-faq-answer a:focus-visible { outline: 2px solid var(--color-brand-main); outline-offset: 2px; }

/* ── Schmaler ──
   contain-intrinsic-size je Bereich gemessen (Inhalt ohne Padding, scratchpad finish-faq/measure.mjs):
   ≥1101: 1037 · 1025–1100: 1037–1085 · 901–1024: 1059–1129 · 768–900: 1418–1426 ·
   600–767: 1426–1448 · 481–599: 1448–1564 · 414: 1707 · 390: 1755 · 375: 1780.
   Unter 1280 ist v5 niedriger als v4: v4 hatte Section- UND Container-Seitenpadding (mobil 40 px
   Rand statt 20) — v5 nimmt wie alle Abschnitte nur das Container-Padding. */
@media (max-width: 1100px) { .sk-faq { contain-intrinsic-size: auto 1060px; } }
@media (max-width: 1024px) { .sk-faq { contain-intrinsic-size: auto 1095px; } }
@media (max-width: 900px) {
  .sk-faq { contain-intrinsic-size: auto 1422px; }
  .sk-faq-layout { grid-template-columns: 1fr; gap: 40px; }
  .sk-faq-head { position: static; }
  /* NZ-51 (19.10.2026): einspaltig 32em wie jeder Untertitel (global.css) — die 36ch waren für die halbe Spalte
     bemessen, der Absatz brach auf dem iPad in drei kurze Zeilen (373 statt 544 px) */
  .sk-faq-head p { max-width: 32em; }
}
@media (max-width: 767px) {
  .sk-faq { padding-block: 64px; contain-intrinsic-size: auto 1450px; }
}
/* Unter 600 brechen die Fragen Zeile für Zeile öfter um — ≤480 liegt der Block schon bei ~1755 */
@media (max-width: 480px) { .sk-faq { contain-intrinsic-size: auto 1755px; } }
/* FAQ-1 (19.10.2026): Die Schätzwerte oben stimmen nur für die Startseiten-FAQ — die Unterseiten-FAQs (3–8 Fragen)
   laden dieselbe Datei und sind bis 990 px niedriger. Ein Sprung auf #kontakt schoss deshalb übers Ziel, Safari sprang
   beim Hochscrollen. Die FAQ ist leicht (3–10 <details>), das Überspringen spart nichts Messbares: unter 1280 px und auf
   Touch rendert sie immer. Gilt für alle sieben FAQs. Die Werte oben bleiben für den Desktop. */
@media (max-width: 1279px), (pointer: coarse) {
  .sk-faq { content-visibility: visible; }
}
/* FAQ-3 (19.10.2026): Große Handys quer (über 900 px breit, ≤ 520 px hoch) bekommen die zweispaltige Fassung — der
   klebende Kopf (≈ 384 px) war dort höher als das Fenster, „Kostenlose Beratung“ blieb unerreichbar. */
@media (max-width: 1279px) and (max-height: 520px) {
  .sk-faq-head { position: static; }
}
/* FAQ-4 (19.10.2026): kein einzelnes Wort allein in der letzten Zeile einer Frage („Website?“, „mitnehmen?“).
   balance statt pretty — pretty wirkt in Safari 18 nicht. Zeilenzahl und Listenhöhe bleiben gleich (gemessen). */
@media (max-width: 1279px) {
  .sk-faq-item summary > span:first-child { text-wrap: balance; }
}

/* ═══ 34-anfrage ═══ */
/* ═══ 34 · ANFRAGE — Kopf + direkte Wege links, Formular-Karte rechts ═══
   Feld-Optik wie 12-contact (.label/.input dort), hier unter eigenem Namen, weil global.css keine
   Formular-Bausteine hat. 16 px Schrift in den Feldern ab Mobil (iOS zoomt sonst beim Antippen).
   Ruhig: keine Meteore, keine eigene Animation — nur data-rise. */

/* Raster: Kopf links oben, Wege links darunter, Formular-Karte rechts über beide Zeilen.
   Im HTML stehen die Wege NACH der Karte → einspaltig rutschen sie ohne order-Tricks unter das Formular. */
.sk-b-anfrage-raster {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-rows: auto 1fr;
  column-gap: 80px;
  align-items: start;
}
.sk-b-anfrage-kopf  { grid-column: 1; grid-row: 1; }
.sk-b-anfrage-wege  { grid-column: 1; grid-row: 2; }
.sk-b-anfrage-karte { grid-column: 2; grid-row: 1 / span 2; }

/* Direkt nach den Preiskarten (Leistungsseite Webseite): gehört inhaltlich dazu → 128 + 32 px Luft statt 2 × 128 px.
   Überstimmt bewusst die globale Regel „gleiche Fläche → oberer Abstand 0“ (gleiche Spezifität, später geladen). */
.sk-b-preise + .sk-b-anfrage { padding-top: 32px; }

/* ── Links: Kopf ── */
.sk-b-anfrage-kopf { display: flex; flex-direction: column; align-items: flex-start; }
.sk-b-anfrage-kopf .eyebrow { margin-bottom: 24px; }
.sk-b-anfrage-titel { font-size: clamp(36px, 4.2vw, 60px); }
.sk-b-anfrage-text {
  max-width: 40ch; margin-top: 24px;
  font-size: 17px; line-height: 1.55;
  color: var(--color-text-muted);
}

/* Direkte Wege: kleine Zeilen mit Haarlinien, wie die Kontaktzeilen der Startseite, nur leiser */
.sk-b-anfrage-wege {
  display: flex; flex-direction: column;
  max-width: 420px;
  margin-top: 48px;
}
.sk-b-anfrage-wege .mono-label { padding-bottom: 12px; }
.sk-b-anfrage-weg {
  display: grid; grid-template-columns: 36px auto 1fr; align-items: center; gap: 14px;
  min-height: 56px; padding: 10px 0;
  border-top: 1px solid var(--color-border);
  color: var(--color-heading);
  transition: color var(--duration-fast) var(--ease);
}
.sk-b-anfrage-weg:last-child { border-bottom: 1px solid var(--color-border); }
.sk-b-anfrage-weg-icon {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  color: var(--color-brand-main);
  background: var(--color-brand-subtle);
  border-radius: var(--radius);
}
.sk-b-anfrage-weg-icon svg { width: 17px; height: 17px; }
.sk-b-anfrage-weg-art { font-size: 16px; font-weight: 600; }
.sk-b-anfrage-weg-nr {
  justify-self: end;
  font-family: var(--font-mono); font-size: 16px; font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .sk-b-anfrage-weg:hover { color: var(--color-brand-main); }
  .sk-b-anfrage-weg:hover .sk-b-anfrage-weg-nr { color: var(--color-heading); }
}
.sk-b-anfrage-weg:focus-visible { outline: 2px solid var(--color-brand-main); outline-offset: 2px; border-radius: var(--radius-sm); }

/* ── Rechts: Formular-Karte ── */
.sk-b-anfrage-karte {
  position: relative;
  padding: 40px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.sk-b-anfrage-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sk-b-anfrage-feld { margin-bottom: 18px; }

.sk-b-anfrage-label { display: block; margin-bottom: 6px; font-size: 16px; font-weight: 600; color: var(--color-heading); }
.sk-b-anfrage-input {
  display: block; width: 100%;
  padding: 12px 14px;
  font: inherit; font-size: 16px; line-height: 1.5;
  color: var(--color-heading);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  outline: 0;
  transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}
textarea.sk-b-anfrage-input { resize: vertical; min-height: 132px; }
/* VGL-1 (19.10.2026): Auf Touch glättet Lenis nicht, data-lenis-prevent wirkt dort nur über das contain des Lenis-Begleit-CSS
   — ein senkrechter Wisch, der auf dem Nachrichtenfeld beginnt, bewegte die Seite um 0 px. Am Ende des Felds scrollt jetzt
   die Seite weiter wie überall. Maus und Trackpad behalten contain. */
@media (pointer: coarse) {
  .lenis textarea.sk-b-anfrage-input[data-lenis-prevent] { overscroll-behavior: auto; }
}
/* Platzhalter in --color-text-muted (4,8 : 1 auf Weiß) — --color-text-muted-2 hatte nur 2,6 : 1.
   Eingaben stehen in --color-heading und bleiben davon klar unterscheidbar. */
.sk-b-anfrage-input::placeholder { color: var(--color-text-muted); opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .sk-b-anfrage-input:hover { border-color: var(--color-border-strong); }
}
/* Fokus: Markenrand + sichtbarer Ring (--color-brand-subtle allein war auf Weiß kaum zu sehen) */
.sk-b-anfrage-input:focus {
  border-color: var(--color-brand-main);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand-main) 28%, transparent);
}

/* Pflichtfeld-Meldung (anfrage.js): Rand + Text in --color-error, Ring beim Fokus ebenfalls rot getönt */
.sk-b-anfrage-input[aria-invalid="true"] { border-color: var(--color-error); }
.sk-b-anfrage-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-error) 22%, transparent); }
.sk-b-anfrage-meldung {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 8px;
  font-size: 16px; font-weight: 500; line-height: 1.45;
  color: var(--color-error);
}
.sk-b-anfrage-meldung::before {
  content: '!'; flex-shrink: 0;
  display: grid; place-items: center;
  width: 16px; height: 16px; margin-top: 1px;
  font-size: 16px; font-weight: 700; line-height: 1;
  color: var(--color-bg-card); background: var(--color-error);
  border-radius: 50%;
}
.sk-b-anfrage-meldung[hidden] { display: none; }

.sk-b-anfrage-senden { display: flex; align-items: center; gap: 20px; margin-top: 8px; }
.sk-b-anfrage-senden .btn:disabled { cursor: progress; opacity: 0.85; }
.sk-b-anfrage-fuss { font-size: 16px; color: var(--color-text-muted); }

/* Spam-Falle aus dem Bild geschnitten (wie 12-contact) */
.sk-b-anfrage-honig { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Versand-Fehler (Rot nur als leichter Hauch aus --color-error) */
.sk-b-anfrage-fehler {
  margin: 4px 0 18px;
  padding: 12px 14px;
  font-size: 16px; line-height: 1.5;
  color: var(--color-heading);
  background: color-mix(in srgb, var(--color-error) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-error) 25%, transparent);
  border-radius: var(--radius);
}
.sk-b-anfrage-fehler a { font-weight: 600; color: var(--color-brand-main); text-decoration: underline; text-underline-offset: 2px; }
.sk-b-anfrage-fehler a:focus-visible { outline: 2px solid var(--color-brand-main); outline-offset: 2px; }

/* Danke-Karte */
.sk-b-anfrage-erfolg { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 8px; text-align: center; }
.sk-b-anfrage-erfolg-icon {
  display: grid; place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 14%, transparent);
}
.sk-b-anfrage-erfolg-icon svg { width: 26px; height: 26px; }
.sk-b-anfrage-erfolg h3 { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; outline: 0; }
.sk-b-anfrage-erfolg p { max-width: 40ch; color: var(--color-text-muted); }

/* ── Schmaler ── */
@media (max-width: 1100px) {
  .sk-b-anfrage-raster { column-gap: 48px; }
}
@media (max-width: 900px) {
  /* einspaltig in HTML-Reihenfolge: Kopf · Formular · Wege */
  .sk-b-anfrage-raster { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 40px; }
  .sk-b-anfrage-kopf, .sk-b-anfrage-wege, .sk-b-anfrage-karte { grid-column: 1; grid-row: auto; }
  .sk-b-anfrage-wege { max-width: none; margin-top: 0; }
}
@media (max-width: 767px) {
  .sk-b-preise + .sk-b-anfrage { padding-top: 16px; }
  .sk-b-anfrage-karte { padding: 24px 20px; }
  .sk-b-anfrage-zeile { grid-template-columns: 1fr; gap: 0; }
  .sk-b-anfrage-input { font-size: 16px; }
  .sk-b-anfrage-senden { flex-direction: column; align-items: stretch; gap: 12px; }
  .sk-b-anfrage-senden .btn { width: 100%; }
  .sk-b-anfrage-fuss { text-align: center; }
}

/* KONTAKT-5 (19.10.2026): Im dunklen Kontakt hatten die Fehlermeldungen 3,6 : 1 und die Links im Versandfehler 2,45 : 1 (unter AA).
   Dunkel jetzt --color-error-hell (#F87171, 6,3 : 1 auf #1B1922) — die Variable am Formular färbt Meldung, Punkt, Feldrand,
   Fokusring und den Hauch des Fehlerkastens einheitlich um — und für die Links der helle Markenton des dunklen Satzes.
   Nur unter 1280 px bzw. mit Touch: Am Desktop besteht derselbe Mangel, dort bleibt es bis zu einer Freigabe pixelgleich. */
@media (max-width: 1279px), (pointer: coarse) {
  :is(html.theme-dark, .sk-wisch-dunkel) .sk-b-anfrage-form { --color-error: var(--color-error-hell); }
  :is(html.theme-dark, .sk-wisch-dunkel) .sk-b-anfrage-fehler a { color: var(--color-brand-darker); }
  :is(html.theme-dark, .sk-wisch-dunkel) .sk-b-anfrage-fehler a:focus-visible { outline-color: var(--color-brand-darker); }
}

/* ═══ _bausteine/wischdunkel ═══ */
/* ═══ BAUSTEIN · Wisch Hell→Dunkel am Seitenende (Unterseiten) — Styles ═══
   Plan: docs/superpowers/plans/2026-09-19-wisch-unterseiten-neu.md · Mechanik: wischdunkel.js
   Übernommen von sections/08-pricing/wisch/wisch.css (Overlay, Clip, Lagen, Kante, Saum), mit
   eigenem Präfix sk-wischu, damit sich beide nie in die Quere kommen.
   Es gibt hier KEINE Regel, die den Kontakt-Abschnitt dunkel setzt: Er ist ein heller Abschnitt wie
   jeder andere und wird dunkel, weil der Wisch am Ende html.theme-dark setzt (Tunahan 19.09.2026). */

.sk-wischu {
  position: fixed; inset: 0;
  z-index: 51;                   /* über der Nav (50): die Kante läuft auch durch das Dock */
  pointer-events: none;
  display: none;
}
.sk-wischu.is-warm { display: block; opacity: 0; }
.sk-wischu.is-an   { display: block; opacity: 1; }

.sk-wischu-clip {
  position: absolute; inset: 0;
  overflow: hidden;
  background: #0B0A0F;           /* = --color-bg-light unter html.theme-dark (global.css): der Grund,
                                    den die Seite nach dem Commit selbst trägt */
  clip-path: inset(0 100% 0 0);
  will-change: clip-path;
}
.sk-wischu-lage {
  position: absolute; left: 0; right: 0; top: 0;
  margin: 0;
  will-change: transform;
}
/* Nav-Träger: KEIN will-change: transform — das machte ihn zum Bezugsrahmen für `fixed`. */
.sk-wischu-lage--fest { position: static; will-change: auto; }

/* Klone dürfen nicht aussetzen: content-visibility bezieht sich auf den Scroller, das Overlay
   scrollt nicht (FAQ und Footer tragen content-visibility: auto). */
.sk-wischu-lage > * { content-visibility: visible; contain-intrinsic-size: none; }
/* Aufdecken: Die Scroll-Timeline gilt im Overlay nicht — wischdunkel.js kopiert --sk-reveal. Im Fluss (.sk-wischu-fluss, Touch) liegt der
   Träger außerhalb von .sk-wischu: Dort läuft das Aufdecken im Klon an seiner eigenen Scroll-Timeline wie im Original. */
.sk-wischu .sk-wischu-lage [data-reveal] { animation: none !important; }

/* ── Die Kante ── 2 px Linie mit Marken-Schein, wie auf der Startseite. Lage und Maße je Form. */
.sk-wischu-kante {
  position: absolute;
  background: rgba(255, 255, 255, 0.34);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 0 28px 2px rgba(139, 92, 246, 0.38);
  transform: translate3d(0, 0, 0);
  will-change: transform;
}
.sk-wischu[data-form="links"]  .sk-wischu-kante,
.sk-wischu[data-form="rechts"] .sk-wischu-kante { top: 0; bottom: 0; left: -1px; width: 2px; }
.sk-wischu[data-form="oben"]   .sk-wischu-kante,
.sk-wischu[data-form="unten"]  .sk-wischu-kante { left: 0; right: 0; top: -1px; height: 2px; }
.sk-wischu[data-form^="diagonal"] .sk-wischu-kante { left: 0; top: -1px; height: 2px; transform-origin: 0 50%; }
/* Kreis: ein Ring statt einer Linie. Breite/Höhe schreibt wischdunkel.js je Frame — contain hält
   das Layout dieser einen, kinderlosen Box vom Rest fern. */
.sk-wischu[data-form^="kreis"] .sk-wischu-kante {
  left: 0; top: 0;
  box-sizing: border-box;
  border-radius: 50%;
  background: none;
  border: 2px solid rgba(255, 255, 255, 0.34);
  box-shadow: 0 0 28px 2px rgba(139, 92, 246, 0.38), inset 0 0 28px 2px rgba(139, 92, 246, 0.22);
  contain: layout style;
}

/* ── Saum (Ebene „wischblur") ── nur für die geraden Formen; an Schräge und Kreis müsste die Maske
   jeden Frame neu gerechnet werden. */
.sk-wischu-saum {
  position: absolute;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transform: translate3d(0, 0, 0);
  will-change: transform;
  display: none;
}
.sk-wischu[data-form="links"]  .sk-wischu-saum,
.sk-wischu[data-form="rechts"] .sk-wischu-saum {
  top: 0; bottom: 0; left: -12px; width: 24px;
  mask-image: linear-gradient(90deg, transparent, #000 40%, #000 60%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%, #000 60%, transparent);
}
.sk-wischu[data-form="oben"]  .sk-wischu-saum,
.sk-wischu[data-form="unten"] .sk-wischu-saum {
  left: 0; right: 0; top: -12px; height: 24px;
  mask-image: linear-gradient(180deg, transparent, #000 40%, #000 60%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%, #000 60%, transparent);
}
html[data-layers~="wischblur"] .sk-wischu[data-form="links"]  .sk-wischu-saum,
html[data-layers~="wischblur"] .sk-wischu[data-form="rechts"] .sk-wischu-saum,
html[data-layers~="wischblur"] .sk-wischu[data-form="oben"]   .sk-wischu-saum,
html[data-layers~="wischblur"] .sk-wischu[data-form="unten"]  .sk-wischu-saum { display: block; }

@media (prefers-reduced-motion: reduce) { .sk-wischu { display: none !important; } }
@media (max-width: 900px) and (pointer: fine) { .sk-wischu { display: none !important; } }   /* schmales Mausfenster: einfacher Modus. Handys (coarse) wischen (26.10.2026) */

/* ── Im Fluss (Touch, seit 26.10.2026) ── Muster der Startseite (wisch.css), Näheres dort.
   Die dunklen Klone liegen in einem Träger IN der Seite (wischdunkel.js: bauen/lagenVerankern), absolut an der Dokumentlage der
   Originale, und scrollen mit. Je Bild ändert sich nur der clip-path (die Kante). z-index 48: über dem Inhalt, unter der echten Nav
   (50) und dem Nav-Klon im festen Overlay (51). KEIN overflow: hidden — der Träger würde zum Scroll-Container, und die klebenden
   Elemente im Klon (FAQ-Kopf) klebten an ihm statt am Fenster. */
.sk-wischu-fluss {
  position: absolute; left: 0; top: 0; width: 100%;
  z-index: 48;
  pointer-events: none;
  display: none;
  background: #0B0A0F;           /* = --color-bg-light unter html.theme-dark, wie der Clip-Grund des Overlays */
  clip-path: inset(0 100% 0 0);
  overflow-x: clip;
  will-change: transform;
}
.sk-wischu-fluss.is-warm { display: block; opacity: 0; }
.sk-wischu-fluss.is-an   { display: block; opacity: 1; }
.sk-wischu-fluss > .sk-wischu-lage { will-change: auto; }
.sk-wischu-clip--nav { background: transparent; }   /* im festen Overlay bleibt nur der Nav-Klon */
@media (prefers-reduced-motion: reduce) { .sk-wischu-fluss { display: none !important; } }

/* ═══ 36-kontakt-person/bg-lampe ═══ */
/* ═══ 36 · KONTAKT — Hintergrund „Lampe“ (gewählt 05.10.2026, Plan 2026-10-05-kontakt-hintergrund, Protokoll 28) ═══
   Ein riesiges Wort (Startseite „Ihr Projekt.“, Unterseiten je eine Frage — lampeWort in kontakt-person.html.mjs) steht fast unsichtbar auf der Oberkante der
   Karte. Maus oder Finger sind eine Lampe: Wo sie hinleuchtet, stehen die Buchstaben im Marken-Verlauf — auch wenn die Maus
   über dem Formular ist. Ohne Zeiger wandert das Licht beim Scrollen über das Wort.
   Technik: Das Lichtfenster (.sk-kbg-lampe-licht) trägt eine FESTE runde Maske und wird nur verschoben; darin läuft eine
   helle Kopie des Worts genau gegenläufig, steht also immer deckungsgleich auf dem dunklen Wort. Beides nur transform →
   keine Neuberechnung von Masken oder Schrift beim Bewegen (bg-lampe.js). Kein Farbnebel: Licht nur in den Buchstaben. */

.sk-kbg-lampe {
  position: absolute; left: 50%; top: var(--lampe-top, 120px);
  width: calc(min(100%, var(--max-width)) - 96px);
  translate: -50% 0;
  container-type: inline-size;          /* cqw = Breite des Inhalts → das Wort füllt sie bei jeder Breite */
}
@media (max-width: 1024px) { .sk-kbg-lampe { width: calc(100% - 64px); } }
@media (max-width: 767px)  { .sk-kbg-lampe { width: calc(100% - 40px); } }

/* Das Wort steht im data-wort-Attribut (kein Text im Dokument). Größe --wort-gr setzt bg-lampe.js so, dass das Wort
   genau die Inhaltsbreite füllt; 39cqw ist nur der Startwert vor dem Messen. */
.sk-kbg-lampe-wort {
  display: block;
  font-family: var(--font-main); font-weight: 800;
  width: max-content;
  font-size: var(--wort-gr, 39cqw); line-height: 0.82; letter-spacing: -0.05em;
  white-space: pre; user-select: none;      /* pre: am Handy steht bei langen Fragen ein Zeilenumbruch im Wort (bg-lampe.js) */
  color: transparent;
  -webkit-text-stroke: 1px var(--color-border);
}
.sk-kbg-lampe-wort::before { content: attr(data-wort); }

.sk-kbg-lampe-licht {
  position: absolute; left: 0; top: 0;
  width: var(--licht, 640px); height: var(--licht, 640px);
  -webkit-mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, 0.62) 48%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, 0.62) 48%, transparent 100%);
  opacity: 0;
  transition: opacity 900ms var(--ease);
  will-change: transform;
}
.sk-kbg-lampe.is-an .sk-kbg-lampe-licht { opacity: 0.75; }
.sk-kbg-lampe.is-an.is-zeiger .sk-kbg-lampe-licht { opacity: 1; }
/* Hell (Unterseiten, solange der Wisch noch läuft): Auf Weiß wirkt dieselbe Füllung viel kräftiger als auf Schwarz — dort
   das Licht leiser. #kontakt trifft nur das Original; der Klon im Wisch-Overlay hat keine id und ist ohnehin dunkel. */
html:not(.theme-dark) #kontakt .sk-kbg-lampe.is-an .sk-kbg-lampe-licht { opacity: 0.4; }
/* Im Licht zwei Lagen: eine leise Füllung im Marken-Verlauf und eine klare Kante — die Kante trägt die Form, die
   Füllung bleibt so schwach, dass der Kopftext davor ruhig steht. */
.sk-kbg-lampe-innen { position: absolute; left: 0; top: 0; width: 100cqw; will-change: transform; }
.sk-kbg-lampe-innen > .sk-kbg-lampe-wort { position: absolute; left: 0; top: 0; }
.sk-kbg-lampe-wort--fuellung {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-stroke: 0;
  opacity: 0.3;
}
.sk-kbg-lampe-wort--kante { -webkit-text-stroke: 1.5px var(--color-brand-lighter); }

/* Handy: Das Wort liegt dort hinter den letzten Zeilen des Texts → Füllung und Kante leiser (Kontrast-Sonde) */
@media (max-width: 767px) {
  .sk-kbg-lampe-wort--fuellung { opacity: 0.18; }
  .sk-kbg-lampe-wort--kante { -webkit-text-stroke-width: 1px; }
}

/* Weniger Bewegung (NZ-26, 19.10.2026): Der Reduce-Block in global.css gibt jedem Element einen 0,01-ms-Übergang auf ALLE
   Eigenschaften (transition-property bleibt „all“). bg-lampe.js liest Maße direkt nach dem Setzen (Schriftgröße des Worts,
   Höhe des Bands, Lage der Karte) und bekam so noch die alten Werte: Das Wort stand zu hoch im Kopftext und fiel nach jeder
   Größenänderung auf 39cqw zurück (rechts abgeschnitten). Im Kontakt mit Lampe gibt es bei weniger Bewegung deshalb keine
   Übergänge ohne eigene Regel; Elemente mit eigener transition behalten sie (Spezifität 0 über :where). Die Behebung für alle
   Abschnitte wäre `transition-property: none` im Reduce-Block von global.css (Plan Aufgabe 6, Schritt 16). */
@media (prefers-reduced-motion: reduce) {
  :where(.sk-b-person--bg), :where(.sk-b-person--bg) *, :where(.sk-b-person--bg) *::before, :where(.sk-b-person--bg) *::after { transition-property: none; }
}

/* ═══ 36-kontakt-person ═══ */
/* ═══ 36 · KONTAKT-PERSON — Foto Manuel Kolle links, Ansprache + Kontaktwege rechts ═══
   Hell, ruhig, persönlich. Hinter dem Foto ein stilles Licht aus dem Marken-Verlauf (weichgezeichnet,
   ohne Animation) — die einzige Geste des Abschnitts. Das Foto selbst ist nachts aufgenommen und
   dunkel; das Licht hebt es vom weißen Grund ab. */

.sk-b-person { position: relative; overflow: clip; }

.sk-b-person-raster {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 96px;
  align-items: center;
}

/* ── Foto ── */
/* max-width = Bildbreite 394 + Rahmen-Innenabstand 2 × 8 + Rand 2 → das Foto wird nie hochskaliert.
   justify-self: start — das Foto fluchtet links mit der Inhaltskante wie Eyebrows und Raster der übrigen Abschnitte
   (center schob es in der breiteren Spalte um rund 20 px nach rechts). */
.sk-b-person-bild { position: relative; isolation: isolate; max-width: 412px; justify-self: start; width: 100%; }
.sk-b-person-licht {
  position: absolute; z-index: -1;
  inset: 8% -14% 14% -10%;
  background: var(--grad-brand);
  border-radius: 50%;
  filter: blur(72px);
  opacity: 0.28;
  pointer-events: none;
}
.sk-b-person-rahmen {
  display: block;
  padding: 8px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius-lg) + 8px);
  box-shadow: var(--shadow-card-hover);
}
.sk-b-person-rahmen img {
  width: 100%; height: auto;
  aspect-ratio: 394 / 440;
  object-fit: cover;
  border-radius: var(--radius-lg);
}
.sk-b-person-name {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-top: 18px; padding-inline: 8px;
}
.sk-b-person-name strong { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--color-heading); }
.sk-b-person-name span { font-family: var(--font-mono); font-size: 16px; letter-spacing: 0.02em; color: var(--color-text-muted); }

/* ── Inhalt ── */
.sk-b-person-inhalt { display: flex; flex-direction: column; align-items: flex-start; }
.sk-b-person-inhalt .eyebrow { margin-bottom: 24px; }
.sk-b-person-text {
  max-width: 52ch; margin-top: 24px;
  font-size: 18px; line-height: 1.6;
  color: var(--color-text-muted);
  text-wrap: pretty;
}

.sk-b-person-wege { align-self: stretch; max-width: 560px; margin-top: 40px; list-style: none; }
.sk-b-person-weg {
  display: flex; align-items: center; gap: 16px;
  min-height: 64px; padding: 12px 0;
  border-top: 1px solid var(--color-border);
  color: inherit;
  transition: padding-left var(--duration-fast) var(--ease);
}
.sk-b-person-wege li:last-child .sk-b-person-weg { border-bottom: 1px solid var(--color-border); }
@media (hover: hover) and (pointer: fine) {
  .sk-b-person-weg:hover { padding-left: 4px; }
  .sk-b-person-weg:hover strong { color: var(--color-brand-main); }
}
.sk-b-person-weg:focus-visible { outline: 2px solid var(--color-brand-main); outline-offset: 2px; border-radius: var(--radius-sm); }
.sk-b-person-icon {
  display: grid; place-items: center; flex-shrink: 0;
  width: 40px; height: 40px;
  color: var(--color-brand-main);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.sk-b-person-icon svg { width: 19px; height: 19px; }
.sk-b-person-weg-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sk-b-person-weg-text strong {
  font-size: 16px; font-weight: 600; color: var(--color-heading);
  overflow-wrap: anywhere;
  transition: color var(--duration-fast) var(--ease);
}

.sk-b-person-aktion { margin-top: 36px; }

/* ── Ohne Foto (Prop foto: false): Kopf + Button links, Kontaktwege rechts auf Höhe der Unterkante ── */
.sk-b-person--ohne-foto .sk-b-person-raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
/* align-self: end — die Liste hat für den Flex-Fall mit Foto align-self: stretch, im Raster würde sie sonst oben kleben */
.sk-b-person--ohne-foto .sk-b-person-wege { align-self: end; max-width: none; margin-top: 0; }

/* ── Mit Formular (Prop formular, 21.09.2026) — „Eine Tafel" ──
   Kopf über die volle Breite (Zeile links, Text rechts), darunter EINE Karte: links füllt Manuels Foto sie randlos,
   rechts oben die direkten Wege, darunter das Formular aus 34-anfrage. */
/* Kopf 50 : 50 seit 18.10.2026 (Tunahan: „die Spalten sind nicht 50/50“) — vorher 5 : 7 wie die Tafel darunter.
   Gleiche Fuge wie .sk-section-head (global.css): Der Text beginnt auf derselben Achse wie jeder Untertitel. */
.sk-b-person-kopf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 64px; align-items: end; margin-bottom: 48px; }
.sk-b-person-kopf .eyebrow { display: inline-flex; margin-bottom: 24px; }
.sk-b-person--formular .sk-b-person-text { margin-top: 0; color: var(--color-body); }

/* Direkte Wege: oberste Zeile der Karte, durch eine Linie vom Formular getrennt */
.sk-b-person-spalte { grid-column: 2; min-width: 0; }
.sk-b-person-direkt { display: flex; flex-direction: column; gap: 12px; margin: 0 48px; padding: 32px 0 24px; border-bottom: 1px solid var(--color-border); }
/* Drei Pillen müssen in EINE Zeile der Karte passen (594 px bei 1920) — deshalb knapper als ein .btn */
.sk-b-person-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.sk-b-person-chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 6px 14px 6px 8px;
  font-size: 16px; font-weight: 600; color: var(--color-heading); white-space: nowrap;
  background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  transition: border-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.sk-b-person-chip-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--color-brand-main); background: var(--color-brand-subtle); }
.sk-b-person-chip-icon svg { width: 15px; height: 15px; }
@media (hover: hover) and (pointer: fine) { .sk-b-person-chip:hover { border-color: var(--color-brand-main); color: var(--color-brand-main); } }
.sk-b-person-chip:focus-visible { outline: 2px solid var(--color-brand-main); outline-offset: 2px; }
/* KONTAKT-6 (19.10.2026): Im dunklen Kontakt waren die Pillen-Icons kaum zu sehen (#6D28D9 auf dunklem Grund, 2,1 : 1) →
   der helle Markenton des dunklen Satzes (#C4B5FD, ≈ 8 : 1). Nur unter 1280 px bzw. mit Touch (Desktop pixelgleich). */
@media (max-width: 1279px), (pointer: coarse) {
  :is(html.theme-dark, .sk-wisch-dunkel) .sk-b-person-chip-icon { color: var(--color-brand-darker); }
}

.sk-b-person-tafel {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  background: var(--color-bg-card); border: 1px solid var(--color-border);
  border-radius: calc(var(--radius-lg) + 10px); overflow: hidden;
  box-shadow: 0 40px 80px -40px rgba(109, 40, 217, 0.28), 0 16px 32px -20px rgba(37, 99, 235, 0.16), var(--shadow-lg);
}
/* Foto absolut statt als gestrecktes Raster-Kind: Das streckte sich in Chrome nicht auf die Kartenhöhe. */
.sk-b-person-foto { position: absolute; inset: 0 auto 0 0; width: calc(100% * 5 / 12); margin: 0; }
.sk-b-person-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
/* Verlauf unter der Bildzeile: gemessen gegen den HELLSTEN Bildpunkt hinter der Schrift (das weiße Hemd) —
   mit 0,82 waren es 5,7 : 1 (AA), mit 0,94 und früherem Einsatz ≥ 7 : 1 (AAA). */
.sk-b-person-foto::after { content: ''; position: absolute; inset: 40% 0 0; background: linear-gradient(to bottom, transparent, rgba(9, 9, 11, 0.8) 55%, rgba(9, 9, 11, 0.94)); }
.sk-b-person-foto figcaption { position: absolute; z-index: 1; left: 32px; right: 32px; bottom: 28px; display: flex; flex-direction: column; gap: 4px; color: #fff; }
.sk-b-person-foto figcaption strong { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.sk-b-person-foto figcaption span { font-size: 16px; font-weight: 500; color: rgba(255, 255, 255, 0.9); }
.sk-b-person-tafel .sk-b-anfrage-karte { border: 0; border-radius: 0; box-shadow: none; padding: 28px 48px 40px; background: transparent; }

/* ── Hintergrund-Ebene (Prop formular.hintergrund, nur Startseite, seit 05.10.2026) ──
   Liegt unter dem Inhalt, fängt keinen Zeiger ab (bg-lampe.js hört am Abschnitt mit). Abschaltbar über die Ebene
   „kontaktbg“ (template.html). Inhalt: „Lampe“ aus 36-kontakt-person/bg-lampe. */
.sk-kbg { display: none; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
html[data-layers~="kontaktbg"] .sk-kbg { display: block; }
.sk-b-person--bg > .container { position: relative; z-index: 1; }
.sk-b-person-tafel textarea.sk-b-anfrage-input { min-height: 112px; }

@media (max-width: 900px) {
  .sk-b-person-kopf { grid-template-columns: 1fr; gap: 20px; margin-bottom: 32px; }
  .sk-b-person-spalte { grid-column: 1; }
  .sk-b-person-direkt { margin: 0 20px; padding: 24px 0 20px; }
  .sk-b-person-tafel { grid-template-columns: 1fr; }
  .sk-b-person-foto { position: relative; inset: auto; width: 100%; aspect-ratio: 4 / 3; }
  .sk-b-person-tafel .sk-b-anfrage-karte { padding: 24px 20px 28px; }
}
/* KONTAKT-1 (19.10.2026): Tablet hoch und Handy quer (640–900 px) — Foto links neben dem Formular wie am Desktop (abgenommene
   Tafel, Variante A vom 21.09.) statt eines 4:3-Fotos über die volle Breite, das das Formular weit nach unten schob.
   Unter 640 px bleibt die Tafel einspaltig (die Fotospalte wäre < 250 px, „Manuel Kolle“ bräche um). */
@media (min-width: 640px) and (max-width: 900px) {
  .sk-b-person-tafel { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .sk-b-person-spalte { grid-column: 2; }
  .sk-b-person-foto { position: absolute; inset: 0 auto 0 0; width: calc(100% * 5 / 12); aspect-ratio: auto; }
  .sk-b-person-tafel .sk-b-anfrage-zeile { grid-template-columns: 1fr; gap: 0; }
}

/* ── Schmaler ── */
@media (max-width: 1100px) {
  .sk-b-person-raster { gap: 56px; }
}
@media (max-width: 900px) {
  .sk-b-person-raster { grid-template-columns: 1fr; gap: 48px; }
  .sk-b-person-bild { max-width: 340px; }
  .sk-b-person--ohne-foto .sk-b-person-raster { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 767px) {
  .sk-b-person-bild { max-width: 232px; }
  .sk-b-person-name { flex-direction: column; gap: 2px; margin-top: 14px; }
  .sk-b-person-licht { filter: blur(48px); }
  .sk-b-person-text { font-size: 17px; }
  .sk-b-person-wege { margin-top: 32px; }
  .sk-b-person-aktion { align-self: stretch; }
  .sk-b-person-aktion .btn { width: 100%; }
  /* KONTAKT-2 (H3 = A, 19.10.2026): Das Lampen-Wort bekommt ein eigenes Band zwischen Kopf und Karte — vorher lag es hinter
     Kopftext und Titel (als Wort unlesbar, Text bei vollem Licht unter 4,5 : 1). --lampe-h = Höhe des Worts (bg-lampe.js),
     dazu 20 px Luft; die Grundlinie bleibt auf der Kartenkante. Ohne Messung bzw. ohne Ebene „kontaktbg“: 12 + 20 = 32 px wie bisher. */
  html[data-layers~="kontaktbg"] .sk-b-person--bg .sk-b-person-kopf { margin-bottom: calc(var(--lampe-h, 12px) + 20px); }
  /* KONTAKT-7 (19.10.2026): „Lieber direkt?“ als drei gleich breite Zeilen, bündig mit den Feldern darunter */
  .sk-b-person-chips { display: grid; gap: 8px; }
  .sk-b-person-chip { width: 100%; }
  /* NZ-49 (19.10.2026): Formular-Karte → Footer am Handy 24 px weniger Leere (Polster unten 80 → 56 px). Der Footer steht
     außerhalb von <main> — deshalb :last-child statt :has(+ .sk-footer). */
  main > .sk-b-person:last-child { padding-bottom: 56px; }
}

/* NZ-48 (19.10.2026): Nach einer weißen FAQ (.sk-faq--weiss: /preise/, /leistungen/ki-beratung/, /leistungen/automatisierung/)
   stand der Kontakt bis 900 px auf derselben Fläche — hell Weiß auf Weiß, dunkel #0B0A0F auf #0B0A0F, die Naht war in keinem
   Zustand zu sehen (Regel „Flächen im Wechsel“). Jetzt eigene Fläche: hell #FAFAFA, dunkel #131218. Am Desktop verdeckt die
   Wisch-Kante die Naht, dort bleibt es, wie es ist. */
@media (max-width: 900px) {
  .sk-faq--weiss + .sk-b-person { background: var(--color-bg-accent); }
}

/* ═══ 99-footer ═══ */
/* ═══ 99 · FOOTER — Styles (Abschluss im Ton der Seite, Link-Spalten, Lauftext-Band) ═══
   Form 1:1 wie v4. Ebenen: marquee = Lauftext-Bewegung · nocv = Offscreen-Pause AUS.
   Anders als v4: Abstand im Band als margin statt gap (sonst Ruck pro Runde, s. 02-trust),
   Offscreen-Pause über content-visibility statt offscreen.js, Hover nur mit Maus,
   sichtbarer Tastatur-Fokus, Links mobil mit 44-px-Klickfläche, Logo-Punkt mit Abstand
   (in v4 schluckte inline-flex das Leerzeichen → Punkt klebte am „W“). Kein JavaScript.
   Runde 2b (16.09.2026): vier statt drei Link-Spalten (neu „Leistungen“, Markup aus footer.html.mjs) —
   Marke 1fr / Spalten 2fr, unter 1280 px Marke über den Spalten. Preis hinter dem Paketnamen gedämpft
   und nur als Ganzes umbrechend. Untere Zeile heller (vorher 3,8:1, jetzt ≈ 7:1). */

/* Der Footer folgt seit 20.09.2026 dem Thema der SEITE, statt immer dunkel zu sein.
   Grund (Tunahan): Nur sieben Seiten wischen am Ende ins Dunkle. Die übrigen 28 — darunter die
   Startseite und alle 23 Referenz-Detailseiten — enden hell und stießen hart an einen schwarzen Footer.
   Es gibt bewusst KEINE Liste von Seiten: `html.theme-dark` weiß bereits, ob die Seite dunkel ist, und
   `.sk-wisch-dunkel` gilt für die Klone im Wisch-Overlay. Dadurch wischt der Footer beim Übergang mit.
   Ohne JavaScript bleibt alles hell — erstmals ohne Bruch.
   Die vier Ton-Variablen unten sind die einzige Stelle, an der sich hell und dunkel unterscheiden;
   alles Weitere in dieser Datei benutzt sie. */
.sk-footer {
  --sk-footer-bg:     var(--color-bg-accent);
  --sk-footer-text:   var(--color-body);
  --sk-footer-leise:  var(--color-text-muted);
  --sk-footer-linie:  var(--color-border);
  --sk-footer-band:   rgba(9, 9, 11, 0.05);
  background: var(--sk-footer-bg);
  color: var(--color-heading);
  padding: 80px 0 0;                       /* v4: kein 120er-Raster — unten schließt das Band ab */
  border-top: 1px solid var(--sk-footer-linie);
  content-visibility: auto;
  contain-intrinsic-size: auto 494px;      /* Inhalt ohne Padding ≥1280 (19.09.2026 neu gemessen) — weitere Breiten unten */
  transition: background-color var(--duration-fast) var(--ease);
}
/* Dunkel: auf den Wisch-Seiten (html.theme-dark) und in den Klonen des Wisch-Overlays.
   #09090B ist der Wert aus v4 — kein neuer Farbton, nur an einer Stelle statt in zwölf. */
:is(html.theme-dark, .sk-wisch-dunkel) .sk-footer {
  --sk-footer-bg:     #09090B;
  --sk-footer-text:   rgba(255, 255, 255, 0.6);
  --sk-footer-leise:  rgba(255, 255, 255, 0.5);
  --sk-footer-linie:  rgba(255, 255, 255, 0.08);
  --sk-footer-band:   rgba(255, 255, 255, 0.06);
  color: var(--color-off-white);
  border-top-color: transparent;
}
/* NZ-49 (19.10.2026): Bis 900 px (Handy, Tablet hoch) bleibt im Dunkeln die Haarlinie — dort folgten auf die Formular-Karte
   155–203 px Schwarz ohne Kante, der Footer las sich wie ein Nachklang des Kontakts. Dieselbe Linie wie über den Kennzahlen.
   Am Desktop bleibt der nahtlose Übergang (gewollt). */
@media (max-width: 900px) {
  :is(html.theme-dark, .sk-wisch-dunkel) .sk-footer { border-top-color: var(--sk-footer-linie); }
}
html[data-layers~="nocv"] .sk-footer { content-visibility: visible; }

/* Bildmarke + Wortmarke nach ci.md „Logo“ (19.09.2026, vorher der weiße Punkt aus v4 — der Footer war die
   letzte Stelle mit dem alten Zeichen). 32-px-Kachel, Rundung 9,6 px = rx 12/40 des SVG. Kein Schatten:
   Die Nav legt ihn als Umgebung unter die Kachel, auf #09090B wäre er nicht zu sehen. Abstand 12 px > ¼ Kachel. */
.sk-footer-logo {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 20px; font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--color-heading);
}
/* Kachelmitte auf die Mitte der Spalten-Labels rechts (Label-Zeile ≈ 22 px, Kachel 32 px) */
.sk-footer-logo { margin-top: -5px; }
.sk-footer-logo-icon { width: 32px; height: 32px; flex-shrink: 0; border-radius: 9.6px; }

.sk-footer-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 64px; padding-bottom: 60px; }

.sk-footer-brand p { color: var(--sk-footer-text); font-size: 16px; line-height: 1.55; margin: 20px 0 28px; max-width: 36ch; }

/* Raster statt flex: drei gleich hohe Kennzahlen auf einer Grundlinie, Labels einzeilig */
.sk-footer-stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 40px; border-top: 1px solid var(--sk-footer-linie); padding-top: 20px; }
.sk-footer-stats div { display: flex; flex-direction: column; }
.sk-footer-stats strong { font-size: 24px; font-weight: 700; letter-spacing: -0.025em; color: var(--color-heading); font-variant-numeric: tabular-nums; }
.sk-footer-stats span { font-family: var(--font-mono); font-size: 16px; color: var(--sk-footer-leise); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }   /* Sperrung wie .eyebrow/.mono-label seit 16 px */

/* ── Link-Spalten ── */
.sk-footer-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.sk-footer-cols .mono-label { color: var(--sk-footer-leise); margin-bottom: 16px; display: block; }
/* Zeilenabstand als padding am Link statt gap an der Liste: gleiche Optik wie v4
   (Zeile + 10 px), aber die Lücke gehört zur Klickfläche. */
.sk-footer-cols ul { list-style: none; display: flex; flex-direction: column; }
.sk-footer-cols li { display: flex; }
/* Zeilenhöhe = 17 px × 1,55: In v4 bestimmte die Body-Schrift des <li> die Zeile, nicht die 15-px-Linkschrift. */
.sk-footer-cols ul a { padding-block: 5px; line-height: calc(var(--font-size-body) * var(--line-height-body)); color: var(--sk-footer-text); font-size: 16px; transition: color var(--duration-fast) var(--ease); }
.sk-footer-cols ul { margin-block: -5px; }   /* Padding am ersten/letzten Link zurücknehmen → Label-Abstand und Spaltenhöhe wie v4 */
/* Preis hinter dem Paketnamen: gedämpft (≈ 6:1 auf #09090B), bricht nur als Ganzes um (&nbsp; im Markup) */
.sk-footer-preis { color: var(--sk-footer-leise); font-variant-numeric: tabular-nums; white-space: nowrap; transition: color var(--duration-fast) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .sk-footer-cols ul a:hover,
  .sk-footer-cols ul a:hover .sk-footer-preis { color: var(--color-heading); }
}
/* Fokus: --color-brand-lighter stimmt in beiden Tönen. Die Schriftfarbe muss dagegen mitdrehen —
   --color-off-white ist IMMER hell und wäre im hellen Footer weiß auf Weiß (20.09.2026). */
.sk-footer a:focus-visible { outline: 2px solid var(--color-brand-lighter); outline-offset: 3px; border-radius: 4px; color: var(--color-heading); }

.sk-footer-bottom { display: flex; justify-content: space-between; gap: 24px; border-top: 1px solid var(--sk-footer-linie); padding: 24px 0; font-family: var(--font-mono); font-size: 16px; color: var(--sk-footer-text); }

/* ── Großes Lauftext-Band, läuft endlos nach links ── */
.sk-footer-marquee { overflow: hidden; border-top: 1px solid var(--sk-footer-linie); padding: 24px 0; }
.sk-footer-track {
  display: flex;
  width: max-content;
  font-size: 96px; font-weight: 700;
  letter-spacing: -0.04em; line-height: 1;
  color: var(--sk-footer-band);
}
/* Abstand als margin an JEDEM Wort, NICHT als gap: Mit gap wäre die halbe Spur um einen
   halben Abstand kürzer als −50 % → sichtbarer Ruck pro Runde. */
.sk-footer-track span { flex: 0 0 auto; margin-right: 32px; }
html[data-layers~="marquee"] .sk-footer-track { animation: sk-footer-lauf 40s linear infinite; }
@keyframes sk-footer-lauf {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ── Breiten: contain-intrinsic-size je Bereich gemessen (Inhalt ohne Padding, Runde 2b mit vier Spalten,
   scratchpad sta/fuss-mass.mjs). Der Footer ist das letzte Element — ein Fehlwert verschiebt nur die
   Scrollleiste, keine Anker. ≥1280: 494 · 901–1279: 743 (Touch 772) · 481–900: 1004 · ≤480: 1029.
   Neu gemessen am 19.09.2026 (Logo-Kachel, einzeilige Kennzahlen; die alten Werte stammten noch aus der Zeit vor der 16-px-Regel). ── */
/* Unter 1280 px reicht die Markenspalte nicht mehr für die Kennzahlen-Zeile → Marke über den vier Spalten */
@media (max-width: 1279px) {
  .sk-footer { contain-intrinsic-size: auto 743px; }
  .sk-footer-inner { grid-template-columns: minmax(0, 1fr); gap: 48px; }
}
@media (pointer: coarse) and (min-width: 901px) and (max-width: 1279px) { .sk-footer { contain-intrinsic-size: auto 772px; } }
@media (max-width: 900px) {
  .sk-footer { contain-intrinsic-size: auto 1004px; }
  /* FOOTER-1 (19.10.2026): minmax(0, 1fr) statt 1fr — die Kennzahlen-Zeile drückte die Spur sonst über den Inhaltsrand (336 px bei 360) */
  .sk-footer-inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .sk-footer-bottom { flex-direction: column; gap: 8px; }
}
/* FOOTER-1: Unter 390 px passen die drei Kennzahlen mit 24-px-Fugen in die Zeile (256 + 48 = 304 ≤ 320 px); ab 390 px bleiben 40 px */
@media (max-width: 389px) { .sk-footer-stats { column-gap: 24px; } }
/* FOOTER-2 (19.10.2026): Linkspalten 2 × 2 nur noch unter 750 px. Von 750 bis 900 px (Tablet hoch, Handy quer) vier nebeneinander
   wie am Desktop, mit 24-px-Fuge (Spalten 158–191 px, „Website Expansion“ und „Hosting & Wartung“ brechen nicht um). */
@media (max-width: 749px) { .sk-footer-cols { grid-template-columns: 1fr 1fr; } }
@media (min-width: 750px) and (max-width: 900px) { .sk-footer-cols { column-gap: 24px; } }
/* FOOTER-3 (19.10.2026): Lauftext am Handy 64 statt 96 px — ein „webtastic.io“ (≈ 355 px) läuft ganz durchs Bild, Tempo ≈ 62 px/s */
@media (max-width: 767px) { .sk-footer-track { font-size: 64px; } }
/* Touch: jeder Link mindestens 44 × 44 px — 26,35 px Zeile + 2 × 9 px (Abstand wächst um 8 px).
   Als padding, nicht als zentrierte min-height: umbrochene Links behalten so ihren Abstand.
   min-width für kurze Wörter („AGB“). Logo: 44 px hoch, der negative Rand nimmt das Wachstum
   (44 − 24,8 Zeile) / 2 wieder zurück → nichts verrutscht. */
@media (max-width: 900px), (pointer: coarse) {
  .sk-footer-cols ul a { min-height: 44px; min-width: 44px; padding-block: 9px; }
  .sk-footer-cols ul { margin-block: -9px; }
  .sk-footer-logo { min-height: 44px; margin-block: -6px; }   /* (44 − 32 Kachel) / 2 */
}
/* Schmale Handys: die untere Zeile bricht um → Footer wächst */
@media (max-width: 480px) {
  .sk-footer { contain-intrinsic-size: auto 1029px; }
}

/* Weniger Bewegung: Band steht */
@media (prefers-reduced-motion: reduce) {
  html[data-layers~="marquee"] .sk-footer-track { animation: none; }
}

/* ═══ 95-schwebe ═══ */
/* ═══ 95 · SCHWEBE — mitlaufender Kontakt unten rechts ═══
   Knopf: weiße Pille mit Manuels Foto (auf Touch-Geräten nur das Foto). Fenster fährt darüber aus. Alle Farben über Token —
   im dunklen Thema (html.theme-dark) dreht es mit. z-index 60: über Nav (50) und Wisch-Overlays (51); die
   Fit-Ergebnisleiste (ebenfalls 60, nur mobil) blendet es aus, solange sie offen ist — ebenso das offene Burger-Menü.
   Flache Fenster (Handy quer, ≤ 520 px hoch): eigene Querfassung des Fensters, die Wege als Kacheln nebeneinander (SCHWEBE-1). */
.sk-schwebe {
  position: fixed; z-index: 60;
  right: calc(24px + env(safe-area-inset-right, 0px));
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity 260ms var(--ease), transform 320ms var(--ease);
}
.sk-schwebe.is-da:not(.is-weg) { opacity: 1; transform: none; pointer-events: auto; }
/* .is-da im Selektor: Ohne schlüge `.sk-schwebe.is-da:not(.is-weg)` (0-3-0) diese Regel (0-2-1) — der Knopf
   stünde dann sichtbar, aber inert über der Fit-Leiste (Sonde tools/feedback/schwebe.mjs, 375 px). */
/* sk-nav-sheet-schliesst (26.10.2026): Das Handy-Menü fährt beim Schließen noch 340 ms zurück — so lange bleibt der Knopf weg,
   sonst stünde er (z 60) über dem zurückfahrenden Vollbild-Menü */
html.sk-fit-leiste-offen .sk-schwebe.is-da, html:is(.sk-nav-sheet-offen, .sk-nav-sheet-schliesst) .sk-schwebe.is-da { opacity: 0; transform: translateY(16px); pointer-events: none; }

.sk-schwebe-knopf {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 56px; padding: 4px 20px 4px 4px;
  border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  background: var(--color-bg-card); color: var(--color-heading);
  font: 600 16px/1 var(--font-main); letter-spacing: -0.01em;
  box-shadow: var(--shadow-lg), var(--shadow-card-hover);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}
.sk-schwebe-knopf img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; }
@media (hover: hover) and (pointer: fine) {
  .sk-schwebe-knopf:hover { border-color: var(--color-brand-main); transform: translateY(-2px); box-shadow: var(--shadow-lg), var(--shadow-brand); }
  .sk-schwebe-zu:hover { background: var(--color-bg-accent); color: var(--color-heading); }
}
.sk-schwebe-knopf:focus-visible { outline: 2px solid var(--color-brand-main); outline-offset: 3px; }
.sk-schwebe-knopf[aria-expanded="true"] { border-color: var(--color-brand-main); }

.sk-schwebe-fenster {
  position: absolute; right: 0; bottom: calc(100% + 12px);
  width: 344px; padding: 20px;
  background: var(--color-bg-card); color: var(--color-body);
  border: 1px solid var(--color-border); border-radius: 20px;
  box-shadow: var(--shadow-lg), var(--shadow-card-hover);
  transform-origin: 100% 100%;
  opacity: 0; transform: translateY(8px) scale(0.97);
  transition: opacity 200ms var(--ease), transform 260ms var(--ease);
}
.sk-schwebe-fenster[hidden] { display: none; }
.sk-schwebe.is-offen .sk-schwebe-fenster { opacity: 1; transform: none; }
.sk-schwebe-kopf { display: grid; grid-template-columns: 56px minmax(0, 1fr) 48px; gap: 14px; align-items: center; }
.sk-schwebe-kopf img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; }
.sk-schwebe-titel { margin: 0; font-size: 18px; font-weight: 700; color: var(--color-heading); }
.sk-schwebe-rolle { margin: 2px 0 0; font-size: 16px; color: var(--color-text-muted); }
.sk-schwebe-zu {
  width: 48px; height: 48px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent; color: var(--color-text-muted); cursor: pointer;
}
/* Hover nur mit Maus (oben im hover-Block, SCHWEBE-6 19.10.2026) — beim Antippen kurz dieselbe Fläche */
.sk-schwebe-zu:active { background: var(--color-bg-accent); }
.sk-schwebe-zu:focus-visible { outline: 2px solid var(--color-brand-main); outline-offset: 2px; }
.sk-schwebe-zu svg { width: 20px; height: 20px; }
.sk-schwebe-text { margin: 16px 0 12px; font-size: 16px; line-height: 1.5; }
.sk-schwebe-wege { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sk-schwebe-weg {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center;
  min-height: 56px; padding: 8px 12px;
  border: 1px solid var(--color-border); border-radius: 14px;
  color: var(--color-heading); text-decoration: none;
  transition: border-color var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .sk-schwebe-weg:hover { border-color: var(--color-brand-main); background: var(--color-brand-subtle); }
}
.sk-schwebe-weg:focus-visible { outline: 2px solid var(--color-brand-main); outline-offset: 2px; }
.sk-schwebe-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--color-brand-subtle); color: var(--color-brand-main); }
.sk-schwebe-icon svg { width: 20px; height: 20px; }
.sk-schwebe-weg-text { display: grid; gap: 2px; }
.sk-schwebe-weg-text span { font-family: var(--font-mono); font-size: 16px; color: var(--color-text-muted); }
.sk-schwebe-weg-text strong { font-size: 16px; font-weight: 600; }
.sk-schwebe-formular { display: inline-flex; align-items: center; min-height: 48px; margin-top: 8px; font-size: 16px; font-weight: 600; color: var(--color-brand-main); }
/* Im Dunkeln ist --color-brand-main zu dunkel (2,8:1, s. .eyebrow in global.css) → der helle Markenton des dunklen Satzes */
html.theme-dark .sk-schwebe-formular, html.theme-dark .sk-schwebe-icon { color: var(--color-brand-darker); }

@media (max-width: 767px) {
  .sk-schwebe { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .sk-schwebe-knopf { padding: 3px; }
  .sk-schwebe-knopf img { width: 50px; height: 50px; }
  /* Text bleibt für Screenreader der Name des Knopfs, sichtbar ist nur das Foto */
  .sk-schwebe-knopf-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .sk-schwebe-fenster { width: calc(100vw - 32px); }
}
/* SCHWEBE-4 (Tablet, E8 = A, 19.10.2026): Auf Touch-Geräten ab 768 px ebenfalls nur das runde Foto — die 205 × 60 px große
   Pille deckte beim Lesen Zeilenenden ab (verdeckte Fläche −72 %). „Direkt sprechen“ bleibt Name für Screenreader.
   Desktop mit Maus behält die Pille. */
@media (min-width: 768px) and (pointer: coarse) {
  .sk-schwebe-knopf { padding: 3px; }
  .sk-schwebe-knopf img { width: 50px; height: 50px; }
  .sk-schwebe-knopf-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* SCHWEBE-1 (Variante B, 19.10.2026): Im Handy-Querformat ragte das Fenster oben aus dem Bild (−178 px bei 750 × 342) —
   „Schließen“ und „Anrufen“ waren unerreichbar. Eigene Querfassung: breiter, die drei Wege als Kacheln nebeneinander,
   alles ohne Scrollen. Sicherheitsnetz: höchstens Fensterhöhe − 96 px, sonst scrollt das Fenster selbst.
   Zeilenhöhe 1,3 für Name, Rolle und Kacheltexte: Mit den Werten der Spec blieben bei 750 × 342 noch 10 px inneres Scrollen. */
@media (max-height: 520px) and (max-width: 1279px) {
  .sk-schwebe-fenster { width: min(640px, calc(100vw - 32px)); padding: 14px 16px; max-height: calc(100vh - 96px); max-height: calc(100svh - 96px); overflow-y: auto; overscroll-behavior: contain; }
  .sk-schwebe-kopf { grid-template-columns: 40px minmax(0, 1fr) 44px; gap: 12px; }
  .sk-schwebe-kopf img { width: 40px; height: 40px; }
  .sk-schwebe-titel, .sk-schwebe-rolle, .sk-schwebe-weg-text > * { line-height: 1.3; }
  .sk-schwebe-zu { width: 44px; height: 44px; }
  .sk-schwebe-wege { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 12px; }
  .sk-schwebe-weg { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 6px; padding: 10px 12px; }
  .sk-schwebe-icon { width: 32px; height: 32px; }
  .sk-schwebe-weg-text strong { overflow-wrap: anywhere; }
  .sk-schwebe-formular { margin-top: 4px; min-height: 44px; }
}
/* Sehr flach (≤ 400 px hoch): Der Satz „Schreiben Sie mir …“ entfällt, die Wege sagen dasselbe — der Wortlaut bleibt im Markup */
@media (max-height: 400px) and (max-width: 1279px) { .sk-schwebe-text { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .sk-schwebe, .sk-schwebe-fenster, .sk-schwebe-knopf { transition: none; }
}

/* ═══ 00-nav/abschnitte ═══ */
/* ═══ 00-nav · Abschnitts-Nav „Zunge“ (gewählt von Tunahan am 08.10.2026) ═══
   Plan: docs/superpowers/plans/2026-10-06-nav-abschnitte.md · Protokoll: Aufgaben/_ergebnisse/30-nav-abschnitte.md
   Markup: teile.mjs · Verhalten: abschnitte.js · Sonde: tools/nav/pruefen.mjs
   Auf Unterseiten mit mindestens zwei Abschnitten hängt ab dem ersten Abschnitt unten an der Pille eine Zunge mit
   allen Abschnitten als Links (Griff + Scroll-Spy wie oben). Das Dock selbst bleibt, wie es ist.
   Dock und Zunge sind EINE Fläche (Wunsch Tunahan: „Teil des Navs“, „Borders sauber, keine inneren Ränder“):
     .sk-nav-form    Farbe + Glas (--nav-flaeche, --nav-filter), zugeschnitten mit clip-path: path()
     .sk-nav-umriss  SVG: Randlinie (--nav-rand) entlang desselben Pfads + Schatten wie --nav-schatten, maskiert
                     auf außerhalb der Form — unter dem Glas schiene er sonst durch
   Das ::before des Docks ist hier aus, die Form zeichnet auch das Dock. Ohne aktiven Abschnitt ist die Zunge auf
   Höhe ~0 eingeklappt (gleicher Pfad-Aufbau), deshalb wächst sie aus der Unterkante: clip-path und d gleiten 240 ms.
   Zustand: html.sk-nav-ab-an (ein Abschnitt ist erreicht) — gilt damit auch im Nav-Klon des Wischs. */

.sk-nav--ab .sk-nav-inner::before { display: none; }

.sk-nav-form {
  position: absolute; top: 0; left: 0; z-index: -1;
  width: 100%; height: calc(100% + 80px);   /* Platz für die Zunge, der Pfad schneidet zu */
  background: var(--nav-flaeche);
  backdrop-filter: var(--nav-filter);
  -webkit-backdrop-filter: var(--nav-filter);
  /* Lichtkante oben innen wie im --nav-schatten des Docks (der Rest des Schattens kommt aus dem SVG) */
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.8);
  pointer-events: none;
}
:is(html.theme-dark, .sk-wisch-dunkel) .sk-nav-form { box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.05); }

.sk-nav-umriss {
  position: absolute; top: 0; left: 0; z-index: -1;
  width: 100%; height: calc(100% + 80px); overflow: visible;
  pointer-events: none;
}
.sk-nav-umriss-linie { fill: none; stroke: var(--nav-rand); stroke-width: 1; }
.sk-nav-umriss-schatten { fill: #000; filter: url(#sk-nav-schatten-hell); }
:is(html.theme-dark, .sk-wisch-dunkel) .sk-nav-umriss-schatten { filter: url(#sk-nav-schatten-dunkel); }
/* Wachsen/Einklappen der Zunge: nur während des Wechsels (abschnitte.js setzt die Klasse 300 ms), sonst folgt die
   Form dem Dock sofort (Einklappen der Wortmarke, Fenstergröße) */
.sk-nav-form-gleitet .sk-nav-form { transition: clip-path 240ms cubic-bezier(0.22, 1, 0.36, 1); }
.sk-nav-form-gleitet .sk-nav-umriss-pfad { transition: d 240ms cubic-bezier(0.22, 1, 0.36, 1); }

/* Zunge = nur der Inhalt (Fläche und Rand zeichnen Form und Umriss) */
.sk-nav-unter {
  position: absolute; top: 100%; left: 50%; translate: -50% 0; z-index: 0;
  width: max-content; max-width: calc(100% - 78px);   /* nur auf dem geraden Stück der Dock-Unterkante */
  padding: 1px 5px 5px;
  visibility: hidden;
  transition: visibility 0s linear 160ms;
}
html.sk-nav-ab-an .sk-nav-unter { visibility: visible; transition: none; }
/* NAV-14: Hinter dem offenen Burger-Menü ist die Zunge weg (abschnitte.js klappt den Umriss ein) */
html.sk-nav-sheet-offen .sk-nav-unter { visibility: hidden; transition: none; }

/* Untermenüs (Leistungen) liegen über der Zunge — Wunsch Tunahan 06.10. */
.sk-nav--ab .sk-nav-drop-panel { z-index: 3; }

/* ── Links: wie die Hauptlinks, Griff auf dem aktuellen Abschnitt ── */
.sk-nav-unter-leiste { position: relative; display: flex; align-items: center; gap: 2px; }
.sk-nav-unter-link {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; min-height: 40px; padding: 8px 15px;
  border-radius: var(--radius-pill);
  font-size: 16px; font-weight: 500; color: var(--color-body); white-space: nowrap;
  transition: color var(--duration-fast) var(--ease), opacity 200ms var(--ease) 110ms;
}
html:not(.sk-nav-ab-an) .sk-nav-unter-link { opacity: 0; transition: opacity 80ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .sk-nav-unter-link:hover { color: var(--color-heading); } }
.sk-nav-unter-link.is-active { color: var(--color-brand-darker); }
.sk-nav-unter-link:focus-visible { outline: 2px solid var(--color-brand-main); outline-offset: -2px; }
.sk-nav-unter-griff {
  position: absolute; top: 0; bottom: 0; left: 0; z-index: 0; width: 0;
  border-radius: var(--radius-pill);
  background: var(--color-brand-subtle);
  border: 1px solid rgba(109, 40, 217, 0.18);
  opacity: 0; pointer-events: none;
  transition: transform 480ms cubic-bezier(0.34, 1.3, 0.3, 1), width 480ms cubic-bezier(0.34, 1.3, 0.3, 1), opacity 220ms var(--ease);
}
.sk-nav-unter-griff.is-on { opacity: 1; }
html:not(.sk-nav-ab-an) .sk-nav-unter-griff { opacity: 0; }

:is(html.theme-dark, .sk-wisch-dunkel) .sk-nav-unter-link { color: rgba(255, 255, 255, 0.92); }
@media (hover: hover) and (pointer: fine) { :is(html.theme-dark, .sk-wisch-dunkel) .sk-nav-unter-link:hover { color: #fff; } }
:is(html.theme-dark, .sk-wisch-dunkel) .sk-nav-unter-link.is-active { color: #fff; }
:is(html.theme-dark, .sk-wisch-dunkel) .sk-nav-unter-griff { background: rgba(139, 92, 246, 0.24); border-color: rgba(167, 139, 250, 0.35); }

/* ── Abstand nach oben: Dock + Zunge reichen bis ≈ 122 px. Sprungziele und klebende Köpfe müssen darunter liegen,
   sonst verschwindet eine Überschrift nach dem Klick unter der Zunge. 140 = 18 px Luft. Wie in global.css:
   scroll-padding nur ohne sanftes Lenis-Scrollen (das versetzt selbst, js/smooth.js NAV_ABSTAND). ── */
html:has(.sk-nav--ab) { scroll-padding-top: 140px; }
@media (prefers-reduced-motion: no-preference) { html.lenis:has(.sk-nav--ab) { scroll-padding-top: 0; } }
html:has(.sk-nav--ab) :is(.sk-faq-head, .sk-b-text-kopf) { top: 140px; }

/* Touch: 44 px hoch */
@media (max-width: 1024px), (pointer: coarse) {
  .sk-nav-unter-link { min-height: 44px; }
}
/* NAV-1: Dock 768–939 px enger — die Zunge rückt mit */
@media (min-width: 768px) and (max-width: 939px) { .sk-nav-unter-link { padding-inline: 11px; } }
/* Handy bis 767 px — seit 26.10.2026 KEINE Zunge mehr (Wunsch Tunahan: „keine weitere Leiste unten, einfach oben in die Leiste
   rein, wie ein Karussell“). Die Abschnitte stehen IN der Leiste zwischen Bildmarke und „Menü“. Das Band beginnt dort, wo sonst
   „webtastic.io“ steht (27.10.2026); der aktuelle Abschnitt rückt in die Mitte, soweit das Band reicht — an den Enden bleibt es
   stehen und der lila Griff wandert nach links bzw. rechts (keine Leere neben dem ersten/letzten). Wo weitere Abschnitte folgen,
   blendet das Band zur Hälfte aus (Klassen ohne-links/ohne-rechts aus abschnitte.js). Antippen springt.
   Das Dock steht dafür über die volle Breite; der Umriss bleibt die Pille (abschnitte.js).
   Vorher (Zunge mit Chip-Reihe): _LOESCHEN/vor-handy-nav-2026-10/. */
@media (max-width: 767px) {
  .sk-nav--ab .sk-nav-inner { width: 100%; }
  .sk-nav--ab .sk-nav-burger { order: 3; }
  .sk-nav-unter {
    position: relative; top: auto; left: auto; translate: none; order: 2;
    flex: 1 1 0; min-width: 0; width: auto; max-width: none;
    margin-block: -2px; padding: 0;   /* Leiste 44 px hoch (Touch), im 40-px-Inhalt des Docks */
  }
  /* Platz fürs Karussell: Ist es da, klappt die Wortmarke ein (bei offenem Menü kommt sie zurück, nav.css) */
  html.sk-nav-ab-an:not(.sk-nav-sheet-offen) .sk-nav--ab .sk-nav-logo-text { max-width: 0; margin-left: 0; opacity: 0; }
  /* Die 9 px Trefferfläche rechts am Logo gibt der Rand wieder ab: Der Griff des ersten Abschnitts beginnt 10 px hinter der Bildmarke,
     wo sonst der Schriftzug steht */
  html.sk-nav-ab-an:not(.sk-nav-sheet-offen) .sk-nav--ab .sk-nav-logo { margin-right: -1px; }
  .sk-nav-unter-leiste {
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.5) 28px, #000 56px, #000 calc(100% - 56px), rgba(0, 0, 0, 0.5) calc(100% - 28px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.5) 28px, #000 56px, #000 calc(100% - 56px), rgba(0, 0, 0, 0.5) calc(100% - 28px), transparent 100%);
  }
  .sk-nav-unter-leiste.ohne-links {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), rgba(0, 0, 0, 0.5) calc(100% - 28px), transparent 100%);
            mask-image: linear-gradient(90deg, #000 calc(100% - 56px), rgba(0, 0, 0, 0.5) calc(100% - 28px), transparent 100%);
  }
  .sk-nav-unter-leiste.ohne-rechts {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.5) 28px, #000 56px);
            mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.5) 28px, #000 56px);
  }
  .sk-nav-unter-leiste.ohne-links.ohne-rechts { -webkit-mask-image: none; mask-image: none; }
  .sk-nav-unter-leiste::-webkit-scrollbar { display: none; }
  .sk-nav-unter-leiste { padding-inline-end: 1px; }   /* NAV-17: Bruchteil-Breiten — der letzte Punkt passt ganz hinein */
  .sk-nav-unter-link { padding: 8px 12px; }
  .sk-nav-unter-griff { top: 4px; bottom: 4px; }
}
/* Weniger Bewegung: Zunge ist sofort da bzw. weg, Links ohne Einblenden */
@media (prefers-reduced-motion: reduce) {
  .sk-nav-form-gleitet :is(.sk-nav-form, .sk-nav-umriss-pfad) { transition: none; }
  .sk-nav-unter-link { transition: none !important; }
  .sk-nav-unter-griff { transition: opacity 220ms var(--ease); }
}