@font-face { font-family: Figtree; font-style: normal; font-weight: 400;
             font-display: swap; src: url(../schrift/figtree-400.woff2) format('woff2'); }
@font-face { font-family: Figtree; font-style: normal; font-weight: 500;
             font-display: swap; src: url(../schrift/figtree-500.woff2) format('woff2'); }
@font-face { font-family: Figtree; font-style: normal; font-weight: 600;
             font-display: swap; src: url(../schrift/figtree-600.woff2) format('woff2'); }
@font-face { font-family: Figtree; font-style: normal; font-weight: 700;
             font-display: swap; src: url(../schrift/figtree-700.woff2) format('woff2'); }
@font-face { font-family: Figtree; font-style: normal; font-weight: 800;
             font-display: swap; src: url(../schrift/figtree-800.woff2) format('woff2'); }

/*
 * Dealampel — Stylesheet.
 *
 * Vorbild ist die Zurueckhaltung von apple.com: viel Luft, feine Linien statt
 * Kaesten, kaum Schatten, grosse ruhige Typografie — und Farbe nur dort, wo
 * sie etwas bedeutet. Auf dieser Seite heisst das: Die einzige gesaettigte
 * Farbe ist die Ampel. Alles andere ist Weiss, Grau und ein einziges Blau.
 *
 * Die Abstaende sind der eigentliche Traeger. Was Apple serioes wirken laesst,
 * ist nicht die Schrift, sondern dass zwischen den Dingen mehr Platz ist, als
 * man von einer Verkaufsseite erwartet — der Eindruck ist: hier muss niemand
 * draengen.
 *
 * Ein Unterschied zu Apple mit Absicht: Der Seitengrund ist #f2f1ef statt
 * Apples kuehlem #f5f5f7. Reines Hellgrau auf einem hellen Bildschirm wurde
 * hier schon einmal als grell empfunden; der waermere, eine Spur dunklere Ton
 * nimmt die Haerte raus, ohne den ruhigen Eindruck zu kosten.
 *
 * Zur Schrift: **Figtree**, vom eigenen Server (`schrift/`). Google Fonts
 * direkt einzubinden waere eine Uebertragung der IP-Adresse an Google — dafuer
 * gibt es in Deutschland rechtskraeftige Urteile. Der Eindruck entsteht
 * ohnehin weniger durch die Schriftart als durch den Gewichtssprung: 700 fuer
 * Titel gegen 400 fuer Fliesstext, dazu enges Letterspacing bei allem Grossen.
 */

:root {
  /* Schriften — beides steht auf jedem System schon bereit */
  --sans: Figtree, "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
          "Helvetica Neue", Arial, sans-serif;

  /* Flaechen — sehr hell, aber warm statt blaustichig */
  --grund:        #ffffff;
  --papier:       #f2f1ef;
  --flaeche:      #ececea;
  --flaeche-tief: #e2e1de;

  /* Schrift */
  --schrift:      #1d1d1f;
  --gedaempft:    #6e6e73;
  --leise:        #76767b;   /* Apples #86868b schafft nur 3.6:1 */
  --linie:        #e3e2df;
  --linie-stark:  #d2d1cd;

  /* Die Lupe im Suchfeld. Als Datenadresse im Stylesheet, damit sie kein
   * eigener Abruf ist und die Farbe von der Schrift erbt. */
  --lupe: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round"><circle cx="10.5" cy="10.5" r="6.5"/><path d="M15.5 15.5 21 21"/></svg>');

  /* Ein einziges Blau */
  --marke:        #0066cc;
  --marke-hell:   #0077ed;
  --marke-grund:  #e8f1fb;

  /* Die einzigen gesaettigten Farben der Seite */
  --gruen:        #1d7a4c;
  --gruen-grund:  #e6f2ea;
  --gelb:         #8a6314;
  --gelb-grund:   #f7efdc;
  --rot:          #b3382b;
  --rot-grund:    #f8e9e6;

  /* Kaum Schatten — Apple trennt mit Flaeche und Abstand, nicht mit Tiefe */
  --schatten:     0 1px 2px rgba(0, 0, 0, 0.04);
  --schatten-hoch:0 4px 16px rgba(0, 0, 0, 0.08);
  --radius:       18px;
  --uebergang:    200ms cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--schrift);
  font: 16.5px/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--marke); }

/* Breiter als zuvor: Bei zwei Spalten blieb links und rechts zu viel
 * ungenutzter Rand, und die Karten wirkten dadurch gedraengt. */
