/* ====================
   Klickfund layout.css
   Container, Kopf mit Markenzeile und Kategorienavigation, Kategoriestreifen,
   zweispaltiges Seitenraster (Deal-Strom plus Seitenspalte), Blaetterleiste,
   Sektionen unter dem Strom, Fuss, Scroll-Reveal.
   Reihenfolge der Stylesheets: tokens -> base -> layout -> components.
   ==================== */

/* --- 1. Container --- */

.container {
  width: 100%;
  max-width: var(--w-content);
  margin-inline: auto;
  padding-inline: var(--sp-gutter);
}

.container--narrow {
  max-width: var(--w-narrow);
}

/* --- 2. Sektionsrhythmus --- */

.section {
  padding-block: var(--sp-section);
}

/* Abgesetzte Sektion, hebt sich ueber die Flaeche ab, nicht ueber Rahmen. */
.section--alt {
  background-color: var(--c-bg-alt);
}

/* --- Dunkles Bildband --------------------
   Eine Sektion, die auf einem Foto liegt. Der Text steht NIE direkt auf
   dem Bild, sondern auf einem dunklen Schleier darueber — sonst haenge
   die Lesbarkeit davon ab, welcher Bildausschnitt gerade sichtbar ist.
   Auf dem Schleier (mindestens 78 % Deckung auf #0A0804) stehen die
   hellen Werte unten mit ueber 12:1.

   Die Farbwerte werden hier lokal umgesetzt, statt jede Regel einzeln
   zu ueberschreiben: alles, was --c-text und Co. benutzt, zieht mit.
   -------------------- */

.section--dunkel {
  position: relative;
  isolation: isolate;
  background-color: #100D07;
  background-image: url("../img/band-folgen.jpg");
  background-size: cover;
  background-position: 72% center;
  border-block: 1px solid var(--c-border-strong);

  --c-text:        #FFFDF7;
  --c-text-muted:  #EFE5D0;
  --c-text-subtle: #D8CBAE;
  --c-gold-ink:    #F5D680;   /* Kicker und Links: hell statt dunkel */

  /* Diese Zeile ist Pflicht, nicht doppelt gemoppelt: Die Ueberschrift
     setzt selbst keine Farbe, sie ERBT sie vom body. Vererbt wird aber
     der dort schon ausgerechnete Wert (#16130C) — die Umsetzung von
     --c-text oben erreicht sie nicht. Ohne diese Zeile steht "Verpass
     keinen Deal" fast schwarz auf schwarz. */
  color: var(--c-text);
}

/* Schmal: der Text nimmt die ganze Breite ein, also deckt der Schleier
   auch ueberall gleich stark ab. */
.section--dunkel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(10, 8, 4, 0.86);
}

/* Breit: der Text sitzt links auf der freien dunklen Flaeche des Fotos,
   rechts bleibt der Schreibtisch sichtbar. Der Schleier ist deshalb
   links dicht und rechts duenn. */
@media (min-width: 900px) {
  .section--dunkel::before {
    background: linear-gradient(90deg,
                rgba(10, 8, 4, 0.93) 0%,
                rgba(10, 8, 4, 0.90) 42%,
                rgba(10, 8, 4, 0.62) 72%,
                rgba(10, 8, 4, 0.45) 100%);
  }

  /* Der Block steht sonst mittig (container--narrow). Hier ruecken die
     Zeilen nach links auf die freie Flaeche des Fotos. Der aeussere
     Container bleibt so breit wie der Rest der Seite, damit die linke
     Kante genau unter Logo und Deals sitzt. */
  .section--dunkel .folgen {
    max-width: var(--w-content);
    text-align: left;
  }

  .section--dunkel .folgen > * {
    max-width: 38rem;
    margin-inline: 0;
  }

  .section--dunkel .folgen__aktionen {
    justify-content: flex-start;
  }
}

/* --- Trennband zwischen Deal-Strom und Erklaertexten --------------------
   Reine Zierde: ein flacher Streifen aus Darios Vorlage. Oben und unten
   laeuft er ueber einen Innenschatten in die Champagnerflaeche aus, damit
   keine zwei harten Kanten quer durch die Seite gehen.
   -------------------- */

.fundband {
  height: clamp(110px, 14vw, 200px);
  background-color: #17140E;
  background-image:
    linear-gradient(90deg, rgba(212, 160, 23, 0.14), rgba(10, 8, 4, 0.06) 60%),
    url("../img/band-fundstuecke.jpg");
  background-size: cover;
  background-position: center;
  box-shadow:
    inset 0 14px 22px -14px var(--c-bg),
    inset 0 -14px 22px -14px var(--c-bg-alt);
}

.section__kopf {
  margin-bottom: var(--sp-7);
}

.section__kopf p {
  margin-top: var(--sp-3);
  color: var(--c-text-muted);
  max-width: var(--w-text);
}

/* --- 2b. Goldband ganz oben --------------------
   Duenner Streifen mit dem Pflichthinweis. Dunkles Gold, damit die weisse
   Schrift darauf an jedem Punkt ueber 5:1 bleibt (siehe --grad-knopf in
   tokens.css).
   -------------------- */

.topbar {
  background: var(--grad-knopf);
  color: var(--c-on-accent);
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  padding-block: var(--sp-2);
}

.topbar__text {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  font-size: var(--fs-100);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  color: inherit;
}

/* Die Werbekennzeichnung. Sie steht rechts im Band und ist der einzige Teil,
   der auch auf dem schmalsten Geraet bleiben MUSS. */
.topbar__pflicht {
  margin: 0;
  font-size: var(--fs-100);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  color: inherit;
  opacity: 0.9;
  white-space: nowrap;
}

/* --- 2b2. Vertrauensband --------------------
   Drei Zusagen im Goldband. Sie beantworten die zwei Fragen, die ein Besucher
   bei einer Deal-Seite zuerst hat: Was kostet mich das, und was passiert mit
   meinen Daten. Jede Zusage ist nachpruefbar — was hier stehen darf, steht im
   Kommentar in index.html.
   -------------------- */

.vertrauensband {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.vertrauensband__punkt {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-100);
  line-height: 1.25;
}

.vertrauensband__zeichen {
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
  color: currentColor;
  opacity: 0.95;
}

.vertrauensband__text {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 var(--sp-2);
}

.vertrauensband__text strong {
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
}

/* Am Bild gemessen: mit ausformulierten Halbsaetzen dahinter ("Du zahlst bei
   Amazon den normalen Preis") brauchte das Band selbst bei 1440 px zwei
   Zeilen und war 87 px hoch — ein Balken, keine Kopfzeile. Es bleibt bei den
   drei Kurzformen; ausgefuehrt stehen sie in "Warum diese Seite" und in der
   Datenschutzerklaerung. */

/* Auf dem Handy bleiben die drei Kurzformen und die Kennzeichnung, beides
   mittig und umbrechend. */
@media (max-width: 599px) {
  .topbar__inner {
    justify-content: center;
    gap: var(--sp-1) var(--sp-4);
  }

  .vertrauensband {
    justify-content: center;
    gap: var(--sp-1) var(--sp-4);
  }

  .vertrauensband__punkt { font-size: 0.75rem; }
  .vertrauensband__zeichen { width: 1rem; height: 1rem; }

  /* Drei ausgeschriebene Zusagen untereinander machen aus der Kopfzeile einen
     95 px hohen Balken (gemessen bei 390 px). Auf dem Handy tragen deshalb
     die Kurzformen: "Kostenlos", "Ohne Cookies", "Kauf bei Amazon" — die
     Aussage bleibt, nur die Beifuegung faellt weg. */
  .nur-breit { display: none; }
}

/* --- 3. Kopfbereich --------------------
   Zwei Zeilen wie bei einem Deal-Portal: oben die Marke mit Suche, darunter
   die Kategorien. Nur die Kategoriezeile klebt beim Scrollen oben, die
   Markenzeile scrollt weg — sonst bliebe auf dem Handy zu wenig Inhalt uebrig.
   -------------------- */

