/* Honeypod: was jede Seite von honeypod.io teilt.
   Farben, Schriftleiter, Kopf, Menü, Knöpfe und Fuß nach der Leinwand
   „Honeypod Website Stufe 4 - Startseite" (Claude Design, 22.10.2026).

   Die Farben sind die der App, nichts dazuerfunden. Die Seite öffnet dunkel.
   Der Schalter im Kopf setzt data-thema="hell" am Wurzelelement, dann gelten
   die Werte der hellen Fassung der Leinwand. Der Fuß bleibt in beiden dunkel.

   Die Website lädt keine Schrift. Gesetzt wird in der Schrift des Systems. */

:root {
  --grund: #121315;
  --flaeche: #1e2023;
  --text: #f0f1f3;
  --text-2: #a0a4ab;
  --text-3: #8c9199;
  --linie: rgba(255, 255, 255, 0.10);
  --kante: rgba(255, 255, 255, 0.10);
  --kopf: rgba(0, 0, 0, 0.50);
  --glas: rgba(255, 255, 255, 0.10);
  --glas-kante: rgba(255, 255, 255, 0.20);
  --reiter: rgba(30, 32, 35, 0.60);
  --schein-stark: 0.46;
  --schein-mitte: 0.26;
  --schatten: 0 30px 90px rgba(0, 0, 0, 0.55);
  --fach-schatten: 0 24px 50px -18px rgba(0, 0, 0, 0.75);
  --spur: #22252a;
  --rahmen-bg: rgba(255, 255, 255, 0.06);
  --rahmen-kante: rgba(255, 255, 255, 0.12);
  --rahmen-innen: #1e2023;
  --rahmen-schatten: 0 34px 120px rgba(0, 0, 0, 0.5);
  --tapete: radial-gradient(70% 55% at 0% 0%, rgba(228, 105, 58, 0.55), transparent 70%),
            radial-gradient(60% 70% at 0% 100%, rgba(234, 180, 74, 0.38), transparent 70%),
            linear-gradient(160deg, color-mix(in oklab, #e4693a 24%, #121315), #121315);

  /* Die Marke: Honig für die Hauptaktion, Bernstein für den Strich. */
  --honig: #eab44a;
  --honig-hell: #f3cb72;
  --auf-honig: #241b06;
  --bernstein: #e4693a;

  /* Was sich mit dem Thema ändert, über die Leinwand hinaus. */
  --verweis: var(--honig);
  --verweis-zeiger: var(--honig-hell);
  --fokus: var(--honig);
  --glas-hover: rgba(255, 255, 255, 0.14);
  --menue-grund: rgba(18, 19, 21, 0.86);
  --kopf-deckend: #0d0e10;
  /* Das Megamenü nach der Leinwand „System“: Fläche zu 86 %, Unschärfe 28. */
  --megamenue: rgba(30, 32, 35, 0.86);
  --mm-zeiger: rgba(255, 255, 255, 0.06);
  --mm-karte: rgba(255, 255, 255, 0.04);
  --hero-verlauf: linear-gradient(0deg, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.32) 35%, transparent 70%);
  --karte-verlauf: linear-gradient(0deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.42) 32%, transparent 62%);
  --hero-text: #f0f1f3;
  --hero-text-2: rgba(240, 241, 243, 0.72);
  --schalter-an: rgba(255, 255, 255, 0.14);
  --schalter-schatten: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  /* Die Geräte zeigen die App im Thema der Seite, hinter ihrer gläsernen
     Seitenleiste liegt die Tapete desselben Themas. */
  --geraet-bild: url("/bilder/geraet-uebersicht.webp?v=7cb6b2b638");

  /* Eine Kurve für jede Bewegung, eine fürs Hereinkommen. */
  --kurve: cubic-bezier(0.16, 1, 0.3, 1);
  --einblenden: cubic-bezier(0.19, 1, 0.22, 1);

  /* Die Leiter der Schrift, gleitend zwischen Telefon (390) und 1440. */
  --h1: clamp(39px, 30.83px + 2.095vw, 61px);
  --h2: clamp(31px, 24.31px + 1.714vw, 49px);
  --h3: clamp(25px, 22.77px + 0.571vw, 31px);
  --h4: clamp(20px, 18.14px + 0.476vw, 25px);
  --leit: clamp(17px, 15.89px + 0.286vw, 20px);

  /* Seitenrand und Breite des Inhalts. Bei 1440 stehen 64 Pixel Rand, am
     Telefon 16. Darüber bleibt der Inhalt 1312 breit und steht mittig. */
  --rand: clamp(16px, 4.571vw - 1.83px, 64px);
  --rand-l: max(var(--rand), env(safe-area-inset-left, 0px));
  --rand-r: max(var(--rand), env(safe-area-inset-right, 0px));
  --inhalt: 1312px;
  --abstand: clamp(72px, 54.17px + 4.571vw, 120px);
  /* Die Rundung, mit der die Seite über dem Fuß endet: 40 bei 1440, 28 am Telefon. */
  --rug: clamp(28px, 23.54px + 1.143vw, 40px);

  color-scheme: dark;
}

