:root {
  --bg: #0b0f14;
  --bg-elevated: #121822;
  --card: #161d28;
  --card-hover: #1c2430;
  --border: #232c39;
  --text: #e8edf2;
  --text-muted: #93a2b3;
  --accent: #006994;
  --accent-light: #29a3d6;
  --accent-soft: rgba(0, 105, 148, 0.16);
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}

[data-theme="light"] {
  --bg: #f5f7f9;
  --bg-elevated: #ffffff;
  --card: #ffffff;
  --card-hover: #f0f4f7;
  --border: #e2e8ef;
  --text: #101720;
  --text-muted: #5b6b7a;
  --accent-soft: rgba(0, 105, 148, 0.08);
  --shadow: 0 8px 24px rgba(16, 23, 32, 0.08);
  color-scheme: light;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }
input { font-family: inherit; }

.muted { color: var(--text-muted); }

/* Topbar */
.topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px 28px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  z-index: 50;
}

.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 17px; }

/* ---- Kopfzeile auf schmalen Geräten -----------------------------------

   HIER STAND EINE ZWEITE. Genau die Falle, vor der die Projektregeln
   warnen: „zwei Quellen für dieselbe Sache".

   Weiter unten in dieser Datei gibt es seit Langem eine vollständige
   Telefon-Kopfzeile — ein Raster mit zwei Reihen, `grid-template-areas`,
   Rücksicht auf `safe-area-inset`. Ich habe in 0.18.1 daneben eine zweite
   auf Flexbox gebaut, ohne nachzusehen. Die untere gewinnt, weil sie
   später steht; von der oberen kam nur das an, was die untere nicht
   erwähnt. Ergebnis auf dem Telefon: `\1F464` als Text im Knopf, weil das
   Zeichen doppelt maskiert war und die Regel, die den Text ausblenden
   sollte, gar nicht griff.

   Beide Blöcke sind ersatzlos entfernt. Was fehlte, steht jetzt an der
   einen Stelle weiter unten, in der es hingehört. */
.brand-mark { width: 32px; height: 32px; display: block; flex-shrink: 0; }

/* Logo intro animation — draws clockwise starting bottom-left, once on page load */
.logo-spoke {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: logo-draw 0.35s ease-out forwards;
  animation-delay: var(--d, 0s);
}
.logo-node {
  opacity: 0;
  transform: scale(0);
  transform-box: fill-box;
  transform-origin: center;
  animation: logo-pop 0.3s ease-out forwards;
  animation-delay: calc(var(--d, 0s) + 0.2s);
}
.logo-hub {
  opacity: 0;
  transform: scale(0);
  transform-box: fill-box;
  transform-origin: center;
  animation: logo-pop 0.3s ease-out forwards;
}
@keyframes logo-draw { to { stroke-dashoffset: 0; } }
@keyframes logo-pop { to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .logo-spoke, .logo-node, .logo-hub { animation: none; stroke-dashoffset: 0; opacity: 1; transform: scale(1); }
}

/* Splash screen — big logo + name shown briefly on first load, then fades
   into the real page underneath. Purely a JS-toggled overlay: app.js adds
   .hide after a short delay and removes the element once the fade finishes. */
.splash-screen {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px;
  transition: opacity 0.6s ease;
}
.splash-screen.hide { opacity: 0; pointer-events: none; }
/* Kürzer ausblenden: 0,6 s Überblendung auf einer Seite, die nach 0,27 s
   fertig ist, verlängert nur die gefühlte Wartezeit. */
