/* ==========================================================================
   HINWEIS ZUR FARBFASSUNG

   Diese Seite ist DUNKEL - fuer alle Besucher, unabhaengig davon, was ihr
   Betriebssystem eingestellt hat.

   Vorher stand an den dunklen Bloecken `@media not all and
   (prefers-color-scheme: light)`. Das bedeutet "ueberall ausser bei
   ausdruecklich hell" - und macOS und Windows melden IMMER entweder hell
   oder dunkel, nie "keine Angabe". Wer seinen Rechner auf hell stehen hat,
   bekam deshalb weiter die helle Fassung zu sehen. Der Betreiber hat zweimal
   neu bereitgestellt und zweimal keine Veraenderung gesehen.

   Die dunkle Fassung ist eine gestalterische Entscheidung des Betreibers
   ("Hintergrund dunkel, damit das Produkt ins Licht kommt"), keine
   Bequemlichkeitseinstellung des Besuchers. Deshalb gilt sie fuer alle.
   ========================================================================== */

/* ==========================================================================
   TOPPREISFINDER – Gestaltungssystem
   ==========================================================================

   FARBREGEL, die alles andere bestimmt:
   EIN Hauptton (Tinte, fast schwarz mit blauem Kern), EIN Akzent (Gold),
   dazu warme Neutraltöne. Sonst nichts.

   Vorher trug jede Sparte ihre eigene Farbe - Gelb, Grün, Blau, Rot,
   Violett, Orange lagen gleichzeitig auf dem Bildschirm und stritten
   miteinander. Das ist der Hauptgrund, warum die Seite nach internem
   Werkzeug aussah statt nach Verbraucherportal. Farbe hat jetzt genau eine
   Aufgabe: zu zeigen, wo man klickt und wo der beste Preis steht.

   TIEFE STATT RAHMEN:
   Karten werden durch Schatten und Weißraum voneinander getrennt, nicht
   durch Linien. Rahmen gibt es nur noch dort, wo ein Element wirklich
   begrenzt werden muss (Eingabefelder, Tabellenzeilen).

   AUFBAU
     1. Gestaltungswerte      7. Produktkacheln
     2. Grundlagen            8. Listenseite
     3. Kopfbereich           9. Produktseite
     4. Hinweisband          10. Knöpfe und Formulare
     5. Bühne und Hero       11. Tabellen (Verwaltung)
     6. Spartenkarten        12. Fußbereich
                             13. Bewegung
                             14. Premium-Ausbau (Deals-Bühne, Preisbox,
                                 Kategoriebühne, leerer Zustand, Kopf, Fuß)
                             15. Premium-Ausbau, schmale Geräte
   ========================================================================== */

/* ---------------------------------------------------- 1. Gestaltungswerte */

:root {
  /* Sagt dem Browser, in welchem Modus er seine EIGENEN Bauteile zeichnen
     soll - Ankreuzfelder, Auswahlmenüs, Rollbalken, Datumsfelder. Ohne diese
     Zeile blieben sie im Dunkelmodus hell: In der Filterspalte standen weiße
     Kästchen auf dunklem Grund. */
  color-scheme: light;

  /* --- Flächen: warmes Off-White statt kaltem Grau --- */
  --grund:        #ffffff;
  --flaeche:      #f7f6f2;      /* Seitenhintergrund, warm */
  --flaeche-2:    #f0eee8;      /* Bildplatten, ruhige Felder */
  --karte:        #ffffff;

  --rand:         #e8e5dd;      /* nur noch sparsam eingesetzt */
  --rand-stark:   #d8d4c9;

  /* --- Hauptton: Tinte --- */
  --tinte:        #16191f;
  --tinte-2:      #262b34;
  --tinte-3:      #3a414d;

  --text:         #16191f;
  --text-leise:   #5c626d;
  /* Nachgemessen im Browser gegen den TATSAECHLICHEN Untergrund, nicht
     gegen --flaeche: Auf der weissen Kartenflaeche kam der alte Wert
     (#6d737c) auf 4,78:1 - bestanden, aber mit 0,28 Reserve. Die tragen
     Modellnummer, durchgestrichener Preis und "inkl. MwSt. und Versand",
     also drei Angaben, die man wirklich lesen koennen muss. Jetzt 5,25:1.
     Der Abstand zu --text-leise bleibt gross genug, dass die Rangfolge der
     drei Grautoene erhalten bleibt. */
  --text-zart:    #676d76;

  /* --- Der einzige Akzent: warmes Gold --- */
  --akzent:       #e09612;
  --akzent-tief:  #bd7a06;
  --akzent-hell:  #f5b544;
  --akzent-zart:  #fdf3e0;      /* getönte Fläche */

  /* Gold als SCHRIFTFARBE ist eine eigene Aufgabe. --akzent-tief kam auf der
     getönten Fläche auf gemessene 3,21:1 - die Ersparnis, also die wichtigste
     Aussage einer Angebotsseite, fiel damit durch die Barrierefreiheits-
     prüfung. Dieser Ton schafft 4,8:1 auf --akzent-zart und 5,1:1 auf Weiß. */
  --akzent-text:  #96600a;

  /* --- Abstandsstufen. Vorher trug jeder Abschnitt seinen eigenen rem-Wert,
         drei Blöcke untereinander hatten dadurch drei verschiedene Abstände.
         Ab hier gibt es fünf Stufen und sonst nichts. --- */
  --raum-1: .5rem;
  --raum-2: 1rem;
  --raum-3: 1.6rem;
  --raum-4: 2.4rem;
  --raum-5: clamp(2.75rem, 1.9rem + 2.8vw, 4.5rem);   /* Abschnittsabstand */

  /* --- Zustände. Bewusst keine eigenen Buntfarben:
         Erfolg und Warnung teilen sich den Akzent, nur Fehler bleibt rot,
         weil Rot dort eine Bedeutung trägt, die man nicht ersetzen kann. --- */
  --rot:          #b3261e;
  --rot-zart:     #fdeceb;

  /* --- Schatten: warm getönt, drei Stufen --- */
  --schatten-1: 0 1px 2px rgba(22,25,31,.04), 0 2px 6px rgba(22,25,31,.04);
  --schatten-2: 0 2px 6px rgba(22,25,31,.05), 0 12px 28px rgba(22,25,31,.07);
  --schatten-3: 0 8px 20px rgba(22,25,31,.07), 0 24px 56px rgba(22,25,31,.12);
  --schatten-akzent: 0 2px 6px rgba(189,122,6,.2), 0 8px 22px rgba(224,150,18,.28);
  --schatten:   var(--schatten-1);            /* Altbestand */

  /* Feine Innenkante an Karten. Im Hellen leer - dort trennt der Schatten.
     Im Dunkeln ist ein Schatten auf dunklem Grund praktisch unsichtbar, die
     Karten verschwammen mit dem Hintergrund und die Seite wirkte flach.
     Die Kante gibt ihnen dort wieder einen Rand. */
  --kante: 0 0 #0000;

  /* --- Radien --- */
  --r-s:    10px;
  --r-m:    16px;
  --r-l:    22px;
  --r-xl:   30px;
  --r-pill: 999px;
  --rundung:       var(--r-m);                /* Altbestand */
  --rundung-klein: var(--r-s);
  --rundung-gross: var(--r-l);

  /* --- Bewegung: alles zwischen 200 und 500 ms --- */
  --kurve-ein:  cubic-bezier(.16,.84,.44,1);
  --kurve:      cubic-bezier(.4,0,.2,1);
  --schnell:    .2s;
  --normal:     .3s;
  --ruhig:      .45s;
  --dauer:      var(--schnell);               /* Altbestand */
  --dauer-ruhig: var(--ruhig);

  --kopf-hoehe: 0px;
}

/* ============================ DIE HAUPTFASSUNG: DUNKEL ====================

   Das ist keine Zusatzausstattung mehr, sondern der Normalzustand. Wer im
   Betriebssystem nichts eingestellt hat, sieht diese Fassung - die Bedingung
   lautet deshalb "nicht ausdruecklich hell" und nicht "ausdruecklich dunkel".

   DER GEDANKE: EIN AUSSTELLUNGSRAUM
   Ein Juwelier streicht seine Wand nicht weiss. Er macht sie dunkel und
   richtet ein Licht auf die Vitrine - dann sieht man den Stein, nicht die
   Wand. Genau das passiert hier: Der Raum ist fast schwarz, die Bildplatte
   jeder Kachel ist die beleuchtete Vitrine, und die einzige Farbe, die es
   sonst noch gibt, ist warmes Gold fuer den Preis und den Kaufweg.

   Das Schwarz traegt einen minimalen warmen Blaukern (#08090b statt #000000).
   Reines Schwarz wirkt auf einem Bildschirm nicht edel, sondern leer: Es hat
   keine Tiefe, weil nichts dunkler sein kann. Mit einem Hauch Farbe darin
   bekommen die Karten darueber eine Stufe, auf der sie stehen koennen.
   ========================================================================== */

@media all {
  :root {
    color-scheme: dark;

    /* --- Der Raum. Vier Stufen, jede sichtbar von der naechsten getrennt.
           Vorher lagen Karte (#1a1e25) und ruhige Flaeche (#1b1e24) einen
           einzigen Farbwert auseinander - alles war dasselbe Mausgrau, und
           genau daher kam der Eindruck "zu einfach". --- */
    --flaeche:      #08090b;      /* Seitengrund, der tiefste Ton */
    --karte:        #12151a;      /* Karten stehen darauf */
    --grund:        #0d0f13;      /* Eingabefelder, Vertiefungen */
    --flaeche-2:    #171a20;      /* ruhige Felder, Sortierleiste */

    --rand:         #23272e;
    --rand-stark:   #3b414b;

    --tinte:        #050608;
    --tinte-2:      #12151a;
    --tinte-3:      #262b33;

    /* Nicht #ffffff: Reines Weiss auf fast schwarzem Grund flimmert an den
       Buchstabenkanten. #f1f2f4 schafft gemessene 17,8:1 und steht ruhig. */
    --text:         #f1f2f4;
    --text-leise:   #a7adb8;      /* 8,8:1 auf dem Seitengrund */
    --text-zart:    #8c929d;      /* 5,6:1 auf der hellsten Flaeche */

    /* --- Das einzige Licht im Raum --- */
    --akzent:       #f0b246;
    --akzent-tief:  #d1912a;
    --akzent-hell:  #ffd489;
    --akzent-zart:  rgba(240,178,70,.10);
    --akzent-text:  #f0b246;      /* 9,7:1 auf der Karte */

    --rot:          #ff8f80;
    --rot-zart:     rgba(255,143,128,.12);

    /* Schatten auf schwarzem Grund koennen nicht dunkler werden als der
       Grund. Sie tragen deshalb hier nur noch die Haelfte der Arbeit - die
       andere Haelfte macht die Lichtkante (--kante), die jede Karte oben
       einen Hauch heller abschliesst, so wie eine Kante im Raum das Licht
       faengt. */
    --schatten-1: 0 1px 2px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.35);
    --schatten-2: 0 2px 8px rgba(0,0,0,.5), 0 14px 34px rgba(0,0,0,.45);
    --schatten-3: 0 10px 26px rgba(0,0,0,.55), 0 34px 70px rgba(0,0,0,.6);
    --schatten-akzent: 0 2px 10px rgba(209,145,42,.28), 0 10px 30px -8px rgba(240,178,70,.35);

    /* Zwei Kanten statt einer: oben faellt Licht auf, unten nicht. Das ist
       der Unterschied zwischen "Kasten mit Rahmen" und "Koerper im Raum".
       Sie steht bewusst hier in der Wurzel und nicht an einzelnen Karten:
       Als Custom Property wuerde sie an alle Kinder vererbt - eine Kachel im
       Deals-Block haette dann eine andere Kante als dieselbe Kachel darunter
       im Raster. */
    --kante: inset 0 1px 0 rgba(255,255,255,.075),
             inset 0 0 0 1px rgba(255,255,255,.045);

    /* Die Vitrine. Steht als eigene Variable, weil sie an fuenf Stellen
       gebraucht wird: Kachelbild, Produktbild, Empfehlungsbild und in den
       beiden Sonderformaten des Deals-Blocks. */
    /* Der weisse Kern muss GROSS sein. Die Fotos bringen ihr eigenes reines
       Weiss mit; faellt der Verlauf zu frueh ab, sieht man die Fotokante als
       helleres Rechteck in der Platte - auf der grossen Deals-Kachel war das
       im Bildschirmfoto deutlich. Bis 46 Prozent des Radius bleibt es
       deshalb reinweiss, der Abfall passiert erst danach und erreicht am
       aeussersten Rand nur 17 Helligkeitswerte. Genug, um die Platte
       beleuchtet statt flach wirken zu lassen; zu wenig, um als Verlauf
       aufzufallen. */
    --vitrine:
      radial-gradient(132% 118% at 50% 36%,
        #ffffff 0%, #ffffff 46%, #fbfaf7 72%, #f0ede6 100%);
    /* Die Vignette (zweite Zeile) fasst NUR die Kanten und Ecken - dort liegt
       nie ein Produkt. Sie nimmt der Platte das Rechteckige, ohne das Foto
       anzufassen. Danach ein enger Kontaktschatten und ein sehr schwacher
       goldener Abglanz: Licht, das von der Platte in den Raum faellt. */
    --vitrine-schein:
      inset 0 0 0 1px rgba(0,0,0,.10),
      inset 0 0 30px -6px rgba(50,40,20,.16),
      inset 0 -22px 34px -30px rgba(50,40,20,.30),
      0 6px 16px -8px rgba(0,0,0,.85),
      0 2px 20px -6px rgba(240,178,70,.13);
  }
}

/* ------------------------------------------------------- 2. Grundlagen */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Der Fußbereich muss den Boden des Fensters erreichen. Auf kurzen Seiten
   (Impressum, ein einzelnes Suchergebnis) endete er vorher mitten im Bild,
   darunter lag noch ein Streifen Seitenhintergrund - zwei verschiedene
   Dunkeltöne übereinander, was aussieht wie ein Darstellungsfehler. */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--flaeche);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body > header, body > .hinweisband, body > .fuss { flex-shrink: 0; }
body > main { flex: 1 0 auto; }

a { color: inherit; }
img, svg { max-width: 100%; }

/* Ohne eigene Angabe zeichnet der Browser Platzhaltertext in einem Grau,
   das weder hell noch dunkel auf 4,5:1 kommt (gemessen: 3,97:1 im
   Dunkelmodus). Beispielwerte wie "129,32" muss man lesen können. */
::placeholder { color: var(--text-zart); opacity: 1; }

/* Ziffern in gleicher Breite - Preise untereinander fluchten dadurch. */
.preis, .bestpreis-zahl, .uvp, .gesamt, .grosse-zahl, .modellnummer,
.angebot-preis, .tabelle td.zahl, .ersparnis {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* 1320 statt 1240 Pixel. Auf einem 1920 breiten Bildschirm blieben links und
   rechts je 340 Pixel leer - die Seite saß als schmales Band in der Mitte und
   wirkte dadurch kleiner, als sie ist. Bei 1440 ändern sich dadurch die
   Kachelbreiten von 298 auf 318 Pixel; das Raster bleibt vierspaltig. */
.huelle { width: min(1320px, 100% - 3rem); margin-inline: auto; }

@media (max-width: 620px) { .huelle { width: min(1240px, 100% - 1.75rem); } }

:focus-visible {
  outline: 2px solid var(--tinte);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(224,150,18,.35);
}

@media all {
  :focus-visible { outline-color: #fff; }
}

::selection { background: var(--akzent); color: #16191f; }

/* --- Typografie-System --- */

h1 {
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.15rem);
  line-height: 1.15; margin: 0 0 .4rem;
  letter-spacing: -.03em; font-weight: 700;
}

h2 {
  font-size: clamp(1.25rem, 1.1rem + .6vw, 1.55rem);
  line-height: 1.22; margin: 0 0 .25rem;
  letter-spacing: -.024em; font-weight: 700;
}

h3 {
  font-size: 1.05rem; margin: 1.5rem 0 .5rem;
  letter-spacing: -.015em; font-weight: 600;
}

/* Ein h2 im Blockkopf sitzt in einer eigenen Karte und braucht keinen oberen
   Abstand. Steht es dagegen frei im Seitenfluss - "Das Angebot im Detail" auf
   der Produktseite -, hat es bisher gar keinen bekommen: Die Überschrift klebte
   dort mit gemessenen 0 Pixeln direkt an der Unterkante der Produktkarte. */
.inhalt > h2 { margin-top: 2.6rem; }
.inhalt > h2:first-child { margin-top: 0; }

.klein { font-size: .86rem; line-height: 1.55; color: var(--text-leise); }
.leise { color: var(--text-leise); }

/* --------------------------------------------------- 3. Kopfbereich */

/* Der Kopf ist jetzt HELL. Die dunkle Leiste war der Grund, warum die Seite
   "wie ein internes Werkzeug" wirkte: Verbraucherportale tragen oben Licht,
   Verwaltungsoberflächen tragen oben Dunkelheit. Getrennt wird durch einen
   feinen Rand und beim Scrollen durch einen Schatten. */
.kopf {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--rand);
  transition: box-shadow var(--normal) var(--kurve);
}

@media all {
  .kopf { background: rgba(16,18,21,.86); }
}

.kopf.geschoben { box-shadow: var(--schatten-2); }

.kopf-innen {
  display: flex; align-items: center; gap: 1.5rem;
  padding: .85rem 0; flex-wrap: wrap;
}

.marke {
  display: inline-flex; align-items: center; gap: .65rem;
  text-decoration: none; flex-shrink: 0;
  transition: opacity var(--schnell) var(--kurve);
}

.marke:hover { opacity: .75; }

.marke-zeichen {
  width: 36px; height: 36px; border-radius: 11px;
  background: linear-gradient(145deg, var(--akzent-hell), var(--akzent-tief));
  color: #16191f;
  display: grid; place-items: center;
  font-weight: 800; font-size: 1.15rem; letter-spacing: -.03em;
  box-shadow: var(--schatten-akzent);
}

.marke-text {
  font-weight: 700; font-size: 1.1rem;
  letter-spacing: -.03em; white-space: nowrap; color: var(--text);
}

/* --- Lupenknopf: nur auf schmalen Geräten (siehe Mobil-Abschnitt) --- */

.such-schalter {
  display: none;
  margin-left: auto;
  width: 44px; height: 44px; flex-shrink: 0;
  align-items: center; justify-content: center;
  border: 0; border-radius: var(--r-pill);
  background: var(--flaeche-2); color: var(--text);
  cursor: pointer;
  transition: background var(--schnell) var(--kurve),
              transform var(--schnell) var(--kurve);
}

.such-schalter:hover  { background: var(--rand); }
.such-schalter:active { transform: scale(.94); }

/* --- Suchfeld im Kopf --- */

.suchfeld {
  display: flex; flex: 1 1 320px; min-width: 0; max-width: 560px;
  background: var(--flaeche-2);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  padding: 4px 4px 4px 6px;
  transition: border-color var(--normal) var(--kurve),
              background var(--normal) var(--kurve),
              box-shadow var(--normal) var(--kurve);
}

.suchfeld:hover { background: var(--grund); border-color: var(--rand); }

.suchfeld:focus-within {
  background: var(--grund);
  border-color: var(--akzent);
  box-shadow: 0 0 0 4px rgba(224,150,18,.16), var(--schatten-1);
}

.suchfeld input {
  flex: 1; min-width: 0;
  padding: .55rem .85rem;
  border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--text);
  font-size: 1rem; font-family: inherit;
}

.suchfeld input::placeholder { color: var(--text-zart); }
.suchfeld input:focus { outline: none; }
.suchfeld input::-webkit-search-cancel-button { -webkit-appearance: none; }

.suchfeld button {
  padding: .55rem 1.35rem; border: 0; border-radius: var(--r-pill);
  background: var(--tinte); color: #fff;
  font-weight: 650; font-size: .93rem; font-family: inherit;
  cursor: pointer; white-space: nowrap;
  transition: background var(--schnell) var(--kurve),
              transform var(--schnell) var(--kurve);
}

.suchfeld button:hover  { background: var(--tinte-2); }
.suchfeld button:active { transform: scale(.97); }

@media all {
  .suchfeld button { background: var(--akzent); color: #16191f; }
  .suchfeld button:hover { background: var(--akzent-tief); }
}

/* --- Spartenleiste: einfarbig, ruhig --- */

.sparten {
  position: relative;
  background: transparent;
  border-top: 1px solid var(--rand);
  overflow-x: auto;
  scrollbar-width: none;
}

.sparten::-webkit-scrollbar { display: none; }

.sparten-innen { display: flex; gap: .1rem; padding: 0; min-width: max-content; }

.sparte {
  position: relative;
  white-space: nowrap; text-decoration: none;
  padding: .8rem .95rem .72rem;
  color: var(--text-leise);
  font-size: .92rem; font-weight: 550; letter-spacing: -.01em;
  transition: color var(--schnell) var(--kurve);
}

/* Aktive Sparte: EIN Akzentstrich für alle. Keine sechs Farben mehr. */
.sparte::after {
  content: ""; position: absolute; left: .95rem; right: .95rem; bottom: 0;
  height: 2.5px; border-radius: 2px 2px 0 0;
  background: var(--akzent);
  transform: scaleX(0); transform-origin: center;
  transition: transform var(--normal) var(--kurve-ein);
}

.sparte:hover { color: var(--text); }
.sparte:hover::after { transform: scaleX(.5); }

.sparte.aktiv { color: var(--text); font-weight: 650; }
.sparte.aktiv::after { transform: scaleX(1); }

.sparte .anzahl {
  display: inline-block; margin-left: .3rem;
  font-size: .78em; font-weight: 600; color: var(--text-zart);
}

/* Verlauf am rechten Rand, solange die Leiste noch etwas verbirgt.
   Er muss in der Farbe des KOPFES auslaufen, nicht in der Seitenfarbe: Der
   Kopf ist fast weiß, `--flaeche` ist warmes Grau - der Verlauf endete
   dadurch in einem sichtbaren grauen Fleck statt unsichtbar zu werden. */
.sparten.scrollbar::before {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 48px;
  background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.97));
  pointer-events: none; z-index: 2;
}