/* Die helle Fassung der Leinwand („1440 · hell"). Schrift und Fokus stehen
   dort nicht in Honig, sondern in seinem Ton für Schrift auf hellem Grund
   (#835d00, 4,54 zu 1, aus src/lib/leiter.ts). */
:root[data-thema="hell"] {
  --grund: #f2f2f3;
  --flaeche: #ffffff;
  --text: #1b1c1e;
  --text-2: #4e5157;
  --text-3: #5b5e64;
  --linie: rgba(27, 28, 30, 0.10);
  --kante: rgba(27, 28, 30, 0.08);
  --kopf: rgba(255, 255, 255, 0.72);
  --glas: rgba(255, 255, 255, 0.55);
  --glas-kante: rgba(27, 28, 30, 0.10);
  --reiter: rgba(255, 255, 255, 0.60);
  /* Auf hellem Grund verschwand der Schein fast, deshalb kräftiger als bis
     zum 26.10.2026 (0,34 und 0,18). */
  --schein-stark: 0.42;
  --schein-mitte: 0.25;
  --schatten: 0 34px 120px rgba(24, 24, 27, 0.16);
  --fach-schatten: 0 24px 50px -18px rgba(24, 24, 27, 0.32);
  --spur: #f7f7f8;
  --rahmen-bg: rgba(255, 255, 255, 0.5);
  --rahmen-kante: rgba(255, 255, 255, 0.75);
  --rahmen-innen: #ffffff;
  --rahmen-schatten: 0 34px 120px rgba(24, 24, 27, 0.14);
  --tapete: radial-gradient(70% 55% at 0% 0%, rgba(228, 105, 58, 0.40), transparent 70%),
            radial-gradient(60% 70% at 0% 100%, rgba(234, 180, 74, 0.42), transparent 70%),
            linear-gradient(160deg, color-mix(in oklab, #e4693a 16%, #f2f2f3), #f2f2f3);
  --verweis: #835d00;
  --verweis-zeiger: #6b4c00;
  --fokus: #835d00;
  --glas-hover: rgba(255, 255, 255, 0.85);
  --menue-grund: rgba(242, 242, 243, 0.86);
  --kopf-deckend: #ffffff;
  --megamenue: rgba(255, 255, 255, 0.86);
  --mm-zeiger: rgba(27, 28, 30, 0.05);
  --mm-karte: rgba(255, 255, 255, 0.72);
  --hero-verlauf: linear-gradient(0deg, rgba(242, 242, 243, 0.94) 0%, rgba(242, 242, 243, 0.62) 35%, transparent 70%);
  --karte-verlauf: linear-gradient(0deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.72) 32%, transparent 62%);
  --hero-text: #1b1c1e;
  --hero-text-2: #4e5157;
  --geraet-bild: url("/bilder/geraet-uebersicht-hell.webp?v=2c0db621e5");
  --schalter-an: #ffffff;
  --schalter-schatten: 0 1px 3px rgba(0, 0, 0, 0.14);
  color-scheme: light;
}

/* Bilder in zwei Fassungen: Es steht immer nur die des Themas. Ein Bild mit
   loading="lazy", das nicht steht, lädt der Browser gar nicht. */
:root:not([data-thema="hell"]) .nur-hell { display: none !important; }
:root[data-thema="hell"] .nur-dunkel { display: none !important; }

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 96px; }
body {
  background: var(--grund);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
/* Ein Bild behält sein Seitenverhältnis, auch wenn max-width es schmaler
   macht. Ohne height: auto galt die Höhe aus dem Attribut, und vier Bilder
   der Bühne standen um gut die Hälfte gestreckt da (22.10.2026). */
img { height: auto; }
a { color: var(--verweis); text-decoration: none; }
a:hover { color: var(--verweis-zeiger); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; border-radius: 6px; }

.breite {
  width: 100%;
  max-width: calc(var(--inhalt) + var(--rand-l) + var(--rand-r));
  margin-inline: auto;
  padding-left: var(--rand-l);
  padding-right: var(--rand-r);
}
.unsichtbar {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Die Leiter. Überschriften 600, Text 400 und 500, Kicker normal in --text-3. */
.kicker { font-size: 16px; font-weight: 500; color: var(--text-3); }
.h1, .h2, .h3, .h4 { font-weight: 600; text-wrap: balance; }
.h1 { font-size: var(--h1); line-height: 1.05; letter-spacing: -0.022em; }
.h2 { font-size: var(--h2); line-height: 1.1; letter-spacing: -0.022em; }
.h3 { font-size: var(--h3); line-height: 1.15; letter-spacing: -0.01em; }
.h4 { font-size: var(--h4); line-height: 1.2; letter-spacing: -0.01em; }
.leit { font-size: var(--leit); line-height: 1.46; color: var(--text-2); text-wrap: pretty; }
.leit b, .leit strong { color: var(--text); font-weight: 500; }
.zierwort { font-family: ui-serif, "New York", Georgia, serif; font-style: italic; font-weight: 500; letter-spacing: -0.01em; }

/* ── Knöpfe: immer als Pille ─────────────────────────────── */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border-radius: 999px; border: 0;
  font-size: 15px; font-weight: 600; letter-spacing: -0.005em; white-space: nowrap;
  cursor: pointer; text-decoration: none;
  transition: transform 300ms var(--kurve), background-color 300ms var(--kurve), filter 300ms var(--kurve);
}
.knopf:hover { transform: translateY(-1px); }
.knopf-honig { background: var(--honig); color: var(--auf-honig); }
.knopf-honig:hover { color: var(--auf-honig); background: var(--honig-hell); }
.knopf-leuchtet { filter: drop-shadow(0 18px 40px rgba(234, 180, 74, 0.32)); }
.knopf-glas {
  color: var(--text); background: var(--glas); box-shadow: inset 0 0 0 1px var(--glas-kante);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
}
.knopf-glas:hover { color: var(--text); background: var(--glas-hover); }
.knopf-klein { height: 38px; padding: 0 16px; font-size: 14px; }
.knopf-gross { height: 52px; padding: 0 28px; font-size: 17px; }
/* Noch nicht offen: Der Knopf steht schon da, ohne Ziel und ausgegraut. */
.knopf.knopf-aus { opacity: 0.4; cursor: default; pointer-events: none; }

/* ── Der Kopf: eine schwebende Pille aus Glas ────────────── */
.kopf {
  position: fixed; z-index: 50;
  top: 16px; left: 24px; right: 24px;
  max-width: 1392px; margin-inline: auto;
  height: 60px;
  display: flex; align-items: center; gap: 28px;
  padding: 0 11px 0 22px;
  border-radius: 999px;
  background: var(--kopf);
  -webkit-backdrop-filter: blur(40px) saturate(1.6);
  backdrop-filter: blur(40px) saturate(1.6);
  box-shadow: inset 0 0 0 1px var(--linie);
}
.kopf-marke {
  display: flex; align-items: center; gap: 6px; margin-right: auto;
  font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--text);
}
.kopf-marke:hover { color: var(--text); }
/* Das Zeichen schrumpft nie mit dem Kopf. Scharfe Bildschirme bekommen die
   Fassung mit 192 Pixeln: Am Telefon mit dreifacher Dichte wurden aus 96
   sonst 105 Gerätepixel, und das Zeichen wirkte verwaschen (26.10.2026). */