.splash-screen { transition: opacity 0.28s ease; }
.splash-logo { width: clamp(72px, 22vw, 120px); height: clamp(72px, 22vw, 120px); display: block; }
.splash-name {
  font-size: clamp(20px, 6vw, 32px);
  font-weight: 700; letter-spacing: 0.3px; color: var(--text);
  opacity: 0;
  /* 0,3 s Verzögerung, nicht 0,9.

     Der Wert war auf den alten, 1,5 Sekunden langen Vorspann abgestimmt.
     Seit er kürzer ist, war der Schriftzug schlicht nie zu sehen — er
     wäre erst eingeblendet worden, als der Vorspann längst verschwand.
     Gemeldet als „die Schrift des Logos ist nicht da". */
  animation: splash-name-in 0.4s ease-out 0.3s forwards;
}
@keyframes splash-name-in { to { opacity: 1; transform: translateY(0); } from { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  .splash-screen { transition: opacity 0.2s ease; }
  .splash-name { animation: none; opacity: 1; }
}

.topnav { display: flex; gap: 4px; margin-right: auto; }
.topnav a { padding: 8px 14px; border-radius: var(--radius-sm); font-size: 14px; color: var(--text-muted); transition: all .15s; }
.topnav a:hover, .topnav a.active { color: var(--text); background: var(--card); }

.topbar-actions { display: flex; gap: 8px; align-items: center; }

/* Account menu — logging out is one click from the header. */
.account-menu-wrap { position: relative; }
#auth-btn { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  min-width: 210px; padding: 6px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: 0 18px 40px -14px rgba(0,0,0,.55), var(--shadow);
}
.account-menu-email {
  padding: 8px 10px 10px; font-size: 12px; color: var(--text-muted);
  border-bottom: 1px solid var(--border); margin-bottom: 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.account-menu-item {
  display: block; width: 100%; text-align: left;
  padding: 9px 10px; border-radius: 9px; border: none; background: none;
  color: var(--text); font-size: 13.5px; font-family: inherit; cursor: pointer;
}
.account-menu-item:hover { background: var(--bg-elevated); }
.account-menu-danger { color: #f87171; }

/* Language switcher */
.lang-menu-wrap { position: relative; }
.lang-btn { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  min-width: 210px; padding: 6px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: 0 18px 40px -14px rgba(0,0,0,.55), var(--shadow);
}
.lang-note {
  padding: 8px 10px 10px; font-size: 11px; line-height: 1.5; color: var(--text-muted);
  border-bottom: 1px solid var(--border); margin-bottom: 6px;
}
.lang-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 10px; border-radius: 9px; border: none; background: none;
  color: var(--text); font-size: 13.5px; font-family: inherit; cursor: pointer;
}
.lang-item:hover { background: var(--bg-elevated); }
.lang-item.active { background: var(--accent-soft); color: var(--accent-light); }
.lang-flag { font-size: 16px; line-height: 1; }

/* Right-to-left (Arabic): mirror the layout, not just the text. */
[dir="rtl"] .topnav, [dir="rtl"] .topbar-actions { direction: rtl; }
[dir="rtl"] .account-menu, [dir="rtl"] .lang-menu { right: auto; left: 0; }
[dir="rtl"] .account-menu-item, [dir="rtl"] .lang-item { text-align: right; }
[dir="rtl"] .msg-user { align-self: flex-start; border-radius: 14px 14px 14px 4px; }
[dir="rtl"] .msg-assistant { align-self: flex-end; border-radius: 14px 14px 4px 14px; }
[dir="rtl"] .tile { padding: 20px 20px 20px 44px; }
[dir="rtl"] .tile-arrow { right: auto; left: 18px; transform: translateY(-50%) scaleX(-1); }
[dir="rtl"] .offer-save { margin-left: 0; margin-right: auto; }

/* Catalogue filter */
.catalog-filter { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
/* Kategorie und Marke stehen nebeneinander in EINER Zeile.

   Vorher: 16 Kategorie-Chips in drei Zeilen plus 12 Marken-Chips in zwei
   weiteren. Fünf Zeilen Filter, bevor der erste Artikel kam. */
.catalog-filter, .marken-filter { display: inline-flex; margin-bottom: 10px; margin-right: 8px; }
.marken-filter:empty { display: none; }
.filter-select {
  appearance: none;
  background: var(--card) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238ea3bd' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 12px center;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); font-family: inherit; font-size: 14px;
  padding: 10px 34px 10px 14px;
  /* Auf dem Telefon zoomt Safari das Bild heran, sobald ein Feld unter
     16 px liegt — danach steht die Seite verschoben da. */
  max-width: 100%;
}
.filter-select:focus { outline: none; border-color: var(--accent); }

/* Der Amazon-Weg im Kopf der Typseite: oben rechts, klar abgesetzt vom
   Titel, damit er nicht wie ein Preisknopf für dieses Gerät aussieht. */
/* Der Weg zu einem anderen Händler muss man sehen. Als blasser
   Geisterknopf ging er zwischen Titel und Angeboten unter. */
.typ-amazon {
  align-self: flex-start; margin-top: 10px;
  background: var(--bg-elevated); border: 1px solid var(--accent);
  color: var(--accent-light); font-weight: 600;
}
.typ-amazon:hover { background: var(--accent); color: #fff; }
@media (min-width: 700px) {
  .product-page .product-head { position: relative; }
  .typ-amazon { position: absolute; top: 0; right: 0; margin-top: 0; }
}
@media (max-width: 640px) {
  .filter-select { font-size: 16px; width: 100%; }
  .catalog-filter, .marken-filter { display: flex; width: 48%; margin-right: 4%; }
  .marken-filter { margin-right: 0; }
}
/* Vergleiche bei einem Partner — sichtbar anders als die eigenen.

   Eigene Kacheln führen zu Angeboten mit geprüftem Preis. Diese führen
   nach draußen. Gleiches Aussehen wäre eine stille Falschaussage,
   deshalb: gestrichelter Rahmen, gedämpfte Fläche, Pfeil nach außen. */
.extern-block { margin-top: 34px; }
.extern-note { max-width: 68ch; font-size: 13px; margin: 0 0 14px; }
.tiles-extern { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.tile-extern {
  border-style: dashed; background: transparent;
}
.tile-extern .tile-desc { text-transform: uppercase; letter-spacing: 0.4px; font-size: 11px; }
/* Der Bonushinweis ist eine fremde Angabe — kleiner als der Produktname
   und mit Quelle im Text, damit er nicht wie unsere Zusage aussieht. */
.tile-hinweis { display: block; margin-top: 5px; font-size: 11.5px; color: var(--accent-light); line-height: 1.4; }
.tile-extern:hover { border-style: solid; }

/* Der Weg aus der Beratung in die vollständige Liste. Zurückhaltend: Die
   Treffer darüber sind die Antwort, das hier ist das Angebot
   weiterzugehen. */
.chat-weiter { margin: 10px 0 4px; }

/* Startseite: EINE Zeile statt acht Kacheln.

   Als Raster schoben die acht Ziele das Eingabefeld nach unten — und das
   Eingabefeld ist der Zweck der Startseite. Eine wandernde Zeile zeigt
   dieselben acht auf einem Achtel der Höhe. */
.extern-kompakt { margin-top: 18px; }
.extern-kompakt .abschnitt-titel { margin: 0 0 8px; padding-top: 12px; }
.extern-zeile {
  display: flex; gap: 8px; overflow-x: auto;
  scroll-snap-type: x proximity; padding-bottom: 4px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  /* Weicher Rand rechts: zeigt ohne Pfeil, dass es weitergeht. */
  mask-image: linear-gradient(to right, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, #000 90%, transparent);
}
.extern-zeile::-webkit-scrollbar { display: none; }
.extern-chip {
  flex: 0 0 auto; scroll-snap-align: start;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; min-height: 40px;
  border: 1px dashed var(--border); border-radius: 999px;
  background: transparent; color: var(--text); text-decoration: none;
}
.extern-chip:hover { border-style: solid; border-color: var(--accent); }
.extern-chip .tile-badge { width: 22px; height: 22px; flex: 0 0 22px; }
.extern-chip .tile-body { display: flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.extern-chip .tile-title { font-size: 13px; font-weight: 600; }
/* „Anzeige" bleibt an jedem Element — Pflicht am Link selbst, nicht nur
   im Fußbereich. Nur kleiner und leiser gesetzt. */
.extern-chip .tile-desc { font-size: 10.5px; color: var(--text-muted); text-transform: none; letter-spacing: 0; }
.extern-chip .tile-arrow { font-size: 12px; color: var(--text-muted); }
.extern-chip .tile-hinweis { display: none; }

/* Aktive Bedingungen über den Ergebnissen. Je eine zum Wegklicken. */
.aktive-filter { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 10px; }
.aktive-filter[hidden] { display: none; }
.aktiver-filter {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 10px; min-height: 32px;
  border: 1px solid var(--accent); border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-light);
  font: inherit; font-size: 12.5px; cursor: pointer;
}
.aktiver-filter i { font-style: normal; font-size: 14px; opacity: 0.75; }
.aktiver-filter:hover { background: var(--accent); color: #fff; }
.aktiver-filter:hover i { opacity: 1; }

.catalog-chip {
  border: 1px solid var(--border); background: var(--card); color: var(--text-muted);
  padding: 7px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 500;
  transition: all .15s ease;
}
.catalog-chip:hover { border-color: var(--accent); color: var(--text); }
.catalog-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
/* A quiet marker on the categories that usually pay best. */
.catalog-chip.tier-high:not(.active)::after {
  content: "★"; margin-left: 5px; font-size: 10px; color: var(--accent-light);
}
.catalog-meta { font-size: 12.5px; color: var(--text-muted); margin-bottom: 14px; }
.catalog-more { grid-column: 1/-1; text-align: center; font-size: 13px; padding: 18px 0 0; }

/* Buttons */
.btn {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  transition: all .15s;
}
.btn:hover { background: var(--card-hover); }
.btn-ghost { background: transparent; }
.btn-accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-light); border-color: var(--accent-light); }
.btn-small { padding: 6px 12px; font-size: 13px; }

/* Main layout */
#app { flex: 1; max-width: 1120px; width: 100%; margin: 0 auto; padding: 32px 24px 64px; }

/* Hero — centered, Apple-style: generous whitespace, tight hierarchy */
.hero { padding: 40px 0 32px; max-width: 640px; }
.hero h1 { font-size: 34px; line-height: 1.25; margin: 0 0 12px; letter-spacing: -0.5px; }
.hero-sub { font-size: 16px; color: var(--text-muted); margin: 0; }

.hero-center {
  max-width: 640px;
  margin: 0 auto;
  padding: 64px 0 32px;
  text-align: center;
}
.hero-center h1 { font-size: 44px; letter-spacing: -1px; }
.hero-center .hero-sub { max-width: 480px; margin: 0 auto; font-size: 17px; }

.eyebrow-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-light);
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.2px;
  margin-bottom: 18px;
}

/* Home chat — the main event on the landing page. The card holds both entry
   points: the conversation on top, the category tiles right below it, so
   there's a single surface instead of two competing blocks. */
.home-chat-hero { max-width: 880px; margin: 0 auto 40px; }
.home-chat-hero .chat-shell {
  /* Anders als die Chatseite hat diese Karte einen bekannten Inhalt: Begrüßung
     plus Kacheln. Eine feste Höhe würde die letzte Kachelreihe abschneiden und
     zwingt zum Scrollen, bevor überhaupt etwas passiert ist. Deshalb wächst sie
     mit dem Inhalt — min-height hält sie auf derselben Größe wie die Chatseite,
     damit beim Wechsel nichts springt, max-height fängt lange Gespräche ab. */
  height: auto;
  min-height: clamp(440px, 62vh, 580px);
  max-height: min(84vh, 860px);
  border-radius: 24px;
  border-color: var(--accent);
  background: linear-gradient(180deg, var(--card), var(--bg-elevated));
  box-shadow: 0 24px 60px -20px rgba(0, 105, 148, 0.32), var(--shadow);
}
.home-chat-hero .chat-window { padding: 22px; }
.home-chat-hero .chat-input-row { padding: 16px; }

/* Tiles live inside the conversation, directly under the greeting — they read
   as the assistant offering options, not as a separate panel. */
.chat-tiles-block {
  align-self: flex-start;
  width: 100%;
  animation: tiles-in .35s ease-out both;
}
@keyframes tiles-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.chat-tiles-block.is-collapsed { display: none; }

.tiles-chat { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.tiles-chat .tile {
  padding: 12px 30px 12px 12px; gap: 11px; border-radius: 13px;
  background: var(--bg-elevated);
}
.tiles-chat .tile:hover { background: var(--card-hover); }
.tiles-chat .tile-badge { width: 34px; height: 34px; border-radius: 10px; }
.tiles-chat .tile-icon { width: 18px; height: 18px; }
.tiles-chat .tile-title { font-size: 14px; }
.tiles-chat .tile-desc { font-size: 11.5px; }
.tiles-chat .tile-arrow { right: 12px; font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
  .chat-tiles-block { animation: none; }
}

/* Lead-in above the card: one clear question, then the options. */
.hero-lead { max-width: 720px; margin: 0 auto 26px; text-align: center; }
.hero-headline {
  font-size: clamp(28px, 5.2vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.9px;
  font-weight: 700;
  margin: 0 0 14px;
  /* Long German words must never push the layout sideways. */
  overflow-wrap: anywhere;
  hyphens: auto;
}
/* The accent word carries a highlight that sweeps left to right. It is driven
   by --shine, which app.js updates from the scroll position — so the shimmer
   follows the reader rather than looping on its own. */
.hero-accent {
  background: linear-gradient(
    100deg,
    var(--accent-light) 0%,
    var(--accent-light) calc(var(--shine, 0%) - 18%),
    #d6f2ff calc(var(--shine, 0%) - 4%),
    #ffffff var(--shine, 0%),
    #d6f2ff calc(var(--shine, 0%) + 4%),
    #7cc8e8 calc(var(--shine, 0%) + 18%),
    #7cc8e8 100%
  );
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  will-change: background-position;
}
@media (prefers-reduced-motion: reduce) {
  .hero-accent {
    background: linear-gradient(100deg, var(--accent-light), #7cc8e8);
    -webkit-background-clip: text;
    background-clip: text;
  }
}
.hero-lead-sub {
  font-size: 15px; line-height: 1.6; color: var(--text-muted);
  margin: 0 auto; max-width: 520px;
}

/* Category tiles */
.tiles-section { max-width: 1000px; margin: 0 auto; }
.tiles-heading {
  font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--text-muted); font-weight: 700; margin: 0 0 16px;
}
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 44px 20px 20px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.tile:hover { background: var(--card-hover); border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); }
.tile-badge {
  width: 46px; height: 46px; border-radius: 13px; flex-shrink: 0;
  background: var(--accent-soft); color: var(--accent-light);
  display: flex; align-items: center; justify-content: center;
}
.tile-icon { width: 24px; height: 24px; display: block; }
.tile-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tile-title { font-size: 16px; font-weight: 600; color: var(--text); }
.tile-desc { font-size: 13px; color: var(--text-muted); line-height: 1.45; }
.tile-arrow {
  position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); font-size: 16px; opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
}
.tile:hover .tile-arrow { opacity: 1; transform: translateY(-50%) translateX(3px); color: var(--accent-light); }
/* The "browse it yourself" tile is an alternative route, not a category —
   give it a quieter, outlined treatment so it reads as a different kind of thing. */
.tile-browse { background: transparent; border-style: dashed; }
.tile-browse:hover { background: var(--card); border-style: solid; }

/* Category landing */
.cat-hero { display: flex; align-items: center; gap: 16px; padding: 8px 0 20px; }
.cat-badge {
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--accent-soft); color: var(--accent-light);
  display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.cat-hero h2 { margin: 0 0 4px; font-size: 22px; }

.mode-switch { display: flex; gap: 8px; margin-bottom: 20px; border-bottom: 1px solid var(--border); padding-bottom: 4px; }
.mode-btn { background: none; border: none; color: var(--text-muted); padding: 10px 4px; margin-right: 16px; font-size: 14px; font-weight: 500; border-bottom: 2px solid transparent; }
.mode-btn.active { color: var(--text); border-bottom-color: var(--accent); }

/* Chat */
/* One height for every chat surface. The home card and a category card have
   to measure the same, otherwise navigating between them makes the card jump
   in size — which is what reads as "ruckeln". */
.chat-shell {
  display: flex; flex-direction: column;
  height: clamp(440px, 62vh, 580px);
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.chat-window { flex: 1; min-height: 0; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.msg { max-width: 78%; padding: 11px 15px; border-radius: 14px; font-size: 14.5px; line-height: 1.5; }
.msg-assistant { align-self: flex-start; background: var(--bg-elevated); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.msg-user { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
/* Der noch nicht getippte Text bleibt im Fluss und belegt seinen Platz —
   nur sichtbar ist er nicht. Dadurch bricht beim Tippen nichts mehr um. */
.tw-pending { visibility: hidden; }

/* Der Cursor sitzt absolut positioniert am Ende der Blase, damit er keine
   Breite im Textfluss beansprucht und am Zeilenende keinen Umbruch auslöst. */
.msg.is-typing { position: relative; }
.msg.is-typing::after {
  content: "";
  position: absolute; right: 10px; bottom: 10px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-light);
  animation: typing-pulse 1.1s ease-in-out infinite;
}
@keyframes typing-pulse {
  0%, 100% { opacity: .25; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .msg.is-typing::after { animation: none; opacity: .5; }
}

.quick-replies { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px 14px; }
.chip { border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text); padding: 7px 13px; border-radius: 999px; font-size: 13px; }
.chip:hover { border-color: var(--accent); color: var(--accent-light); }

/* Das Eingabefeld muss aussehen wie das Eingabefeld.

   Vorher hatte die Antwortblase der KI einen Rahmen und einen abgesetzten
   Hintergrund — also genau die Merkmale, an denen man ein Textfeld erkennt —
   während das echte Eingabefeld unten dieselbe dunkle Fläche trug wie alles
   andere. Ergebnis: man tippt die Blase an und wundert sich.

   Die Blase verliert deshalb den Rahmen, und das Eingabefeld bekommt einen
   deutlich helleren Grund, einen kräftigeren Rahmen und mehr Höhe. */
.msg-assistant { border: none; }
.chat-input-row {
  display: flex; gap: 10px; padding: 14px;
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.chat-input-row input {
  background: var(--card);
  border: 1.5px solid var(--accent);
  padding: 13px 16px;
  font-size: 15px;
}
.chat-input-row input::placeholder { color: var(--text-muted); opacity: .9; }
.chat-input-row input { flex: 1; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 11px 14px; color: var(--text); font-size: 14px; }
.chat-input-row input:focus { outline: none; border-color: var(--accent); }

.result-note { font-size: 13px; color: var(--text-muted); margin: 2px 0 8px; }

/* Browse / filters — gleiche Anmutung wie die Produktseite: Filter als Leiste
   oben, darunter das Raster. Eine Seitenleiste sah wie ein anderes Produkt
   aus und drückte die Angebote auf dem Handy in eine schmale Spalte. */
.browse-shell { display: block; }
.filters-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px 16px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px; margin-bottom: 18px;
}
.filter-group label { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); margin-bottom: 6px; }
.filters-bar .filter-group { min-width: 0; }
.filter-group select, .filter-group input[type="text"], .filter-group input[type="range"] { width: 100%; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; color: var(--text); font-size: 13.5px; }
.filter-group .checkbox-row { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
/* ---- Produkte-Übersicht: Galerie oben, Kategorien links ----------------

   Das Menü stand rechts. Dorthin setzte `results.after(tail)` aber auch den
   Amazon-Kasten, und weil beide Gitterzellen sind, schnitt er eine ganze
   Spalte quer durch die Seite: die Artikelkacheln wurden schmal, rechts
   klaffte ein Block Werbung. Auf dem Bildschirmfoto von 0.18.1 gut zu sehen.

   Jetzt: Kategorien links, Artikel rechts, sonst nichts. Links ist die
   Stelle, an der jeder Shop seine Warengruppen führt — man sucht dort, ohne
   nachzudenken. Und weil die Liste die Kategorieauswahl vollständig
   übernimmt, fällt das erste Auswahlfeld über den Artikeln weg. */
/* `minmax(0, 1fr)` und nicht `1fr` — der Unterschied ist der ganze Fehler.

   `1fr` heißt in einem Raster `minmax(auto, 1fr)`, und dieses `auto` ist die
   MAX-CONTENT-Breite des Inhalts. Die Artikelliste darin ist ein Raster mit
   `repeat(auto-fill, …)`; unter max-content gemessen wird sie beliebig
   breit. Nachgemessen auf der Live-Seite bei 996 px Fenster: die Spalte kam
   auf 3258 px, die Seite auf 3282, die Artikelliste auf 14 Spalten. Man
   konnte die halbe Seite nach rechts schieben, und das Menü stand irgendwo
   in dieser Breite.

   `minmax(0, 1fr)` setzt die Untergrenze auf null und zwingt die Spalte in
   den verfügbaren Platz: 948 px, vier Spalten.

   Die Zweispalter-Regel darunter hatte das immer schon richtig. Deshalb sah
   es in Safari heil aus und in Chrome nicht — nicht der Browser, sondern
   die Fensterbreite: über 1000 px greift die andere Regel. */
/* Auf dem Telefon zuerst die Kategorien, dann die Galerie, dann die Ware.

   Vorher landete man nach Galerie und Markenleiste direkt in den Artikeln,
   und die Kategorien standen dazwischen — zum Filtern musste man erst an
   allem vorbei, was man noch gar nicht einordnen konnte. */
.produkte-layout {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; max-width: 100%;
  grid-template-areas: "menu" "galerie" "inhalt";
}
/* Wird gesucht, kommen die Treffer vor den Leisten. Die Leisten hängen
   nicht am Suchbegriff — oben stünden sie zwischen Frage und Antwort. */
.produkte-layout.suche-aktiv { grid-template-areas: "menu" "inhalt" "galerie"; }
.produkte-layout.suche-aktiv .produkte-galerie {
  border-top: 1px solid var(--border); padding-top: 18px;
}
.produkte-galerie { grid-area: galerie; min-width: 0; }
.produkte-menu { grid-area: menu; }
.produkte-inhalt { grid-area: inhalt; min-width: 0; }
/* Die Schwelle lag bei 1000 px und war damit zu hoch.

   Nachgemessen: ein Chrome-Fenster auf einem 13-Zoll-Rechner ist oft
   950 px breit — knapp darunter. Dort klappte die Spalte in die
   Wisch-Zeile für Telefone um, und auf einem Laptop sieht das aus, als
   wäre das Menü verschwunden. Genau so wurde es auch gemeldet.

   Ab 820 px ist Platz für beides: 200 px Menü lassen über 600 px für die
   Artikel, das sind zwei bis drei Kacheln nebeneinander. */
@media (min-width: 820px) {
  .produkte-layout {
    grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
    grid-template-areas: "galerie galerie" "menu inhalt";
    align-items: start;
  }
  .produkte-layout.suche-aktiv { grid-template-areas: "menu inhalt" "galerie galerie"; }
  /* Unter den Treffern braucht die Galerie einen Abstand nach oben und
     eine Linie — sonst klebt sie an der letzten Kachelreihe. */
  .produkte-layout.suche-aktiv .produkte-galerie {
    border-top: 1px solid var(--border); padding-top: 20px;
  }
  /* Das Menü scrollt mit.

     Es klebte oben fest (`position: sticky`). Das klingt praktisch, hat
     aber zwei Haken: die Liste bekam eine eigene Bildlaufleiste, sobald sie
     länger war als der Bildschirm — also zwei Bildläufe nebeneinander, und
     man scrollt regelmäßig den falschen. Und beim Weiterscrollen stand
     rechts der Bestand still und links nichts, was ihn erklärt.

     Die Trennlinie bleibt, sie hält die Spalte optisch da. */
  .produkte-menu {
    padding-right: 20px; border-right: 1px solid var(--border);
  }
}

/* Unter 820 px gibt es kein Links. Statt die Spalte über die volle Breite
   zu klappen — 16 Kategorien vor dem ersten Produkt, genau der Fehler der
   Chipwand aus 0.9.0 — wird sie zur seitlich wischbaren Zeile. Eine Zeile
   hoch, alle Kategorien erreichbar, das Sortiment bleibt im Bild. */
@media (max-width: 819px) {
  /* Ein eigener Kasten, kein Anhängsel.

     Als nackte Chipreihe zwischen Galerie und Artikeln ging die Auswahl
     unter — sie sah aus wie Beiwerk. Mit Rahmen und Fläche ist sie das
     Erste, was nach der Suchzeile ins Auge fällt, und genau das soll sie
     sein: der Weg, sich das Sortiment kleiner zu machen. */
  .produkte-menu {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 12px 14px;
  }
  .produkte-menu .menu-title { margin-bottom: 10px; }
  .produkte-menu .menu-list {
    flex-direction: row; overflow-x: auto; gap: 7px; margin-bottom: 0;
    padding-bottom: 4px; scrollbar-width: none;
    /* Der Rand zeigt, dass es seitlich weitergeht — ohne Pfeil, der auf
       dem Telefon ohnehin niemand trifft. */
    mask-image: linear-gradient(to right, #000 88%, transparent);
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent);
  }
  .produkte-menu .menu-list::-webkit-scrollbar { display: none; }
  .produkte-menu .menu-list + .menu-title { margin-top: 14px; }
  .produkte-menu .menu-item {
    width: auto; white-space: nowrap; padding: 9px 13px; min-height: 40px;
    border: 1px solid var(--border); background: var(--bg-elevated);
  }
  .produkte-menu .menu-item.is-active { border-color: var(--accent); background: var(--accent-soft); }
}

.gal-block { margin: 6px 0 18px; }
/* Abschnitte statt einer endlosen Liste. Eine Seite, die nur scrollt, gibt
   keinen Anhaltspunkt, wo man ist — drei benannte Blöcke schon. */
.abschnitt-titel {
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-muted); margin: 24px 0 12px;
  padding-top: 18px; border-top: 1px solid var(--border);
}
/* Überschrift innerhalb des Kachelrasters: über die volle Breite, sonst
   nähme sie den Platz einer Kachel ein und die Reihe hätte ein Loch. */
.offer-grid > .abschnitt-im-raster { grid-column: 1 / -1; margin-top: 8px; }
.offer-grid > .abschnitt-im-raster:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.gal-title {
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-muted); margin: 0 0 10px;
  display: flex; align-items: baseline; gap: 12px;
}
/* Der Knopf zum Leeren steht neben der Überschrift und nicht versteckt in
   einer Einstellungsseite: Wer sein Gerät teilt, findet ihn dort, wo die
   Liste steht. */
.gal-clear {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 11.5px; text-transform: none; letter-spacing: 0;
  color: var(--text-muted); text-decoration: underline;
}
.gal-clear:hover { color: var(--text); }
.gal-rail {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity;
  padding-bottom: 8px; -webkit-overflow-scrolling: touch;
}
.gal-card {
  flex: 0 0 150px; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 6px; padding: 10px;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--bg-elevated); text-decoration: none; color: inherit;
}
.gal-card:hover { border-color: var(--accent); }
.gal-card img { width: 100%; height: 96px; object-fit: contain; background: #fff; border-radius: 8px; }
/* Genau so hoch wie ein Foto, damit die Kacheln in einer Reihe nicht
   unterschiedlich hoch werden, je nachdem ob es ein Bild gibt. */
/* Eigene Klasse statt `.offer-illu` mitzubenutzen: die Kachel ist kleiner
   und braucht ein größeres Symbol, und zwei Klassen mit gleicher
   Spezifität hätten sich sonst gegenseitig überschrieben — je nachdem,
   welche zufällig weiter unten steht. */
.gal-card-illu {
  width: 100%; height: 96px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 30% 25%, hsl(var(--illu-hue, 200) 60% 50% / .18), transparent 62%),
    linear-gradient(150deg, var(--bg-elevated), var(--card));
}
.gal-card-illu .product-illu { width: 54px; height: 54px; }
.gal-card-name {
  font-size: 13px; font-weight: 600; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.gal-card-from { font-size: 12px; color: var(--text-muted); margin-top: auto; }
/* Fehlt das Produkt bei unseren Partnern, sagt die Kachel das — und führt
   zu Amazon. Bewusst kein Preis daneben: wir haben keinen geprüften. */
.gal-card-fehlt { font-style: italic; }
.gal-card-amazon {
  font-size: 12px; font-weight: 600; color: var(--accent-light);
  border-top: 1px solid var(--border); padding-top: 6px; margin-top: 2px;
}
.gal-card-extern:hover .gal-card-amazon { text-decoration: underline; }

/* Markenknopf: der Name steht immer da, das Logo legt sich nur darüber,
   wenn es wirklich lädt. Sonst hätte man leere Kästchen für jede Marke,
   deren Domain nicht zu erraten war. */
.gal-brand {
  position: relative; flex: 0 0 auto; min-width: 104px; height: 56px;
  display: flex; align-items: center; justify-content: center; padding: 0 14px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-elevated); color: var(--text); cursor: pointer;
  scroll-snap-align: start;
}
.gal-brand:hover { border-color: var(--accent); }
.gal-brand.is-active { border-color: var(--accent); background: var(--accent-soft); }
.gal-brand-name { font-size: 13px; font-weight: 600; white-space: nowrap; }
.gal-brand-logo { display: none; }
.gal-brand.hat-logo .gal-brand-name { display: none; }
.gal-brand.hat-logo .gal-brand-logo { display: block; max-height: 30px; max-width: 88px; object-fit: contain; }

.menu-title {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-muted); margin: 0 0 8px;
}
.menu-list { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.menu-item {
  display: block; width: 100%; text-align: left;
  font-size: 13.5px; padding: 7px 10px; border-radius: 8px;
  border: 0; background: transparent; color: var(--text-muted);
  cursor: pointer; text-decoration: none;
}
.menu-item:hover { background: var(--bg-elevated); color: var(--text); }
.menu-item.is-active { background: var(--accent-soft); color: var(--accent-light); font-weight: 600; }

/* ---- Angebote eines Produkttyps: Filter, Galerie, Liste ----------------
   Die Galerie ist die Hauptansicht. Eine Liste mit zehn iPhones, die sich
   nur in der Speichergröße unterscheiden, liest niemand von oben nach
   unten — nebeneinander sieht man den Unterschied sofort. Die Liste bleibt
   als zweite Ansicht, weil sie mehr Text je Zeile zeigt. */
.feed-controls {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
  margin: 10px 0 14px;
}
.feed-filter { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-muted); }
.feed-view-toggle { margin-left: auto; display: flex; gap: 4px; }
.feed-view-btn {
  font-size: 13px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: transparent; color: var(--text-muted);
  cursor: pointer;
}
.feed-view-btn.is-active { background: var(--accent-soft); color: var(--accent-light); border-color: var(--accent); }

/* Seitlich scrollen statt umbrechen: die Reihe bleibt eine Reihe, und auf
   dem Telefon wischt man sie durch. scroll-snap sorgt dafür, dass immer
   eine ganze Kachel steht und nicht eine halbe. */
.feed-gallery {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 10px; -webkit-overflow-scrolling: touch;
}
.feed-card {
  flex: 0 0 200px; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--bg-elevated); text-decoration: none; color: inherit;
}
.feed-card:hover { border-color: var(--accent); }
.feed-card-img { width: 100%; height: 140px; object-fit: contain; background: #fff; border-radius: 8px; }
.feed-card-specs { font-size: 11.5px; color: var(--accent-light); }
.feed-card-name {
  font-size: 13px; line-height: 1.35;
  /* Vier Zeilen, dann Schluss — sonst bestimmt der längste Produktname
     die Höhe aller Kacheln in der Reihe. */
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.feed-card-price { display: flex; align-items: baseline; gap: 6px; font-size: 15px; margin-top: auto; }
.feed-card-shop { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; }

/* Das Angebot, für das sich jemand entschieden hat, steht oben und ist
   breiter als die Alternativen darunter. Eine gleich große Kachel in einer
   Reihe gleich großer Kacheln wäre wieder Suchen — und genau das Suchen
   soll hier aufhören. Größe und Rahmen sagen ohne Text: das war deins.

   Bewusst dieselbe Kachel, nur größer und abgesetzt — kein zweiter
   Kartentyp mit eigenem Aufbau. Ein eigener Aufbau wäre eine zweite Quelle
   für dieselbe Sache und würde beim nächsten Umbau zurückbleiben. */
.feed-gewaehlt { overflow: visible; }
.feed-gewaehlt .feed-card {
  flex: 0 1 min(320px, 100%);
  border-color: var(--accent); background: var(--accent-soft);
}
.feed-gewaehlt .feed-card-img { height: 200px; }
.feed-gewaehlt .feed-card-name { -webkit-line-clamp: 3; font-size: 14px; font-weight: 600; }
.feed-gewaehlt .feed-card-price { font-size: 19px; }
.feed-gewaehlt .feed-item { border-top: 0; }

@media (max-width: 640px) {
  .feed-card { flex-basis: 158px; }
  .feed-card-img { height: 110px; }
  /* Unter 16 px zoomt Safari beim Antippen die Seite heran. */
  .feed-filter .filter-select { font-size: 16px; }
}

.range-value { font-size: 12px; color: var(--accent-light); margin-top: 4px; }
/* Der Wert am Regler ist ein Eingabefeld, keine Beschriftung mehr.
   Schriftgröße 16 px: darunter zoomt Safari auf dem iPhone beim Antippen
   die ganze Seite heran — dieselbe Falle wie bei den Auswahllisten in
   0.9.0. */
.range-value-edit { display: flex; align-items: center; gap: 5px; }
.range-number {
  width: 7ch; font-size: 16px; font-weight: 600;
  color: var(--accent-light); background: var(--bg-elevated);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 3px 6px; text-align: right; -moz-appearance: textfield;
}
.range-number:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Die kleinen Pfeilchen kosten Breite und treffen tut sie ohnehin niemand;
   der Regler daneben macht dasselbe schneller. */
.range-number::-webkit-outer-spin-button,
.range-number::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.range-unit { font-size: 12px; color: var(--text-muted); }

.results-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; font-size: 13.5px; color: var(--text-muted); }
.results-toolbar select { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 10px; color: var(--text); font-size: 13px; }

/* Offer grid / cards */
/* Kacheln rund 10 % schmaler und mit gleichmäßigem Abstand.
   auto-fill statt auto-fit: die letzte Reihe bleibt im selben Raster,
   statt zwei übrig gebliebene Kacheln über die volle Breite zu ziehen —
   genau das ließ die Seite unten unruhig aussehen. */
.offer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); gap: 14px; align-items: stretch; }
.offer-grid > .offer-card { height: 100%; }
.offer-card { position: relative; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: all .15s; display: flex; flex-direction: column; }
.offer-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); }