/* Die Markenzeile ist hell und traegt dunkle Schrift. Farbe kommt von der
   Verlaufslinie darunter und den Akzentflaechen, nicht vom Textgrund —
   ein gruener Grund mit weissem Claim war am hellen Ende des Verlaufs
   nur 2,5:1 und damit unlesbar. */
.markenzeile {
  /* Glas statt Verlauf (09.08.2026). Sie steht ueber dem Goldliniennetz der
     Seite; mit 88 % scheint es als feiner Schimmer durch, ohne dass die
     Wortmarke oder der Claim daran verlieren. */
  background-color: var(--glas-dicht);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.1) 70%, rgba(255, 255, 255, 0) 100%);
  -webkit-backdrop-filter: var(--glas-blur);
  backdrop-filter: var(--glas-blur);
  color: var(--c-on-marke);
  border-bottom: 3px solid transparent;
  border-image: var(--grad-linie) 1;
}

.markenzeile__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  padding-block: var(--sp-4);
}

/* --- 4. Logo (Wortmarke plus Lupe) --- */

.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  color: inherit;
  text-decoration: none;
  padding: var(--sp-1) var(--sp-2);
  margin-inline-start: calc(var(--sp-2) * -1);
  border-radius: var(--r-md);
}

.logo__lupe {
  width: 2rem;
  height: 2rem;
  color: currentColor;
  flex-shrink: 0;
}

/* Die Lupe dreht sich beim Laden genau einmal kurz an, wie ein Suchvorgang. */
.js .logo__lupe {
  animation: lupe-suchen 400ms var(--ease-out) 1;
}

@keyframes lupe-suchen {
  0%   { transform: rotate(-6deg); }
  55%  { transform: rotate(5deg); }
  100% { transform: rotate(0deg); }
}

.logo__text {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
}

.logo__wort {
  font-size: 1.5rem;   /* 24px */
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-tight);
  line-height: 1;
}

.logo__claim {
  font-size: var(--fs-200);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  /* Gedaempft, damit die Wortmarke fuehrt. --c-on-marke-mild ist so
     gewaehlt, dass der Wert an JEDEM Punkt des Markenverlaufs ueber 4,5:1
     bleibt: hell 5,3:1 bis 6,0:1, dunkel 7,8:1 bis 8,7:1. */
  color: var(--c-on-marke-mild);
}

/* Das "i" ist ein punktloses i (U+0131), der Punkt wird als Kreis gesetzt.
   Der vorlesbare Name steht im aria-label des Logo-Links. */
.logo__i {
  position: relative;
  display: inline-block;
  /* Feste eigene Zeilenhoehe, damit der Punkt unabhaengig von der
     Zeilenhoehe der Ueberschrift immer gleich sitzt. */
  line-height: 1;
}

.logo__i::after {
  content: "";
  position: absolute;
  left: 50%;
  /* Der Buchstabe ist ein punktloses i, der Punkt kommt von hier.
     0,27em ist die Unterkante des Punktes von der Oberkante des
     Buchstabenkastens aus. Die Oberkante des i liegt je nach System bei
     0,31em (Roboto) bis 0,41em (Segoe UI), so bleibt auf jedem Geraet ein
     sichtbarer Abstand und nirgends klebt der Punkt am Buchstaben. */
  top: -0.03em;
  width: 0.30em;
  height: 0.30em;
  transform: translateX(-50%);
  background-color: currentColor;
  border-radius: var(--r-full);
}

/* Zurueck-Weg auf den Unterseiten (Impressum, Datenschutz). Dort gibt es
   keine Kategoriezeile, nur diesen einen Link in der Markenzeile. */
.unternav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--sp-4);
  background-color: var(--c-surface);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-full);
  color: var(--c-accent-ink);
  font-size: var(--fs-300);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .unternav__link:hover {
    background-color: var(--c-accent-soft);
    border-color: var(--c-accent);
  }
}

/* --- 5. Suche --------------------
   Filtert nur die Liste auf dieser Seite. Es geht keine Anfrage nach draussen,
   deshalb steht auch kein Absende-Knopf daneben.
   -------------------- */

.suche {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 16rem;
  max-width: 24rem;
}

/* Die Lupe war bis zum 13.08.2026 zwar da, aber nicht zu sehen: gemessen
   17,6 px in rgb(117,106,84) auf rgba(255,253,247,.66), Strichstaerke 2,2.
   Auf Darios Bildschirmfoto fehlte sie schlicht, und er hat sie als
   "hinzufuegen" gemeldet, nicht als "zu blass". Ein Zeichen, das niemand
   findet, ist dasselbe wie kein Zeichen.

   Groesser, dunkler, kraeftiger. Die Farbe ist die normale Textfarbe statt
   der gedaempften: Das Sinnbild traegt hier die Bedeutung des Feldes, es ist
   keine Randnotiz. */
.suche__lupe {
  position: absolute;
  left: var(--sp-4);
  display: flex;
  width: 1.35rem;
  height: 1.35rem;
  color: var(--c-text);
  pointer-events: none;
}

.suche__lupe svg {
  width: 100%;
  height: 100%;
}

.suche__feld {
  width: 100%;
  min-height: 44px;
  /* Muss zu Rand und Breite der Lupe darueber passen: sonst steht der
     Platzhalter auf dem Sinnbild. */
  padding: var(--sp-2) var(--sp-8) var(--sp-2) calc(var(--sp-4) + 1.35rem + var(--sp-3));
  background-color: var(--glas);
  -webkit-backdrop-filter: var(--glas-blur);
  backdrop-filter: var(--glas-blur);
  box-shadow: inset 0 1px 0 var(--glas-kante-hell),
              inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  border: 1px solid var(--glas-kante);
  border-radius: var(--r-full);
  color: var(--c-text);
  font: inherit;
  font-size: var(--fs-300);
}

.suche__feld::placeholder {
  color: var(--c-text-subtle);
}

/* Chrome zeichnet ein eigenes Kreuz in type=search. Wir haben einen eigenen
   Knopf, sonst staenden zwei nebeneinander. */
.suche__feld::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.suche__loeschen {
  position: absolute;
  right: var(--sp-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: none;
  border: 0;
  border-radius: var(--r-full);
  color: var(--c-text-muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  .suche__loeschen:hover {
    background-color: var(--c-surface-2);
    color: var(--c-text);
  }
}

/* --- 6. Kategorienavigation (klebend) --- */

/* Getoentes Glas mit goldener Lichtkante — das Gegenstueck zur getoenten
   Seitenleiste der Diagnosesuite, nur hell statt dunkel.

   Der Verlauf oben drin ist der einfallende Lichtschein; die zwei
   Hintergrundebenen liegen UEBER dem, was durchscheint, und machen aus
   einer milchigen Scheibe eine Glasscheibe. */
.hauptnav {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background-color: var(--glas);
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.12) 55%,
    rgba(255, 255, 255, 0) 100%
  );
  -webkit-backdrop-filter: var(--glas-blur-stark);
  backdrop-filter: var(--glas-blur-stark);
  border-bottom: 1px solid var(--glas-kante);
  box-shadow: inset 0 1px 0 var(--glas-kante-hell);
}

/* Die feine Goldschiene unter der Leiste. Sie liegt eigens auf, statt die
   Kante einzufaerben: eine 1px-Kante in Volgold saehe nach Strich aus, der
   Verlauf sieht nach Kante aus. */
.hauptnav::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 1px;
  background: var(--grad-linie);
  opacity: 0.45;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}

