/* ============================================================
   Design der ganzen Webseite. Der Markenname steht nicht hier,
   sondern nur in daten/seite.json.
   Wird von jeder Seite geladen. Farben und Masse stehen hier
   oben und gelten überall.
   ============================================================ */

/* Farben mit warmem Unterton statt reinem Weiss und Schwarz.
   Reines #ffffff auf #000000 wirkt klinisch und kalt. Ein Hauch
   Wärme darin macht denselben Aufbau einladend, ohne dass es
   nach Beauty-Kitsch aussieht. */
:root {
  --bg: #fbfaf8;
  --surface: #ffffff;
  --surface-2: #f4f2ee;
  --surface-3: #ece9e3;
  --line: #e6e2db;
  --line-strong: #d2ccc2;
  --text: #1a1815;
  --text-2: #55504a;
  --muted: #8b857c;
  --accent: #1a1815;
  --accent-text: #fbfaf8;
  --highlight: #2f6b4f;        /* für kleine Akzente, ruhiges Grün */
  --radius: 14px;
  --radius-lg: 20px;
  --shadow: 0 1px 2px rgba(26,24,21,.04), 0 10px 30px rgba(26,24,21,.07);
  --topbar-bg: rgba(255,255,255,.86);

  /* Zwei Schriften statt einer. Die Überschriften bekommen eine
     Serife, weil das eine Seite sofort nach Redaktion aussehen lässt
     statt nach Shop, und genau das ist die Positionierung. Beide
     Schriften sind auf jedem Gerät vorhanden: keine externe Datei,
     keine Ladezeit, kein Datenschutzproblem durch fremde Server.
     Ein Wechsel zurück auf eine einzige Schrift ist eine Zeile. */
  --font-display: ui-serif, Georgia, "Times New Roman", Times, serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

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

/* ---------- Bedienbarkeit ----------
   Sichtbarer Fokus für alle, die mit der Tastatur navigieren.
   Ohne das ist die Seite mit Tab praktisch unbenutzbar. */
:focus-visible {
  outline: 3px solid var(--highlight);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Sprunglink: für Tastatur und Screenreader sichtbar,
   sonst ausserhalb des Bildes */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--accent);
  color: var(--accent-text);
  padding: 12px 18px;
  border-radius: 0 0 var(--radius) 0;
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus { left: 0; }

[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 22px; }

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

/* Überschriften in der Serife, Produktnamen bewusst nicht:
   die sollen sachlich bleiben und wie ein Etikett lesbar sein. */
h1, h2 {
  font-family: var(--font-display);
  letter-spacing: -0.012em;
  font-weight: 600;
}

h3 { letter-spacing: -0.022em; }

/* ---------- Kopfleiste ---------- */

.topbar {
  border-bottom: 1px solid var(--line);
  background: var(--topbar-bg);
  backdrop-filter: saturate(180%) blur(12px);
  position: sticky;
  top: 0;
  z-index: 20;
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 22px;
  max-width: 1080px;
  margin: 0 auto;
}

.logo { display: flex; align-items: center; text-decoration: none; color: var(--text); }
.logo-svg { display: block; width: auto; }

.nav { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }

.nav a {
  padding: 7px 14px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  transition: background .15s, color .15s;
}

.nav a:hover { background: var(--surface-2); color: var(--text); }
.nav a.active { background: var(--accent); color: var(--accent-text); }

/* ---------- Startbereich ---------- */

.hero { padding: 72px 0 20px; max-width: 740px; }

.hero .eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 18px;
}

.hero h1 {
  font-size: clamp(2.1rem, 5.5vw, 3.2rem);
  line-height: 1.06;
  margin: 0 0 18px;
  letter-spacing: -0.035em;
}

.hero .lead { font-size: 1.14rem; color: var(--text-2); margin: 0 0 22px; max-width: 580px; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }

.btn-big { padding: 13px 26px; font-size: 0.95rem; }

/* Der Einstiegsbereich: drei Produkte gleich oben, damit der
   Weg zum eigentlichen Inhalt kurz ist. */
