/* =========================================================
   Gutscheinhase – Design-System & Layout
   ========================================================= */

:root {
  /* Farben */
  --color-bg:           #FAFAF7;
  --color-surface:      #FFFFFF;
  --color-ink:          #1A1A1A;
  --color-ink-soft:     #4A4A4A;
  --color-ink-mute:     #7A7A7A;
  --color-line:         #EAE7E0;
  --color-line-strong:  #D6D2C8;
  --color-accent:       #E76F2C;     /* Karotten-Orange */
  --color-accent-dark:  #C75A1E;
  --color-accent-soft:  #FCEFE5;
  --color-success:      #2E8B57;
  --color-success-soft: #E6F3EC;
  --color-warning:      #B8860B;
  --color-warning-soft: #FBF3DC;
  --color-danger:       #B53A2B;
  --color-info:         #2C6BB0;
  --color-info-soft:    #E6EEF8;

  /* Typografie */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Inter", system-ui, -apple-system, sans-serif;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Radien & Schatten */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --shadow-sm: 0 1px 2px rgba(20,20,20,.05);
  --shadow-md: 0 4px 14px rgba(20,20,20,.06);
  --shadow-lg: 0 12px 32px rgba(20,20,20,.08);

  /* Breakpoints (zur Doku) */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  --container: 1180px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-ink);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
a { color: var(--color-ink); text-decoration: none; }
a:hover { color: var(--color-accent-dark); }
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; line-height: 1.2; letter-spacing: -0.01em; }
h1 { font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 700; }
h2 { font-size: clamp(1.4rem, 2.5vw, 1.75rem); font-weight: 700; }
h3 { font-size: 1.15rem; font-weight: 600; }
p  { margin: 0 0 var(--space-4); }
ul { padding-left: 1.2em; margin: 0 0 var(--space-4); }

/* ---------- Layout-Helfer ---------- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-5); }
.section { padding: var(--space-8) 0; }
.section--tight { padding: var(--space-6) 0; }
.muted { color: var(--color-ink-mute); }
.small { font-size: .875rem; }
.tiny { font-size: .75rem; }
.center { text-align: center; }
.stack > * + * { margin-top: var(--space-4); }
.row { display: flex; gap: var(--space-4); align-items: center; flex-wrap: wrap; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--color-line);
}
.site-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-5);
  align-items: center;
  padding: var(--space-4) 0;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em;
}
.brand__mark {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--color-accent);
  color: #fff;
  display: grid; place-items: center;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.12);
}
.brand__mark svg { width: 22px; height: 22px; }

/* Brand mit Bilddatei (horizontales Logo) */
.brand__img { display: block; height: 60px; width: auto; }
@media (max-width: 640px) { .brand__img { height: 46px; } }

/* Brand-Mark als PNG (transparent) – z. B. Footer */
.brand__mark-img {
  width: 36px; height: 36px; object-fit: contain;
  background: rgba(255,255,255,.06);
  border-radius: 10px;
  padding: 4px;
}

.search {
  position: relative;
  max-width: 520px;
  margin: 0 auto;
  width: 100%;
}
.search input {
  width: 100%;
  height: 44px;
  border: 1px solid var(--color-line-strong);
  background: var(--color-surface);
  padding: 0 var(--space-5) 0 42px;
  border-radius: 999px;
  font-size: .95rem;
  transition: border-color .15s, box-shadow .15s;
}
.search input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 4px var(--color-accent-soft);
}
.search__icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--color-ink-mute);
}

/* Such-Dropdown (Live-Suche) */
.search--enhanced { position: relative; }
.search-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--color-line-strong);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity .12s, transform .12s;
  z-index: 100;
  max-height: 60vh;
  overflow-y: auto;
}
.search-dropdown.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.search-result {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-line);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: background .1s;
}
.search-result:last-child { border-bottom: 0; }
.search-result:hover, .search-result.is-active { background: var(--color-accent-soft); }
.search-result__type {
  grid-row: 1 / span 2;
  align-self: center;
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  background: var(--color-line);
  color: var(--color-ink-soft);
  padding: 3px 8px;
  border-radius: 6px;
  height: fit-content;
}
.search-result:hover .search-result__type,
.search-result.is-active .search-result__type {
  background: #fff;
  color: var(--color-accent-dark);
}
.search-result__name { font-weight: 600; font-size: .95rem; }
.search-result__sub { font-size: .8rem; color: var(--color-ink-mute); }
.search-empty {
  padding: 14px;
  color: var(--color-ink-mute);
  font-size: .9rem;
  text-align: center;
}
.search-empty a {
  color: var(--color-accent-dark);
  text-decoration: underline;
}

