/* ============================================================
   Layout "Warentafel"
   Vollständiges Layout, ersetzt das Grund-Stylesheet (grundstil: false).
   Nachbau der Vorlage: Rangliste mit Siegelfahne über der Karte,
   Notenblock rechts, Aufklappbereich mit Angebotskasten.

   Keine externen Dateien, keine Schriften von fremden Servern.
   Funktioniert ohne Verbindung nach außen.
   ============================================================ */

:root{
  /* Farben der Vorlage */
  --navy:        #123a52;   /* Kopfzeile */
  --navy-band:   #1a4763;   /* Aufmacherband */
  --navy-note:   #1d4e75;   /* Notenblock */
  --navy-tief:   #0e2c40;
  --gruen:       #2e9e4f;   /* Testsieger */
  --gruen-tief:  #1e7e34;
  --hellblau:    #2b7cb8;   /* Highlight, bezahlte Platzierung */
  --cta:         #4a7fd4;   /* Angebotsknopf */
  --cta-tief:    #3866b4;
  --rot:         #c22a2a;   /* Rabattstreifen */
  --orange:      #ee6c12;   /* Wortmarke */
  --bernstein:   #8a6a1e;
  --grau:        #6b7785;

  --flaeche:     #eef0f3;
  --karte:       #ffffff;
  --linie:       #e2e6ea;
  --linie-zart:  #f0f2f5;
  --tinte:       #21384f;
  --tinte-leise: #6b7785;

  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  --r:       8px;
  --r-klein: 5px;
  --r-pille: 999px;
  --bahn:    1120px;

  --schatten: 0 1px 3px rgba(18,58,82,.10);
  --schatten-hoch: 0 4px 16px rgba(18,58,82,.16);
}

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

body{
  margin:0;
  background:var(--flaeche);
  color:var(--tinte);
  font-family:var(--schrift);
  font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--cta-tief)}
img,svg{max-width:100%}

:focus-visible{outline:2px solid var(--cta);outline-offset:2px;border-radius:3px}

.bahn{max-width:var(--bahn);margin:0 auto;padding:0 14px}

.nur-lesehilfe{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}


/* ============================================================
   BAUSTEIN: kopf
   ============================================================ */
