/* ====================
   Klickfund components.css
   Buttons, Deal-Karte im Strom, Rabatt-Badge, Leerzustand,
   Argument- und Schrittkarten, Hinweiskasten.

   HINWEIS: Diese Datei wird auch vom Editor eingebunden, damit die Vorschau
   exakt wie die echte Karte aussieht. Wer hier die Deal-Karte aendert, muss
   die Vorschau in assets/js/editor.js mitziehen (Funktion vorschauBauen).
   ==================== */

/* --- 1. Buttons -------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;               /* Touch-Ziel deutlich ueber 44px */
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid transparent;
  border-radius: var(--r-full);
  font-size: var(--fs-300);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-snug);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              filter var(--dur-fast) var(--ease-out),
              transform var(--dur-instant) var(--ease-out);
}

.btn:active {
  transform: scale(0.98);
}

/* Gold: die Hauptschiene. --btn--primaer ist derselbe Knopf unter dem
   alten Namen, damit aeltere Seiten weiterlaufen. */
.btn--gold,
.btn--primaer {
  position: relative;
  overflow: hidden;
  background: var(--grad-knopf);
  color: var(--c-on-accent);
  box-shadow: var(--sh-1);
}

/* Glanzstreifen, der beim Ueberfahren einmal durchlaeuft. Reine Zierde,
   liegt ueber der Flaeche und faengt keine Klicks ab. */
.btn--gold::after,
.btn--primaer::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, var(--c-glanz) 50%, transparent 100%);
  transform: skewX(-18deg);
  opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
  .btn--gold:hover,
  .btn--primaer:hover {
    filter: brightness(1.06);
    box-shadow: var(--sh-gold);
    color: var(--c-on-accent);
  }

  .btn--gold:hover::after,
  .btn--primaer:hover::after {
    animation: glanz-lauf 720ms var(--ease-out) 1;
  }
}

@keyframes glanz-lauf {
  0%   { left: -60%; opacity: 0; }
  20%  { opacity: 1; }
  100% { left: 115%; opacity: 0; }
}

/* Zweite Wahl als Glasknopf (09.08.2026) — das Gegenstueck zu `.btn-glass`
   in der Diagnosesuite. Er soll neben der Goldschiene ruhig bleiben, aber
   nicht mehr wie ein leeres Kaestchen aussehen. */
.btn--rand,
.btn--sekundaer {
  background-color: var(--glas);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0) 60%);
  -webkit-backdrop-filter: var(--glas-blur);
  backdrop-filter: var(--glas-blur);
  border-color: var(--glas-kante);
  color: var(--c-text);
  box-shadow: var(--sh-glas);
}

@media (hover: hover) and (pointer: fine) {
  .btn--rand:hover,
  .btn--sekundaer:hover {
    background-color: var(--glas-dicht);
    border-color: var(--glas-kante-gold);
    color: var(--c-text);
    box-shadow: var(--sh-glas-gold);
  }
}

/* Auf dem dunklen Bildband drehen sich beide Knoepfe um.

   Ohne diese Regeln waere der Zweitknopf weiss auf weiss: .btn--rand
   nimmt --c-surface als Flaeche und --c-text als Schrift, und --c-text
   ist im dunklen Band hell. Der Hauptknopf bekommt hier das helle Gold
   mit dunkler Schrift (13,1:1) — die dunkle Goldschiene ginge auf dem
   dunklen Grund unter. */

.section--dunkel .btn--gold,
.section--dunkel .btn--primaer {
  background: var(--grad-gold);
  color: var(--c-on-gold);
}

.section--dunkel .btn--rand,
.section--dunkel .btn--sekundaer {
  background-color: rgba(255, 253, 247, 0.10);
  /* Der helle Lichtverlauf des Glasknopfs gehoert hier weg: auf dunklem
     Grund waere er ein weisser Schleier statt einer Kante. */
  background-image: none;
  border-color: rgba(245, 214, 128, 0.55);
  color: var(--c-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

@media (hover: hover) and (pointer: fine) {
  .section--dunkel .btn--gold:hover,
  .section--dunkel .btn--primaer:hover {
    color: var(--c-on-gold);
  }

  .section--dunkel .btn--rand:hover,
  .section--dunkel .btn--sekundaer:hover {
    background-color: rgba(255, 253, 247, 0.18);
    border-color: var(--c-gold-hell);
    color: var(--c-text);
  }
}

/* --- 2. Filter-Chips --------------------
   Werden auf der Startseite nicht mehr gebraucht (die Kategorien stehen in
   der Navigation), bleiben aber fuer den Editor und die Unterseiten stehen.
   -------------------- */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--sp-2) var(--sp-4);
  background-color: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-full);
  color: var(--c-text-muted);
  font-size: var(--fs-300);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .chip:hover {
    border-color: var(--c-border-strong);
    color: var(--c-text);
  }
}

.chip:active {
  transform: scale(0.97);
}

.chip[aria-pressed="true"] {
  background: var(--grad-knopf);
  border-color: transparent;
  color: var(--c-on-accent);
  font-weight: var(--fw-semibold);
}

/* --- 3. Deal-Karte im Strom --------------------
   Eine Karte je Zeile, volle Breite der Spalte: Kategorie, Ueberschrift mit
   Preis, Zeile mit Quelle und Datum, Bild, Text, Zahlen, Knoepfe.
   -------------------- */

/* Die Deal-Karte als Glasscheibe (09.08.2026).
   Wie bei den Kaesten der Seitenspalte: --glas-dicht, weil hier Fliesstext
   und Preise stehen. Was das Glas ausmacht, ist der Verlauf oben (Licht),
   die Lichtkante (im --sh-glas) und der tiefere, weichere Schatten. */
.deal {
  position: relative;
  display: block;
  background-color: var(--glas-dicht);
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.8) 0%,
    rgba(255, 255, 255, 0.15) 32%,
    rgba(255, 255, 255, 0) 70%
  );
  -webkit-backdrop-filter: var(--glas-blur);
  backdrop-filter: var(--glas-blur);
  border: 1px solid var(--glas-kante);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-glas);
  padding: var(--sp-5);
  transition: box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}

@media (min-width: 760px) {
  .deal { padding: var(--sp-6); }
}

/* Nur eine Spur anheben. Eine Karte, die beim Ueberfahren aufspringt,
   verspricht einen Klick auf die ganze Flaeche — den gibt es hier nicht,
   geklickt wird der Knopf zum Angebot. Dieselbe Trennung wie in der
   Diagnosesuite zwischen `.tile-glass` und `.tile-glass-tap`. */
@media (hover: hover) and (pointer: fine) {
  .deal:hover {
    box-shadow: var(--sh-glas-hoch);
    border-color: var(--glas-kante-gold);
    transform: translateY(-2px);
  }
}

/* Kopfzeile der Karte: Kategorie links, Rabattband rechts. */
.deal__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

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