/* Sobald die Leiste wirklich ueber dem Inhalt liegt, wird sie dicht und
   wirft Schatten — vorher schwebt sie ueber nichts.

   FUND AM BILD (09.08.2026): Mit --glas-dicht (88 %) las sich der Text der
   Seite durch die Leiste mit. Auf der Aufnahme stand "…arnisse auf dieser
   Seite" quer unter "MONITOR" — zwei Schriften uebereinander. Die
   Unschaerfe allein reicht dafuer nicht: Chromium blurrt hier deutlich
   schwaecher, als die 26 px vermuten lassen (mit voellig durchsichtiger
   Flaeche gegengeprueft, der Text war noch zu lesen).

   Deshalb ist die Leiste im gerollten Zustand fast undurchsichtig. Glas
   bleibt sie trotzdem: durch die Lichtkante oben, die Goldschiene unten und
   die Saettigung der Unschaerfe. Im RUHEZUSTAND, wo nichts darunter
   durchlaeuft, bleibt sie mit 66 % richtig durchsichtig — dort sieht man
   das Goldliniennetz der Seite hindurch, und das ist der Effekt, um den es
   geht. Lesbarkeit vor Effekt, und zwar nur dort, wo sie kollidiert. */
.hauptnav.is-scrolled {
  background-color: rgba(255, 253, 247, 0.96);
  box-shadow: inset 0 1px 0 var(--glas-kante-hell), var(--sh-2);
}

.hauptnav.is-scrolled::after {
  opacity: 1;
}

.hauptnav__inner {
  /* Auf schmalen Geraeten wird seitlich gewischt statt umgebrochen — sonst
     waere die Navigation auf dem Handy vier Zeilen hoch. */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  /* Nach einem Klick auf den Pfeil soll ein Eintrag buendig am Rand stehen.
     Ohne das blieb links eine abgeschnittene Zahl ohne Wort stehen — das
     liest sich wie ein Darstellungsfehler. "proximity" statt "mandatory",
     damit freies Wischen nicht einrastet. */
  scroll-snap-type: x proximity;
}

/* Ohne das rastet der ERSTE Eintrag am Rand des Scrollbereichs ein und die
   Bahn steht beim Laden schon um den Innenabstand verschoben da — der linke
   Pfeil erschien dann sofort, obwohl links nichts liegt. Am Bild gemessen:
   scrollLeft war beim Laden nicht 0. */
.hauptnav__inner,
.beliebt__inner {
  scroll-padding-inline: var(--sp-gutter);
}

.hauptnav__liste > li,
.beliebt__liste > li,
/* Die Beschriftung "Direkt zu:" steht VOR den Kacheln. Ohne eigenen
   Rastpunkt war der erste Punkt die erste Kachel — der Streifen stand beim
   Laden 94 px verschoben und schob die Beschriftung halb aus dem Bild. */
.beliebt__titel {
  scroll-snap-align: start;
}

/* --- 6a2. Wischleisten: Pfeile links und rechts --------------------
   Fuer Reihen, die breiter sind als das Fenster (Kategorieleiste,
   Kachelstreifen). Wischen ging schon immer, war mit der Maus aber nicht zu
   sehen. Die Pfeile blendet app.js ein und aus — nur wenn es in ihrer
   Richtung wirklich noch etwas gibt.
   -------------------- */

.wischer {
  position: relative;
}

.wischpfeil {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-top: -1.25rem;
  padding: 0;
  background: var(--c-surface);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-full);
  box-shadow: var(--sh-2);
  color: var(--c-accent-ink);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.wischpfeil[hidden] { display: none; }

/* Die Pfeile gehoeren an den Anfang und das Ende des INHALTS, nicht an den
   Fensterrand: die Leiste selbst steht in einem Container mit hoechstens
   --w-content Breite und ist mittig. Auf einem breiten Bildschirm klebten sie
   sonst 120 px neben dem, worauf sie sich beziehen.

   Die Formel nimmt den halben freien Rand — und mindestens den kleinen
   Abstand, damit sie auf schmalen Geraeten nicht aus dem Bild fallen. */
.wischpfeil--links {
  left: max(var(--sp-2), (100% - var(--w-content)) / 2);
}

.wischpfeil--rechts {
  right: max(var(--sp-2), (100% - var(--w-content)) / 2);
}

@media (hover: hover) and (pointer: fine) {
  .wischpfeil:hover {
    background: var(--c-gold-soft);
    transform: scale(1.06);
  }
}

/* Weicher Auslauf an den Raendern, damit ein angeschnittener Eintrag nicht
   wie ein Darstellungsfehler aussieht. Liegt UNTER den Pfeilen und faengt
   keine Klicks ab. */
.wischer--aktiv::before,
.wischer--aktiv::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3.5rem;
  z-index: 1;
  pointer-events: none;
}

.wischer--aktiv::before {
  left: 0;
  background: linear-gradient(90deg, var(--c-surface) 15%, transparent 100%);
}

.wischer--aktiv::after {
  right: 0;
  background: linear-gradient(270deg, var(--c-surface) 15%, transparent 100%);
}

/* Der Kachelstreifen sitzt auf der abgesetzten Flaeche, nicht auf --c-surface.
   Mit der falschen Farbe waere der Auslauf ein heller Balken. */
.beliebt .wischer--aktiv::before {
  background: linear-gradient(90deg, var(--c-bg-alt) 15%, transparent 100%);
}

.beliebt .wischer--aktiv::after {
  background: linear-gradient(270deg, var(--c-bg-alt) 15%, transparent 100%);
}

.hauptnav__liste {
  display: flex;
  align-items: stretch;
  gap: var(--sp-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.hauptnav__knopf {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  margin-block: 4px;
  padding-inline: var(--sp-3);
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-full);
  color: var(--c-text-muted);
  font: inherit;
  font-size: var(--fs-300);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}

/* Der Markenbalken von frueher ist weg: Der aktive Punkt ist jetzt eine
   gefuellte Goldkapsel, und ein Balken quer unter einer runden Kapsel sah
   aus wie ein Fehler. Die Unterscheidung traegt weiterhin nicht die Farbe
   allein — Kapsel, Rand, Schatten UND aria-current. */

/* Der Glaskreis hinter dem Zeichen. Das Motiv der Diagnosesuite (.nav-orb),
   hier in Gold. Das Zeichen selbst kommt aus kategorien.js und steht als
   <span class="emoji"> im Knopf, deshalb braucht es keine Zeile JavaScript.
   Feste Masse, damit alle Kreise gleich gross sind — Emoji sind
   unterschiedlich breit, ohne feste Masse wackelt die ganze Reihe. */
.hauptnav__knopf > .emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--r-full);
  border: 1px solid var(--glas-kante);
  background-color: var(--glas-duenn);
  background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 62%);
  box-shadow: inset 0 1px 0 var(--glas-kante-hell);
  font-size: 0.95rem;
  line-height: 1;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .hauptnav__knopf:hover {
    color: var(--c-text);
    background-color: var(--glas);
    border-color: var(--glas-kante);
    box-shadow: var(--sh-glas);
  }

  .hauptnav__knopf:hover > .emoji {
    border-color: var(--glas-kante-gold);
    box-shadow: inset 0 1px 0 var(--glas-kante-hell),
                0 0 12px -4px rgba(212, 160, 23, 0.9);
    transform: translateY(-1px);
  }
}

/* Der gewaehlte Punkt: die Goldkapsel. Dunkle Schrift auf Gold (> 7,8:1),
   deshalb --c-on-gold und nicht Weiss. */
.hauptnav__knopf[aria-current="true"] {
  background-image: var(--grad-gold);
  border-color: var(--c-gold-tief);
  color: var(--c-on-gold);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7),
              0 8px 20px -10px rgba(180, 130, 20, 0.75);
}