.kopf-marke img { flex: none; max-width: none; width: 40px; height: 40px; }
.kopf-nav { display: flex; align-items: center; gap: 28px; }
.kopf-nav a { font-size: 15px; color: var(--text-2); white-space: nowrap; transition: color 200ms var(--kurve); }
.kopf-nav a:hover, .kopf-nav a[aria-current] { color: var(--text); }
.kopf-funktionen {
  display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; cursor: pointer;
  font-size: 15px; color: var(--text-2); white-space: nowrap; transition: color 200ms var(--kurve);
}
.kopf-funktionen svg { width: 12px; height: 12px; transition: transform 300ms var(--kurve); }
.kopf-funktionen:hover, .kopf-funktionen[aria-expanded="true"], .kopf-funktionen[data-aktiv] { color: var(--text); }
.kopf-funktionen[aria-expanded="true"] svg { transform: rotate(180deg); }
/* Schalter und Hauptaktion stehen zusammen, mit 10 statt 28 Abstand. */
.kopf-aktionen { display: flex; align-items: center; gap: 10px; margin-left: 12px; }

/* Der Hell-Dunkel-Schalter aus der App, mit den Rundungen der Website. */
.thema-schalter {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px; height: 38px;
  border-radius: 999px; background: var(--glas); box-shadow: inset 0 0 0 1px var(--glas-kante);
}
.thema-schalter button {
  width: 32px; height: 32px; border: 0; border-radius: 999px; background: transparent;
  color: var(--text-2); cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background-color 200ms var(--kurve), color 200ms var(--kurve), box-shadow 200ms var(--kurve);
}
.thema-schalter button:hover { color: var(--text); }
.thema-schalter button[aria-pressed="true"] { background: var(--schalter-an); color: var(--text); box-shadow: var(--schalter-schatten); }
.thema-schalter svg { width: 15px; height: 15px; }
.kopf-menue {
  display: none; width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: transparent; cursor: pointer; align-items: center; justify-content: center; color: var(--text);
}
.kopf-menue svg { width: 20px; height: 20px; }