/* Das Rabattband. Kein rundes Abzeichen, sondern ein schraeg
   angeschnittenes Band wie in der Vorlage. */
.deal__band {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  margin: 0;
  padding: 0.28em var(--sp-4) 0.28em var(--sp-5);
  background: var(--grad-gold);
  color: var(--c-on-gold);
  font-size: var(--fs-300);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-normal);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  box-shadow: var(--sh-1);
  clip-path: polygon(0.75rem 0, 100% 0, 100% 100%, 0.75rem 100%, 0 50%);
}

/* Ab der Schwelle brennt es. Das Feuer steht NIE allein: der Prozentwert
   daneben sagt, wie viel es ist. */
.deal__band--hot {
  background: var(--grad-feuer);
  color: #FFFFFF;   /* auf --grad-feuer 5,18:1 bis 7,31:1 */
}

.deal__band--hot::before {
  content: "\1F525";
  font-size: 0.95em;
  line-height: 1;
}

.deal__titel {
  margin: 0;
  font-family: var(--ff-anzeige);
  font-size: var(--fs-600);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
  color: var(--c-text);
  text-wrap: balance;
}

/* --- Preistafel --------------------
   Neuer Preis gross, alter durchgestrichen daneben, Ersparnis in
   Geldfarbe. Die drei Werte stehen in einer Zeile, solange Platz ist.
   -------------------- */

.deal__preise {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background-color: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}

.deal__preis-jetzt {
  margin: 0;
  font-family: var(--ff-anzeige);
  font-size: var(--fs-700);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: var(--ls-tight);
  color: var(--c-text);
}

.deal__preis-vorher {
  margin: 0;
  font-size: var(--fs-400);
  color: var(--c-text-subtle);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.deal__ersparnis {
  margin: 0 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.2em var(--sp-3);
  background-color: var(--c-geld-soft);
  border-radius: var(--r-full);
  font-size: var(--fs-300);
  font-weight: var(--fw-bold);
  color: var(--c-geld-ink);
}

.deal__ersparnis::before {
  content: "\1F4B0";
  font-size: 0.95em;
  line-height: 1;
}

/* Zeile mit Quelle, Datum und Rabatt. */
.deal__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-200);
  color: var(--c-text-subtle);
}

.deal__autor {
  font-weight: var(--fw-semibold);
  color: var(--c-text-muted);
}

.deal__meta-trenner {
  color: var(--c-border-strong);
}

/* Die Karte im Goldrahmen (Deal des Tages). Der Rahmen selbst kommt aus
   layout.css, hier bekommt nur der Produktname etwas mehr Gewicht. */
.deal--gold .deal__titel {
  font-size: var(--fs-700);
}

/* Bildflaeche. Feste Proportion, damit beim Laden nichts springt.
   contain statt cover: Produktbilder werden sonst angeschnitten. */
.deal__media {
  position: relative;
  margin: var(--sp-4) 0 0;
  /* Breite folgt der Karte, Hoehe ist gedeckelt.

     Vorher stand hier aspect-ratio zusammen mit max-height. Beides zusammen
     deckelt auch die BREITE: die Bildflaeche blieb bei 563 px stehen, waehrend
     die Karte auf 933 px wuchs — rechts neben dem Bild klaffte dann eine
     Leere von 370 px, und der Miniaturenstreifen darunter begann versetzt.
     Am Bild gemessen bei 1000 px Fensterbreite. */
  width: 100%;
  height: clamp(12rem, 34vw, 22rem);
  background-color: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  overflow: hidden;
}

.deal__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform var(--dur-slow) var(--ease-soft);
}

@media (hover: hover) and (pointer: fine) {
  .deal:hover .deal__media img {
    transform: scale(1.02);
  }
}

/* --- 3b. Bildergalerie in der Karte --------------------
   Erst ab zwei Bildern sichtbar. Bei genau einem Bild nimmt app.js Zaehler,
   Pfeile und Streifen ganz aus der Karte heraus, damit nichts Leeres bleibt.
   -------------------- */

/* Beim Wechseln soll das Bild nicht mitzoomen wie beim Hover, sonst wirkt
   der Bildwechsel wie ein Ruckler. */
.deal__media--galerie img {
  transition: none;
}

@media (hover: hover) and (pointer: fine) {
  .deal:hover .deal__media--galerie img {
    transform: none;
  }
}

.deal__bildzaehler {
  position: absolute;
  right: var(--sp-3);
  bottom: var(--sp-3);
  margin: 0;
  padding: 0.2em var(--sp-3);
  background-color: var(--c-surface);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-full);
  font-size: var(--fs-100);
  font-weight: var(--fw-semibold);
  color: var(--c-text-muted);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.deal__bildpfeil {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background-color: var(--c-surface);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-full);
  box-shadow: var(--sh-1);
  color: var(--c-text);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  /* Auf dem Handy stoeren die Pfeile ueber dem Bild mehr, als sie helfen —
     dort wird ueber die Miniaturen gewechselt. */
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

.deal__bildpfeil--zurueck { left: var(--sp-3); }
.deal__bildpfeil--vor     { right: var(--sp-3); }

/* Sichtbar, sobald die Maus auf der Karte ist oder der Pfeil den
   Tastaturfokus hat. Ohne die Fokusregel waere er per Tastatur unsichtbar
   bedienbar, also praktisch nicht bedienbar. */
@media (hover: hover) and (pointer: fine) {
  .deal:hover .deal__bildpfeil { opacity: 1; }
}

.deal__bildpfeil:focus-visible { opacity: 1; }

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

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

.deal__miniatur {
  display: block;
  width: 4.5rem;
  padding: 0;
  aspect-ratio: 4 / 3;
  background-color: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.deal__miniatur img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (hover: hover) and (pointer: fine) {
  .deal__miniatur:hover {
    border-color: var(--c-accent);
    transform: translateY(-2px);
  }
}

/* Das gerade gezeigte Bild. Nicht nur Farbe: der Rahmen ist doppelt so
   dick, damit die Markierung auch ohne Farbwahrnehmung sichtbar ist. */
.deal__miniatur[aria-current="true"] {
  border-color: var(--c-accent-deep);
  box-shadow: 0 0 0 2px var(--c-accent-deep) inset;
}

/* --- 3c. SuperDeal: Abzeichen und Gutscheincode --------------------
   Beides steht nur an Deals aus der Kategorie mit  superdeal: true
   (assets/js/kategorien.js). Ohne Code nimmt app.js den Kasten heraus,
   das Abzeichen bleibt.

   Das Abzeichen steht an der Stelle der Kategoriezeile (app.js nimmt die
   dann heraus) und darf nicht mit dem Rabattband am anderen Ende derselben
   Zeile verwechselt werden. Deshalb ist es genau andersherum gebaut:

     Rabattband    HELLE Goldflaeche, dunkle Schrift, laeuft links spitz zu,
                   steht RECHTS in der Kopfzeile, traegt eine Zahl.
     Abzeichen     DUNKLE Goldschiene, helle Schrift, runde Kapsel, steht
                   LINKS in der Kopfzeile, traegt ein Wort.

   Farbe allein waere zu wenig: Form, Platz und Inhalt unterscheiden sie
   auch ohne Farbwahrnehmung.
   -------------------- */

.deal__super {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  margin: 0;
  padding: 0.34em var(--sp-4) 0.34em var(--sp-3);
  white-space: nowrap;
  background: var(--grad-knopf);
  color: var(--c-on-accent);       /* Weiss auf der dunklen Schiene, > 5,3:1 */
  border-radius: var(--r-full);
  font-size: var(--fs-200);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-weit);
  text-transform: uppercase;
  box-shadow: var(--sh-gold);
}