.nav { display: flex; gap: var(--space-5); align-items: center; }
.nav a { font-weight: 500; font-size: .95rem; color: var(--color-ink-soft); }
.nav a:hover { color: var(--color-ink); }

/* Sekundärnav */
.subnav { border-bottom: 1px solid var(--color-line); background: #fff; }
.subnav__inner { display: flex; gap: var(--space-5); padding: var(--space-3) 0; overflow-x: auto; }
.subnav a {
  font-size: .85rem; font-weight: 500; white-space: nowrap;
  color: var(--color-ink-soft);
}
.subnav a:hover { color: var(--color-accent-dark); }

/* =========================================================
   HERO (Startseite)
   ========================================================= */
.hero {
  padding: var(--space-9) 0 var(--space-8);
  background:
    radial-gradient(900px 400px at 80% -10%, var(--color-accent-soft), transparent 60%),
    radial-gradient(700px 400px at 0% 20%, #F2EDE3, transparent 60%);
}
.hero__grid {
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: var(--space-8); align-items: center;
}
@media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; } }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--color-line-strong);
  padding: 6px 12px; border-radius: 999px;
  font-size: .8rem; font-weight: 600; color: var(--color-ink-soft);
}
.hero__eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-success); }
.hero h1 { margin-top: var(--space-4); }
.hero p.lead { font-size: 1.15rem; color: var(--color-ink-soft); max-width: 560px; }

.hero__search {
  margin-top: var(--space-5);
  display: flex; gap: var(--space-3); max-width: 560px;
}
.hero__search input {
  flex: 1; height: 52px;
  border: 1px solid var(--color-line-strong); background: #fff;
  padding: 0 var(--space-5); border-radius: 12px;
  font-size: 1rem;
}
.hero__search input:focus {
  outline: none; border-color: var(--color-accent);
  box-shadow: 0 0 0 4px var(--color-accent-soft);
}

/* Hero-Illustration (Bild) */
.hero__art {
  aspect-ratio: 1/1;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 30% 30%, #FFD4B8 0%, transparent 65%),
    linear-gradient(135deg, #FCEFE5 0%, #F4E7D6 100%);
  border: 1px solid var(--color-line);
  position: relative;
  overflow: hidden;
  display: grid; place-items: center;
}
.hero__art img {
  width: 92%; height: auto;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,.10));
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  height: 44px; padding: 0 var(--space-5);
  border-radius: 10px;
  font-weight: 600; font-size: .95rem;
  transition: background .15s, transform .05s, box-shadow .15s;
  cursor: pointer;
}
.btn--primary { background: var(--color-accent); color: #fff; }
.btn--primary:hover { background: var(--color-accent-dark); }
.btn--primary:active { transform: translateY(1px); }
.btn--ghost {
  background: #fff; color: var(--color-ink);
  border: 1px solid var(--color-line-strong);
}
.btn--ghost:hover { border-color: var(--color-ink); }
.btn--block { width: 100%; }
.btn--lg { height: 52px; font-size: 1rem; padding: 0 var(--space-6); }

/* =========================================================
   TRUST-SIGNALE (3 Spalten)
   ========================================================= */
.trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
@media (max-width: 768px) { .trust { grid-template-columns: 1fr; } }
.trust__item {
  background: #fff; border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.trust__icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--color-accent-soft); color: var(--color-accent);
  display: grid; place-items: center;
  margin-bottom: var(--space-3);
}
.trust__item h3 { margin-bottom: 6px; }
.trust__item p { margin: 0; color: var(--color-ink-soft); font-size: .95rem; }

/* =========================================================
   SHOP-GRID
   ========================================================= */
.shop-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-4); }
@media (max-width: 1024px) { .shop-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px)  { .shop-grid { grid-template-columns: repeat(2, 1fr); } }

.shop-card {
  background: #fff; border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  text-align: center;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.shop-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.shop-card__logo {
  width: 56px; height: 56px;
  border-radius: 12px;
  margin: 0 auto var(--space-3);
  display: grid; place-items: center;
  font-weight: 700; color: #fff; font-size: 1.4rem;
  letter-spacing: -.02em;
}
.shop-card__name { font-weight: 600; font-size: .95rem; }
.shop-card__count { font-size: .8rem; color: var(--color-ink-mute); margin-top: 2px; }