/* Die ganze Karte ist der Link, nicht nur der Knopf unten rechts.

   Gelöst über ein unsichtbares Feld, das der CTA-Link über die Karte
   spannt. Der Vorteil gegenüber einem click-Handler auf dem Container:
   es bleibt ein echter Link — Mittelklick, „in neuem Tab öffnen", die
   Statusleiste mit dem Ziel und die Tastaturbedienung funktionieren
   weiter, und Screenreader lesen genau einen Link statt einer Karte,
   die sich unerklärlich wie ein Knopf verhält. */
.offer-card .offer-cta::after { content: ""; position: absolute; inset: 0; z-index: 1; }
/* Der Knopf reagiert mit, egal wo auf der Karte die Maus steht — sonst wirkt
   die Karte anklickbar, sieht aber tot aus.

   ACHTUNG: Auf .offer-cta dürfen weder filter noch transform, backdrop-filter
   oder will-change stehen. Jede dieser Eigenschaften macht den Link selbst zum
   Bezugsrahmen für sein eigenes ::after — das Klickfeld schrumpft dann auf
   Knopfgröße zusammen, und zwar genau im Moment des Überfahrens. Die Karte
   sieht anklickbar aus und reagiert trotzdem nicht. Nur Farben ändern. */
.offer-card:hover .offer-cta { background: var(--accent-light); border-color: var(--accent-light); }
.offer-card:hover .offer-img { transform: scale(1.03); }
.offer-img { transition: transform .25s ease; }
@media (prefers-reduced-motion: reduce) {
  .offer-img, .offer-card:hover .offer-img { transition: none; transform: none; }
}
/* Fokus liegt auf dem Link, sichtbar sein soll aber die ganze Karte. */
.offer-card:focus-within { border-color: var(--accent); box-shadow: var(--shadow); }
.offer-card .offer-cta:focus-visible { outline: none; }