#start-here { margin-bottom: 44px; }

/* Beim Sprung zu einem Anker darf der klebende Kopf den
   Anfang des Ziels nicht verdecken. */
#start-here, #everything, #inhalt { scroll-margin-top: 76px; }
#start-here .section-note { margin-top: 16px; font-size: 0.92rem; }
#start-here .section-note a { color: var(--text-2); }

/* Die drei Versprechen unter der Überschrift.
   Ersetzen die Bewertungssterne, die Shops dort zeigen und die
   wir nicht haben. Sie sagen, wie die Liste zustande kommt. */
.promises {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 26px;
  padding: 30px 0 34px;
  margin-bottom: 8px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.promise h3 {
  margin: 0 0 5px;
  font-size: 0.94rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.promise h3 span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--highlight);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  flex: none;
}

.promise p { margin: 0; color: var(--text-2); font-size: 0.88rem; }

/* Zwischenüberschrift über der Produktliste */
/* Ueberschrift und Zusatzzeile stehen untereinander. Vorher wurden sie
   auseinandergeschoben, wodurch der Zusatz auf breiten Bildschirmen
   weit rechts neben leerer Flaeche stand. */
.section-title {
  margin: 34px 0 4px;
}

.section-title h2 { margin: 0; font-size: 1.35rem; }
.section-title .count {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.86rem;
}

.page-head { padding: 44px 0 22px; max-width: 700px; }
.page-head h1 { font-size: clamp(1.7rem, 4vw, 2.3rem); margin: 0 0 8px; line-height: 1.15; }
.page-head .lead { color: var(--text-2); font-size: 1.05rem; margin: 0; }

.product-brand, .card-brand {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 5px;
}

/* ---------- Werbekennzeichnung, Pflicht ---------- */

.disclosure {
  background: var(--surface-2);
  border-radius: var(--radius);
  padding: 14px 17px;
  font-size: 0.83rem;
  color: var(--text-2);
  margin-bottom: 28px;
  max-width: 720px;
}

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

/* ---------- Entwurfshinweis ---------- */

/* Der Entwurfshinweis. Bewusst zurückhaltend: Er ist eine Notiz
   an uns, kein Teil der Seite, und darf den Einstieg nicht
   dominieren. Fliegt raus, sobald die Seite online geht. */
.todo {
  background: transparent;
  border: 1px dashed var(--line-strong);
  color: var(--muted);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 0.78rem;
  margin-bottom: 20px;
  max-width: 720px;
}

/* ---------- Filter ---------- */

.filters {
  padding: 20px 0 4px;
  border-top: 1px solid var(--line);
  margin-bottom: 18px;
}

.filter-row { margin-bottom: 13px; }
.filter-row:last-child { margin-bottom: 0; }

.filter-label {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 8px;
}

.chips { display: flex; flex-wrap: wrap; gap: 7px; }

.chip {
  padding: 7px 15px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, border-color .15s, color .15s;
}

.chip:hover { border-color: var(--text); }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }

.result-count { color: var(--muted); font-size: 0.85rem; margin: 0 0 20px; }

/* ---------- Produktraster ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 20px;
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color .16s, box-shadow .16s, transform .16s;
}

.card:hover { border-color: var(--line-strong); box-shadow: var(--shadow); transform: translateY(-2px); }

.card-media {
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--surface-2);
  position: relative;
  overflow: hidden;
}

.card-media img { width: 100%; height: 100%; object-fit: contain; padding: 16px; }

.media-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--muted);
  text-align: center;
  padding: 14px;
  background:
    repeating-linear-gradient(45deg, transparent, transparent 11px, rgba(0,0,0,.016) 11px, rgba(0,0,0,.016) 22px);
}

.media-placeholder .initials {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--line-strong);
}

.media-placeholder .hint { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.11em; }

.card-body { padding: 16px 17px 17px; display: flex; flex-direction: column; flex: 1; }
.card h3 { font-size: 0.97rem; margin: 0 0 4px; line-height: 1.34; }
.card-link { color: var(--text); text-decoration: none; }
.card-link:hover { text-decoration: underline; }

.role { display: block; font-size: 0.73rem; color: var(--muted); margin-bottom: 10px; }
.card p { margin: 0 0 13px; color: var(--text-2); font-size: 0.87rem; flex: 1; }

/* Die Stichworte, wofür ein Produkt taugt. Nach dem Vorbild
   moderner Shops, die direkt unter dem Namen in drei Wörtern
   sagen, was das Produkt tut. Erfassbar in einer Sekunde. */
.tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 13px; }

.tag {
  font-size: 0.71rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-2);
}

.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.price { font-weight: 700; font-size: 0.93rem; white-space: nowrap; }

.btn {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-text);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.84rem;
  padding: 9px 17px;
  border-radius: 999px;
  transition: opacity .15s;
  white-space: nowrap;
}

.btn:hover { opacity: .82; }
.btn-note { display: block; margin-top: 9px; font-size: 0.73rem; color: var(--muted); }

.empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--muted);
  padding: 52px 20px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
}

/* ---------- Produktseite ---------- */

.crumbs { color: var(--muted); font-size: 0.84rem; margin: 26px 0 6px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--text); }

.product-top { display: grid; grid-template-columns: 1fr; gap: 30px; margin-bottom: 40px; }

.product-media {
  aspect-ratio: 1 / 1;
  background: var(--surface-2);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}

.product-media img { width: 100%; height: 100%; object-fit: contain; padding: 30px; }

.media-caption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  background: rgba(16,16,18,.78);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
}

/* Quellenangabe unter dem Bild. Pflicht bei CC-BY-SA-Bildern. */
.media-source {
  margin: 8px 0 0;
  font-size: 0.72rem;
  color: var(--muted);
}

.media-source a { color: var(--muted); }

/* Kleine Bilder unter dem grossen */
.thumbs { display: flex; gap: 9px; margin-top: 10px; flex-wrap: wrap; }

.thumb {
  width: 64px;
  height: 64px;
  padding: 0;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  cursor: pointer;
  overflow: hidden;
  transition: border-color .15s;
}

.thumb img { width: 100%; height: 100%; object-fit: contain; padding: 6px; display: block; }
.thumb:hover { border-color: var(--line-strong); }
.thumb[aria-pressed="true"] { border-color: var(--accent); border-width: 2px; }

.buybox {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin: 20px 0 0;
  background: var(--surface-2);
}

.buybox-price { font-size: 1.6rem; font-weight: 800; margin-bottom: 2px; letter-spacing: -0.02em; }
.buybox-label { font-size: 0.83rem; color: var(--muted); margin-bottom: 14px; }

/* Anbieterliste. Bewusst ohne Preis je Anbieter,
   Begründung im Kopf von produkte.js. */
.shops { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }

.shop {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 15px;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s;
}

.shop:hover { border-color: var(--text); box-shadow: var(--shadow); }

.shop-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.shop-name { font-weight: 700; font-size: 0.94rem; }
.shop-note { color: var(--muted); font-size: 0.78rem; }

.shop-price {
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
  color: var(--text);
}

/* Anbieter, bei denen kein Preis stehen darf (Amazon) */
.shop-price-none { color: var(--muted); font-weight: 500; font-size: 0.82rem; }

.shop-go {
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 700;
  font-size: 0.79rem;
  padding: 6px 15px;
  border-radius: 999px;
  margin-left: auto;
}

/* ---------- Passt das Produkt zu mir? ----------
   "Best for" und "Skip if" stehen bewusst ganz oben, direkt
   nach dem Kaufblock. Wer auf einer Produktseite landet, will
   diese eine Frage zuerst beantwortet haben. */
.fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  max-width: 700px;
  margin: 0 0 26px;
}

.fit-box {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  background: var(--surface);
}

.fit-box h2 {
  margin: 0 0 6px;
  font-size: 0.82rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}

.fit-box p { margin: 0; color: var(--text-2); font-size: 0.92rem; }