.hauptnav__knopf[aria-current="true"] > .emoji {
  border-color: rgba(255, 255, 255, 0.75);
  background-color: rgba(255, 255, 255, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.hauptnav__knopf[aria-current="true"] .hauptnav__zahl {
  color: var(--c-on-gold);
}

/* --- Die SuperDeals in der Leiste --------------------
   Sie steht als erste Kategorie da (Reihenfolge aus kategorien.js), aber
   allein davon hebt sie sich nicht ab: links davor steht "Alle Deals", und
   danach sieht der erste Punkt aus wie jeder andere. Deshalb bekommt sie
   eine eigene Kapsel mit Goldrand. Der Stern davor kommt aus kategorien.js
   und ist Schmuck, der Rand traegt die Unterscheidung.

   Ohne Deal in der Kategorie erscheint der Punkt gar nicht erst — das
   regelt kategorienZaehlen in app.js fuer alle Kategorien gleich.
   -------------------- */
/* Seit dem 09.08.2026 sind ALLE Punkte Kapseln. Damit die SuperDeals
   weiterhin herausstechen, tragen sie ihren Goldrand DAUERHAFT — bei den
   anderen erscheint er erst beim Ueberfahren — und einen leisen Goldschein
   darunter. Der Unterschied ist damit auch im Ruhezustand da, nicht nur
   unter der Maus. */
.hauptnav__knopf--super {
  margin-inline-end: var(--sp-2);
  background-color: var(--c-gold-soft);
  border-color: var(--c-gold);
  color: var(--c-gold-ink);        /* 5,37:1 auf Weiss, 5,0:1 auf Goldsoft */
  box-shadow: inset 0 1px 0 var(--glas-kante-hell),
              0 6px 18px -12px rgba(180, 130, 20, 0.85);
}

.hauptnav__knopf--super > .emoji {
  border-color: var(--glas-kante-gold);
  background-color: rgba(255, 255, 255, 0.6);
}

@media (hover: hover) and (pointer: fine) {
  .hauptnav__knopf--super:hover {
    background-color: var(--c-gold-blass);
    border-color: var(--c-gold-tief);
    color: var(--c-gold-tief);
    box-shadow: var(--sh-glas-gold);
  }
}

.hauptnav__zahl {
  font-size: var(--fs-100);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  color: var(--c-text-subtle);
  text-transform: none;
  letter-spacing: var(--ls-normal);
}

/* --- 6b. Kopfbuehne --------------------
   Links die Ansage, rechts das Setup-Bild aus Darios Entwurf.
   Unter der Flaeche liegen weiterhin zwei sehr schwache Goldschimmer;
   sie tragen den linken Teil, wo kein Bild liegt.

   Ab 1024px haengt das Bild frei in der rechten Haelfte und laeuft bis
   an den Fensterrand. Links wird es weich ausgeblendet (mask-image),
   damit keine harte Kante neben dem Text steht. Darunter ist es ein
   ganz normaler Block UNTER dem Text — nicht darueber, sonst schoebe
   es die Ueberschrift auf dem Handy aus dem Bild.
   -------------------- */

.buehne {
  position: relative;
  overflow: hidden;
  background: var(--grad-flaeche);
  border-bottom: 1px solid var(--c-border);
}

.buehne::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(46rem 26rem at 82% -10%, rgba(212, 160, 23, 0.20), transparent 68%),
    radial-gradient(30rem 20rem at 4% 108%, rgba(212, 160, 23, 0.13), transparent 70%);
}

.buehne__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-7);
  align-items: start;
  padding-block: var(--sp-8) var(--sp-9);
}

@media (min-width: 1024px) {
  .buehne__inner {
    /* Die zweite Spalte bleibt leer: dort liegt das Bild, das ab dieser
       Breite absolut positioniert ist und bis an den Fensterrand geht. */
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--sp-9);
    align-items: center;
    padding-block: var(--sp-9) var(--sp-10);
  }
}

.buehne__bild {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
}

@media (min-width: 1024px) {
  .buehne__bild {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 52%;
    width: auto;
    height: 100%;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
  }
}

.buehne__titel {
  margin: 0;
  font-size: var(--fs-800);
}

.buehne__lead {
  max-width: var(--w-text);
  margin: var(--sp-5) 0 0;
  font-size: var(--fs-400);
  line-height: var(--lh-normal);
  color: var(--c-text-muted);
}

.buehne__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

/* --- 6c. Tresor: die gerechneten Zahlen --- */

.tresor {
  position: relative;
  padding: var(--sp-6);
  background-color: var(--glas-dicht);
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(255, 255, 255, 0.2) 28%,
    rgba(255, 255, 255, 0) 60%
  );
  -webkit-backdrop-filter: var(--glas-blur-stark);
  backdrop-filter: var(--glas-blur-stark);
  border: 1px solid var(--glas-kante-gold);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-glas-hoch);
  /* Der Goldrand oben ist die einzige Stelle, an der die Tafel Farbe
     traegt. Alles andere bleibt ruhig, damit die Summe wirkt. */
  overflow: hidden;
}

.tresor::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 4px;
  background: var(--grad-linie);
}

.tresor__marke {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  font-size: var(--fs-100);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-weit);
  text-transform: uppercase;
  color: var(--c-gold-ink);
}

.tresor__titel {
  margin: var(--sp-3) 0 0;
  font-family: var(--ff-sans);
  font-size: var(--fs-300);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-normal);
  color: var(--c-text-muted);
  text-wrap: pretty;
}

.tresor__summe {
  margin: var(--sp-2) 0 0;
  font-family: var(--ff-anzeige);
  font-size: var(--fs-900);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tighter);
  color: var(--c-gold-ink);
}

.tresor__fussnote {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-100);
  line-height: var(--lh-normal);
  color: var(--c-text-subtle);
}

.tresor__zahlen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
  margin: var(--sp-5) 0 0;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-border);
}

/* Die Beschriftung "Rabatt im Schnitt" braucht auf dem Handy zwei Zeilen,
   die beiden anderen nur eine. Ohne dieses Raster stuenden die drei Werte
   dann auf drei verschiedenen Hoehen. */
.tresor__zahlen > div {
  display: grid;
  grid-template-rows: 1fr auto;
}

.tresor__zahlen dt {
  font-size: var(--fs-100);
  color: var(--c-text-subtle);
}

.tresor__zahlen dd {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-500);
  font-weight: var(--fw-bold);
  color: var(--c-text);
}

/* Als Band unter der Vertrauensleiste: die Summe links, die drei Zahlen
   rechts daneben statt darunter. Der Abstand sitzt an der Tafel selbst,
   nicht am Container — sonst bliebe eine Luecke stehen, wenn app.js die
   Tafel mangels Deals ausblendet. */

.tresor--band {
  margin-block: var(--sp-7);
}

@media (min-width: 900px) {
  .tresor--band {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    /* Die vier Zeilen muessen ausdruecklich dastehen. Ohne sie waeren es
       IMPLIZITE Zeilen, und "grid-row: 1 / -1" spannt nur ueber das
       explizite Raster — die Zahlen klebten dann oben in Zeile 1 und
       darunter stand eine grosse Leere. */
    grid-template-rows: repeat(4, auto);
    column-gap: var(--sp-8);
    align-items: center;
    padding: var(--sp-7);
  }

  .tresor--band .tresor__marke,
  .tresor--band .tresor__titel,
  .tresor--band .tresor__summe,
  .tresor--band .tresor__fussnote {
    grid-column: 1;
  }

  .tresor--band .tresor__zahlen {
    grid-column: 2;
    grid-row: 1 / -1;
    margin: 0;
    padding: 0 0 0 var(--sp-7);
    border-top: 0;
    border-left: 1px solid var(--c-border);
  }
}

/* --- 6d. Vertrauensleiste --------------------
   Vier Punkte quer unter der Buehne, wie in der Vorlage. Auf dem Handy
   wird seitlich gewischt statt vierfach umgebrochen.
   -------------------- */

.vertrauen {
  background-color: var(--glas);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 70%);
  -webkit-backdrop-filter: var(--glas-blur);
  backdrop-filter: var(--glas-blur);
  border-block: 1px solid var(--glas-kante);
  box-shadow: inset 0 1px 0 var(--glas-kante-hell);
}

.vertrauen__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
  padding-block: var(--sp-5);
}