/* Was innerhalb der Karte eigenständig anklickbar ist, muss über dem
   Linkfeld liegen — sonst schluckt der Link diese Klicks. */
.offer-card .offer-save,
.offer-card .price-compare { position: relative; z-index: 2; }
.offer-img-wrap { position: relative; aspect-ratio: 4/3; background: var(--bg-elevated); overflow: hidden; }
/* `object-fit: cover` stand hier — das war der Zoom.

   Nachgemessen: Der Händler-Bilddienst liefert das Bild in der Größe, die
   in der Adresse steht, und füllt dabei mit Weiß auf, statt zu schneiden —
   bei 600×300 sind die Ränder links und rechts weiß. Wir fordern 600×600
   an, die Kachel ist aber 4:3. `cover` schneidet die Differenz dann oben
   und unten ab, und weil das Produkt im quadratischen Bild bis an den Rand
   geht, wird ein Stück davon mit abgeschnitten. Das Bild sieht
   herangezoomt aus, weil es das ist.

   `contain` zeigt das ganze Produkt. Der weiße Hintergrund gehört dazu:
   das Auffüllen des Bilddienstes ist weiß, und auf dunklem Grund stünde
   sonst ein weißer Klotz im Bild. Die Galerie und die Angebotsliste machen
   es seit Langem so — nur diese Kachel nicht. */
.offer-img { width: 100%; height: 100%; object-fit: contain; background: #fff; display: block; }
.offer-img-fallback { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--text-muted); font-size: 12px; }
/* DAS hier war der Grund, warum überall gezeichnete Symbole statt
   Produktfotos standen.

   Im Bauplan der Karte trägt der Platzhalter das Attribut `hidden`. Ein
   Browser blendet damit alles aus — außer, eine Regel setzt `display`
   ausdrücklich. Genau das tat die Zeile darüber: `.offer-img-fallback`
   ist stärker als die eingebaute Regel für `[hidden]`, also blieb das
   Symbol sichtbar. Und weil es hinter dem Bild im Bauplan steht und
   absolut liegt, lag es OBEN — über dem geladenen Produktfoto.

   Sichtbar war deshalb immer die Zeichnung, egal wie gut das Bild war.
   Die 8042 Otto-Fotos waren die ganze Zeit da und lagen darunter. */
.offer-img-fallback[hidden] { display: none; }
/* Die Kennzahl in der Platzhalter-Kachel: bei Tarifen das Datenvolumen.
   Sie ist der einzige Grund, warum sich fünf Kacheln desselben Anbieters
   im Bild überhaupt unterscheiden — deshalb darf sie lesbar sein und nicht
   nur Beschriftung unter einem Symbol. */
.offer-illu-kennzahl {
  font-size: 20px; font-weight: 700; letter-spacing: -0.3px;
  color: var(--text); line-height: 1;
}
.offer-body { padding: 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.offer-top-row { display: flex; justify-content: space-between; align-items: center; }
.offer-provider { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); }
.offer-tag { font-size: 11px; background: var(--accent-soft); color: var(--accent-light); padding: 2px 8px; border-radius: 999px; }
.offer-title { margin: 0; font-size: 15.5px; }
.offer-attrs { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--text-muted); flex: 1; }
.offer-attrs li:before { content: "· "; color: var(--accent-light); }
.offer-bottom-row { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
.offer-price { font-weight: 700; font-size: 15px; }
.offer-price small { font-weight: 400; font-size: 11px; color: var(--text-muted); }

.empty-state { grid-column: 1/-1; text-align: center; padding: 48px 20px; color: var(--text-muted); font-size: 14px; }

/* Result rail — horizontal scroller used inside the chat, so results stay
   compact and the conversation keeps the vertical space. */
.offer-rail-wrap { position: relative; margin: 4px 0 6px; }
.offer-rail {
  display: flex; gap: 10px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  padding: 2px 2px 10px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.offer-rail::-webkit-scrollbar { height: 6px; }
.offer-rail::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }
.offer-rail::-webkit-scrollbar-thumb:hover { background: var(--accent); }
.offer-rail .offer-card {
  flex: 0 0 230px; width: 230px; scroll-snap-align: start;
}
.offer-rail .offer-img-wrap { aspect-ratio: 16/9; }
.offer-rail .offer-body { padding: 12px; gap: 6px; }
.offer-rail .offer-title { font-size: 14px; }
.offer-rail .offer-attrs { font-size: 11.5px; }
.offer-rail .offer-price { font-size: 14px; }

.rail-nav {
  position: absolute; top: 38%; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 999px; z-index: 2;
  background: var(--card); border: 1px solid var(--border); color: var(--text);
  font-size: 19px; line-height: 1; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow); opacity: 0; transition: opacity .15s ease;
}
.offer-rail-wrap:hover .rail-nav { opacity: 1; }
.rail-nav:hover { border-color: var(--accent); color: var(--accent-light); }
.rail-nav-prev { left: -6px; }
.rail-nav-next { right: -6px; }
.rail-hint { font-size: 11.5px; margin: 0; }
/* Arrows are pointless without a mouse — swiping is the native gesture. */
@media (hover: none) { .rail-nav { display: none; } }

/* The reasoning block — a conclusion, so it looks different from a message. */
.recommendation {
  background: linear-gradient(135deg, var(--accent-soft), transparent 70%), var(--bg-elevated);
  border: 1px solid var(--accent);
  border-radius: 14px;
  padding: 14px 16px;
  margin: 2px 0 12px;
}
.rec-head {
  display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--accent-light);
  margin-bottom: 8px;
}
.rec-body { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--text); }
.rec-body strong { color: var(--accent-light); }
.rec-note { margin: 9px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--text-muted); }

.offer-card.is-recommended { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); position: relative; }
.rec-flag {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  background: var(--accent); color: #fff;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.3px;
  padding: 3px 8px; border-radius: 999px;
}
[dir="rtl"] .rec-flag { left: auto; right: 8px; }

/* Denk-Indikator — drei Punkte, die nacheinander pulsieren. Signalisiert
   Arbeit statt Stillstand, so wie man es von einem Assistenten kennt. */