.rahmen { max-width: 78rem; margin: 0 auto; padding: 0 1.4rem; }
.schmal { max-width: 48rem; }

/* ─── Kopfleiste ────────────────────────────────────────────────────────── */

/* Apples Leiste ist auffallend schmal und tritt zurueck: kleine Schrift,
 * halbdurchsichtig, der Inhalt scheint durch. Sie soll nicht praesent sein,
 * sondern verfuegbar. */
.kopf {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--linie);
  position: sticky;
  top: 0;
  z-index: 20;
}

.kopf-innen { display: flex; align-items: center; gap: 1.4rem; padding: 0.65rem 0; }

/*
 * Das Zeichen kommt aus der Bilddatei, der Schriftzug aus der Seite. So laeuft
 * "Dealampel" in derselben Schrift wie alles andere, bleibt bei jeder Groesse
 * scharf und ist fuer Suchmaschinen und Vorleseprogramme lesbar — ein Logo als
 * ein einziges Bild waere an all dem vorbei. Das Original mit eingebautem
 * Schriftzug steht auf der Ueber-uns-Seite.
 */
.marke-logo {
  display: flex; align-items: center; gap: 0.55rem;
  font-weight: 700; font-size: 1.18rem; letter-spacing: -0.03em;
  color: var(--schrift); text-decoration: none; flex: none;
}

.marke-logo .zweitwort { color: var(--gruen); }

/* Die helle Fassung braucht keine Kachel: Ihr weisser Grund geht in der
 * Kopfleiste auf, das Zeichen steht frei. */
.logo-zeichen { width: 34px; height: 34px; display: block; flex: none; }

/* Das Suchfeld ist ein Formular, damit es ohne JavaScript funktioniert.
 * Der Knopf sitzt im Feld statt daneben: Ein zweiter kraeftiger Knopf neben
 * „Deal einreichen" waere genau die Betonungskonkurrenz, die die Kacheln
 * schon einmal unserioes aussehen liess. */
.suche { flex: 1; min-width: 0; position: relative; display: flex; }

.suche input {
  width: 100%; padding-right: 2.6rem; padding: 0.48rem 1rem;
  border: 1px solid transparent; border-radius: 999px;
  background: var(--flaeche); color: var(--schrift);
  font: inherit; font-size: 0.88rem;
  transition: background var(--uebergang), border-color var(--uebergang), box-shadow var(--uebergang);
}
.suche input::placeholder { color: var(--leise); }
.suche input:focus {
  outline: none; background: var(--grund);
  border-color: var(--marke);
  box-shadow: 0 0 0 3px var(--marke-grund);
}

.suche-knopf {
  position: absolute; right: 0.3rem; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; padding: 0;
  border: none; border-radius: 999px; background: none;
  color: var(--leise); cursor: pointer;
  font-size: 0; line-height: 0;                 /* das Wort traegt der Screenreader */
  transition: color var(--uebergang), background var(--uebergang);
}
.suche-knopf::before {
  content: ''; width: 1rem; height: 1rem;
  background: currentColor;
  /* Lupe als Maske: eine Form, die in jeder Schriftgroesse scharf bleibt und
   * kein zusaetzliches Bild laedt. */
  -webkit-mask: var(--lupe) center / contain no-repeat;
          mask: var(--lupe) center / contain no-repeat;
}
.suche-knopf:hover, .suche-knopf:focus-visible { color: var(--schrift); background: var(--flaeche); }
.suche-knopf:focus-visible { outline: 2px solid var(--marke); outline-offset: 1px; }

.kopf-knoepfe { display: flex; align-items: center; gap: 0.7rem; flex: none; }

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  padding: 0.5rem 1.1rem; border-radius: 980px;
  border: 1px solid transparent;
  font: inherit; font-size: 0.88rem; font-weight: 500;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform var(--uebergang), background var(--uebergang),
              border-color var(--uebergang), box-shadow var(--uebergang), color var(--uebergang);
}
/* Eine Spur Bewegung auf Druck — die Bestaetigung, dass die Seite zugehoert hat. */
.knopf:active { transform: translateY(1px); }

/* Gruen statt Blau: Es ist die einzige Handlung, zu der die Seite auffordert,
 * und sie soll dieselbe Sprache sprechen wie die Ampel — gruen heisst hier
 * genauso "los". */