/* Unter 1100 passt die Navigation nicht mehr neben Zeichen und Knopf. */
@media (max-width: 1099px) {
  .kopf-nav { display: none; }
  .kopf-menue { display: flex; }
  .kopf-aktionen { margin-left: 0; }
}
/* Am Telefon ist im Kopf kein Platz für den Schalter, er steht im Menü. */
@media (max-width: 639px) {
  .kopf .thema-schalter { display: none; }
}
@media (max-width: 640px) {
  .kopf { top: 10px; left: 12px; right: 12px; height: 54px; padding: 0 8px 0 16px; gap: 8px; }
  .kopf-marke { font-size: 17px; }
  .kopf-marke img { width: 35px; height: 35px; }
}
/* Unter 360 Pixeln fehlten im Kopf 32 Pixel, „Beta anfragen“ lag über dem
   Schriftzug (25.10.2026). Dort steht nur das Zeichen, der Verweis nennt
   Honeypod weiter über sein aria-label. */
@media (max-width: 359px) {
  .kopf .kopf-marke { font-size: 0; gap: 0; }
}

/* ── Das Menü am Telefon ─────────────────────────────────── */
.menue {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  padding: 10px max(12px, env(safe-area-inset-right, 0px)) 32px max(12px, env(safe-area-inset-left, 0px));
  background: var(--menue-grund);
  -webkit-backdrop-filter: blur(40px) saturate(1.4);
  backdrop-filter: blur(40px) saturate(1.4);
  opacity: 0; visibility: hidden;
  transition: opacity 300ms var(--kurve), visibility 0s linear 300ms;
}
.menue.offen { opacity: 1; visibility: visible; transition: opacity 300ms var(--kurve); }
.menue-kopf { display: flex; align-items: center; height: 54px; padding: 0 8px 0 16px; }
.menue-kopf .kopf-marke img { width: 35px; height: 35px; }
.menue-zu {
  width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--glas);
  box-shadow: inset 0 0 0 1px var(--glas-kante); cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: var(--text);
}
.menue-zu svg { width: 18px; height: 18px; }
.menue nav { display: flex; flex-direction: column; margin-top: 28px; padding: 0 16px; }
.menue nav > a, .menue nav > button {
  padding: 14px 0; font-size: var(--h4); font-weight: 600; letter-spacing: -0.01em; color: var(--text);
  border-bottom: 1px solid var(--linie);
  opacity: 0; transform: translateY(12px);
  transition: opacity 500ms var(--einblenden), transform 500ms var(--einblenden);
}
.menue.offen nav > a, .menue.offen nav > button { opacity: 1; transform: none; }
.menue.offen nav > :nth-child(2) { transition-delay: 40ms; }
.menue.offen nav > :nth-child(3) { transition-delay: 80ms; }
.menue.offen nav > :nth-child(4) { transition-delay: 120ms; }
.menue.offen nav > :nth-child(5), .menue.offen nav > :nth-child(6) { transition-delay: 160ms; }
.menue nav > button {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  border-width: 0 0 1px; background: none; cursor: pointer; text-align: left;
}
.menue-funktionen svg { width: 18px; height: 18px; color: var(--text-2); transition: transform 300ms var(--kurve); }
.menue-funktionen[aria-expanded="true"] svg { transform: rotate(180deg); }
.menue-gruppen { display: flex; flex-direction: column; padding: 8px 0 12px; border-bottom: 1px solid var(--linie); }
.menue-gruppen[hidden] { display: none; }
.menue-gruppen a, .menue-bald { display: flex; align-items: center; gap: 11px; padding: 9px 0; font-size: 17px; font-weight: 500; color: var(--text); }
.menue-gruppen a::before, .menue-bald::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 3px; background: var(--punkt); }
.menue-gruppen a.menue-alle { color: var(--verweis); padding-top: 12px; }
.menue-gruppen a.menue-alle::before { display: none; }
.menue-gruppen a.menue-vorschlag { padding-top: 2px; color: var(--text-2); }
/* Unten im Menü, solange Platz ist. Mit aufgeklappten Funktionen ist keiner,
   dann hält das Polster oben den Schalter von der Linie darüber fern. Bis zum
   27.10.2026 stieß er an sie (Tim). */