/* Beispielfarben für Logos */
.logo--zalando { background: #1B1B1B; }
.logo--aboutyou { background: #FF5C00; }
.logo--otto { background: #DA0008; }
.logo--mediamarkt { background: #DF0000; }
.logo--lidl { background: #003D8F; }
.logo--ikea { background: #0058A3; }
.logo--hm { background: #E50010; }
.logo--saturn { background: #002C76; }
.logo--douglas { background: #1B1B1B; }
.logo--apple { background: #111; }
.logo--asos { background: #111; }
.logo--esprit { background: #111; }
.logo--gozoox    { background: #3F3F46; } /* Anthrazit – Premium-Display-Look */
.logo--yosepower { background: #15803D; } /* Forest Green – E-Mobility */
.logo--navimow    { background: #14532D; } /* Tiefes Garten-Grün – Mähroboter */
.logo--bergfreunde { background: #1B8A8A; } /* Outdoor-Teal */
.logo--bonprix    { background: #E70026; } /* Bonprix-Rot */
.logo--lampenwelt { background: #F59E0B; color: #1A1A1A; } /* Lampen-Bernstein, dunkler Text */
.logo--iallpowers  { background: #0EA5E9; } /* Sky – Energie/Tech */
.logo--emp         { background: #1A1A1A; } /* Schwarz – Rock/Merchandise */
.logo--kastnerohler { background: #7C2D12; } /* Edel-Braun – Traditionskaufhaus */
.logo--klarmobil   { background: #FFD600; color: #1A1A1A; } /* Klarmobil-Gelb */
.logo--mactrade    { background: #4A4A4A; } /* Schlicht-Grau – Apple-Vibe */
.logo--stylevana   { background: #EC4899; } /* Pink – Beauty */
.logo--timeshop24  { background: #1E3A8A; } /* Dunkelblau – Uhren */
.logo--marleyspoon { background: #5C4029; } /* Erdiges Braun – Kochboxen */
.logo--druckdichdrauf { background: #D03737; }
.logo--iscooter       { background: #F7941D; }
.logo--moebro         { background: #6B5C3E; }
.logo--cecil          { background: #6B5847; }
.logo--handballstore  { background: #003770; }
.logo--germens        { background: #2C2C2C; }
.logo--tischwelt      { background: #6E2934; }
.logo--binubeauty     { background: #C2185B; }
.logo--magix          { background: #E40521; }
.logo--tyrigo         { background: #1F2937; }
.logo--kraftgras      { background: #4A7C3A; }
.logo--druckerpatronen{ background: #002C76; }
.logo--blumenversand  { background: #C71585; }
.logo--imou           { background: #00A0E9; }
.logo--medicross      { background: #00897B; }
.logo--officediscount { background: #FF6F00; }
.logo--banggood          { background: #FF6900; } /* Banggood-Orange */
.logo--yoursurprise      { background: #FF6B35; } /* Geschenk-Orange */
.logo--tenstickers       { background: #DB2777; } /* Wandtattoo-Pink */
.logo--nostalux          { background: #B45309; } /* Lampen-Gold */
.logo--molecaten         { background: #166534; } /* Camping-Grün */
.logo--bademantelparadies{ background: #2563EB; } /* Bademantel-Blau */
.logo--intergard         { background: #2D5016; } /* Garten-Forest */
.logo--newrebels         { background: #1F2937; } /* Mode-Schwarz */
.logo--sabinastore       { background: #7C3AED; } /* Beauty-Violet */
.logo--roia              { background: #6B21A8; } /* Lifestyle-Lila */
.logo--vevor             { background: #E11D48; } /* Vevor-Rot */
.logo--regencychess      { background: #5C4033; } /* Schach-Braun */
.logo--koffer            { background: #0EA5E9; } /* Reise-Cyan */
.logo--vorteilshop       { background: #DC2626; } /* Sale-Rot */
.logo--aosom             { background: #A16207; } /* Möbel-Tabac */
.logo--livingcrafts      { background: #16A34A; } /* Bio-Grün */
.logo--modernehausfrau   { background: #8B5CF6; } /* Haushalts-Lila */
.logo--kinguin           { background: #6D28D9; } /* Gaming-Lila */
.logo--assmann           { background: #1E40AF; } /* Büro-Blau */
.logo--kaminofen         { background: #C2410C; } /* Backstein-Rot */
.logo--purebeauty        { background: #DB2777; } /* Pure Pink */
.logo--humanic           { background: #18181B; } /* Schuh-Schwarz */
.logo--anthbot           { background: #475569; } /* Robot-Slate */
.logo--joola             { background: #EA580C; } /* TT-Orange */
.logo--piercingline      { background: #C026D3; } /* Magenta */

/* Shop-Header-Logo als echtes Bild (statt Initial-Box) */
.shop-header__logo--img {
  background: #fff !important;
  padding: 8px;
  border: 1px solid var(--color-line);
}
.shop-header__logo--img img {
  max-width: 100%; max-height: 100%; object-fit: contain;
}

/* =========================================================
   KATEGORIE-CHIPS
   ========================================================= */
.chip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
@media (max-width: 768px) { .chip-grid { grid-template-columns: repeat(2, 1fr); } }
.chip-card {
  display: flex; align-items: center; gap: var(--space-3);
  background: #fff; border: 1px solid var(--color-line);
  padding: var(--space-4); border-radius: var(--radius-md);
  transition: border-color .15s;
}
.chip-card:hover { border-color: var(--color-accent); }
.chip-card__icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--color-accent-soft); color: var(--color-accent);
  display: grid; place-items: center; flex-shrink: 0;
}
.chip-card__name { font-weight: 600; font-size: .95rem; }
.chip-card__count { font-size: .8rem; color: var(--color-ink-mute); }

/* =========================================================
   BREADCRUMB
   ========================================================= */
.crumbs {
  font-size: .85rem; color: var(--color-ink-mute);
  padding: var(--space-4) 0 0;
}
.crumbs a { color: var(--color-ink-mute); }
.crumbs a:hover { color: var(--color-accent-dark); }
.crumbs__sep { margin: 0 6px; opacity: .6; }

/* =========================================================
   SHOPSEITE HEADER
   ========================================================= */
.shop-header {
  padding: var(--space-6) 0 var(--space-5);
}
.shop-header__inner {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: var(--space-5); align-items: center;
}
@media (max-width: 768px) { .shop-header__inner { grid-template-columns: auto 1fr; } }
.shop-header__logo {
  width: 88px; height: 88px;
  border-radius: 18px;
  display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: 2rem;
  box-shadow: var(--shadow-sm);
}
.shop-header__title h1 { margin: 0 0 6px; }
.shop-header__title p  { margin: 0; color: var(--color-ink-soft); }
.shop-header__meta {
  display: flex; gap: var(--space-4); flex-wrap: wrap;
  font-size: .85rem; color: var(--color-ink-mute);
  margin-top: var(--space-3);
}
.shop-header__meta strong { color: var(--color-ink); font-weight: 600; }
.shop-header__stats {
  text-align: right;
  background: #fff; border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  min-width: 180px;
}
@media (max-width: 768px) { .shop-header__stats { display: none; } }
.shop-header__stats .num {
  font-size: 1.8rem; font-weight: 700; color: var(--color-accent);
  line-height: 1;
}

/* =========================================================
   ANSWER BOX (KI-SEO)
   ========================================================= */
.answer {
  background: var(--color-info-soft);
  border: 1px solid #BFD3EA;
  border-left: 4px solid var(--color-info);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin: var(--space-5) 0;
}
.answer h3 {
  font-size: 1rem; font-weight: 700;
  margin-bottom: 6px; color: var(--color-info);
  display: flex; align-items: center; gap: 8px;
}
.answer p { margin: 0; color: var(--color-ink); }

/* =========================================================
   FILTER LEISTE
   ========================================================= */
.filters {
  display: flex; gap: var(--space-2); flex-wrap: wrap;
  padding: var(--space-4) 0;
}
.filter-pill {
  background: #fff; border: 1px solid var(--color-line-strong);
  border-radius: 999px;
  padding: 8px 14px; font-size: .85rem; font-weight: 500;
  color: var(--color-ink-soft);
  transition: all .15s;
}
.filter-pill:hover { border-color: var(--color-ink); color: var(--color-ink); }
.filter-pill.is-active {
  background: var(--color-ink); color: #fff; border-color: var(--color-ink);
}
.filter-pill .count {
  margin-left: 6px; opacity: .7; font-weight: 400;
}

/* =========================================================
   COUPON CARD
   ========================================================= */
.coupon-list { display: grid; gap: var(--space-4); }
.coupon {
  background: #fff; border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: grid; grid-template-columns: 80px 1fr 220px;
  gap: var(--space-5);
  align-items: center;
  transition: border-color .15s, box-shadow .15s;
}
.coupon:hover { border-color: var(--color-accent); box-shadow: var(--shadow-md); }
@media (max-width: 768px) {
  .coupon { grid-template-columns: 1fr; }
  .coupon__action { width: 100%; }
}
.coupon__discount {
  width: 80px; height: 80px;
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
  color: var(--color-accent);
  display: grid; place-items: center;
  font-weight: 700;
  text-align: center; line-height: 1;
}
.coupon__discount .pct { font-size: 1.6rem; }
.coupon__discount .label { font-size: .7rem; margin-top: 4px; font-weight: 600; letter-spacing: .04em; }

.coupon__body { min-width: 0; }
.coupon__badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.coupon__title { font-size: 1.05rem; font-weight: 600; margin: 0 0 4px; }
.coupon__sub { font-size: .88rem; color: var(--color-ink-soft); margin: 0 0 6px; }
.coupon__meta { display: flex; gap: var(--space-4); flex-wrap: wrap; font-size: .8rem; color: var(--color-ink-mute); }
.coupon__meta strong { color: var(--color-ink-soft); font-weight: 600; }

.coupon__action {
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
}
.coupon__feedback { text-align: center; font-size: .75rem; color: var(--color-ink-mute); }
.coupon__feedback .pct { color: var(--color-success); font-weight: 700; }

/* Reveal-Animation */
.code-btn {
  position: relative;
  height: 52px;
  border: 2px dashed var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-accent-dark);
  border-radius: 10px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  overflow: hidden;
  transition: background .15s;
}
.code-btn:hover { background: #FBE2D2; }
.code-btn__hidden { transition: opacity .2s; }
.code-btn__visible {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-ink); color: #fff;
  opacity: 0; pointer-events: none;
  transition: opacity .2s;
  letter-spacing: .1em;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.code-btn.is-revealed .code-btn__visible { opacity: 1; pointer-events: auto; }
.code-btn.is-revealed .code-btn__hidden { opacity: 0; }

/* Bedingungen-Accordion */
.conditions {
  margin-top: var(--space-3); border-top: 1px dashed var(--color-line);
  padding-top: var(--space-3);
}
.conditions summary {
  cursor: pointer; font-size: .85rem; color: var(--color-ink-soft);
  list-style: none; display: flex; align-items: center; gap: 6px;
}
.conditions summary::-webkit-details-marker { display: none; }
.conditions summary::after { content: "▾"; transition: transform .15s; }
.conditions[open] summary::after { transform: rotate(180deg); }
.conditions ul { margin-top: var(--space-3); }

/* =========================================================
   BADGES
   ========================================================= */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px;
  font-size: .72rem;
  border-radius: 6px;
  font-weight: 600;
  letter-spacing: .02em;
}
.badge--verified { background: var(--color-success-soft); color: var(--color-success); }
.badge--soon { background: var(--color-warning-soft); color: var(--color-warning); }
.badge--deal { background: var(--color-info-soft); color: var(--color-info); }
.badge--exclusive { background: #F1E6FA; color: #6D32A8; }
.badge--shipping { background: #E6F4F1; color: #1F7A6B; }
.badge--new { background: var(--color-accent-soft); color: var(--color-accent-dark); }

/* =========================================================
   TOAST
   ========================================================= */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--color-ink); color: #fff;
  padding: 12px 20px; border-radius: 10px;
  font-size: .9rem; font-weight: 500;
  opacity: 0; pointer-events: none;
  transition: all .25s ease;
  box-shadow: var(--shadow-lg);
  z-index: 200;
  display: flex; align-items: center; gap: 8px;
}
.toast.is-shown { opacity: 1; transform: translateX(-50%) translateY(0); }

/* =========================================================
   CONTENT-BEREICH (Shop-Beschreibung etc.)
   ========================================================= */
.prose h2 { margin: var(--space-7) 0 var(--space-3); }
.prose h3 { margin: var(--space-5) 0 var(--space-2); }
.prose p { color: var(--color-ink-soft); }
.prose ul li { margin-bottom: 6px; color: var(--color-ink-soft); }

/* Legal Pages (Impressum, Datenschutz, Affiliate-Hinweis) */
.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--space-7) 0 var(--space-8);
}
.legal h1 { margin-bottom: var(--space-2); }
.legal .updated { color: var(--color-ink-mute); font-size: .9rem; margin-bottom: var(--space-6); }
.legal h2 { margin: var(--space-7) 0 var(--space-3); }
.legal h3 { margin: var(--space-5) 0 var(--space-2); font-size: 1rem; }
.legal p, .legal li { color: var(--color-ink-soft); }
.legal address { font-style: normal; color: var(--color-ink); line-height: 1.7; }
.legal a { color: var(--color-accent-dark); text-decoration: underline; }

.fact-table {
  width: 100%; border-collapse: collapse;
  background: #fff; border: 1px solid var(--color-line);
  border-radius: var(--radius-md); overflow: hidden;
  margin: var(--space-4) 0;
}
.fact-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-line);
  font-size: .92rem;
}
.fact-table tr:last-child td { border-bottom: 0; }
.fact-table td:first-child { color: var(--color-ink-mute); width: 40%; }
.fact-table td:last-child { font-weight: 600; }

/* =========================================================
   FAQ
   ========================================================= */
.faq { display: grid; gap: var(--space-3); }
.faq details {
  background: #fff; border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
}
.faq summary {
  cursor: pointer; font-weight: 600; font-size: 1rem;
  list-style: none; display: flex; justify-content: space-between; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; font-weight: 400; color: var(--color-ink-mute); }
.faq details[open] summary::after { content: "–"; }
.faq details[open] summary { margin-bottom: var(--space-3); }
.faq p { color: var(--color-ink-soft); margin: 0; }

/* =========================================================
   SAISONALE HERO
   ========================================================= */
.season-hero {
  background:
    radial-gradient(800px 400px at 20% 0%, rgba(231,111,44,.25), transparent 60%),
    linear-gradient(135deg, #1A1A1A 0%, #2C1810 100%);
  color: #fff;
  padding: var(--space-9) 0;
  position: relative;
  overflow: hidden;
}
.season-hero__inner {
  display: grid; grid-template-columns: 1.3fr 1fr;
  gap: var(--space-7); align-items: center;
}
@media (max-width: 900px) { .season-hero__inner { grid-template-columns: 1fr; } }
.season-hero h1 { color: #fff; font-size: clamp(2.4rem, 5vw, 3.5rem); }
.season-hero .eyebrow {
  display: inline-block;
  background: var(--color-accent); color: #fff;
  padding: 4px 12px; border-radius: 999px;
  font-size: .8rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.season-hero p { color: #D4CFC6; font-size: 1.1rem; max-width: 540px; }
.season-hero__art {
  aspect-ratio: 1/1; max-width: 420px; margin-left: auto;
  border-radius: var(--radius-xl);
  overflow: hidden;
  position: relative;
  background: #0a0a0a;
}
.season-hero__art img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

.countdown {
  display: flex; gap: var(--space-3); margin-top: var(--space-5);
}
.countdown__box {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  min-width: 70px; text-align: center;
}
.countdown__num { font-size: 1.6rem; font-weight: 700; line-height: 1; }
.countdown__label { font-size: .7rem; opacity: .7; text-transform: uppercase; letter-spacing: .08em; margin-top: 4px; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  margin-top: var(--space-9);
  background: #1A1A1A;
  color: #C8C4BB;
  padding: var(--space-8) 0 var(--space-5);
}
.site-footer a { color: #C8C4BB; }
.site-footer a:hover { color: #fff; }
.footer-grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--space-6);
  padding-bottom: var(--space-7);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
@media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-grid h4 {
  color: #fff; font-size: .85rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: var(--space-3);
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: var(--space-2); font-size: .9rem; }
.footer-brand p { color: #8A8680; font-size: .9rem; max-width: 320px; }
.footer-legal {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: var(--space-5); font-size: .85rem; color: #8A8680;
}
@media (max-width: 640px) { .footer-legal { flex-direction: column; gap: var(--space-3); text-align: center; } }

/* =========================================================
   PROTO-INFO (nur Prototyp-Navigation)
   ========================================================= */
.proto-info {
  background: #FFF8EC;
  border-bottom: 1px solid #F0E2C0;
  padding: 10px 0;
  font-size: .85rem;
  color: #7A5C0D;
}
.proto-info .container { display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.proto-info a { color: #7A5C0D; font-weight: 600; }
.proto-info a:hover { color: var(--color-accent-dark); }