/* ------------------------------------------------------------------
   TESTSIEGER 24 — aufgeraeumte, moderne Variante
   Kuehles Off-White, klare Kanten, kleine Radien, klare Signalfarben.
------------------------------------------------------------------- */
:root{
  color-scheme: only light;

  --paper:    #F1F2F4;   /* Hauptseiten-Hintergrund, helles Grau */
  --paper-2:  #E8EAEE;   /* abgesetzte Flaechen */
  --surface:  #FFFFFF;
  --line:     #DDE0E5;
  --line-2:   #EBEDF0;

  --ink:      #14171B;
  --ink-2:    #5C636D;

  --blau:     #1E45D4;
  --blau-2:   #EDF0FE;
  --gruen:    #12734C;
  --teal:     #2C6A88;
  --amber:    #9A6A12;
  --rot:      #D62B22;   /* Rabatt */
  --gold:     #E9A227;   /* Testsieger */
  --hellblau: #2E93D9;   /* Highlight ausser Konkurrenz */
  --cta:      #1F242C;   /* alle Aktionsbuttons */
  --cta-hover:#343D49;

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:    "Inter", system-ui, sans-serif;

  --r:        10px;
  --r-klein:  6px;
  --r-pille:  999px;
  --schatten: 0 1px 2px rgba(20,23,27,.06), 0 2px 8px rgba(20,23,27,.04);
  --schatten-hoch: 0 4px 16px rgba(22,24,28,.10);

  --bahn: min(1180px, 92vw);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{background:var(--paper);color-scheme:only light;max-width:100%}
body{overflow-x:clip}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:16px;line-height:1.55;
  font-feature-settings:"tnum" 1;
}
a{color:inherit}
img{max-width:100%;display:block}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--blau);outline-offset:2px;border-radius:4px}

.bahn{width:var(--bahn);margin-inline:auto}
.eyebrow{
  font-size:.75rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-2);margin:0;
}

/* ---------------- Kopfzeile ---------------- */
.kopf{
  position:sticky;top:0;z-index:30;
  background:rgba(241,242,244,.94);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.kopf__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 0}
.wortmarke{
  display:flex;align-items:center;gap:.5rem;text-decoration:none;
  font-family:var(--display);font-weight:800;font-size:1.05rem;letter-spacing:-.01em;
}
.wortmarke .punkt{
  width:26px;height:26px;border-radius:var(--r-klein);background:var(--ink);
  display:grid;place-items:center;color:#fff;font-size:.72rem;font-weight:700;
}
.kopf__rechts{display:flex;align-items:center;gap:1.25rem}
.such-knopf{
  display:inline-grid;place-items:center;cursor:pointer;
  width:38px;height:38px;padding:0;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-klein);
  transition:border-color .16s ease,background .16s ease,color .16s ease;
}
.such-knopf:hover{border-color:var(--ink-2)}
.such-knopf[aria-expanded="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.such-knopf svg{width:18px;height:18px;grid-area:1/1}
.such-knopf .kreuz{display:none}
.such-knopf[aria-expanded="true"] .lupe{display:none}
.such-knopf[aria-expanded="true"] .kreuz{display:block}

.such-zeile{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .42s cubic-bezier(.22,.72,.24,1);
}
.such-zeile.ist-offen{grid-template-rows:1fr}
.such-zeile__inner{overflow:hidden}
.such-form{
  opacity:0;transform:translateY(-6px);
  transition:opacity .2s ease, transform .34s cubic-bezier(.22,.72,.24,1);
}
.such-zeile.ist-offen .such-form{
  opacity:1;transform:none;
  transition:opacity .28s ease .1s, transform .38s cubic-bezier(.22,.72,.24,1) .04s;
}
.such-form{display:flex;gap:.5rem;align-items:center;padding-bottom:.8rem}
.such-form input{
  flex:1;min-width:0;background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r-klein);
  font-family:var(--body);
  /* 16px sind Pflicht: darunter zoomt iOS Safari beim Antippen die Seite hinein
     und kehrt danach nicht mehr in den Ausgangszustand zurueck. */
  font-size:16px;line-height:1.25;
  padding:.6rem .85rem;
  appearance:none;-webkit-appearance:none;
}
.such-form input::-webkit-search-decoration,
.such-form input::-webkit-search-cancel-button{-webkit-appearance:none}
.such-form input::placeholder{color:var(--ink-2)}
/* Fokusring nach innen gelegt – so kann ihn der Aufklapp-Container nicht
   anschneiden und es entsteht keine Ueberbreite. */
.such-form input:focus,
.such-form input:focus-visible{
  outline:none;border-color:var(--blau);
  box-shadow:inset 0 0 0 2px var(--blau);
}
.such-start{
  flex:none;display:grid;place-items:center;width:40px;height:40px;
  background:var(--ink);color:#fff;border:0;border-radius:var(--r-klein);cursor:pointer;
  transition:background .16s ease;
}
.such-start:hover{background:var(--blau)}
.such-start svg{width:18px;height:18px}

@media (min-width:761px){
  /* Suchfeld steht dauerhaft in der Kopfzeile, kein Ausklappen noetig. */
  .kopf .bahn{display:flex;align-items:center;gap:1.6rem;padding:1rem 0}
  .kopf__inner{flex:none;padding:0}
  .kopf__rechts{display:none}
  .such-zeile{flex:1;grid-template-rows:1fr}
  .such-zeile__inner{overflow:visible}
  /* mittig im verbleibenden Raum: gleicher Abstand zu Logo und rechtem Rand */
  .such-form{padding-bottom:0;max-width:528px;margin-inline:auto;opacity:1;transform:none;transition:none}
}

/* ---------------- Hero ---------------- */
.hero{border-bottom:1px solid var(--line);background:var(--surface)}
.hero__inner{padding:1.7rem 0 1.3rem;display:grid;grid-template-columns:1.25fr .75fr;gap:2.5rem;align-items:end}
.hero h1{
  font-family:var(--display);font-weight:800;
  font-size:clamp(2.2rem,5.6vw,3.7rem);line-height:1.03;letter-spacing:-.03em;
  margin:.75rem 0 0;max-width:19ch;
}
.hero h1 em{font-style:normal;color:var(--blau)}
.hero__lead{margin:1rem 0 0;max-width:52ch;font-size:1.02rem;color:var(--ink-2)}
.hero__lead b{font-weight:700;color:var(--ink)}
.marken{
  display:grid;gap:.55rem;list-style:none;padding:1.1rem 1.2rem;margin:0;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  font-size:.88rem;
}
.marken li{display:flex;align-items:center;gap:.55rem}
.hero__links{
  display:flex;justify-content:space-between;gap:1rem;
  margin:.7rem 0 0;padding:0 .2rem;
}
.textlink{
  background:none;border:0;padding:0;cursor:pointer;
  font-size:.85rem;font-weight:600;color:var(--ink-2);
  text-decoration:underline;text-underline-offset:3px;
}
.textlink:hover{color:var(--blau)}