@media all {
  .sparten.scrollbar::before {
    background: linear-gradient(to right, rgba(16,18,21,0), rgba(16,18,21,.97));
  }
}

/* --------------------------------------------------- 4. Hinweisband */

.hinweisband {
  background: var(--flaeche);
  /* Das Band steht jetzt unter dem Inhalt statt darüber - die trennende
     Linie gehört deshalb nach oben, sonst schwebt sie ohne Bezug. */
  border-top: 1px solid var(--rand);
  font-size: .8rem; line-height: 1.5;
  color: var(--text-leise);
  padding: .55rem 0;
}

.hinweisband strong { color: var(--text); font-weight: 650; }

.hinweisband a {
  color: var(--text); text-decoration: underline;
  text-underline-offset: 2px; text-decoration-thickness: 1px;
  text-decoration-color: var(--rand-stark);
  transition: text-decoration-color var(--schnell) var(--kurve);
}

.hinweisband a:hover { text-decoration-color: var(--akzent); }

.hinweis-innen { display: flex; align-items: baseline; gap: .55rem; }

/* Farbe war --text-zart: auf dem warmen Bandhintergrund gemessene 4,42:1 -
   knapp unter der Vorgabe von 4,5:1 für Text unter 18,7 Pixel. */
.hinweis-marke {
  flex-shrink: 0;
  font-size: .66rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-leise);
  border: 1px solid var(--rand-stark); border-radius: 4px;
  padding: .08rem .4rem;
}

@media (max-width: 620px) { .nur-breit { display: none; } }

/* ------------------------------------------------ 5. Bühne und Hero */

.inhalt { padding: 2.25rem 0 4rem; }

/* --- Hero der Startseite --- */

.hero {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl);
  padding: clamp(2.25rem, 1.4rem + 3.4vw, 4.5rem) clamp(1.4rem, .8rem + 2.6vw, 3.5rem);
  margin-bottom: 2.5rem;
  background:
    radial-gradient(80% 120% at 88% 8%, rgba(224,150,18,.16), transparent 62%),
    radial-gradient(60% 100% at 10% 100%, rgba(22,25,31,.05), transparent 60%),
    linear-gradient(180deg, #fffdf8, var(--grund));
  box-shadow: var(--schatten-2), var(--kante);
}

@media all {
  /* Deutlich zurückgenommen: Der Goldschimmer aus Flächenverlauf UND
     schwebendem Kreis addierte sich in der oberen rechten Ecke zu einem
     olivbraunen Fleck, der aussah wie ein Darstellungsfehler. */
  .hero {
    background:
      radial-gradient(80% 120% at 88% 8%, rgba(240,172,46,.075), transparent 60%),
      linear-gradient(180deg, #1e222a, var(--karte));
  }
  .hero::before { background: radial-gradient(circle, rgba(240,172,46,.09), transparent 70%); }
  .hero::after  { background: radial-gradient(circle, rgba(255,255,255,.03), transparent 70%); }
}

/* Zwei sehr weiche Kreise, die langsam atmen. Man nimmt sie nicht bewusst
   wahr - sie nehmen der Fläche nur die Starrheit. */
.hero::before, .hero::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(224,150,18,.22), transparent 70%);
}

.hero::before {
  width: 34rem; height: 34rem; top: -16rem; right: -10rem;
  animation: schweben 22s ease-in-out infinite;
}

.hero::after {
  width: 22rem; height: 22rem; bottom: -14rem; left: -6rem;
  background: radial-gradient(circle, rgba(22,25,31,.07), transparent 70%);
  animation: schweben 28s ease-in-out infinite reverse;
}

@keyframes schweben {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  50%      { transform: translate3d(-2.5rem, 1.8rem, 0) scale(1.08); }
}

/* Überschrift, Text und Suche bleiben in Lesebreite - die Vertrauenszeile
   darunter darf über die ganze Bühne laufen. Vorher endete der gesamte
   Inhalt bei 46 rem und die rechte Hälfte des Heros war auf breiten
   Bildschirmen komplett leer. */
.hero-innen { position: relative; max-width: none; }
.hero h1, .hero-unterzeile { max-width: 40rem; }

/* Die rechte obere Ecke blieb auch danach leer - über 1280 Pixeln ein
   handtellergroßes Nichts neben der Überschrift. Ein Preisschild als
   Strichzeichnung füllt sie, ohne Aufmerksamkeit zu stehlen: Es liegt hinter
   dem Text, ist unscharf abgedunkelt und trägt keine Aussage, die man lesen
   müsste. Unter 1120 Pixeln wird es ausgeblendet - dort braucht die
   Überschrift die Fläche selbst. */
.hero-zeichen {
  display: none;
  position: absolute; z-index: 0;
  top: 50%; right: -1.5rem; transform: translateY(-50%);
  width: clamp(230px, 22vw, 330px);
  color: var(--akzent-tief); opacity: .13;
  pointer-events: none;
}

.hero-zeichen svg { width: 100%; height: auto; display: block; }

@media (min-width: 1120px) { .hero-zeichen { display: block; } }

@media all {
  .hero-zeichen { color: var(--akzent); opacity: .11; }
}

/* Der Inhalt muss über der Zeichnung liegen, sonst schneidet sie in die
   Vertrauenszeile. */
.hero h1, .hero-unterzeile, .hero-suche, .vertrauen { position: relative; z-index: 1; }

.hero h1 {
  font-size: clamp(2rem, 1.35rem + 2.9vw, 3.4rem);
  line-height: 1.06; letter-spacing: -.042em; font-weight: 800;
  margin: 0 0 .85rem;
}

.hero-unterzeile {
  font-size: clamp(1rem, .95rem + .35vw, 1.2rem);
  line-height: 1.55; color: var(--text-leise);
  max-width: 40rem; margin: 0 0 2rem;
}

/* --- Große Suche im Hero --- */

.hero-suche {
  display: flex; gap: .5rem; align-items: center;
  background: var(--grund);
  border-radius: var(--r-pill);
  padding: .5rem .5rem .5rem 1.4rem;
  box-shadow: var(--schatten-2), var(--kante);
  max-width: 40rem;
  transition: box-shadow var(--normal) var(--kurve),
              transform var(--normal) var(--kurve);
}

.hero-suche:focus-within {
  box-shadow: var(--schatten-3), 0 0 0 4px rgba(224,150,18,.2);
  transform: translateY(-2px);
}

.hero-suche input {
  flex: 1; min-width: 0; border: 0; background: transparent;
  color: var(--text); font-family: inherit;
  font-size: clamp(1rem, .95rem + .25vw, 1.1rem);
  padding: .75rem 0;
}

.hero-suche input::placeholder { color: var(--text-zart); }
.hero-suche input:focus { outline: none; }
.hero-suche input::-webkit-search-cancel-button { -webkit-appearance: none; }

.hero-suche button {
  flex-shrink: 0;
  padding: .8rem 1.8rem; border: 0; border-radius: var(--r-pill);
  background: linear-gradient(150deg, var(--akzent-hell), var(--akzent-tief));
  color: #16191f; font-family: inherit;
  font-weight: 700; font-size: 1rem; cursor: pointer; white-space: nowrap;
  box-shadow: var(--schatten-akzent);
  transition: transform var(--schnell) var(--kurve),
              box-shadow var(--schnell) var(--kurve),
              filter var(--schnell) var(--kurve);
}

.hero-suche button:hover  { transform: translateY(-2px); filter: brightness(1.06); }
.hero-suche button:active { transform: translateY(0); }

/* --- Vertrauenshinweise --- */

.vertrauen {
  display: flex; flex-wrap: wrap; gap: .6rem 1.9rem;
  margin: 1.8rem 0 0; padding: 0; list-style: none;
}

.vertrauen li {
  display: flex; align-items: center; gap: .55rem;
  font-size: .92rem; font-weight: 550; color: var(--text-leise);
}

.vertrauen svg { flex-shrink: 0; color: var(--akzent-tief); }

@media all { .vertrauen svg { color: var(--akzent); } }

/* --- Bühne (Spartenseiten) --- */

.bühne {
  position: relative; overflow: hidden;
  background: var(--karte);
  border-radius: var(--r-l);
  padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem);
  margin-bottom: 2rem;
  box-shadow: var(--schatten-2), var(--kante);
}

.bühne::before {
  content: ""; position: absolute; pointer-events: none;
  top: -50%; right: -10%; width: 50%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(224,150,18,.11), transparent 68%);
}

.bühne > * { position: relative; }

.bühne p {
  margin: .5rem 0 1.5rem; color: var(--text-leise);
  max-width: 58ch; font-size: .98rem;
}

/* --- Abschnittsköpfe --- */

.block { margin-top: 3rem; }

.block-kopf {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap;
}

.mehr {
  font-size: .88rem; font-weight: 600; text-decoration: none;
  white-space: nowrap; color: var(--text);
  display: inline-flex; align-items: center; min-height: 44px;
  padding: .5rem 1.1rem;
  border: 1px solid var(--rand); border-radius: var(--r-pill);
  background: var(--karte);
  transition: border-color var(--schnell) var(--kurve),
              box-shadow var(--schnell) var(--kurve),
              transform var(--schnell) var(--kurve);
}

.mehr:hover {
  border-color: var(--rand-stark);
  box-shadow: var(--schatten-1);
  transform: translateX(3px);
}

/* ------------------------------------------------ 6. Spartenkarten */

/* Feste drei Spalten statt `auto-fit`. Bei sechs Sparten ergab auto-fit auf
   breiten Bildschirmen fuenf Karten in Reihe eins und eine einsame in Reihe
   zwei - das sieht nach Fehler aus. 3+3 geht immer auf. */
.spartenkacheln {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Bruchpunkt von 900 auf 800 gesenkt: Auf einem 820 Pixel breiten Tablet
   standen zwei sehr breite, halbleere Karten nebeneinander. Drei Karten zu
   je 246 Pixeln füllen die Zeile und halten die Startseite kompakt. */
@media (max-width: 800px) {
  .spartenkacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Keine farbigen Seitenstriche mehr. Alle Sparten tragen dieselbe Sprache;
   unterschieden werden sie durch das Sinnbild, nicht durch die Farbe. */
.spartenkachel {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: .3rem;
  padding: 1.35rem 1.4rem 1.25rem;
  text-decoration: none;
  background: var(--karte);
  border-radius: var(--r-m);
  box-shadow: var(--schatten-1), var(--kante);
  transition: transform var(--normal) var(--kurve),
              box-shadow var(--normal) var(--kurve);
}

.spartenkachel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(120% 90% at 92% 4%, rgba(224,150,18,.14), transparent 58%);
  opacity: 0; transition: opacity var(--normal) var(--kurve);
}

.spartenkachel:hover { transform: translateY(-5px); box-shadow: var(--schatten-3), var(--kante); }
.spartenkachel:hover::before { opacity: 1; }

.sparten-sinnbild {
  width: 44px; height: 44px; border-radius: 13px;
  display: grid; place-items: center;
  background: var(--akzent-zart); color: var(--akzent-tief);
  margin-bottom: .7rem;
  transition: transform var(--normal) var(--kurve-ein);
}

@media all { .sparten-sinnbild { color: var(--akzent); } }

.spartenkachel:hover .sparten-sinnbild { transform: scale(1.09) rotate(-4deg); }

.spartenkachel-name {
  font-weight: 650; font-size: 1.02rem; letter-spacing: -.02em;
  line-height: 1.25; color: var(--text);
}

.spartenkachel-text {
  font-size: .855rem; line-height: 1.5; color: var(--text-leise);
  margin: 0; flex: 1;
}

.spartenkachel-zahl {
  margin-top: .8rem; font-size: .8rem; font-weight: 600;
  color: var(--text-zart);
  display: flex; align-items: center; gap: .35rem;
}

.spartenkachel-zahl::after {
  content: "→"; font-size: .95em;
  transition: transform var(--normal) var(--kurve-ein);
}

.spartenkachel:hover .spartenkachel-zahl { color: var(--akzent-tief); }
.spartenkachel:hover .spartenkachel-zahl::after { transform: translateX(4px); }

@media all {
  .spartenkachel:hover .spartenkachel-zahl { color: var(--akzent); }
}

/* --- Grundsätze ("So vergleichen wir") --- */

.grundsaetze {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Untereinander wird aus jeder Karte ein 720 Pixel breiter Streifen für drei
   Zeilen Text. Das Sinnbild wandert deshalb nach links neben die Überschrift -
   dieselbe Aussage, halbe Höhe, und die Breite wird genutzt. */
@media (max-width: 860px) {
  .grundsaetze { grid-template-columns: minmax(0, 1fr); }

  .grundsatz {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    gap: 0 1.15rem; align-items: start;
    padding: 1.25rem 1.35rem 1.35rem;
  }
  .grundsatz .sparten-sinnbild { grid-row: 1 / span 2; margin-bottom: 0; }
  .grundsatz h3 { margin: .15rem 0 .35rem; }
}

.grundsatz {
  background: var(--karte); border-radius: var(--r-m);
  padding: 1.5rem 1.55rem 1.6rem;
  box-shadow: var(--schatten-1), var(--kante);
}

.grundsatz h3 { margin: .9rem 0 .4rem; font-size: 1.02rem; letter-spacing: -.02em; }

.grundsatz p {
  margin: 0; font-size: .9rem; line-height: 1.6; color: var(--text-leise);
}

.grundsatz a {
  color: var(--text); text-decoration: underline;
  text-underline-offset: 2px; text-decoration-color: var(--rand-stark);
  transition: text-decoration-color var(--schnell) var(--kurve);
}

.grundsatz a:hover { text-decoration-color: var(--akzent); }

/* --- Empfehlungen --- */

.empfehlungen {
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}

.empfehlung {
  display: grid; grid-template-columns: 124px 1fr; gap: 1.25rem;
  background: var(--karte); border-radius: var(--r-m);
  padding: 1.3rem;
  box-shadow: var(--schatten-1), var(--kante);
  transition: box-shadow var(--normal) var(--kurve),
              transform var(--normal) var(--kurve);
}

.empfehlung:hover { transform: translateY(-3px); box-shadow: var(--schatten-2), var(--kante); }

.empfehlung-bild {
  width: 100%; height: auto; aspect-ratio: 1; object-fit: contain;
  border-radius: var(--r-s);
  background: var(--flaeche-2); padding: .55rem;
}

.empfehlung h3 { margin: .2rem 0 .5rem; font-size: 1.05rem; line-height: 1.3; }
.empfehlung h3 a { text-decoration: none; }
.empfehlung h3 a:hover { color: var(--akzent-tief); }

.empfehlung-text {
  margin: 0 0 .85rem; font-size: .93rem; line-height: 1.55;
  color: var(--text-leise); font-style: italic;
}

@media (max-width: 520px) {
  .empfehlung { grid-template-columns: 1fr; }
  .empfehlung-bild { max-width: 150px; }
}

/* --------------------------------------------- 7. Produktkacheln */

/* 236 statt 248 Pixel Mindestbreite: Bei 820 Pixeln Fenster fehlten genau
   zwölf Pixel für eine dritte Spalte - es standen zwei sehr breite Kacheln
   nebeneinander. Auf 1440 Pixeln ändert sich nichts (weiterhin vier). */
.gitter {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(236px, 1fr));
}

/* Kleine Tablets hochkant (768 Pixel): Bei 236 Pixeln Mindestbreite passten
   nur zwei Kacheln zu je 350 Pixeln in die Zeile - für eine Seite, deren
   Zweck das Vergleichen ist, zu wenig nebeneinander. Mit 205 Pixeln sind es
   drei zu je 230. */
@media (min-width: 621px) and (max-width: 900px) {
  .gitter { gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); }
}

/* Wenige Treffer: Das Raster darf keine leeren Spalten offen lassen.
   `auto-fill` legt immer so viele Spalten an, wie hineinpassen - bei zwei
   verwandten Produkten unter "Weitere Produkte aus …" standen die beiden
   Kacheln links und rechts daneben klaffte eine dritte, leere Spalte. Das
   sieht aus, als fehlte etwas. Deshalb hier feste Spaltenzahlen und eine
   Breitengrenze, damit aus zwei Kacheln keine zwei Plakate werden. */
.gitter:not(:has(> :nth-child(2)))  { grid-template-columns: minmax(0, 360px); }

.gitter:has(> :nth-child(2)):not(:has(> :nth-child(3))) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 780px;
}

/* EINE einzige Kachel wird quer gelegt. Hochkant stand sie als schmale Säule
   links, rechts daneben blieben auf 1440 Pixeln über 800 Pixel leer - das
   sieht aus, als wäre der Rest der Reihe verloren gegangen. Quer füllt sie
   die halbe Zeile und wirkt wie eine bewusste Empfehlung. */
@media (min-width: 621px) {
  .gitter:not(:has(> :nth-child(2))) { grid-template-columns: minmax(0, 580px); }

  .gitter:not(:has(> :nth-child(2))) > .kachel {
    flex-direction: row; align-items: stretch;
  }
  .gitter:not(:has(> :nth-child(2))) > .kachel > .kachel-bildbereich {
    flex: 0 0 44%; display: flex;
  }
  .gitter:not(:has(> :nth-child(2))) > .kachel .kachel-bild {
    aspect-ratio: auto; height: 100%; min-height: 190px;
  }
  .gitter:not(:has(> :nth-child(2))) > .kachel > .kachel-text { flex: 1; min-width: 0; }
}

/* Genau drei Kacheln: feste drei Spalten, aber gedeckelt. Ohne Deckel wurden
   sie auf 1280 Pixeln je 450 Pixel breit - dreimal so groß wie in einer
   normalen Reihe. Eine Kachel, die je nach Trefferzahl ihre Größe ändert,
   sieht nach Zufall aus, nicht nach System. */
.gitter:has(> :nth-child(3)):not(:has(> :nth-child(4))) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1120px;
}

/* Kein Rahmen mehr - die Karte steht durch Schatten und Weißraum frei. */
.kachel {
  position: relative;
  background: var(--karte);
  border-radius: var(--r-m);
  overflow: hidden;
  display: flex; flex-direction: column;
  text-decoration: none;
  box-shadow: var(--schatten-1), var(--kante);
  transition: transform var(--normal) var(--kurve),
              box-shadow var(--normal) var(--kurve);
}

.kachel:hover { transform: translateY(-6px); box-shadow: var(--schatten-3), var(--kante); }

.kachel-bildbereich {
  position: relative;
  background: var(--flaeche-2);
  overflow: hidden;
}

/* object-fit: contain, damit kein Produkt angeschnitten wird.
   height: auto ist Pflicht - die width/height-Attribute im HTML reservieren
   den Platz, würden sonst aber eine feste Höhe erzwingen und
   `aspect-ratio` aushebeln. */
.kachel-bild {
  aspect-ratio: 3 / 2; width: 100%; height: auto;
  object-fit: contain; padding: .9rem;
  display: block; background: transparent;
  transition: transform var(--ruhig) var(--kurve-ein);
}

.kachel:hover .kachel-bild { transform: scale(1.045); }

/* --- Strichzeichnungen einfangen ------------------------------------------

   Liegt kein Herstellerfoto vor, liefert die Anwendung eine Strichzeichnung.
   Die bringt zwei Dinge mit, die dem Farbsystem widersprechen:

   1. eine eigene fast weiße Fläche (#f4f5f7). Im Dunkelmodus leuchtete sie
      als weißes Rechteck aus jeder Karte - auf der Angebotsseite lagen zehn
      davon nebeneinander, die Seite sah kaputt aus.
   2. die alte Spartenfarbe. Die sechs Buntfarben sind aus der Gestaltung
      verschwunden, in den Zeichnungen lebten sie weiter: Auf "Haus & Garten"
      waren alle Zeichnungen grün, auf der Angebotsseite lagen grüne neben
      goldenen.

   Beides wird hier eingefangen, ohne die Bildquelle anzurühren: Eine
   Goldfläche im Mischmodus "hue" gibt allem darunter denselben Farbton und
   lässt Sättigung und Helligkeit stehen. Genau deshalb "hue" und nicht
   "color": Die Platte ist unbunt, behält also ihr neutrales Grau, während
   jede Linie den Goldton annimmt - egal ob sie grün, blau oder violett
   ankommt. Mit "color" färbte sich auch die Platte cremegelb ein.
   Der Bildbereich trägt `isolation`, damit nur innerhalb der Bildfläche
   gemischt wird. */
.ist-zeichnung { isolation: isolate; }

/* Für Zeichnungen gilt ausnahmsweise `cover`. Bei Produktfotos wäre das
   falsch - dort schnitte es Ware an. Eine Zeichnung ist aber 4:3, die
   Bildfläche 3:2: Mit `contain` blieb ringsum ein Rand stehen und in jeder
   Karte lag ein zweites, andersfarbiges Rechteck. Der Ausschnitt sitzt an der
   Unterkante, damit der Markenname am unteren Rand der Zeichnung stehen
   bleibt - beschnitten wird nur die leere Fläche oben. */