@media (min-width: 760px) {
  .vertrauen__inner {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.vertrauen__punkt {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.vertrauen__zeichen {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background-image:
    radial-gradient(120% 130% at 28% 8%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 58%),
    var(--grad-gold);
  border: 1px solid var(--c-gold-hell);
  border-radius: var(--r-full);
  font-size: 1.15rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7),
              0 6px 16px -8px rgba(180, 130, 20, 0.8);
}

.vertrauen__text {
  display: flex;
  flex-direction: column;
  font-size: var(--fs-200);
  color: var(--c-text-subtle);
  line-height: var(--lh-snug);
}

.vertrauen__text strong {
  font-size: var(--fs-300);
  font-weight: var(--fw-bold);
  color: var(--c-text);
}

/* --- 6e. Deal des Tages --------------------
   Dieselbe Karte wie im Strom, nur im Goldrahmen mit Band darueber.
   -------------------- */

/* Die Karte im Goldrahmen braucht keinen eigenen Rand mehr. */
/* --- 7. Kategoriestreifen mit Bildkacheln --- */

.beliebt {
  background-color: var(--glas);
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0.08) 60%,
    rgba(255, 255, 255, 0) 100%
  );
  -webkit-backdrop-filter: var(--glas-blur);
  backdrop-filter: var(--glas-blur);
  border-block: 1px solid var(--glas-kante);
  box-shadow: inset 0 1px 0 var(--glas-kante-hell);
}

.beliebt__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  overflow-x: auto;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;   /* Begruendung siehe .hauptnav__inner */
}

.beliebt__titel {
  flex-shrink: 0;
  margin: 0;
  font-size: var(--fs-200);
  font-weight: var(--fw-semibold);
  color: var(--c-text-muted);
  max-width: 6rem;
  line-height: 1.25;
}

.beliebt__liste {
  display: flex;
  gap: var(--sp-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Die Kachel, die hervorsteht (Fatih, 09.08.2026).
   Vorher lag sie flach in der Leiste. Jetzt: Glasrahmen mit Lichtkante
   oben, echter Schatten darunter, und beim Ueberfahren hebt sie sich und
   bekommt die Goldkante. Das Bild sitzt IM Rahmen, nicht auf ihm. */
.beliebt__knopf {
  position: relative;
  display: block;
  width: 10rem;
  height: 4.25rem;
  padding: 0;
  border: 1px solid var(--glas-kante);
  border-radius: var(--r-lg);
  background-color: var(--glas);
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--sh-glas);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .beliebt__knopf:hover {
    transform: translateY(-3px);
    border-color: var(--glas-kante-gold);
    box-shadow: var(--sh-glas-gold);
  }
}

.beliebt__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dunkler Verlauf ueber dem Bild, damit die Beschriftung auf JEDEM Bild
   lesbar bleibt — auch auf einem fast weissen Produktfoto.
   Die Lichtkante oben liegt hier drin und nicht als box-shadow am Knopf:
   der Knopf hat overflow: hidden, ein inset-Schatten laege UNTER dem Bild. */
.beliebt__name {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  gap: var(--sp-2);
  padding: var(--sp-2);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 18%),
    linear-gradient(180deg,
      rgba(30, 22, 6, 0.06) 0%,
      rgba(30, 22, 6, 0.80) 100%);
  color: #FFFFFF;
  font-size: var(--fs-200);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  text-shadow: 0 1px 2px rgba(30, 22, 6, 0.7);
}

/* Das Zeichen als Glasplaettchen, wie im Menue — nur eckig-rund, weil es
   hier auf einem Bild liegt und ein Kreis darauf schwimmt. Halbdurchsichtig
   weiss, damit das Produktfoto darunter noch zu ahnen ist. */
.beliebt__name .emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255, 255, 255, 0.55);
  background-color: rgba(255, 255, 255, 0.26);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  font-size: 0.8rem;
  line-height: 1;
  text-shadow: none;
}

/* --- 8. Dealbereich (11.08.2026)

   Hier stand bis zum 11.08.2026 ein zweispaltiges Raster: Strom links,
   Seitenspalte rechts. Die Seitenspalte ist auf Fatihs Wunsch ganz
   entfallen, damit die Angebote die volle Seitenbreite bekommen. Was bleibt,
   ist der normale Container mit Luft nach oben und unten.

   align-items: start ist mit der zweiten Spalte hinfaellig geworden und
   deshalb hier weg — im Deal-Raster selbst steht es weiterhin, dort wird es
   gebraucht. --- */

.dealbereich {
  padding-block: var(--sp-6) var(--sp-8);
}

.feedkopf {
  display: flex;
  flex-wrap: wrap;
  /* Seit die Suche hier steht, nicht mehr baseline: Ein Eingabefeld hat eine
     andere Grundlinie als eine Ueberschrift und saesse sonst zu hoch. */
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
  margin-bottom: var(--sp-5);
}

/* Die Suche in der Mitte, zwischen Titel und Anzahl (Fatih, 11.08.2026).
   Sie nimmt den Platz, der uebrig bleibt, hoert aber bei 22rem auf: ein
   Suchfeld ueber die halbe Fensterbreite sieht nach Hauptsache aus, und die
   Hauptsache sind die Angebote. */
.feedkopf__suche {
  flex: 1 1 14rem;
  max-width: 22rem;
}

/* Reicht der Platz nicht, faellt die Suche in eine eigene Zeile und nimmt
   sie ganz. Ohne das steht sie neben der Anzahl gequetscht auf 6rem. */
@media (max-width: 720px) {
  .feedkopf__suche {
    order: 3;
    flex-basis: 100%;
    max-width: none;
  }
  .feedkopf__zahl {
    order: 2;
  }
}

.feedkopf__titel {
  margin: 0;
  font-size: var(--fs-600);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-tight);
}

.feedkopf__zahl {
  margin: 0;
  font-size: var(--fs-200);
  color: var(--c-text-muted);
  font-variant-numeric: tabular-nums;
}

/* Der Deal-Strom (11.08.2026 auf ein Raster umgestellt)

   Die eigene Kennzeichnung --raster hat einen Grund, auch wenn es gerade
   nur EINE .deal-feed-Liste gibt: Solange der Kasten "Größter Rabatt
   gerade" ueber dem Strom stand, baute er seine Karte in dieselbe Klasse.
   Mit der Regel auf .deal-feed sass seine einzelne Karte in einem
   Dreierraster und nahm ein Drittel der Breite ein — daneben klaffte zwei
   Drittel Leere (am Bild gemessen, 11.08.). Der Kasten ist inzwischen weg,
   die Trennung bleibt: Wer die Karte irgendwo einzeln zeigt, soll dafuer
   nicht erst dieses Raster wieder auseinandernehmen muessen.

   Vorher stand hier eine Spalte: eine grosse Karte je Zeile. Fatih:
   "Kannst du in der Mitte die Angebote 3 nebeneinander machen und kleiner,
   so dass mehrere passen auf einen Blick."

   WARUM DIE HALTEPUNKTE SO LIEGEN — an der FEEDSPALTE gerechnet, nicht am
   Fenster. Die Seitenspalte frisst ab 1024 px 20rem und ab 1280 px 22rem,
   also ist die Spalte fuer die Karten deutlich schmaler als das Fenster:

     Fenster    Seitenspalte   Platz fuer Karten   Spalten
      <640 px   keine          bis ~600 px         1
      900 px    keine          ~850 px             2
     1024 px    20rem          ~640 px             2
     1280 px    22rem          ~795 px             3  -> ~245 px je Karte

   Drei Spalten erst ab 1280 px, weil sie bei 1024 px auf ~190 px je Karte
   hinausliefen: Preis und Knopf haetten dort umgebrochen. Bei 1440 px
   aendert sich nichts mehr, der Container ist auf 1180 px gedeckelt.

   align-items: start ist Pflicht, kein Feinschliff. Ohne die Zeile streckt
   das Raster jede Karte auf die Hoehe der hoechsten ihrer Reihe — am
   29.07. mit 750 px Leere gemessen, am 01.08. gleich wieder aufgetreten. */