/* ---------------- Overlay ---------------- */
.overlay{
  position:fixed;inset:0;z-index:60;display:grid;place-items:center;
  padding:1.2rem;background:rgba(20,23,27,.55);
  opacity:0;visibility:hidden;transition:opacity .22s ease;
}
.overlay[hidden]{display:none}
.overlay.ist-offen{opacity:1;visibility:visible}
.overlay__box{
  position:relative;
  background:var(--surface);border-radius:var(--r);
  width:min(560px,100%);max-height:82vh;overflow:auto;
  padding:1.5rem 1.6rem 1.4rem;
  box-shadow:0 18px 50px rgba(20,23,27,.28);
  transform:translateY(14px) scale(.98);
  transition:transform .28s cubic-bezier(.25,.8,.3,1);
}
.overlay.ist-offen .overlay__box{transform:none}
.overlay__box:not(.overlay__box--exit) h3{
  font-family:var(--display);font-weight:700;font-size:1.25rem;
  letter-spacing:-.02em;margin:0 2.2rem .7rem 0;
}
.overlay__box:not(.overlay__box--exit) p{margin:0 0 .8rem;font-size:.94rem;color:var(--ink-2)}
.overlay__box:not(.overlay__box--exit) p:last-of-type{margin-bottom:0}
.overlay__zu{
  position:absolute;top:.75rem;right:.75rem;
  width:34px;height:34px;border-radius:var(--r-klein);cursor:pointer;
  background:var(--paper-2);border:0;color:var(--ink);font-size:1rem;line-height:1;
}
.overlay__zu:hover{background:var(--line)}
.overlay__liste{margin:0;padding-left:1.15rem;font-size:.94rem;color:var(--ink-2)}
.overlay__liste li{margin-bottom:.5rem}
.overlay__liste li:last-child{margin-bottom:0}
.marken .haken{color:var(--gruen);font-weight:700;flex:none}
@media (max-width:860px){
  .hero__inner{grid-template-columns:1fr;gap:1.6rem;padding:1.3rem 0 1rem}
}