/* display: inline-flex wuerde das hidden-Attribut aushebeln. */
.deal__super[hidden] { display: none; }

/* Die Karte selbst bekommt den Goldrand. Im Goldrahmen des Tagesdeals
   nicht: dort setzt  .tagesdeal .deal  (layout.css) Rand und Schatten
   ohnehin zurueck, und zwar mit der hoeheren Spezifitaet — ein zweiter
   Rand im Rahmen waere eine Doppellinie. */
.deal--super {
  border-color: var(--c-gold-hell);
  box-shadow: var(--sh-gold);
}

/* Der Codekasten. Gestrichelter Rand wie bei einem Coupon — die Preistafel
   darueber hat einen durchgezogenen, die beiden sind so auf einen Blick
   auseinanderzuhalten. */
.deal__code {
  /* position und z-index sind kein Schmuck: sollte die Karte je als Ganzes
     anklickbar werden (eine Flaeche des Angebots-Links ueber der Karte),
     liegt der Kasten darueber und der Kopieren-Knopf bleibt erreichbar.
     Der Klick selbst wird zusaetzlich in app.js gestoppt. */
  position: relative;
  z-index: 1;
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  background-color: var(--c-gold-soft);
  border: 1px dashed var(--c-gold);
  border-radius: var(--r-md);
}

.deal__code[hidden] { display: none; }

.deal__code-titel {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-200);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-gold-ink);        /* 5,37:1 auf Weiss, 5,0:1 auf Goldsoft */
}

.deal__code-zeile {
  display: flex;
  flex-wrap: wrap;
  /* Oben buendig statt gestreckt: bricht ein langer Code auf zwei Zeilen,
     soll der Knopf nicht mitwachsen (Lehre vom 29.07. und 01.08.). */
  align-items: flex-start;
  gap: var(--sp-3);
}

/* Der Code selbst. Nichtproportional und gross, weil er abgetippt werden
   koennen muss: in dieser Groesse sind grosses I, kleines l und die Eins
   auseinanderzuhalten. Ligaturen aus, sonst verschmelzen manche Schriften
   Zeichenpaare. */
.deal__code-wert {
  flex: 1 1 12rem;
  min-width: 0;
  padding: var(--sp-3) var(--sp-4);
  background-color: var(--c-surface);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm);
  font-family: var(--ff-mono);
  font-size: var(--fs-500);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  line-height: 1.35;
  color: var(--c-text);
  font-variant-ligatures: none;
  overflow-wrap: anywhere;
  /* Ein Klick markiert den ganzen Code. Das ist der Rettungsweg, wenn das
     Kopieren im Browser nicht geht. */
  -webkit-user-select: all;
  user-select: all;
}

.deal__code-knopf {
  flex: 0 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  min-height: 54px;                /* so hoch wie das Codefeld daneben */
  padding: var(--sp-3) var(--sp-5);
  background: var(--grad-gold);
  border: 1px solid var(--c-gold-tief);
  border-radius: var(--r-full);
  /* Bewusst die HELLE Goldschiene mit dunkler Schrift: "Zum Angebot"
     darunter ist die dunkle. Zwei gleich aussehende Knoepfe uebereinander
     waeren genau die Verwechslung, die hier teuer ist. */
  color: var(--c-on-gold);
  font: inherit;
  font-size: var(--fs-300);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  cursor: pointer;
  box-shadow: var(--sh-1);
  transition: filter var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.deal__code-knopf::before {
  content: "\1F4CB";               /* Klemmbrett */
  font-size: 1.05em;
  line-height: 1;
}

@media (hover: hover) and (pointer: fine) {
  .deal__code-knopf:hover {
    filter: brightness(1.06);
    border-color: var(--c-gold-ink);
  }
}

.deal__code-knopf:active {
  transform: scale(0.98);
}

/* Geschafft. Nicht nur die Farbe wechselt, auch das Zeichen davor und das
   Wort — sonst waere die Rueckmeldung ohne Farbwahrnehmung unsichtbar. */
.deal__code-knopf.is-kopiert {
  background: var(--c-geld-soft);
  border-color: var(--c-geld-ink);
  color: var(--c-geld-ink);        /* 5,29:1 auf Weiss, 5,0:1 auf Geldsoft */
}

.deal__code-knopf.is-kopiert::before {
  content: "\2714";                /* Haken */
}

.deal__code-nutzen {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-300);
  font-weight: var(--fw-semibold);
  color: var(--c-text);
}

.deal__code-nutzen[hidden] { display: none; }

/* Der feste Satz zur Gueltigkeit. Steht immer da, kommt nie aus den Daten. */
.deal__code-fest {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-200);
  line-height: var(--lh-normal);
  color: var(--c-text-muted);      /* 7,3:1 auf Weiss, 6,9:1 auf Goldsoft */
}

.deal__code-status {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-200);
}

.deal__code-status--fehler {
  color: var(--c-hot);             /* 5,99:1 auf Weiss, 5,6:1 auf Goldsoft */
  font-weight: var(--fw-semibold);
}

/* Auf dem Handy stehen Codefeld und Knopf untereinander. Dann soll der
   Knopf die volle Breite haben statt halb neben dem Rand zu haengen. */
@media (max-width: 479px) {
  .deal__code-knopf {
    flex: 1 1 100%;
  }
}

.deal__text {
  margin-top: var(--sp-4);
}

.deal__empfehlung,
.deal__langtext {
  margin: 0;
  font-size: var(--fs-400);
  line-height: var(--lh-normal);
  color: var(--c-text-muted);
  text-wrap: pretty;
}

.deal__langtext {
  margin-top: var(--sp-3);
  /* Neue Zeilen aus dem Editor bleiben erhalten, ohne dass HTML im Text
     landet — der Wert wird per textContent gesetzt. */
  white-space: pre-line;
}

/* Zeigt an, dass der Text weitergeht. Steht nur da, wenn es wirklich mehr
   gibt, und verschwindet beim Aufklappen. */
.deal__gekuerzt {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-400);
  font-weight: var(--fw-bold);
  color: var(--c-text-subtle);
  letter-spacing: 0.08em;
}

/* Nur noch das Pruefdatum. Die Ersparnis ist in die Preistafel gewandert,
   weil sie dort neben den beiden Preisen steht, auf die sie sich bezieht. */