.kopf{background:var(--navy);color:#fff;position:relative;z-index:30}
.kopf__inner{display:flex;align-items:center;gap:16px;padding:9px 0}

.wortmarke{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:#fff;flex:none}
.wortmarke__wort{display:block;font-size:1.28rem;font-weight:800;letter-spacing:-.02em;line-height:1}
.wortmarke__unter{display:block;margin-top:2px;font-size:.55rem;font-weight:600;color:rgba(255,255,255,.62)}
.punkt{
  display:inline-grid;place-items:center;
  width:34px;height:34px;border-radius:50%;
  background:var(--orange);color:#fff;
  font-size:1.05rem;font-weight:800;letter-spacing:-.03em;
}

.such-form{display:flex;flex:1;max-width:420px;margin:0 auto;position:relative}
.such-form input{
  flex:1;min-width:0;
  border:1px solid rgba(255,255,255,.2);border-right:0;
  border-radius:var(--r-klein) 0 0 var(--r-klein);
  background:#fff;color:var(--tinte);
  padding:8px 12px;font:inherit;font-size:.9rem;
}
.such-start{
  flex:none;border:0;cursor:pointer;
  border-radius:0 var(--r-klein) var(--r-klein) 0;
  background:var(--cta);color:#fff;padding:0 14px;
}
.such-start svg{width:17px;height:17px;display:block}

.such-knopf{
  display:none;margin-left:auto;flex:none;
  background:none;border:0;color:#fff;cursor:pointer;padding:6px;
}
.such-knopf svg{width:21px;height:21px;display:block}


/* ============================================================
   Aufmacher der Vergleichsseite
   ============================================================ */
.aufmacher{background:var(--navy-band);color:#fff;padding:20px 0 16px}
.aufmacher h1{
  margin:0 0 12px;
  font-size:2.1rem;line-height:1.18;font-weight:400;letter-spacing:-.02em;
  text-wrap:balance;
}
.aufmacher h1 b{font-weight:800}
.aufmacher__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;
  margin:0;font-size:.84rem;color:rgba(255,255,255,.82);
}
.aufmacher__meta span,.aufmacher__meta a{display:inline-flex;align-items:center;gap:6px}
.aufmacher__meta a{color:rgba(255,255,255,.92);text-decoration:none}
.aufmacher__meta a:hover{text-decoration:underline}
.aufmacher__meta svg{width:15px;height:15px;flex:none;opacity:.8}
.aufmacher__meta .rechts{margin-left:auto}
.aufmacher__lead{
  margin:14px 0 0;max-width:74ch;
  font-size:.98rem;line-height:1.6;color:rgba(255,255,255,.85);
}


/* ============================================================
   BAUSTEIN: produktkarte
   ============================================================ */
.liste{padding:16px 0 6px}

.karte{
  position:relative;
  background:var(--karte);
  border-radius:var(--r);
  box-shadow:var(--schatten);
  margin-bottom:14px;
}
.karte--gold,.karte--blau,.karte--hellblau{margin-top:30px}

/* Siegelfahne über der Karte, linksbündig */
.siegel{
  position:absolute;top:-23px;left:0;
  padding:3px 12px;
  border-radius:var(--r-klein) var(--r-klein) 0 0;
  font-size:.8rem;font-weight:600;color:#fff;
  line-height:1.5;
}
.siegel--gold    {background:var(--gruen)}
.siegel--blau    {background:var(--navy-note)}
.siegel--hellblau{background:var(--hellblau)}

/* Anzeigenkennzeichnung — Pflicht, darf nicht entfallen.

   Zurückhaltend gestaltet: kein Hintergrund, helles Grau. Vorher war es eine
   dunkle Fahne mit weißer Schrift – die zog den Blick auf sich und ließ die
   Karte wie eine fremde Einblendung aussehen, obwohl sie zum Vergleich
   gehört.

   Lesbar bleibt sie: #98a2b3 auf hellem Grund erreicht den Kontrastwert, den
   die Kennzeichnungspflicht verlangt. Weiter aufhellen wäre der Punkt, an dem
   aus Zurückhaltung Verschleierung würde. */
.anzeige{
  /* Rechts oben, nicht links neben dem Rang.

     Links stand sie zwischen Platzziffer und Titel und wirkte wie eine
     Beschriftung der Karte. Rechts oben sitzt sie außerhalb des Leseflusses –
     sichtbar, wenn man hinsieht, aber nicht im Weg. Auf dem Telefon war sie
     schon dort. */
  position:absolute;top:-19px;right:0;left:auto;
  padding:2px 4px;
  background:none;color:#98a2b3;
  font-size:.7rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  line-height:1.5;
}

.karte__zeile{
  display:grid;
  /* Textspalte rund ein Zehntel schmaler – der gewonnene Platz geht in die
     Abstaende zwischen den Spalten */
  grid-template-columns:46px 128px minmax(0,1fr) 118px 216px;
  grid-template-areas:"rang bild info note abschluss";
  gap:20px;
  padding:14px;
  align-items:center;
}

.rang{
  grid-area:rang;
  display:grid;place-items:center;
  width:38px;height:38px;
  border:1px solid var(--linie);border-radius:var(--r-klein);
  color:var(--tinte);
  font-size:1.05rem;font-weight:700;font-variant-numeric:tabular-nums;
  align-self:start;
}

.bild{
  grid-area:bild;margin:0;position:relative;
  background:#fff;border-radius:var(--r-klein);overflow:hidden;aspect-ratio:1;
}
.bild a{display:block;height:100%}
.bild svg{display:block;width:100%;height:100%}
.bild__leer{display:block;height:100%;background:var(--linie-zart)}

.rabatt{
  position:absolute;top:5px;left:5px;z-index:2;
  background:var(--rot);color:#fff;border-radius:4px;padding:2px 6px;
  font-size:.72rem;font-weight:700;letter-spacing:-.02em;
}

/* --- Textspalte -------------------------------------------- */
.info{grid-area:info;min-width:0}
.info h3{
  margin:0 0 4px;
  font-size:1.02rem;line-height:1.35;font-weight:700;letter-spacing:-.01em;
  /* Zwei Zeilen, hart begrenzt: sonst zieht ein langer Titel den
     Notenblock in die Länge und das Siegel verzerrt sichtbar. */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;overflow-wrap:anywhere;
}
.info h3 a{color:inherit;text-decoration:none}
.info h3 a:hover{color:var(--cta-tief)}
.hersteller{margin:0 0 7px;font-size:.85rem;color:var(--tinte-leise)}
.fazit{
  margin:0 0 7px;font-size:.86rem;line-height:1.5;color:var(--tinte-leise);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* Rabattstreifen — nur bei echter Reduktion */
.aktion{display:inline-block;margin:0 0 7px}
.aktion__text{
  display:inline-block;
  background:var(--rot);color:#fff;border-radius:var(--r-klein);
  padding:4px 10px;
  font-size:.84rem;font-weight:700;line-height:1.3;
}
.aktion__uvp{
  display:inline-block;margin-left:8px;
  font-size:.8rem;color:var(--tinte-leise);text-decoration:line-through;
}

/* Merkmal-Pillen — kennt die Vorlage nicht, Schalter steht auf aus */
.chips{display:flex;flex-wrap:wrap;gap:5px;list-style:none;margin:0 0 7px;padding:0}
.chips li{
  border:1px solid var(--linie);border-radius:var(--r-pille);
  padding:2px 9px;
  font-size:.76rem;color:var(--tinte-leise);background:#fbfcfd;
}

/* Aufrufzähler — kennt die Vorlage nicht, Schalter steht auf aus */
.live{display:flex;align-items:center;gap:6px;margin:0;font-size:.78rem;color:var(--tinte-leise)}
.live .punkt{
  width:7px;height:7px;border-radius:50%;background:var(--gruen);
  display:inline-block;flex:none;
}
.live b{color:var(--tinte);font-variant-numeric:tabular-nums}

/* --- Notenblock -------------------------------------------- */
.note{
  grid-area:note;position:relative;
  background:var(--navy-note);color:#fff;
  border-radius:var(--r-klein);
  padding:9px 8px 16px;text-align:center;
  align-self:stretch;
  display:flex;flex-direction:column;justify-content:center;
}
.note__kopf{display:block}
.note__label{display:block;font-size:.76rem;font-weight:600;color:rgba(255,255,255,.86);line-height:1.3}
.note__wert{
  display:block;margin:1px 0 0;
  font-size:2.05rem;font-weight:800;line-height:1.05;letter-spacing:-.045em;
  font-variant-numeric:tabular-nums;
}
.note__wert--text{font-size:1rem;font-weight:700;line-height:1.25;letter-spacing:-.01em;margin:3px 0 0}
.urteil{display:block;margin-top:1px;font-size:.82rem;font-weight:600;color:rgba(255,255,255,.9)}

.info-knopf{
  position:absolute;right:5px;bottom:4px;
  width:17px;height:17px;border-radius:50%;
  display:grid;place-items:center;text-decoration:none;
  background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.5);
  color:#fff;font-size:.62rem;font-weight:700;line-height:1;cursor:pointer;
  font-family:inherit;
}
.info-knopf:hover{background:#fff;color:var(--navy-note)}

/* Alle fünf Stufen belegt. Fehlt eine, wird der Block unsichtbar. */
.note--sehrgut      {background:var(--navy-note)}
.note--gut          {background:#2c6288}
.note--befriedigend {background:var(--bernstein)}
.note--ausreichend  {background:#5f6b78}
.note--highlight    {background:var(--hellblau)}
/* Platz 1 grün — wie in der Vorlage */
.karte--gold .note{background:var(--gruen)}
.karte--gold .info-knopf:hover{color:var(--gruen)}

/* Kundenbewertung — kennt die Vorlage nicht, Schalter steht auf aus */
.kundenwertung{
  margin-top:6px;padding-top:6px;
  border-top:1px solid rgba(255,255,255,.22);
  font-size:.7rem;color:rgba(255,255,255,.86);line-height:1.35;
}
.sterne{
  position:relative;display:inline-block;white-space:nowrap;
  color:rgba(255,255,255,.3);font-size:.72rem;line-height:1;letter-spacing:.03em;
}
.sterne::before{content:"\2605\2605\2605\2605\2605"}
.sterne > span{position:absolute;top:0;left:0;overflow:hidden;width:var(--fuellung,0%);color:#ffc861}
.sterne > span::before{content:"\2605\2605\2605\2605\2605"}
.kundenwertung__wert{font-weight:700;color:#fff}
.kundenwertung__anzahl,.kundenwertung__quelle{display:block}

/* --- Abschlussspalte --------------------------------------- */
.abschluss{grid-area:abschluss;display:grid;gap:7px;align-content:center}

.cta{
  display:block;text-align:center;text-decoration:none;
  background:var(--cta);color:#fff;border:1px solid var(--cta);
  border-radius:var(--r-klein);
  font-size:.94rem;font-weight:600;padding:10px 14px;
  transition:background .15s ease,color .15s ease;
}
.cta:hover{background:var(--cta-tief);border-color:var(--cta-tief)}
.cta--amazon{background:#fff;color:var(--cta-tief)}
.cta--amazon:hover{background:var(--cta);color:#fff}

.preis-info{margin:0;text-align:center;font-size:.72rem;color:var(--tinte-leise);line-height:1.4}
.preis-info b{display:block;font-size:.98rem;font-weight:700;letter-spacing:-.02em;color:var(--tinte)}

/* --- Aufklappbereich --------------------------------------- */
/* column-reverse hält die Zeile am Kartenfuß, auch im offenen Zustand */
.mehr{display:flex;flex-direction:column-reverse}
.mehr > summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:7px;
  padding:8px 12px 11px;
  font-size:.88rem;font-weight:500;color:var(--cta-tief);
}
.mehr > summary::-webkit-details-marker{display:none}
.mehr > summary::marker{content:""}
.mehr > summary:hover{color:var(--cta-tief);text-decoration:underline}
.pfeil{width:14px;height:14px;flex:none;transition:transform .2s ease}
.mehr[open] .pfeil{transform:rotate(180deg)}
.zu{display:none}
.mehr[open] .auf{display:none}
.mehr[open] .zu{display:inline}

.details__inner{
  display:grid;grid-template-columns:minmax(0,1fr) 230px;
  gap:26px;padding:6px 16px 14px;
  border-top:1px solid var(--linie-zart);
}
.merkmale-spalte{min-width:0}
.merkmale-spalte h4{margin:12px 0 6px;font-size:.9rem;font-weight:700}
.merkmale-spalte h4:first-child{margin-top:0}

.merkmale{list-style:none;margin:0;padding:0}
.merkmale li{
  position:relative;padding-left:22px;margin-bottom:6px;
  font-size:.87rem;line-height:1.5;color:var(--tinte-leise);
}
.merkmale li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--gruen);font-weight:700}

/* Technikangaben quer, wie in der Vorlage */
.technik{width:100%;border-collapse:collapse;font-size:.86rem;margin-top:2px}
.technik th{
  padding:5px 10px;text-align:center;font-weight:500;
  color:var(--tinte-leise);border-bottom:1px solid var(--linie);
}
.technik td{padding:6px 10px;text-align:center;font-weight:700}

.fragen{margin:0}
.fragen dt{font-size:.87rem;font-weight:700;margin-top:9px}
.fragen dd{margin:2px 0 0;font-size:.87rem;color:var(--tinte-leise)}

/* Angebotskasten */
.angebot{display:grid;gap:5px;align-content:start;text-align:center}
.angebot__label{margin:0;font-size:.74rem;font-weight:600;color:var(--tinte-leise)}
.angebot__shop{margin:0;font-size:.9rem;font-weight:700}
.angebot__preis{
  margin:2px 0 0;
  font-size:1.9rem;font-weight:800;letter-spacing:-.04em;line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.angebot__preis sup{font-size:.5em;font-weight:800;top:-.7em;letter-spacing:0}
.angebot__preis small{font-size:.55em;font-weight:700;margin-left:2px}
.angebot__zeile{margin:0;font-size:.84rem;color:var(--tinte-leise)}
.angebot__uvp{text-decoration:line-through}
.angebot__rabatt{color:var(--rot);font-weight:700;margin-left:5px}
.angebot__sparen{margin:0;font-size:.82rem;font-weight:700;color:var(--rot)}
.angebot__offen{margin:2px 0 0;font-size:.88rem;line-height:1.45;color:var(--tinte-leise)}
.angebot__einschaetzung{margin:2px 0 0;font-size:.84rem;color:var(--tinte-leise)}
.angebot__einschaetzung b{font-weight:700}
.angebot__einschaetzung .ist-gut{color:var(--gruen-tief)}
.angebot__fuss{margin:0;font-size:.69rem;line-height:1.45;color:var(--tinte-leise)}


/* ============================================================
   BAUSTEIN: detailblock
   ============================================================ */
.detailzone{padding:6px 0 20px}
.abschnitt-titel{margin:26px 0 12px;font-size:1.3rem;font-weight:800;letter-spacing:-.025em}

.detail{
  background:var(--karte);border-radius:var(--r);box-shadow:var(--schatten);
  padding:14px;margin-bottom:14px;scroll-margin-top:14px;
}
.detail__zeile{
  display:grid;grid-template-columns:180px minmax(0,1fr) 210px;
  gap:20px;align-items:start;
}
.detail__medien{display:grid;gap:8px}
.detail__gross,.detail__klein{
  margin:0;border:1px solid var(--linie-zart);border-radius:var(--r-klein);
  background:#fff;overflow:hidden;aspect-ratio:1;
}
.detail__gross{border-color:var(--cta)}
.detail__reihe{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.detail__medien svg{display:block;width:100%;height:100%}

.detail__text{min-width:0}
.detail__text h3{
  margin:0 0 8px;font-size:1.02rem;font-weight:700;line-height:1.35;
  overflow-wrap:anywhere;
}
.detail__zeilen{list-style:none;margin:0 0 12px;padding:0}
.detail__zeilen li{
  display:flex;align-items:center;gap:7px;margin-bottom:4px;
  font-size:.84rem;color:var(--cta-tief);
}
.detail__zeilen svg{width:14px;height:14px;flex:none}
.detail__zeilen .aktion{margin:0 0 0 6px}
.detail__hinweis{
  margin:12px 0 0;padding:9px 12px;
  background:#eff6fc;border:1px solid #cfe2f2;border-radius:var(--r-klein);
  font-size:.83rem;line-height:1.5;color:var(--navy-band);text-align:center;
}
.detail__text h4{margin:14px 0 4px;font-size:.9rem;font-weight:700}


/* ============================================================
   Ratgebertext
   ============================================================ */
.ratgeber{
  background:var(--karte);border-radius:var(--r);box-shadow:var(--schatten);
  padding:18px 20px;
}
.ratgeber h3{margin:18px 0 6px;font-size:1.05rem;font-weight:700;letter-spacing:-.015em}
.ratgeber h3:first-child{margin-top:0}
/* Absätze über die volle Kastenbreite.

   Hier stand max-width:76ch. Bei 1120px Bahn endete der Text nach gut zwei
   Dritteln, und rechts blieb ein breiter weißer Streifen – der Kasten sah
   halb leer aus.

   Die Begrenzung war als Lesehilfe gedacht: Sehr lange Zeilen sind
   anstrengend. Innerhalb eines Kastens mit Innenabstand wirkt der Bruch aber
   wie ein Fehler, nicht wie Absicht. */
.ratgeber p{margin:0 0 10px;line-height:1.65;color:#3a4a5c}


/* ============================================================
   BAUSTEIN: kacheln
   ============================================================ */
.kacheln{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:12px;list-style:none;margin:0;padding:0;
}
.kachel{
  display:flex;flex-direction:column;
  background:var(--karte);border-radius:var(--r);box-shadow:var(--schatten);
  overflow:hidden;text-decoration:none;color:inherit;
  transition:box-shadow .15s ease,transform .15s ease;
}
.kachel:hover{box-shadow:var(--schatten-hoch);transform:translateY(-1px)}
.kachel__bilder{display:grid;grid-template-columns:repeat(3,1fr);background:#fff}
.kachel__bilder svg{display:block;width:100%;height:auto;aspect-ratio:1}
.kachel__text{padding:10px 12px 12px;border-top:1px solid var(--linie-zart)}
.kachel__titel{display:block;margin-bottom:3px;font-size:.94rem;font-weight:700;letter-spacing:-.015em}
.kachel__meta{display:block;font-size:.79rem;color:var(--tinte-leise)}
.kachel__meta b{color:var(--tinte)}


/* ============================================================
   BAUSTEIN: banner
   ============================================================ */
/* Verhalten vom Standardlayout übernommen.

   Vorher klebte der Banner über die volle Breite am unteren Rand. Der
   Cookie-Hinweis liegt dort ebenfalls und trägt z-index:70 – er verdeckte den
   Banner vollständig, und es sah aus, als verschwände er.

   Im Standardlayout schwebt der Banner als Kasten über dem Seitenende:
   schmaler, mit Abstand nach unten und abgerundet. Der Cookie-Hinweis legt
   sich dann darüber, ohne ihn zu verbergen – man sieht beide.

   Die Farben bleiben, wie sie sind: dunkler Grund, Rahmen in der
   Schaltflächenfarbe. */
.banner{
  position:fixed;left:50%;bottom:1rem;z-index:40;
  width:min(980px,94vw);translate:-50% 0;
  background:var(--navy);color:#fff;
  border:2px solid var(--cta);border-radius:var(--r);
  box-shadow:0 8px 30px rgba(14,44,64,.25);

  /* Erst nach der eingestellten Scrolltiefe. site.js setzt ist-sichtbar. */
  transform:translateY(160%);opacity:0;visibility:hidden;
  transition:transform .3s cubic-bezier(.3,0,.2,1),opacity .22s ease;
}
.banner.ist-sichtbar{transform:translateY(0);opacity:1;visibility:visible}
.banner__inner{
  display:flex;align-items:center;gap:12px;
  padding:8px 14px;max-width:var(--bahn);margin:0 auto;
}
.banner__bild{flex:none;width:44px;height:44px;margin:0;background:#fff;border-radius:var(--r-klein);overflow:hidden}
.banner__bild svg{display:block;width:100%;height:100%}
.banner__text{min-width:0;flex:1}
.banner__label{display:block;font-size:.68rem;font-weight:700;color:#8ec8f2}
.banner__titel{display:block;font-size:.88rem;font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.banner__meta{display:block;font-size:.76rem;color:rgba(255,255,255,.72)}
.banner .cta{flex:none;padding:9px 18px}
.banner__zu{
  flex:none;cursor:pointer;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.12);color:#fff;
  font-size:1rem;line-height:1;
}
.banner__zu:hover{background:rgba(255,255,255,.24)}
#banner-zu:checked ~ .banner{display:none}


/* ============================================================
   Überlagerungen: Methode und Exit-Popup
   ============================================================ */
.overlay{
  display:none;position:fixed;inset:0;z-index:60;
  background:rgba(14,44,64,.55);
  padding:20px;overflow:auto;
}
.overlay:target{display:grid;place-items:center}
.overlay__kasten{
  position:relative;
  background:#fff;border-radius:var(--r);
  max-width:560px;width:100%;padding:22px 24px;
  box-shadow:0 12px 40px rgba(14,44,64,.35);
}
.overlay__zu{
  position:absolute;top:10px;right:12px;
  width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;text-decoration:none;
  color:var(--tinte-leise);font-size:1.1rem;line-height:1;
}
.overlay__zu:hover{background:var(--flaeche)}
.overlay h3{margin:0 0 8px;font-size:1.15rem;font-weight:800;letter-spacing:-.02em}
.overlay p{margin:0 0 10px;font-size:.9rem;line-height:1.6;color:#3a4a5c}

/* Exit-Popup nach der Vorlage: Bild links, Text rechts */
.popup__kasten{max-width:640px;padding:0;overflow:hidden}
.popup__zeile{display:grid;grid-template-columns:220px minmax(0,1fr)}
.popup__bild{
  margin:0;background:var(--flaeche);padding:20px;
  display:grid;place-items:center;position:relative;
}
.popup__bild svg{width:100%;height:auto}
.popup__rabatt{
  position:absolute;top:12px;left:12px;
  background:var(--rot);color:#fff;border-radius:var(--r-klein);
  padding:3px 9px;font-size:.8rem;font-weight:700;
}
.popup__text{padding:22px 24px;text-align:center}
.popup__kopf{margin:0 0 12px;font-size:1.3rem;font-weight:800;line-height:1.25;letter-spacing:-.02em}
.popup__kopf em{font-style:normal;color:var(--rot)}
.popup__uhr{display:flex;justify-content:center;gap:8px;margin:0 0 12px}
.popup__uhr span{
  border:1px solid var(--linie);border-radius:var(--r-klein);
  padding:6px 10px;min-width:52px;
  font-size:1.1rem;font-weight:800;font-variant-numeric:tabular-nums;
}
.popup__uhr small{display:block;font-size:.62rem;font-weight:500;color:var(--tinte-leise)}
.popup__titel{margin:0 0 14px;font-size:.86rem;color:var(--tinte-leise);line-height:1.45}
.popup__fuss{margin:12px 0 0;font-size:.72rem;color:var(--tinte-leise)}


/* ============================================================
   BAUSTEIN: fuss
   ============================================================ */
.rechtliches{
  background:var(--karte);border-radius:var(--r);box-shadow:var(--schatten);
  padding:16px 20px;
}
.rechtliches h3{margin:14px 0 5px;font-size:.98rem;font-weight:700}
.rechtliches h3:first-child{margin-top:0}
.rechtliches p{margin:0 0 8px;font-size:.83rem;line-height:1.6;color:var(--tinte-leise);max-width:82ch}

.fuss{background:var(--navy);color:rgba(255,255,255,.78);margin-top:26px;padding:22px 0 26px}
/* HIER STAND ein zusätzlicher Fußabstand von 92px.

   Er war nötig, solange der Banner am unteren Rand klebte und den Fußbereich
   verdeckte. Jetzt schwebt er als Kasten darüber – der Platz bliebe leer.

   Das Standardlayout kennt diese Regel aus demselben Grund nicht. */
.fuss__reihen{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px}
.fuss h4{margin:0 0 7px;font-size:.88rem;font-weight:700;color:#fff}
.fuss ul{list-style:none;margin:0;padding:0}
.fuss li{margin-bottom:4px;font-size:.85rem}
.fuss a{color:rgba(255,255,255,.8);text-decoration:none}
.fuss a:hover{color:#fff;text-decoration:underline}
.fuss__schluss{
  margin-top:18px;padding-top:12px;
  border-top:1px solid rgba(255,255,255,.15);
  font-size:.77rem;color:rgba(255,255,255,.6);
}


/* ============================================================
   BAUSTEIN: startseite
   ============================================================ */
.start{background:var(--navy-band);color:#fff;padding:30px 0 26px}
.start h1{
  margin:0 0 10px;
  font-size:2.2rem;line-height:1.18;font-weight:400;letter-spacing:-.025em;
  max-width:22ch;text-wrap:balance;
}
.start h1 em{font-style:normal;font-weight:800;color:#8ec8f2}
.start__lead{margin:0;max-width:66ch;font-size:1rem;line-height:1.6;color:rgba(255,255,255,.85)}
.start .such-form{max-width:520px;margin:18px 0 0}

.vertrauen{
  display:flex;flex-wrap:wrap;gap:8px 24px;
  list-style:none;margin:18px 0 0;padding:0;
  font-size:.86rem;color:rgba(255,255,255,.85);
}
.vertrauen li{display:flex;align-items:center;gap:7px}
.vertrauen svg{width:15px;height:15px;flex:none;color:#7fd39a}

.zahlen{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:10px;list-style:none;margin:18px 0 0;padding:0;
}
.zahlen li{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-klein);padding:10px 13px;
}
.zahlen b{display:block;font-size:1.45rem;font-weight:800;letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}
.zahlen span{font-size:.8rem;color:rgba(255,255,255,.72)}

.block{padding:22px 0 2px}

.kategorien{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:11px;list-style:none;margin:0;padding:0;
}
.kategorien a{
  display:block;background:var(--karte);border-radius:var(--r);box-shadow:var(--schatten);
  padding:12px 14px;text-decoration:none;color:inherit;
  transition:box-shadow .15s ease;
}
.kategorien a:hover{box-shadow:var(--schatten-hoch)}
.kategorien b{display:block;font-size:.95rem;font-weight:700;letter-spacing:-.015em}
.kategorien span{font-size:.8rem;color:var(--tinte-leise)}

.beitraege{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:12px;list-style:none;margin:0;padding:0;
}
.beitrag{
  display:flex;flex-direction:column;
  background:var(--karte);border-radius:var(--r);box-shadow:var(--schatten);
  overflow:hidden;text-decoration:none;color:inherit;
  transition:box-shadow .15s ease;
}
.beitrag:hover{box-shadow:var(--schatten-hoch)}
.beitrag svg{display:block;width:100%;height:auto;aspect-ratio:16/9}
.beitrag__text{padding:11px 13px 13px}
.beitrag__datum{margin:0 0 3px;font-size:.75rem;color:var(--tinte-leise)}
.beitrag__titel{display:block;margin-bottom:4px;font-size:.98rem;font-weight:700;letter-spacing:-.015em;line-height:1.3}
.beitrag__anriss{display:block;font-size:.85rem;line-height:1.5;color:var(--tinte-leise)}

.start-fragen{
  background:var(--karte);border-radius:var(--r);box-shadow:var(--schatten);
  padding:6px 18px;
}
.start-fragen details{border-bottom:1px solid var(--linie-zart)}
.start-fragen details:last-child{border-bottom:0}
.start-fragen summary{
  list-style:none;cursor:pointer;padding:12px 0;
  font-size:.95rem;font-weight:600;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.start-fragen summary::-webkit-details-marker{display:none}
.start-fragen summary::marker{content:""}
.start-fragen summary .pfeil{color:var(--cta-tief)}
.start-fragen details[open] summary .pfeil{transform:rotate(180deg)}
.start-fragen p{margin:0 0 12px;font-size:.88rem;line-height:1.6;color:var(--tinte-leise);max-width:78ch}

/* HIER STAND eine zweite Gestaltung der Themenliste.

   Sie sprach „.themen" an – also den ganzen Abschnitt – und setzte darauf
   display:flex mit margin:0 und padding:0. Damit war die Zentrierung aus
   „bahn" ausgehebelt: Der Abschnitt stand links am Bildschirmrand, während
   alles darüber und darunter eingerückt war.

   Gemeint war die Liste, und die heißt .themen__liste – weiter unten schon
   vollständig gestaltet. Das hier war ein Überbleibsel aus einer früheren
   Fassung, in der der Abschnitt selbst die Liste war.

   Zweimal habe ich am 16.09.2026 an der falschen Stelle gesucht, weil ich die
   spätere Regel für die einzige hielt. Eine Klasse, die an zwei Stellen
   gestaltet wird, ist der Grund. */


/* ============================================================
   Mobil — der wichtigere Fall
   ============================================================ */
@media (max-width:860px){
  .karte__zeile{grid-template-columns:40px 108px minmax(0,1fr) 190px}
  .detail__zeile{grid-template-columns:150px minmax(0,1fr) 190px}
}

@media (max-width:720px){
  .kopf__inner{gap:10px}
  .such-form{display:none}
  .such-knopf{display:block}

  .aufmacher h1{font-size:1.5rem}
  .start h1{font-size:1.7rem}
  .start .such-form{display:flex}

  .karte__zeile{
    grid-template-columns:26px 92px minmax(0,1fr);
    grid-template-areas:
      "rang bild note"
      "info info info"
      "abschluss abschluss abschluss";
    gap:10px;padding:12px;align-items:start;
  }
  .rang{width:26px;height:26px;font-size:.9rem;border:0;padding:0;justify-self:start}
  .note{justify-self:end;width:106px;align-self:start}
  /* Die Ausrichtung rechts gilt jetzt für alle Breiten – die Regel stand
     hier doppelt. */
  /* Das Fazit wird nicht mehr fest ausgeblendet – dafuer gibt es den
     Schalter „fazit_mobil", der die Klasse nur-breit setzt. */

  .details__inner{grid-template-columns:minmax(0,1fr);gap:14px;padding:6px 12px 12px}
  .angebot{order:-1;padding-bottom:12px;border-bottom:1px solid var(--linie-zart)}

  .detail__zeile{grid-template-columns:minmax(0,1fr);gap:14px}
  .detail__medien{max-width:240px}

  .popup__zeile{grid-template-columns:minmax(0,1fr)}
  .popup__bild{padding:14px}
  .popup__text{padding:16px 18px}

  .banner__inner{gap:9px;padding:7px 12px}
  .banner__bild{width:36px;height:36px}
  .banner__titel{font-size:.8rem}
  .banner .cta{padding:9px 12px;font-size:.85rem}
}

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

/* ==========================================================================
   Nachtrag aus dem Einbau
   --------------------------------------------------------------------------
   Vier Klassen, die in der Lieferung nicht vorkamen, weil sie erst beim Umbau
   entstanden sind:

   .details         Zuklappen. Die Lieferung nutzte <details>, dessen
   .mehr__knopf     Auf- und Zuklappen der Browser selbst erledigt. Im Betrieb
                    ist es ein Knopf, den site.js bedient – die Lieferung hatte
                    das angekuendigt. Ohne diese Regeln stand alles dauerhaft
                    offen: Die vorhandenen Regeln greifen auf `summary` und
                    `[open]` und liefen damit ins Leere.
   .textlink        Die Verweise im Fussbereich, die ein Overlay oeffnen, sind
                    Knoepfe und keine Adressen. Sie sollen trotzdem wie
                    Verweise aussehen.
   .frage__*        Erzeugte Fragen und Antworten. Die Lieferung kannte sie
                    nicht, weil der zugehoerige Schalter dort auf aus steht –
                    gestaltet gehoeren sie trotzdem, sonst stehen sie nackt da,
                    sobald jemand ihn umlegt.
   ========================================================================== */

.details{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .45s cubic-bezier(.25,.8,.3,1);
}
.details.ist-offen{grid-template-rows:1fr}
.details > *{overflow:hidden;min-height:0}

.mehr__knopf{
  display:flex;align-items:center;gap:8px;
  width:100%;padding:11px 18px;
  border:0;border-top:1px solid var(--linie);
  background:var(--flaeche);
  font:inherit;font-size:13px;font-weight:600;color:var(--blau);
  cursor:pointer;text-align:left;
}
.mehr__knopf:hover{background:var(--linie-zart)}
.mehr__knopf .pfeil{display:inline-flex;width:16px;height:16px;transition:transform .18s ease}
.mehr__knopf[aria-expanded="true"] .pfeil{transform:rotate(180deg)}
.mehr__knopf .zu{display:none}
.mehr__knopf[aria-expanded="true"] .auf{display:none}
.mehr__knopf[aria-expanded="true"] .zu{display:inline}

.textlink{
  border:0;background:none;padding:0;
  font:inherit;color:inherit;
  text-decoration:underline;text-underline-offset:3px;
  cursor:pointer;
}
.textlink:hover{color:var(--blau)}

.frage{margin:0 0 12px}
.frage__frage{margin:0 0 3px;font-weight:600;font-size:14px}
.frage__antwort{margin:0;font-size:14px;line-height:1.6;color:var(--tinte-leise)}

/* ==========================================================================
   Nachtrag 2 aus dem Einbau: gemeinsame Bausteine
   --------------------------------------------------------------------------
   Ein Layout mit grundstil:false ersetzt das Grund-Stylesheet vollstaendig.
   Damit fehlen auch die Regeln fuer alles, was nicht als Layout-Baustein
   ausgetauscht wird: Kopfbereich der Vergleichsseite, Overlays,
   Cookie-Hinweis, Exit-Einblendung, Themenliste, Rechtstexte.

   Das faellt nicht sofort auf. Der Werbehinweis und „Wie vergleichen wir?"
   oeffneten am 8. September durchaus ein Overlay – nur war es unsichtbar,
   weil keine einzige Regel dafuer existierte. Von aussen sah es aus, als
   waeren die Verweise tot.
   ========================================================================== */

/* ---- Kopfbereich der Vergleichsseite ---------------------------------- */
.hero{background:var(--navy);color:#fff;padding:26px 0 30px}
.hero__inner{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:32px;align-items:start}
.hero .eyebrow{
  margin:0 0 6px;font-size:.72rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.6);
}
.hero h1{
  margin:0;font-size:clamp(1.5rem,3.2vw,2.3rem);font-weight:800;
  line-height:1.15;letter-spacing:-.025em;
}
.hero h1 em{font-style:normal;color:var(--cta-hell,#8ab6ea)}
.hero__lead{margin:12px 0 0;max-width:60ch;font-size:.98rem;line-height:1.6;color:rgba(255,255,255,.82)}
.hero__kasten{background:rgba(255,255,255,.07);border-radius:var(--r);padding:15px 17px}
.marken{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.marken li{display:flex;gap:8px;font-size:.85rem;color:rgba(255,255,255,.9);line-height:1.4}
.haken{color:var(--gruen-hell,#6ec48d);font-weight:700;flex:none}
.hero__links{
  display:flex;flex-wrap:wrap;gap:18px;margin:14px 0 0;
  font-size:.82rem;
}
.hero__links .textlink{color:rgba(255,255,255,.82)}
.hero__links .textlink:hover{color:#fff}

.listenzone{background:var(--flaeche);padding:22px 0 30px}
.liste{display:grid;gap:14px}

/* ---- Weiterfuehrende Informationen ------------------------------------ */
.mehrinfos{margin:30px 0 0}
.mehrinfos__lead{margin:0 0 16px;font-size:.88rem;color:var(--tinte-leise);max-width:70ch}

/* ---- Themenliste und Rechtstexte -------------------------------------- */
/* Nur oben Abstand – links und rechts bleibt „auto" aus .bahn stehen.

   Hier stand margin:26px 0 0. Das setzt auch die Seitenabstände auf null und
   überschreibt damit das margin:0 auto der Bahn, weil es später in der Datei
   kommt. Der Block stand dann nicht mehr mittig. */
.themen{margin-top:26px}
.themen__liste{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.themen__liste a{
  display:inline-block;padding:6px 12px;border:1px solid var(--linie);
  border-radius:var(--r-pille);background:#fff;
  font-size:.83rem;text-decoration:none;color:var(--tinte);
}
.themen__liste a:hover{border-color:var(--cta);color:var(--cta)}

.rechtliches{margin:26px 0 0;font-size:.78rem;line-height:1.6;color:var(--tinte-leise)}
.rechtliches p{margin:0 0 8px}
.hinweis{
  margin:16px 0;padding:14px 16px;border-radius:var(--r);
  background:#fff;border:1px solid var(--linie);font-size:.9rem;
}

/* ---- Overlays ---------------------------------------------------------- */
.overlay{
  position:fixed;inset:0;z-index:80;
  display:grid;place-items:center;padding:18px;
  background:rgba(10,22,40,.55);
}
.overlay[hidden]{display:none}
.overlay__box{
  position:relative;width:min(560px,100%);max-height:86vh;overflow:auto;
  background:#fff;border-radius:var(--r);padding:22px 24px;
  box-shadow:0 24px 60px rgba(8,20,40,.32);
}
.overlay__box h3{margin:0 0 10px;font-size:1.1rem}
.overlay__box p{margin:0 0 10px;font-size:.9rem;line-height:1.65;color:var(--tinte-leise)}
.overlay__liste{margin:0;padding-left:18px;font-size:.9rem;line-height:1.7;color:var(--tinte-leise)}
.overlay__zu{
  position:absolute;top:10px;right:12px;
  border:0;background:none;font-size:1.6rem;line-height:1;
  color:var(--tinte-leise);cursor:pointer;
}
.overlay__zu:hover{color:var(--tinte)}

/* ---- Cookie-Hinweis ---------------------------------------------------- */
.cookie{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:var(--navy);color:#fff;padding:13px 0;
}
.cookie__inner{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.cookie__text{margin:0;flex:1;min-width:240px;font-size:.83rem;line-height:1.55;color:rgba(255,255,255,.85)}
.cookie__knoepfe{display:flex;gap:8px}
.cookie__ok,.cookie__ablehnen{
  border:0;border-radius:var(--r-klein);padding:8px 15px;
  font:inherit;font-size:.83rem;font-weight:600;cursor:pointer;
}
.cookie__ok{background:var(--cta);color:#fff}
.cookie__ablehnen{background:rgba(255,255,255,.14);color:#fff}

/* ---- Exit-Einblendung -------------------------------------------------- */
.overlay__box--exit{padding:0;overflow:hidden}
/* ---------------- Exit-Popup ----------------------------------------------

   Aufbau vom Standardlayout übernommen: zweispaltig, Bild links mit den
   Fahnen darüber, Text und Schaltfläche rechts. Die eigene, schlichtere
   Fassung stand hier vorher – sie wirkte neben der Liste wie ein Fremdkörper.

   Die Farben kommen aus den Variablen dieses Layouts, nicht aus dem
   Standardstil: Die Schaltfläche trägt „--cta" wie in der Liste, und die
   Fahne oben links nutzt dieselben Siegel-Klassen wie die Produktkarten –
   Testsieger also grün, Rabatt rot.

   Übersetzt wurden die Variablennamen: --ink wird --tinte, --ink-2 wird
   --tinte-leise, --display wird --schrift. Ohne das griffen die Regeln ins
   Leere, weil dieses Layout den Grundstil nicht lädt.
*/
/* ---------------- Exit-Overlay ---------------- */
.overlay__box--exit{width:min(880px,100%);padding:0;overflow:hidden}
.overlay__box--exit .exit__bild{overflow:visible}
.exit{display:grid;grid-template-columns:.82fr 1fr}
.exit__bild{
  position:relative;min-width:0;padding:5.2rem 1.4rem 1.6rem;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;
  border-right:1px solid var(--line);
}
.exit__fahne{position:absolute;left:0;z-index:4;font-size:.82rem;padding:.42rem 1.5rem .42rem .85rem}
.exit__fahne--sieger{top:16px}
.exit__fahne--rabatt{top:56px}
.exit__fahne::after{width:9px;height:8px}
.exit__geraet{width:100%;max-width:230px}
.exit__geraet svg{width:100%;height:auto;border-radius:var(--r-klein)}
.exit__shop{margin:0;text-align:center;font-size:.8rem;color:var(--tinte-leise);line-height:1.35}
.exit__shop b{display:block;font-size:1.05rem;color:var(--tinte);letter-spacing:-.02em}
.exit__nutzer{
  display:flex;align-items:center;gap:.75rem;margin:0;
  font-size:.68rem;color:var(--tinte-leise);line-height:1.45;
}
.exit__nutzer svg{width:52px;height:52px;flex:none;color:var(--tinte-leise);opacity:.6}
.exit__nutzer b{color:var(--tinte)}

.exit__text{background:var(--paper);padding:1.7rem 1.6rem 1.6rem;display:grid;align-content:center;gap:1rem;min-width:0}
.exit__kopf{
  font-family:var(--schrift);font-weight:800;
  font-size:clamp(1.6rem,2.9vw,2.08rem);line-height:1.12;letter-spacing:-.03em;
  margin:0;text-align:center;
}
.exit__kopf em{font-style:normal;color:var(--rot);display:block}
.exit__zwischen{
  font-family:var(--schrift);font-weight:700;font-size:1.12rem;line-height:1.25;
  letter-spacing:-.02em;margin:0;text-align:center;
}
.exit__beliebt{margin:0;text-align:center;font-size:.85rem;color:var(--tinte-leise)}
.exit__beliebt b{color:var(--tinte)}
.uhr{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin:0}
.uhr div{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-klein);
  padding:.55rem .2rem .45rem;text-align:center;
}
.uhr b{display:block;font-family:var(--schrift);font-weight:700;font-size:1.5rem;letter-spacing:-.03em;line-height:1}
.uhr span{font-size:.68rem;color:var(--tinte-leise)}
.exit__produkt{margin:0;text-align:center;font-size:.92rem;color:var(--tinte-leise);min-width:0}
.exit__marke{
  display:block;font-size:.78rem;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;
}
.exit__modell{
  display:block;max-width:80%;margin:.1rem auto 0;
  font-weight:700;color:var(--tinte);
  /* laenger als eine Zeile wird mit Auslassungszeichen gekuerzt */
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.exit__produkt b{color:var(--tinte)}
.exit .cta{margin-top:0;padding:.85rem 1.2rem;font-size:1rem}

@media (max-width:720px){
  .exit{grid-template-columns:1fr}
  .exit__bild{
    border-right:0;border-bottom:1px solid var(--line);
    flex-direction:row;flex-wrap:wrap;gap:.7rem;padding:4.6rem 1rem 1rem;
  }
  .exit__fahne{font-size:.76rem;padding:.36rem 1.3rem .36rem .75rem}
  .exit__fahne--sieger{top:12px}
  .exit__fahne--rabatt{top:46px}
  .exit__geraet{max-width:130px;flex:none}
  .exit__shop{flex:1;text-align:left}
  .exit__nutzer{width:100%}
  .exit__text{padding:1.2rem 1.1rem 1.3rem}
  .uhr b{font-size:1.25rem}
}

/* ---- Kategoriekacheln (Kategorieseite) --------------------------------- */
.kategorien__raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.kategorie-karte{
  display:block;padding:14px 16px;background:#fff;border:1px solid var(--linie);
  border-radius:var(--r);text-decoration:none;color:inherit;
}
.kategorie-karte:hover{border-color:var(--cta)}
.kategorie-karte h3{margin:0;font-size:.95rem}
.kategorie-karte p{margin:4px 0 0;font-size:.8rem;color:var(--tinte-leise)}

/* ==========================================================================
   Nachtrag 3: Korrekturen aus der ersten Ansicht im Betrieb
   ========================================================================== */

/* Produktbilder wurden unten abgeschnitten.
   Die Lieferung kannte nur eingebettete SVG und gestaltete deshalb nur
   `.bild svg`. Echte Bilder kommen als <img> mit eigener Groesse und liefen
   aus dem quadratischen Rahmen heraus. */
.bild img{display:block;width:100%;height:100%;object-fit:contain}
.detail__gross img,.detail__klein img{display:block;width:100%;height:100%;object-fit:contain}
.detail__gross{aspect-ratio:1;background:#fff;border-radius:var(--r-klein);overflow:hidden}
.detail__klein{aspect-ratio:1;background:#fff;border-radius:var(--r-klein);overflow:hidden;cursor:pointer}
.detail__klein.ist-aktiv{outline:2px solid var(--cta);outline-offset:1px}
.banner__bild img,.kachel__bilder img{display:block;width:100%;height:100%;object-fit:contain}

/* Der Notenblock zog sich ueber die gesamte Kartenhoehe.
   Er soll oben am Kartenrand beginnen und nur so hoch sein wie noetig. */
.note{align-self:start}

/* Kein waagerechtes Wegscrollen.
   Lange Titel und die Technik-Tabelle sprengten sonst die Breite: In einem
   Raster darf ein Kind nicht schmaler werden als sein Inhalt, solange
   min-width nicht auf 0 steht.

   `overflow-x:hidden` am Body macht jede feste Kopfzeile wirkungslos –
   position:sticky wirkt nicht mehr, sobald ein Vorfahr den Ueberlauf
   abschneidet. Genau daran ist der Schalter „Kopfzeile bleibt stehen"
   gescheitert. `clip` schneidet ebenso ab, richtet aber keinen
   Scroll-Zusammenhang ein. */
html,body{overflow-x:clip}
.karte__zeile > *,.detail__zeile > *,.details__inner > *{min-width:0}
.karte__zeile h3,.detail__text h3{overflow-wrap:anywhere}
.technik{width:100%;display:block;overflow-x:auto}

@media (max-width:760px){
  /* Kopfbereich: Zeilen enger zusammen. Der grosse Zeilenabstand kam von
     der Grundregel fuer Ueberschriften und war auf schmalen Fenstern
     unbrauchbar. */
  .hero{padding:18px 0 20px}
  .hero__inner{grid-template-columns:1fr;gap:16px}
  .hero h1{font-size:1.45rem;line-height:1.2;margin:0}
  .hero .eyebrow{margin-bottom:4px}
  .hero__lead{margin-top:8px;font-size:.9rem;line-height:1.5}
  .hero__links{margin-top:10px;gap:14px}

  /* Die Suche klappt unter der Kopfzeile auf; site.js setzt ist-offen.
     Nicht ueber display: was nicht da ist, kann sich nicht bewegen. Die
     Regeln dafuer stehen im Nachtrag 7. */
  .such-form{
    position:absolute;left:0;right:0;top:100%;
    max-width:none;margin:0;padding:0 16px;
    background:var(--navy);box-shadow:0 12px 24px rgba(8,20,40,.22);
  }

  /* Bewertungsblock ein Fuenftel groesser – auf dem Telefon ist er die
     Angabe, nach der zuerst gesucht wird */
  .note{padding:11px 13px}
  .note__wert{font-size:1.68rem}
  .note__label{font-size:.78rem}
  .urteil{font-size:.82rem}
}

/* Restliche gemeinsame Klassen: Kontaktbereich, Meldungen, Kleinteile */
.kontaktbox{margin:26px 0 0;padding:20px;background:#fff;border:1px solid var(--linie);border-radius:var(--r)}
.kontaktbox__lead{margin:0 0 14px;font-size:.9rem;color:var(--tinte-leise)}
.kontaktform{display:grid;gap:12px}
.kontaktform__reihe{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kontaktform input,.kontaktform textarea{
  width:100%;padding:9px 11px;font:inherit;font-size:.9rem;
  border:1px solid var(--linie);border-radius:var(--r-klein);background:#fff;
}
.kontaktform input:focus,.kontaktform textarea:focus{outline:0;border-color:var(--cta)}

.meldung{padding:11px 14px;border-radius:var(--r-klein);font-size:.88rem;margin:0 0 14px}
.meldung--ok{background:#ecf7f0;border:1px solid #bfe3cc;color:#1d6b3a}
.meldung--fehler{background:#fdeceb;border:1px solid #f6c8c4;color:#a3231b}

.siegel--rot{background:var(--rot)}
.exit__geraet,.exit__text{font-size:.85rem;color:var(--tinte-leise)}
.uhr{font-variant-numeric:tabular-nums;font-weight:700}
.hp{position:absolute;left:-9999px}

@media (max-width:600px){
  .kontaktform__reihe{grid-template-columns:1fr}
}

/* Blog- und Textseiten */
.wissen{margin:24px 0 0}
.wissen__spalten{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start}
.textseite{font-size:.95rem;line-height:1.75;color:var(--tinte)}
.textseite h2{margin:26px 0 10px;font-size:1.2rem}
.textseite h3{margin:20px 0 8px;font-size:1.02rem}
.textseite p{margin:0 0 12px}
.textseite ul,.textseite ol{margin:0 0 12px;padding-left:20px}
.textseite a{color:var(--cta)}
.lead{margin:0 0 16px;font-size:1rem;line-height:1.6;color:var(--tinte-leise)}
.fehler{color:var(--rot);font-size:.85rem}
.kachel__sub{display:block;font-size:.78rem;color:var(--tinte-leise)}

@media (max-width:860px){
  .wissen__spalten{grid-template-columns:1fr}
}

/* Blogübersicht und Blättern */
.blogliste{margin:24px 0 0}
.blogliste__raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.blogkarte{
  display:block;background:#fff;border:1px solid var(--linie);
  border-radius:var(--r);overflow:hidden;text-decoration:none;color:inherit;
}
.blogkarte:hover{border-color:var(--cta)}
.blogkarte__bild{display:block;aspect-ratio:16/9;background:var(--linie-zart);overflow:hidden}
.blogkarte__bild img{width:100%;height:100%;object-fit:cover;display:block}
.blogkarte__datum{display:block;padding:12px 14px 0;font-size:.74rem;color:var(--tinte-leise)}
.blogkarte h3{margin:4px 0 0;padding:0 14px 14px;font-size:.98rem;line-height:1.35}

.blaettern{display:flex;gap:6px;justify-content:center;margin:24px 0 0;flex-wrap:wrap}
.blaettern a,.blaettern span{
  display:inline-block;padding:7px 12px;border:1px solid var(--linie);
  border-radius:var(--r-klein);background:#fff;
  font-size:.85rem;text-decoration:none;color:var(--tinte);
}
.blaettern .ist-aktiv{background:var(--cta);border-color:var(--cta);color:#fff}

/* ==========================================================================
   Nachtrag 4: Feinarbeit nach der zweiten Ansicht
   ========================================================================== */

/* --- Amazon-Schriftzug statt Wort ------------------------------------- */
.amazon-logo{display:inline-block;height:17px;width:auto;vertical-align:-3px;margin-top:5px}

/* Das Kastenlogo trägt den Text „Erhältlich bei" mit und darf deshalb größer
   stehen – ein Viertel mehr als der schlichte Schriftzug. */
.amazon-logo--kasten{height:auto;width:62px;vertical-align:middle}

.angebot__shop .amazon-logo{height:21px;vertical-align:-4px}
.preis-info{display:flex;align-items:center;justify-content:center;gap:5px}

/* --- Aufklappbereich ---------------------------------------------------
   Auf dem Schreibtisch geschlossen ohne Vorschau, auf dem Telefon mit einem
   Streifen (weiter unten).

   Die Bewegung laeuft ueber grid-template-rows von 0fr auf 1fr. Das ist der
   einzige Weg, der wirklich weich laeuft: Eine Hoehenbegrenzung muesste den
   Endwert raten, und wo der Wert zu hoch gegriffen ist, endet die Bewegung
   sichtbar zu frueh. */
.details{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .42s cubic-bezier(.22,.75,.3,1);
}
.details.ist-offen{grid-template-rows:1fr}
.details > *{overflow:hidden;min-height:0}

/* Auch der Innenabstand muss weg.
   Bei Zeilenhoehe null bleibt das Polster des Bereichs stehen – sichtbar als
   Streifen mit angeschnittener Ueberschrift, obwohl der Kasten „zu" ist. */
.details:not(.ist-offen) > *{padding-top:0;padding-bottom:0}

/* --- Leiste mit dem Aufklapplink hebt sich ab ------------------------- */
.mehr__knopf{
  background:#fff;
  border-top:1px solid var(--linie-zart);
  justify-content:center;
}
.mehr__knopf:hover{background:var(--linie-zart)}

/* --- Notenblock: obere Kante buendig, Hoehe nach Inhalt ---------------
   „align-self:stretch" war falsch: Der Block zog sich damit auf die Hoehe der
   Textspalte und wirkte langgezogen. Er soll oben buendig sitzen und nur so
   hoch sein, wie sein Inhalt braucht. */
.karte__zeile{align-items:start}
.note{
  align-self:start;
  /* 14px ist der Innenabstand von .karte__zeile */
  margin:-14px 0 0 0;
  border-radius:0 0 var(--r-klein) var(--r-klein);
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  min-height:0;padding:12px 10px 14px;
}
.note__kopf{display:flex;flex-direction:column;align-items:center;gap:1px}

/* --- Abschlussspalte: senkrecht mittig, mehr Luft zum Notenblock ------ */
.abschluss{align-self:center;padding-left:8px}

/* --- Einheitliche Kartenhoehe -----------------------------------------
   Ohne Mindesthoehe springt die Kartengroesse, sobald ein Schalter umgelegt
   wird – bei zehn Karten untereinander faellt das sofort auf. */
@media (min-width:761px){
  .karte__zeile{min-height:150px}
  .bild{align-self:start}
}

@media (max-width:760px){
  /*
     Das Mobil-Raster der Lieferung bleibt: Rang, Bild und Note in einer
     Reihe, Text darunter. Angepasst werden nur Groessen und die Kante des
     Notenblocks – wie auf den Screenshots des bestehenden Portals.
  */
  /* Produktbild ein Fuenftel groesser */
  .bild{width:100%;max-width:144px}

  /* Abstand zu den Bildschirmraendern: 16 Pixel.
     30 waren zu viel – bei schmalen Fenstern geht der Platz der Karte
     verloren, ohne dass es ruhiger wirkt. */
  .bahn{padding-left:16px;padding-right:16px}
  .listenzone,.detailzone{padding-left:0;padding-right:0}

  /* Bewertungsblock deutlich groesser – auf dem Telefon ist er die Angabe,
     nach der zuerst gesucht wird */
  .note{
    width:150px;min-height:126px;
    margin:-12px -12px 0 0;
    border-radius:0 var(--r) 0 var(--r-klein);
  }
  .note__wert{font-size:2.5rem;line-height:1.02}
  .note__label{font-size:.86rem}
  .urteil{font-size:.9rem}

  /* Beim Highlight steht Text statt einer Note – der braucht weniger Groesse,
     sonst wirkt der Kasten unfoermig */
  .note__wert--text{font-size:1.06rem;line-height:1.25;font-weight:700}

  /* Preisblock unter die Merkmale, nicht darueber */
  .angebot{order:1;padding-bottom:0;border-bottom:0;border-top:1px solid var(--linie-zart);padding-top:12px}

  /* Auf dem Telefon ein Streifen als Hinweis, dass mehr dahintersteckt */
  .details{display:block;grid-template-rows:none;max-height:76px;overflow:hidden;
           transition:max-height .42s cubic-bezier(.22,.75,.3,1);
           -webkit-mask-image:linear-gradient(#000 36px,rgba(0,0,0,.1) 76px);
                   mask-image:linear-gradient(#000 36px,rgba(0,0,0,.1) 76px)}
  .details.ist-offen{max-height:3000px;-webkit-mask-image:none;mask-image:none}

  .nur-breit{display:none}
}

/* ==========================================================================
   Nachtrag 5: Abstaende und Groessen
   ========================================================================== */

/* Abstand zwischen den Karten und ueber der ersten halbiert.
   Bei zehn Karten untereinander summiert sich der Zwischenraum – halbiert
   passt mehr auf den Bildschirm, ohne dass die Karten zusammenkleben. */
.liste{gap:7px}
.listenzone{padding-top:11px}
.liste:first-child{padding-top:8px}

/* Bewertungsblock auf dem Schreibtisch knapp ein Drittel groesser.
   Er ist die Angabe, wegen der die Seite gelesen wird. */
@media (min-width:761px){
  .karte__zeile{grid-template-columns:46px 128px minmax(0,1fr) 154px 216px}
  .note{padding:15px 12px 17px}
  .note__wert{font-size:2.65rem}
  .note__label{font-size:.92rem}
  .urteil{font-size:1rem}
}

/* Mehr Luft ueber der ersten Ueberschrift im Aufklappbereich */
.details__inner{padding-top:16px}
.merkmale-spalte h4:first-child{margin-top:0}

@media (max-width:760px){
  /* Produktbild noch einmal ein Viertel groesser */
  .bild{max-width:180px}
}


/* ==========================================================================
   Nachtrag 6: Detailbereich und Aufklappbereich aus dem Standardlayout
   --------------------------------------------------------------------------
   Beide Bereiche sind unveraendert uebernommen worden – Aufbau wie
   Gestaltung. Die Regeln stammen aus public/css/site.css und stehen hier
   noch einmal, weil dieses Layout den Grundstil nicht laedt.

   WICHTIG: Die Medienabfragen muessen mitkommen. Beim ersten Uebernehmen sind
   sie verloren gegangen – die Ein-Spalten-Fassung fuer schmale Fenster galt
   dadurch auf allen Breiten, und der Detailbereich zeigte alles untereinander
   statt in drei Spalten.
   ========================================================================== */

:root{
  --line:#E3E6EC;
  --line-2:#E3E6EC;
  --ink-2:#5B6875;
  --paper:#F6F7F9;
  --surface:#FFFFFF;
  --schatten:0 1px 2px rgba(16,24,40,.06);
}

.details{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .52s cubic-bezier(.25,.8,.3,1);}
.details.ist-offen{grid-template-rows:1fr}
.details__wrap{overflow:hidden}
.details__inner{opacity:0;transform:translateY(-8px);
  transition:opacity .3s ease, transform .45s cubic-bezier(.25,.8,.3,1);}
.details.ist-offen .details__inner{opacity:1;transform:none;
  transition:opacity .4s ease .12s, transform .5s cubic-bezier(.25,.8,.3,1) .06s;}
.details__inner{display:grid;grid-template-columns:1fr 268px;align-items:start;gap:1.5rem;
  background:#F7F8F9;border:1px solid var(--line-2);border-radius:var(--r-klein);
  padding:1.15rem 1.3rem;margin-top:.8rem;}
.details h4{font-family:var(--display);font-weight:700;font-size:.8rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin:0 0 .8rem;}
/* Fuenf Merkmale statt Datentabelle */
.merkmale{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.merkmale li{position:relative;padding-left:1.55rem;
  font-size:.9rem;line-height:1.45;font-weight:400;color:var(--ink-2);}
.merkmale li::before{content:"";position:absolute;left:0;top:.34rem;width:16px;height:16px;border-radius:50%;
  background:var(--blau-2);}
.merkmale li::after{content:"";position:absolute;left:4.6px;top:.62rem;width:7px;height:4px;
  border-left:2px solid var(--blau);border-bottom:2px solid var(--blau);
  transform:rotate(-45deg);}
/* Angebotsbox */
.angebot{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-klein);
  padding:1rem 1.1rem;align-self:start;}
.angebot__label{margin:0;font-size:.7rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-2);}
.angebot__shop{margin:.15rem 0 .5rem;font-family:var(--display);font-weight:700;font-size:1.02rem}
.angebot__preis{margin:0;font-family:var(--display);font-weight:700;font-size:1.75rem;letter-spacing:-.03em;line-height:1.1}
.angebot__zeile:empty{display:none}
.angebot__zeile{margin:.3rem 0 0;display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;font-size:.84rem}
.angebot__rabatt{background:var(--rot);color:#fff;border-radius:4px;font-weight:700;font-size:.78rem;padding:.08rem .4rem}
.angebot__uvp{color:var(--ink-2);text-decoration:line-through}
.angebot__einschaetzung{margin:.3rem 0 0;font-size:.84rem;color:var(--ink-2)}
.angebot__einschaetzung .ist-gut{color:var(--gruen);font-weight:700}
.angebot__einschaetzung .ist-neutral{color:var(--ink);font-weight:700}
.angebot__sparen{margin:.3rem 0 0;font-size:.84rem;font-weight:700;color:var(--rot)}
.angebot__fuss{margin:.55rem 0 0;font-size:.7rem;color:var(--ink-2);line-height:1.4}
/* ---------------- Weiterführende Informationen ---------------- */
.mehrinfos{margin:2.2rem 0 0;display:grid;gap:.9rem}
.mehrinfos h2{font-family:var(--display);font-weight:700;font-size:clamp(1.3rem,2.6vw,1.7rem);
  letter-spacing:-.02em;margin:0;}
.mehrinfos__lead{margin:-.4rem 0 .3rem;font-size:.9rem;color:var(--ink-2);max-width:80ch}
.detail{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--schatten);
  display:grid;
  grid-template-columns:190px 1fr 240px;
  grid-template-areas:"medien haupt aktion";
  column-gap:1.6rem;row-gap:1rem;padding:1.4rem 1.5rem;align-items:start;}
.detail__medien{grid-area:medien;display:grid;gap:.55rem}
.detail__haupt{grid-area:haupt;min-width:0}
.detail__bild{margin:0;aspect-ratio:1;border:1px solid var(--line-2);border-radius:var(--r-klein);
  overflow:hidden;background:#fff;}
.detail__bild svg{width:100%;height:100%;display:block}
.detail__thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem}
.detail__haupt h3{font-family:var(--display);font-weight:700;font-size:1.43rem;line-height:1.25;
  letter-spacing:-.02em;margin:0 0 .7rem;overflow-wrap:break-word;
  hyphens:auto;text-wrap:pretty;}
.detail__meta{list-style:none;margin:0 0 1.2rem;padding:0;display:grid;gap:.3rem}
.detail__meta li{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  font-size:.88rem;color:var(--blau);font-weight:500;}
.detail__meta .sterne{color:#DCE0E6;font-size:.9rem;flex:none}
.wertung{display:flex;flex-wrap:wrap;align-items:center;gap:.1rem .45rem;min-width:0}
.wertung__note{display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap}
.wertung__anzahl{white-space:nowrap}
.detail__meta .sterne>span{color:#F5A524}
.detail__ikon{opacity:.75;font-size:.9rem;width:1.1em;text-align:center;flex:none}
.detail__meta .meta__uvp{font-size:.84rem;font-weight:400;
  color:var(--ink-2);text-decoration:line-through;}
.detail__haupt h4{font-family:var(--display);font-weight:700;font-size:.94rem;
  margin:1.3rem 0 .55rem;color:var(--ink);}
.detail__haupt h4:first-of-type{margin-top:0}
.technik{margin:0;border:1px solid var(--line-2);border-radius:var(--r-klein);overflow:hidden}
.technik div{display:flex;justify-content:space-between;gap:1rem;padding:.5rem .8rem;font-size:.88rem}
.technik div:nth-child(odd){background:#F8F9FA}
.technik dt{color:var(--ink-2)}
.technik dd{margin:0;font-weight:600;text-align:right}
.vorteile{list-style:none;margin:0;padding:.8rem .95rem;display:grid;gap:.4rem;
  background:#F1F8F3;border:1px solid #D8E9DE;border-radius:var(--r-klein);}
.vorteile li{position:relative;padding-left:1.4rem;font-size:.88rem;font-weight:600;color:var(--gruen);}
.vorteile li::before{content:"";position:absolute;left:.15rem;top:.42rem;width:7px;height:4px;
  border-left:2px solid var(--gruen);border-bottom:2px solid var(--gruen);
  transform:rotate(-45deg);}
.detail__angebot{grid-area:aktion;align-self:start}
.detail__bild img{width:100%;height:100%;object-fit:contain;background:#fff}
.angebot__einschaetzung .ist-teuer{color:var(--rot)}
/* ==========================================================================
   Weiterführende Informationen unter der Liste
   ========================================================================== */

.mehrinfos{margin:2.4rem 0 0}
.mehrinfos h2{font-family:var(--display,Archivo),sans-serif;font-weight:700;
  font-size:clamp(1.15rem,2.2vw,1.45rem);letter-spacing:-.02em;margin:0 0 .5rem;}
.mehrinfos__lead{margin:0 0 1.4rem;color:var(--ink-2,#5A6069);font-size:.92rem;max-width:70ch}
.vorteile{list-style:none;margin:0;padding:.8rem .95rem;display:grid;gap:.4rem;
  background:#F1F8F3;border:1px solid #D8E9DE;border-radius:var(--r-klein,6px);}
.vorteile li{position:relative;padding-left:1.4rem;font-size:.88rem;font-weight:600;color:var(--gruen,#12734C)}
.vorteile li::before{content:"";position:absolute;left:.15rem;top:.42rem;width:7px;height:4px;
  border-left:2px solid var(--gruen,#12734C);border-bottom:2px solid var(--gruen,#12734C);
  transform:rotate(-45deg);}
.frage{border-left:3px solid var(--blau);background:#F7F8FA;
  border-radius:0 var(--r-klein,6px) var(--r-klein,6px) 0;
  padding:.7rem .9rem;margin-bottom:.55rem;}
.frage:last-child{margin-bottom:0}
.frage__frage{margin:0 0 .3rem;font-size:.9rem;font-weight:600;line-height:1.4}
.frage__antwort{margin:0;font-size:.88rem;color:var(--ink-2,#4A5058);line-height:1.55}
/* ==========================================================================
   Detailblock nach Vorlage
   ========================================================================== */

.detail{display:grid;grid-template-columns:190px 1fr 250px;gap:1.5rem;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:1.3rem 1.4rem;margin-bottom:1rem;
  align-items:start;}
.detail__medien{display:grid;gap:.5rem}
.detail__bild{margin:0;aspect-ratio:1;border:1px solid var(--line-2,#EDEFF2);
  border-radius:var(--r-klein,6px);overflow:hidden;background:#fff;
  display:grid;place-items:center;}
.detail__bild img{width:100%;height:100%;object-fit:contain}
.detail__thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:.35rem}
.detail__thumbs span{aspect-ratio:1;border:1px solid var(--line-2,#EDEFF2);border-radius:4px;
  overflow:hidden;background:#fff;display:grid;place-items:center;}
.detail__thumbs span.ist-aktiv{border-color:var(--blau)}
.detail__thumbs img{width:100%;height:100%;object-fit:contain}
.detail__marke{margin:0;font-size:.76rem;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-2,#5A6069);}
.detail__haupt h3{font-family:var(--display,Archivo),sans-serif;font-weight:700;
  font-size:1.15rem;line-height:1.3;letter-spacing:-.02em;margin:.2rem 0 .7rem;
  overflow-wrap:break-word;hyphens:auto;}
.detail__meta{list-style:none;margin:0 0 1.1rem;padding:0;display:grid;gap:.3rem}
.detail__meta li{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  font-size:.87rem;color:var(--blau);font-weight:500;}
.detail__ikon{opacity:.75;font-size:.9rem;width:1.1em;text-align:center;flex:none}
.detail__meta .meta__uvp{font-size:.84rem;font-weight:400;color:var(--ink-2,#5A6069);text-decoration:line-through;}
.detail__meta .sterne{font-size:.9rem;flex:none}
.wertung{display:flex;flex-wrap:wrap;align-items:center;gap:.1rem .45rem}
.wertung__note,.wertung__anzahl{white-space:nowrap}
.detail__text{margin:0 0 1rem;font-size:.92rem;line-height:1.6;color:var(--ink-2,#4A5058)}
.detail__haupt h4{font-family:var(--display,Archivo),sans-serif;font-weight:700;font-size:.8rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2,#5A6069);
  margin:1.2rem 0 .5rem;}
.detail__haupt h4:first-of-type{margin-top:0}
.technik{margin:0;border:1px solid var(--line-2,#EDEFF2);border-radius:var(--r-klein,6px);overflow:hidden}
.technik div{display:flex;justify-content:space-between;gap:1rem;padding:.5rem .8rem;font-size:.87rem}
.technik div:nth-child(odd){background:#F8F9FA}
.technik dt{color:var(--ink-2,#5A6069);margin:0}
.technik dd{margin:0;font-weight:600;text-align:right}
.detail__angebot{align-self:start}
.detail__angebot .angebot{margin:0}
.angebot__sparen{margin:.25rem 0 0;font-size:.84rem;font-weight:600;color:var(--gruen,#12734C)}
.angebot__einschaetzung{margin:.5rem 0 .8rem;font-size:.84rem;color:var(--ink-2,#5A6069)}
.angebot__einschaetzung .ist-gut{color:var(--gruen,#12734C)}
.angebot__einschaetzung .ist-teuer{color:var(--rot)}
/* ==========================================================================
   Mobiles Layout: feste Zeilenzahl
   --------------------------------------------------------------------------
   Auf schmalen Fenstern läuft ein Produkttitel schnell über vier Zeilen.
   Die Karte wächst dann in die Höhe, und der Notenblock wird mitgezogen –
   das Siegel wirkt verzerrt. Zwei Zeilen für den Titel, zwei für die
   Beschreibung; wer mehr lesen will, klappt die Details auf.
   ========================================================================== */



/* Auf schmalen Fenstern sitzt der Notenblock nicht mehr neben der Karte,
   sondern darunter – dort ist eine feste Höhe unnötig und macht Ränder. */


/* Miniaturen sind anklickbar – das soll man auch sehen */
.detail__thumbs span{cursor:pointer;transition:border-color .12s ease}
.detail__thumbs span:hover{border-color:var(--blau)}
.detail__thumbs span:focus-visible{outline:2px solid var(--blau);outline-offset:2px}

@media (max-width:1000px){
  .detail{grid-template-columns:150px 1fr;grid-template-areas:"medien haupt" "aktion aktion"}
  .detail__medien{grid-area:medien}
  .detail__haupt{grid-area:haupt}
  .detail__angebot{max-width:none}
  .detail{grid-template-columns:150px 1fr;grid-template-areas:"medien haupt" "angebot angebot"}
  .detail__medien{grid-area:medien}
  .detail__haupt{grid-area:haupt}
  .detail__angebot{grid-area:angebot}
}

@media (max-width:640px){
  .detail{grid-template-columns:1fr;grid-template-areas:"medien" "haupt" "aktion";padding:1.1rem}
  .detail__medien{max-width:220px}
  /* Umbruch nach der Note, die Anzahl steht bündig darunter */
  .wertung{flex-direction:column;align-items:flex-start;gap:.15rem}
  .wertung__anzahl{white-space:normal}
  .wertung .trenner{display:none}
  .detail{grid-template-columns:1fr;grid-template-areas:"medien" "haupt" "angebot";padding:1.1rem}
  .detail__medien{max-width:220px}
  .wertung{flex-direction:column;align-items:flex-start;gap:.15rem}
  .wertung .trenner{display:none}
}

@media (max-width:900px){
  .details__inner{grid-template-columns:1fr;gap:1.2rem}
}

@media (max-width:760px){
  .detail__haupt h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .detail__text{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;}
}

/* ==========================================================================
   Nachtrag 7: Kopfzeile, Suchfeld, Notenblock
   ========================================================================== */

/* Feste Kopfzeile.
   Der Schalter im Backend setzt die Klasse, die Regel dafuer stand aber nur
   im Grundstil – den dieses Layout nicht laedt. Die Einstellung blieb damit
   wirkungslos. */
.kopf--fest{position:sticky;top:0;z-index:60}

/* Suchfeld auf dem Schreibtisch um die Haelfte breiter */
@media (min-width:761px){
  .such-form{max-width:630px}
}

/* Schriftgroesse mindestens 16px.
   Darunter zoomt iOS beim Antippen ins Feld hinein und bleibt danach
   vergroessert stehen – das laesst sich nur so verhindern, nicht per
   Skript. */
.such-form input,.kontaktform input,.kontaktform textarea{font-size:16px}

/* Loeschknopf im Suchfeld.
   Der Bezugspunkt gilt nur auf dem Schreibtisch: Auf schmalen Fenstern ist
   die Suchzeile absolut unter der Kopfzeile verankert, und ein spaeteres
   `position:relative` hat sie zurueck neben die Wortmarke geholt. */
@media (min-width:761px){
  .such-form{position:relative}
}
.such-leeren{
  position:absolute;right:46px;top:50%;transform:translateY(-50%);
  width:26px;height:26px;border:0;border-radius:50%;
  background:rgba(0,0,0,.06);color:var(--tinte-leise);
  font-size:1.05rem;line-height:1;cursor:pointer;
}
.such-leeren:hover{background:rgba(0,0,0,.12);color:var(--tinte)}
.such-leeren[hidden]{display:none}

/* Highlight-Beschriftung: gleiche Groesse wie die uebrigen Notenkaesten.
   In Notengroesse wirkt „Top-Angebot" unfoermig, weil dort zwei Woerter
   stehen statt einer Zahl. */
.note__wert--text{font-size:1.16rem;line-height:1.25;font-weight:700;letter-spacing:-.01em}

@media (max-width:760px){
  /* Suche gleitet unter der Kopfzeile auf statt zu springen */
  .such-form{
    display:flex;position:absolute;left:0;right:0;top:100%;
    max-height:0;overflow:hidden;opacity:0;
    padding-top:0;padding-bottom:0;
    transition:max-height .28s ease, opacity .22s ease, padding .28s ease;
  }
  .such-form.ist-offen{max-height:80px;opacity:1;padding-top:10px;padding-bottom:10px}

  /* Keine Vorschau mehr – der Kasten ist zu, bis er geoeffnet wird */
  .details{
    display:grid;grid-template-rows:0fr;max-height:none;overflow:visible;
    transition:grid-template-rows .42s cubic-bezier(.22,.75,.3,1);
    -webkit-mask-image:none;mask-image:none;
  }
  .details.ist-offen{grid-template-rows:1fr;max-height:none}

  .note__wert--text{font-size:1.02rem}
  .such-leeren{right:12px}
}

/* Beim Zuklappen springt die Seite.
   Der Browser haelt beim Schrumpfen eines Bereichs den sichtbaren Inhalt
   fest und scrollt dafuer nach – bei zehn Karten untereinander ergibt das
   ein Springen ueber die halbe Seite. Die Verankerung wird deshalb fuer die
   Karten abgeschaltet; site.js holt stattdessen die betroffene Karte sanft
   in den Blick. */
.liste,.karte,.details,.details__wrap{overflow-anchor:none}

/* ==========================================================================
   Nachtrag 8: Abstaende, Bildgroesse, Preisbereich
   ========================================================================== */

/* Abstand zwischen den Karten und ueber der ersten noch einmal halbiert */
.liste{gap:4px}
.listenzone{padding-top:6px}
.liste:first-child{padding-top:4px}
.detail{margin-bottom:7px}

/* Preisangaben in einem abgesetzten Kasten.
   Der Preis ist die Angabe, die den Klick ausloest – er soll sich vom
   uebrigen Text abheben, ohne laut zu werden. */
.detail__angebot .angebot,
.details__inner .angebot{
  background:var(--flaeche);
  border:1px solid var(--linie);
  border-radius:var(--r-klein);
  padding:14px;
}

/* Reduktion und durchgestrichener Preis mittig wie alles andere im Kasten */
.angebot{text-align:center}
.angebot__zeile{
  display:flex;align-items:center;justify-content:center;gap:8px;
  flex-wrap:wrap;margin:4px 0 0;
}
.angebot__sparen,.angebot__einschaetzung,.angebot__fuss,
.angebot__label,.angebot__shop,.angebot__preis{text-align:center}
.angebot__shop{display:flex;justify-content:center}

@media (max-width:760px){
  /* Produktbild vierzig Prozent groesser.
     Die Breite kommt aus der Rasterspalte, nicht aus max-width – deshalb
     blieb es bisher bei 92 Pixeln, obwohl die Angabe schon dreimal
     heraufgesetzt worden war. */
  .karte__zeile{grid-template-columns:26px 130px minmax(0,1fr)}
  .bild{max-width:none;width:100%}
}

/* --- Hochgeladenes Logo -------------------------------------------------
   Die Höhe kommt aus dem Baustein und ist dort bereits um ein Drittel
   angehoben – eine Bildmarke braucht mehr Fläche als ein Schriftzug, um
   dieselbe Wirkung zu haben.

   Hier nur, was das Layout beisteuern muss: kein Umbruch, saubere Ausrichtung,
   und im Fuß kein Abstand aus der Überschrift. */
.marken-logo{max-width:100%;object-fit:contain}
.fuss__marke{margin:0 0 10px;line-height:1}
.fuss__marke .marken-logo{display:block}