.thinking { display: flex; align-items: center; gap: 10px; color: var(--text-muted); }
.dots { display: inline-flex; gap: 4px; }
.dots i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-light);
  animation: dot-pulse 1.2s ease-in-out infinite;
}
.dots i:nth-child(2) { animation-delay: .18s; }
.dots i:nth-child(3) { animation-delay: .36s; }
@keyframes dot-pulse {
  0%, 60%, 100% { opacity: .25; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* Eingabefeld: reagiert sichtbar auf Fokus, wie ein aktives Gespräch. */
.chat-input-row input {
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.chat-input-row input:focus {
  box-shadow: 0 0 0 3px var(--accent-soft);
  background: var(--card);
}
/* Der Senden-Knopf wird erst kräftig, wenn wirklich etwas dasteht. */
.chat-input-row .btn-accent { transition: opacity .2s ease, transform .15s ease; }
.chat-input-row input:placeholder-shown ~ .btn-accent { opacity: .55; }

/* Die Chat-Karte atmet leicht, solange noch nichts eingegeben wurde. */
.home-chat-hero .chat-shell {
  transition: box-shadow .4s ease, border-color .4s ease;
}
.home-chat-hero .chat-shell:focus-within {
  border-color: var(--accent-light);
  box-shadow: 0 28px 70px -20px rgba(0, 105, 148, 0.45), var(--shadow);
}

@media (prefers-reduced-motion: reduce) {
  .dots i { animation: none; opacity: .6; }
}

/* Angebot, die Sprache zu wechseln — erscheint im Chat, wenn jemand in einer
   anderen Sprache tippt. Bewusst als Frage, nicht als automatische Umstellung. */
.lang-offer { max-width: 100%; border-color: var(--accent); background: var(--accent-soft); }
.lang-offer-head { font-size: 14px; margin-bottom: 10px; }
.lang-offer-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.lang-menu { max-height: 60vh; overflow-y: auto; }

/* Business hand-off inside the chat */
.biz-msg { max-width: 100%; border-color: var(--accent); background: var(--accent-soft); }
.biz-inline { display: flex; gap: 14px; align-items: flex-start; }
.biz-logo { width: 52px; height: 52px; object-fit: contain; border-radius: 9px; background: #000; flex-shrink: 0; }
.biz-inline p { margin: 5px 0 0; font-size: 13px; line-height: 1.55; }
.biz-cta { margin-top: 12px; }
.chip-biz { border-color: var(--accent); color: var(--accent-light); }

.affiliate-note { font-size: 11.5px; margin-top: 12px; }
.empty-state .btn { margin-top: 10px; }
.msg-followup { border-left: 3px solid var(--accent); }

/* Own product illustrations. Amazon images require Creators API access and
   images found via a search engine are copyrighted — so these are drawn. */
.offer-illu {
  background:
    radial-gradient(circle at 30% 25%, hsl(var(--illu-hue, 200) 60% 50% / .18), transparent 62%),
    linear-gradient(150deg, var(--bg-elevated), var(--card));
}
.offer-illu .product-illu { width: 58%; height: 58%; }
.offer-illu span { display: none; }

/* ---------- Produktseite: ein Produkt, alle Händler ---------- */
.product-page { max-width: 900px; margin: 0 auto; }
.product-crumb { font-size: 12.5px; color: var(--text-muted); margin-bottom: 16px; }
.product-crumb a { color: var(--accent-light); }
.product-crumb a:hover { text-decoration: underline; }

.product-head { display: grid; grid-template-columns: 260px 1fr; gap: 28px; align-items: start; }
.product-media {
  position: relative; aspect-ratio: 1/1; border-radius: var(--radius);
  border: 1px solid var(--border); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.product-media img { width: 100%; height: 100%; object-fit: contain; }
.product-title { font-size: 27px; margin: 6px 0 12px; letter-spacing: -0.4px; line-height: 1.2; }
.product-best { font-size: 21px; margin: 0 0 14px; }
.product-best strong { font-size: 27px; }
.product-lead { font-size: 14.5px; line-height: 1.6; color: var(--text-muted); margin: 0 0 18px; }
.product-subhead { font-size: 15px; margin: 26px 0 12px; letter-spacing: -0.2px; }
.product-attrs { font-size: 13.5px; gap: 5px; }

/* Die Händlerliste ist der Kern der Seite: eine Zeile je Shop, der beste
   Preis oben und hervorgehoben, der Aufpreis der anderen direkt daneben —
   damit man den Unterschied nicht selbst ausrechnen muss. */
.shop-table { display: flex; flex-direction: column; gap: 8px; }
.shop-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 13px 16px;
}
.shop-row.is-best { border-color: var(--accent); background: var(--accent-soft); }
.shop-name { font-size: 14.5px; font-weight: 600; display: flex; align-items: center; gap: 9px; }
.shop-badge {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px;
  background: var(--accent); color: #fff; padding: 2px 8px; border-radius: 999px;
}
.shop-price { font-size: 16px; font-weight: 700; text-align: right; white-space: nowrap; }
.shop-price small { font-weight: 400; font-size: 12px; color: var(--text-muted); }
.shop-diff { display: block; font-weight: 400; font-size: 11.5px; color: var(--text-muted); }
.shop-action { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.shop-action .btn { white-space: nowrap; }
/* Kennzeichnung bezahlter Links nach § 5a UWG — klein, aber immer sichtbar. */
.shop-ad { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); }
.shop-nolink { font-size: 12px; }
.product-note { font-size: 12px; margin: 12px 0 0; line-height: 1.6; }
.product-actions { margin: 20px 0 8px; }
.product-save { display: inline-flex; align-items: center; gap: 8px; width: auto; height: auto; padding: 8px 14px; }

@media (max-width: 760px) {
  .product-head { grid-template-columns: 1fr; gap: 18px; }
  .product-media { max-width: 220px; margin: 0 auto; }
  .product-title { font-size: 22px; }
  .product-best strong { font-size: 23px; }
  /* Auf schmalen Displays passen Name, Preis und Knopf nicht nebeneinander —
     der Knopf rutscht in eine eigene Zeile über die volle Breite. */
  .shop-row { grid-template-columns: 1fr auto; row-gap: 10px; }
  .shop-action { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
  .shop-action .btn { flex: 1; text-align: center; }
}

/* ---------- Produkte gegeneinander ---------- */
/* Der Knopf liegt über dem Bild und muss über dem Link-Feld der Karte
   liegen, sonst öffnet er die Produktseite statt auszuwählen. */
.compare-toggle {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
  background: rgba(12, 18, 24, .72); backdrop-filter: blur(6px);
  border: 1px solid var(--border); color: var(--text);
  opacity: 0; transition: opacity .18s ease, background .18s ease;
}
/* Auf Zeigegeräten erst beim Überfahren — sonst liegt auf jeder Karte
   dauerhaft ein Knopf über dem Produktbild. */
.offer-card:hover .compare-toggle,
.offer-card:focus-within .compare-toggle,
.compare-toggle.is-on { opacity: 1; }
@media (hover: none) { .compare-toggle { opacity: 1; } }
.compare-toggle:hover { background: rgba(12, 18, 24, .9); border-color: var(--accent); }
.compare-toggle.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }

.compare-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--card); border-top: 1px solid var(--border);
  box-shadow: 0 -12px 30px -18px rgba(0, 0, 0, .7);
  animation: ec-rise .2s ease-out both;
}
.compare-chips { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; min-width: 0; }
.compare-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: 999px; padding: 6px 10px 6px 13px; font-size: 12.5px; color: var(--text);
  max-width: 240px;
}
.compare-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compare-chip i { font-style: normal; color: var(--text-muted); font-size: 15px; line-height: 1; }
.compare-chip:hover { border-color: var(--accent); }
.compare-chip:hover i { color: var(--accent-light); }
.compare-actions { display: flex; gap: 8px; align-items: center; }
.compare-actions .is-disabled { opacity: .45; pointer-events: none; }
.compare-warn { flex-basis: 100%; margin: 0; font-size: 12px; color: var(--text-muted); }
/* Platz für die Leiste, damit sie nichts am Seitenende verdeckt. */
body.has-compare-bar { padding-bottom: 76px; }

.compare-page { max-width: 1000px; margin: 0 auto; }
.compare-table { width: 100%; border-collapse: collapse; margin-top: 20px; }
.compare-table th, .compare-table td {
  padding: 12px 14px; border-bottom: 1px solid var(--border);
  vertical-align: top; text-align: left; font-size: 13.5px;
}
/* Die Eigenschaftsspalte ist die Orientierung beim waagerechten Lesen. */
.compare-table tbody th {
  width: 148px; font-size: 12px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--text-muted); font-weight: 600;
}
.compare-table thead th { border-bottom: 2px solid var(--border); width: auto; }
.compare-table tbody tr:nth-child(odd) td { background: var(--bg-elevated); }
.compare-media { position: relative; aspect-ratio: 1/1; max-width: 110px; border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.compare-name { display: block; font-size: 15px; font-weight: 700; color: var(--text); }
.compare-name:hover { color: var(--accent-light); }
.compare-badge { display: inline-block; margin-top: 8px; }
.compare-price { font-size: 15px; }
.compare-price.is-win { color: var(--accent-light); }
.compare-attrs { font-size: 12.5px; }

@media (max-width: 760px) {
  /* Zwei bis drei Spalten plus Beschriftung passen nicht auf ein Telefon —
     die Tabelle scrollt hier waagerecht, statt die Schrift zu zerquetschen. */
  .compare-page { overflow-x: auto; }
  .compare-table { min-width: 560px; }
  .compare-table tbody th { width: 110px; }
  .compare-bar { padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); }
  body.has-compare-bar { padding-bottom: 108px; }
}