.knopf-haupt { background: var(--gruen); color: #fff; }
.knopf-haupt:hover { background: #186b42; }   /* dunkler, nicht heller: 6.5:1 */
.knopf-rand { background: var(--grund); color: var(--schrift); border-color: var(--linie-stark); }
.knopf-rand:hover { border-color: var(--marke); color: var(--marke); }
.knopf-leise { background: none; color: var(--gedaempft); padding: 0.55rem 0.5rem; }
.knopf-leise:hover { color: var(--marke); }
.knopf-gross { padding: 0.72rem 1.7rem; font-size: 0.98rem; }

/* ─── Kategorien ────────────────────────────────────────────────────────── */

.kategorien { background: var(--grund); border-bottom: 1px solid var(--linie);
              overflow-x: auto; scrollbar-width: none; }
.kategorien::-webkit-scrollbar { display: none; }
.kategorien-innen { display: flex; gap: 0.25rem; padding: 0.5rem 1.1rem; }

.kategorien a {
  padding: 0.35rem 0.8rem; border-radius: 999px;
  font-size: 0.84rem; color: var(--gedaempft); text-decoration: none; white-space: nowrap;
  transition: background var(--uebergang), color var(--uebergang);
}
.kategorien a:hover { background: var(--flaeche); color: var(--schrift); }
.kategorien a.aktiv { background: var(--flaeche-tief); color: var(--schrift); font-weight: 600; }

/* ─── Sortierung ────────────────────────────────────────────────────────── */

.sortierung { display: flex; align-items: center; gap: 0.45rem;
              min-height: 2.6rem; margin-bottom: 1rem; flex-wrap: wrap; }
.sortierung h1 { font-size: 1.62rem; font-weight: 700; margin: 0 auto 0 0;
                 letter-spacing: -0.035em; }

/* Die Reiter sind Links, keine Knoepfe: Jede Reihenfolge hat ihre eigene
 * Adresse, funktioniert ohne JavaScript und laesst sich verschicken. Deshalb
 * hier `display:inline-block` und `text-decoration:none` — ein <a> bringt
 * beides nicht von selbst mit. */
.reiter {
  display: inline-block; text-decoration: none;
  padding: 0.38rem 0.9rem; border-radius: 999px;
  border: 1px solid var(--linie-stark); background: var(--grund);
  color: var(--gedaempft); font: inherit; font-size: 0.89rem; cursor: pointer;
  transition: all var(--uebergang);
}
.reiter:hover { border-color: var(--marke); color: var(--marke); }
.reiter.aktiv { background: var(--schrift); color: var(--grund); border-color: var(--schrift); font-weight: 650; }

/* ─── Deal-Karte ────────────────────────────────────────────────────────── */

/*
 * ─── Zwei Spalten ──────────────────────────────────────────────────────────
 *
 * Links die Top-Deals, rechts die laufende Liste. Die Seitenspalte bleibt beim
 * Scrollen stehen: Sie ist kurz, und wer sich durch die aktuellen Deals
 * arbeitet, soll die besten nicht aus den Augen verlieren.
 *
 * Auf schmalen Bildschirmen wird daraus eine Spalte — und dort stehen die
 * **aktuellen Deals zuerst**. Wer auf dem Handy kommt, will die Liste, nicht
 * erst an einer Auswahl vorbeiscrollen.
 */

.spalten {
  display: grid;
  grid-template-columns: 22rem 1fr;
  gap: 1.8rem;
  align-items: start;
  padding-top: 1.6rem;
}

.seitenspalte { position: sticky; top: 5.2rem; }

/*
 * Die Koepfe beider Spalten sitzen in einem Kasten gleicher Hoehe. Sonst
 * bestimmt rechts die Hoehe der Reiter-Knoepfe, wo die Liste beginnt, und
 * links das blosse Woertchen — die Karten starten dann auf verschiedenen
 * Hoehen, und genau das laesst die Seite schief wirken.
 */
.spaltenkopf {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.6rem;
  margin-bottom: 1rem;
}

/* Die Ueberschrift schiebt die Reiter an den rechten Rand. */
.sortierung h1 { margin: 0; flex: 1; font-size: 1.35rem; }

.seitenspalte h2 {
  font-size: 0.86rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--leise);
  margin: 0 0 0 0.2rem;
}

.top-liste {
  background: var(--grund);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 0.5rem 1.3rem;
}

/* Ein Top-Deal ist eine Zeile, kein Kaertchen: Bild, zwei Zeilen Titel, Preis.
 * Alles Weitere steht rechts in der grossen Karte — hier zaehlt nur, dass man
 * ihn wiedererkennt und antippen kann. */
.top-deal {
  display: grid;
  grid-template-columns: 3.8rem 1fr;
  gap: 0.85rem;
  align-items: center;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--linie);
  text-decoration: none;
}