.deal__zahlen {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-4);
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-200);
  font-variant-numeric: tabular-nums;
}

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

/* Knopfzeile: Angebot fuehrt, Weiterlesen daneben. */
.deal__aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

.deal__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  /* 9rem statt 14rem, seit "Datenblatt" daneben steht: Mit 14rem sprang der
     zweite Knopf in schmalen Karten immer in die naechste Zeile. */
  flex: 1 1 9rem;
  min-height: 54px;
  padding: var(--sp-3) var(--sp-6);
  background: var(--grad-knopf);
  color: var(--c-on-accent);
  border-radius: var(--r-full);
  /* Bewusst gross und fett: in dieser Groesse gilt der Text als "gross" im
     Sinne der Kontrastregel, damit reicht der Verlauf an jedem Punkt. */
  font-size: var(--fs-500);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  text-align: center;
  text-decoration: none;
  box-shadow: var(--sh-1);
  transition: filter var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-instant) var(--ease-out);
}

.deal__cta::after {
  /* Pfeil als reines CSS-Zeichen, spart ein SVG je Karte. */
  content: "";
  width: 0.45em;
  height: 0.45em;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--dur-fast) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .deal__cta:hover {
    filter: brightness(1.08);
    box-shadow: var(--sh-2);
    color: var(--c-on-accent);
  }

  .deal__cta:hover::after {
    transform: rotate(45deg) translate(3px, -3px);
  }
}

.deal__cta:active {
  transform: scale(0.99);
}

/* --- Datenblatt auf der Rueckseite (11.08.2026) -----------------------

   Fatih: "ein button mit Datenblatt und dann dreht sich quasie die Kachel".

   Die Drehung laeuft in zwei Halbschritten (siehe datenblattBauen in
   app.js): Die Karte kippt bis hochkant, dort tauscht das Skript den
   Inhalt, dann kippt sie zurueck. Deshalb steht hier nur EIN Uebergang und
   keine Rueckseiten-Geometrie. Ein echter Flip mit preserve-3d wuerde
   verlangen, dass beide Seiten uebereinanderliegen, und dann bestimmt die
   Vorderseite die Hoehe: Ein langes Datenblatt waere abgeschnitten.

   Die Perspektive gehoert an das Listenelement, nicht an die Karte selbst.
   Ein Element kann sich nicht in seiner eigenen Perspektive drehen. */

.deal-item {
  perspective: 1200px;
}

.deal {
  transition: transform var(--dur-fast) var(--ease-out);
  transform-origin: center center;
}

.deal.is-drehend {
  transform: rotateY(90deg);
}

/* Wer Bewegung reduziert haben will, bekommt den geraden Wechsel. Der
   Inhalt ist derselbe, nur ohne Kipper. */
@media (prefers-reduced-motion: reduce) {
  .deal {
    transition: none;
  }
  .deal.is-drehend {
    transform: none;
  }
}

.deal__blatt-kopf {
  margin-bottom: var(--sp-4);
}

.deal__blatt-titel {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-200);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-accent-dunkel, var(--c-accent));
}

/* Hier steht der VOLLE Amazon-Titel, seit dem 13.08.2026 auch der einzige
   Ort dafuer: vorn auf der Karte steht der kurze Name. Deshalb eine Stufe
   kleiner gesetzt als der Titel auf der Vorderseite, er ist hier Beleg und
   nicht Ueberschrift, und die Eckdaten darunter sind das Wichtige. */
.deal__blatt-name {
  margin: 0;
  font-size: var(--fs-300);
  font-weight: var(--fw-bold);
  line-height: 1.35;
  /* Amazon-Titel enthalten Modellbezeichnungen ohne Leerzeichen. */
  overflow-wrap: anywhere;
}

/* Zwei Spalten: Merkmal links, Wert rechts. Bei schmalen Karten stehen sie
   untereinander.

   Die Merkmalspalte stand bis zum 13.08.2026 auf minmax(6rem, 40%) OHNE
   Umbruchregel. Ein Merkmal, das laenger als die Spalte ist, bricht damit
   nicht um, sondern laeuft darueber hinaus: Auf Fatihs Bild vom 13.08. lag
   "Geraeuschunterdrueckung" quer ueber dem Wert "ja". Ein Raster gibt einer
   Spalte keine Breite dazu, es laesst den Inhalt herausstehen. Zwei Dinge
   noetig: eine Spalte, die fuer die ueblichen Merkmale reicht, UND die
   Erlaubnis, im Wort zu trennen, wenn es doch nicht passt. */
.deal__blatt-liste {
  display: grid;
  grid-template-columns: minmax(7rem, 44%) 1fr;
  gap: var(--sp-2) var(--sp-4);
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-300);
}

.deal__blatt-merkmal {
  margin: 0;
  color: var(--c-text-muted);
  overflow-wrap: anywhere;
  /* Trennt bevorzugt an Silben statt irgendwo, wo gerade Schluss ist.
     Ohne lang-Angabe am <html> tut Chromium nichts, die steht in
     index.html als lang="de". */
  hyphens: auto;
}

.deal__blatt-wert {
  margin: 0;
  color: var(--c-text);
  font-weight: var(--fw-semibold);
  /* Lange Werte ohne Leerzeichen (Modellnummern) sprengen sonst die Karte. */
  overflow-wrap: anywhere;
}

@media (max-width: 480px) {
  .deal__blatt-liste {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .deal__blatt-merkmal {
    margin-top: var(--sp-3);
  }
}

.deal__blatt-herkunft {
  margin: 0;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-border);
  font-size: var(--fs-200);
  color: var(--c-text-subtle);
}

/* Zum Angebot und Datenblatt stehen in EINER Reihe und sind gleich hoch
   (Fatih: "versuch aber alles einheitlich in eine reihe zu positionieren").
   Deshalb hier dieselbe Mindesthoehe wie beim CTA und eine Grundbreite, die
   nebeneinander passt; erst wenn die Karte schmaler als rund 22 rem wird,
   bricht die Zeile um. */
/* Klein und aus Glas mit Goldkante, nicht noch ein grosser Knopf daneben
   (Fatih: "kleiner machen und stylisher"). Er steht neben dem Hauptknopf und
   soll ihn nicht verdoppeln: kleinere Schrift, weniger Innenmass, keine
   Versalien mit Sperrsatz. 44 px hoch bleibt er trotzdem, das ist die
   Untergrenze fuer einen Daumen. */
.deal__blatt-knopf,
.deal__blatt-zurueck {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  min-height: 48px;
  padding: var(--sp-2) var(--sp-4);
  background: var(--glas);
  -webkit-backdrop-filter: var(--glas-blur);
  backdrop-filter: var(--glas-blur);
  border: 1px solid var(--glas-kante-gold);
  border-radius: var(--r-full);
  box-shadow: var(--sh-glas);
  color: var(--c-accent-dunkel, var(--c-accent));
  font: inherit;
  font-size: var(--fs-200);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}