/* ---------- Preisverlauf ---------- */
.history-box { margin-top: 26px; }
.spark { width: 100%; height: 110px; display: block; overflow: visible; }
.spark-line { fill: none; stroke: var(--accent-light); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.spark-area { fill: var(--accent-soft); stroke: none; }
.spark-dot { fill: var(--accent-light); stroke: var(--card); stroke-width: 2; }
.history-legend {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px 12px;
  margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--border);
}
.history-legend dt { grid-row: 1; font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); }
.history-legend dd { grid-row: 2; margin: 0; font-size: 16px; font-weight: 700; }
.history-legend dd.is-down { color: #4ade80; }
.history-legend dd.is-up { color: #f87171; }
.history-note, .history-empty { font-size: 12px; line-height: 1.6; margin: 10px 0 0; }

@media (max-width: 560px) {
  .history-legend { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .history-legend dt, .history-legend dd { grid-row: auto; }
  .history-legend dt { align-self: center; }
  .history-legend dd { text-align: right; }
}

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

   Die Kacheln waren auf dem Telefon 434 px hoch — anderthalb Kacheln passen
   auf den Bildschirm, für 8.000 Artikel ist das unbenutzbar. Zwei Spalten
   und ein flacheres Bild bringen sechs statt anderthalb.

   Wichtig ist außerdem die Rückmeldung beim Antippen: am Rechner zeigt der
   Zeiger, dass die ganze Kachel ein Link ist, auf dem Telefon gibt es keinen
   Zeiger. Ohne sichtbare Reaktion wirkt eine Kachel tot, auch wenn sie
   funktioniert — deshalb hier eine eigene Antippfarbe statt der grauen
   Voreinstellung des Browsers.
   --------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .offer-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .offer-img-wrap { aspect-ratio: 1 / 1; }
  .offer-body { padding: 10px; gap: 6px; }
  .offer-title { font-size: 13px; line-height: 1.35; }
  .offer-attrs { display: none; }
  .offer-price { font-size: 15px; }
  .offer-bottom-row { flex-wrap: wrap; gap: 6px; }

  /* Der Knopf über die volle Breite: nebeneinander bleiben bei 13 Zeichen
     Tarifnamen zwei Wörter pro Zeile übrig und die Karte franst aus. */
  .offer-card .offer-cta { width: 100%; text-align: center; padding: 9px 10px; }
  .offer-card .offer-save { order: -1; }

  /* Antippen sichtbar machen. */
  .offer-card { -webkit-tap-highlight-color: transparent; }
  .offer-card:active { border-color: var(--accent); background: var(--bg-elevated); }

  /* Die Filterreihen scrollen seitlich, statt vier Zeilen hoch zu werden
     und die Ergebnisse aus dem Bild zu schieben. */
  .catalog-filter {
    flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .catalog-filter::-webkit-scrollbar { display: none; }
  .catalog-chip { flex: 0 0 auto; }
}

/* Sehr schmale Geräte: eine Spalte, sonst bleibt vom Titel nichts übrig. */
@media (max-width: 360px) {
  .offer-grid { grid-template-columns: 1fr; }
  .offer-img-wrap { aspect-ratio: 16 / 9; }
}

/* Amazon hand-off block under the product results */
.product-tail { max-width: 1000px; margin: 22px auto 0; }
.amazon-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 20px;
}
.amazon-banner strong { font-size: 14.5px; }
.amazon-banner p { margin: 3px 0 0; font-size: 12.5px; }
/* Der Hinweis steht im Kachelraster und läuft über alle Spalten — er ist
   die Antwort auf die Suche, keine Kachel neben den Kacheln. */
.offer-grid > .amazon-hinweis { grid-column: 1 / -1; margin-bottom: 4px; }

/* Der Amazon-Knopf auf der Kachel.

   Bewusst nicht im Akzentblau der eigenen Angebote: Blau heißt auf dieser
   Seite „Preis von uns geprüft". Ein Amazon-Weg ist etwas anderes, und
   gleich auszusehen wäre eine stille Falschaussage. Umrandet statt gefüllt,
   damit man den Unterschied sieht, ohne ihn lesen zu müssen. */
.offer-cta-amazon {
  background: transparent; border: 1px solid var(--accent);
  color: var(--accent-light);
}
.offer-cta-amazon:hover { background: var(--accent-soft); }
/* Statt einer leeren Preiszeile: der Grund, warum keiner dasteht. */
.offer-price-extern { font-size: 12.5px; font-style: italic; color: var(--text-muted); font-weight: 400; }

/* ---- Sprachfrage beim ersten Besuch -----------------------------------

   Bewusst kein Zwang: die Seite steht schon fertig dahinter, der Kasten
   lässt sich mit Escape oder einem Klick daneben schließen, und die
   Auswahl gibt es danach weiter oben in der Kopfzeile. Ein Kasten, den man
   nicht wegbekommt, kostet mehr Besucher als eine falsche Sprache. */
.sprachfrage {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(0, 0, 0, 0.55);
}
.sprachfrage-karte {
  width: min(420px, 100%); max-height: 80vh; overflow-y: auto;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}
.sprachfrage-kopf {
  margin: 0 0 14px; font-size: 13px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.sprachfrage-liste { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sprachfrage-knopf {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 12px; min-height: 44px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-elevated); color: var(--text);
  font-family: inherit; font-size: 14px; text-align: left; cursor: pointer;
}
.sprachfrage-knopf:hover { border-color: var(--accent); }
/* Die geratene Sprache steht zuerst und sieht anders aus — als Angebot,
   nicht als Voreinstellung, die schon gilt. */
.sprachfrage-knopf.is-vorschlag {
  grid-column: 1 / -1; border-color: var(--accent);
  background: var(--accent-soft); font-weight: 600;
}
@media (max-width: 380px) {
  .sprachfrage-liste { grid-template-columns: 1fr; }
}

/* Der feste Erklärtext über dem Fußbereich.

   Er steht auf jeder Seite, deshalb bewusst zurückhaltend: eine Zeile
   Überschrift, zwei Absätze, klare Trennung nach oben. Er soll die Seite
   erklären, nicht sie zumauern. */
/* Die Zweckzeile unter der Kopfzeile. Bewusst leise: eine Zeile Name,
   eine Zeile Zweck. Sie soll die Seite einordnen, nicht sie aufhalten. */
/* Über dem Ladebildschirm, nicht darunter.

   Der Ladebildschirm liegt als `position: fixed; inset: 0; z-index: 1000`
   mit deckendem Hintergrund über der ganzen Seite — anderthalb Sekunden
   lang, im Notfall bis 3,5. Wer in dieser Zeit ein Bild von der Seite
   macht, sieht ein Logo und sonst nichts. Kein Zweck, kein Text.

   Das ist die letzte Erklärung, die für Googles Beanstandung noch
   übrigbleibt: „Auf Ihrer Startseite wird nicht erklärt, wozu die App
   dient." Ein Prüfer, der früh auslöst, hat schlicht nichts zu lesen.

   Diese Zeile liegt deshalb darüber. Für Besucher sieht es aus wie Teil
   des Vorspanns; für alles, was früh hinsieht, stehen Name und Zweck von
   der ersten Sekunde an da. */
/* NICHT über den Ladebildschirm legen.

   Ich hatte das hier auf `z-index: 1001` gesetzt, damit ein früh
   auslösender Google-Prüfer Name und Zweck sieht. Der Preis dafür war,
   dass die Zeile über dem Vorspann klebte — der soll aber nur das Logo
   und den Namen zeigen. Der Vorspann ist Markenauftritt, kein Platz für
   Fließtext.

   Vertretbar, weil der Vorspann inzwischen 550 ms dauert statt 1.500 und
   die Ausfallsicherung 1,2 s statt 3,5. Der Text steht ohnehin im HTML,
   und darauf kommt es beim Auslesen an. */
.kopfzeile-zweck {
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.kopfzeile-zweck-inner {
  max-width: 1000px; margin: 0 auto; padding: 12px 28px;
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.kopfzeile-zweck h1 {
  margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; flex: 0 0 auto;
}
.kopfzeile-zweck p { margin: 0; font-size: 13px; color: var(--text-muted); }
body.nicht-start .kopfzeile-zweck { display: none; }
@media (max-width: 760px) {
  .kopfzeile-zweck-inner { padding: 10px 16px; gap: 6px; }
  .kopfzeile-zweck p { font-size: 12.5px; }
}

.ueber-uns { border-top: 1px solid var(--border); margin-top: 40px; }
.ueber-inner h2 { font-size: 17px; margin: 0 0 10px; }
/* Nur auf der Startseite. Die Klasse setzt render() auf allen ANDEREN
   Routen — ohne JavaScript bleibt der Block sichtbar, und genau so soll
   es sein. */
body.nicht-start .ueber-uns { display: none; }
.ueber-inner { max-width: 1000px; margin: 0 auto; padding: 28px 28px 4px; }
.ueber-inner h1 { font-size: 19px; margin: 0 0 10px; letter-spacing: -0.01em; }
.ueber-inner p {
  margin: 0 0 10px; max-width: 68ch;
  font-size: 13.5px; line-height: 1.65; color: var(--text-muted);
}
@media (max-width: 760px) {
  .ueber-inner { padding: 22px 16px 4px; }
}

/* Product SEO pages */
.seo-price { font-size: 20px; margin: 18px 0 12px; }
.seo-attrs { margin: 0 0 8px; padding-left: 20px; font-size: 14px; line-height: 1.8; color: var(--text-muted); }

/* Preisvergleich über mehrere Händler */
.price-from { font-size: 11.5px; font-weight: 400; color: var(--text-muted); }
.price-compare { margin: 6px 0 2px; }
.price-compare-toggle {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: none; border: none; padding: 4px 0;
  font-size: 12px; color: var(--accent-light); font-family: inherit;
}
.price-compare-toggle::after {
  content: "▾"; margin-left: auto; font-size: 10px;
  transition: transform .18s ease;
}
.price-compare-toggle.is-open::after { transform: rotate(180deg); }
.price-saving {
  background: var(--accent-soft); color: var(--accent-light);
  padding: 2px 7px; border-radius: 999px; font-size: 11px; font-weight: 600;
}
.price-list {
  margin: 6px 0 0; padding: 8px 10px;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  animation: ec-rise .2s ease-out both;
}
.price-list li {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 12.5px; padding: 4px 0; color: var(--text-muted);
}
.price-list li.is-best { color: var(--text); font-weight: 600; }
.price-list li.is-best .price-value { color: var(--accent-light); }
.price-shop { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.price-value { font-variant-numeric: tabular-nums; flex-shrink: 0; }

/* Save-for-later ("Merken") */
.offer-save {
  width: 34px; height: 34px; flex-shrink: 0; margin-left: auto; margin-right: 8px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--border); border-radius: 9px;
  color: var(--text-muted); transition: all .15s ease;
}
.offer-save:hover { border-color: var(--accent); color: var(--accent-light); }
.offer-save.is-saved { color: var(--accent-light); border-color: var(--accent); background: var(--accent-soft); }
.offer-save.is-saved svg { fill: currentColor; }
.offer-bottom-row .offer-price { margin-right: auto; }

.saved-info { min-width: 0; }
.saved-title { font-weight: 600; font-size: 14px; margin-bottom: 2px; }
.saved-meta { font-size: 12px; }

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px);
  z-index: 200; max-width: min(420px, calc(100vw - 32px));
  background: var(--card); border: 1px solid var(--accent);
  border-radius: 14px; padding: 13px 18px;
  font-size: 13.5px; line-height: 1.45; color: var(--text);
  box-shadow: 0 18px 44px -14px rgba(0,0,0,.6);
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast-error { border-color: #f87171; }

/* Partner badge on the business lead page */
.partner-badge {
  display: flex; align-items: center; gap: 16px; margin-top: 20px;
  padding: 14px 16px; background: var(--card);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.partner-logo { width: 62px; height: 62px; object-fit: contain; border-radius: 10px; flex-shrink: 0; background: #000; }
.partner-badge strong { font-size: 14.5px; }
.partner-badge p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.5; }
.partner-badge a { color: var(--accent-light); }

/* Product search */
.product-search-row { display: flex; gap: 10px; margin-bottom: 22px; }
.product-search-row input { flex: 1; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 16px; color: var(--text); font-size: 14.5px; }
.product-search-row input:focus { outline: none; border-color: var(--accent); }

/* Reward CTA */
.reward-cta { display: flex; justify-content: space-between; align-items: center; gap: 16px; background: var(--accent-soft); border: 1px solid var(--accent); border-radius: var(--radius); padding: 16px 20px; margin-top: 18px; }
.reward-cta strong { font-size: 14.5px; }
.reward-cta p { margin: 4px 0 0; font-size: 12.5px; }

/* Help page */
.help-page { max-width: 640px; }
.help-page h2 { font-size: 24px; margin: 0 0 10px; }
.help-item { padding: 16px 0; border-top: 1px solid var(--border); }
.help-item h3 { margin: 0 0 6px; font-size: 15.5px; }
.help-item p { margin: 0; font-size: 14px; color: var(--text-muted); line-height: 1.6; }
.help-disclaimer { margin-top: 18px; font-size: 12.5px; }

/* Modal (email / reminder capture) */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(4, 7, 11, 0.72);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; z-index: 100;
}
.modal-card {
  position: relative; width: 100%; max-width: 420px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 28px 26px 24px;
}
.modal-close {
  position: absolute; top: 14px; right: 14px; background: none; border: none;
  color: var(--text-muted); font-size: 15px; padding: 4px 8px; border-radius: 6px;
}
.modal-close:hover { color: var(--text); background: var(--bg-elevated); }
.modal-icon { font-size: 22px; margin-bottom: 8px; }
.modal-title { margin: 0 0 8px; font-size: 18px; }
.modal-desc { margin: 0 0 18px; font-size: 13.5px; line-height: 1.55; }
.modal-field { margin-bottom: 14px; }
.modal-field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; }
.modal-field input, .modal-field select {
  width: 100%; background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 12px; color: var(--text); font-size: 14px;
}
.modal-field input:focus, .modal-field select:focus { outline: none; border-color: var(--accent); }
.modal-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--text-muted); line-height: 1.5; margin: 4px 0 16px; cursor: pointer; }
.modal-consent input { margin-top: 3px; flex-shrink: 0; }
.modal-status { min-height: 18px; font-size: 12.5px; margin: 0 0 10px; }
.modal-status-ok { color: #4ade80; }
.modal-status-error { color: #f87171; }
.modal-actions { display: flex; align-items: center; gap: 14px; }
.modal-actions .btn-accent { flex: 1; }
.modal-actions .btn-ghost { padding-left: 0; padding-right: 0; }

/* Auth screen — generous, centred, one clear primary action. */
.auth-card { max-width: 400px; padding: 34px 30px 26px; border-radius: 22px; }
.auth-head { text-align: center; margin-bottom: 24px; }
.auth-badge {
  width: 62px; height: 62px; margin: 0 auto 18px; border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  background: linear-gradient(145deg, var(--accent-light), var(--accent));
  box-shadow: 0 12px 30px -10px rgba(0, 105, 148, 0.7);
}
.auth-title { font-size: 25px; font-weight: 700; letter-spacing: -0.3px; margin: 0 0 8px; }
.auth-sub { font-size: 14px; line-height: 1.55; color: var(--text-muted); margin: 0; }
.auth-card .modal-field { margin-bottom: 16px; }
.auth-card .modal-field label { font-size: 13px; font-weight: 500; color: var(--text); margin-bottom: 7px; }
.auth-card .modal-field input {
  padding: 13px 14px; font-size: 15px; border-radius: 12px;
  background: var(--bg-elevated);
}
.auth-card .modal-actions { margin-top: 4px; }
.auth-card .modal-actions .btn-accent {
  width: 100%; padding: 13px; font-size: 15px; font-weight: 600; border-radius: 12px;
}
.auth-card .modal-switch { margin-top: 16px; font-size: 13.5px; }
.auth-legal {
  margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--border);
  font-size: 11.5px; line-height: 1.55; color: var(--text-muted); text-align: center;
}
.auth-legal a { color: var(--accent-light); }

/* Password field with a show/hide affordance */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 84px !important; width: 100%; }
.pw-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--text-muted);
  font-size: 12.5px; font-family: inherit; padding: 6px 8px; border-radius: 7px;
}
.pw-toggle:hover { color: var(--accent-light); background: var(--card); }

/* Six-box code entry for one-time codes */
.code-input-row { display: flex; gap: 8px; justify-content: center; margin: 4px 0 18px; }
.code-box {
  width: 46px; height: 56px; text-align: center;
  font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums;
  background: var(--bg-elevated); color: var(--text);
  border: 1px solid var(--border); border-radius: 12px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.code-box:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Auth modal extras */
.oauth-row { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.oauth-btn {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: 600;
}
.oauth-logo { flex-shrink: 0; display: block; }
.oauth-btn:disabled { opacity: 0.6; }
/* Apple's mark is monochrome and should follow the current text colour so it
   stays legible in both dark and light theme. */
.oauth-apple .oauth-logo { color: var(--text); }

/* Partner area */
.partner-lead-card h3 { margin: 0 0 10px; font-size: 17px; }
.partner-lead-meta { font-size: 13.5px; line-height: 1.7; margin-bottom: 16px; }
.partner-lead-meta a { color: var(--accent-light); }
.modal-divider { text-align: center; font-size: 11.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; margin: 4px 0 16px; position: relative; }
.modal-divider::before, .modal-divider::after { content: ""; position: absolute; top: 50%; width: 38%; height: 1px; background: var(--border); }
.modal-divider::before { left: 0; }
.modal-divider::after { right: 0; }
.modal-switch { text-align: center; font-size: 12.5px; color: var(--text-muted); margin: 4px 0 0; }
.modal-switch a { color: var(--accent-light); }

/* Geschäftskunden-Lead-Seite */
.lead-page { max-width: 680px; margin: 0 auto; }
.lead-intro { margin-bottom: 28px; }
.lead-intro h2 { font-size: 26px; margin: 0 0 10px; line-height: 1.25; }
.lead-intro p { font-size: 14.5px; line-height: 1.6; margin: 0; }
.lead-intro a { color: var(--accent-light); text-decoration: underline; }
.lead-form { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; }
.lead-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 16px; }
.lead-form .modal-field { margin-bottom: 14px; }
.lead-grid .modal-field { margin-bottom: 0; }
.lead-form textarea {
  width: 100%; background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 12px; color: var(--text);
  font-size: 14px; font-family: inherit; resize: vertical;
}
.lead-form textarea:focus { outline: none; border-color: var(--accent); }
.lead-fieldset { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px; margin: 18px 0; }
.lead-fieldset legend { font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); padding: 0 6px; }
.lead-hint { font-size: 12px; margin: 10px 0 0; }
.lead-success { text-align: center; padding: 20px 0; }
.lead-success h3 { margin: 8px 0 10px; font-size: 19px; }
.lead-success p { font-size: 14px; line-height: 1.6; margin: 0 0 20px; }

/* Konto (account page) */
.konto-shell { max-width: 640px; margin: 0 auto; }
.konto-header { margin-bottom: 24px; }
.konto-header h2 { margin: 0 0 4px; }
.konto-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 18px; }
.konto-card h3 { margin: 0 0 14px; font-size: 15px; }
.konto-pw-form .modal-field { margin-bottom: 12px; }
.konto-list { display: flex; flex-direction: column; gap: 8px; }
.konto-list-item { font-size: 13.5px; color: var(--text); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; }
.konto-list-item-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.konto-empty { margin: 0; font-size: 13px; }
.konto-hint { font-size: 12.5px; margin: 0 0 12px; }
.konto-logout { width: 100%; }
.konto-mfa-setup { margin-top: 14px; }
.konto-mfa-qr {
  width: 176px; height: 176px; margin: 0 auto 14px; padding: 10px;
  background: #fff; border-radius: 12px; box-shadow: var(--shadow);
  display: flex; align-items: center; justify-content: center;
}
.konto-mfa-qr img, .konto-mfa-qr svg { width: 100%; height: 100%; display: block; }
.konto-mfa-secret { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.konto-mfa-setup code {
  font-size: 12.5px; letter-spacing: 1px; background: var(--bg-elevated);
  padding: 7px 11px; border-radius: 8px; word-break: break-all;
  border: 1px solid var(--border);
}
.konto-mfa-steps { margin: 0 0 16px; padding-left: 20px; font-size: 13px; color: var(--text-muted); line-height: 1.7; }
.konto-mfa-label { display: block; text-align: center; font-size: 13px; font-weight: 500; margin-bottom: 8px; }
.konto-mfa-setup .modal-actions { justify-content: center; }
.btn-passkey { width: 100%; margin-bottom: 4px; }

/* ===== Vorschläge im Beratungsgespräch =====
   Gruppiert und beschriftet statt einer Reihe gleich aussehender Knöpfe.
   Die drei Arten — fehlende Angabe, Anpassung, Erklärung — unterscheiden
   sich sichtbar, ohne dass es bunt wird. */
.suggestions {
  display: flex; flex-direction: column; gap: 14px;
  padding: 4px 0 2px;
  animation: ec-rise .3s cubic-bezier(.22,.61,.36,1) both .08s;
}
.suggest-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .7px;
  text-transform: uppercase; color: var(--text-muted);
  margin-bottom: 7px;
}
.suggest-row { display: flex; flex-wrap: wrap; gap: 7px; }