.top-deal:last-child { border-bottom: none; }

.top-bild {
  width: 3.8rem; height: 3.8rem;
  border-radius: 8px; overflow: hidden;
  background: #faf9f7; flex: none;
}
.top-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

.top-titel {
  font-size: 0.92rem; font-weight: 600; line-height: 1.35;
  color: var(--schrift);
  margin: 0 0 0.25rem;
  letter-spacing: -0.012em;
  /* Zwei Zeilen, dann Auslassung — sonst schiebt ein langer Titel die ganze
   * Spalte auseinander und die Liste verliert ihren Rhythmus. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

.top-deal:hover .top-titel { color: var(--marke); }

.top-zeile { display: flex; align-items: baseline; gap: 0.45rem; flex-wrap: wrap; }
.top-preis { font-size: 1rem; font-weight: 700; letter-spacing: -0.03em; }
.top-alt   { font-size: 0.78rem; color: var(--leise); text-decoration: line-through; }

.top-ampel { display: inline-flex; align-items: center; gap: 0.3rem;
             font-size: 0.75rem; font-weight: 600; }
.top-ampel i { width: 0.45rem; height: 0.45rem; border-radius: 50%;
               display: inline-block; background: currentColor; }

.seitenspalte .fussnote {
  font-size: 0.79rem; color: var(--leise);
  margin: 0.7rem 0.2rem 0; line-height: 1.5;
}

/*
 * ─── Die Deal-Karte ────────────────────────────────────────────────────────
 *
 * Der erste Entwurf wirkte billig, und der Grund war nicht ein einzelnes
 * Element, sondern ihre Zahl: farbige Ampelpille, graue Haendlerpille, gruene
 * Rabattzahl, Hinweiskasten mit Balken und ein blauer Knopf — fuenf Dinge, die
 * gleichzeitig um Aufmerksamkeit riefen. Wo alles betont ist, ist nichts
 * betont, und das liest sich als Marktschreierei.
 *
 * Diese Fassung hat **eine** Farbe: die Ampel. Alles andere traegt die
 * Typografie. Die Karte ist in vier Zonen gegliedert, die von oben nach unten
 * die Fragen des Lesers beantworten:
 *
 *   1. Woher, und was halten wir davon?   (Kopfzeile, klein und grau)
 *   2. Was ist es?                        (Titel, der Anker der Karte)
 *   3. Was kostet es?                     (Preis, die zweitgroesste Zahl)
 *   4. Was muss ich wissen?               (Merkmale, dann unsere Einschaetzung)
 *
 * Getrennt wird mit Abstand und einer einzigen Haarlinie, nicht mit Kaesten.
 */

.deals {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding-bottom: 4rem;
}

.deal {
  background: var(--grund);
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 1.7rem 1.9rem;
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 1.8rem;
  transition: box-shadow var(--uebergang);
}

.deal:hover { box-shadow: var(--schatten-hoch); }

.deal-bild {
  width: 11rem; height: 11rem;
  border-radius: 11px;
  overflow: hidden;
  background: #faf9f7;
  flex: none;
}

.deal-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Fotos werden eingepasst, nicht beschnitten: Ein abgeschnittener Freisteller
   sieht nach Fehler aus, und die Feed-Lizenz gilt fuer das unveraenderte Bild. */
.deal-bild img.foto, .top-bild img.foto {
  object-fit: contain; background: #fff; padding: 6%; box-sizing: border-box;
}

/* ─── 1. Kopfzeile ──────────────────────────────────────────────────────── */

.deal-kopf {
  display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
  margin-bottom: 0.6rem;
  font-size: 0.82rem;
  color: var(--leise);
}

/*
 * Die Ampel ohne farbige Flaeche. Ein Punkt und ein Wort in der Farbe reichen
 * — die gefuellte Pille daneben machte aus einer Einschaetzung ein Etikett.
 * Der Punkt ist nie das einzige Signal: Das Wort steht immer daneben, sonst
 * saehe rund jeder zwoelfte Mann drei gleiche graue Kreise.
 */
.ampel-marke {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-weight: 600; font-size: 0.83rem;
  letter-spacing: -0.005em;
}
.ampel-marke .licht { width: 0.55rem; height: 0.55rem; border-radius: 50%; flex: none; }

.ampel-gruen { color: var(--gruen); }
.ampel-gruen .licht { background: var(--gruen); }
.ampel-gelb  { color: var(--gelb); }
.ampel-gelb  .licht { background: var(--gelb); }
.ampel-rot   { color: var(--rot); }
.ampel-rot   .licht { background: var(--rot); }

/* Der Haendler ist eine Tatsache, kein Abzeichen — deshalb Text statt Pille. */
.haendler {
  color: var(--gedaempft);
  font-weight: 600;
  font-size: 0.82rem;
}

.deal-kopf .trenner { color: var(--linie-stark); }
.geprueft-oben { margin-left: auto; font-size: 0.79rem; color: var(--leise); }

/* ─── 2. Titel ──────────────────────────────────────────────────────────── */

.deal h2 {
  font-size: 1.22rem; font-weight: 600; line-height: 1.4;
  margin: 0 0 0.7rem; letter-spacing: -0.022em;
}
.deal h2 a { color: var(--schrift); text-decoration: none; }
.deal h2 a:hover { color: var(--marke); }

/* ─── 3. Preis ──────────────────────────────────────────────────────────── */

.preise { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.85rem; }

.preis { font-size: 1.62rem; font-weight: 700; letter-spacing: -0.04em; }

/* Freebies. "0,00 €" liest sich wie ein Fehler, das Wort ist eindeutiger. */
.preis-gratis { color: var(--gruen); }

.preis-alt { color: var(--leise); text-decoration: line-through; font-size: 0.92rem; }

/* Die Ersparnis in Grau, nicht in Gruen: Sie ist eine Rechengroesse, keine
 * Empfehlung. Die Empfehlung steht oben in der Ampel. */
.preis-minus { color: var(--gedaempft); font-size: 0.88rem; font-weight: 500; }

.versand { color: var(--gedaempft); font-size: 0.86rem; }

/* ─── 4. Was man wissen muss ────────────────────────────────────────────── */

.merkmale {
  margin: 0 0 1rem;
  color: var(--gedaempft);
  font-size: 0.91rem;
  line-height: 1.55;
}

/*
 * Unsere Einschaetzung. Vorher ein Kasten mit farbigem Balken, was wie eine
 * Warnmeldung aussah. Jetzt eine Haarlinie darueber und normaler Fliesstext:
 * Es ist der wichtigste Satz der Karte, aber er soll gelesen und nicht
 * angeschrien werden.
 */
.anriss {
  margin: 0;
  padding-top: 0.95rem;
  border-top: 1px solid var(--linie);
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--gedaempft);
}
.anriss strong { color: var(--schrift); font-weight: 600; }