.deal__blatt-knopf .emoji {
  font-size: 0.95em;
}

@media (hover: hover) and (pointer: fine) {
  .deal__blatt-knopf:hover,
  .deal__blatt-zurueck:hover {
    border-color: var(--c-accent);
    color: var(--c-text);
    box-shadow: var(--sh-glas-gold, var(--sh-glas));
  }
}

/* Auf der Rueckseite ist "Zurueck" die Hauptsache, nicht der Weg zu Amazon:
   Wer das Datenblatt aufschlaegt, will lesen. Deshalb steht der
   Zurueck-Knopf oben und der Partnerlink darunter.

   FUND AM BILD (11.08.2026): Ohne die beiden Zeilen unten blies sich der
   Zurueck-Knopf zu einem riesigen Oval auf. `.deal__aktionen` steht auf
   `align-items: stretch`, und weil die Rueckseite kuerzer ist als die Karte,
   bekam die Knopfzeile die ganze Resthoehe. Kein Test haette das gezeigt,
   die Hoehe stand nirgends im Markup. */
/* FUND AM BILD, zweiter Anlauf (11.08.2026): `align-items` allein reichte
   nicht. `.deal__aktionen` steht auf `flex-wrap: wrap`, und in einem
   umbrechenden Flex-Kasten bestimmt `align-content` die Hoehe der ZEILEN.
   Das stand auf stretch, also bekam die einzige Zeile die ganze Resthoehe
   der Karte und der Zurueck-Knopf wurde zu einem 140 px hohen Oval.
   Beide Zeilen sind noetig, `align-items` fuer die Elemente in der Zeile,
   `align-content` fuer die Zeile selbst. */
.deal__hinten .deal__aktionen {
  align-items: start;
  align-content: start;
  margin-top: var(--sp-4);
}

/* Auf der Rueckseite stehen die Knoepfe genauso wie vorne: eine Reihe,
   gleiche Hoehe, "Zum Angebot" links, der zweite Knopf rechts (Fatih,
   11.08.2026). Im Markup steht "Karte umdrehen" zuerst, weil es dort der
   naechstliegende Weg ist; die Reihenfolge auf dem Bildschirm dreht order. */
.deal__blatt-zurueck {
  flex: 1 1 9rem;
}

.deal__cta--hinten {
  flex: 1 1 9rem;
  order: -1;
  font-size: var(--fs-400);
}

/* "Weiterlesen" ist seit dem 11.08.2026 kein Knopf mehr, sondern ein Link
   direkt unter dem Text (Fatih: "Weiterlesen sollte nur beim text klein
   stehen und wie ein link"). Unten bleiben genau zwei gleich grosse Knoepfe
   nebeneinander stehen: Zum Angebot und Datenblatt.

   Blau steht nicht zur Wahl: Auf einer Seite in Champagner und Gold ist Blau
   die einzige Farbe, die von nirgendwo kommt. Genommen ist die Akzentfarbe,
   in der auf dieser Seite jeder Link steht, mit Unterstreichung, damit er
   auch ohne Farbe als Link erkennbar bleibt. */
.deal__mehr {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  margin-top: var(--sp-2);
  padding: var(--sp-1) 0;
  /* 44 px Trefferflaeche, ohne dass der Link aussieht wie ein Kasten. */
  min-height: 44px;
  background: none;
  border: 0;
  color: var(--c-accent-dunkel, var(--c-accent));
  font: inherit;
  font-size: var(--fs-300);
  font-weight: var(--fw-semibold);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}

.deal__mehr::after {
  content: "";
  width: 0.42em;
  height: 0.42em;
  border-bottom: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translateY(-0.12em) rotate(45deg);
  transition: transform var(--dur-fast) var(--ease-out);
}

.deal__mehr[aria-expanded="true"]::after {
  transform: translateY(0.08em) rotate(-135deg);
}

@media (hover: hover) and (pointer: fine) {
  .deal__mehr:hover {
    border-color: var(--c-accent);
    color: var(--c-text);
  }
}

/* Hervorhebung nach einem Deep-Link-Sprung. */
.deal.is-highlighted::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 3px var(--c-accent);
  pointer-events: none;
  animation: deal-puls 600ms var(--ease-in-out) 2;
}

@keyframes deal-puls {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 1; }
}

/* Ausblenden beim Filtern, ohne Layoutsprung waehrend der Blende. */
.deal-item {
  transition: opacity var(--dur-fast) var(--ease-out);
}

.deal-item.is-ausgeblendet {
  opacity: 0;
}

/* --- 4. Argument- und Schrittkarten -------------------- */

.schritt__titel {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-400);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-snug);
}

.argument__text,
.schritt__text {
  margin: 0;
  font-size: var(--fs-300);
  color: var(--c-text-muted);
}

.argument {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  height: 100%;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .argument:hover {
    border-color: var(--c-border-strong);
    box-shadow: var(--sh-2);
  }
}

.argument__zeichen {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  background: var(--grad-gold);
  border-radius: var(--r-md);
  font-size: 1.25rem;
  box-shadow: var(--sh-1);
}

.argument__titel {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-400);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-snug);
}

.schritt {
  position: relative;
  height: 100%;
  padding: var(--sp-5);
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
}

.schritt__nummer {
  display: block;
  margin-bottom: var(--sp-3);
  font-size: var(--fs-600);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-tight);
  line-height: 1;
  /* subtle statt border-strong: die Schrittnummer ist Text und muss lesbar
     bleiben, nicht nur angedeutet. */
  color: var(--c-text-subtle);
  font-variant-numeric: tabular-nums;
}

/* --- 5. Leerzustand -------------------- */

.leerzustand {
  padding: var(--sp-8) var(--sp-5);
  background-color: var(--c-surface);
  border: 1px dashed var(--c-border-strong);
  border-radius: var(--r-lg);
  text-align: center;
}

.leerzustand__titel {
  margin: 0;
  font-size: var(--fs-500);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-snug);
  text-wrap: balance;
}

.leerzustand__text {
  margin: var(--sp-3) auto 0;
  max-width: 52ch;
  font-size: var(--fs-300);
  color: var(--c-text-muted);
}

/* --- 6. Hinweiskasten (Impressum, Datenschutz) -------------------- */

.hinweis {
  padding: var(--sp-5);
  margin-block: var(--sp-5);
  background-color: var(--c-accent-soft);
  border: 1px solid var(--c-accent);
  border-radius: var(--r-lg);
}

.hinweis__titel {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-400);
  font-weight: var(--fw-bold);
  color: var(--c-text);
}

.hinweis p {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-300);
  color: var(--c-text);
}

.hinweis p:last-child {
  margin-bottom: 0;
}

.hinweis ul {
  margin: 0;
  padding-left: var(--sp-5);
  font-size: var(--fs-300);
  color: var(--c-text);
}

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