.suggest-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; border-radius: 11px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-family: inherit; font-size: 13px; font-weight: 500;
  line-height: 1.3; text-align: left;
  transition: border-color .16s ease, background .16s ease,
              transform .16s cubic-bezier(.22,.61,.36,1), box-shadow .16s ease;
}
.suggest-chip svg { flex-shrink: 0; opacity: .6; transition: opacity .16s ease; }
.suggest-chip:hover {
  border-color: var(--accent);
  background: var(--card-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -8px rgba(0,105,148,.5);
}
.suggest-chip:hover svg { opacity: 1; }
.suggest-chip:active { transform: translateY(0) scale(.985); }
.suggest-chip:disabled { opacity: .45; pointer-events: none; }

/* Die fehlende Kernangabe ist der wichtigste nächste Schritt — deshalb
   deutlicher hervorgehoben als die übrigen Vorschläge. */
.suggest-slot {
  background: linear-gradient(180deg, var(--accent-soft), transparent), var(--card);
  border-color: var(--accent);
  font-weight: 600;
}
.suggest-slot svg { opacity: 1; color: var(--accent-light); }

.suggest-explain { color: var(--text-muted); font-weight: 400; }
.suggest-biz { border-style: dashed; }
.suggest-biz:hover { border-style: solid; }
.suggest-explain:hover { color: var(--text); }

@media (max-width: 760px) {
  .suggestions { gap: 12px; }
  .suggest-chip { padding: 8px 12px; font-size: 12.5px; }
  .suggest-row { gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .suggestions { animation: none; }
  .suggest-chip:hover { transform: none; }
}

/* Imprint placeholders — visibly unfinished, so they can't be missed. */
.imprint-todo {
  background: rgba(248, 113, 113, 0.08);
  border-left: 3px solid #f87171;
  padding: 10px 14px; border-radius: 0 8px 8px 0;
  font-size: 13.5px; line-height: 1.6; margin: 0;
}

/* Danger zone on the account page */
.konto-danger { border-color: rgba(248, 113, 113, 0.4); }
.konto-danger h3 { color: #f87171; }
.btn-danger {
  background: transparent; border: 1px solid #f87171; color: #f87171;
}
.btn-danger:hover { background: rgba(248, 113, 113, 0.12); }

/* Team & roles */
.role-legend {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px; margin: 14px 0 20px;
}
.role-legend > div {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 14px;
}
.role-legend strong { display: block; font-size: 13px; margin-bottom: 4px; }
.role-legend span { font-size: 12px; line-height: 1.5; }
.role-badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
  background: var(--bg-elevated); border: 1px solid var(--border);
}
.role-badge.role-admin { background: var(--accent-soft); color: var(--accent-light); border-color: var(--accent); }
.deletion-box { border-color: rgba(248, 113, 113, 0.4); margin-top: 24px; }
.deletion-box h3 { color: #f87171; }

/* CSV import */
.import-drop {
  border: 2px dashed var(--border); border-radius: var(--radius);
  padding: 26px 20px; text-align: center; margin-bottom: 16px;
  transition: border-color .15s ease, background .15s ease;
}
.import-drop.is-over { border-color: var(--accent); background: var(--accent-soft); }
.import-drop p { margin: 0 0 6px; font-size: 13.5px; }
.import-drop p:last-child { margin: 0; font-size: 12px; }
.import-preview { margin-top: 18px; }
.import-link { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: var(--text-muted); }
.import-history-title { font-size: 15px; margin: 26px 0 12px; }

/* Admin gate (login required / no access) */
.admin-gate { max-width: 480px; margin: 60px auto; text-align: center; }
.admin-gate h2 { margin: 0 0 10px; }

/* Admin shell */
.admin-shell { max-width: 1100px; margin: 0 auto; }
.admin-header { margin-bottom: 18px; }
.admin-header h2 { margin: 0 0 4px; }
.admin-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 24px; }
.admin-tab { background: none; border: none; color: var(--text-muted); padding: 10px 16px; font-size: 14px; font-weight: 500; border-bottom: 2px solid transparent; }
.admin-tab.active { color: var(--text); border-bottom-color: var(--accent); }

/* Admin KPI cards */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpi-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
.kpi-value { font-size: 26px; font-weight: 700; color: var(--accent-light); }
.kpi-label { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; }
.admin-note { font-size: 12px; margin-top: 6px; }

/* Admin forms + tables */
.admin-form-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; margin-bottom: 24px; }
.admin-form-card h3 { margin: 0 0 16px; font-size: 16px; }
.admin-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 16px; align-items: end; }
.admin-form .modal-field { margin-bottom: 0; }
.admin-form .modal-consent { grid-column: 1 / -1; margin-bottom: 4px; }
.admin-form .modal-status { grid-column: 1 / -1; }
.admin-form .modal-actions { grid-column: 1 / -1; }

.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.admin-table th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.3px; color: var(--text-muted); padding: 8px 10px; border-bottom: 1px solid var(--border); }
.admin-table td { padding: 10px; border-bottom: 1px solid var(--border); }
.admin-table-actions { display: flex; gap: 6px; white-space: nowrap; }

/* Static SEO pages (generated by build-seo.js) */
.seo-page { max-width: 720px; margin: 0 auto; padding: 20px 20px 60px; }
.seo-breadcrumb { font-size: 12.5px; color: var(--text-muted); margin-bottom: 16px; }
.seo-breadcrumb a { color: var(--accent-light); }
.seo-page h1 { font-size: 30px; line-height: 1.25; margin: 0 0 16px; }
.seo-page h2 { font-size: 20px; margin: 36px 0 14px; }
.seo-page h3 { font-size: 16px; margin: 0 0 6px; }
.seo-intro { font-size: 15.5px; line-height: 1.7; color: var(--text-muted); }
.seo-cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0; }
.seo-offer { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; margin-bottom: 12px; }
.seo-offer-provider { font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); margin: 0 0 6px; }
.seo-offer-price { font-weight: 700; font-size: 17px; margin: 0 0 8px; }
.seo-offer ul, .seo-related ul { margin: 0; padding-left: 20px; font-size: 13.5px; color: var(--text-muted); line-height: 1.7; }
.seo-faq-item { padding: 14px 0; border-top: 1px solid var(--border); }
.seo-faq-item p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--text-muted); }
.seo-related a { color: var(--accent-light); }

/* ================== Bewegung ==================
   Alles, was neu erscheint, blendet kurz ein statt hart aufzuploppen. Die
   Dauern sind bewusst knapp (180–320 ms): lang genug, dass das Auge den
   Übergang mitbekommt, kurz genug, dass es sich nie nach Warten anfühlt.
   ============================================== */

@keyframes ec-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes ec-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Chatnachrichten kommen einzeln herein, wie in einem echten Gespräch. */
.msg { animation: ec-rise .26s cubic-bezier(.22,.61,.36,1) both; }
.quick-replies { animation: ec-rise .3s cubic-bezier(.22,.61,.36,1) both .06s; }
.recommendation { animation: ec-rise .32s cubic-bezier(.22,.61,.36,1) both .04s; }

/* Ergebniskarten gestaffelt, damit die Leiste nicht schlagartig voll ist. */
.offer-rail .offer-card { animation: ec-rise .3s cubic-bezier(.22,.61,.36,1) both; }
.offer-rail .offer-card:nth-child(1) { animation-delay: .02s; }
.offer-rail .offer-card:nth-child(2) { animation-delay: .06s; }
.offer-rail .offer-card:nth-child(3) { animation-delay: .10s; }
.offer-rail .offer-card:nth-child(4) { animation-delay: .14s; }
.offer-rail .offer-card:nth-child(n+5) { animation-delay: .18s; }

/* Seitenwechsel: der neue Inhalt blendet sanft ein. */
#app > * { animation: ec-fade .24s ease-out both; }

/* Bilder erscheinen erst, wenn sie geladen sind — kein Aufblitzen. */
.offer-img { opacity: 0; transition: opacity .3s ease; }
.offer-img.is-loaded { opacity: 1; }

/* Interaktive Flächen reagieren weich statt sprunghaft. */
.btn, .chip, .tile, .catalog-chip, .offer-card, .account-menu-item, .lang-item {
  transition: background .18s ease, border-color .18s ease, color .18s ease,
              transform .18s cubic-bezier(.22,.61,.36,1), box-shadow .18s ease, opacity .18s ease;
}
.btn:active, .chip:active, .catalog-chip:active { transform: scale(.97); }

/* Menüs klappen auf statt zu erscheinen. */
.account-menu:not([hidden]), .lang-menu:not([hidden]) {
  animation: ec-rise .18s cubic-bezier(.22,.61,.36,1) both;
}

/* Wer Bewegung reduziert haben will, bekommt genau das — überall. */
@media (prefers-reduced-motion: reduce) {
  .msg, .quick-replies, .recommendation, .offer-rail .offer-card,
  #app > *, .account-menu, .lang-menu, .chat-tiles-block {
    animation: none !important;
  }
  .offer-img { opacity: 1; transition: none; }
  * { scroll-behavior: auto !important; }
}

/* Footer — the affiliate disclosure lives here permanently, on every page.
   Commercial intent has to be recognisable without hunting for it (§ 5a UWG),
   and the Amazon programme requires its own wording. */
.site-footer {
  padding: 34px 20px 40px;
  font-size: 12px; color: var(--text-muted);
  border-top: 1px solid var(--border);
  background: var(--bg-elevated);
}
.footer-inner { max-width: 900px; margin: 0 auto; }

.footer-disclosure {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px 24px 20px; margin-bottom: 24px;
}
.footer-disclosure-title {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 16px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.7px;
  color: var(--accent-light);
}
/* Three short, scannable facts instead of one dense paragraph. */
.footer-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 18px 26px; margin: 0;
}
.footer-facts > div { min-width: 0; }
.footer-facts dt {
  font-size: 12.5px; font-weight: 600; color: var(--text);
  margin-bottom: 5px; padding-bottom: 5px;
  border-bottom: 1px solid var(--border);
}
.footer-facts dd { margin: 0; font-size: 12px; line-height: 1.6; color: var(--text-muted); }
.footer-more {
  display: inline-block; margin-top: 18px;
  font-size: 12.5px; color: var(--accent-light);
}
.footer-more:hover { text-decoration: underline; }

.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.footer-links { display: flex; flex-wrap: wrap; gap: 18px; }
.footer-links a { color: var(--text-muted); font-size: 12.5px; }
.footer-links a:hover { color: var(--accent-light); }
.footer-meta { margin: 0; font-size: 11.5px; line-height: 1.6; text-align: right; }

/* Help page sub-headings */
.help-item h4 { margin: 18px 0 6px; font-size: 14px; color: var(--text); }
.help-item h4:first-of-type { margin-top: 12px; }
.help-item code {
  font-size: 12px; background: var(--bg-elevated); padding: 2px 6px;
  border-radius: 4px; border: 1px solid var(--border);
}