.deal-feed--raster {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  list-style: none;
  margin: 0;
  padding: 0;

  /* EINHEITLICHE KARTENHOEHE (11.08.2026, Fatih: "manche Angebote sind
     laenger und mal kuerzer, mach bitte alle in einer einheitlichen
     Groesse").

     grid-auto-rows: 1fr gibt JEDER Zeile dieselbe Hoehe, nicht nur den
     Karten innerhalb einer Zeile. Sonst waere Zeile 1 hoch und Zeile 2
     flach, und das Raster saehe genauso ungleich aus wie vorher.

     ACHTUNG, hier steht bewusst KEIN align-items: start — anders als im
     Uebersichtsraster, wo genau das Pflicht ist. Der Unterschied ist nicht
     Geschmack: Am 29.07. und 01.08. hat das Strecken 750 px LEERE erzeugt,
     weil in der gestreckten Karte nichts nachrueckte. Hier wird die Hoehe
     GEFUELLT — die Karte ist eine Flexspalte, der Knopf sitzt unten
     (margin-top: auto in components.css), und die Texte laufen auf feste
     Zeilenzahl. Strecken ohne Fuellen bleibt ein Fehler. */
  grid-auto-rows: 1fr;

}

@media (min-width: 640px) {
  .deal-feed--raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
  .deal-feed--raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.deals__hinweis {
  margin-top: var(--sp-6);
  font-size: var(--fs-200);
  color: var(--c-text-muted);
  max-width: var(--w-text);
}

/* --- 9. Seitenspalte --- */

/* --- Nachladeknopf (11.08.2026, loest die Blaetterleiste ab) ---

   Er steht mittig unter dem Raster und ist bewusst nicht die Goldschiene:
   Gold gehoert auf dieser Seite dem einen Knopf, der Geld bringt ("Zum
   Angebot"). Ein zweiter goldener Knopf pro Bildschirm nimmt genau dem
   die Wirkung. --- */

.mehrladen {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-6);
}

.mehrladen__knopf {
  min-width: 16rem;
  font-size: var(--fs-400);
}

/* Die Zahl sagt, wie viele beim naechsten Druck dazukommen. */
.mehrladen__zahl {
  margin-left: var(--sp-2);
  padding: 0.1em 0.5em;
  border-radius: var(--r-full);
  background-color: var(--c-gold-soft);
  border: 1px solid var(--c-border-strong);
  color: var(--c-gold-ink);
  font-size: var(--fs-200);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}

/* --- 11. Raster der Textsektionen --- */

.karten-grid,
.schritte-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  list-style: none;
  margin: 0;
  padding: 0;
  /* Ohne diese Zeile streckt das Raster jede Karte auf die Hoehe der
     hoechsten in derselben Zeile. */
  align-items: start;
}

.schritte-grid { counter-reset: schritt; }

@media (min-width: 760px) {
  .karten-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-5);
  }

  .schritte-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-5);
  }
}

/* --- 12. Folgen-Sektion --- */

.folgen {
  text-align: center;
}

.folgen__text {
  margin: var(--sp-4) auto 0;
  color: var(--c-text-muted);
  max-width: 52ch;
}

.folgen__aktionen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

.folgen__zusatz {
  margin-top: var(--sp-5);
  font-size: var(--fs-200);
  color: var(--c-text-subtle);
}

/* --- 13. Fussbereich --- */

.site-footer {
  background-color: var(--c-bg-alt);
  border-top: 1px solid var(--c-border);
  padding-block: var(--sp-8) var(--sp-7);
}

.fussraster {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  margin-bottom: var(--sp-7);
  align-items: start;
}

@media (min-width: 640px) {
  .fussraster { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  /* Der Kategorienblock bekommt mehr Platz, weil seine Liste zweispaltig
     laeuft. Die drei anderen Bloecke haben je hoechstens drei Zeilen. */
  .fussraster { grid-template-columns: 1.3fr 1.9fr 1fr 0.9fr; }
}

/* Zwei Spalten statt einer langen Reihe. column-fill: balance verteilt gleich
   auf beide Spalten, sonst steht die zweite fast leer. */
/* Schon auf dem Handy zwei Spalten: bei 390 px steht die laengste
   Beschriftung ("Kabelmanagement") noch in einer Zeile, und die Fusszeile
   schrumpft von 16 Eintragszeilen auf 8. Darunter — sehr schmale Geraete —
   bleibt es einspaltig, sonst bricht der Text mitten im Wort um. */
@media (min-width: 380px) {
  .fussblock__liste--spalten {
    columns: 2;
    column-gap: var(--sp-5);
    column-fill: balance;
  }

  /* Ein Eintrag darf nicht zwischen zwei Spalten zerrissen werden. */
  .fussblock__liste--spalten li {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
  }
}

.fussblock__titel {
  position: relative;
  margin: 0 0 var(--sp-4);
  padding-bottom: var(--sp-3);
  font-size: var(--fs-300);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-text);
}

.fussblock__titel::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2.5rem;
  height: 3px;
  border-radius: 3px;
  background: var(--grad-linie);
}

.fussblock__text {
  margin: 0;
  font-size: var(--fs-300);
  line-height: var(--lh-normal);
  color: var(--c-text-muted);
  max-width: 40ch;
}

.fussblock__liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fussblock__liste a,
.fussblock__knopf {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--c-text-muted);
  font: inherit;
  font-size: var(--fs-300);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  .fussblock__liste a:hover,
  .fussblock__knopf:hover {
    color: var(--c-accent-ink);
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }
}

/* Der Pflichthinweis laeuft ueber die ganze Breite der Fusszeile. Vorher
   stand er in einer 72-Zeichen-Spalte links unten und sah neben der leeren
   Flaeche daneben aus wie ein Formatierungsfehler. */
.site-footer__hinweis {
  font-size: var(--fs-200);
  line-height: var(--lh-relaxed);
  color: var(--c-text-muted);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-border);
  text-wrap: pretty;
}

/* Ab hier wuerde eine einzige Zeile ueber 130 Zeichen lang — das liest
   niemand mehr. Dann zwei Spalten statt einer sehr breiten. */
@media (min-width: 1100px) {
  .site-footer__hinweis {
    columns: 2;
    column-gap: var(--sp-7);
  }
}

/* Auf den Unterseiten steht der Hinweis ohne Fussraster darueber. Dann
   waere die Trennlinie eine Linie ueber dem Nichts. */
.site-footer .container > .site-footer__hinweis:first-child {
  padding-top: 0;
  border-top: 0;
}

.site-footer__unten {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-5);
  margin-top: var(--sp-5);
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--fs-300);
}

.site-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--sp-2);
  color: var(--c-text-muted);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

@media (hover: hover) and (pointer: fine) {
  .site-footer__links a:hover {
    color: var(--c-text);
  }
}

.site-footer__trenner {
  color: var(--c-border-strong);
  user-select: none;
}

.site-footer__copyright {
  font-size: var(--fs-200);
  /* Bewusst muted statt subtle: der Fussbereich liegt auf --c-bg-alt, dort
     erreicht subtle nur 4,25:1 und faellt durch die Pruefung. */
  color: var(--c-text-muted);
  margin: 0;
}

/* --- 14. Rechtstexte (Impressum, Datenschutz) -------------------- */

/* Die Steinwand traegt auch diese beiden Seiten (Fatih, 11.08.2026).
   Auf ihnen steht mehr Fliesstext als irgendwo sonst, und zwar der Text,
   bei dem Lesbarkeit rechtlich zaehlt. Deshalb steht der Text NICHT direkt
   auf der Wand: die Wand traegt die Seite, ein ruhiges Blatt traegt den
   Text. Ohne dieses Blatt arbeitet die Steinstruktur gegen jede Zeile,
   genau wie im Dealbereich. Schleier wie bei .section--wand.

   Der Wert steht bewusst hier und nicht in einer neuen Kachel-Klasse: Wer
   spaeter einen weiteren Rechtstext anlegt, bekommt beides zusammen. */