/* Auszufuellende Stelle, im Text unuebersehbar markiert. */
.platzhalter {
  display: inline-block;
  padding: 0.1em 0.45em;
  background: var(--grad-knopf);
  color: var(--c-on-accent);
  border-radius: var(--r-sm);
  font-weight: var(--fw-bold);
  font-size: 0.95em;
}

/* --- Einwilligung (11.08.2026) ---------------------------------------

   Das Fenster, das nach der Zustimmung zum Meta-Pixel fragt. Gebaut wird es
   in assets/js/consent.js, hier steht nur das Aussehen.

   ZWEI ENTSCHEIDUNGEN, DIE KEINE GESCHMACKSFRAGE SIND:

   1. Die Flaeche ist --glas-dicht, nicht --glas. Im Token steht, was jede
      Dichte tragen darf: Fliesstext erst ab dicht. Am 09.08. las sich durch
      die duennere Kategorieleiste der Seitentext mit — hier laeuft beim
      Rollen die ganze Seite darunter durch, also gilt die dichteste Stufe.

   2. Die beiden Knoepfe sind gleich gross, gleich fett und liegen
      nebeneinander auf einer Hoehe. Ein kleinerer oder blasserer
      Ablehnen-Knopf macht die Einwilligung angreifbar — sie gilt dann nicht
      mehr als freiwillig. Nur der Farbton unterscheidet sie.

   Das Fenster sitzt unten und laesst die Seite lesbar: Wer nur lesen will,
   muss nichts anklicken. Deshalb auch kein dunkler Schleier ueber der Seite.
   -------------------------------------------------------------------- */

.einwilligung {
  position: fixed;
  z-index: 90;
  left: var(--sp-4);
  right: var(--sp-4);
  bottom: var(--sp-4);
  display: flex;
  justify-content: center;
  /* Der Kasten selbst faengt Klicks, die Flaeche daneben nicht — sonst waere
     die halbe Seite unklickbar, obwohl dort nichts steht. */
  pointer-events: none;
}

/* AM BILD KORRIGIERT (11.08.2026): Hier stand zuerst --glas-dicht (0,88).
   Gemessen lagen an 11 Punkten Seitentexte unter der Tafel — "1.100,00 €",
   "Höchster Rabatt", "Klickfund in Zahlen" —, und die 12 % Rest reichen, um
   sie mitzulesen. Auf der Aufnahme stand "8.2026" quer im Kasten.

   Anders als bei der Kategorieleiste am 09.08. gibt es hier keinen Zustand,
   in dem nichts darunter liegt: Die Tafel steht immer ueber dem Inhalt. Also
   weicht der Effekt hier ganz, nicht nur in einem Zustand. Was bleibt, ist
   die Lichtkante und der Schatten — das Glas-Aussehen ohne die
   Durchsichtigkeit.

   Ohne durchscheinenden Grund hat backdrop-filter nichts mehr zu tun. Er ist
   deshalb raus, nicht bloss ueberdeckt: Er kostet auf schwachen Geraeten
   Rechenzeit fuer eine Wirkung, die niemand sehen kann. */
.einwilligung__innen {
  pointer-events: auto;
  width: min(46rem, 100%);
  padding: var(--sp-5);
  border: 1px solid var(--glas-kante);
  border-radius: var(--r-lg);
  background-color: #FFFDF7;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 55%);
  box-shadow: var(--sh-glas-hoch);
}

.einwilligung__titel {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-500);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  color: var(--c-text);
}

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

.einwilligung__text--klein {
  font-size: var(--fs-200);
  color: var(--c-text-subtle);
}

.einwilligung__link {
  display: inline-block;
  margin-bottom: var(--sp-4);
  font-size: var(--fs-200);
  font-weight: var(--fw-semibold);
  color: var(--c-gold-ink);
}

.einwilligung__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

/* flex: 1 1 12rem auf BEIDEN: Sie teilen sich die Zeile zu gleichen Teilen
   und brechen gemeinsam um. Damit kann keiner der beiden im schmalen Fenster
   groesser werden als der andere. */
.einwilligung__knopf {
  flex: 1 1 12rem;
  min-height: 52px;
  font-size: var(--fs-400);
  font-weight: var(--fw-bold);
}

.einwilligung__knopf--haupt {
  background: var(--grad-knopf);
  color: var(--c-on-accent);
  box-shadow: var(--sh-1);
}

/* AM BILD KORRIGIERT (11.08.2026): Hier stand zuerst ein weisser Knopf mit
   Goldrand. Gemessen war alles gleich — Hoehe, Breite, Schriftgroesse,
   Schriftstaerke; das Pruefwerkzeug meldete gruen. Auf dem Bild war es
   trotzdem nicht gleichwertig: ein gefuellter Knopf neben einem umrandeten
   liest sich als Haupt- und Nebenweg, und genau darauf zielt die
   Anforderung, dass Ablehnen so leicht sein muss wie Zustimmen.

   Beide sind jetzt gefuellt und unterscheiden sich nur im Farbton. Das ist
   der Fall, in dem eine Zahl gruen ist und das Auge widerspricht — dann
   gilt das Auge. */
