/* ═══ 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; }
}

/* ═══ 90-recht ═══ */
/* ═══ 90 · RECHT — gemeinsame Styles für Impressum und Datenschutz (AGB-Seite seit 18.10.2026 gestrichen) ═══
   Wird als "assets"-Baustein von /impressum/, /datenschutz/ geladen (build.mjs).
   v5: global.css ist schlanker als in v4 (keine Link-Farbe, keine h1-Größe/-Gewichtung) —
   diese Werte hier lokal nachgezogen, damit die Seiten wie in v4 aussehen. */

.sk-legal { max-width: 760px; margin: 0 auto; padding: 96px 24px 120px; }

.sk-legal-back {
  display: inline-flex; min-height: 44px; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 16px; font-weight: 500;
  color: var(--color-brand-main); transition: color var(--duration-fast) var(--ease);
  margin: -12px 0 36px;   /* 44-px-Klickfläche ohne Verschiebung (v4: 20 px hoch + 48 px Abstand) */
}
/* Hover nur mit Maus: auf Touch bliebe die Farbe nach dem Tippen hängen */
@media (hover: hover) and (pointer: fine) {
  .sk-legal-back:hover { color: var(--color-brand-darker); }
}
.sk-legal-back:focus-visible { outline: 2px solid var(--color-brand-main); outline-offset: 3px; border-radius: 4px; }

/* overflow-wrap: lange deutsche Komposita ("Geschäftsbedingungen", 20 Zeichen) sprengen bei
   36px/bold auf 375px sonst die Zeile und laufen über den Viewport-Rand hinaus. */
.sk-legal h1 { font-size: clamp(36px, 4.5vw, 56px); font-weight: 700; letter-spacing: -0.035em; margin-bottom: 16px; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
.sk-legal-meta { color: var(--color-text-muted); margin-bottom: 8px; }

/* Fließtext-Hierarchie für Rechtstexte (Datenschutz: h2 Kapitel · h3 Thema · h4 Frage). Kein Fett im Fließtext —
   im Quell-PDF ist alles fett, das ist ein Export-Artefakt, kein gestalterischer Wunsch. */
.sk-legal h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.015em; margin: 56px 0 14px; overflow-wrap: break-word; }
.sk-legal h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; margin: 36px 0 10px; }
/* NZ-18 (19.10.2026): h2/h3 erben 1,05 aus global.css — auf Handys und Tablets laufen sie über 2–4 Zeilen, Unter- und Oberlängen
   stießen aneinander. Bis 1279 px mit Luft und ausgeglichenen Zeilen; der Desktop bleibt wie abgenommen (Freigabe D).
   Datenschutz-h1: nur am weichen Trennstrich trennen — Safari 26.5 und 18 trennten mit hyphens: auto „Datenschutzerklä-|rung“
   (Hinweis Gruppe news). Chrome trennte schon richtig „Datenschutz-|erklärung“; „Impressum“ bricht nicht. */
@media (max-width: 1279px) {
  .sk-legal h2, .sk-legal h3 { line-height: 1.25; text-wrap: balance; }
  .sk-legal h1 { -webkit-hyphens: manual; hyphens: manual; }
}
/* h4: Fragen im Datenschutz-Kapitel 1 — Fließtextgröße, nur das Gewicht trennt sie vom Absatz */
.sk-legal h4 { font-size: var(--font-size-body); font-weight: 600; margin: 24px 0 6px; }
/* Impressum beginnt ohne Meta-Zeile direkt mit der Anschrift — Luft wie zu einer Überschrift */
.sk-legal h1 + p:not(.sk-legal-meta) { margin-top: 32px; }
.sk-legal p, .sk-legal li { line-height: 1.65; margin-bottom: 12px; }
.sk-legal ul { padding-left: 1.2em; }
.sk-legal-note { color: var(--color-text-muted); font-style: italic; }
.sk-legal a { color: var(--color-brand-main); }
/* NZ-22 (19.10.2026): Telefon und E-Mail im Fließtext — auf Touch größere Tippfläche (≈ 39 px statt 23 px), ohne die Zeilen zu
   verschieben (senkrechtes Polster an Inline-Elementen ändert die Zeilenhöhe nicht). Mehr geht nicht: Im Impressum stehen
   Telefon und E-Mail auf direkt aufeinanderfolgenden Zeilen. */
@media (pointer: coarse) {
  .sk-legal a[href^='tel:'], .sk-legal a[href^='mailto:'] { padding-block: 8px; }
}

/* NZ-19 (19.10.2026): Inhaltsverzeichnis der Datenschutzerklärung — am Handy 20–31 Bildschirme Text, die vier Kapitel waren nur
   durch Wischen zu finden. Linktext = Kapitelüberschrift (Nummer in Mono wie die Abschnittsnummern), neu ist nur das Label
   „Inhalt“ (Entwurf für Manuel). Zeilen ≥ 44 px, Haarlinien wie die Trennlinien im Text. Nur bis 1279 px: Der Desktop bleibt
   wie abgenommen (mit Freigabe D auch dort zeigen). Kein scroll-margin-top an den Kapiteln: Lenis zöge ihn zusätzlich zum
   Anker-Abstand ab (80 px aus js/smooth.js, ohne Lenis global.css scroll-padding-top). */
.sk-legal-inhalt { margin: 36px 0 8px; }
.sk-legal-inhalt-titel { display: block; margin-bottom: 10px; }
.sk-legal-inhalt ol { list-style: none; padding: 0; border-top: 1px solid var(--color-border); }
.sk-legal-inhalt li { margin: 0; line-height: 1.4; border-bottom: 1px solid var(--color-border); }
.sk-legal-inhalt a {
  display: flex; min-height: 44px; align-items: center; gap: 12px;
  padding: 10px 0;
  color: var(--color-heading); font-weight: 600;
  transition: color var(--duration-fast) var(--ease);
}
.sk-legal-inhalt-nr {
  flex-shrink: 0; min-width: 2.2ch; align-self: flex-start; padding-top: 1px;   /* auf der ersten Zeile, auch bei zweizeiligen Titeln */
  font-family: var(--font-mono); font-size: 16px; font-weight: 500; color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.sk-legal-inhalt-text { flex: 1; min-width: 0; }
.sk-legal-inhalt a svg {
  flex-shrink: 0; width: 18px; height: 18px; color: var(--color-brand-main);
  transition: translate var(--duration-fast) var(--ease);
}
.sk-legal-inhalt a:active { color: var(--color-brand-darker); }
.sk-legal-inhalt a:active svg { translate: 0 2px; }
.sk-legal-inhalt a:focus-visible { outline: 2px solid var(--color-brand-main); outline-offset: 2px; border-radius: var(--radius-sm); }
@media (hover: hover) and (pointer: fine) {
  .sk-legal-inhalt a:hover { color: var(--color-brand-darker); }
  .sk-legal-inhalt a:hover svg { translate: 0 2px; }
}
@media (min-width: 1280px) { .sk-legal-inhalt { display: none; } }

/* Fußzeile "Stand: …" — abgesetzt vom Fließtext */
.sk-legal-stand {
  margin-top: 40px; padding-top: 24px;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted); font-size: 16px;
}

.sk-legal-todo {
  margin-top: 40px;
  border: 1px dashed var(--color-brand-lighter);
  border-radius: var(--radius-lg);
  background: var(--color-brand-subtle);
  padding: 28px 32px;
}
.sk-legal-todo .mono-label { color: var(--color-brand-darker); display: block; margin-bottom: 10px; }
.sk-legal-todo p { margin: 0; color: var(--color-body); line-height: 1.6; }

/* ═══ 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; }
}