@media (max-width: 760px) {
  /* --- Header: two rows on a phone. Brand + account on top (so "Anmelden"
     is always reachable), navigation as a scrollable row underneath. The
     old single-row layout pushed the actions off-screen. --- */
  .topbar {
    display: grid;
    grid-template-columns: 1fr auto auto;
    grid-template-areas: "brand actions theme" "nav nav nav";
    gap: 10px 8px;
    padding: 10px 14px calc(6px + env(safe-area-inset-bottom, 0px));
    padding-left: calc(14px + env(safe-area-inset-left, 0px));
    padding-right: calc(14px + env(safe-area-inset-right, 0px));
  }
  /* `overflow: hidden` gehört dazu, nicht nur `min-width: 0`.

     Ohne beides schrumpft die Spalte zwar auf null, der Schriftzug darin
     läuft aber weiter und legt sich über den Knopf daneben — das war das
     „easycomhpr" auf dem Bildschirmfoto. Die Spalte muss kürzen dürfen. */
  .brand { grid-area: brand; font-size: 16px; min-width: 0; overflow: hidden; }
  .brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .brand-mark { width: 26px; height: 26px; }
  .topbar-actions { grid-area: actions; margin: 0; min-width: 0; }
  .topbar-actions .btn { white-space: nowrap; min-height: 40px; }
  #theme-toggle { grid-area: theme; }
  .topnav {
    grid-area: nav; margin: 0;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; gap: 2px;
  }
  .topnav::-webkit-scrollbar { display: none; }
  .topnav a { padding: 7px 12px; font-size: 13.5px; white-space: nowrap; }
  #auth-btn { max-width: 120px; font-size: 13px; }
  .account-menu { min-width: 190px; }

  /* Unter 480 px weicht der Schriftzug, das Zeichen bleibt.

     Gerechnet für 390 px: Zeichen 26 + „Anmelden" ~86 + „Registrieren"
     ~104 + Nachtknopf 44 + Abstände und Rand ~50 sind schon 310. Mit dem
     Schriftzug (~90) wären es 400 — mehr, als das Gerät hat. Also weicht
     das, was man am ehesten entbehren kann: Das Zeichen daneben ist
     eindeutig und führt genauso zur Startseite. Kein Ersatzzeichen im
     Knopf, keine gebastelten Symbole — nur weniger. */
  @media (max-width: 480px) {
    .brand-name { display: none; }
    .brand { gap: 0; }
    .topbar-actions { gap: 6px; }
    .topbar-actions .btn { padding: 9px 11px; font-size: 13px; }
  }

  /* --- Page body --- */
  main {
    padding: 14px 16px 40px;
    padding-left: calc(16px + env(safe-area-inset-left, 0px));
    padding-right: calc(16px + env(safe-area-inset-right, 0px));
  }
  .filters-bar { grid-template-columns: 1fr 1fr; gap: 10px 12px; padding: 14px; }
  .hero h1 { font-size: 26px; }

  /* The chat is the product, so it gets the top of the screen and real
     height instead of being squeezed under a marketing headline. */
  .home-chat-hero { margin: 0 auto 26px; }
  .home-chat-hero .chat-shell { border-radius: 22px; }

  /* Auf dem Handy gibt es nur EINE Scrollfläche: die Seite.

     Vorher hatte die Chatkarte eine feste Höhe und einen eigenen
     Scrollbalken. Beim Wischen entschied dann der Finger, welcher der
     beiden Bereiche sich bewegt — mal der Chat, mal die Seite, und am
     Ende des inneren Bereichs blieb die Geste einfach hängen. Genau das
     fühlt sich stockend an.

     Jetzt wächst die Karte mit dem Gespräch, und gescrollt wird immer die
     Seite. Damit das Eingabefeld trotzdem erreichbar bleibt, klebt es am
     unteren Rand — dafür darf keiner der Vorfahren clippen. */
  .chat-shell,
  .home-chat-hero .chat-shell {
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
  }
  .chat-window {
    flex: none;
    overflow: visible;
    min-height: 52vh;
  }
  .chat-input-row {
    position: sticky;
    bottom: 0;
    z-index: 4;
    background: var(--card);
    border-radius: 0 0 22px 22px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -10px 20px -12px rgba(0, 0, 0, .35);
  }
  .home-chat-hero .chat-input-row {
    background: var(--bg-elevated);
  }
  .home-chat-hero .chat-window { padding: 16px; gap: 12px; }
  .home-chat-hero .chat-input-row { padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)); gap: 8px; }
  /* 16px keeps iOS from zooming the viewport when the field is focused. */
  .chat-input-row input { font-size: 16px; padding: 12px 14px; }

  .hero-lead { margin-bottom: 18px; }
  .hero-lead-sub { font-size: 13.5px; }
  .eyebrow-pill { margin-bottom: 12px; font-size: 11.5px; }

  .tiles { grid-template-columns: 1fr; gap: 10px; }
  .tile { padding: 15px 38px 15px 15px; gap: 13px; border-radius: 15px; }
  .tile-badge { width: 40px; height: 40px; border-radius: 12px; }
  .tile-icon { width: 21px; height: 21px; }
  .tile-title { font-size: 15px; }
  .tile-desc { font-size: 12.5px; }
  /* No hover on touch — show the affordance permanently instead. */
  .tile-arrow { opacity: 0.45; }
  /* Two compact tiles per row on a phone: all options stay in view without
     turning the chat into a long list. */
  .tiles-chat { grid-template-columns: 1fr 1fr; gap: 7px; }
  .tiles-chat .tile { padding: 10px; flex-direction: column; align-items: flex-start; gap: 8px; }
  .tiles-chat .tile-badge { width: 30px; height: 30px; border-radius: 9px; }
  .tiles-chat .tile-icon { width: 16px; height: 16px; }
  .tiles-chat .tile-title { font-size: 13px; line-height: 1.25; }
  .tiles-chat .tile-desc { display: none; }
  .tiles-chat .tile-arrow { display: none; }

  .offer-rail .offer-card { flex: 0 0 200px; width: 200px; }
  .biz-logo { width: 44px; height: 44px; }
  .biz-inline { gap: 11px; }

  /* --- Modals / auth --- */
  .modal-overlay { padding: 16px; align-items: flex-start; overflow-y: auto; }
  .modal-card { padding: 24px 20px 20px; max-height: none; margin: 12px 0; }
  .auth-card { padding: 28px 22px 22px; }
  .auth-title { font-size: 22px; }
  .auth-badge { width: 54px; height: 54px; border-radius: 17px; margin-bottom: 15px; }
  .auth-card .modal-field input { font-size: 16px; }
  .code-input-row { gap: 6px; }
  .code-box { width: 44px; height: 52px; font-size: 20px; }

  .site-footer { padding: 26px 16px 34px; }
  .footer-disclosure { padding: 18px 16px 16px; }
  .footer-facts { grid-template-columns: 1fr; gap: 14px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
  .footer-links { gap: 14px; }
  .footer-meta { text-align: left; }

  .lead-form { padding: 18px; }
  .lead-intro h2 { font-size: 22px; }
  .konto-shell, .lead-page { padding: 0; }
  .admin-tabs { overflow-x: auto; scrollbar-width: none; }
  .admin-tabs::-webkit-scrollbar { display: none; }
  .admin-tab { white-space: nowrap; }
}

/* Very narrow phones — keep the code boxes on one line. */
@media (max-width: 360px) {
  .code-box { width: 38px; height: 46px; font-size: 18px; }
  .code-input-row { gap: 5px; }
}

/* Händlertabelle auf den statischen Produktseiten (ohne JavaScript). */
.seo-shops { width: 100%; border-collapse: collapse; margin: 12px 0 10px; font-size: 14px; }
.seo-shops th, .seo-shops td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.seo-shops th { font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); font-weight: 600; }
.seo-shops tr.is-best td { background: var(--accent-soft); }
.seo-shops a { color: var(--accent-light); }
.seo-shops a:hover { text-decoration: underline; }
.seo-best {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px;
  background: var(--accent); color: #fff; padding: 2px 8px; border-radius: 999px;
}

/* ---------- Kaufratgeber je Produkttyp ---------- */
.guide-price { font-size: 15px; margin: 0 0 6px; }
.guide-price strong { font-size: 21px; }
.guide-check { font-size: 14px; gap: 8px; line-height: 1.6; }
/* Der häufigste Fehler steht abgesetzt — er ist der Teil, wegen dem
   jemand die Seite später weiterempfiehlt. */
.guide-mistake {
  margin: 20px 0 0; padding: 14px 16px;
  background: var(--accent-soft); border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.guide-mistake strong { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--accent-light); margin-bottom: 5px; }
.guide-mistake p { margin: 0; font-size: 14px; line-height: 1.6; }
.guide-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.guide-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.guide-links a {
  display: block; padding: 10px 13px; font-size: 13.5px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.guide-links a:hover { border-color: var(--accent); color: var(--accent-light); }
/* Preise aus dem täglichen Lauf sind belastbarer als die Startwerte —
   das darf man sehen. */
.product-note.is-live { color: var(--accent-light); }

/* ---------- Platzhalter beim Nachladen ---------- */
/* Graue Umrisse in der Größe der echten Karten: der Inhalt springt beim
   Eintreffen nicht, und die Wartezeit sieht nach Arbeit statt nach Fehler aus. */
.skeleton-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 0 14px 16px; overflow: hidden;
}
.sk-img { aspect-ratio: 4/3; margin: 0 -14px 14px; background: var(--bg-elevated); }
.sk-line { height: 11px; border-radius: 6px; background: var(--bg-elevated); margin-bottom: 9px; }
.sk-line.w70 { width: 70%; } .sk-line.w45 { width: 45%; } .sk-line.w60 { width: 60%; }
.skeleton-card > * { animation: sk-pulse 1.4s ease-in-out infinite; }
@keyframes sk-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .skeleton-card > * { animation: none; } }
/* Versionsnummer: leise, aber auffindbar — bei einer Fehlermeldung weiß man
   sofort, welcher Stand gemeint ist. */
.footer-version { font-variant-numeric: tabular-nums; opacity: .75; }
/* Amazon-Ausweg im Gespräch. Als Zweitangebot neben eigenen Treffern
   zurückhaltender, als Alleinantwort deutlicher. */
.chat-amazon { align-self: stretch; margin: 2px 0; padding: 13px 16px; }
.chat-amazon.is-secondary { background: transparent; border-style: dashed; }
.chat-amazon strong { font-size: 13.5px; }
.chat-amazon p { font-size: 12px; }

/* ---------- Admin-Statistik ---------- */
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 18px; }
.stat-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px;
  display: flex; flex-direction: column; gap: 4px;
}
.stat-value { font-size: 27px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-label { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
.stat-block { margin-top: 26px; }
.stat-block h3 { font-size: 14px; margin: 0 0 10px; }
.stat-block .admin-table td { font-variant-numeric: tabular-nums; }
.stat-block .admin-table td:first-child { font-variant-numeric: normal; word-break: break-word; }
/* Shop-Links ohne Preisangabe — solange kein Feed geprüfte Preise liefert. */
.shop-links { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.shop-links .shop-row { grid-template-columns: 1fr auto auto; }

/* ---------------------------------------------------------------------------
   Angebote aus dem Händlerfeed
   ---------------------------------------------------------------------------
   Eine Zeile je Artikel, nicht das übliche Kachelraster: bei einem
   Preisvergleich will man Preise untereinander lesen können, und
   nebeneinanderliegende Kacheln erzwingen genau das Gegenteil.

   Die ganze Zeile ist der Link. Nur den Preis oder nur den Namen klickbar
   zu machen ist auf dem Handy eine Zumutung.
   --------------------------------------------------------------------------- */
.feed-offers { margin-top: 28px; }

.feed-stand { font-size: 12px; margin: -6px 0 12px; }

.feed-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
}

.feed-item + .feed-item { border-top: 1px solid var(--border); }

.feed-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  text-decoration: none;
  color: inherit;
  /* Kein filter und kein transform hier: beide würden aus dem Link den
     Bezugsrahmen für eigene absolut positionierte Kinder machen. Genau
     daran ist die Produktkachel schon einmal unklickbar geworden. */
  transition: background-color .15s ease;
}

.feed-link:hover,
.feed-link:focus-visible { background: var(--surface-2); }

.feed-img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  flex: 0 0 56px;
  background: #fff;
  border-radius: 8px;
}

.feed-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }

.feed-name {
  font-size: 14px;
  line-height: 1.35;
  /* Feed-Namen sind oft absurd lang („… Herren Laufschuhe weiß Laufschuh
     mit Dämpfung Sneaker Sportschuh"). Zwei Zeilen reichen. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.feed-meta { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.feed-price { font-size: 16px; color: var(--accent-light); white-space: nowrap; }
.feed-uvp { font-size: 12px; color: var(--muted); text-decoration: line-through; }
.feed-shop { font-size: 12px; color: var(--muted); }

.feed-note { font-size: 11px; margin-top: 10px; }

/* Der günstigste steht oben und darf das auch zeigen. */
.feed-item:first-child .feed-price::after {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--accent-light);
  vertical-align: middle;
}

@media (max-width: 560px) {
  .feed-link { gap: 10px; padding: 10px 11px; }
  .feed-img { width: 46px; height: 46px; flex-basis: 46px; }
  .feed-name { font-size: 13px; }
}

/* Die ganze Kachel bleibt klickbar — auch bei den Feed-Artikeln.

   Der Hover-Effekt der Karte nutzt transform. Das ist unkritisch, solange
   transform auf der KARTE steht und nicht auf dem Link: der Link braucht
   die Karte als Bezugsrahmen für sein ::after. Stünde transform auf
   .offer-cta, würde das Klickfeld auf den Knopf zusammenfallen — genau
   dieser Fehler hat die Kacheln schon einmal totgestellt. */
.offer-card .offer-cta { position: static; }
.offer-card { cursor: pointer; }
.offer-card .offer-save { position: relative; z-index: 2; }