/* ─── Aktionen ──────────────────────────────────────────────────────────── */

.deal-fuss {
  display: flex; align-items: center; gap: 1.4rem;
  margin-top: 1.1rem;
  flex-wrap: wrap;
}

/*
 * Abstimmen ohne Konto. Die Knoepfe stehen rechts neben "Zum Shop" — die
 * Bewertung ist die zweite Handlung, nicht die erste.
 */
.stimmen { display: flex; align-items: center; gap: 0.45rem; margin-left: auto; }

.stimme {
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  border: 1px solid var(--linie-stark); background: var(--grund);
  color: var(--gedaempft); font: inherit; font-size: 1.1rem; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  padding: 0; transition: all var(--uebergang);
}
.stimme:hover:not(:disabled) { border-color: var(--gruen); color: var(--gruen); }
.stimme:disabled { opacity: 0.5; cursor: default; }
.stimme[aria-pressed="true"].hoch { background: var(--gruen); border-color: var(--gruen); color: #fff; }
.stimme[aria-pressed="true"].tief { background: var(--rot);   border-color: var(--rot);   color: #fff; }

/* Sichtbar ist die Zahl der Bewertungen, nicht die Bilanz: "18 Bewertungen"
 * sagt mehr als "+12", und die Bilanz steht ohnehin in der Ampel. */
.stimmen-zahl {
  font-size: 0.84rem; color: var(--gedaempft);
  min-width: 6.5rem; text-align: center;
}

.top-bewertungen { font-size: 0.76rem; color: var(--leise); }

/* Nur noch ein Knopf, und der ist dunkel statt blau: Achtmal dasselbe kraeftige
 * Blau untereinander war der lauteste Teil der ganzen Seite. Die zweite
 * Handlung steht als Textlink daneben — sichtbar, aber ohne Konkurrenz. */
.deal-fuss .knopf { padding: 0.5rem 1.2rem; font-size: 0.88rem; }

.knopf-dunkel { background: #1d1d1f; color: #fff; }
.knopf-dunkel:hover { background: #35353a; }

/*
 * Die Werbekennzeichnung.
 *
 * Sie muss lesbar sein — sonst erfuellt sie ihren Zweck nicht und waere nach
 * § 5a Abs. 4 UWG angreifbar. Auf dem Kartengrund (weiss) schafft
 * `--gedaempft` 5,07:1, `--leise` nur 4,52:1 — beide bestehen, aber fuer
 * einen Pflichthinweis ist der Rand der Norm der falsche Ort.
 * Klein ja, versteckt nein.
 *
 * Auf `--papier` kaeme `--gedaempft` auf 4,49:1 und verfehlte die Norm knapp.
 * Dort steht die Marke heute nicht — wer sie dorthin setzt, muss nachmessen.
 *
 * Sie steht direkt neben dem Knopf, im selben Blickfang. Ein Hinweis weiter
 * unten waere rechtlich wertlos und wuerde die Karte nur unruhiger machen.
 */
.shop-weg { display: inline-flex; align-items: center; gap: 0.55rem; }

/*
 * Hinweise der automatischen Pruefung in der Verwaltung.
 *
 * Gelb wie die mittlere Ampel, und das ist keine Zierde: Ein Hinweis hier
 * heisst genau das, was Gelb auf der Seite heisst — nicht verboten, aber es
 * gibt einen offenen Punkt. Rot ist er nicht, denn was rot waere, hat der
 * Dienst schon beim Einreichen abgewiesen.
 */
.pruefhinweis {
  background: var(--gelb-grund);
  border-radius: 10px;
  padding: 0.8rem 1rem;
  margin-bottom: 0.8rem;
  font-size: 0.92rem;
  line-height: 1.55;
}
.pruefhinweis strong { color: var(--gelb); }

/*
 * Das Etikett am Vergleichspreis.
 *
 * Es steht VOR dem Betrag und ist nicht durchgestrichen — sonst laese es sich
 * als Teil des gestrichenen Preises und waere seinerseits missverstaendlich.
 * Klein, aber in derselben Farbe wie der Betrag: Es ist keine Fussnote,
 * sondern gehoert zur Aussage.
 */
.preis-alt-art {
  text-decoration: none;
  display: inline-block;
  font-size: 0.78em;
  letter-spacing: 0.01em;
}
.pruefhinweis .merkmale { display: block; margin-top: 0.35rem; font-size: 0.82rem; }

.anzeige-marke {
  font-size: 0.75rem;
  color: var(--gedaempft);
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.weiterlesen {
  color: var(--marke);
  text-decoration: none;
  font-size: 0.89rem;
  font-weight: 500;
}
.weiterlesen:hover { text-decoration: underline; }

/* ─── Kaesten ───────────────────────────────────────────────────────────── */

.hinweis {
  background: var(--gelb-grund);
  border: 1px solid rgba(138, 93, 0, 0.22);
  border-radius: var(--radius);
  padding: 0.85rem 1.05rem; margin: 1rem 0; font-size: 0.91rem;
}

/* Der Hinweis auf ein abgelaufenes Angebot. Bewusst kraeftiger als `.hinweis`:
 * Wer hier landet, kommt meist aus einer Suchmaschine oder einem Lesezeichen
 * und liest sonst einen Preis, den es nicht mehr gibt. Das muss vor dem Preis
 * ins Auge fallen, nicht daneben. */
.abgelaufen {
  background: var(--rot-grund);
  border: 1px solid rgba(179, 56, 43, 0.28);
  border-left: 3px solid var(--rot);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem; margin: 0 0 1.3rem;
  font-size: 0.93rem; line-height: 1.5;
}
.abgelaufen strong { color: var(--rot); }

.karte {
  background: var(--grund); border: none;
  border-radius: var(--radius); box-shadow: var(--schatten);
  padding: 2.5rem; margin-bottom: 1.2rem;
}
.karte h2 { margin-top: 0; font-weight: 700; letter-spacing: -0.03em; font-size: 1.6rem; }

/* ─── Formular ──────────────────────────────────────────────────────────── */

.feld { margin-bottom: 1.2rem; }
.feld label { display: block; font-weight: 650; font-size: 0.93rem; margin-bottom: 0.3rem; }
.feld .erklaerung { font-size: 0.87rem; color: var(--gedaempft); margin: 0 0 0.45rem; }

.feld input, .feld textarea, .feld select {
  width: 100%; padding: 0.65rem 0.8rem;
  border: 1px solid var(--linie-stark); border-radius: 9px;
  background: var(--grund); color: var(--schrift);
  font: inherit; font-size: 0.96rem;
  transition: border-color var(--uebergang), box-shadow var(--uebergang);
}
.feld input:focus, .feld textarea:focus, .feld select:focus {
  outline: none; border-color: var(--marke); box-shadow: 0 0 0 3px var(--marke-grund);
}
.feld textarea { min-height: 7.5rem; resize: vertical; }

.feld-reihe { display: flex; gap: 1rem; flex-wrap: wrap; }
.feld-reihe .feld { flex: 1; min-width: 9rem; }

.fehler { color: var(--rot); font-size: 0.88rem; margin-top: 0.35rem; }

/* Fortschritt im Formular. Wer sieht, dass er schon halb fertig ist, hoert
 * seltener auf — angefangene Aufgaben ziehen staerker als ungeoeffnete. */
.fortschritt { margin-bottom: 1.6rem; }
.fortschritt-balken { height: 5px; background: var(--flaeche-tief); border-radius: 999px; overflow: hidden; }
.fortschritt-balken i { display: block; height: 100%; width: 0; background: var(--gruen);
                        border-radius: 999px; transition: width 300ms ease; }
.fortschritt p { margin: 0.45rem 0 0; font-size: 0.87rem; color: var(--gedaempft); }

/* ─── Inhaltsseiten ─────────────────────────────────────────────────────── */

.inhalt {
  background: var(--grund); border: none;
  border-radius: var(--radius); padding: 3rem;
  margin: 1.6rem 0 4rem; box-shadow: var(--schatten);
}
.inhalt h1 { font-size: 2.2rem; font-weight: 700; letter-spacing: -0.038em;
             margin: 0 0 0.8rem; line-height: 1.24; }
.inhalt h2 { font-size: 1.28rem; font-weight: 700; margin: 2.1rem 0 0.7rem;
             letter-spacing: -0.02em; }
.inhalt p  { margin: 0 0 1.1rem; }
.inhalt ul, .inhalt ol { padding-left: 1.35rem; }
.inhalt li { margin-bottom: 0.45rem; }
.inhalt dl dt { font-weight: 650; margin-top: 1.1rem; }
.inhalt dl dd { margin: 0.15rem 0 0; color: var(--gedaempft); }
.vorspann { font-size: 1.1rem; color: var(--gedaempft); margin-bottom: 1.6rem; line-height: 1.62; }

/* ─── Kommentare ────────────────────────────────────────────────────────── */

.kommentar { border-top: 1px solid var(--linie); padding: 1.1rem 0; }
.kommentar-kopf { font-size: 0.86rem; color: var(--leise); margin-bottom: 0.4rem;
                  display: flex; align-items: center; gap: 0.45rem; }
.kommentar-kopf strong { color: var(--schrift); }
.kommentar p { margin: 0; font-size: 0.96rem; }

/* ─── Fuss ──────────────────────────────────────────────────────────────── */

.fuss { background: var(--grund); border-top: 1px solid var(--linie);
        padding: 2.2rem 0; font-size: 0.89rem; color: var(--gedaempft); }
.fuss-spalten { display: flex; gap: 2.8rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.fuss-spalten h3 { font-size: 0.83rem; text-transform: uppercase; letter-spacing: 0.05em;
                   color: var(--leise); margin: 0 0 0.65rem; }
.fuss-spalten ul { list-style: none; padding: 0; margin: 0; }
.fuss-spalten li { margin-bottom: 0.4rem; }
.fuss a { color: var(--gedaempft); text-decoration: none; }
.fuss a:hover { color: var(--marke); text-decoration: underline; }

/* ─── Schmale Bildschirme ───────────────────────────────────────────────── */

/* Ab hier passen zwei Spalten nicht mehr nebeneinander. */
@media (max-width: 68rem) {
  .spalten { grid-template-columns: 1fr; gap: 2.2rem; }
  .seitenspalte { position: static; order: 2; }
  .hauptspalte { order: 1; }
}

@media (max-width: 40rem) {
  body { font-size: 16px; }
  .kopf-innen { flex-wrap: wrap; }
  .suche { order: 3; flex-basis: 100%; }
  .deal { grid-template-columns: 5.5rem 1fr; gap: 1.1rem; padding: 1.1rem; }
  .deal-bild { width: 5.5rem; height: 5.5rem; }
  .deal-fuss .knopf { flex: 1; justify-content: center; }
  .sortierung h1 { flex-basis: 100%; margin-bottom: 0.4rem; }
  .inhalt { padding: 1.3rem; }
  /* Die Einschaetzung bleibt stehen — auch auf dem Handy.
   *
   * Sie war hier ausgeblendet, und das war richtig, solange der volle Text in
   * der Kachel stand: 700 Zeichen schieben auf einem Telefon die naechste
   * Kachel aus dem Bild. Seit dort ein Anriss steht, ist die Rechnung eine
   * andere — die Begruendung ist das Einzige, was diese Seite von einer
   * Preisliste unterscheidet, und die Mehrheit der Besucher liest sie auf dem
   * Telefon. Sie dort wegzulassen hiesse, ihnen genau das vorzuenthalten,
   * wofuer sie gekommen sind. */
  .anriss { font-size: 0.92rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Der Weiterweg am Ende eines Ratgebers. Ohne ihn ist jeder Ratgeber eine
 * Sackgasse — der Leser geht zurueck zur Suche statt weiter auf die Seite. */
.weiterweg h2 { font-size: 1.15rem; }
.wegliste { list-style: none; margin: 1rem 0 0; padding: 0; display: flex;
            flex-wrap: wrap; gap: 0.5rem; }
.wegliste a {
  display: inline-block; text-decoration: none;
  padding: 0.42rem 0.95rem; border-radius: 999px;
  border: 1px solid var(--linie-stark); color: var(--schrift);
  font-size: 0.9rem; transition: all var(--uebergang);
}
.wegliste a:hover { border-color: var(--marke); color: var(--marke); }

.merkmalsliste { margin: 0.4rem 0 1.4rem; padding-left: 1.15rem; color: var(--gedaempft); }
.merkmalsliste li { margin-bottom: 0.3rem; }
.weiterlesen { white-space: nowrap; }

/* Der Einleitungstext einer Kategorie. Er steht ueber den Angeboten, nicht
 * darunter: Wer hier landet, soll zuerst wissen, worauf in dieser Warengruppe
 * zu achten ist — und dann die Angebote sehen. */
.kategorie-text {
  margin: 0 0 1.4rem; padding: 0 0.15rem;
  color: var(--gedaempft); font-size: 0.97rem; line-height: 1.62;
  max-width: 48rem;
}

/* ─── Sprunglink ───────────────────────────────────────────────────────────
 *
 * Wer mit der Tastatur bedient, laeuft sonst auf jeder Seite zuerst durch
 * Logo, Suchfeld, Einreichen-Knopf und neun Kategorien, bevor der Inhalt
 * kommt. Der Link steht als erstes Element im Quelltext und wird sichtbar,
 * sobald er den Fokus bekommt. */
.sprunglink {
  position: absolute; left: -9999px; top: 0;
  z-index: 100; padding: 0.7rem 1.2rem;
  background: var(--schrift); color: var(--grund);
  text-decoration: none; border-radius: 0 0 var(--radius) 0;
  font-size: 0.92rem;
}
.sprunglink:focus { left: 0; }

/* Ein sichtbarer Fokus auf allem, was sich bedienen laesst. Ohne das ist
 * Tastaturbedienung ein Blindflug — man weiss nicht, wo man gerade steht. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--marke);
  outline-offset: 2px;
  border-radius: 3px;
}

.blaettern {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-top: 1.6rem;
}
.blaettern-stand { color: var(--gedaempft); font-size: 0.9rem; }

/* Der Preisverlauf auf der Deal-Seite. */
.verlauf { list-style: none; margin: 0.6rem 0 0.8rem; padding: 0; max-width: 22rem; }
.verlauf li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.5rem 0; border-bottom: 1px solid var(--linie);
}
.verlauf li:last-child { border-bottom: none; }
.verlauf-datum { color: var(--gedaempft); font-size: 0.92rem; }
.verlauf-preis { font-weight: 600; }
.verlauf-kurz { margin-top: 0.4rem; }