.section--rechtswand {
  background-color: var(--c-bg);
  background-image:
    linear-gradient(rgba(251, 249, 244, 0.74), rgba(251, 249, 244, 0.74)),
    url("../img/steinwand.jpg");
  background-repeat: repeat;
  background-size: auto, 450px auto;
  border-block: 1px solid var(--glas-kante);
}

.section--rechtswand .container {
  /* Ohne das klebt das Blatt in schmalen Fenstern an den Fensterkanten und
     die Wand ist links und rechts gar nicht mehr zu sehen. */
  padding-block: var(--sp-6);
}

.section--rechtswand h1,
.section--rechtswand .rechtstext {
  background: var(--glas-dicht);
  border: 1px solid var(--glas-kante);
  box-shadow: var(--sh-2);
}

.section--rechtswand h1 {
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  border-bottom: 0;
  margin-bottom: 0;
  padding: var(--sp-6) var(--sp-6) var(--sp-4);
}

.section--rechtswand .rechtstext {
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  padding: var(--sp-2) var(--sp-6) var(--sp-6);
  /* max-width steht unten auf --w-text und gilt fuer den TEXT. Das Blatt
     darf breiter sein, sonst sitzt es nicht unter der Ueberschrift. */
  max-width: none;
}

.section--rechtswand .rechtstext > * {
  max-width: var(--w-text);
}

@media (max-width: 640px) {
  .section--rechtswand h1 {
    padding: var(--sp-5) var(--sp-4) var(--sp-3);
  }
  .section--rechtswand .rechtstext {
    padding: var(--sp-2) var(--sp-4) var(--sp-5);
  }
}

.rechtstext {
  max-width: var(--w-text);
}

.rechtstext h2 {
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-600);
}

.rechtstext h3 {
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-2);
}

.rechtstext p {
  margin-bottom: var(--sp-4);
  color: var(--c-text-muted);
}

.rechtstext ul {
  margin: 0 0 var(--sp-4);
  padding-left: var(--sp-5);
  color: var(--c-text-muted);
}

.rechtstext li + li {
  margin-top: var(--sp-2);
}

.rechtstext__zurueck {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  margin-top: var(--sp-6);
  font-weight: var(--fw-semibold);
}

/* --- 15. Scroll-Reveal --------------------
   Wichtig: die Startwerte gelten NUR, wenn JavaScript laeuft (Klasse .js am
   html-Element) UND der Nutzer keine reduzierte Bewegung wuenscht. Ohne
   JavaScript bleibt jeder Inhalt normal sichtbar.
   -------------------- */

@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--dur-reveal) var(--ease-out),
                transform var(--dur-reveal) var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
  }

  .js .reveal.is-revealed {
    opacity: 1;
    transform: none;
    will-change: auto;
  }
}

/* --- Steinwand hinter den Angeboten (11.08.2026) -----------------------

   Fatihs Vorlage: eine helle, warme Bruchsteinmauer. Sie laeuft von
   Fensterkante zu Fensterkante, deshalb der eigene Kasten um den
   Container — der ist auf 1180 px gedeckelt.

   DIE KACHEL IST SELBST GERECHNET, nicht geholt. Fatihs Vorlage war das
   Produktfoto eines Tapetenhaendlers — auf einer Seite, die Geld verdient,
   ein vermeidbares Risiko. Erzeugt wird sie von
   werkzeuge/steinwand-erzeugen.py: Steinreihen mit gesetztem Startwert,
   Farben direkt aus tokens.css, nahtlos per Bauweise (Steine, die ueber den
   Rand ragen, werden am anderen Rand wiederholt; die Reihenhoehen ergeben
   in Summe genau die Kachelhoehe). 900 x 600 px, 39 KB — und sie gehoert
   Dario.

   DER SCHLEIER darueber ist kein Geschmack, sondern Pflicht: Auf der Wand
   stehen Karten aus Milchglas mit Fliesstext. Ohne Schleier arbeitet die
   Steinstruktur gegen jede Zeile darauf. Er liegt als erste
   Hintergrundebene ueber dem Bild — CSS malt die erste Ebene zuoberst. --- */

.dealwand {
  background-color: var(--c-bg);
  background-image:
    linear-gradient(rgba(251, 249, 244, 0.62), rgba(251, 249, 244, 0.62)),
    url("../img/steinwand.jpg");
  background-repeat: repeat;
  background-size: auto, 450px auto;
  border-block: 1px solid var(--glas-kante);
}

/* Dieselbe Wand hinter "So funktioniert's" (Fatih, 11.08.2026). Der
   Abschnitt liegt zwischen zwei hellen Flaechen und bekommt damit dieselbe
   Tiefe wie der Dealbereich. Der Schleier ist hier etwas dichter: Dort
   steht Fliesstext direkt auf dem Grund, ohne Karte dazwischen. */
.section--wand {
  background-color: var(--c-bg);
  background-image:
    linear-gradient(rgba(251, 249, 244, 0.74), rgba(251, 249, 244, 0.74)),
    url("../img/steinwand.jpg");
  background-repeat: repeat;
  background-size: auto, 450px auto;
  border-block: 1px solid var(--glas-kante);
}

/* --- Der Ersparnis-Banner dunkel (11.08.2026) --------------------------

   Fatih: "wo der banner Summe aller Ersparnisse auf dieser Seite steht,
   mach was dunkeles als hintergrund weil alles so hell ist."

   Gebaut wie `.section--dunkel` weiter oben: nicht Farbe fuer Farbe
   umgefaerbt, sondern die TOKENS werden innerhalb der Tafel umgedreht.
   Das ist der Unterschied zwischen "die gemeldete Stelle nachgezogen" und
   "alle Flaechen darueber nachgezogen" (Lehre vom 04.08.) — alles, was in
   dieser Tafel steht oder je dazukommt, rechnet danach automatisch mit
   hellem Text auf dunklem Grund.

   Auch das Glas muss mitdrehen: --glas-dicht ist ein helles Milchglas.
   Bliebe es stehen, saesse mitten in der dunklen Tafel eine weisse
   Flaeche. --- */

.tresor--dunkel {
  background-color: #16130C;
  background-image: linear-gradient(
    140deg,
    rgba(107, 76, 11, 0.55) 0%,
    rgba(22, 19, 12, 0.92) 46%,
    rgba(22, 19, 12, 1) 100%
  );
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-color: rgba(212, 160, 23, 0.45);
  box-shadow: 0 18px 46px -18px rgba(22, 19, 12, 0.55);

  /* Die Schrift dreht sich um — dieselben Werte wie in .section--dunkel,
     dort am Kontrast gemessen. */
  --c-text:        #FFFDF7;
  --c-text-muted:  #EFE5D0;
  --c-text-subtle: #D8CBAE;
  --c-gold-ink:    #F5D680;   /* 13,1:1 auf diesem Grund */
  --c-border:      rgba(245, 214, 128, 0.28);
  --glas-dicht:    rgba(255, 253, 247, 0.06);
}