.menue-thema {
  margin-top: auto; padding: 16px; display: flex; align-items: center; justify-content: space-between;
  font-size: 15px; color: var(--text-2);
}
.menue-aufruf { padding: 0 16px; }
.menue-aufruf .knopf { width: 100%; }
body.menue-offen { overflow: hidden; }

/* ── Das Megamenü „Funktionen“ ───────────────────────────── */
/* Nach der Leinwand „System“ (Claude Design, Stufe 3) im Glas der Stufe 4.
   Es liegt unter dem schwebenden Kopf, so breit wie er, und öffnet mit
   Klick, Tippen oder Tastatur (js/seite.js). Es steht außerhalb des Kopfs,
   denn in einem Element mit backdrop-filter zeichnet WebKit die Unschärfe
   nur über dessen Inhalt und position: fixed hinge am Kopf. */
.megamenue {
  position: fixed; z-index: 49; top: 84px; left: 24px; right: 24px;
  max-width: 1392px; margin-inline: auto;
  border-radius: 28px; background: var(--megamenue);
  -webkit-backdrop-filter: blur(28px) saturate(1.6); backdrop-filter: blur(28px) saturate(1.6);
  box-shadow: inset 0 0 0 1px var(--linie), var(--schatten);
  opacity: 0; transform: translateY(-8px); visibility: hidden;
  transition: opacity 300ms var(--kurve), transform 300ms var(--kurve), visibility 0s linear 300ms;
}
.megamenue.offen { opacity: 1; transform: none; visibility: visible; transition: opacity 300ms var(--kurve), transform 300ms var(--kurve); }
.mm-raster { display: grid; grid-template-columns: minmax(0, 3fr) minmax(220px, 1fr); }
.mm-gruppen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 16px; }
.mm-gruppe, .mm-karte { display: flex; flex-direction: column; gap: 4px; border-radius: 18px; color: var(--text); transition: background-color 200ms var(--kurve); }
.mm-gruppe { padding: 14px 16px 15px; }
.mm-gruppe:hover, .mm-gruppe[aria-current] { color: var(--text); background: var(--mm-zeiger); }
.mm-gruppe b { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; }
.mm-gruppe b::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 3px; background: var(--punkt); }
.mm-gruppe span { padding-left: 17px; font-size: 14px; line-height: 1.4; color: var(--text-2); }
.mm-gruppe small { padding-left: 17px; margin-top: 3px; font-size: 13px; line-height: 1.4; color: var(--text-3); }
/* Eine Rubrik, die erst kommt (Tim, 26.10.2026): blass, ohne Ziel und mit
   „Kommt bald“ am Titel. Sie ist kein Verweis, die Pfeiltasten gehen an ihr
   vorbei. Die Marke bleibt lesbar, sie ist die Aussage. */