.ist-zeichnung .kachel-bild,
.ist-zeichnung .produkt-bild {
  object-fit: cover; object-position: 50% 100%; padding: 0;
  /* "hue" übernimmt nur den Farbton und lässt Sättigung und Helligkeit
     stehen. Die alten Spartenfarben sind aber unterschiedlich kräftig -
     aus Grün wurde ein mattes Bronze, aus Gelb ein leuchtendes Gold. Das
     gleicht das hier an. Die Platte ist unbunt und bleibt unberührt. */
  filter: saturate(1.45) brightness(1.06);
}

/* @supports ist hier kein Schmuck: Kann ein Browser den Mischmodus nicht,
   läge sonst eine deckende Goldfläche über jedem Bild. Lieber die alte
   Spartenfarbe als ein zugekleistertes Produktbild. */
@supports (mix-blend-mode: hue) {
  .ist-zeichnung::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: var(--akzent);
    mix-blend-mode: hue;
    pointer-events: none;
  }
}

/* Die Abzeichen liegen über der Einfärbung, sonst nähmen sie den Goldton
   der Fläche an und "Tiefpreis" verlöre seinen Verlauf. */
.kachel-marker { z-index: 2; }

@media all {
  /* Umgekehrte Helligkeit: aus der hellen Platte wird eine dunkle, aus der
     Linie eine helle. `brightness` hebt sie danach in einen lesbaren Bereich -
     die Platte bleibt dunkel, weil sie nach dem Umkehren bei 10 von 255 liegt.
     Kein `grayscale` hier: Die umgekehrte Linie muss ihre Sättigung behalten,
     sonst hätte die Goldfläche im Mischmodus "hue" nichts zu färben. */
  /* Gleiche Selektorstärke wie oben - mit `.ist-zeichnung img` (0,1,1)
     verlor diese Regel gegen `.ist-zeichnung .kachel-bild` (0,2,0), und die
     Platten leuchteten wieder weiß aus den Karten. Nachgemessen, nicht
     vermutet: im Bildschirmfoto war der Rückschritt sofort sichtbar. */
  .ist-zeichnung .kachel-bild,
  .ist-zeichnung .produkt-bild {
    filter: invert(1) brightness(1.75) saturate(1.35);
  }
}

/* Abzeichen NEBENEINANDER statt übereinander.

   Vorher stapelten sich "−65 %" und "Tiefpreis" in der linken oberen Ecke.
   Zwei Pillen übereinander in derselben Ecke lesen sich wie ein Etikett, das
   jemand zweimal aufgeklebt hat, und sie verdeckten zusammen ein Viertel der
   Bildhöhe. Jetzt spannt die Zeile über die ganze Bildbreite: der Nachlass
   links (er ist die Hauptaussage), alles Weitere rechts. */
.kachel-marker {
  position: absolute; top: .7rem; left: .7rem; right: .7rem; z-index: 1;
  display: flex; gap: .35rem; align-items: flex-start;
  justify-content: flex-end; flex-wrap: wrap;
  pointer-events: none;
}

.kachel-marker .marker.rabatt { margin-right: auto; }

/* --- Abzeichen: alle im selben Akzent, nur der Rang unterscheidet sie --- */
.marker {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .26rem .62rem; border-radius: var(--r-pill);
  font-size: .72rem; font-weight: 700; letter-spacing: .015em;
  box-shadow: 0 1px 4px rgba(22,25,31,.14);
}

/* "Tiefpreis" ist eine Nebenaussage und trägt deshalb die ruhige Form: eine
   milchige Pille mit goldener Schrift und feiner goldener Kante. Vorher war
   sie ein voller Goldverlauf und damit auffälliger als der Nachlass daneben -
   auf einer Angebotsseite genau die falsche Rangfolge. */
.marker.tiefpreis {
  background: rgba(255,255,255,.92);
  /* FESTER WERT, keine Variable - und der Grund ist eine gemessene 1,96:1:
     `--akzent-text` dreht im Dunkelmodus auf helles Gold um. Die Pille hier
     bleibt aber in BEIDEN Modi weiß, weil sie auf der hellen Bildplatte
     liegt. Mit der Variablen stand deshalb im Dunkelmodus helles Gold auf
     Weiß. Wo die Fläche modusunabhängig ist, muss es die Schrift auch sein. */
  color: #96600a;
  box-shadow: inset 0 0 0 1px rgba(189,122,6,.35), 0 1px 4px rgba(22,25,31,.12);
  backdrop-filter: blur(6px);
}

/* Der Nachlass ist die Hauptaussage: dunkle Pille, weiße Ziffern in gleicher
   Breite, damit −9 % und −65 % gleich ruhig stehen. */