/* Die grosse Summe traegt den Goldverlauf statt einer flachen Farbe: Auf
   dunklem Grund wirkt sie sonst stumpf. Ohne background-clip faellt sie
   auf --c-gold-ink zurueck, also auf helles Gold — nie auf Dunkel. */
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .tresor--dunkel .tresor__summe {
    background: var(--grad-gold);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* --- Lichtband um die Zahlentafel (11.08.2026) -------------------------

   Erst stand hier ein perlmuttweisser Grund. Fatih: "sieht sehr langweilig
   aus, ueberwaeltige mich, vielleicht was mit Farbuebergang."

   DIE IDEE kommt aus dem Namen der Sache selbst: Die Tafel heisst im Code
   seit jeher `.tresor`. Also soll sie liegen wie ein Tresor im
   Scheinwerfer — warmes Licht, das hinter ihr hervorbricht. Das ist kein
   Dekor um seiner selbst willen: Der dunkle Kasten davor gewinnt dadurch
   Tiefe, und die grosse Summe, um die es geht, bekommt ihren Auftritt.

   VIER EBENEN, von hinten nach vorne gedacht (im Code steht die vorderste
   zuerst — CSS malt die erste Ebene zuoberst):

     1. Lichtstreifen  Sehr schraege, sehr blasse Goldstreifen. Wie
                       Sonnenlicht, das durch eine Jalousie faellt. Deckkraft
                       unter 6 %, sonst wird daraus ein Muster statt Licht.
     2. Lichtkegel     Ein grosser Goldschein genau dort, wo die Tafel
                       sitzt. Er ist der Grund, warum der Kasten zu leuchten
                       scheint, statt nur dunkel zu sein.
     3. Farbwanderung  Der Uebergang, um den Fatih gebeten hat: von warmem
                       Champagner links ueber helles Gold in der Mitte zu
                       fast weissem Elfenbein rechts. Diagonal, damit er
                       nicht wie ein Farbbalken wirkt.
     4. Grundton       Ein warmes Weiss darunter, damit auch ohne Verlaeufe
                       nie eine graue Flaeche entsteht.

   BEWEGUNG: Der Lichtkegel atmet, sehr langsam (18 s) und sehr wenig. Das
   Auge nimmt es kaum bewusst wahr, aber die Flaeche wirkt lebendig statt
   bedruckt. Bei "Bewegung reduzieren" steht alles still — das ist keine
   Nettigkeit, sondern der Unterschied zwischen Wirkung und Zumutung.

   :has() SORGT DAFUER, DASS NICHTS LEER STEHENBLEIBT. app.js blendet die
   Tafel aus, wenn es zu wenige Deals gibt; im Markup steht seit jeher der
   Hinweis, dass das umgebende Element deshalb keine eigene Flaeche tragen
   darf. Ohne :has() erscheint schlicht kein Licht, nichts bricht. --- */

.lichtband:has(.tresor:not([hidden])),
.section--licht,
.site-footer--licht {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--sp-8);
  border-block: 1px solid var(--glas-kante-gold);

  background-color: #FFFCF4;
  background-image:
    /* 1. Lichtstreifen — AM BILD KORRIGIERT: Sie standen zuerst auf 55 %
          Deckkraft und lasen sich als Jalousie, nicht als Licht. Der
          Kommentar hier sagte "unter 6 %", der Code sagte etwas anderes.
          Jetzt so blass, dass man sie einzeln nicht findet, aber die
          Flaeche nicht mehr flach wirkt. Und breiter: schmale Streifen
          sind Muster, breite sind Lichtbahnen. */
    repeating-linear-gradient(
      104deg,
      rgba(255, 255, 255, 0)    0px,
      rgba(255, 255, 255, 0)   90px,
      rgba(255, 255, 255, 0.11) 90px,
      rgba(255, 255, 255, 0.11) 210px,
      rgba(255, 255, 255, 0)   210px,
      rgba(255, 255, 255, 0)   360px),
    /* 3. Farbwanderung — etwas zurueckgenommen. Der Auftritt soll vom
          Lichtkegel kommen, nicht von satter Farbe; sonst kippt es von
          edel nach bunt. */
    linear-gradient(
      104deg,
      #F3E3BE 0%,
      #F7E5B2 18%,
      #FDF3D9 40%,
      #FFFDF7 62%,
      #F9F0DC 84%,
      #F1E5C6 100%);
}

/* 2. Der Lichtkegel liegt als eigene Ebene darueber — nur so laesst er
      sich bewegen, ohne die Verlaeufe darunter mitzuziehen.

   AM BILD KORRIGIERT: Er stand auf z-index: -1 und war damit unsichtbar.
   Zusammen mit `isolation: isolate` am Band rutscht eine negative Ebene
   hinter den eigenen Hintergrund des Bandes — gemalt wurde er, zu sehen
   war er nie. Er liegt jetzt ueber den Verlaeufen, und der Inhalt darueber
   holt sich seinen Platz mit einem eigenen z-index zurueck. */
.lichtband:has(.tresor:not([hidden]))::before,
.section--licht::before,
.site-footer--licht::before {
  content: "";
  position: absolute;
  inset: -30% -10%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(52% 62% at 50% 52%, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(70% 80% at 50% 50%, rgba(245, 214, 128, 0.55) 0%, rgba(245, 214, 128, 0) 72%),
    radial-gradient(90% 60% at 18% 15%, rgba(212, 160, 23, 0.22) 0%, rgba(212, 160, 23, 0) 68%);
  animation: lichtband-atmen 18s ease-in-out infinite;
}

/* Eine hauchduenne Koernung. Ohne sie sehen grosse Verlaeufe nach Kunststoff
   aus — dieselbe Ueberlegung wie bei der Steinwand. Reines SVG-Rauschen,
   keine zusaetzliche Datei. */
.lichtband:has(.tresor:not([hidden]))::after,
.section--licht::after,
.site-footer--licht::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.30;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23k)' opacity='0.5'/%3E%3C/svg%3E");
}

@keyframes lichtband-atmen {
  0%, 100% { transform: scale(1)    translate3d(0, 0, 0); opacity: 0.92; }
  50%      { transform: scale(1.06) translate3d(0, -1.2%, 0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .lichtband:has(.tresor:not([hidden]))::before,
  .section--licht::before,
  .site-footer--licht::before { animation: none; }
}

/* Der Inhalt gehoert vor das Licht, sonst liegt der Lichtkegel ueber der
   Tafel und milcht sie ein. */
.lichtband:has(.tresor:not([hidden])) > .container,
.section--licht > .container,
.site-footer--licht > .container {
  position: relative;
  z-index: 1;
}

/* Der Abstand steckte bisher an der Tafel selbst. Traegt das Band ihn,
   wuerde er doppelt zaehlen. */
.lichtband:has(.tresor:not([hidden])) .tresor--band {
  margin-block: 0;
}

/* Im Licht braucht die Tafel einen kraeftigeren Schatten, sonst klebt sie
   auf der hellen Flaeche, statt darueber zu schweben. */
.lichtband:has(.tresor:not([hidden])) .tresor {
  box-shadow:
    0 2px 6px rgba(60, 45, 12, 0.18),
    0 26px 60px -22px rgba(60, 45, 12, 0.70);
}

/* Dieselbe Lichtflaeche an zwei weiteren Stellen (Fatih, 11.08.2026):
   hinter "Warum diese Seite" und in der Fusszeile.

   Die Regeln stehen NICHT dreimal da — die drei Selektoren teilen sich die
   Regelbloecke oben. Wer das Licht aendert, aendert es ueberall, und keine
   Stelle bleibt versehentlich zurueck.

   Zwei Unterschiede zum Band um die Zahlentafel, beide aus dem Inhalt
   heraus:

   - Kein `:has()`. Diese beiden Bereiche sind immer da; die Bedingung gibt
     es nur, weil die Zahlentafel verschwinden kann.
   - Der Lichtkegel sitzt hier weiter oben und ist deutlich schwaecher. Bei
     der Zahlentafel liegt ein dunkler Kasten drauf, der das Licht schluckt.
     Hier steht Text direkt auf der Flaeche — bliebe der Kegel so hell,
     saesse die Ueberschrift in einem grellen Fleck. */

.section--licht {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.section--licht::before,
.site-footer--licht::before {
  opacity: 0.55;
  background:
    radial-gradient(60% 55% at 50% 0%,  rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 72%),
    radial-gradient(80% 70% at 50% 6%,  rgba(245, 214, 128, 0.42) 0%, rgba(245, 214, 128, 0) 74%),
    radial-gradient(90% 60% at 14% 96%, rgba(212, 160, 23, 0.16) 0%, rgba(212, 160, 23, 0) 70%);
}

.site-footer--licht {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-top: 1px solid var(--glas-kante-gold);
}