/* ---------------- Liste ---------------- */
/* Eigene Flaeche: hebt die weissen Produktboxen ab, ohne dunkel zu wirken. */
.listenzone{
  background:var(--paper);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:.3rem 0 2rem;
}
.liste{padding:1.1rem 0 1rem;display:grid;gap:1.15rem;overflow:visible}
/* --- Karte --- */
.karte{
  position:relative;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--schatten);overflow:visible;
  display:grid;
  grid-template-columns:180px 1fr 148px 172px;
  grid-template-areas:
    "bild info note abschluss"
    "mehr mehr mehr mehr";
  column-gap:1.3rem;row-gap:.8rem;align-items:stretch;
  padding:1.2rem 1.4rem;
  transition:border-color .16s ease,box-shadow .16s ease;
}
.karte:hover{border-color:#BFC5CE;box-shadow:var(--schatten-hoch)}
.karte--gold{border-color:var(--gold)}
.karte--blau{border-color:var(--blau)}
.karte--hellblau{border-color:var(--hellblau)}


/* Platzierung sitzt als kleines Schild auf der linken Kartenkante –
   gleiche Flucht wie die Fahne, spart eine komplette Rasterspalte. */
.rang{
  position:absolute;left:-13px;top:15px;z-index:4;
  min-width:30px;height:23px;padding:0 .35rem;
  border-radius:4px;background:var(--paper-2);color:var(--ink);
  display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-size:.9rem;letter-spacing:-.02em;
  box-shadow:0 2px 3px rgba(20,23,27,.18);
}
/* Bei ausgezeichneten Karten sitzt die Fahne oben, das Schild rueckt darunter. */
.karte--gold .rang,.karte--blau .rang{top:3.35rem}

/* Produktabbildung */
.bild{
  grid-area:bild;margin:0;position:relative;align-self:center;
  aspect-ratio:1;border:1px solid var(--line-2);
  border-radius:var(--r-klein);overflow:hidden;background:#fff;
}
.bild svg{width:100%;height:100%;display:block}
.rabatt{
  position:absolute;top:.45rem;left:.45rem;z-index:2;
  background:var(--rot);color:#fff;border-radius:4px;
  font-size:.78rem;font-weight:700;letter-spacing:-.01em;padding:.14rem .42rem;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}

.info{
  grid-area:info;display:flex;flex-direction:column;justify-content:center;
}
.hersteller{margin:0;font-size:.78rem;font-weight:600;color:var(--ink-2);letter-spacing:.05em;text-transform:uppercase}
.info h3{
  font-family:var(--display);font-weight:700;
  font-size:1.22rem;line-height:1.25;letter-spacing:-.02em;margin:.15rem 0 .3rem;
  overflow-wrap:break-word;hyphens:auto;text-wrap:pretty;
  /* Umbruch frueher: haelt mindestens 50 px Abstand zum Bewertungsblock. */
  padding-right:50px;
}
.info h3 a{text-decoration:none}
.info h3 a:hover{color:var(--blau)}
/* Der Titel-Link spannt sich unsichtbar ueber die gesamte Karte auf. */
.info h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.karte{cursor:pointer}
/* Der Aufklappbereich liegt darueber und bleibt eigenstaendig bedienbar. */
.mehr{position:relative;z-index:2}
.cta{position:relative;z-index:2}
.fazit{margin:0 0 .55rem;font-size:.92rem;color:var(--ink-2);max-width:46ch}
.chips{display:flex;flex-wrap:wrap;gap:.35rem;list-style:none;padding:0;margin:0 0 .55rem}
.chips li{
  border:1px solid var(--line);border-radius:var(--r-pille);
  font-size:.76rem;font-weight:500;color:var(--ink-2);padding:.14rem .6rem;
}

/* --- Live-Hinweis / Sozialbeweis --- */
.live{
  display:flex;align-items:center;gap:.45rem;margin:0;
  font-size:.8rem;font-weight:500;color:var(--ink-2);
}
.live .punkt{
  width:7px;height:7px;border-radius:50%;background:var(--rot);flex:none;
  animation:pulsen 2.4s ease-in-out infinite;
}
.live b{color:var(--ink);font-weight:700}
@keyframes pulsen{0%,100%{opacity:1}50%{opacity:.3}}

/* --- Bewertungslabel --- */
/*
   Der Notenblock hat eine feste Höhe.

   Vorher war er auf "stretch" gesetzt und wuchs mit der Karte: Ein längerer
   Titel oder eine dritte Chip-Zeile zog das Notenfeld in die Länge, und die
   grosse Zahl schwamm irgendwo in der Mitte. Bei zehn Karten untereinander
   hatte dann jede eine andere Kastenhöhe - das sah nach Fehler aus.

   Jetzt gilt: oben ausgerichtet, feste Masse. Die Karte darf wachsen, das
   Notenfeld nicht.
*/
.note{
  grid-area:note;display:flex;flex-direction:column;gap:.4rem;
  align-self:start;
  margin-left:-.75rem;margin-right:.75rem;   /* rueckt den Block nach links */
}
/* Kleiner Infoknopf unten rechts im farbigen Notenblock.
   Liegt ueber der Klickflaeche der Karte, damit er eigenstaendig reagiert. */
.note__kopf{position:relative}
.info-knopf{
  position:absolute;right:.32rem;bottom:.3rem;z-index:2;
  width:15px;height:15px;padding:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.5);color:#fff;
  font-family:var(--display);font-size:.6rem;font-weight:700;line-height:1;
  display:grid;place-items:center;
  transition:background .16s ease,color .16s ease;
}
.info-knopf:hover{background:#fff;color:var(--farbe);border-color:#fff}

/* Testnote: invertiert, farbiger Grund mit weisser Schrift */
/* Rückfallfarbe: Kommt je eine Stufe hinzu, für die noch keine Regel
   existiert, bleibt der Kasten sichtbar statt durchsichtig zu werden. */
.note{--farbe:var(--ink-2,#5A6069)}

.note__kopf{
  background:var(--farbe);color:#fff;border-radius:var(--r-klein);
  padding:.6rem .5rem .68rem;text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:106px;flex:none;
}
.note__label{
  font-size:.62rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:rgba(255,255,255,.78);
}
.note__wert{
  font-family:var(--display);font-weight:800;font-size:2.2rem;line-height:1;
  letter-spacing:-.045em;margin:.1rem 0 .32rem;
}
.note__wert--text{
  font-size:1.05rem;line-height:1.22;letter-spacing:-.01em;
  margin:.2rem 0 .34rem;
}
.note .urteil{
  background:rgba(255,255,255,.2);border-radius:var(--r-pille);
  font-size:.65rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:.12rem .55rem;
}
.note--sehrgut{--farbe:var(--gruen)}
.note--gut{--farbe:var(--teal)}
.note--befriedigend{--farbe:var(--amber)}
.note--ausreichend{--farbe:var(--ink-2,#5A6069)}
.note--highlight{--farbe:var(--hellblau)}

/* Kundenbewertung: klar abgesetzter zweiter Block */
.kundenwertung{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-klein);
  padding:.45rem .35rem .5rem;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.02rem;text-align:center;
  height:74px;flex:none;
}
.sterne{
  position:relative;display:inline-block;white-space:nowrap;
  font-size:.86rem;letter-spacing:.03em;color:#DCE0E6;line-height:1.1;
}
.sterne::before{content:"\2605\2605\2605\2605\2605"}
.sterne>span{position:absolute;top:0;left:0;overflow:hidden;width:var(--fuellung);color:#F5A524}
.kundenwertung__wert{font-size:.74rem;font-weight:700}
.kundenwertung__anzahl{font-size:.66rem;color:var(--ink-2);line-height:1.25}
.kundenwertung__quelle{font-size:.62rem;color:var(--ink-2)}

/* --- Preis & Aktion --- */
/* Gleiche Regel wie beim Notenblock: oben ausrichten statt mittig, damit
   die Spalten aller zehn Karten auf einer Linie beginnen. */
.abschluss{grid-area:abschluss;display:grid;gap:.45rem;align-content:start;text-align:right}
/* Preis steht hier bewusst nicht – nur ein Aktionshinweis, wenn reduziert. */
.aktion{
  margin:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.35rem .5rem;
}
.aktion__text{
  background:var(--rot);color:#fff;border-radius:4px;
  padding:.32rem .55rem;font-size:.79rem;font-weight:700;line-height:1.3;
}
.aktion__uvp{color:var(--ink-2);text-decoration:line-through;font-size:.84rem}
.preis-info{margin:0;font-size:.72rem;color:var(--ink-2)}
.cta{
  margin-top:.25rem;display:block;text-decoration:none;text-align:center;
  background:var(--cta);color:#fff;border-radius:var(--r-klein);
  font-weight:600;font-size:.94rem;padding:.7rem 1.1rem;
  transition:background .16s ease;
}
.cta:hover{background:var(--cta-hover)}

.siegel{
  position:absolute;top:15px;left:-13px;z-index:4;
  padding:.48rem 1.7rem .48rem 1rem;
  font-size:.9rem;font-weight:700;line-height:1.2;letter-spacing:-.01em;
  filter:drop-shadow(0 2px 3px rgba(20,23,27,.22));
}
.siegel::before{            /* Fahnentuch mit Einkerbung rechts */
  content:"";position:absolute;inset:0;z-index:-1;background:var(--flagge);
  clip-path:polygon(0 0, 100% 0, calc(100% - 15px) 50%, 100% 100%, 0 100%);
}
.siegel::after{             /* umgeschlagene Ecke hinter der Karte */
  content:"";position:absolute;left:0;top:100%;width:13px;height:11px;z-index:-2;
  background:var(--flagge-dunkel);
  clip-path:polygon(0 0, 100% 0, 100% 100%);
}
.siegel--gold{--flagge:var(--gold);--flagge-dunkel:#B47C10;color:#2E2005}
.siegel--blau{--flagge:var(--blau);--flagge-dunkel:#122E90;color:#fff}
.anzeige{
  position:absolute;top:.55rem;right:.75rem;z-index:3;
  font-size:.64rem;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-2);
}

.siegel--hellblau{--flagge:var(--hellblau);--flagge-dunkel:#1B6EA6;color:#fff}
.siegel--rot{--flagge:var(--rot);--flagge-dunkel:#8E1A14;color:#fff}

/* Platz fuer die Fahne schaffen */
.karte--gold,.karte--blau,.karte--hellblau{padding-top:3.1rem}

/* --- Aufklappbereich --- */
.mehr{grid-area:mehr;border-top:1px solid var(--line-2);padding-top:.65rem}
.mehr__knopf{
  display:flex;align-items:center;gap:.5rem;background:none;border:0;cursor:pointer;
  padding:.15rem 0;font-weight:600;font-size:.88rem;color:var(--blau);
}
.mehr__knopf:hover{color:var(--ink)}
.mehr__knopf .pfeil{
  display:inline-grid;place-items:center;width:22px;height:22px;flex:none;
  border-radius:var(--r-klein);background:var(--blau-2);transition:transform .22s ease;
}
.mehr__knopf .pfeil svg{width:14px;height:14px}
.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}

.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)}
.cta--amazon{margin-top:.85rem}
.angebot__fuss{margin:.55rem 0 0;font-size:.7rem;color:var(--ink-2);line-height:1.4}

/* ---------------- 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(--ink-2);line-height:1.35}
.exit__shop b{display:block;font-size:1.05rem;color:var(--ink);letter-spacing:-.02em}
.exit__nutzer{
  display:flex;align-items:center;gap:.75rem;margin:0;
  font-size:.68rem;color:var(--ink-2);line-height:1.45;
}
.exit__nutzer svg{width:52px;height:52px;flex:none;color:var(--ink-2);opacity:.6}
.exit__nutzer b{color:var(--ink)}

.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(--display);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(--display);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(--ink-2)}
.exit__beliebt b{color:var(--ink)}
.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(--display);font-weight:700;font-size:1.5rem;letter-spacing:-.03em;line-height:1}
.uhr span{font-size:.68rem;color:var(--ink-2)}
.exit__produkt{margin:0;text-align:center;font-size:.92rem;color:var(--ink-2);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(--ink);
  /* laenger als eine Zeile wird mit Auslassungszeichen gekuerzt */
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.exit__produkt b{color:var(--ink)}
.exit .cta{margin-top:0;padding:.85rem 1.2rem;font-size:1rem}
.overlay__box--exit .overlay__zu{background:rgba(255,255,255,.85)}
@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}
}

/* ---------------- Cookie-Hinweis ---------------- */
.cookie{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:var(--surface);border-top:1px solid var(--line);
  box-shadow:0 -4px 20px rgba(20,23,27,.12);
}
.cookie[hidden]{display:none}
.cookie__inner{
  display:flex;align-items:center;justify-content:space-between;gap:1.6rem;
  min-height:78px;padding:.85rem 0;
}
.cookie__text{margin:0;font-size:.82rem;line-height:1.5;color:var(--ink-2);max-width:88ch}
.cookie__text a{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}
.cookie__text a:hover{color:var(--ink)}
.cookie__knoepfe{display:flex;align-items:center;gap:1rem;flex:none}
.cookie__ablehnen{
  background:none;border:0;cursor:pointer;padding:.5rem .2rem;
  font-size:.84rem;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;
}
.cookie__ablehnen:hover{color:var(--ink)}
.cookie__ok{
  background:var(--cta);color:#fff;border:0;border-radius:var(--r-klein);cursor:pointer;
  font-weight:700;font-size:.95rem;padding:.75rem 2.2rem;
  transition:background .16s ease;
}
.cookie__ok:hover{background:var(--cta-hover)}
@media (max-width:760px){
  .cookie__inner{flex-direction:column;align-items:stretch;gap:.7rem;min-height:0;padding:.8rem 0}
  .cookie__text{font-size:.78rem}
  .cookie__knoepfe{justify-content:space-between}
  .cookie__ok{flex:1;margin-left:1rem}
}

/* Solange der Cookie-Hinweis steht, rueckt das Produktbanner darueber */
body.hat-cookie .banner{bottom:calc(78px + 1.2rem)}
@media (max-width:760px){
  body.hat-cookie .banner{bottom:calc(126px + .8rem)}
}

/* ---------------- Sticky-Banner ---------------- */
.banner{
  position:fixed;left:50%;bottom:1rem;z-index:40;width:min(980px,94vw);translate:-50% 0;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 8px 30px rgba(22,24,28,.16);
  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:1rem;padding:.7rem .9rem}
.banner__bild{
  width:50px;height:50px;border-radius:var(--r-klein);flex:none;overflow:hidden;
  border:1px solid var(--line-2);background:#fff;
}
.banner__bild svg{width:100%;height:100%;display:block}
.banner__note{
  flex:none;background:var(--gruen);color:#fff;border-radius:var(--r-klein);
  padding:.35rem .6rem;text-align:center;line-height:1.15;
}
.banner__note b{font-family:var(--display);font-size:1.15rem;display:block}
.banner__note span{font-size:.62rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.banner__text{flex:1;min-width:0}
.banner__label{
  display:inline-block;background:var(--gold);color:#2E2005;border-radius:3px;
  font-size:.66rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:.1rem .4rem;
}
.banner__name{font-family:var(--display);font-weight:700;font-size:1rem;display:block;line-height:1.25;margin-top:.1rem}
.banner__meta{font-size:.8rem;color:var(--ink-2);display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.banner__uvp{text-decoration:line-through;opacity:.7}
.banner__meta .rabatt-inline{background:var(--rot);color:#fff;border-radius:3px;font-weight:700;font-size:.72rem;padding:0 .3rem}
.banner .cta{flex:none;padding:.7rem 1.4rem}
.banner__zu{
  flex:none;width:30px;height:30px;border-radius:var(--r-klein);cursor:pointer;
  background:var(--paper-2);border:0;color:var(--ink-2);font-size:.9rem;line-height:1;
}
.banner__zu:hover{background:var(--line)}
@media (max-width:800px){
  .banner__inner{flex-wrap:wrap;gap:.6rem}
  .banner__bild{display:none}
  .banner__text{order:2;flex-basis:55%}
  .banner__note{order:1}
  .banner__zu{order:3;margin-left:auto}
  .banner .cta{order:4;width:100%}
}

/* ---------------- Fuß ---------------- */
/* ---------------- Kurzinfo zur Produktgruppe ---------------- */
.wissen{
  margin:1.8rem 0 0;padding:1.3rem 1.5rem;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--schatten);
}
.wissen h2{
  font-family:var(--display);font-weight:700;font-size:1.1rem;
  letter-spacing:-.02em;margin:0 0 .7rem;
}
.wissen__spalten{columns:2;column-gap:2.4rem}
.wissen p{
  margin:0 0 .7rem;font-size:.9rem;line-height:1.6;color:var(--ink-2);
  break-inside:avoid;
}
.wissen p:last-child{margin-bottom:0}
@media (max-width:760px){
  .wissen{padding:1.1rem 1.2rem}
  .wissen__spalten{columns:1}
  .wissen p:first-child{margin-bottom:.7rem}
}

/* ---------------- 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}
.thumb{
  padding:0;aspect-ratio:1;cursor:pointer;overflow:hidden;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-klein);
}
.thumb svg{width:100%;height:100%;display:block}
.thumb--aktiv{border-color:var(--blau);box-shadow:0 0 0 1px var(--blau)}
.thumb:hover{border-color:var(--ink-2)}
.thumb--zwei svg{transform:scaleX(-1)}
.thumb--drei svg{transform:scale(1.25) rotate(-6deg)}

.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);
}

.faq{
  border-left:3px solid var(--blau);background:#F7F8FA;
  border-radius:0 var(--r-klein) var(--r-klein) 0;
  padding:.7rem .9rem;margin-bottom:.55rem;
}
.faq:last-child{margin-bottom:0}
.faq__frage{margin:0 0 .3rem;font-size:.9rem;font-weight:600;line-height:1.4}
.faq__antwort{margin:0;font-size:.88rem;color:var(--ink-2);line-height:1.55}

.detail__angebot{grid-area:aktion;align-self:start}

@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}
}
@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}

}

/* ---------------- Themen & Kategorien ---------------- */
.themen{margin:2.4rem 0 0}
.themen h2,.kategorien h2{
  font-family:var(--display);font-weight:700;font-size:clamp(1.05rem,2.1vw,1.25rem);
  letter-spacing:-.02em;margin:0 0 1rem;
}
.themen__liste{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:.55rem 1.5rem;
}
.themen__liste a{color:var(--blau);text-decoration:none;font-size:.92rem}
.themen__liste a:hover{text-decoration:underline}

.kategorien{margin:2.4rem 0 0}
.kategorien__raster{display:grid;grid-template-columns:repeat(5,1fr);gap:.9rem}
.kachel{
  display:flex;flex-direction:column;text-decoration:none;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--schatten);overflow:hidden;
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.kachel:hover{border-color:#BFC5CE;box-shadow:var(--schatten-hoch);transform:translateY(-2px)}
.kachel__bild{
  position:relative;display:grid;place-items:center;
  aspect-ratio:1;background:#F5F7F9;color:var(--ink-2);
}
.kachel__bild svg{width:52%;height:auto;opacity:.85}
.kachel__titel{
  position:absolute;left:0;right:0;bottom:0;
  background:rgba(255,255,255,.92);backdrop-filter:blur(2px);
  padding:.4rem .6rem;text-align:center;
  font-family:var(--display);font-weight:700;font-size:.86rem;line-height:1.25;
  color:var(--ink);
}
.kachel__sub{
  padding:.55rem .6rem;text-align:center;
  font-size:.78rem;color:var(--ink-2);line-height:1.35;
  border-top:1px solid var(--line-2);
}

@media (max-width:1000px){
  .themen__liste{grid-template-columns:repeat(3,1fr)}
  .kategorien__raster{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:640px){
  .themen__liste{grid-template-columns:repeat(2,1fr);gap:.5rem 1rem}
  .kategorien__raster{grid-template-columns:repeat(2,1fr);gap:.7rem}
  .kachel__titel{font-size:.8rem;padding:.35rem .45rem}
  .kachel__sub{font-size:.74rem}
}

/* ---------------- Rechtliche Hinweise ---------------- */
.rechtliches{
  margin:1.6rem 0 0;padding:1.3rem 1.4rem;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-klein);
  font-size:.82rem;line-height:1.6;color:var(--ink-2);
}
.rechtliches h2{
  font-family:var(--display);font-weight:700;font-size:.8rem;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink);margin:0 0 .7rem;
}
.rechtliches h3{
  font-family:var(--display);font-weight:700;font-size:.86rem;
  color:var(--ink);margin:1.2rem 0 .5rem;
}
.rechtliches p{margin:0 0 .6rem;max-width:100ch}
.rechtliches .stern{color:var(--ink);font-weight:700;margin-right:.15rem}
.rechtliches ol{margin:0;padding-left:1.3rem;max-width:100ch}
.rechtliches ol li{margin-bottom:.35rem}
.rechtliches ol li:last-child{margin-bottom:0}

.hinweis{
  margin:1.4rem 0 0;padding:1rem 1.2rem;border-radius:var(--r-klein);
  background:var(--surface);border:1px solid var(--line);font-size:.85rem;color:var(--ink-2);max-width:74ch;
}
.fuss{background:var(--surface);border-top:1px solid var(--line);padding:1.8rem 0 7rem}
.fuss__inner{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
}
.fuss__links{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;font-size:.88rem}
.fuss__links a,.fuss__links .textlink{color:var(--ink-2);text-decoration:none;font-weight:500}
.fuss__links a:hover,.fuss__links .textlink:hover{color:var(--blau);text-decoration:underline}
.fuss__links .textlink{font-size:.88rem;text-decoration:none;text-underline-offset:3px}
.fuss .wortmarke{font-size:1.05rem}
.fuss__recht{
  margin-top:1.4rem;padding-top:1.1rem;border-top:1px solid var(--line-2);
  text-align:center;font-size:.78rem;color:var(--ink-2);line-height:1.55;
}
.fuss__recht p{margin:0 auto;max-width:86ch}
.fuss__recht p + p{margin-top:.35rem}
@media (max-width:640px){
  .fuss__inner{flex-direction:column-reverse;align-items:flex-start;gap:1rem}
}

/* ---------------- Umbrüche ---------------- */
@media (max-width:900px){
  .details__inner{grid-template-columns:1fr;gap:1.2rem}
}
@media (max-width:1080px){
  .karte{
    grid-template-columns:150px 1fr 144px;
    grid-template-areas:
      "bild info note"
      "bild abschluss note"
      "mehr mehr mehr";
    align-items:start;
  }
  .note{align-self:center}
  .abschluss{text-align:left}
  .aktion{justify-content:flex-start}
}
@media (max-width:760px){
  /* ohne Weichzeichner laeuft die Hoehenanimation der Kopfzeile spuerbar ruhiger */
  .kopf{backdrop-filter:none;background:var(--paper)}
  .karte{
    grid-template-columns:1fr 120px;
    grid-template-areas:
      "bild note"
      "info info"
      "abschluss abschluss"
      "mehr mehr";
    padding:1.1rem;column-gap:.8rem;row-gap:.85rem;
  }
  /* Beide Kacheln teilen sich eine Rasterzeile und sind dadurch gleich hoch */
  .bild{width:100%;max-width:132px;aspect-ratio:1;justify-self:center;align-self:start}
  /* Titel steht mobil ueber die volle Breite – kein Reservat noetig */
  .info h3{font-size:1.18rem;padding-right:0}
  .fazit{max-width:none}
  .note{gap:.35rem}
  .note__kopf{padding:.45rem .4rem .5rem}
  .note__wert{font-size:1.85rem;margin:.06rem 0 .26rem}
  .note__wert--text{
  font-size:1.05rem;line-height:1.22;letter-spacing:-.01em;
  margin:.2rem 0 .34rem;
}
.note .urteil{font-size:.6rem;padding:.1rem .45rem}
  .kundenwertung{padding:.38rem .3rem .42rem}
  .sterne{font-size:.78rem}
  .siegel{top:12px;left:-10px;font-size:.84rem;padding:.42rem 1.5rem .42rem .85rem}
  .rang{left:-10px;top:12px;min-width:27px;height:21px;font-size:.84rem}
  .karte--gold .rang,.karte--blau .rang{top:3rem}
  .siegel::after{width:10px;height:9px}
  .karte--gold,.karte--blau,.karte--hellblau{padding-top:3.1rem}

  .abschluss{text-align:left;gap:.5rem}
  .aktion{justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}

/* ==================================================================
   Ergaenzungen des Systems (Bilder aus der Amazon-API, Startseite,
   Blog, Kontaktformular, Suchvorschlaege)
================================================================== */
.bild img{width:100%;height:100%;object-fit:contain;padding:.6rem;background:#fff}
.bild a{display:block;width:100%;height:100%}
.bild__leer{display:block;width:100%;height:100%;background:linear-gradient(180deg,#fff,#E8EAEE)}
.exit__geraet img{width:100%;height:auto;border-radius:var(--r-klein);background:#fff}
.banner__bild img{width:100%;height:100%;object-fit:contain;background:#fff}
.detail__bild img{width:100%;height:100%;object-fit:contain;background:#fff}
.angebot__einschaetzung .ist-teuer{color:var(--rot)}

/* Suche */
.such-form{position:relative}
.such-form--gross{margin-top:1.2rem;max-width:520px}
.such-vorschlag{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:40;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--schatten-hoch);overflow:hidden;
}
.such-vorschlag a{display:block;padding:.6rem .85rem;text-decoration:none;font-size:.94rem;border-bottom:1px solid var(--line-2)}
.such-vorschlag a:last-child{border-bottom:0}
.such-vorschlag a:hover{background:var(--blau-2)}

/* Startseite: Angebote */
.deals{margin:1.4rem 0}
.deals h2{font-family:var(--display);font-size:1.25rem;margin:0 0 .9rem}
.deals__raster{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.deal{
  display:flex;gap:.7rem;align-items:center;text-decoration:none;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);padding:.7rem;box-shadow:var(--schatten);
}
.deal:hover{box-shadow:var(--schatten-hoch)}
.deal__bild{width:72px;height:72px;flex:none;display:grid;place-items:center;background:#fff;border-radius:var(--r-klein);overflow:hidden}
.deal__bild img{width:100%;height:100%;object-fit:contain}
.deal__text{display:grid;gap:.15rem;min-width:0}
.deal__marke{font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2)}
.deal__titel{font-size:.9rem;font-weight:600;line-height:1.25}
.deal__preis{display:flex;align-items:center;gap:.4rem;font-size:.95rem}

/* Blog */
.blogliste{margin:1.6rem 0}
.blogliste h2{font-family:var(--display);font-size:1.25rem;margin:0 0 .9rem}
.blogliste__raster{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.blogkarte{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1rem;box-shadow:var(--schatten)}
.blogkarte h3{font-family:var(--display);font-size:1.02rem;margin:.2rem 0 .4rem;line-height:1.3}
.blogkarte h3 a{text-decoration:none}
.blogkarte h3 a:hover{text-decoration:underline}
.blogkarte p{margin:0 0 .5rem;font-size:.9rem;color:var(--ink-2)}
.blogkarte__bild{display:block;margin:-1rem -1rem .8rem;overflow:hidden;border-radius:var(--r) var(--r) 0 0}
.blogkarte__bild img{width:100%;height:150px;object-fit:cover}
.blogkarte__datum{font-size:.78rem;color:var(--ink-2)}
.blaettern{display:flex;gap:.4rem;margin-top:1rem}
.blaettern a{
  display:grid;place-items:center;min-width:34px;height:34px;border:1px solid var(--line);
  border-radius:var(--r-klein);background:var(--surface);text-decoration:none;font-size:.9rem;
}
.blaettern a.ist-aktiv{background:var(--cta);color:#fff;border-color:var(--cta)}

/* Textseiten und Artikel */
.textseite{max-width:74ch}
.textseite h2{font-family:var(--display);font-size:1.3rem;margin:1.6rem 0 .6rem}
.textseite h3{font-family:var(--display);font-size:1.08rem;margin:1.2rem 0 .5rem}
.textseite p,.textseite li{font-size:1rem;line-height:1.65;color:var(--ink)}
.textseite ul,.textseite ol{padding-left:1.2rem}

/* Kontaktformular */
.kontaktbox{
  margin:1.8rem 0;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:1.3rem;box-shadow:var(--schatten);
}
.kontaktbox h2{font-family:var(--display);font-size:1.2rem;margin:0 0 .3rem}
.kontaktbox__lead{margin:0 0 1rem;color:var(--ink-2);font-size:.94rem}
.kontaktform{display:grid;gap:.75rem;max-width:640px}
.kontaktform label{display:grid;gap:.25rem;font-size:.85rem;font-weight:600;color:var(--ink-2)}
.kontaktform input,.kontaktform textarea{
  font:inherit;padding:.6rem .7rem;border:1px solid var(--line);border-radius:var(--r-klein);
  background:var(--paper);color:var(--ink);font-weight:400;
}
.kontaktform__reihe{display:grid;gap:.75rem;grid-template-columns:1fr 1fr}
.kontaktform .cta{justify-self:start;padding:.7rem 1.4rem}
.kontaktform .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (max-width:640px){.kontaktform__reihe{grid-template-columns:1fr}}

/* Meldungen */
.meldung{padding:.85rem 1rem;border-radius:var(--r);font-size:.95rem;margin:1rem 0}
.meldung--ok{background:#E7F5EE;border:1px solid #BFE3D0;color:var(--gruen)}
.meldung--fehler{background:#FDECEA;border:1px solid #F5C6C2;color:var(--rot)}

/* Nur für Screenreader */
.nur-lesehilfe{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;
}

/* Seitenweise Blättern (Laravel-Pagination) */
.blaettern nav{display:flex;gap:.4rem;align-items:center}
.blaettern svg{width:16px;height:16px}
.blaettern a,.blaettern span{
  display:grid;place-items:center;min-width:34px;height:34px;padding:0 .4rem;
  border:1px solid var(--line);border-radius:var(--r-klein);background:var(--surface);
  text-decoration:none;font-size:.9rem;
}
.blaettern [aria-current="page"] span{background:var(--cta);color:#fff;border-color:var(--cta)}

/* ==========================================================================
   Startseite
   ========================================================================== */

.start-hero{
  position:relative;
  padding:3.5rem 0 3rem;
  background:
    radial-gradient(1200px 420px at 12% -10%, rgba(30,69,212,.10), transparent 60%),
    radial-gradient(900px 380px at 90% 0%, rgba(46,147,217,.12), transparent 60%),
    var(--paper);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.start-hero__inner{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:3rem;
  align-items:center;
}
.start-hero h1{
  font-family:Archivo,Inter,sans-serif;
  font-size:clamp(2rem,4vw,3.1rem);
  line-height:1.08;
  letter-spacing:-.02em;
  margin:.6rem 0 .9rem;
}
.start-hero h1 em{font-style:normal;color:var(--blau)}
.start-hero__lead{
  font-size:1.08rem;
  color:var(--ink-soft,#4A5058);
  max-width:52ch;
  margin-bottom:1.6rem;
}
.start-hero__auszeichnung{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.35rem .8rem;border-radius:999px;
  background:rgba(30,69,212,.08);color:var(--blau);
  font-size:.82rem;font-weight:700;letter-spacing:.02em;
}
.start-hero__auszeichnung::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--gruen,#12734C);
  box-shadow:0 0 0 3px rgba(18,115,76,.18);
}

/* Große Suche */
.gross-suche{position:relative;max-width:34rem}
.gross-suche form{
  display:flex;align-items:center;gap:.5rem;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:calc(var(--r) + 4px);
  padding:.45rem .45rem .45rem 1.1rem;
  box-shadow:0 10px 30px rgba(20,23,27,.08);
}
.gross-suche input{
  flex:1;border:0;outline:0;background:transparent;
  font-size:1.02rem;padding:.7rem 0;color:var(--ink);
}
.gross-suche button{
  display:inline-flex;align-items:center;gap:.45rem;
  background:var(--cta);color:#fff;border:0;cursor:pointer;
  padding:.75rem 1.2rem;border-radius:var(--r);
  font-weight:700;font-size:.95rem;
}
.gross-suche button:hover{filter:brightness(1.12)}
.gross-suche svg{width:18px;height:18px}
.suche-vorschlaege{
  display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.9rem;
  font-size:.86rem;color:var(--ink-soft,#4A5058);
}
.suche-vorschlaege a{
  padding:.3rem .7rem;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);
  text-decoration:none;color:inherit;
}
.suche-vorschlaege a:hover{border-color:var(--blau);color:var(--blau)}

/* Kennzahlen-Karte rechts */
.hero-karte{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:calc(var(--r) + 6px);
  padding:1.4rem;
  box-shadow:0 18px 45px rgba(20,23,27,.10);
}
.hero-karte__kopf{
  display:flex;align-items:center;justify-content:space-between;
  padding-bottom:.9rem;margin-bottom:.9rem;border-bottom:1px solid var(--line);
}
.hero-karte__titel{font-weight:800;font-size:.95rem}
.hero-karte__stand{font-size:.78rem;color:var(--ink-soft,#6B7280)}
.hero-zahlen{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;text-align:center}
.hero-zahlen b{display:block;font-family:Archivo,sans-serif;font-size:1.5rem;color:var(--blau)}
.hero-zahlen span{font-size:.75rem;color:var(--ink-soft,#6B7280);line-height:1.3;display:block}
.hero-karte__liste{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:.55rem}
.hero-karte__liste li{display:flex;gap:.55rem;align-items:flex-start;font-size:.9rem}
.hero-karte__liste .haken{
  flex:0 0 18px;height:18px;border-radius:50%;
  background:rgba(18,115,76,.12);color:var(--gruen,#12734C);
  display:grid;place-items:center;font-size:.7rem;font-weight:800;margin-top:.1rem;
}

/* Vertrauensleiste */
.vertrauen{
  border-bottom:1px solid var(--line);
  background:var(--surface);
}
.vertrauen__inner{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;
  padding:1.3rem 0;
}
.vertrauen__punkt{display:flex;gap:.7rem;align-items:flex-start}
.vertrauen__punkt svg{width:22px;height:22px;color:var(--blau);flex:0 0 22px;margin-top:.15rem}
.vertrauen__punkt b{display:block;font-size:.92rem;margin-bottom:.15rem}
.vertrauen__punkt span{font-size:.82rem;color:var(--ink-soft,#6B7280);line-height:1.4}

/* Abschnittsköpfe */
.abschnitt{padding:3rem 0}
.abschnitt--hell{background:var(--surface);border-block:1px solid var(--line)}
.abschnitt__kopf{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap;
}
.abschnitt__kopf h2{
  font-family:Archivo,sans-serif;font-size:clamp(1.35rem,2.2vw,1.85rem);
  letter-spacing:-.01em;margin:0;
}
.abschnitt__kopf p{margin:.4rem 0 0;color:var(--ink-soft,#6B7280);font-size:.95rem}
.abschnitt__mehr{
  font-size:.9rem;font-weight:700;color:var(--blau);text-decoration:none;
  display:inline-flex;align-items:center;gap:.3rem;white-space:nowrap;
}
.abschnitt__mehr:hover{text-decoration:underline}

/* Vergleichskacheln mit Produktvorschau */
.vergleiche{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:1.1rem}
.vergleich-karte{
  display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);
  border-radius:calc(var(--r) + 4px);overflow:hidden;
  text-decoration:none;color:inherit;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.vergleich-karte:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 34px rgba(20,23,27,.10);
  border-color:#D6DAE0;
}
.vergleich-karte__bilder{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;
  padding:1rem;background:#FAFBFC;border-bottom:1px solid var(--line);
}
.vergleich-karte__bilder span{
  aspect-ratio:1;display:grid;place-items:center;
  background:#fff;border-radius:var(--r-klein,6px);overflow:hidden;
}
.vergleich-karte__bilder img{max-width:88%;max-height:88%;object-fit:contain}
.vergleich-karte__text{padding:1rem 1.1rem 1.15rem;flex:1;display:flex;flex-direction:column}
.vergleich-karte__eyebrow{
  font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--blau);margin-bottom:.35rem;
}
.vergleich-karte h3{font-size:1.02rem;line-height:1.3;margin:0 0 .5rem}
.vergleich-karte__meta{
  margin-top:auto;display:flex;align-items:center;gap:.7rem;
  font-size:.82rem;color:var(--ink-soft,#6B7280);
}
.vergleich-karte__note{
  display:inline-flex;align-items:center;gap:.3rem;
  background:rgba(18,115,76,.10);color:var(--gruen,#12734C);
  padding:.2rem .5rem;border-radius:999px;font-weight:800;
}

/* So vergleichen wir */
.schritte{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;counter-reset:schritt}
.schritt{position:relative;padding-top:2.6rem}
.schritt::before{
  counter-increment:schritt;content:counter(schritt);
  position:absolute;top:0;left:0;
  width:2rem;height:2rem;border-radius:50%;
  background:var(--blau);color:#fff;
  display:grid;place-items:center;
  font-family:Archivo,sans-serif;font-weight:800;font-size:.95rem;
}
.schritt h3{font-size:1rem;margin:0 0 .4rem}
.schritt p{margin:0;font-size:.9rem;color:var(--ink-soft,#4A5058);line-height:1.55}

/* Häufige Fragen */
.faq{display:grid;gap:.7rem;max-width:52rem}
.faq details{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;
}
.faq summary{
  cursor:pointer;list-style:none;padding:1rem 1.2rem;
  font-weight:700;font-size:.98rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.3rem;color:var(--blau);line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{margin:0;padding:0 1.2rem 1.15rem;font-size:.93rem;color:var(--ink-soft,#4A5058);line-height:1.6}

/* Angebotsraster etwas frischer */
.deals__raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1rem}

@media (max-width:960px){
  .start-hero__inner{grid-template-columns:1fr;gap:2rem}
  .vertrauen__inner{grid-template-columns:repeat(2,1fr);gap:1.1rem}
  .schritte{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .start-hero{padding:2.4rem 0 2rem}
  .vertrauen__inner{grid-template-columns:1fr}
  .schritte{grid-template-columns:1fr}
  .hero-zahlen{grid-template-columns:repeat(3,1fr)}
  .gross-suche button span{display:none}
}

/* Preis ohne Reduktion: neutral statt Signalfarbe */
.aktion__preis{
  font-family:var(--display,Archivo),sans-serif;
  font-weight:700;font-size:1.15rem;letter-spacing:-.02em;color:var(--ink);
}

/* ==========================================================================
   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}

.produktinfo{
  display:grid;grid-template-columns:170px 1fr;gap:1.4rem;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:1.2rem 1.3rem;margin-bottom:1rem;
}
.produktinfo__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;align-self:start;
}
.produktinfo__bild img{width:100%;height:100%;object-fit:contain}

.produktinfo__rang{
  display:inline-block;margin-bottom:.4rem;
  background:var(--paper-2,#E9EBEF);border-radius:4px;
  padding:.1rem .45rem;font-weight:700;font-size:.78rem;
}
.produktinfo__marke{
  margin:0;font-size:.76rem;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-2,#5A6069);
}
.produktinfo h3{
  font-family:var(--display,Archivo),sans-serif;font-weight:700;
  font-size:1.08rem;line-height:1.3;margin:.2rem 0 .6rem;
}
.produktinfo__text{margin:0 0 1rem;font-size:.92rem;line-height:1.6;color:var(--ink-2,#4A5058)}

.produktinfo 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.1rem 0 .55rem;
}
.produktinfo h4:first-of-type{margin-top:0}

.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}

.produktinfo__fuss{
  margin-top:1rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  padding-top:.9rem;border-top:1px solid var(--line-2,#EDEFF2);
}
.produktinfo__preis{font-family:var(--display,Archivo),sans-serif;font-weight:700;font-size:1.15rem}
.produktinfo__fuss .cta{margin:0;padding:.55rem 1.1rem;display:inline-block}

/* Ratgebertext unter der Liste */
.ratgeber{
  margin:2.4rem 0 0;padding:1.5rem 1.6rem;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
}
.ratgeber 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 1rem;
}
.ratgeber h3{
  font-family:var(--display,Archivo),sans-serif;font-weight:700;
  font-size:1rem;margin:1.3rem 0 .4rem;
}
.ratgeber h3:first-of-type{margin-top:0}
.ratgeber p{margin:0 0 .8rem;font-size:.93rem;line-height:1.65;color:var(--ink-2,#4A5058)}
.ratgeber ul{margin:0 0 .8rem;padding-left:1.2rem;font-size:.93rem;line-height:1.6;color:var(--ink-2,#4A5058)}
.ratgeber li{margin-bottom:.3rem}

@media (max-width:760px){
  .produktinfo{grid-template-columns:1fr}
  .produktinfo__bild{max-width:200px}
}

/* ==========================================================================
   Korrekturen an der Produktkarte
   ========================================================================== */

/* Beschreibung auf zwei Zeilen begrenzen.
   Bei drei Zeilen wächst die Karte und zieht den Notenblock in die Länge –
   das Siegel wirkt dann verzerrt. */
.fazit{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
  margin:.15rem 0 .5rem;font-size:.92rem;line-height:1.45;color:var(--ink-2,#5A6069);
}

/* Platz 2: Preissieger */
.karte--blau{border-color:var(--blau)}
.karte--blau{padding-top:3.1rem}

/* Rabattkasten wie in der Vorlage */
.aktion__text{
  display:inline-block;
  background:var(--rot);color:#fff;border-radius:var(--r-klein,6px);
  padding:.45rem .7rem;font-size:.82rem;font-weight:700;line-height:1.35;
  text-align:center;
}
.aktion__uvp{
  display:block;margin-top:.3rem;
  color:var(--ink-2,#5A6069);text-decoration:line-through;font-size:.86rem;
}
.aktion{flex-direction:column;align-items:flex-end;gap:.15rem}

/* ==========================================================================
   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)}

@media (max-width:1000px){
  .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" "angebot";padding:1.1rem}
  .detail__medien{max-width:220px}
  .wertung{flex-direction:column;align-items:flex-start;gap:.15rem}
  .wertung .trenner{display:none}
}

/* ==========================================================================
   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.
   ========================================================================== */

@media (max-width:760px){
  .info h3{
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;
    font-size:1.02rem;line-height:1.3;padding-right:0;
  }
  .fazit{
    -webkit-line-clamp:2;
    font-size:.88rem;line-height:1.4;
  }
  .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;
  }
}

/* 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. */
@media (max-width:760px){
  .note__kopf{height:auto;min-height:96px}
  .kundenwertung{height:auto;min-height:66px}
}

/* 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}


/* ==========================================================================
   Ueberschrift der Vergleichsseiten
   --------------------------------------------------------------------------
   Auf dem Desktop rund ein Fuenftel kleiner. Bei langen Keywords lief die
   Zeile sonst ueber drei Zeilen und drueckte die erste Produktkarte unter die
   Falzkante – dorthin, wo sie niemand mehr sieht.

   Auf schmalen Fenstern bleibt es wie bisher: Dort war die Groesse nie das
   Problem, und kleiner wuerde die Ueberschrift ihre Aufgabe verlieren.
   ========================================================================== */
@media (min-width:761px){
  /* Ausgangswert war clamp(2.2rem, 5.6vw, 3.7rem) – alle drei Werte mal 0,8 */
  .hero h1{font-size:clamp(1.76rem,4.48vw,2.96rem)}
}

/* Feste Kopfzeile – ueber den Schalter „kopf_fest" im Layout steuerbar */
.kopf--fest{position:sticky;top:0;z-index:60}

/* Auf schmalen Fenstern ausgeblendet – Schalter „fazit_mobil" */
@media (max-width:760px){ .nur-breit{display:none} }

/* --- 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}