.mm-bald { cursor: default; }
.mm-bald:hover { background: none; }
.mm-bald b, .mm-bald span, .mm-bald small, .menue-bald { color: var(--text-3); }
.mm-bald b::before, .menue-bald::before { opacity: 0.5; }
.mm-bald span, .mm-bald small { opacity: 0.75; }
.mm-bald em, .menue-bald em {
  margin-left: 2px; padding: 2px 8px; border-radius: 999px;
  font-size: 11.5px; font-style: normal; font-weight: 600; line-height: 1.35; white-space: nowrap;
  color: var(--text-2); box-shadow: inset 0 0 0 1px var(--linie);
}
.menue-bald em { font-size: 12px; }
.mm-versprechen { display: flex; flex-direction: column; gap: 10px; padding: 22px 20px; border-left: 1px solid var(--linie); }
.mm-titel { padding: 0 4px 2px; font-size: 13px; font-weight: 500; color: var(--text-3); }
.mm-karte { padding: 14px 16px; background: var(--mm-karte); box-shadow: inset 0 0 0 1px var(--linie); }
.mm-karte:hover, .mm-karte[aria-current] { color: var(--text); background: var(--mm-zeiger); }
.mm-karte b { font-size: 15px; font-weight: 600; }
.mm-karte span { font-size: 14px; line-height: 1.4; color: var(--text-2); }
.mm-fuss { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 32px 16px; border-top: 1px solid var(--linie); }
.mm-alle { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; }
.mm-alle svg { width: 14px; height: 14px; transition: transform 300ms var(--kurve); }
.mm-alle:hover svg { transform: translateX(2px); }
/* Neben „Alle Funktionen durchsuchen“ steht der Weg, eine vorzuschlagen
   (Tim, 25.10.2026). Leiser als der Verweis davor, er ist das Zweite. */
.mm-verweise { display: flex; align-items: center; gap: 8px 28px; flex-wrap: wrap; }
.mm-vorschlag { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--text-2); }
.mm-vorschlag svg { width: 14px; height: 14px; }
.mm-vorschlag:hover { color: var(--text); }
@media (max-width: 1099px) { .megamenue { display: none; } }

/* ── Der Fuß ─────────────────────────────────────────────── */
/* Er bleibt in beiden Themen dunkel (Tim, 22.10.2026) und setzt deshalb
   die dunklen Werte für sich selbst. */
/* Der Fuß liegt „unter dem Teppich" (Claude Design, 22.10.2026): Die Seite
   endet über ihm mit runden Ecken und wirft einen tiefen Schatten auf ihn,
   darunter glimmt Licht in Bernstein und Honig hervor. Passt der Fuß ganz
   ins Fenster, bleibt er unten stehen und die Seite gleitet von ihm weg
   (data-fuss-klebt, gesetzt von js/seite.js). Ist er höher, stünde sein
   oberer Teil für immer unter der Seite, dann rollt er normal mit.
   main trägt Rundung und Schatten, aber kein overflow: clip. Beides
   zusammen ist eine gerundete Beschneidung über die ganze Seite. Chrome
   zeichnet dann jede Glasfläche darin mit runder Maske, auf einem Intel
   UHD 630 gingen beim Rollen 59 % der Rahmen verloren, mit Löchern in der
   Seite (22.10.2026). Ohne die Beschneidung waren es 24 %. Waagerecht
   beschneiden die Abschnitte selbst. */