/* Kleines Zeichen vor der Überschrift, damit die beiden Kästen
   auf einen Blick unterscheidbar sind, auch ohne Farbe */
.fit-box h2::before {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 800;
  flex: none;
}

.fit-yes h2::before { content: "✓"; background: var(--highlight); color: #fff; }
.fit-no  h2::before { content: "✕"; background: var(--surface-3); color: var(--text-2); }

.fit-yes { border-color: color-mix(in srgb, var(--highlight) 30%, var(--line)); }

/* Warum das Produkt überhaupt auf der Liste steht */
.why {
  max-width: 700px;
  margin: 0 0 30px;
  padding: 20px 22px;
  background: var(--surface-2);
  border-radius: var(--radius);
}

.why h2 {
  margin: 0 0 7px;
  font-size: 1.02rem;
}

.why p { margin: 0; color: var(--text-2); }

.prose { max-width: 700px; }

.prose h2 {
  font-size: 1.08rem;
  margin: 30px 0 9px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.prose h2:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.prose p { margin: 0; color: var(--text-2); }

#mehr h2, #artikelprodukte h2 { font-size: 1.3rem; margin: 52px 0 18px; }

/* Prüfstand: ob das Produkt selbst benutzt wurde.
   Bewusst sichtbar, nicht versteckt. */
.teststatus {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: 700px;
  margin-top: 30px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  font-size: 0.85rem;
  color: var(--text-2);
}

.teststatus-titel { font-weight: 700; color: var(--text); }
.teststatus-datum { color: var(--muted); font-size: 0.78rem; margin-top: 4px; }

/* ---------- Artikel ---------- */

.guides {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
  margin-bottom: 30px;
}

.guide-card {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  text-decoration: none;
  transition: border-color .16s, box-shadow .16s, transform .16s;
}

.guide-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow); transform: translateY(-2px); }
.guide-card h3 { margin: 6px 0 8px; font-size: 1.12rem; line-height: 1.3; }
.guide-card p { margin: 0; color: var(--text-2); font-size: 0.9rem; }