.einwilligung__knopf--zweit {
  background: linear-gradient(135deg, #3A332A 0%, #211C15 62%, #16130C 100%);
  border-color: transparent;
  color: var(--c-text-invert);
  box-shadow: var(--sh-1);
}

@media (hover: hover) and (pointer: fine) {
  .einwilligung__knopf--haupt:hover { filter: brightness(1.06); box-shadow: var(--sh-gold); }
  .einwilligung__knopf--zweit:hover { filter: brightness(1.35); box-shadow: var(--sh-2); }
}

/* Der Widerrufs-Knopf in der Fusszeile sieht aus wie die Links daneben —
   er steht in derselben Liste wie Impressum und Datenschutz. */
.einwilligung__widerruf {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

@media (max-width: 30rem) {
  .einwilligung {
    left: 0;
    right: 0;
    bottom: 0;
  }
  .einwilligung__innen {
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    padding: var(--sp-4);
  }
}

/* --- Kompakte Deal-Karte im mehrspaltigen Raster (11.08.2026) ---------

   Sobald zwei oder drei Karten nebeneinander stehen, ist eine Karte nur
   noch rund 280 bis 410 px breit statt 795. Die Masse, die fuer die grosse
   Karte gebaut waren, passen dort nicht mehr: Das Bild war mit bis zu 22rem
   hoeher als die halbe Karte, und der Knopf mit 54 px Hoehe und fs-500
   sprengte die Zeile.

   JEDE REGEL HIER HAENGT AN .deal-feed--raster. Dieselbe Karte steht auch
   in der VORSCHAU DES EDITORS, die diese Datei bewusst mitlaedt, damit
   Dario sieht was er baut — dort hat sie die volle Breite und muss so
   bleiben.

   Gedreht wird nur an Groessen, nicht an der Anordnung — die Karte bleibt
   dieselbe Karte, sie wird kleiner. So gilt jede Regel von oben weiter.
   -------------------------------------------------------------------- */

/* --- Gleiche Hoehe, und zwar gefuellt statt gestreckt ------------------

   Fatih: "manche Angebote sind laenger und mal kuerzer. Mach bitte alle in
   einer einheitlichen Groesse, das sieht ja sonst schrecklich aus."

   Drei Dinge zusammen ergeben das, und alle drei werden gebraucht:

     1. Die Karte fuellt ihre Rasterzelle ganz aus (height: 100%).
     2. Sie ist eine Flexspalte, und die Knopfzeile bekommt margin-top:auto.
        Dadurch sammelt sich die ueberschuessige Hoehe VOR dem Knopf, statt
        als Loch in der Mitte zu stehen — und die Knoepfe aller Karten
        liegen auf einer Linie.
     3. Die beiden Texte laufen auf eine feste Zeilenzahl. Ohne das
        bestimmt die laengste Beschreibung die Hoehe ALLER Karten, und aus
        "einheitlich" wird "einheitlich riesig". Der ganze Text bleibt
        ueber "Weiterlesen" erreichbar, es wird nichts geloescht.
   -------------------------------------------------------------------- */

.deal-feed--raster .deal-item {
  height: 100%;
}

.deal-feed--raster .deal {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Die Karte ist eine Flexspalte (siehe oben). Seit Vorder- und Rueckseite
   getrennt sind, sitzt .deal__vorn dazwischen und muss die Spalte
   fortsetzen. Ohne das wirkt `margin-top: auto` an der Knopfzeile nicht
   mehr, und die Knoepfe stehen in jeder Karte auf einer anderen Hoehe. */
.deal-feed--raster .deal__vorn,
.deal-feed--raster .deal__hinten {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.deal-feed--raster .deal__aktionen {
  margin-top: auto;

  /* EINE Reihe, zwei gleich breite Knoepfe (Fatih, 11.08.2026: "versuch
     aber alles einheitlich in eine reihe zu positionieren. Angebot und
     Datenblatt").

     Hier stand bis heute `column-reverse`, weil "Weiterlesen" als Knopf
     danebenstand und die Karten sonst zwei verschiedene Knopflinien hatten.
     "Weiterlesen" ist jetzt ein Link beim Text, damit ist der Grund weg.

     `flex-direction: row` MUSS hier stehen: Ohne die Zeile bleibt die alte
     Spaltenrichtung, und dann liest der Browser die Grundbreite der Knoepfe
     (9rem) als HOEHE. Genau daher kam Fatihs "Button Datenblatt ist zu
     ueberdimensioniert gross". */
  /* Zwei Spalten statt Flex. Mit Flex blieben die Knoepfe verschieden breit
     (gemessen 149 gegen 167 px), weil der eine ein Zeichen mehr traegt und
     seine Mindestbreite das Schrumpfen verhindert. Ein Raster mit 1fr 1fr
     macht sie exakt gleich, ohne Rechnerei.
     `align-items: start` gehoert dazu: sonst zieht die Zeile die Knoepfe auf
     die volle Resthoehe der Karte, gemessen 77 statt 54 px. Genau das war
     Fatihs "zu ueberdimensioniert gross". */
  /* Der Angebots-Knopf nimmt den Platz, das Datenblatt nur so viel wie sein
     Text braucht (Fatih: "den button fuer Datenblatt noch kleiner machen").
     Der Hauptknopf bleibt damit der Hauptknopf. */
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
}

/* Hat eine Karte kein Datenblatt, steht dort nur der Angebots-Knopf. Er
   nimmt dann die ganze Zeile, statt auf der halben Breite zu enden. */
.deal-feed--raster .deal__aktionen:not(:has(.deal__blatt-knopf)):not(:has(.deal__blatt-zurueck)) {
  grid-template-columns: 1fr;
}

/* Muss mit, sonst wird der Knopf 224 px HOCH.

   .deal__cta traegt fuer die breite Karte `flex: 1 1 14rem`. In einer Zeile
   ist 14rem eine Mindest-BREITE; sobald die Knopfzeile eine Spalte ist,
   liest der Browser dieselbe Zahl als HOEHE. Beim Messen sprang die
   Kartenhoehe von 759 auf 933 px — sichtbar wurde es erst an der Zahl,
   das Bild sah nur "etwas grosszuegig" aus. */
.deal-feed--raster .deal__cta {
  /* "Zum Angebot" gehoert in EINE Zeile (Fatih, 11.08.2026). In der schmalen
     Rasterkarte brach es sonst nach "Zum" um. Deshalb nowrap, dazu etwas
     kleinere Schrift und schmaleres Innenmass, damit es auch bei drei
     Spalten nebeneinander passt. */
  flex: 1 1 0;
  min-width: 0;
  padding-inline: var(--sp-4);
  font-size: var(--fs-400);
  white-space: nowrap;
}

/* Der Titel soll ganz lesbar sein (Fatih, 11.08.2026: "kannst du die
   ueberschrift bei den angeboten anpassen und kleiner machen das man alles
   lesen kann").

   Warum das ueberhaupt ein Problem war: Die Titel kommen unveraendert von
   Amazon und sind bis zu 120 Zeichen lang, im Schnitt 75. Bei zwei Zeilen in
   der grossen Anzeigenschrift passten davon rund 50 Zeichen, also wurden 14
   von 23 Titeln abgeschnitten.

   Zwei Schritte statt einem: kleinere Schrift UND vier Zeilen. Nur mehr
   Zeilen haetten die Karte in die Hoehe getrieben, nur kleinere Schrift
   haette nicht gereicht. Die Karten bleiben gleich hoch, weil das Raster
   ohnehin auf einheitliche Hoehe steht. */
/* Feste Hoehe fuer den Titelblock, nicht nur eine Obergrenze.

   Fatih am 11.08.2026: "bitte bilder auch wieder in gleicher ebene in einer
   reihe positionieren weil wo jetzt die schrift kleiner geworden ist, sind
   die bilder mal hoeher mal tiefer."

   Der Grund: Ein Titel darf jetzt bis zu fuenf Zeilen hoch werden, und jede
   Karte nimmt so viele Zeilen, wie ihr Titel braucht. Damit beginnt das Bild
   in jeder Karte woanders. Eine Obergrenze allein loest das nicht, es braucht
   dieselbe Hoehe fuer ALLE. Kurze Titel lassen darunter Luft, dafuer liegen
   Bild, Preis und Knopf auf einer Linie. Das ist der Tausch, und er ist
   bewusst so herum: Eine Reihe Karten liest man von links nach rechts. */
.deal-feed--raster .deal__titel {
  font-size: var(--fs-400);
  letter-spacing: normal;
  min-height: calc(3 * var(--lh-snug) * 1em);
}

/* DREI ZEILEN, nicht mehr fuenf (13.08.2026).

   Der Platz war fuer volle Amazon-Titel mit bis zu 120 Zeichen gedacht.
   Vorn steht jetzt der Kurztitel, laengster im Bestand 53 Zeichen. Die
   reservierten fuenf Zeilen standen damit in JEDER Karte zur Haelfte leer,
   am Bild gemessen rund 250 px zwischen Titel und Datum. Das ist genau die
   Laenge, ueber die Fatih sich beschwert hat ("die Angebote haben viel Text
   und sind daher sehr lang").

   Die feste Hoehe BLEIBT, sie ist Fatihs Entscheidung vom 11.08.2026: Ohne
   sie beginnt das Bild in jeder Karte auf einer anderen Hoehe. Nur der Wert
   sinkt. */
.deal-feed--raster .deal__titel-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  /* Lange Modellbezeichnungen ohne Leerzeichen sprengen sonst die Karte. */
  overflow-wrap: anywhere;
}

/* Ab 1280 px stehen DREI Karten nebeneinander, die einzelne ist dann rund
   350 px breit. Nachgemessen: mit vier Zeilen waren dort noch 8 von 12
   Titeln abgeschnitten, bei zwei Spalten dagegen keiner. Deshalb bekommt
   nur diese Breite eine Stufe kleinere Schrift und eine Zeile mehr.
   Der Wert steht bewusst am selben Haltepunkt wie das dreispaltige Raster
   in layout.css Zeile 1362: Wer dort etwas aendert, muss hier nachsehen. */
@media (min-width: 1280px) {
  .deal-feed--raster .deal__titel {
    font-size: var(--fs-300);
    /* Eine Zeile mehr als in den breiteren Karten: Bei drei Spalten ist die
       einzelne Karte rund 350 px breit, dort braucht ein Kurztitel von 53
       Zeichen eine Zeile mehr. Nachgemessen, nicht geschaetzt. */
    min-height: calc(4 * var(--lh-snug) * 1em);
  }
  .deal-feed--raster .deal__titel-name {
    -webkit-line-clamp: 4;
    line-clamp: 4;
  }
}

/* Die Empfehlung auf drei Zeilen. Gilt nur, solange der Langtext
   eingeklappt ist — wer "Weiterlesen" drueckt, sieht alles. */
.deal-feed--raster .deal__langtext[hidden] ~ .deal__empfehlung,
.deal-feed--raster .deal__empfehlung {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.deal-feed--raster .deal__text:has(.deal__langtext:not([hidden])) .deal__empfehlung {
  display: block;
  overflow: visible;
}

@media (min-width: 640px) {
  .deal-feed--raster .deal {
    padding: var(--sp-4);
  }

  /* Das Bild folgt jetzt der Kartenbreite statt einer festen Hoehe:
     3:2 ist das Verhaeltnis, in dem die Deal-Bilder erzeugt werden. Eine
     feste Hoehe wuerde bei 280 px Breite hochkant wirken. */
  .deal-feed--raster .deal__media {
    height: auto;
    aspect-ratio: 3 / 2;
    margin-top: var(--sp-3);
  }

  .deal-feed--raster .deal__titel {
    font-size: var(--fs-500);
  }

  .deal-feed--raster .deal__preis-jetzt {
    font-size: var(--fs-600);
  }

  .deal-feed--raster .deal__cta {
    min-height: 46px;
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-400);
  }

  /* Der Miniaturenstreifen unter dem Bild braucht Platz, den es in einer
     schmalen Karte nicht gibt. Die Bilder sind ueber die Pfeile im Bild
     weiterhin alle erreichbar — es verschwindet nur die zweite Bedienung
     derselben Sache, nicht der Zugang zu den Bildern. */
  .deal-feed--raster .deal__galerie {
    display: none;
  }
}

/* Der Kopf der Karte bricht um, statt das Rabattband abzuschneiden.

   Am Bild gefunden (11.08.): Bei 233 px Kartenbreite stand in der Karte
   "Kabelkanal Set" nur noch "KABELMANAGEMENT -34" — das Prozentzeichen und
   der rechte Rand des Bandes lagen ausserhalb der Karte. Kategorie und
   Band standen in einer nicht umbrechenden Zeile. */
.deal__kopf {
  flex-wrap: wrap;
}

.deal__kategorie {
  min-width: 0;
}

/* Die Kennzeichnung ueber der Deal-Liste (11.08.2026).

   Sie ersetzt das Wort "Werbung" unter jeder einzelnen Karte. Damit sie das
   auch wirklich kann, ist sie bewusst NICHT kleingedruckt: gleiche
   Schriftgroesse wie der Fliesstext, eigener Kasten, direkt ueber dem ersten
   Angebot. Eine Kennzeichnung, die man ueberliest, ist keine. */
.dealhinweis {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background-color: var(--c-gold-soft);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
  color: var(--c-text-muted);
  font-size: var(--fs-300);
  line-height: var(--lh-normal);
}

.dealhinweis strong {
  color: var(--c-text);
}

/* --- Das Einwilligungsfenster sperrt die Seite (11.08.2026) -------------

   Fatih: "cookie aufforderung muss als erstes in vorschein kommen und ohne
   auswahl darf nix weiter anklickbar sind."

   Aus der Leiste unten ist damit ein echtes Fenster in der Mitte geworden,
   mit Vorhang darueber. Die Knoepfe bleiben unveraendert gleichwertig — das
   ist bei einer Sperre WICHTIGER als vorher, nicht unwichtiger: Wer nicht
   weiterkommt, ohne zu klicken, muss beide Wege gleich leicht haben.
   ---------------------------------------------------------------------- */

/* Rollen anhalten, solange gefragt wird. Sonst faehrt die Seite unter dem
   Vorhang weg und wirkt kaputt. */
.einwilligung-offen,
.einwilligung-offen body {
  overflow: hidden;
}

.einwilligung {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);

  /* Der Vorhang. Er faengt jeden Mausklick ab — die Tastatur sperrt
     `inert` in consent.js, ein Vorhang allein reicht dafuer nicht. */
  background-color: rgba(22, 19, 12, 0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);

  /* Anders als bei der frueheren Leiste faengt hier die GANZE Flaeche
     Klicks — das ist der Zweck. */
  pointer-events: auto;
  overflow-y: auto;
}

.einwilligung__innen {
  pointer-events: auto;
  width: min(38rem, 100%);
  margin: auto;
  padding: var(--sp-5);
  border: 1px solid var(--glas-kante);
  border-radius: var(--r-lg);
  background-color: #FFFDF7;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 55%);
  box-shadow: var(--sh-3);
}

/* Auf schmalen Geraeten sitzt das Fenster unten und nutzt die volle
   Breite — dort ist ein zentriertes Kaestchen mit Rand ringsum nur
   verschenkter Platz. */
@media (max-width: 30rem) {
  .einwilligung {
    align-items: flex-end;
    padding: 0;
  }

  .einwilligung__innen {
    width: 100%;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    padding: var(--sp-4);
  }
}