main {
  position: relative; z-index: 2;
  background: var(--grund);
  border-radius: 0 0 var(--rug) var(--rug);
  box-shadow: 0 56px 80px -34px rgba(0, 0, 0, 0.88), 0 22px 34px -20px rgba(0, 0, 0, 0.65), 0 1px 0 rgba(255, 255, 255, 0.06);
}
.fuss {
  --grund: #121315; --text: #f0f1f3; --text-2: #a0a4ab; --text-3: #8c9199;
  --linie: rgba(255, 255, 255, 0.10); --verweis: var(--honig); --verweis-zeiger: var(--honig-hell); --fokus: var(--honig);
  color-scheme: dark; color: var(--text);
  position: relative; pointer-events: auto;
  background:
    radial-gradient(ellipse 46% 180px at 50% var(--rug), rgba(228, 105, 58, 0.24), transparent 72%),
    radial-gradient(ellipse 26% 90px at 50% var(--rug), rgba(234, 180, 74, 0.20), transparent 70%),
    linear-gradient(180deg, #0b0c0d 0%, #121315 220px);
  padding-top: clamp(112px, 88.23px + 6.095vw, 176px);
  padding-bottom: clamp(40px, 34.06px + 1.524vw, 56px);
}
:root[data-fuss-klebt] .fuss { position: sticky; bottom: 0; }
/* Die Bahn, auf der der Fuß klebt: die letzte Fensterhöhe der Seite und
   der Fuß selbst. Sie liegt unter main und beginnt eine Fensterhöhe vor
   dessen Ende. Vorher ist der Fuß nirgends im Fenster. Fehlt beim Rollen
   eine Kachel der Seite, sieht man dort den Grund und nie den Fuß. */
.fuss-bahn { position: relative; z-index: 1; margin-top: calc(-100vh - var(--rug)); pointer-events: none; }
.fuss-bahn::before { content: ""; display: block; height: 100vh; }
.fuss-inhalt { display: flex; flex-direction: column; gap: 48px; }
.fuss-satz { display: flex; align-items: center; gap: clamp(10px, 7.77px + 0.571vw, 16px); font-size: var(--h2); line-height: 1.06; font-weight: 600; letter-spacing: -0.022em; }
/* Am Telefon bricht der Satz in zwei gleich lange Zeilen, nie „süß.“ allein. */
.fuss-satz > span { text-wrap: balance; }
.fuss-zeichen { width: clamp(40px, 32.57px + 1.905vw, 60px); height: clamp(40px, 32.57px + 1.905vw, 60px); flex: none; }
.fuss-spalten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.fuss-spalte { display: flex; flex-direction: column; gap: 9px; font-size: 15px; }
.fuss-spalte h2 { font-size: 15px; font-weight: 600; }
.fuss-spalte a { color: var(--text); opacity: 0.66; transition: opacity 200ms var(--kurve); width: fit-content; }
.fuss-spalte a:hover { opacity: 1; color: var(--text); }
/* Noch nicht offen: Der Eintrag steht schon da, ohne Ziel und ausgegraut. */
.fuss-spalte a.fuss-aus, .fuss-spalte a.fuss-aus:hover { opacity: 0.3; cursor: default; pointer-events: none; }
.fuss-zeile { font-size: 13px; color: var(--text); opacity: 0.66; }
@media (max-width: 760px) {
  .fuss-spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
}

/* ── Hereinkommen beim Rollen ────────────────────────────── */
.kommt {
  opacity: 0; transform: translateY(28px) scale(0.98); filter: blur(8px);
  transition: opacity 1.05s var(--einblenden), transform 1.05s var(--einblenden), filter 1.05s var(--einblenden);
}
.kommt.da { opacity: 1; transform: none; filter: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  .kommt { opacity: 1; transform: none; filter: none; transition: none; }
  .menue, .menue nav > a, .menue nav > button, .megamenue { transition: none; }
  .knopf:hover { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .kopf { background: var(--kopf-deckend); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .menue { background: var(--grund); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .megamenue { background: var(--flaeche); -webkit-backdrop-filter: none; backdrop-filter: none; }
}