.marker.rabatt {
  background: var(--tinte); color: #fff;
  font-size: .78rem; padding: .3rem .68rem;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
  box-shadow: 0 2px 8px rgba(22,25,31,.28);
}
.marker.video  { background: rgba(22,25,31,.82); color: #fff; backdrop-filter: blur(4px); }
.marker.an     { background: var(--akzent); color: #16191f; box-shadow: none; }
.marker.aus    { background: var(--flaeche-2); color: var(--text-leise); box-shadow: none; }

/* ABZEICHEN IM DUNKELMODUS - die Platte entscheidet, nicht der Seitenmodus.

   Das ist ein Fehler, den erst das Bildschirmfoto zeigte: Die Abzeichen
   liegen auf der BILDPLATTE, und die ist im Dunkelmodus für Produktfotos
   hell (siehe oben). Die alte Regel färbte die Rabattpille dort trotzdem
   weiß - eine weiße Pille auf fast weißem Grund. "−60 %" war praktisch
   unsichtbar.

   Also richtet sich die Farbe jetzt nach dem Untergrund: Auf der hellen
   Fotoplatte bleiben die Abzeichen so wie im Hellmodus, und nur auf der
   dunklen Zeichnungsplatte drehen sie sich um. */
@media all {
  .marker.video { background: rgba(0,0,0,.8); color: #fff; }

  /* Nur dort, wo die Platte wirklich dunkel ist: Strichzeichnungen. */
  .ist-zeichnung .marker.rabatt { background: #fff; color: #16191f; }

  .ist-zeichnung .marker.tiefpreis {
    background: rgba(16,18,21,.88); color: var(--akzent-tief);
    box-shadow: inset 0 0 0 1px rgba(240,172,46,.42);
  }
}

.kachel-text {
  padding: 1rem 1.1rem 1.15rem;
  display: flex; flex-direction: column; flex: 1;
}

.kachel-marke {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--text-zart); font-weight: 700;
}

/* Genau zwei Zeilen - nicht höchstens zwei. Ein einzeiliger Titel
   ("Waschsauger SE 4001") zog die ganze Preisspalte 21 Pixel nach oben,
   während der Nachbar zweizeilig war: In einer Viererreihe standen Preis,
   Zusatz und Händlerzahl auf zwei verschiedenen Höhen. Der Knopf floh schon
   vorher nach unten, die Mitte der Kachel blieb unruhig. */
.kachel-titel {
  font-size: .97rem; font-weight: 640; margin: .3rem 0 .45rem;
  line-height: 1.35; letter-spacing: -.016em; color: var(--text);
  min-height: 2.7em;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: break-word;
  transition: color var(--schnell) var(--kurve);
}

.kachel:hover .kachel-titel { color: var(--akzent-tief); }

@media all {
  .kachel:hover .kachel-titel { color: var(--akzent); }
}

.bewertung {
  display: flex; align-items: center; gap: .4rem;
  margin-bottom: .55rem; flex-wrap: wrap;
}

.bewertung.gross { margin: .45rem 0 .95rem; font-size: 1rem; }
.sterne { color: var(--akzent-tief); letter-spacing: .06em; font-size: .92rem; }

@media all { .sterne { color: var(--akzent); } }

/* Der Fuß dehnt sich, die Daten stehen oben, der Knopf sitzt am Boden -
   dadurch fluchtet die Knopfreihe über die ganze Kachelreihe. */
.kachel-fuss {
  margin-top: auto; padding-top: .5rem;
  display: flex; flex-direction: column; flex: 1;
}

.kachel-daten { display: block; flex: 1; }

/* --- Preisdarstellung: das Herzstück ------------------------------------

   DREI RÄNGE, immer dieselben, auf jeder Seite:
     1. der Preis        - groß, fett, Tinte, Ziffern in gleicher Breite
     2. der alte Preis   - klein, durchgestrichen, zurückgenommen
     3. die Ersparnis    - eigene Zeile, Betrag in Gold hervorgehoben

   Vorher standen alle drei in EINER Zeile nebeneinander und waren dadurch
   fast gleich laut. Die Ersparnis - das eigentliche Verkaufsargument - war
   ein blasser Chip mit gemessenen 3,21:1 Kontrast. */

.preiszeile { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }

.preis {
  font-size: 1.5rem; font-weight: 780;
  letter-spacing: -.038em; color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

/* "ab" gehört zum Preis, ist aber keine Zahl. Klein, leicht und mit etwas
   Abstand gesetzt, damit der Blick sofort auf dem Betrag landet. */
.preis-ab {
  font-size: .68em; font-weight: 600; letter-spacing: 0;
  color: var(--text-leise); margin-right: .3em;
}

.uvp {
  text-decoration: line-through; color: var(--text-zart);
  font-size: .88rem; text-decoration-thickness: 1px;
  font-variant-numeric: tabular-nums;
  text-decoration-color: rgba(109,115,124,.75);
}

.uvp.gross { font-size: 1.1rem; }

/* Die Ersparnis in Euro. Sie steht in einer eigenen Zeile, weil sie sonst
   im Umbruch der Preiszeile verschwindet, und der Betrag trägt den einzigen
   Farbakzent des Blocks. */
.sparzeile {
  display: block; margin-top: .3rem;
  font-size: .84rem; font-weight: 600; color: var(--text-leise);
  line-height: 1.35;
}

.sparzeile strong {
  color: var(--akzent-text); font-weight: 800;
  font-variant-numeric: tabular-nums; letter-spacing: -.015em;
}

/* Altbestand: der Prozent-Chip wird in den Kacheln nicht mehr gesetzt,
   die Regel bleibt für die Verwaltungsansichten stehen. */
.ersparnis {
  font-size: .78rem; font-weight: 700;
  color: var(--akzent-text); background: var(--akzent-zart);
  padding: .12rem .45rem; border-radius: 5px;
}

@media all { .ersparnis { color: var(--akzent); } }

.preis-klein { display: block; font-size: .77rem; color: var(--text-zart); margin-top: .3rem; }

.shopzahl {
  display: block; margin-top: .5rem;
  font-size: .79rem; font-weight: 550; color: var(--text-leise);
}

/* Sieht aus wie ein Knopf, ist aber ein <span> - die ganze Kachel ist
   bereits ein Link, und ein Link im Link ist ungültiges HTML. So bleibt die
   gesamte Fläche antippbar, was auf dem Handy deutlich besser ist. */
/* Primärer Knopf = Akzentfarbe, überall gleich. Der Kauf-Weg trägt Gold,
   alles andere bleibt neutral - so weiß man ohne Nachdenken, welcher Knopf
   der wichtige ist. */
.kachel-knopf {
  display: block; margin-top: .9rem;
  padding: .65rem 1rem; border-radius: var(--r-s);
  background: linear-gradient(150deg, var(--akzent-hell), var(--akzent-tief));
  color: #16191f;
  font-size: .89rem; font-weight: 700; text-align: center;
  box-shadow: var(--schatten-akzent);
  transition: filter var(--schnell) var(--kurve),
              box-shadow var(--schnell) var(--kurve);
}

.kachel:hover .kachel-knopf { filter: brightness(1.07); }

/* Lange und kurze Beschriftung desselben Knopfes - siehe Kommentar in
   _kachel.html. Umgeschaltet wird im Mobil-Abschnitt weiter unten. */
.nur-schmal-text { display: none; }

/* Produkte ohne Händlerpreis führen nur zur Herstellerinfo - das ist kein
   Kauf-Weg und bekommt deshalb den neutralen Knopf. */
.kachel-knopf.leise {
  background: var(--flaeche-2); color: var(--text-leise);
  box-shadow: none; font-weight: 620;
}

.kachel:hover .kachel-knopf.leise { background: var(--flaeche-2); color: var(--text); }

.ohne-preis {
  display: inline-block;
  font-size: .85rem; font-weight: 620; color: var(--text-leise);
  background: var(--flaeche-2);
  border-radius: var(--r-pill); padding: .28rem .7rem;
}

/* Im Dunkelmodus liegen Kartenfläche (#1a1e25) und ruhige Fläche (#1b1e24)
   nur einen Farbwert auseinander - Knopf und Preishinweis waren dort nicht
   mehr als Form erkennbar, man sah nur schwebenden Text. Eine Kante gibt
   ihnen die Form zurück, ohne sie so laut zu machen wie den Kauf-Knopf. */
@media all {
  .kachel-knopf.leise {
    background: transparent; color: var(--text);
    box-shadow: inset 0 0 0 1px var(--rand-stark);
  }
  .kachel:hover .kachel-knopf.leise {
    background: rgba(255,255,255,.04);
    box-shadow: inset 0 0 0 1px var(--text-zart);
  }
  .ohne-preis { background: transparent; box-shadow: inset 0 0 0 1px var(--rand); }
}

.modellnummer { font-size: .78rem; color: var(--text-zart); margin-bottom: .35rem; }
.modellnummer.gross { font-size: .9rem; margin: .3rem 0 .8rem; color: var(--text-leise); }

.ohne-preis-kasten { margin: 1.2rem 0; }

/* --------------------------------------------------- 8. Listenseite */

.listenseite {
  display: grid; grid-template-columns: 262px minmax(0, 1fr);
  gap: 1.9rem; align-items: start; margin-top: 1.4rem;
}

/* Untereinander brauchen Filterkopf und Sortierzeile keinen Spaltenabstand
   von 1,9 rem - zusammen mit dem Eigenabstand der Sortierzeile standen sie
   55 Pixel auseinander, obwohl sie dieselbe Aufgabe haben. */
@media (max-width: 880px) {
  .listenseite { grid-template-columns: 1fr; gap: 1.1rem; }
}

/* Tablet quer (1024 × 768) und schmale Fenster: Der Ergebnisspalte blieben
   neben der 262 Pixel breiten Filterspalte nur 684 Pixel - zu wenig für drei
   Kacheln zu je 236 Pixeln. Es standen zwei sehr breite nebeneinander, und
   ein Preisvergleich, der nur zwei Produkte gleichzeitig zeigt, vergleicht
   nicht mehr viel. Schmalere Filterspalte, schmalere Kacheln: drei passen. */
@media (min-width: 881px) and (max-width: 1180px) {
  .listenseite { grid-template-columns: 228px minmax(0, 1fr); gap: 1.5rem; }
  .listenseite .gitter {
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
  .filterspalte { padding: 1.1rem 1.05rem; gap: 1.1rem; }
}

.filterhuelle {
  position: sticky; top: calc(var(--kopf-hoehe) + 1rem);
  background: var(--karte); border-radius: var(--r-m);
  box-shadow: var(--schatten-1), var(--kante); overflow: hidden;
}

.filterhuelle > summary {
  display: none;
  cursor: pointer; list-style: none;
  padding: .95rem 1.25rem; font-weight: 650;
  display: none;
}

.filterhuelle > summary::-webkit-details-marker { display: none; }

.filterspalte {
  padding: 1.3rem 1.35rem;
  display: flex; flex-direction: column; gap: 1.3rem;
}

@media (max-width: 880px) {
  .filterhuelle { position: static; }

  /* Vorher ein 72 Pixel hoher, fast leerer weißer Balken über die volle
     Breite, in dem links klein "Filter" stand. Jetzt ein kompakter Kopf mit
     Sinnbild und - wenn welche gesetzt sind - der Zahl aktiver Filter. */
  .filterhuelle > summary {
    display: flex; align-items: center; gap: .6rem;
    padding: .8rem 1.1rem; font-size: .95rem;
  }
  .filterhuelle > summary::after {
    content: "▾"; color: var(--text-zart); margin-left: auto;
    transition: transform var(--normal) var(--kurve);
  }
  .filterhuelle[open] > summary::after { transform: rotate(180deg); }
  .filterhuelle[open] .filterspalte { border-top: 1px solid var(--rand); }
  .filterhuelle > summary:hover { background: var(--flaeche); }
}

.filter-sinnbild { color: var(--text-leise); flex-shrink: 0; display: block; }

.filterzahl {
  display: inline-grid; place-items: center;
  min-width: 22px; height: 22px; padding: 0 .35rem;
  border-radius: var(--r-pill);
  background: var(--akzent); color: #16191f;
  font-size: .74rem; font-weight: 700;
}

.filterblock { display: flex; flex-direction: column; gap: .45rem; }

.filtertitel {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .09em;
  font-weight: 700; color: var(--text-zart);
}

.filterspalte select, .sortierzeile select {
  padding: .6rem .7rem; border: 1px solid var(--rand);
  border-radius: var(--r-s); background: var(--grund); color: var(--text);
  font-size: .93rem; font-family: inherit; width: 100%;
  min-height: 44px;                        /* waren 41 Pixel */
  transition: border-color var(--schnell) var(--kurve);
}

/* Eigenständige Aktion, kein Link im Fließtext - braucht eine Fingerfläche. */
.filterspalte > .klein[href] {
  display: inline-flex; align-items: center; min-height: 44px;
  align-self: flex-start;
}

.filterspalte select:hover, .sortierzeile select:hover { border-color: var(--rand-stark); }

.sortierzeile select { width: auto; }

.wahl {
  display: flex; align-items: center; gap: .6rem;
  font-size: .92rem; cursor: pointer;
  min-height: 44px;                        /* Fingerfreundlich */
  transition: color var(--schnell) var(--kurve);
}

.wahl:hover { color: var(--akzent-tief); }
.wahl input { accent-color: var(--akzent); width: 18px; height: 18px; }

.sortierzeile {
  display: flex; align-items: center; gap: .65rem;
  margin-bottom: 1.2rem; flex-wrap: wrap;
}

.blaettern {
  display: flex; gap: .4rem; justify-content: center;
  margin-top: 2.5rem; flex-wrap: wrap;
}

.seitenzahl {
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: .5rem .7rem; border-radius: var(--r-s);
  text-decoration: none; font-size: .93rem; font-weight: 550;
  background: var(--karte); box-shadow: var(--schatten-1), var(--kante);
  transition: box-shadow var(--schnell) var(--kurve),
              transform var(--schnell) var(--kurve);
}

.seitenzahl:hover { box-shadow: var(--schatten-2), var(--kante); transform: translateY(-1px); }

.seitenzahl.aktiv {
  background: var(--tinte); color: #fff; font-weight: 700;
}

@media all {
  .seitenzahl.aktiv { background: var(--akzent); color: #16191f; }
}

.seitenzahl.leise { background: none; box-shadow: none; color: var(--text-zart); }

.ergebnisspalte { min-width: 0; }

.ohne-inhalt { text-align: center; padding: 3rem 1rem; }

/* Weiterführung unter einer leeren Ergebnisliste. Diese Pillen sind hier die
   EINZIGE Handlungsmöglichkeit neben "Filter zurücksetzen" - sie brauchen
   deshalb eine volle Fingerfläche, während die Markenzeile auf der
   Spartenseite eine Ergänzung neben anderen Wegen ist. */
.weiterhelfen { margin-top: 1.6rem; }
.weiterhelfen .markenzeile { margin-top: .7rem; }
.weiterhelfen .markenlink {
  display: inline-flex; align-items: center; gap: .3rem;
  min-height: 44px; padding: .5rem 1.05rem;
}
.weiterhelfen .markenlink .leise { font-size: .82em; }

/* --- Bereichsliste --- */

/* `auto-fill`, nicht `auto-fit`: Sind nur drei Bereiche gefüllt, zog auto-fit
   sie auf je 450 Pixel auseinander - drei Plakate für je "1 Produkt". Mit
   auto-fill behalten die Felder ihre Breite, egal wie viele es sind. */
.bereiche {
  display: grid; gap: .7rem;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.bereich {
  display: flex; flex-direction: column; gap: .12rem;
  text-decoration: none; padding: .9rem 1.05rem;
  border-radius: var(--r-s);
  font-size: .94rem; font-weight: 570;
  background: var(--karte); box-shadow: var(--schatten-1), var(--kante);
  transition: transform var(--normal) var(--kurve),
              box-shadow var(--normal) var(--kurve);
}

.bereich:hover { transform: translateY(-3px); box-shadow: var(--schatten-2), var(--kante); }

/* Leere Bereiche sind keine Links - sie führten in Sackgassen.
   `text-align` muss hier ausdrücklich stehen: Diese Felder tragen in der
   Vorlage zusätzlich die Klasse `ohne-inhalt`, die für den Leer-Hinweis
   ganzer Ergebnislisten gedacht ist und zentriert. In der Bereichsliste
   standen dadurch zwei von sechs Kacheln mittig und vier linksbündig. */
span.bereich { cursor: default; opacity: .75; text-align: start; }
span.bereich:hover { transform: none; box-shadow: var(--schatten-1), var(--kante); }

.bereich .leer { font-style: italic; color: var(--text-zart); }

/* Bereiche, für die es noch nichts gibt: eine ruhige Zeile statt halbleerer
   Karten zwischen den gefüllten. */
.in-arbeit {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem;
  margin: 1rem 0 0; font-size: .84rem; color: var(--text-zart);
}

.in-arbeit-marke {
  font-size: .66rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-leise);
  border: 1px solid var(--rand-stark); border-radius: 4px;
  padding: .08rem .4rem;
}

.markenzeile {
  display: flex; flex-wrap: wrap; gap: .5rem;
  align-items: center; margin-top: 1.4rem;
}

.markenlink {
  text-decoration: none; font-size: .86rem; font-weight: 550;
  padding: .42rem .95rem; border-radius: var(--r-pill);
  background: var(--karte); box-shadow: var(--schatten-1), var(--kante);
  transition: box-shadow var(--schnell) var(--kurve),
              transform var(--schnell) var(--kurve);
}

.markenlink:hover { box-shadow: var(--schatten-2), var(--kante); transform: translateY(-1px); }

.schnellfilter { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }

/* --------------------------------------------------- 9. Produktseite */

.brotkrumen {
  display: flex; gap: .45rem; flex-wrap: wrap;
  margin-bottom: 1.1rem; align-items: center;
  color: var(--text-leise);          /* die Trennzeichen kamen auf 4,42:1 */
}

.brotkrumen a {
  text-decoration: none; color: var(--text-leise);
  transition: color var(--schnell) var(--kurve);
}

.brotkrumen a:hover { color: var(--akzent-tief); }

.produkt-kopf {
  display: grid; grid-template-columns: 5fr 7fr;
  gap: 2.4rem; align-items: start;
  background: var(--karte);
  border-radius: var(--r-l);
  padding: clamp(1.3rem, .85rem + 1.9vw, 2.2rem);
  box-shadow: var(--schatten-2), var(--kante);
}

@media (max-width: 980px) {
  .produkt-kopf { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
}

.produkt-bildbereich { position: relative; }

.produkt-bildrahmen {
  position: relative; overflow: hidden;
  background: var(--flaeche-2);
  border-radius: var(--r-m);
}

/* 4:3 statt 3:2. Zwei Gründe, beide nachgemessen:
   Die Bildspalte endete bei 314 Pixeln, während die Textspalte daneben 460
   hoch war - unter dem Bild blieb ein leerer Streifen in der Karte stehen.
   Und die Strichzeichnungen, die einspringen, wenn kein Herstellerfoto
   vorliegt, sind selbst 4:3: In der 3:2-Fläche mussten sie beschnitten
   werden, jetzt passen sie genau hinein. */
.produkt-bild {
  width: 100%; max-width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: contain;
  padding: 1.1rem;
  display: block; background: transparent;
  transition: transform var(--ruhig) var(--kurve-ein);
}

.produkt-bildrahmen:hover .produkt-bild { transform: scale(1.04); }

.bildnachweis {
  margin: .65rem 0 0; font-size: .74rem; line-height: 1.45;
  color: var(--text-zart);
}

.marke-zeile {
  font-size: .76rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-zart); font-weight: 700; margin-bottom: .15rem;
}

/* Der beste Preis: Akzent statt Grün. Die Kante trägt im Dunkelmodus die
   Aussage - dort ist die Tönung nur noch ein Hauch, sonst entstünde wieder
   der braune Fleck. */
.bestpreis-kasten {
  margin: 1.4rem 0; padding: 1.2rem 1.4rem;
  background: var(--akzent-zart);
  border-radius: var(--r-m);
}

@media all {
  .bestpreis-kasten, .kasten.warnung, .kasten.gut {
    box-shadow: inset 0 0 0 1px rgba(240,172,46,.22);
  }
}

.bestpreis-zahl {
  font-size: clamp(2rem, 1.5rem + 1.6vw, 2.7rem);
  font-weight: 800; letter-spacing: -.042em; line-height: 1.08;
  color: var(--text);
}

/* --- Angebotsliste --- */

.angebotsliste { display: flex; flex-direction: column; gap: .65rem; margin-top: 1rem; }

.angebot {
  display: grid; align-items: center; gap: 1rem;
  grid-template-columns: minmax(0, 1fr) auto auto;
  background: var(--karte); border-radius: var(--r-m);
  padding: 1rem 1.25rem;
  box-shadow: var(--schatten-1), var(--kante);
  transition: box-shadow var(--normal) var(--kurve),
              transform var(--normal) var(--kurve);
}

.angebot:hover { box-shadow: var(--schatten-2), var(--kante); transform: translateY(-2px); }

.angebot.bester {
  background: linear-gradient(120deg, var(--akzent-zart), var(--karte) 58%);
  box-shadow: var(--schatten-2), inset 0 0 0 2px var(--akzent);
}

@media (max-width: 640px) {
  .angebot { grid-template-columns: 1fr auto; }
  .angebot .zum-shop { grid-column: 1 / -1; text-align: center; }
}

/* Auf 320 Pixel blieben der linken Spalte noch etwa 120 Pixel: Der Shopname
   brach in zwei Zeilen, das Abzeichen "Top-Preis" wurde zu einem zweizeiligen
   Klotz und die Zeile zerfiel. Unter 420 Pixel steht deshalb alles
   untereinander. */
@media (max-width: 420px) {
  .angebot { grid-template-columns: minmax(0, 1fr); gap: .55rem; }
  .angebot .angebot-preis { text-align: left; }
  .abzeichen { margin-left: 0; margin-top: .35rem; display: inline-block; }
  .shopname { display: block; }
}

.shop-spalte { min-width: 0; }
.shopname { font-weight: 650; letter-spacing: -.015em; }

.abzeichen {
  display: inline-block; margin-left: .5rem; padding: .16rem .55rem;
  background: linear-gradient(150deg, var(--akzent-hell), var(--akzent-tief));
  color: #16191f; border-radius: var(--r-pill);
  font-size: .67rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  vertical-align: middle;
}

.angebot-preis { text-align: right; }
.angebot-preis .gesamt { font-size: 1.25rem; font-weight: 730; letter-spacing: -.03em; }

.nicht-verfuegbar { opacity: .5; }

/* --- Preisverlauf --- */

.verlauf-kasten {
  background: var(--karte); border-radius: var(--r-m);
  padding: 1.4rem 1.6rem; margin-top: 1.8rem;
  box-shadow: var(--schatten-1), var(--kante);
}

.verlauf-svg { width: 100%; height: auto; display: block; margin: .7rem 0 .4rem; }
.verlauf-linie { fill: none; stroke: var(--akzent-tief); stroke-width: 2.2; stroke-linejoin: round; }
.verlauf-flaeche { fill: var(--akzent); opacity: .13; }

/* ------------------------------------------- 10. Knöpfe und Formulare */

.knopfreihe {
  display: flex; flex-wrap: wrap; gap: .75rem;
  align-items: center; margin-top: .6rem;
}

/* ZWEI Knopfarten, nicht fünf.
   Primär = Akzent (kaufen), Sekundär = weiß mit feinem Rand (alles andere). */
.knopf {
  padding: .72rem 1.4rem; border: 1px solid var(--rand); border-radius: var(--r-s);
  cursor: pointer; background: var(--karte); color: var(--text);
  font-weight: 620; font-size: .95rem; font-family: inherit;
  text-decoration: none; display: inline-flex; align-items: center; gap: .5rem;
  min-height: 44px; box-sizing: border-box;
  box-shadow: var(--schatten-1);
  transition: transform var(--schnell) var(--kurve),
              box-shadow var(--schnell) var(--kurve),
              background var(--schnell) var(--kurve);
}

.knopf:hover  { transform: translateY(-2px); box-shadow: var(--schatten-2); }
.knopf:active { transform: translateY(0); }

.knopf.gelb {
  background: linear-gradient(150deg, var(--akzent-hell), var(--akzent-tief));
  color: #16191f; border-color: transparent;
  box-shadow: var(--schatten-akzent);
}

.knopf.gelb:hover { filter: brightness(1.06); }

/* Dritter Knopf: kräftig, aber NICHT in der Kauffarbe.
   Gold heißt auf dieser Seite überall "hier geht es zum Kauf". Der Weg zur
   Herstellerseite ist kein Kauf-Weg - in der Produktkachel trägt er längst den
   ruhigen Knopf, auf der Produktseite leuchtete er trotzdem golden. Wer darauf
   klickt, erwartet ein Angebot und bekommt ein Datenblatt. */
.knopf.tinte {
  background: var(--tinte); color: #fff; border-color: transparent;
  box-shadow: var(--schatten-2);
}

.knopf.tinte:hover { background: var(--tinte-2); }

@media all {
  .knopf.tinte {
    background: var(--flaeche-2); color: var(--text);
    box-shadow: inset 0 0 0 1px var(--rand-stark), var(--schatten-1);
  }
  .knopf.tinte:hover { background: var(--tinte-3); }
}

.knopf.gross { padding: .95rem 1.9rem; font-size: 1.04rem; }

.knopf.klein-knopf { padding: .45rem .9rem; font-size: .85rem; min-height: 38px; }

/* Der Kauf-Knopf: der wichtigste der Seite. */
.zum-shop {
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; min-height: 44px;
  padding: .72rem 1.5rem; border-radius: var(--r-s);
  background: linear-gradient(150deg, var(--akzent-hell), var(--akzent-tief));
  color: #16191f; font-weight: 700; white-space: nowrap;
  box-shadow: var(--schatten-akzent);
  transition: transform var(--schnell) var(--kurve),
              box-shadow var(--schnell) var(--kurve),
              filter var(--schnell) var(--kurve);
}

.zum-shop:hover {
  transform: translateY(-2px); filter: brightness(1.06);
  box-shadow: var(--schatten-akzent), var(--schatten-2);
}

.zum-shop:active { transform: translateY(0); }

.zum-shop.gross {
  padding: .95rem 1.9rem; font-size: 1.04rem;
  white-space: normal; text-align: center;
}

/* Sichtbare Kennzeichnung am Partnerlink. Das Band oben verspricht einen
   "gekennzeichneten Link" - dann muss die Kennzeichnung auch dort stehen.
   Sie bleibt vollständig lesbar, verliert aber die Rahmenform: Neben dem
   Kauf-Knopf sah der umrandete Kasten wie ein zweiter, abgeschalteter Knopf
   aus und nahm der Handlungsaufforderung die Wirkung. */
.werbemarke {
  font-size: .64rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-leise);
  background: var(--flaeche-2); border-radius: 4px;
  padding: .16rem .45rem; align-self: center;
}

/* Video ist ein Nebenweg - ruhiger Knopf, das Rot steckt nur im Dreieck. */
.video-knopf { font-weight: 620; }
.video-pfeil { color: #c4302b; font-size: 1em; }

@media all { .video-pfeil { color: #ff6b60; } }

.formular {
  display: flex; flex-wrap: wrap; gap: .8rem;
  align-items: flex-end; margin-top: 1rem;
}

.feld { display: flex; flex-direction: column; gap: .3rem; }
.feld label { font-size: .83rem; font-weight: 620; color: var(--text-leise); }

.feld input, .feld select {
  padding: .7rem .8rem; border: 1px solid var(--rand); border-radius: var(--r-s);
  background: var(--grund); color: var(--text);
  font-size: 16px;                        /* unter 16px zoomt iOS beim Antippen */
  font-family: inherit; min-width: 190px; min-height: 44px;
  transition: border-color var(--schnell) var(--kurve),
              box-shadow var(--schnell) var(--kurve);
}

.feld input:focus, .feld select:focus {
  outline: none; border-color: var(--akzent);
  box-shadow: 0 0 0 4px rgba(224,150,18,.18);
}

.merkmale { margin: 0 0 1rem; padding-left: 1.3rem; }
.merkmale li { margin-bottom: .4rem; }

/* ----------------------------------------------------- 11. Tabellen */

.tabelle { width: 100%; border-collapse: collapse; font-size: .93rem; }

.tabelle th, .tabelle td {
  text-align: left; padding: .65rem .8rem;
  border-bottom: 1px solid var(--rand);
}

.tabelle th {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-zart); font-weight: 700;
}

.tabelle tbody tr { transition: background var(--schnell) var(--kurve); }
.tabelle tbody tr:hover { background: var(--flaeche); }
.tabelle td.zahl, .tabelle th.zahl { text-align: right; }

.rollbar { overflow-x: auto; }

.punkt {
  display: inline-block; width: 9px; height: 9px;
  border-radius: 50%; margin-right: .45rem;
}

.zahlenreihe {
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
}

.zahlkasten { margin: 0; }

.grosse-zahl {
  font-size: 2rem; font-weight: 800; letter-spacing: -.04em; line-height: 1.12;
}

/* --- Textbausteine --- */

.kasten {
  background: var(--karte); border-radius: var(--r-m);
  padding: 1.6rem 1.8rem; margin-bottom: 1.3rem;
  box-shadow: var(--schatten-1), var(--kante);
}

.kasten.warnung { background: var(--akzent-zart); }
.kasten.fehler  { background: var(--rot-zart); }
.kasten.gut     { background: var(--akzent-zart); }

/* Rechtstexte werden auf 72 Zeichen begrenzt und mittig gestellt. Links
   ausgerichtet klebte auf 1440 Pixeln die halbe Seite leer daneben - das
   sah aus, als fehlte rechts ein Bauteil.

   Und sie stehen jetzt auf einer KARTE. Vorher lag der Text nackt auf dem
   Seitenhintergrund, während auf jeder anderen Seite alles in weißen Karten
   sitzt: Impressum, Datenschutz und Partnerlinks sahen dadurch nicht wie
   Seiten aus, sondern wie angehängtes Beiwerk. Genau diese drei Seiten liest
   jemand, der prüfen will, ob man dem Anbieter trauen kann. */
.textseite {
  max-width: 50rem; margin-inline: auto;
  background: var(--karte);
  border-radius: var(--r-l);
  padding: clamp(1.5rem, 1rem + 2.4vw, 3.2rem);
  box-shadow: var(--schatten-2), var(--kante);
}

/* Feine Trennlinie über jedem Abschnitt: Rechtstexte sind lange Textwüsten,
   und ohne Gliederung findet niemand die Stelle, die er sucht. */
.textseite h2 {
  margin-top: 2.6rem; padding-top: 1.6rem;
  border-top: 1px solid var(--rand);
}

.textseite > h1 + p,
.textseite > h1 + .kasten { margin-top: 1.2rem; }
.textseite li { margin-bottom: .45rem; }
.textseite ol, .textseite ul { padding-left: 1.3rem; }

/* Der Kasten liegt hier auf einer Karte, nicht auf dem Seitengrund - ein
   zweiter Schatten darauf sähe wie ein Fehler aus. */
.textseite .kasten { box-shadow: none; background: var(--akzent-zart); }

@media all {
  .textseite .kasten.warnung { box-shadow: inset 0 0 0 1px rgba(240,172,46,.22); }
}

/* Zeilenlängen begrenzen - 180 Zeichen liest niemand gern. */
.kasten p, .hinweisband p, .block-kopf p { max-width: 78ch; }

.platzhalter {
  background: repeating-linear-gradient(45deg, transparent, transparent 8px,
              rgba(224,150,18,.1) 8px, rgba(224,150,18,.1) 16px);
  border: 1px dashed var(--akzent); border-radius: var(--r-s);
  padding: .85rem 1.05rem; margin: .65rem 0; font-size: .9rem;
}

/* --------------------------------------------------- 12. Fußbereich */

.fuss {
  background: var(--tinte); color: rgba(255,255,255,.7);
  margin-top: 4.5rem;
}

.fuss-innen {
  display: grid; gap: 2.2rem; padding: 3rem 0 2.4rem;
  grid-template-columns: minmax(0, 2.2fr) repeat(2, minmax(0, 1fr));
}

@media (max-width: 760px) { .fuss-innen { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .fuss-innen { grid-template-columns: 1fr; } }

.fuss-text > .marke { margin-bottom: .9rem; }
.fuss-innen .klein { color: rgba(255,255,255,.56); }
.fuss-spalte { display: flex; flex-direction: column; gap: .1rem; }

.fuss-spalte a {
  color: rgba(255,255,255,.72); text-decoration: none; font-size: .92rem;
  padding: .55rem 0; min-height: 44px; display: flex; align-items: center;
  transition: color var(--schnell) var(--kurve);
}

.fuss-spalte a:hover { color: var(--akzent-hell); }

.fuss-spalte .klein {
  color: #fff; font-weight: 700; margin-bottom: .4rem;
  font-size: .73rem; text-transform: uppercase; letter-spacing: .1em;
}

.fuss-schluss {
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 1.2rem 0 1.6rem;
  font-size: .82rem; color: rgba(255,255,255,.55);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}

/* ------------------------------------------------------ 13. Bewegung */

/* Eine ANIMATION, kein Übergang: Ein zweites `transition` an derselben Karte
   würde deren eigenen Übergang ersetzen - das Anheben beim Darüberfahren
   dauerte sonst 0,45 statt 0,3 Sekunden und der Schatten spränge hart.
   Das Skript nimmt die Klassen nach `animationend` wieder ab, sonst hielte
   der letzte Bildschritt die Karte fest.

   Ausgeblendet wird NUR, wenn das Skript `bewegung` an <html> gesetzt hat.
   Ohne JavaScript ist die Seite vollständig sichtbar. */
.bewegung .einblenden { opacity: 0; }

.bewegung .einblenden.sichtbar {
  animation: hereinblenden .45s var(--kurve-ein) both;
}

@keyframes hereinblenden {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.bewegung .gitter > *:nth-child(2) { animation-delay: .05s; }
.bewegung .gitter > *:nth-child(3) { animation-delay: .1s; }
.bewegung .gitter > *:nth-child(4) { animation-delay: .15s; }
.bewegung .gitter > *:nth-child(5) { animation-delay: .2s; }
.bewegung .spartenkacheln > *:nth-child(2) { animation-delay: .05s; }
.bewegung .spartenkacheln > *:nth-child(3) { animation-delay: .1s; }
.bewegung .spartenkacheln > *:nth-child(4) { animation-delay: .15s; }
.bewegung .spartenkacheln > *:nth-child(5) { animation-delay: .2s; }
.bewegung .spartenkacheln > *:nth-child(6) { animation-delay: .25s; }

/* Bewegung ist für manche Menschen ein Gesundheitsthema, kein Geschmack:
   Bei Gleichgewichtsstörungen kann sie Übelkeit auslösen. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .bewegung .einblenden,
  .bewegung .einblenden.sichtbar { opacity: 1; animation: none; }
  .hero::before, .hero::after { animation: none; }
}

/* ================================================== 14. Premium-Ausbau ====

   Dieser Abschnitt hebt die Seite von "sauber gebaut" auf "sieht nach einem
   bezahlten Auftritt aus". Er steht bewusst am Stück und NACH den
   Grundabschnitten, damit man ihn im Ganzen lesen kann; die Mobil-Regeln
   folgen danach und behalten das letzte Wort.

   Die drei Hebel, in dieser Reihenfolge:
     1. Rangfolge  - Preis vor Knopf, Nachlass vor Nebensache, ein Block
                     sichtbar wichtiger als die anderen.
     2. Weißraum   - fünf Abstandsstufen statt zwanzig Einzelwerten.
     3. Zurückhaltung - eine Farbe, eine Kantenstärke, ein Radius je Rang.
   ========================================================================== */

/* --------------------------------------------- 14.1 Abschnittsrhythmus --- */

/* Alle Abschnitte atmen im selben Takt. Vorher: 3rem hier, 2,6rem dort,
   1,4rem an der Produktseite - untereinander sah das nach Zufall aus. */
.block          { margin-top: var(--raum-5); }
.block-kopf     { margin-bottom: var(--raum-3); align-items: baseline; }
.inhalt > h2    { margin-top: var(--raum-5); }
.inhalt         { padding: var(--raum-4) 0 var(--raum-5); }

/* Ein Blockkopf besteht aus Überschrift, Erklärung und Weiterführung. Die
   Erklärung darf nicht so lang werden, dass sie unter den "Alle ansehen"-Knopf
   läuft - 62 Zeichen sind knapp zwei ruhige Zeilen. */
.block-kopf > div:first-child { min-width: 0; }
.block-kopf p                 { max-width: 62ch; margin: .35rem 0 0; }

.mehr { font-weight: 620; letter-spacing: -.01em; }

/* Mit der auf 1320 Pixel verbreiterten Hülle legte `auto-fill` bei 236 Pixeln
   Mindestbreite plötzlich FÜNF Spalten an - fünf schmale Kacheln über den
   Angebotsblöcken, während die Deals-Bühne darüber vier zeigte. Zwei
   verschiedene Rastermaße auf einer Seite lesen sich als Zufall.
   Ab 1200 Pixeln gilt deshalb: vier Spalten, Punkt. */
@media (min-width: 1200px) {
  .gitter { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ------------------------------------------------ 14.2 Die Deals-Bühne --- */

/* Der wichtigste Block der Startseite bekommt eine eigene Fläche.

   ABWÄGUNG: Naheliegend wäre gewesen, ihn knallig zu machen - roter Grund,
   große Prozentzahlen, "SALE". Das ist genau die Optik, die eine Seite billig
   aussehen lässt. Stattdessen hebt ihn eine ruhige, leicht angewärmte Platte
   mit einer feinen Goldkante ab: Er ist erkennbar anders als die Blöcke
   darunter, ohne lauter zu sein. Die Aufmerksamkeit holt sich nicht die
   Fläche, sondern die erste, doppelt große Kachel. */
.deals-block {
  position: relative; overflow: hidden;
  margin-top: var(--raum-4);
  padding: clamp(1.5rem, 1rem + 2vw, 2.6rem)
           clamp(1.1rem, .7rem + 1.6vw, 2.2rem)
           clamp(1.6rem, 1rem + 2vw, 2.6rem);
  border-radius: var(--r-xl);
  background:
    radial-gradient(105% 130% at 6% 0%, rgba(240,172,46,.16), transparent 55%),
    linear-gradient(180deg, var(--karte) 0%, var(--flaeche) 100%);
  box-shadow: var(--schatten-2), var(--kante);
}

/* Die Goldkante läuft nach rechts aus. Ein durchgehender Balken über die
   ganze Breite wirkt wie eine Warnleiste; ein auslaufender wirkt wie eine
   Auszeichnung. */
.deals-block::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg,
              var(--akzent-tief) 0%, var(--akzent-hell) 32%, rgba(224,150,18,0) 78%);
}

@media all {
  .deals-block {
    background:
      radial-gradient(105% 130% at 6% 0%, rgba(240,172,46,.11), transparent 55%),
      linear-gradient(180deg, var(--karte) 0%, var(--flaeche-2) 100%);
  }
}

.deals-block .block-kopf { margin-bottom: var(--raum-3); }

.deals-block h2 {
  font-size: clamp(1.45rem, 1.15rem + 1.1vw, 2.05rem);
  letter-spacing: -.032em;
}

/* --- Das Raster: eine Hauptkachel, dann die Reihe ------------------------

   Redaktionelles Muster statt gleichförmiger Reihe: Die erste Kachel nimmt
   zwei Spalten und zwei Zeilen, die letzte legt sich quer. Das ist kein
   Selbstzweck - es füllt das Raster exakt auf. Nachgerechnet für die acht
   Angebote, die die Startseite liefert:
     vier Spalten: 2x2 (=4) + sechs einfache (=6) + eine doppelte (=2) = 12
                   also genau drei volle Zeilen, keine Lücke.
     drei Spalten: 4 + 6 + 2 = 12 = vier volle Zeilen.
   Ohne diese Regel klaffte in der letzten Zeile ein leeres Feld, und ein
   leeres Feld im Raster liest sich wie ein Ladefehler. */

.deals-gitter { gap: clamp(.85rem, .5rem + 1vw, 1.35rem); }

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

@media (min-width: 760px) and (max-width: 1079px) {
  .deals-gitter { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 760px) {
  /* `:has(> :nth-child(8))` ist die Sicherung: Das Sondermuster geht nur
     dann auf, wenn wirklich acht Angebote da sind (siehe Rechnung oben).
     Liefert die Abfrage einmal weniger, fällt der Block auf ein gewöhnliches
     gleichmäßiges Raster zurück statt eine Lücke aufzureißen. */
  .deals-gitter:has(> :nth-child(8)) > .kachel:first-child { grid-column: span 2; grid-row: span 2; }

  /* Die Hauptkachel: das Bild bekommt die zusätzliche Höhe, nicht der Text.
     Sonst stünden unter dem Preis 200 Pixel Leere. */
  .deals-gitter:has(> :nth-child(8)) > .kachel:first-child > .kachel-bildbereich {
    flex: 1; display: flex; min-height: 300px;
  }
  /* NACHGEMESSEN: Bildfläche und Textfläche tragen beide `flex: 1` und
     teilten sich die zusätzliche Höhe der doppelten Kachel je zur Hälfte -
     614x495 für das Bild, 541 Pixel für den Text. Zwischen Modellnummer und
     Preis klaffte dadurch ein Loch von rund 300 Pixeln. Der Text wird deshalb
     auf seine Inhaltshöhe festgesetzt; die freie Höhe bekommt das Bild. */
  .deals-gitter:has(> :nth-child(8)) > .kachel:first-child > .kachel-text { flex: 0 0 auto; }
  .deals-gitter:has(> :nth-child(8)) > .kachel:first-child .kachel-bild {
    aspect-ratio: auto; height: 100%; width: 100%; flex: 1;
    padding: clamp(1rem, .5rem + 1.5vw, 2rem);
  }
  .deals-gitter:has(> :nth-child(8)) > .kachel:first-child .kachel-text {
    padding: 1.35rem clamp(1.2rem, .8rem + 1vw, 1.7rem) 1.5rem;
  }
  .deals-gitter:has(> :nth-child(8)) > .kachel:first-child .kachel-titel {
    font-size: 1.25rem; line-height: 1.28;
  }
  .deals-gitter:has(> :nth-child(8)) > .kachel:first-child .preis     { font-size: 2.15rem; }
  .deals-gitter:has(> :nth-child(8)) > .kachel:first-child .uvp       { font-size: 1.05rem; }
  .deals-gitter:has(> :nth-child(8)) > .kachel:first-child .sparzeile { font-size: .95rem; }
  .deals-gitter:has(> :nth-child(8)) > .kachel:first-child .marker.rabatt {
    font-size: 1.02rem; padding: .42rem .95rem; font-weight: 800;
  }
  .deals-gitter:has(> :nth-child(8)) > .kachel:first-child .kachel-knopf {
    font-size: 1rem; padding: .8rem 1.2rem;
  }

  /* Die achte Kachel schließt die letzte Zeile. Quer gelegt, damit die
     doppelte Breite nicht zu einem überdehnten Hochformat führt. */
  .deals-gitter > .kachel:nth-child(8):last-child {
    grid-column: span 2; flex-direction: row; align-items: stretch;
  }
  .deals-gitter > .kachel:nth-child(8):last-child > .kachel-bildbereich {
    flex: 0 0 40%; display: flex;
  }
  .deals-gitter > .kachel:nth-child(8):last-child .kachel-bild {
    aspect-ratio: auto; height: 100%; width: 100%; flex: 1; min-height: 190px;
  }
  .deals-gitter > .kachel:nth-child(8):last-child > .kachel-text {
    flex: 1; min-width: 0;
  }
}

/* --------------------------------------------- 14.3 Produktkachel fein --- */

.kachel { border-radius: var(--r-l); }

/* Die Bildplatte trägt einen kaum sichtbaren Verlauf und eine Haarlinie zum
   Text hin. Beides zusammen macht aus "Bild oben, Text unten" zwei bewusst
   getrennte Bereiche - vorher liefen sie ineinander. */
.kachel-bildbereich {
  background: #fdfcfa;
  box-shadow: inset 0 -1px 0 rgba(22,25,31,.07);
}

/* WEISSES PRODUKTFOTO AUF GETÖNTER PLATTE.

   Die Fotos aus dem Feed sind auf Weiß freigestellt. Auf der getönten Platte
   (#f0eee8) stand deshalb in jeder Kachel ein sichtbar helleres Rechteck; die
   Karten sahen aus, als sei das Bild noch nicht fertig geladen.

   Naheliegend wäre `mix-blend-mode: multiply` am Bild - der übliche Kniff, um
   Weiß in den Untergrund zu schmelzen. Er ist hier bewusst NICHT eingesetzt:
   Ein Mischmodus zwingt jedes einzelne Produktbild in eine eigene
   Zeichenebene, und auf dieser Seite liegen bis zu 24 davon gleichzeitig im
   Raster. Der Gewinn wäre ein weggerechneter Bildrand, der Preis eine
   spürbar teurere Zeichenlast auf schwachen Geräten.

   Die ruhige Lösung kostet nichts: Die Platte wird selbst fast weiß. Der Rand
   des Fotos verschwindet, weil es nichts mehr gibt, wogegen er absticht.
   Getrennt wird der Bildbereich vom Text durch die Haarlinie darunter, nicht
   durch einen Helligkeitssprung. */

/* Im Dunkeln bleibt die Platte HELL - und das ist eine bewusste Entscheidung,
   keine Nachlässigkeit: Die Produktfotos aus dem Feed sind auf Weiß
   freigestellt. Auf dunklem Grund stand deshalb in jeder Kachel ein weißes
   Rechteck, das aussah, als sei das Bild nicht fertig geladen. Eine
   durchgehend helle Platte macht daraus eine Absicht.
   Ausgenommen sind die Strichzeichnungen: die werden im Dunkelmodus
   umgekehrt und wären auf hellem Grund unsichtbar. */
@media all {
  .kachel-bildbereich:not(.ist-zeichnung) {
    background: #faf9f6;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.2);
  }
}

.kachel-text { padding: 1.05rem 1.15rem 1.2rem; gap: 0; }

/* Marke als Kapitälchen-Etikett - der Rang, den ein Markenname verdient:
   erkennbar, aber nie lauter als der Produktname darunter. */
.kachel-marke {
  font-size: .7rem; letter-spacing: .11em; font-weight: 700;
  color: var(--text-zart); margin-bottom: .3rem;
}

.kachel-titel { font-weight: 660; letter-spacing: -.014em; }

.modellnummer { font-size: .75rem; color: var(--text-zart); }

.shopzahl {
  font-size: .78rem; font-weight: 560; color: var(--text-leise);
  margin-top: .55rem;
}

/* Der Knopf steht ganz unten und braucht deshalb Abstand zu den Preisdaten,
   sonst kleben Ersparnis und Aufforderung aneinander. */
.kachel-fuss  { padding-top: .65rem; }
.kachel-knopf { margin-top: .9rem; border-radius: var(--r-s); }

/* ------------------------------------- 14.4 Preisbox der Produktseite --- */

/* Die alte Fassung war ein blassgelber Kasten. Gelbe Kästen bedeuten im Web
   "Achtung", nicht "hier ist dein Preis" - der wichtigste Teil der Seite las
   sich wie ein Warnhinweis. Jetzt ist es eine eigenständige Karte mit
   goldener Oberkante, in der Preis, Ersparnis, Versandangabe und Kaufknopf
   in genau dieser Reihenfolge stehen. */
.preisbox {
  position: relative; overflow: hidden;
  margin: var(--raum-3) 0 var(--raum-2);
  padding: clamp(1.15rem, .8rem + 1.1vw, 1.6rem);
  border-radius: var(--r-l);
  background:
    radial-gradient(120% 150% at 100% 0%, rgba(240,172,46,.13), transparent 60%),
    var(--karte);
  box-shadow: var(--schatten-2), inset 0 0 0 1px rgba(189,122,6,.16);
}

.preisbox::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg,
              var(--akzent-tief), var(--akzent-hell) 45%, rgba(224,150,18,0) 92%);
}

.preisbox-etikett {
  font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-leise);
  margin-bottom: .45rem;
}

.preisbox-zahlen { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; }

.preisbox-preis {
  font-size: clamp(2.1rem, 1.55rem + 1.9vw, 3rem);
  font-weight: 800; letter-spacing: -.045em; line-height: 1.02;
  color: var(--text); font-variant-numeric: tabular-nums;
}

.preisbox-sparen {
  margin-top: .5rem; font-size: .95rem; font-weight: 600;
  color: var(--text-leise);
}

.preisbox-sparen strong {
  color: var(--akzent-text); font-weight: 800;
  font-variant-numeric: tabular-nums; letter-spacing: -.015em;
}

/* Die Fakten unter dem Preis: Händler, Versand, Lieferbarkeit. Als Liste mit
   Trennpunkten statt als Fließtext - man erfasst drei kurze Angaben deutlich
   schneller als einen Satz mit drei Kommas. */
.preisbox-fakten {
  list-style: none; margin: .8rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .3rem .9rem;
  font-size: .88rem; color: var(--text-leise); line-height: 1.5;
}

/* `gap` ist hier Pflicht, kein Feinschliff: In einem Flex-Kasten fallen die
   Leerzeichen zwischen den Kindern weg. Ohne diese Zeile stand in der Ansicht
   "beibabymarkt DE" statt "bei babymarkt DE" - nachgemessen im Bildschirmfoto,
   nicht vermutet. */
.preisbox-fakten li { display: inline-flex; align-items: center; gap: .32em; }

.preisbox-fakten li + li::before {
  content: ""; width: 3px; height: 3px; border-radius: 50%;
  background: var(--rand-stark); margin-right: .55rem; flex-shrink: 0;
}

.preisbox-fakten strong { color: var(--text); font-weight: 680; }

/* Kaufknopf über die volle Breite der Box. Auf einer Produktseite gibt es
   genau einen Hauptweg, und der darf nicht wie ein Knopf unter mehreren
   aussehen. */
.preisbox-kauf { display: block; margin-top: 1.1rem; }
.preisbox-kauf .zum-shop { display: flex; width: 100%; text-align: center; }

.preisbox-fuss {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin-top: .7rem;
}

.preisbox-fuss .klein { margin: 0; flex: 1 1 14rem; min-width: 0; }

@media all {
  .preisbox { box-shadow: var(--schatten-2), inset 0 0 0 1px rgba(240,172,46,.24); }
}

/* Ohne Händlerangebot: derselbe Aufbau, aber ohne Gold. Gold heißt auf dieser
   Seite "hier kaufst du" - wo es nichts zu kaufen gibt, wäre es ein
   Versprechen ins Leere. */
/* Zwei Klassen im Selektor, weil `.kasten.warnung` im HTML ebenfalls zwei
   trägt und sonst gewinnt - im Bildschirmfoto war der Kasten weiterhin
   goldgetönt. */
.kasten.ohne-preis-kasten {
  margin: var(--raum-3) 0 var(--raum-2);
  background: var(--flaeche-2);
  box-shadow: inset 0 0 0 1px var(--rand);
  border-radius: var(--r-l);
}

.kasten.ohne-preis-kasten strong {
  display: block; margin-bottom: .3rem;
  font-size: 1.02rem; letter-spacing: -.015em;
}

@media all {
  .kasten.ohne-preis-kasten { box-shadow: var(--kante); }
}

/* --- Produktseite: Bild und Beschreibung ------------------------------- */

/* Die Bildspalte war mit 5fr zu 7fr die schmalere. Bei einem Produkt, das man
   vor dem Kauf ansehen will, gehört dem Bild mindestens die Hälfte. */
@media (min-width: 981px) {
  .produkt-kopf { grid-template-columns: 6fr 7fr; gap: clamp(2rem, 1rem + 2.4vw, 3.2rem); }
}

.produkt-bildrahmen {
  border-radius: var(--r-l);
  background: #fdfcfa;
  box-shadow: inset 0 0 0 1px rgba(22,25,31,.07);
}

@media all {
  .produkt-bildrahmen:not(.ist-zeichnung) {
    background: #faf9f6;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
  }
}

.produkt-bild { padding: clamp(.9rem, .5rem + 1.1vw, 1.5rem); }

.produkt-kopf h1 { font-size: clamp(1.55rem, 1.15rem + 1.6vw, 2.3rem); }

/* Der Beschreibungstext lag bisher IN der rechten Spalte. Unter der Bildspalte
   blieben dadurch gemessene 200 Pixel leere Karte stehen - die halbe untere
   Kartenhälfte war weiß. Jetzt läuft er über beide Spalten und schließt die
   Karte unten sauber ab. */
.produkt-beschreibung {
  grid-column: 1 / -1;
  margin-top: var(--raum-2);
  padding-top: var(--raum-3);
  border-top: 1px solid var(--rand);
}

.produkt-beschreibung .beschreibung {
  margin: 0; padding: 0; border: 0;
}

/* Der Beschreibungstext kommt aus dem Händlerfeed und bringt HTML-Reste mit
   ("&nbsp;", "h&ouml;henverstellbar"). Repariert wird das hier NICHT - das
   gehört in die Feed-Verarbeitung. Was die Gestaltung tun kann, ist ihn
   lesbar zu halten: begrenzte Zeilenlänge, ruhige Zeilenhöhe, und ein
   Umbruch, der auch an einem 30 Zeichen langen Wortungetüm nicht aus der
   Karte läuft. Zusätzlich eine feine Trennlinie nach oben, damit der Fließtext
   nicht am Kleingedruckten über ihm klebt. */
.beschreibung {
  margin-top: var(--raum-3);
  padding-top: var(--raum-3);
  border-top: 1px solid var(--rand);
  max-width: 66ch;
  font-size: 1rem; line-height: 1.78;
  color: var(--text-leise);
  hyphens: auto; overflow-wrap: anywhere;
}

/* ----------------------------------------- 14.5 Kategorieseite (Bühne) --- */

/* Die Bühne trug bisher alles in einem Kasten: Überschrift, acht
   Bereichskarten, zwölf Markenlinks und vier Filterknöpfe - ohne Trennung
   dazwischen. Bei 1288 Produkten in "Spielzeug & Spiele" ist das die
   wichtigste Einstiegsseite der ganzen Sparte, und sie sah aus wie ein
   Formular. Jetzt bekommt jede Gruppe eine eigene Zone. */
.bühne { padding: clamp(1.5rem, 1rem + 2vw, 2.4rem); border-radius: var(--r-xl); }
.bühne h1 { font-size: clamp(1.7rem, 1.25rem + 1.9vw, 2.5rem); }
.bühne p  { margin-bottom: var(--raum-3); font-size: 1.02rem; max-width: 62ch; }

/* Bereichskarten: die Zahl ist die Information, nach der jemand sucht
   ("wie viel gibt es da?"), der Preis die zweite. Beide standen vorher in
   einer grauen Zeile gleichrangig nebeneinander. */
.bereiche { gap: .7rem; }

.bereich {
  padding: .95rem 1.05rem;
  border-radius: var(--r-m);
  box-shadow: var(--schatten-1), inset 0 0 0 1px var(--rand);
  font-weight: 640; letter-spacing: -.012em;
  line-height: 1.3;
}

.bereich .klein {
  display: block; margin-top: .3rem;
  font-weight: 500; color: var(--text-leise);
  font-variant-numeric: tabular-nums;
}

.bereich strong {
  color: var(--text); font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Ein Winkel rechts oben sagt "das hier führt weiter". Ohne ihn sahen die
   Bereichskarten aus wie beschriftete Felder, nicht wie Links - im
   Bildschirmfoto war ihnen nicht anzusehen, dass sie anklickbar sind. */
.bereich { position: relative; padding-right: 2.2rem; }

.bereich::after {
  content: ""; position: absolute; right: 1.05rem; top: 1.15rem;
  width: 7px; height: 7px;
  border-right: 2px solid var(--rand-stark);
  border-top: 2px solid var(--rand-stark);
  transform: rotate(45deg);
}

.bereich:hover { box-shadow: var(--schatten-2), inset 0 0 0 1px var(--rand-stark); }
.bereich:hover::after { border-color: var(--akzent-text); }

@media all {
  .bereich:hover::after { border-color: var(--akzent); }
}

/* Marken und Schnellfilter sind ZWEI verschiedene Dinge und sahen vorher
   gleich aus: beide weiße Pillen mit feinem Rand. Marken sind eine lange,
   ruhige Aufzählung; Schnellfilter sind vier Handlungen. Also bekommen die
   Marken die leichte, randlose Form auf getöntem Grund und die Filter die
   feste Knopfform. Dazwischen liegt jetzt eine Trennlinie. */
.markenzeile {
  margin-top: var(--raum-3); padding-top: var(--raum-3);
  border-top: 1px solid var(--rand);
  gap: .45rem; align-items: center;
}

.markenzeile > .klein {
  font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-zart);
  margin-right: .3rem;
}

.markenlink {
  padding: .48rem .95rem; min-height: 36px;
  display: inline-flex; align-items: center;
  background: var(--flaeche-2); box-shadow: none;
  border-radius: var(--r-pill);
  font-size: .87rem; font-weight: 600; color: var(--text);
  transition: background var(--schnell) var(--kurve),
              color var(--schnell) var(--kurve);
}

.markenlink:hover {
  background: var(--akzent-zart); color: var(--akzent-text);
  box-shadow: none; transform: none;
}

@media all {
  .markenlink:hover { color: var(--akzent-tief); }
}

.schnellfilter {
  margin-top: var(--raum-3); padding-top: var(--raum-3);
  border-top: 1px solid var(--rand);
  gap: .55rem;
}

/* Der erste Schnellfilter ist der Hauptweg ("Alle Angebote") und trägt
   deshalb die dunkle Fläche - nicht Gold: Gold bleibt dem Kaufweg
   vorbehalten. */
.schnellfilter > .knopf:first-child {
  background: var(--tinte); color: #fff; border-color: transparent;
  box-shadow: var(--schatten-2);
}
.schnellfilter > .knopf:first-child:hover { background: var(--tinte-2); }

@media all {
  .schnellfilter > .knopf:first-child {
    background: var(--akzent); color: #16191f;
    box-shadow: var(--schatten-akzent);
  }
  .schnellfilter > .knopf:first-child:hover { background: var(--akzent-tief); }
}

.in-arbeit { margin-top: var(--raum-3); }

/* ------------------------------------------------ 14.6 Leerer Zustand --- */

/* Eine Sparte ohne Produkte ist kein Fehler, sondern ein Bereich, der noch
   nicht angebunden ist. Entsprechend sieht er aus: keine Warnfarbe, kein
   Ausrufezeichen, sondern eine ruhige, mittige Karte mit einem großen
   Sinnbild - und darunter die Wege dorthin, wo es etwas zu holen gibt.
   Die Weiterführung ist der eigentliche Zweck der Seite; ohne sie wäre sie
   eine Sackgasse mit netten Worten. */
.leerer-bereich {
  position: relative; overflow: hidden;
  margin-top: var(--raum-5);
  padding: clamp(2.4rem, 1.6rem + 3vw, 4rem) clamp(1.3rem, .8rem + 2vw, 3rem);
  text-align: center;
  border-radius: var(--r-xl);
  background:
    radial-gradient(90% 120% at 50% 0%, rgba(240,172,46,.11), transparent 62%),
    var(--karte);
  box-shadow: var(--schatten-2), var(--kante);
}

.leer-sinnbild {
  display: grid; place-items: center;
  width: 88px; height: 88px; margin: 0 auto var(--raum-2);
  border-radius: 26px;
  background: var(--akzent-zart);
  color: var(--akzent-text);
  box-shadow: inset 0 0 0 1px rgba(189,122,6,.18);
}

.leer-sinnbild svg { width: 46px; height: 46px; display: block; }

@media all {
  .leer-sinnbild {
    color: var(--akzent);
    box-shadow: inset 0 0 0 1px rgba(240,172,46,.28);
  }
}

.leerer-bereich h2 {
  font-size: clamp(1.3rem, 1.05rem + 1vw, 1.75rem);
  margin-bottom: .6rem;
}

.leerer-bereich > p {
  max-width: 52ch; margin: 0 auto;
  color: var(--text-leise); font-size: 1.02rem; line-height: 1.65;
}

/* Die Wege hinaus. Eine feine Linie darüber trennt "warum hier nichts steht"
   von "wo etwas steht" - ohne sie liest sich beides als ein Absatz. */
.leer-wege {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem;
  margin: var(--raum-3) auto 0; padding-top: var(--raum-3);
  max-width: 46rem;
  border-top: 1px solid var(--rand);
}

.leer-wege .knopf { font-size: .92rem; }

/* Die Produktzahl neben dem Spartennamen: der Grund, warum man dorthin
   wechseln soll. Als eigene Pille abgesetzt statt als graue Beischrift. */
.leer-wege .knopf .klein {
  font-size: .74rem; font-weight: 700;
  color: var(--text-leise); background: var(--flaeche-2);
  padding: .1rem .45rem; border-radius: var(--r-pill);
  font-variant-numeric: tabular-nums;
}

/* ----------------------------------------- 14.7 Kopf, Suche, Navigation --- */

/* Der Kopf war links geballt: Marke, direkt daneben das Suchfeld, und rechts
   über 500 Pixel Leere. Ein Kopf, dessen rechte Hälfte leer ist, wirkt
   unfertig. Das Suchfeld wandert deshalb an den rechten Rand und wächst bis
   620 Pixel - Marke links, Werkzeug rechts, dazwischen Ruhe. */
.kopf-innen { gap: 1.25rem; padding: .95rem 0; }

.suchfeld { margin-left: auto; max-width: 620px; flex: 1 1 300px; }

.suchfeld:focus-within {
  box-shadow: 0 0 0 4px rgba(224,150,18,.18), var(--schatten-2);
}

.marke-text { font-size: 1.14rem; letter-spacing: -.032em; }

.marke-zeichen { border-radius: 12px; }

/* Die Spartenleiste bekommt Luft und eine ruhigere Zahl. Die Ziffern standen
   vorher im selben Grau wie der Name und lasen sich wie Teil des Namens
   ("Spielzeug & Spiele 1288"). */
.sparte { padding: .85rem 1rem .8rem; letter-spacing: -.012em; }

.sparte .anzahl {
  font-size: .7rem; font-weight: 650;
  color: var(--text-zart); font-variant-numeric: tabular-nums;
  margin-left: .3rem;
}

.sparte.aktiv .anzahl { color: var(--akzent-text); }

@media all { .sparte.aktiv .anzahl { color: var(--akzent); } }

/* Das Pflichtband bleibt inhaltlich unangetastet - es wird nur leiser
   gesetzt. Vorher nahm es auf 1440 Pixeln drei Zeilen direkt über dem Hero
   ein und war damit das Erste, was ins Auge fiel. */
.hinweisband { font-size: .82rem; }
.hinweis-innen { padding: .1rem 0; gap: .65rem; }

.hinweis-marke {
  font-size: .62rem; letter-spacing: .11em;
}

/* --------------------------------------------------- 14.8 Hero-Feinbau --- */

.hero h1 {
  font-size: clamp(1.85rem, 1.25rem + 2.6vw, 3.15rem);
  letter-spacing: -.038em; line-height: 1.08;
}

.hero-unterzeile { font-size: clamp(1rem, .95rem + .25vw, 1.12rem); line-height: 1.6; }

.vertrauen li { font-size: .9rem; font-weight: 550; color: var(--text-leise); }

/* -------------------------------------------------- 14.9 Fußbereich --- */

/* Eine Haarlinie in Gold über dem Fuß. Sie schließt die Seite ab, statt sie
   einfach in Schwarz enden zu lassen. */
.fuss { position: relative; }

.fuss::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg,
              rgba(224,150,18,0) 0%, var(--akzent-tief) 30%,
              var(--akzent-hell) 55%, rgba(224,150,18,0) 100%);
  opacity: .6;
}

.fuss-spalte .klein {
  font-size: .72rem; letter-spacing: .11em; text-transform: uppercase;
  color: rgba(255,255,255,.62); margin-bottom: .55rem;
}

.fuss-spalte a { padding: .34rem 0; letter-spacing: -.01em; }

/* --------------------------------------------- 14.10 Listenseite fein --- */

.filtertitel {
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-zart); font-weight: 700;
}

/* Die Filterspalte HATTE eine Karte - man sah sie nur nicht: weiße Fläche auf
   fast weißem Grund, dazu der leichteste der drei Schatten. Im Bildschirmfoto
   schwebten die Beschriftungen frei neben dem klar gefassten Kachelraster.
   Eine Haarlinie fasst sie ein, ohne sie schwer zu machen. */
.filterhuelle {
  border-radius: var(--r-l);
  box-shadow: var(--schatten-1), inset 0 0 0 1px var(--rand);
}

@media all {
  .filterhuelle { box-shadow: var(--schatten-1), var(--kante); }
}

/* Die Sortierung ist eine Bedienung, kein Fließtext. Als eigene, leicht
   getönte Zeile über den Ergebnissen liest sie sich als Werkzeug. */
.sortierzeile {
  margin-bottom: var(--raum-3);
  padding: .45rem .75rem;
  background: var(--flaeche-2); border-radius: var(--r-pill);
  gap: .6rem;
}

/* --text-zart kam auf der getönten Sortierleiste auf gemessene 4,12:1 und
   fiel damit knapp durch. --text-leise schafft dort 5,35:1. */
.sortierzeile > .klein {
  font-size: .74rem; letter-spacing: .09em; text-transform: uppercase;
  font-weight: 700; color: var(--text-leise);
}

.sortierzeile select {
  border-color: transparent; background: var(--karte);
  border-radius: var(--r-pill); font-weight: 600;
  padding-inline: .95rem;
}

.seitenzahl { font-variant-numeric: tabular-nums; }


/* ------------------------------------------------------- Mobil */

@media (max-width: 620px) {
  .inhalt { padding: 1.5rem 0 3rem; }

  /* Der klebende Kopf stand vorher in drei Zeilen: Marke, Suche,
     Spartenleiste - zusammen 164 Pixel. Auf einem 844 Pixel hohen Handy sind
     das 19 Prozent Bildschirm, die dauerhaft belegt sind.

     Jetzt trägt die erste Zeile Marke und Lupe, die Suche klappt darunter in
     voller Breite auf. Der Kopf bleibt dadurch so flach wie vorher, der
     Markenname bleibt aber lesbar - er verschwand vorher unter 500 Pixeln
     ganz, und das ist genau die Breite, mit der die meisten Besucher kommen. */
  .kopf-innen { padding: .55rem 0; gap: .6rem; flex-wrap: wrap; }
  .marke-zeichen { width: 36px; height: 36px; border-radius: 10px; font-size: 1.08rem; }

  /* Fingerfreundlich: Eingabefeld und Knopf waren 36,6 Pixel hoch. */
  .suchfeld { flex: 1 1 100%; max-width: none; }
  .suchfeld input, .suchfeld button { min-height: 44px; }
  .suchfeld button { padding: .55rem 1.05rem; }
  .marke { min-height: 44px; }

  /* Der Lupenknopf erscheint nur, wenn JavaScript läuft. Ohne JavaScript
     bliebe die Suche sonst hinter einem Knopf, der nichts tut - sie steht
     dann einfach sichtbar in der zweiten Zeile. */
  .js .such-schalter { display: inline-flex; }
  .js .kopf-innen:not(.suche-offen) .suchfeld { display: none; }
  .js .kopf-innen.suche-offen .suchfeld { animation: suche-auf .22s var(--kurve-ein) both; }

  @keyframes suche-auf {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .sparte { padding: .68rem .8rem .62rem; }

  .hero {
    border-radius: var(--r-l);
    padding: 1.9rem 1.25rem 1.75rem;
    margin-bottom: 1.75rem;
  }
  .hero-unterzeile { margin-bottom: 1.5rem; font-size: .96rem; }

  /* Kein Pillenradius mehr, sobald das Feld zweizeilig wird: Bei 111 Pixel
     Höhe rundet `999px` die Ecken mit 55 Pixeln ab - der Knopf darin ist nur
     46 Pixel hoch und lief sichtbar in die Rundung hinein. */
  .hero-suche {
    padding: .4rem .4rem .4rem 1rem; flex-wrap: wrap;
    border-radius: var(--r-l);
  }
  .hero-suche input { flex: 1 1 100%; padding: .6rem 0; min-height: 44px; }
  .hero-suche button { flex: 1 1 100%; padding: .75rem 1rem; min-height: 46px; }
  .vertrauen { gap: .45rem 1.2rem; margin-top: 1.35rem; }
  .vertrauen li { font-size: .85rem; }

  /* Zwei Kacheln nebeneinander: Vergleichen ist der Zweck der Seite.
     Untereinander sieht man immer nur ein Produkt. */
  .gitter { gap: .8rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gitter:has(> :nth-child(-n+3)):not(:has(> :nth-child(4))) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .kachel-text { padding: .8rem .85rem .95rem; }
  .kachel-titel { font-size: .89rem; hyphens: auto; }
  .preis { font-size: 1.2rem; }
  .kachel-bild { padding: .65rem; }
  .modellnummer, .preis-klein, .shopzahl { font-size: .74rem; }
  .kachel-knopf { padding: .55rem .7rem; font-size: .82rem; }
  .nur-breit-text  { display: none; }
  .nur-schmal-text { display: inline; }

  .spartenkacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
  .spartenkachel { padding: 1rem .95rem; }
  .spartenkachel-name { font-size: .9rem; }
  .spartenkachel-text { display: none; }
  .sparten-sinnbild { width: 38px; height: 38px; border-radius: 11px; margin-bottom: .5rem; }

  .bühne { padding: 1.3rem 1.15rem; }
  .kasten { padding: 1.2rem 1.25rem; }
  .block { margin-top: 2.25rem; }
  .produkt-kopf { padding: 1.1rem; }

  /* Untereinander gestellte Knöpfe müssen gleich breit sein. Auf 320 Pixeln
     stand "Zur Herstellerseite" auf 218 Pixeln, "Produktvideo ansehen" darunter
     auf 258 - zwei verschieden lange Balken sehen aus wie ein Fehler im
     Umbruch, nicht wie eine Gestaltung. */
  .knopfreihe > .knopf,
  .knopfreihe > .zum-shop { flex: 1 1 100%; justify-content: center; }
}

/* Der Markenname bleibt auf JEDER Breite stehen. Er wich früher unter 500
   Pixeln dem blossen Zeichen, um Platz für das Suchfeld zu schaffen - den
   Platz schafft jetzt der Lupenknopf, ohne den Kopf höher zu machen. */
@media (max-width: 380px) { .marke-text { font-size: 1rem; } }

@media (max-width: 359px) {
  /* Produktkacheln einspaltig - Preis und Knopf brauchen die Breite.
     Die Spartenkacheln bleiben zweispaltig: Auf ihnen steht auf dem Handy
     nur Sinnbild, Name und Anzahl, und sechs Karten untereinander sind ein
     unnötig langer Weg bis zu den Produkten. */
  .gitter { grid-template-columns: 1fr; }
  .gitter:has(> :nth-child(2)):not(:has(> :nth-child(3))),
  .gitter:has(> :nth-child(3)):not(:has(> :nth-child(4))) {
    grid-template-columns: 1fr; max-width: none;
  }
  /* Auf 320 Pixel bleiben dem Eingabefeld sonst keine 140 Pixel. */
  .suchfeld button { padding: .55rem .8rem; font-size: .88rem; }
}

/* ================================ 15. Premium-Ausbau, schmale Geräte ======

   Steht bewusst ganz am Ende: Diese Regeln müssen die aus Abschnitt 14
   überschreiben können, und bei gleicher Selektorstärke entscheidet die
   Reihenfolge in der Datei.
   ========================================================================== */

@media (max-width: 620px) {
  /* Die Deals-Bühne behält ihre Sonderstellung, verliert aber den breiten
     Rahmen - auf 390 Pixeln kosten 2,5 rem Innenabstand links und rechts
     zusammen ein Fünftel der Bildschirmbreite. */
  .deals-block {
    padding: 1.35rem .9rem 1.5rem;
    border-radius: var(--r-l);
    margin-top: var(--raum-3);
  }

  /* Auch auf dem Handy führt eine Hauptkachel den Block an - über die volle
     Breite, damit das Foto etwas hergibt. Und wieder schließt die achte
     Kachel die Zeile, sonst bliebe unten ein halbes Feld leer
     (2 + 6 + 2 = 10 Felder = fünf volle Zeilen). */
  .deals-gitter:has(> :nth-child(8)) > .kachel:first-child,
  .deals-gitter > .kachel:nth-child(8):last-child { grid-column: 1 / -1; }

  .deals-gitter:has(> :nth-child(8)) > .kachel:first-child .kachel-bild { aspect-ratio: 16 / 10; }
  .deals-gitter:has(> :nth-child(8)) > .kachel:first-child .preis       { font-size: 1.75rem; }
  .deals-gitter:has(> :nth-child(8)) > .kachel:first-child .kachel-titel{ font-size: 1.05rem; }
  .deals-gitter:has(> :nth-child(8)) > .kachel:first-child .kachel-text { padding: 1rem 1.05rem 1.15rem; }

  /* Der "Alle ansehen"-Knopf stand im Umbruch allein in einer Zeile und sah
     dort aus wie ein vergessener Bedienknopf. Als flache Pille direkt unter
     der Erklärung liest er sich wieder als Weiterführung. */
  .block-kopf { gap: .65rem; }
  /* 44 Pixel, keine 40: Nachgemessen fiel die Pille sonst unter die
     Mindestgröße für eine Fingerfläche. */
  .mehr { align-self: flex-start; min-height: 44px; padding: .5rem .95rem; font-size: .85rem; }

  /* Fingerflächen: gemessen waren die Markenpillen 36 Pixel hoch. */
  .markenlink { min-height: 44px; padding: .6rem 1rem; }
  .bereich    { padding: .85rem .95rem; }

  .preisbox { padding: 1.1rem 1rem 1.2rem; border-radius: var(--r-l); }
  /* Auf 390 Pixeln lief das Etikett über zwei Zeilen und wirkte durch die
     weite Sperrung schwerer als der Preis darunter. */
  .preisbox-etikett { font-size: .68rem; letter-spacing: .075em; }
  /* Auf 390 Pixeln passen Haendler, Versand und Lieferbarkeit nicht in eine
     Zeile. Beim Umbruch rutschte der Trennpunkt, der zum VORHERIGEN Eintrag
     gehoert, an den ANFANG der neuen Zeile - im Bildschirmfoto stand dort
     "· 45,49 € versandkostenfrei · lieferbar", ein Aufzaehlungszeichen ohne
     Aufzaehlung. Untereinander braucht es die Punkte gar nicht: Jede Angabe
     steht dann ohnehin fuer sich. */
  .preisbox-fakten {
    display: grid; gap: .3rem;
    justify-items: start;
  }
  .preisbox-fakten li + li::before { display: none; }

  .leerer-bereich { padding: 2.2rem 1.1rem 2.4rem; border-radius: var(--r-l); }
  .leer-sinnbild  { width: 72px; height: 72px; border-radius: 22px; }
  .leer-sinnbild svg { width: 38px; height: 38px; }
  .leer-wege .knopf { flex: 1 1 100%; justify-content: center; }

  .beschreibung { font-size: .96rem; line-height: 1.72; }

  /* Die Brotkrumen sind eine NAVIGATION, kein Link im Fliesstext - die
     Ausnahme fuer Inline-Links gilt hier also nicht. Gemessen waren sie 21
     Pixel hoch und lagen damit unter den 24 Pixeln, die WCAG 2.5.8 fuer ein
     Bedienziel verlangt. Die Zeile waechst dadurch von 21 auf 44 Pixel; das
     ist der Platz, den ein Daumen braucht. */
  .brotkrumen a {
    display: inline-flex; align-items: center;
    min-height: 44px; padding-inline: .15rem;
  }
  .brotkrumen { margin-bottom: .7rem; }

  /* Im Browser nachgemessen: Auf 375 Pixeln ist die Bildflaeche einer Kachel
     137 x 91 Pixel gross, dem Abzeichenband bleiben davon 121 Pixel Breite.
     "-41 %" (55) plus Abstand plus "Tiefpreis" (67) ergeben 127 - eine Spur
     zu viel. Durch `flex-wrap: wrap` rutschte "Tiefpreis" in eine zweite
     Zeile und landete auf halber Hoehe MITTEN AUF DEM PRODUKT. Genau das
     soll nicht passieren: das Produkt gehoert ins Licht, nicht unter ein
     Schild.

     Deshalb hier eine Zeile ohne Umbruch und knapper geschnittene Abzeichen.
     Verloren geht dadurch nichts: Ein drittes Abzeichen gaebe es nur bei
     einem Produktvideo, und davon hat der Bestand derzeit keins (geprueft).
     Kaeme eines dazu, weicht es nach unten aus, statt das Bild zu verdecken. */
  .kachel-marker {
    top: .5rem; left: .5rem; right: .5rem;
    flex-wrap: nowrap; gap: .25rem;
  }
  .marker { font-size: .64rem; padding: .2rem .42rem; white-space: nowrap; }
  .marker.rabatt { font-size: .68rem; padding: .22rem .46rem; }

  /* Gemessen 39 Pixel. Streng genommen ist das kein Verstoss - der Knopf ist
     ein <span>, die ganze Kachel ist der Link, und die ist auf dem Handy
     ueber 400 Pixel hoch. Aber er SIEHT aus wie ein Knopf, und ein Knopf,
     der aussieht, als koenne man ihn kaum treffen, wirkt unfertig. */
  .kachel-knopf { min-height: 44px; display: flex; align-items: center;
                  justify-content: center; padding: .55rem .8rem; }

  /* Das Passepartout wird auf schmalen Geraeten eine Spur schmaler: Bei zwei
     Kacheln nebeneinander auf 390 Pixeln bleiben jeder rund 175 Pixel, davon
     wuerden acht Pixel Rahmen links und rechts fast fuenf Prozent kosten. */
  .kachel      { padding: .4rem; }
  .kachel-text { padding: .85rem .55rem .6rem; }
  .kachel-bildbereich { border-radius: calc(var(--r-l) - .4rem); }
  .kachel-marker { top: .4rem; left: .4rem; right: .4rem; }
}

/* Zwischen 621 und 900 Pixeln (Tablet hochkant) hat das Deals-Raster drei
   Spalten aus Abschnitt 14 - ohne diese Zeile fiele es auf die 205-Pixel-
   Regel aus Abschnitt 7 zurück und legte vier Spalten an. Bei einer 2x2
   großen Hauptkachel blieben davon zwei sehr schmale Reste. */
@media (min-width: 621px) and (max-width: 900px) {
  .deals-gitter { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Der Platzhalter der großen Suche brauchte gemessene 302,8 Pixel, das Feld
   bot 299,6 - es fehlten drei Pixel, und der Text brach mitten im Wort ab
   ("Dachbox ." statt "Dachbox …"). Eine Spur kleiner passt er, und für noch
   schmalere Geräte fängt die Auslassung den Rest ab. */
@media (max-width: 620px) {
  .hero-suche input { font-size: .97rem; text-overflow: ellipsis; }
  .suchfeld input   { text-overflow: ellipsis; }
}

/* ============================ 16. Tiefe: Bewegung im Raum (2.5D) ==========

   WAS HIER PASSIERT UND WAS AUSDRUECKLICH NICHT

   Dieser Abschnitt ergaenzt ausschliesslich BEWEGUNG. Farben, Schrift,
   Abstaende, Preisdarstellung, Abzeichen und Kartenaufbau bleiben so, wie sie
   in den Abschnitten 1 bis 15 stehen. Angefasst wird nur, was sich bewegt -
   und der Ruhezustand jeder Karte ist danach exakt derselbe wie vorher.

   DIE IDEE
   Ein Produktfoto aus einem Haendlerfeed ist ein flaches Bild. Es hat keine
   Rueckseite, also wird hier auch nichts gedreht, was es nicht gibt. Tiefe
   entsteht aus vier Dingen, die zusammen wirken:

     1. Die Karte tritt wirklich nach VORNE. Nicht `scale`, sondern
        `translateZ` innerhalb einer eigenen `perspective()`. Der Unterschied
        ist sichtbar: Eine Vergroesserung waechst gleichmaessig, ein Objekt im
        Raum waechst zur Bildmitte hin staerker als am Rand. Genau das macht
        aus "groesser" ein "naeher".
     2. Sie NEIGT sich zum Zeiger, als wuerde sie ihn ansehen. Hoechstens
        sechs Grad - darueber verzerrt das Produktfoto und wirkt billig.
     3. Das PRODUKT loest sich von seiner Platte: Das Foto wandert ein paar
        Pixel mit dem Zeiger und wird eine Spur groesser, die Platte bleibt
        ruhiger. Zwei Ebenen, die sich unterschiedlich schnell bewegen - der
        aelteste Tiefentrick ueberhaupt.
     4. Der SCHATTEN wird tiefer und weiter, und ein weicher Lichtschein
        wandert mit dem Zeiger ueber das Foto.

   WARUM KEIN 3D-BAUKASTEN
   Fuer diesen Effekt braucht es kein Three.js und keine Animationsbibliothek.
   Es gibt kein 3D-Modell, das man laden koennte - es gibt ein JPG. Alles hier
   sind `transform` und `opacity`, also genau die beiden Eigenschaften, die
   der Browser ohne Neuberechnung des Layouts auf der Grafikkarte schiebt.
   Kein zusaetzliches Paket, keine zusaetzliche Ladezeit.

   WARUM `perspective()` AM ELEMENT UND NICHT AM RASTER
   Naheliegend waere `perspective` am `.gitter`. Dann teilen sich aber alle
   Kacheln EINEN Fluchtpunkt in der Rastermitte, und die Karte ganz aussen
   rechts kippt sichtbar schief weg. Als Transformationsfunktion am Element
   selbst bekommt jede Karte ihren eigenen Fluchtpunkt in ihrer eigenen Mitte.
   Nebenbei loest das ein zweites Problem: `.kachel` traegt `overflow: hidden`,
   und das erzwingt `transform-style: flat` - eine echte 3D-Buehne im Inneren
   der Karte waere ohnehin nicht moeglich gewesen.

   OHNE JAVASCRIPT
   Die Neigung braucht die Mausposition, also ein Skript. Alles andere nicht:
   Faellt das Skript aus, hebt sich die Karte per reinem CSS-Hover an, tritt
   nach vorne und vertieft ihren Schatten. Es fehlt dann die Neigung, nichts
   sonst. Kaputt aussehen kann die Seite dadurch nie.
   ========================================================================== */

/* Der Schatten des angehobenen Zustands. ZWEI Aufgaben in einem Wert:
   ein enger, dunkler Kontaktschatten direkt unter der Karte (er sagt "das
   liegt kurz ueber der Flaeche") und eine weite, sehr weiche Streuung (sie
   sagt "und zwar deutlich"). Eine einzelne Schattenstufe sieht immer aus wie
   ein Aufkleber, egal wie gross man sie macht. */
:root {
  --schatten-tief:
    0 2px 5px rgba(22,25,31,.05),
    0 14px 26px -8px rgba(22,25,31,.14),
    0 34px 60px -18px rgba(22,25,31,.20);
}

@media all {
  :root {
    --schatten-tief:
      0 2px 8px rgba(0,0,0,.55),
      0 18px 32px -10px rgba(0,0,0,.50),
      0 42px 72px -22px rgba(0,0,0,.62);
  }
}

/* --- Die beiden Hilfsebenen ---------------------------------------------

   Beides sind leere, nicht anklickbare Elemente ohne eigenen Inhalt. Sie
   tragen `aria-hidden` und stehen in keiner Vorlesereihenfolge. */

/* Der Lichtschein. Er liegt UEBER dem Foto, ist groesser als seine Flaeche
   und wird vom Skript verschoben - dadurch wandert die helle Stelle mit dem
   Zeiger, statt starr in der Mitte zu kleben.

   Die Bildplatte ist fast weiss, dort faellt weisses Licht kaum auf. Sichtbar
   wird der Schein auf dem PRODUKT, und genau das ist gewollt: Ein Akkuschrauber
   bekommt einen Glanzpunkt, die Platte darunter bleibt ruhig. Der zweite,
   dunkle Verlauf nimmt die abgewandte Seite eine Spur zurueck - so hat das
   Licht auch eine Richtung. */
.tiefe-glanz {
  position: absolute; inset: -26%; z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(closest-side,
      rgba(255,255,255,.95) 0%,
      rgba(255,255,255,.38) 36%,
      rgba(255,255,255,0)   68%),
    radial-gradient(closest-side,
      rgba(22,25,31,0)   58%,
      rgba(22,25,31,.05) 82%,
      rgba(22,25,31,.10) 100%);
  opacity: 0;
  transition: opacity var(--ruhig) var(--kurve);
}

/* Der bewegliche Schatten unter dem grossen Produktbild. Er liegt HINTER dem
   Bildrahmen, deshalb sieht man von ihm nur, was ringsum hervorsteht.

   Warum er nur hier existiert und nicht an jeder Kachel: `.kachel` schneidet
   mit `overflow: hidden` alles ab, was ueber ihren Rand hinausragt - ein
   Schatten waere dort unsichtbar. Man koennte das Abschneiden entfernen, dann
   stuenden aber die Ecken der Bildplatte eckig aus der abgerundeten Karte
   heraus, im Dunkelmodus deutlich sichtbar. Die Kacheln bekommen ihren
   Schattenwechsel deshalb ueber `box-shadow` im Uebergang - einmal beim
   Betreten, einmal beim Verlassen, nicht in jedem Einzelbild. */
.tiefe-schatten {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  border-radius: var(--r-l);
  opacity: 0;
  box-shadow:
    0 10px 20px -10px rgba(22,25,31,.26),
    0 30px 54px -20px rgba(22,25,31,.34);
  transition: opacity var(--ruhig) var(--kurve);
}

@media all {
  .tiefe-schatten {
    box-shadow:
      0 10px 22px -10px rgba(0,0,0,.6),
      0 34px 60px -22px rgba(0,0,0,.7);
  }
}

/* Die Buehne haelt den Schatten genau auf der Groesse des Bildrahmens. Ohne
   sie waere sein Bezugsrahmen die ganze Bildspalte - der Schatten reichte bis
   unter den Bildnachweis. */
.bildbuehne { position: relative; }

/* --- Der eigentliche Effekt: nur mit echter Maus -------------------------

   `(hover: hover) and (pointer: fine)` ist keine Feinheit, sondern die Grenze
   zwischen zwei Welten. Ein Finger hat keine Position zwischen zwei Beruehrungen;
   alles, was einer Zeigerposition folgt, ist auf dem Handy sinnlos - und ein
   `:hover`, das nach dem Antippen haengen bleibt, ist dort ein Fehler. */
@media (hover: hover) and (pointer: fine) {

  /* Die Stellschrauben stehen bewusst HIER und nicht im Skript: Wer die
     Wirkung veraendern will, aendert Gestaltungswerte, keinen Programmcode.
     Das Skript liest sie beim Betreten der Karte einmal aus.

     --t-persp  Fluchtweite. Klein = starke Perspektive. 800 bis 1400.
     --t-neig   groesster Neigungswinkel in Grad.
     --t-hub    Anheben in Pixeln (negativ = nach oben).
     --t-tiefe  Vortritt in Pixeln. Daraus entsteht das Groesserwerden:
                bei 1100 Fluchtweite und 34 Pixeln sind das 3,2 Prozent.
     --t-bild   wie weit das Foto dem Zeiger nachlaeuft, in Pixeln.
     --t-zoom   zusaetzliche Vergroesserung des Fotos.
     --t-glanz  hoechste Deckkraft des Lichtscheins. */
  .kachel {
    --t-persp: 1100;
    --t-neig:  6;
    --t-hub:   -7px;
    --t-tiefe: 34px;
    --t-bild:  7px;
    --t-zoom:  .045;
    --t-glanz: .30;

    /* 320 ms hinein, 480 ms zurueck. Der Rueckweg darf laenger sein: Beim
       Betreten will man eine Antwort, beim Verlassen ein Ausklingen. */
    transition: transform .32s var(--kurve-ein),
                box-shadow .32s var(--kurve);
  }

  .kachel:hover {
    /* Ohne Skript bleibt es genau hierbei: anheben, vortreten, Schatten
       vertiefen. Die Neigung kommt erst mit der Maus dazu. */
    transform: perspective(calc(var(--t-persp) * 1px))
               translate3d(0, var(--t-hub), var(--t-tiefe));
    box-shadow: var(--schatten-tief), var(--kante);
    z-index: 3;
  }

  .kachel:not(:hover) {
    transition: transform .48s var(--kurve-ein),
                box-shadow .48s var(--kurve);
  }

  .kachel:hover .tiefe-glanz { opacity: calc(var(--t-glanz) * .7); }

  /* Die grosse Kachel im Deals-Block darf deutlicher reagieren - sie ist die
     Hauptaussage des Blocks, und auf ihrer Flaeche wirken dieselben Werte
     zurueckhaltender als auf einer kleinen Karte. Die Bedingung mit `:has`
     ist dieselbe wie in Abschnitt 14: Nur wenn das Sondermuster wirklich
     greift, ist diese Kachel auch wirklich die grosse. */
  @media (min-width: 760px) {
    .deals-gitter:has(> :nth-child(8)) > .kachel:first-child {
      --t-persp: 1300;
      --t-neig:  7;
      --t-hub:   -9px;
      --t-tiefe: 48px;
      --t-bild:  10px;
      --t-zoom:  .05;
      --t-glanz: .34;
    }
  }

  /* Spartenkarten sind Wegweiser, keine Ware. Hier reicht eine Andeutung:
     dreieinhalb Grad und 14 Pixel Vortritt, also 1,5 Prozent groesser. Man
     sieht es, man bemerkt es nicht. */
  .spartenkachel {
    --t-persp: 900;
    --t-neig:  3.5;
    --t-hub:   -5px;
    --t-tiefe: 14px;
    --t-bild:  0px;
    --t-zoom:  0;
    --t-glanz: 0;
    transition: transform .32s var(--kurve-ein),
                box-shadow .32s var(--kurve);
  }

  .spartenkachel:hover {
    transform: perspective(calc(var(--t-persp) * 1px))
               translate3d(0, var(--t-hub), var(--t-tiefe));
    z-index: 3;
  }

  .spartenkachel:not(:hover) {
    transition: transform .48s var(--kurve-ein),
                box-shadow .48s var(--kurve);
  }

  /* Das grosse Produktbild. Etwas mehr Fluchtweite, weil die Flaeche gross
     ist: Bei 1100 sah die Neigung an den Ecken bereits nach Weitwinkel aus. */
  .produkt-bildrahmen {
    --t-persp: 1400;
    --t-neig:  6;
    --t-hub:   -4px;
    --t-tiefe: 30px;
    --t-bild:  9px;
    --t-zoom:  .04;
    --t-glanz: .34;

    z-index: 1;                      /* liegt ueber seinem Schatten */
    transition: transform .32s var(--kurve-ein);
  }

  .produkt-bildrahmen:hover {
    transform: perspective(calc(var(--t-persp) * 1px))
               translate3d(0, var(--t-hub), var(--t-tiefe));
  }

  .produkt-bildrahmen:not(:hover) { transition: transform .48s var(--kurve-ein); }

  .produkt-bildrahmen:hover .tiefe-glanz { opacity: calc(var(--t-glanz) * .7); }
  /* Der Schatten steht VOR dem Rahmen in der Vorlage, damit er dahinter
     gezeichnet wird. Ueber `~` waere er deshalb nicht erreichbar - der
     Geschwisterwaehler blickt nur nach vorne. Also fragt die Buehne. */
  .bildbuehne:hover > .tiefe-schatten { opacity: 1; }

  /* Solange das Skript ein Element fuehrt, darf kein Uebergang dazwischenfunken:
     Ein `transition` auf `transform` wuerde jede einzelne Zeigerbewegung ueber
     eine halbe Sekunde nachziehen - die Karte haengt dann traege hinter der
     Maus her. Die Daempfung uebernimmt das Skript selbst, Bild fuer Bild. */
  html.tiefe .kachel.tief-aktiv,
  html.tiefe .spartenkachel.tief-aktiv { transition: box-shadow .32s var(--kurve); }
  html.tiefe .produkt-bildrahmen.tief-aktiv { transition: none; }
}

/* Tastaturbedienung: Der Fokusrahmen aus Abschnitt 2 liegt drei Pixel
   AUSSERHALB der Karte. Karten sind gleichrangig gestapelt, also gewinnt im
   Zweifel die spaetere - der Rahmen der linken Karte kaeme unter die rechte.
   Im Raster liegen zwanzig Pixel dazwischen, es geht heute gerade auf; mit
   dieser Zeile geht es auch dann noch auf, wenn jemand den Abstand
   verkleinert. Bewegung ist hier ausdruecklich KEINE: Wer sich mit der
   Tabulatortaste durch eine Angebotsliste arbeitet, will sehen, wo er ist,
   und nicht bei jedem Schritt eine Karte aufsteigen sehen. */
@media (hover: hover) and (pointer: fine) {
  .kachel:focus-visible,
  .spartenkachel:focus-visible { z-index: 4; }
}

/* --- Finger statt Maus ---------------------------------------------------

   Auf Touch-Geraeten setzt der Browser `:hover` beim Antippen und nimmt es
   erst wieder weg, wenn man irgendwo anders hintippt. Eine angehobene,
   vergroesserte Karte bleibt dadurch stehen, obwohl der Finger laengst weg
   ist - beim Zurueckscrollen findet man eine Karte vor, die aussieht, als
   waere sie ausgewaehlt.

   Deshalb hier: kein Hover-Zustand, dafuer eine ehrliche Rueckmeldung auf den
   Druck. Die Karte gibt beim Antippen minimal nach und richtet sich wieder
   auf - dasselbe, was ein Knopf tut. */
@media (hover: none) {
  .kachel:hover,
  .spartenkachel:hover,
  .produkt-bildrahmen:hover { transform: none; }

  .kachel:hover,
  .spartenkachel:hover { box-shadow: var(--schatten-1), var(--kante); }

  .kachel:hover .kachel-bild,
  .produkt-bildrahmen:hover .produkt-bild,
  .spartenkachel:hover .sparten-sinnbild { transform: none; }

  .spartenkachel:hover::before { opacity: 0; }
  .spartenkachel:hover .spartenkachel-zahl::after { transform: none; }

  .tiefe-glanz, .tiefe-schatten { display: none; }

  /* `:active` gilt nur, solange der Finger liegt - es kann nicht haengen
     bleiben. 0,985 statt 0,95: Es soll nachgeben, nicht einknicken. */
  .kachel:active,
  .spartenkachel:active {
    transform: scale(.985);
    transition: transform .12s var(--kurve);
  }
  .kachel:active { box-shadow: var(--schatten-2), var(--kante); }
  .spartenkachel:active::before { opacity: 1; }
}

/* --- Bewegung reduzieren -------------------------------------------------

   Fuer Menschen mit Gleichgewichtsstoerungen ist Bewegung auf einem
   Bildschirm keine Geschmacksfrage, sondern kann Uebelkeit ausloesen. Wer im
   Betriebssystem "Bewegung reduzieren" eingeschaltet hat, bekommt hier gar
   nichts davon: keine Neigung, kein Anheben, kein Vortreten, kein Licht.
   Das Skript startet in diesem Fall erst gar nicht.

   Die Rueckmeldung beim Darueberfahren geht dabei NICHT verloren - sie
   wechselt nur das Mittel: Der Schatten wird tiefer und der Produktname
   nimmt die Akzentfarbe an. Beides steht sofort da, ohne Weg. */
@media (prefers-reduced-motion: reduce) {
  .kachel,
  .kachel:hover,
  .spartenkachel,
  .spartenkachel:hover,
  .produkt-bildrahmen,
  .produkt-bildrahmen:hover { transform: none !important; }

  .kachel:hover .kachel-bild,
  .produkt-bildrahmen:hover .produkt-bild,
  .spartenkachel:hover .sparten-sinnbild,
  .spartenkachel:hover .spartenkachel-zahl::after { transform: none !important; }

  .tiefe-glanz, .tiefe-schatten { display: none !important; }
}

/* ==================== 17. Der Ausstellungsraum ============================

   Dieser Abschnitt setzt um, was der Farbblock ganz oben angekuendigt hat.
   Er steht am Ende, weil er in der Kaskade das letzte Wort haben muss -
   und weil man ihn dann am Stueck lesen kann.

   DAS PROBLEM, DAS ER LOEST
   Auf schwarzem Grund wird jede Bildplatte zu einem Leuchtkasten. Die Fotos
   aus dem Haendlerfeed sind auf Weiss freigestellt, die Platte muss also hell
   bleiben - sonst stuende in jeder Karte ein weisses Rechteck auf dunklem
   Feld, was aussieht, als sei das Bild kaputt. Eine Seite aus 24 grellen
   weissen Rechtecken auf Schwarz ist aber keine Gestaltung, sondern ein
   Schachbrett.

   DIE ANTWORT: NICHT DIE PLATTE ABDUNKELN, SONDERN SIE RAHMEN.
   Drei Dinge zusammen machen aus dem Leuchtkasten ein Ausstellungsstueck:

     1. Ein Passepartout. Die Platte reicht nicht mehr bis an den Kartenrand,
        sondern liegt mit acht Pixeln Abstand darin - mit eigenen runden
        Ecken. Dadurch ist sie ein Gegenstand IN der Karte, keine Haelfte DER
        Karte. Das kostet acht Pixel und aendert den Eindruck vollstaendig.
     2. Ein Lichtabfall. Die Platte ist in der Mitte reinweiss und wird zu
        den Ecken hin um vierzehn Helligkeitswerte dunkler. Das ist zu wenig,
        um es als Verlauf zu bemerken, und genug, damit sie nicht flach
        leuchtet, sondern beleuchtet wirkt. Die Fotokante bleibt unsichtbar,
        weil in der Mitte - dort, wo das Foto liegt - weiterhin Weiss steht.
     3. Ein Kontaktschatten und ein warmer Abglanz. Unter der Platte liegt
        ein enger dunkler Schatten (sie liegt kurz ueber der Karte) und ein
        sehr schwacher goldener Schein (das Licht faellt von ihr ab).

   Das Passepartout gilt in BEIDEN Farbschemata. Zwei verschiedene Aufbauten
   zu pflegen ist der sichere Weg, dass einer davon veraltet.
   ========================================================================== */

/* ---------------------------------------- 17.1 Passepartout (beide Modi) --- */

/* Der Innenabstand sitzt an der KARTE, nicht am Bildbereich. Das ist keine
   Geschmacksfrage: Die Kachel wechselt in vier Sonderfaellen von Spalte auf
   Zeile (einzelnes Suchergebnis, achte Deals-Kachel, jeweils ab zwei
   Bruchpunkten). Ein `margin` am Bildbereich haette fuer jeden dieser Faelle
   eine eigene Regel gebraucht - und waere beim naechsten Sonderfall wieder
   vergessen worden. Ein `padding` an der Karte stimmt in jeder Richtung von
   selbst. */
.kachel { padding: .5rem; }

.kachel-bildbereich { border-radius: calc(var(--r-l) - .5rem); }

/* Das Polster des Textes wird um dieselben acht Pixel verkleinert - sonst
   stuende der Produktname ploetzlich weiter innen als vorher und die Kachel
   wuerde in der Reihe hoeher. Gemessen bleibt der Text damit an genau
   derselben Stelle wie zuvor. */
.kachel-text { padding: .95rem .65rem .7rem; }
.kachel-fuss { padding-top: .55rem; }

/* Die Abzeichen sitzen im Bildbereich und ruecken mit ihm nach innen. Ohne
   diese Zeile stuenden sie mit 8 + 11 = 19 Pixeln Abstand vom Kartenrand -
   sichtbar zu weit von der Ecke weg. */
.kachel-marker { top: .5rem; left: .5rem; right: .5rem; }

/* Die Tiefpreis-Pille war weiss auf einer fast weissen Platte. Ihre SCHRIFT
   bestand die Pruefung (5,1:1), aber die Pille selbst war als Form nicht da -
   im Bildschirmfoto sah man nur schwebende Buchstaben mit einem Hauch von
   Goldrand. Eine warm getoente Flaeche mit kraeftigerer Goldkante gibt ihr
   den Koerper zurueck, ohne lauter zu werden als der Nachlass daneben: Der
   bleibt die dunkle Pille, das hier bleibt die leichte.
   Gemessen 5,6:1 - die Schrift wurde dafuer eine Spur dunkler gesetzt. */
.marker.tiefpreis {
  background: rgba(255,247,232,.94);
  color: #8a5a06;
  box-shadow:
    inset 0 0 0 1px rgba(150,96,10,.42),
    0 1px 5px rgba(30,20,4,.16);
}

/* Die grosse Deals-Kachel traegt mehr Flaeche und vertraegt einen breiteren
   Rahmen - bei acht Pixeln auf 600 Pixel Breite saehe er nach Zufall aus. */
@media (min-width: 760px) {
  .deals-gitter:has(> :nth-child(8)) > .kachel:first-child { padding: .7rem; }
  .deals-gitter:has(> :nth-child(8)) > .kachel:first-child .kachel-bildbereich {
    border-radius: calc(var(--r-l) - .7rem);
  }
}

/* ----------------------------------------------- 17.2 Die helle Fassung --- */

/* Sie bleibt in Kraft und bekommt denselben Aufbau, nur ohne den Kontrast
   zwischen Raum und Licht - im Hellen gibt es keinen dunklen Raum, aus dem
   sich etwas herausheben koennte. Die Platte wird deshalb durch eine
   Haarlinie und eine sehr leichte Vignette gefasst, nicht durch Helligkeit. */
/* STILLGELEGT - bewusst, nicht vergessen.

   Hier stand `@media (prefers-color-scheme: light)`: eine vollstaendige
   helle Fassung, die bei hell eingestelltem Betriebssystem ALLE dunklen
   Regeln darueber ueberschrieben hat. Sie stand weiter unten und gewann
   damit.

   Der Betreiber will die Seite dunkel - fuer jeden Besucher, unabhaengig
   von dessen Systemeinstellung. Das ist eine Gestaltungsentscheidung wie
   die Wahl der Schrift, keine Bequemlichkeitseinstellung.

   Der Block bleibt als Kommentar erhalten: Sollte je wieder eine helle
   Fassung gewuenscht sein, muss man ihn nur wieder aktivieren, statt sie
   neu zu bauen.

@media (prefers-color-scheme: light) {
  .kachel-bildbereich:not(.ist-zeichnung) {
    background:
      radial-gradient(115% 100% at 50% 34%, #ffffff 0%, #fdfcfa 58%, #f5f3ee 100%);
    box-shadow:
      inset 0 0 0 1px rgba(22,25,31,.055),
      inset 0 -20px 30px -22px rgba(58,46,24,.10);
  }

  .produkt-bildrahmen:not(.ist-zeichnung) {
    background:
      radial-gradient(110% 100% at 50% 32%, #ffffff 0%, #fdfcfa 60%, #f4f2ec 100%);
    box-shadow: inset 0 0 0 1px rgba(22,25,31,.07);
  }
}
*/


/* =============================== 17.3 DUNKEL: der Raum ==================== */

@media all {

  /* --- Ein Raum hat eine Lichtquelle -------------------------------------

     Eine gleichmaessig schwarze Flaeche ueber 6000 Pixel Seitenhoehe ist
     kein Raum, sondern ein Loch. Ein sehr weiches Deckenlicht oben gibt der
     Seite einen Horizont: Oben ist es eine Spur heller, unten laeuft es ins
     Schwarze.

     Warum ein FESTES Pseudoelement und kein Seitenhintergrund: Ein Verlauf
     am `body` wird ueber die gesamte Dokumenthoehe gestreckt und ist auf
     einer langen Angebotsliste nicht mehr wahrnehmbar. Das feste Element
     ist immer genau fensterhoch. Es kostet eine einzige Ebene, wird nie neu
     gezeichnet und faengt keine Klicks ab. */
  html { background: var(--flaeche); }
  body { background: transparent; }

  body::before {
    content: ""; position: fixed; inset: 0; z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(78% 46% at 50% -6%, rgba(240,178,70,.055), transparent 62%),
      radial-gradient(120% 72% at 50% 0%, #141821 0%, #0c0e12 46%, #08090b 100%);
  }

  /* --- Karten sind Koerper, keine Rechtecke --------------------------------

     Ein Hauch Verlauf von oben nach unten. Auf Schwarz ist das der einzige
     Weg, einer Flaeche Volumen zu geben - ein Schatten kann auf schwarzem
     Grund nicht dunkler werden als der Grund.

     NACHGEBESSERT: Der erste Anlauf lag mit #161a20 auf #08090b zu dicht am
     Raum. Im Bildschirmfoto der ganzen Startseite waren die sechs
     Spartenkarten und die drei Grundsatzkarten praktisch nicht mehr da - man
     sah Text auf Schwarz, keine Karten. Die Produktkacheln fielen nicht auf,
     weil ihre Vitrine sie ohnehin traegt; alles ohne Bild verschwand.
     Jetzt sind es zwei getrennte Rollen:
       Kacheln MIT Bild bleiben zurueckhaltend - die Vitrine ist ihr Koerper.
       Karten OHNE Bild tragen den Koerper selbst und stehen deutlich heller. */
  .kachel, .filterhuelle, .seitenzahl, .markenlink {
    background: linear-gradient(180deg, #171b22 0%, #101318 100%);
  }

  .spartenkachel, .grundsatz, .empfehlung, .bereich, .mehr,
  .kasten, .leerer-bereich {
    background: linear-gradient(180deg, #1b1f27 0%, #13161c 100%);
  }

  /* Dasselbe Prinzip fuer die beiden anderen Flaechen, die Karten TRAGEN:
     die Buehne einer Spartenseite (Bereichskarten, Markenpillen, Filter) und
     der Kopf der Produktseite (Vitrine und Preisbox). Auch dort lagen Traeger
     und Getragenes vorher im selben Ton. Die Regel fuer die ganze Seite
     lautet ab hier:

       Raum       #08090b   der Grund, auf dem alles steht
       Nische     #0b0d12   Flaechen, die Karten tragen - dunkler als der Raum
       Karte      #171b22   alles, was getragen wird - heller als beides
       Vitrine    fast weiss

     Wer eine neue Flaeche baut, muss sich nur fragen: traegt sie etwas oder
     wird sie getragen? */
  .produkt-kopf, .buehne, .bühne {
    background:
      radial-gradient(70% 120% at 92% -14%, rgba(240,178,70,.075), transparent 58%),
      linear-gradient(180deg, #0b0d12 0%, #060709 100%);
    box-shadow:
      inset 0 1px 2px rgba(0,0,0,.85),
      inset 0 0 0 1px rgba(255,255,255,.045),
      0 1px 0 rgba(255,255,255,.045);
  }

  /* Die Buehne hatte bereits einen eigenen Goldkreis. Zwei warme Scheine
     uebereinander in derselben Ecke addieren sich zu einem olivbraunen
     Fleck - denselben Fehler hat der Hero schon einmal gehabt. */
  .bühne::before { background: none; }

  /* ---------------------------------------------- 17.4 DIE VITRINE ------- */

  .kachel-bildbereich:not(.ist-zeichnung),
  .produkt-bildrahmen:not(.ist-zeichnung) {
    background: var(--vitrine);
    box-shadow: var(--vitrine-schein);
  }

  /* GROSSE FLAECHEN BRAUCHEN MEHR VIGNETTE.

     Ein `box-shadow` rechnet in Pixeln, nicht in Prozent. Dieselben 30 Pixel
     Streuung, die auf einer 210 Pixel breiten Kachelplatte den halben Rand
     weich machen, sind auf der 600 Pixel breiten Hauptkachel ein Fuenftel
     davon - dort stand die Platte wieder als hartes Rechteck. Die grossen
     Flaechen bekommen deshalb eine eigene, weiter gestreute Fassung.
     Betroffen sind genau drei: die doppelte Deals-Kachel, die quer gelegte
     achte, und das Produktbild der Detailseite. */
  .produkt-bildrahmen:not(.ist-zeichnung) {
    box-shadow:
      inset 0 0 0 1px rgba(0,0,0,.10),
      inset 0 0 70px -14px rgba(50,40,20,.20),
      inset 0 -40px 60px -50px rgba(50,40,20,.30),
      0 10px 26px -12px rgba(0,0,0,.85),
      0 4px 34px -8px rgba(240,178,70,.14);
  }

  @media (min-width: 760px) {
    .deals-gitter:has(> :nth-child(8)) > .kachel:first-child
      > .kachel-bildbereich:not(.ist-zeichnung),
    .deals-gitter > .kachel:nth-child(8):last-child
      > .kachel-bildbereich:not(.ist-zeichnung) {
      box-shadow:
        inset 0 0 0 1px rgba(0,0,0,.10),
        inset 0 0 80px -16px rgba(50,40,20,.22),
        inset 0 -46px 66px -56px rgba(50,40,20,.30),
        0 10px 24px -10px rgba(0,0,0,.85),
        0 4px 38px -8px rgba(240,178,70,.15);
    }
  }

  /* Das Empfehlungsbild ist klein und steht direkt neben Text - hier reicht
     eine ruhige helle Platte ohne Lichtinszenierung. */
  .empfehlung-bild {
    background: linear-gradient(180deg, #fbfaf7, #eeebe4);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.10);
  }

  /* Beim Herantreten wird das Licht auf der Vitrine eine Spur waermer und
     der Abglanz weiter. Sie sieht damit aus, als richte sich ein Strahler
     mit aus - genau die Rueckmeldung, die eine Angebotsseite braucht.
     Nur mit echter Maus: Auf dem Handy bliebe der Zustand nach dem Antippen
     haengen (siehe Abschnitt 16). */
  @media (hover: hover) and (pointer: fine) {
    .kachel-bildbereich:not(.ist-zeichnung) {
      transition: box-shadow var(--ruhig) var(--kurve);
    }
    .kachel:hover .kachel-bildbereich:not(.ist-zeichnung) {
      box-shadow:
        inset 0 0 0 1px rgba(0,0,0,.10),
        inset 0 0 30px -6px rgba(50,40,20,.10),
        inset 0 -22px 34px -30px rgba(50,40,20,.22),
        0 8px 20px -8px rgba(0,0,0,.85),
        0 6px 34px -6px rgba(240,178,70,.30);
    }
  }

  /* ------------------------------------------- 17.5 Kopf, Hero, Buehnen --- */

  /* Der Kopf schwebt ueber dem Raum: fast schwarz, durchscheinend, mit einer
     Lichtkante nach unten statt eines Striches. Ein harter Rand auf Schwarz
     wirkt wie eine Tabellenlinie. */
  .kopf {
    background: rgba(8,9,11,.78);
    border-bottom-color: rgba(255,255,255,.055);
  }

  .kopf.geschoben {
    background: rgba(8,9,11,.92);
    box-shadow: 0 1px 0 rgba(255,255,255,.05), 0 12px 30px rgba(0,0,0,.55);
  }

  .sparten { border-top-color: rgba(255,255,255,.05); }

  .sparten.scrollbar::before {
    background: linear-gradient(to right, rgba(8,9,11,0), rgba(8,9,11,.96));
  }

  .hinweisband {
    background: rgba(255,255,255,.022);
    border-top-color: rgba(255,255,255,.05);
  }

  /* Der Hero ist der Moment, in dem der Raum das erste Mal sichtbar wird:
     ein warmer Lichtkegel oben rechts, der nach links unten ins Schwarze
     laeuft. Drei Verlaeufe, kein einziger davon kraeftig - die Wirkung
     entsteht aus ihrer Ueberlagerung, nicht aus Saettigung. */
  .hero {
    background:
      radial-gradient(70% 120% at 84% -14%, rgba(240,178,70,.17), transparent 58%),
      radial-gradient(90% 130% at 6% 116%, rgba(96,120,170,.07), transparent 62%),
      linear-gradient(166deg, #1b2029 0%, #12151b 52%, #0b0d11 100%);
    box-shadow: var(--schatten-3), var(--kante);
  }

  .hero::before { background: radial-gradient(circle, rgba(240,178,70,.10), transparent 70%); }
  .hero::after  { background: radial-gradient(circle, rgba(120,150,210,.05), transparent 70%); }

  .hero-zeichen { color: var(--akzent); opacity: .10; }

  /* Die grosse Suche ist der einzige helle Gegenstand im Hero. Sie darf
     nicht weiss sein - dann waere sie lauter als jedes Produkt. Eine
     vertiefte, dunkle Mulde mit Lichtkante wirkt wie eingelassen. */
  .hero-suche {
    background: rgba(255,255,255,.045);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.07),
      inset 0 0 0 1px rgba(255,255,255,.06),
      0 10px 30px -14px rgba(0,0,0,.8);
  }

  .hero-suche:focus-within {
    background: rgba(255,255,255,.07);
    box-shadow:
      inset 0 0 0 1px rgba(240,178,70,.55),
      0 0 0 4px rgba(240,178,70,.14),
      0 14px 34px -14px rgba(0,0,0,.85);
  }

  .suchfeld { background: rgba(255,255,255,.05); }
  .suchfeld:hover { background: rgba(255,255,255,.075); border-color: rgba(255,255,255,.09); }
  .suchfeld:focus-within {
    background: rgba(255,255,255,.075);
    box-shadow: 0 0 0 4px rgba(240,178,70,.14);
  }

  /* DER DEALS-BLOCK IST EINE NISCHE, KEINE ERHEBUNG.

     Der erste Anlauf machte ihn eine Spur HELLER als den Raum - das ist der
     uebliche Weg, einen Bereich hervorzuheben, und er ging hier schief:
     Blockflaeche (#161a21) und Kartenflaeche (#171b22) lagen danach einen
     Farbwert auseinander. Im Bildschirmfoto verschwammen die Karten mit
     ihrem eigenen Block; man sah acht Vitrinen und darunter freischwebenden
     Text.

     Jetzt ist es umgekehrt und dadurch richtig: Der Block ist DUNKLER als
     der Raum - eine eingelassene Nische in der Wand - und die Karten stehen
     als beleuchtete Koerper darin. Genau so baut ein Juwelier ein Schaufenster:
     Die Vertiefung ist dunkler als alles ringsum, damit das Licht darin
     etwas zu tun hat. Der warme Schein oben links kommt aus derselben
     Richtung wie der im Hero, damit die Seite EINE Lichtquelle hat.

     Gemessener Abstand jetzt: Nische #0a0c10, Karte oben #171b22 -
     dreizehn Helligkeitswerte statt einem. */
  .deals-block {
    background:
      radial-gradient(85% 115% at 4% -12%, rgba(240,178,70,.10), transparent 56%),
      linear-gradient(180deg, #0b0d12 0%, #060709 100%);
    box-shadow:
      inset 0 1px 2px rgba(0,0,0,.85),
      inset 0 0 0 1px rgba(255,255,255,.045),
      0 1px 0 rgba(255,255,255,.045);
  }

  .deals-block::before {
    background: linear-gradient(90deg,
                var(--akzent) 0%, var(--akzent-hell) 30%, rgba(240,178,70,0) 76%);
    opacity: .85;
  }

  .bühne::before { background: radial-gradient(circle, rgba(240,178,70,.10), transparent 68%); }

  /* --------------------------------------------- 17.6 Preis und Kaufweg --- */

  /* Der Preis ist die wichtigste Information der Seite und traegt deshalb
     den hoechsten Kontrast, den es hier gibt: 16,3:1 gegen die Karte. */
  .preis, .bestpreis-zahl, .preisbox-preis { color: #ffffff; }

  /* Der durchgestrichene alte Preis: Die Linie hatte einen festen hellen
     Grauwert aus der hellen Fassung und war auf dunklem Grund praktisch
     unsichtbar - die Durchstreichung, also die ganze Aussage, fiel weg. */
  .uvp { text-decoration-color: rgba(180,186,196,.7); }

  /* Die Preisbox: dieselbe Sprache wie die Deals-Buehne, eine Stufe waermer.
     Gold sagt auf dieser Seite "hier kaufst du". */
  .preisbox {
    background:
      radial-gradient(110% 145% at 100% -10%, rgba(240,178,70,.15), transparent 58%),
      linear-gradient(180deg, #191d24 0%, #101318 100%);
    box-shadow: var(--schatten-2), inset 0 0 0 1px rgba(240,178,70,.20);
  }

  .preisbox::before {
    background: linear-gradient(90deg,
                var(--akzent) 0%, var(--akzent-hell) 42%, rgba(240,178,70,0) 90%);
  }

  /* DER GOLDSCHEIN IST EINE RANGFOLGE, KEINE VERZIERUNG.

     Der erste Anlauf gab jedem goldenen Knopf einen weichen Lichtschein.
     Auf der Produktseite sah das gut aus - dort gibt es genau einen. Im
     Kachelraster einer Spartenseite lagen dadurch acht leuchtende Flecken
     gleichzeitig auf dem Bildschirm, und weil sie alle gleich hell waren,
     sagte keiner mehr etwas aus. Nachgesehen im Bildschirmfoto von
     /sparte/spielzeug: Die Seite flimmerte, statt ruhig zu sein.

     Jetzt leuchtet nur, was einmalig ist: der Kaufknopf der Produktseite und
     die grosse Suche im Hero. Die Knoepfe im Raster bekommen dieselbe
     Goldflaeche, aber nur eine Lichtkante und einen Kontaktschatten - sie
     sind erkennbar der Weg zum Angebot, ohne zu blenden. Der Schein kommt
     erst beim Herantreten dazu, und dann nur an EINER Karte. */
  .kachel-knopf {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.26),
      0 2px 6px rgba(0,0,0,.45);
  }

  .zum-shop, .hero-suche button, .knopf.akzent, .preisbox-kauf .zum-shop {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.28),
      0 2px 8px rgba(0,0,0,.5),
      0 10px 30px -10px rgba(240,178,70,.42);
  }

  .kachel:hover .kachel-knopf {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.32),
      0 2px 10px rgba(0,0,0,.5),
      0 10px 28px -10px rgba(240,178,70,.45);
  }

  /* ------------------------------------------------------ 17.7 Fussraum --- */

  /* Der Fuss war schwarzer als der Seitengrund - zwei verschiedene Schwarz
     uebereinander lesen sich als Darstellungsfehler. Jetzt laeuft er aus dem
     Raum heraus nach unten ins Tiefste, mit der Goldlinie als Abschluss. */
  .fuss {
    background: linear-gradient(180deg, #0c0e12 0%, #06070a 100%);
    color: rgba(255,255,255,.72);
  }

  .fuss::before { opacity: .5; }
  .fuss-innen .klein { color: rgba(255,255,255,.6); }
  .fuss-schluss {
    border-top-color: rgba(255,255,255,.07);
    color: rgba(255,255,255,.58);
  }

  /* ------------------------------------------- 17.8 Kleinteile im Raum --- */

  /* Fein getoente Flaechen statt fester Grautoene: Auf Schwarz wirkt jede
     deckende Flaeche wie ein aufgeklebtes Feld. Durchscheinendes Weiss nimmt
     den Ton der Flaeche darunter an und bleibt eine Aufhellung. */
  .flaeche-getoent, .sortierzeile, .ohne-preis,
  .such-schalter, .kachel-knopf.leise {
    background: rgba(255,255,255,.05);
  }

  .such-schalter:hover { background: rgba(255,255,255,.09); }

  .sortierzeile select { background: rgba(255,255,255,.06); }

  .filterspalte select, .sortierzeile select {
    border-color: rgba(255,255,255,.09);
  }
  .filterspalte select { background: rgba(255,255,255,.04); }
  .filterspalte select:hover, .sortierzeile select:hover {
    border-color: rgba(240,178,70,.45);
  }

  .sparten-sinnbild, .leer-sinnbild {
    background: rgba(240,178,70,.09);
  }

  /* Der Tiefenschatten aus Abschnitt 16 bekommt einen warmen Kern: Wenn eine
     Karte im dunklen Raum nach vorne tritt, faellt von ihrer hellen Vitrine
     Licht mit. Ein rein schwarzer Schatten waere auf schwarzem Grund
     ohnehin unsichtbar - erst der Goldanteil macht das Anheben sichtbar. */
  :root {
    --schatten-tief:
      0 2px 10px rgba(0,0,0,.7),
      0 20px 38px -12px rgba(0,0,0,.65),
      0 46px 80px -26px rgba(0,0,0,.75),
      0 18px 60px -24px rgba(240,178,70,.20);
  }

  .tiefe-schatten {
    box-shadow:
      0 12px 26px -12px rgba(0,0,0,.8),
      0 40px 70px -26px rgba(0,0,0,.85),
      0 20px 60px -22px rgba(240,178,70,.18);
  }

  /* Der Lichtschein wandert ueber ein FOTO auf einer fast weissen Platte.
     Reines Weiss faellt dort kaum auf; ein warmer Ton sieht aus wie eine
     Lampe, die mitgeht. */
  .tiefe-glanz {
    background:
      radial-gradient(closest-side,
        rgba(255,246,226,.95) 0%,
        rgba(255,240,210,.36) 38%,
        rgba(255,240,210,0)   70%),
      radial-gradient(closest-side,
        rgba(28,22,12,0)   56%,
        rgba(28,22,12,.06) 82%,
        rgba(28,22,12,.13) 100%);
  }

  /* --------------------------------- 17.9 Gold gehoert dem Kaufweg ------- */

  /* Die Gestaltungsregel ganz oben sagt: Gold zeigt, wo man kauft. Im alten
     Dunkelmodus wurde sie an drei Stellen gebrochen, und zwar aus einem
     nachvollziehbaren Grund: Der Suchknopf im Kopf und der erste
     Schnellfilter tragen im Hellen die dunkle Tinte, und eine dunkle Flaeche
     auf dunklem Grund ist keine Flaeche mehr. Man half sich mit Gold.

     Auf dem jetzt fast schwarzen Grund faellt das auf: In der Kopfzeile
     leuchtete ein goldener "Suchen"-Knopf, im Hero ein goldenes "Preise
     vergleichen", in jeder Kachel ein goldenes "Zum besten Angebot" - vier
     verschiedene Rangstufen in derselben Farbe.

     Die Loesung ist dieselbe wie im Hellen, nur gespiegelt: Wo dort die
     dunkle Tinte den neutralen Hauptknopf macht, macht es hier eine helle,
     durchscheinende Flaeche. Neutral bleibt neutral, Gold bleibt Kaufweg.
     Der Hero-Knopf behaelt sein Gold - er IST der Hauptweg der Startseite. */
  /* "Filter anwenden" gehoert in dieselbe Gruppe: eine Bedienung, kein
     Kaufweg. Der Selektor ist bewusst eng - dieselbe Klasse `.knopf.gelb`
     traegt auf der Startseite die Weiterfuehrung einer Empfehlungskarte,
     und die FUEHRT zu einem Angebot, darf also Gold behalten. */
  .suchfeld button,
  .schnellfilter > .knopf:first-child,
  .filterspalte .knopf.gelb {
    background: rgba(255,255,255,.14);
    color: #ffffff;
    font-weight: 680;
    /* NACHGEMESSEN, nicht geschaetzt: Mit .22 kam die Kontur auf 2,94:1
       gegen die Nische - WCAG verlangt fuer die Umrandung eines
       Bedienelements 3:1, also knapp durchgefallen. Mit .27 sind es 3,35:1.
       Die Schrift selbst steht bei 13,4:1, der Knopf war nie unlesbar; es
       ging um seine FORM. */
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16),
                inset 0 0 0 1px rgba(255,255,255,.27);
  }

  .suchfeld button:hover,
  .schnellfilter > .knopf:first-child:hover,
  .filterspalte .knopf.gelb:hover {
    background: rgba(255,255,255,.2);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2),
                inset 0 0 0 1px rgba(255,255,255,.34);
    filter: none;
  }

  /* Auswahl und Tastaturfokus: Auf Schwarz braucht der Fokusrahmen einen
     hellen Kern, sonst verschwindet er in der Karte. */
  ::selection { background: var(--akzent); color: #14100a; }
}