.guide-meta {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.article { font-size: 1.03rem; }
.article p { margin: 0 0 16px; }
.article h2 { font-size: 1.22rem; margin: 34px 0 12px; }

/* ---------- Fussbereich ---------- */

footer {
  border-top: 1px solid var(--line);
  margin-top: 64px;
  padding: 34px 0 52px;
  color: var(--muted);
  font-size: 0.83rem;
  text-align: center;
}

.foot-logo { display: flex; justify-content: center; color: var(--line-strong); margin-bottom: 10px; }
.foot-claim { color: var(--text-2); margin: 0 0 14px; }
footer a { color: var(--muted); }
footer p { margin: 5px 0; }

/* ---------- Breite Bildschirme ---------- */

@media (min-width: 760px) {
  .product-top { grid-template-columns: 400px 1fr; align-items: start; }
}

/* ---------- Handy ---------- */

@media (max-width: 480px) {
  .shop { flex-wrap: wrap; }
  .shop-price { order: 2; }
  .shop-go { order: 3; }
}

@media (max-width: 540px) {
  .grid { grid-template-columns: repeat(2, 1fr); gap: 13px; }
  .card h3 { font-size: 0.88rem; }
  .card p { display: none; }         /* auf dem Handy zählt das Bild, nicht der Text */
  .card-body { padding: 12px 13px 13px; }
  .card-foot { flex-direction: column; align-items: stretch; gap: 8px; }
  .btn { text-align: center; }
  .hero { padding: 30px 0 22px; }
  .shop { flex-wrap: wrap; }
  .shop-note { flex: 1 1 100%; order: 3; }
  .hero-actions .btn, .hero-actions .btn-secondary { flex: 1 1 100%; text-align: center; }

  /* Kopfzeile auf dem Handy flach halten. Vorher stapelten sich
     Logo und Menü untereinander und der Balken war so hoch,
     dass er beim Scrollen die halbe Sicht nahm. */
  .topbar-inner { padding: 9px 16px; gap: 10px; }
  .logo-svg { height: 18px; }
  .nav a { padding: 6px 11px; font-size: 0.82rem; }
  .wrap { padding: 0 16px; }
  .page-head { padding: 26px 0 16px; }

  /* Touch-Ziele gross genug */
  .chip { padding: 9px 15px; }
  .shop { padding: 15px; }
  .shop-go { padding: 8px 16px; }
}

/* Sehr schmale Geräte, etwa 320 Pixel */
@media (max-width: 359px) {
  .grid { grid-template-columns: 1fr; }
  .wrap { padding: 0 13px; }
}

/* Wer Bewegung reduziert haben will, bekommt keine */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* ============================================================
   Auszeichnung der sechs ausgewählten Produkte
   Bewusst "Our pick" statt "Bestseller": eine Einschätzung,
   keine Verkaufsbehauptung, die wir nicht belegen können.
   ============================================================ */

.pick-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  padding: 5px 11px;
  background: var(--accent);
  color: var(--accent-text);
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Die ausgewählten Karten heben sich zusätzlich ruhig ab */
.card.is-hero { border-color: var(--line-strong); }

.pick-line {
  display: inline-block;
  margin-bottom: 11px;
  padding: 5px 12px;
  background: var(--accent);
  color: var(--accent-text);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ============================================================
   Vergleichstabelle auf den Bereichsseiten
   Wer wählen soll, will die Unterschiede nebeneinander sehen,
   statt vier Karten nacheinander zu lesen.
   ============================================================ */

.table-wrap {
  overflow-x: auto;
  margin: 24px 0 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  -webkit-overflow-scrolling: touch;
}

.compare {
  width: 100%;
  /* Schmaler wird unlesbar. Darunter scrollt die Tabelle
     seitlich in ihrem eigenen Kasten, nicht die ganze Seite. */
  min-width: 640px;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.compare caption {
  text-align: left;
  padding: 16px 18px 4px;
  color: var(--muted);
  font-size: 0.83rem;
  line-height: 1.5;
}

.compare th,
.compare td {
  padding: 13px 18px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

.compare thead th {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.compare tbody tr:last-child td { border-bottom: 0; }
.compare tbody tr:hover { background: var(--surface-2); }

.tbl-name { font-weight: 650; }

.tbl-brand {
  display: block;
  margin-top: 3px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

.tbl-price { white-space: nowrap; font-weight: 650; }

.tbl-pick {
  display: inline-block;
  margin-left: 7px;
  padding: 2px 8px;
  background: var(--accent);
  color: var(--accent-text);
  border-radius: 999px;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ============================================================
   Die Startroutine als ein Paket statt drei Einzelteile
   ============================================================ */

.routine {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 20px 34px;
  margin: 16px 0 20px;
  padding: 22px 24px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.routine-text { flex: 1 1 380px; }

.routine-text h3 {
  margin: 0 0 8px;
  font-size: 1.08rem;
}

.routine-text p {
  margin: 0 0 8px;
  color: var(--text-2);
  font-size: 0.95rem;
}

.routine-note { font-size: 0.87rem !important; color: var(--muted) !important; }

.routine-sum {
  flex: 0 1 200px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.routine-sum-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.routine-sum-price {
  font-family: var(--font-display);
  font-size: 1.7rem;
  line-height: 1.1;
}

.routine-sum-note {
  margin-top: 4px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--muted);
}

/* ============================================================
   Kaufleiste am unteren Rand, nur auf dem Handy
   Die Produktseiten sind lang. Wer unten bei "Alternatives"
   angekommen ist, hat den Kaufblock längst aus dem Bild.
   ============================================================ */

.buybar { display: none; }

@media (max-width: 767px) {
  .buybar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--topbar-bg);
    backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--line);
  }

  .buybar-price { font-weight: 700; }
  .buybar .btn { padding: 10px 18px; }

  /* Platz schaffen, damit die Leiste den Fussbereich nicht verdeckt.
     Nur auf Seiten, die überhaupt eine Kaufleiste haben. */
  body:has(.buybar) footer { padding-bottom: 80px; }
}