/**
 * testmonster.de — Zentrales Stylesheet
 * Einbinden via: <link rel="stylesheet" href="/css/style.css">
 *
 * Design-Konzept:
 *  - Helles, aufgeräumtes Layout (Vertrauen, Seriosität)
 *  - Marke "testmonster": freundlich, kompetent — kein Horror
 *  - Bewertungen stehen klar im Mittelpunkt (prominente Sterne, Score-Badges)
 *  - Primärfarbe: vertrauensvolles Indigo/Blau
 *  - Akzent/CTA: warmes Koralle-Orange
 *  - Bewertungs-Gold für Sterne
 *
 * Struktur:
 *  1. Reset & CSS-Variablen
 *  2. Basis-Typografie & Links
 *  3. Header / Navigation
 *  4. Layout & Container
 *  5. Breadcrumb
 *  6. Footer
 *  7. Badges & Labels
 *  8. Suchleiste / Suggest-Dropdown
 *  9. Sterne-Bewertungen (zentral)
 * 10. Sortier-Bar & Filter (Suche)
 * 11. Produkt-Karte (Suchergebnisliste)
 * 12. Produkt-Detailseite
 * 13. Startseite
 * 14. Hilfselemente
 * 15. Responsive
 */

/* ── 1. Reset & CSS-Variablen ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* Hintergründe (hell) */
  --bg:       #f6f7fb;
  --bg2:      #ffffff;
  --bg3:      #eef1f7;
  --bg4:      #e4e8f0;

  /* Rahmen */
  --border:   #e2e6ee;
  --border2:  #d4d9e3;

  /* Primär — vertrauensvolles Indigo */
  --primary:      #4f46e5;
  --primary2:     #6366f1;
  --primary-dim:  #4338ca;
  --primary-soft: #eef0fe;
  --primary-rgb:  79,70,229;

  /* Akzent / CTA — warmes Koralle */
  --accent:      #ff6b4a;
  --accent2:     #ff8466;
  --accent-dim:  #e8512f;
  --accent-rgb:  255,107,74;

  /* Bewertungs-Gold */
  --star:     #f5a623;
  --star-dim: #d98c0a;

  /* Status */
  --green:     #16a34a;
  --green-bg:  rgba(22,163,74,.1);
  --red:       #dc2626;
  --red-bg:    rgba(220,38,38,.08);

  /* Text */
  --text:  #1b2030;
  --text2: #5a6477;
  --text3: #95a0b3;

  /* Radien / Schatten / Übergänge */
  --radius:    10px;
  --radius-lg: 16px;
  --radius-sm: 7px;
  --shadow:    0 2px 10px rgba(27,32,48,.06);
  --shadow-md: 0 6px 22px rgba(27,32,48,.09);
  --shadow-lg: 0 14px 40px rgba(27,32,48,.12);
  --transition:.2s ease;
}

/* ── 2. Basis-Typografie & Links ─────────────────────────────────────────── */
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3{line-height:1.25;color:var(--text);font-weight:700}

/* ── 3. Header / Navigation ──────────────────────────────────────────────── */
.header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  padding:0 20px;
}
.header-inner{
  max-width:1200px;margin:0 auto;
  display:flex;align-items:center;gap:18px;height:66px;
}
.logo{
  display:flex;align-items:center;gap:9px;
  font-size:1.3rem;font-weight:800;
  color:var(--text);white-space:nowrap;letter-spacing:-.5px;
}
.logo-mark{
  width:34px;height:34px;flex:0 0 auto;
  border-radius:9px;
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 10px rgba(var(--primary-rgb),.35);
}
.logo b{color:var(--primary);font-weight:800}
.logo span{color:var(--text3);font-weight:600;font-size:.95rem}

/* Wiederverwendbares Monster-Maskottchen */
.tm-badge{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  border-radius:10px;background:linear-gradient(135deg,var(--primary),var(--primary2));
  box-shadow:0 3px 10px rgba(var(--primary-rgb),.30);
}
.tm-mascot{color:var(--primary);vertical-align:middle}
.section-title .tm-badge{vertical-align:middle;margin-right:10px}

.header-nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.header-nav a{
  font-size:.85rem;color:var(--text2);padding:7px 13px;border-radius:var(--radius-sm);font-weight:500;
  transition:color var(--transition),background var(--transition);white-space:nowrap;
}
.header-nav a:hover{color:var(--primary);background:var(--primary-soft)}

/* ── 4. Layout & Container ───────────────────────────────────────────────── */
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.container-wide{max-width:1280px;margin:0 auto;padding:0 20px}
.page{padding:28px 0 64px}

.section-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  margin-bottom:18px;gap:12px;flex-wrap:wrap;
}
.section-title{font-size:1.4rem;font-weight:800;letter-spacing:-.4px}
.section-link{
  font-size:.85rem;color:var(--primary);font-weight:600;white-space:nowrap;
  transition:color var(--transition);
}
.section-link:hover{color:var(--primary-dim)}

/* ── 5. Breadcrumb ───────────────────────────────────────────────────────── */
.breadcrumb{
  display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  margin-bottom:22px;font-size:.82rem;color:var(--text3);
}
.breadcrumb a{color:var(--text2);transition:color var(--transition)}
.breadcrumb a:hover{color:var(--primary)}
.breadcrumb-sep{color:var(--text3)}

/* ── 6. Footer ───────────────────────────────────────────────────────────── */
.footer{
  background:var(--bg2);border-top:1px solid var(--border);
  margin-top:40px;padding:44px 20px 0;
}
.footer-inner{max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px;}
.footer-brand .logo{margin-bottom:12px}
.footer-brand p{font-size:.85rem;color:var(--text2);max-width:300px}
.footer-col h4{font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text3);margin-bottom:14px;font-weight:700}
.footer-col a{display:block;font-size:.88rem;color:var(--text2);padding:5px 0;
  transition:color var(--transition)}
.footer-col a:hover{color:var(--primary)}
.footer-bottom{
  max-width:1200px;margin:32px auto 0;padding:18px 0;
  border-top:1px solid var(--border);
  display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;justify-content:space-between;
  font-size:.8rem;color:var(--text3);
}
.footer-bottom a{color:var(--text2)}
.footer-bottom a:hover{color:var(--primary)}

/* ── 7. Badges & Labels ──────────────────────────────────────────────────── */
.badge{
  display:inline-flex;align-items:center;gap:4px;
  font-size:.7rem;font-weight:600;padding:3px 9px;border-radius:999px;
  white-space:nowrap;
}
.badge-kat{background:var(--primary-soft);color:var(--primary)}
.badge-ean{background:var(--bg3);color:var(--text2);font-family:'SF Mono',monospace}
.badge-eek{color:#fff;font-weight:700}
.badge-ok{background:var(--green-bg);color:var(--green)}
.badge-no{background:var(--red-bg);color:var(--red)}
.badge-top{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff}
.badge-new{background:var(--primary);color:#fff}

/* ── 8. Suchleiste / Suggest-Dropdown ────────────────────────────────────── */
.search-bar{
  flex:1;max-width:560px;display:flex;align-items:center;
  background:var(--bg);border:1.5px solid var(--border);border-radius:999px;
  padding:5px 6px 5px 18px;transition:border-color var(--transition),box-shadow var(--transition);
}
.search-bar:focus-within{border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-soft)}
.search-bar input{
  flex:1;border:none;background:transparent;color:var(--text);
  font-size:.95rem;outline:none;padding:7px 0;
}
.search-bar input::placeholder{color:var(--text3)}
.search-bar button{
  display:flex;align-items:center;gap:6px;
  background:var(--primary);color:#fff;border:none;border-radius:999px;
  padding:9px 18px;font-size:.88rem;font-weight:600;cursor:pointer;
  transition:background var(--transition);
}
.search-bar button:hover{background:var(--primary-dim)}

/* Suggest-Dropdown */
#suggest-dropdown{
  position:absolute;display:none;z-index:200;
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);overflow:hidden;max-height:420px;overflow-y:auto;
  padding:6px;
}
.sg-item{
  display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:var(--radius-sm);
  cursor:pointer;transition:background var(--transition);
}
.sg-item:hover,.sg-item.sg-active{background:var(--primary-soft)}
.sg-badge{
  font-size:.63rem;font-weight:700;color:#fff;padding:2px 7px;border-radius:999px;
  white-space:nowrap;flex:0 0 auto;text-transform:uppercase;letter-spacing:.03em;
}
.sg-text{font-size:.88rem;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── 9. Sterne-Bewertungen (zentrales Element) ───────────────────────────── */
.stars{display:inline-flex;align-items:center;gap:1px;line-height:1}
.stars svg{width:15px;height:15px}
.stars .s-full{fill:var(--star)}
.stars .s-half-l{fill:var(--star)}
.stars .s-empty{fill:#dde2ec}
.stars-lg svg{width:20px;height:20px}
.stars-sm svg{width:13px;height:13px}

.rating-inline{display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap}
.rating-score{font-weight:800;font-size:.95rem;color:var(--text)}
.rating-count{font-size:.8rem;color:var(--text3)}

/* Großer Score-Block (Produktseite) */
.rating-hero{
  display:flex;align-items:center;gap:18px;
  background:linear-gradient(135deg,#fff8ee,#fff3e0);
  border:1px solid #ffe3bd;border-radius:var(--radius);padding:16px 18px;
}
.rating-hero-num{
  font-size:2.6rem;font-weight:900;line-height:1;color:var(--star-dim);
  display:flex;flex-direction:column;align-items:center;
}
.rating-hero-num small{font-size:.85rem;font-weight:600;color:var(--text3);margin-top:3px}
.rating-hero-mid{flex:1}
.rating-hero-mid .rating-count{font-size:.85rem;margin-top:4px;display:block}

/* Sterne-Verteilungs-Balken */
.rating-bars{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.rating-bar-row{display:flex;align-items:center;gap:8px;font-size:.75rem;color:var(--text2)}
.rating-bar-row .rb-label{width:34px;text-align:right;flex:0 0 auto}
.rating-bar-track{flex:1;height:7px;background:var(--bg3);border-radius:999px;overflow:hidden}
.rating-bar-fill{height:100%;background:var(--star);border-radius:999px}
.rating-bar-row .rb-cnt{width:28px;flex:0 0 auto;color:var(--text3)}

/* ── 10. Sortier-Bar & Filter ────────────────────────────────────────────── */
.suche-titel{font-size:1.7rem;font-weight:800;letter-spacing:-.5px;margin-bottom:4px}
.suche-meta{font-size:.88rem;color:var(--text2);margin-bottom:20px}
.suche-meta strong{color:var(--primary)}

.sort-bar{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);
  padding:10px 14px;margin-bottom:20px;box-shadow:var(--shadow);
}
.sort-label{font-size:.82rem;color:var(--text3);font-weight:600;margin-right:2px}
.sort-btn{
  font-size:.82rem;color:var(--text2);padding:6px 13px;border-radius:999px;
  border:1px solid var(--border);transition:all var(--transition);font-weight:500;
}
.sort-btn:hover{border-color:var(--primary);color:var(--primary)}
.sort-btn.aktiv{background:var(--primary);border-color:var(--primary);color:#fff}
.sort-right{margin-left:auto;font-size:.8rem;color:var(--text3)}

.suche-grid{display:grid;grid-template-columns:262px 1fr;gap:26px;align-items:start}

aside .filter-panel{
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);
  padding:15px 16px;margin-bottom:14px;box-shadow:var(--shadow);
}
.filter-titel{font-size:.92rem;font-weight:700;margin-bottom:11px}
.filter-check{
  display:flex;align-items:center;gap:9px;padding:5px 0;cursor:pointer;
  font-size:.85rem;color:var(--text2);transition:color var(--transition);
}
.filter-check:hover{color:var(--text)}
.filter-check input{accent-color:var(--primary);width:15px;height:15px;flex:0 0 auto}
.filter-check span:first-of-type{flex:1}
.filter-cnt{font-size:.74rem;color:var(--text3);background:var(--bg3);
  padding:1px 7px;border-radius:999px}
.filter-mehr{display:inline-block;margin-top:8px;font-size:.8rem;color:var(--primary);
  cursor:pointer;font-weight:600}
.filter-mehr:hover{color:var(--primary-dim)}
.filter-btn{
  background:var(--primary);color:#fff;border:none;border-radius:var(--radius-sm);
  padding:9px 16px;font-size:.85rem;font-weight:600;cursor:pointer;transition:background var(--transition);
}
.filter-btn:hover{background:var(--primary-dim)}
.filter-reset-all{display:inline-block;margin-top:10px;font-size:.8rem;color:var(--accent);font-weight:600}
.aktiv-badge{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--primary-soft);color:var(--primary);font-size:.76rem;font-weight:600;
  padding:4px 10px;border-radius:999px;margin:0 6px 6px 0;cursor:pointer;
}
.aktiv-x{font-weight:700;opacity:.7}
.aktiv-badge:hover .aktiv-x{opacity:1}

/* Range-Slider */
.range-wrap{position:relative;height:30px}
.range-track{position:absolute;top:13px;left:0;right:0;height:5px;background:var(--bg3);border-radius:999px}
.range-fill{position:absolute;top:0;height:100%;background:var(--primary);border-radius:999px}
.range-inp{
  position:absolute;top:0;left:0;width:100%;height:30px;margin:0;
  background:transparent;-webkit-appearance:none;appearance:none;pointer-events:none;
}
.range-inp::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;pointer-events:auto;
  width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--primary);
  box-shadow:var(--shadow);cursor:pointer;margin-top:0;
}
.range-inp::-moz-range-thumb{
  pointer-events:auto;width:18px;height:18px;border-radius:50%;background:#fff;
  border:2px solid var(--primary);box-shadow:var(--shadow);cursor:pointer;
}

/* ── 11. Produkt-Karte (Suchergebnisliste) ───────────────────────────────── */
.produkt-liste{display:flex;flex-direction:column;gap:14px}
.produkt-karte{
  display:grid;grid-template-columns:120px 1fr 190px;gap:18px;
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px;transition:border-color var(--transition),box-shadow var(--transition),transform var(--transition);
}
.produkt-karte:hover{border-color:var(--primary2);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.p-bild{
  width:120px;height:120px;background:var(--bg);border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.p-bild img{width:100%;height:100%;object-fit:contain;padding:8px}
.p-info{display:flex;flex-direction:column;gap:6px;min-width:0}
.p-badges{display:flex;flex-wrap:wrap;gap:6px}
.p-name{font-size:1rem;font-weight:700;color:var(--text);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.p-sub{font-size:.82rem;color:var(--text3)}
.p-rating{margin-top:auto;padding-top:4px}
.p-preis-col{
  display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;
  border-left:1px solid var(--border);padding-left:18px;text-align:right;
}
.p-ab{font-size:.74rem;color:var(--text3)}
.p-preis{font-size:1.45rem;font-weight:900;color:var(--text);letter-spacing:-.5px}
.p-shops{font-size:.76rem;color:var(--text3);margin-top:2px}
.btn-vgl{
  background:var(--accent);color:#fff;font-size:.82rem;font-weight:700;
  padding:9px 16px;border-radius:var(--radius-sm);transition:background var(--transition);white-space:nowrap;
}
.produkt-karte:hover .btn-vgl{background:var(--accent-dim)}

.keine{
  text-align:center;padding:60px 20px;color:var(--text3);
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);
}
.keine svg{color:var(--text3);margin:0 auto 14px;opacity:.5}
.keine h2{font-size:1.2rem;color:var(--text2);margin-bottom:6px}

/* Pagination */
.pagination{display:flex;gap:6px;justify-content:center;margin-top:30px;flex-wrap:wrap}
.page-btn{
  min-width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-sm);
  font-size:.88rem;color:var(--text2);transition:all var(--transition);padding:0 8px;
}
.page-btn:hover{border-color:var(--primary);color:var(--primary)}
.page-btn.aktiv{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:700}
.page-btn.dots{border:none;background:transparent}

.amazon-suchlink{
  display:flex;align-items:center;gap:10px;padding:11px 16px;
  border-radius:var(--radius);color:#fff;background:var(--green);
  font-size:.88rem;font-weight:700;transition:background var(--transition);
}
.amazon-suchlink:hover{background:#15803d}
.amazon-suchlink-top{margin-bottom:14px}
.amazon-suchlink-bottom{margin-top:14px}

/* ── 12. Produkt-Detailseite ─────────────────────────────────────────────── */
.produkt-grid{display:grid;grid-template-columns:420px 1fr;gap:34px;align-items:start;margin-bottom:36px}

/* Galerie */
.galerie-main{
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:24px;display:flex;align-items:center;justify-content:center;
  aspect-ratio:1;box-shadow:var(--shadow);
}
.galerie-main img{max-width:100%;max-height:100%;object-fit:contain}
.galerie-placeholder{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:60px;display:flex;align-items:center;justify-content:center}
.galerie-thumbs{display:flex;gap:9px;margin-top:12px;flex-wrap:wrap}
.galerie-thumb{
  width:70px;height:70px;background:var(--bg2);border:1.5px solid var(--border);border-radius:var(--radius-sm);
  padding:6px;cursor:pointer;transition:border-color var(--transition);
}
.galerie-thumb.active{border-color:var(--primary)}
.galerie-thumb img{width:100%;height:100%;object-fit:contain}

.section-card{
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);
  padding:20px;box-shadow:var(--shadow);
}
.section-card h2{font-size:1.15rem;font-weight:800;margin-bottom:14px;letter-spacing:-.3px}

.chart-wrapper{height:230px;position:relative}

/* Produkt-Info */
.produkt-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.produkt-titel{font-size:1.75rem;font-weight:800;letter-spacing:-.6px;line-height:1.2;margin-bottom:8px}
.produkt-hersteller{font-size:.9rem;color:var(--text2);margin-bottom:16px}

.preis-hero{
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:22px;box-shadow:var(--shadow);margin-bottom:14px;
}
.preis-ab{font-size:.8rem;color:var(--text3);text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.preis-wert{font-size:2.5rem;font-weight:900;color:var(--text);letter-spacing:-1px;line-height:1}
.preis-inkl{font-size:.78rem;color:var(--text3);margin-top:3px}
.preis-shops{font-size:.85rem;color:var(--text2);margin-top:8px}
.preis-shops strong{color:var(--primary)}
.preis-aktu{display:flex;align-items:center;gap:5px;font-size:.74rem;color:var(--text3);margin-top:10px}
.shop-meta-item{display:inline-flex;align-items:center;gap:5px;color:var(--text2)}
.shop-meta-item.verfuegbar{color:var(--green)}
.shop-meta-item.nicht-verfuegbar{color:var(--red)}
.shop-meta-item.versand-frei{color:var(--green)}

.btn-angebot{
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;
  padding:15px 20px;border-radius:var(--radius);font-weight:700;font-size:1rem;
  box-shadow:0 6px 18px rgba(var(--accent-rgb),.32);transition:transform var(--transition),box-shadow var(--transition);
  margin-bottom:10px;
}
.btn-angebot:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(var(--accent-rgb),.4)}
.btn-alle{
  display:flex;align-items:center;justify-content:center;
  background:var(--bg2);border:1.5px solid var(--primary);color:var(--primary);
  padding:12px 18px;border-radius:var(--radius);font-weight:600;font-size:.9rem;
  transition:background var(--transition);margin-bottom:10px;
}
.btn-alle:hover{background:var(--primary-soft)}

/* Fakten-Liste */
.fakten-liste{display:flex;flex-direction:column;gap:0}
.fakten-row{display:grid;grid-template-columns:42% 58%;gap:12px;padding:9px 0;
  border-bottom:1px solid var(--border);font-size:.88rem}
.fakten-row:last-child{border-bottom:none}
.fakten-row dt{color:var(--text3);font-weight:500}
.fakten-row dd{color:var(--text);font-weight:600}

.beschreibung-toggle{background:none;border:none;color:var(--primary);font-size:.88rem;
  font-weight:600;cursor:pointer;margin-top:10px;padding:0}

/* Preisvergleich */
.preisliste-header{display:flex;align-items:center;justify-content:space-between;
  margin:8px 0 16px;flex-wrap:wrap;gap:10px}
.preisliste-titel{font-size:1.5rem;font-weight:800;letter-spacing:-.4px}
.preisliste-anzahl{font-size:.85rem;color:var(--text2)}

.filter-bar{
  display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);
  padding:14px 16px;margin-bottom:16px;box-shadow:var(--shadow);
}
.filter-group{display:flex;flex-direction:column;gap:5px}
.filter-label{font-size:.76rem;color:var(--text3);font-weight:600}
.filter-select,.filter-input{
  background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:8px 11px;font-size:.85rem;color:var(--text);outline:none;
}
.filter-select:focus,.filter-input:focus{border-color:var(--primary)}
.filter-reset{font-size:.82rem;color:var(--accent);font-weight:600;align-self:center}

.preis-liste{display:flex;flex-direction:column;gap:10px}
.preis-karte{
  display:grid;grid-template-columns:42px 1fr auto auto;gap:16px;align-items:center;
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);
  padding:15px 18px;transition:border-color var(--transition),box-shadow var(--transition);
}
.preis-karte:hover{border-color:var(--primary2);box-shadow:var(--shadow-md)}
.preis-karte.rang-1{border-color:var(--green);background:linear-gradient(0deg,var(--green-bg),var(--bg2))}
.rang-badge{
  width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;font-weight:800;font-size:.85rem;
}
.rang-1{background:var(--green);color:#fff}
.rang-2{background:var(--bg4);color:var(--text2)}
.rang-3{background:var(--bg4);color:var(--text2)}
.rang-other{background:var(--bg3);color:var(--text3)}
.shop-name{font-weight:700;font-size:1rem;margin-bottom:4px}
.shop-meta{display:flex;flex-wrap:wrap;gap:12px;font-size:.8rem}
.aktu-info{font-size:.72rem;color:var(--text3);margin-top:4px}
.preis-spalte{text-align:right}
.preis-vk{font-size:1.35rem;font-weight:900;letter-spacing:-.5px}
.preis-vk-alt{font-size:.8rem;color:var(--text3);text-decoration:line-through}
.preis-gesamt{font-size:.76rem;color:var(--text2);margin-top:2px}
.grundpreis-liste{font-size:.72rem;color:var(--text3);margin-top:2px}
.btn-shop{
  display:flex;align-items:center;gap:5px;background:var(--accent);color:#fff;
  padding:9px 16px;border-radius:var(--radius-sm);font-size:.84rem;font-weight:700;white-space:nowrap;
}
.btn-shop-2{background:var(--primary)}
.leer-state{text-align:center;padding:50px 20px;color:var(--text3);
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius)}
.leer-state svg{margin:0 auto 12px;opacity:.4}
.hinweis-text{font-size:.74rem;color:var(--text3);line-height:1.6;margin-top:16px}

/* Bewertungen auf Produktseite */
.bew-slide{padding:12px 0;border-bottom:1px solid var(--border)}
.bew-slide:last-child{border-bottom:none}
.bew-leer{text-align:center;padding:30px 16px;color:var(--text3)}
.bew-leer svg{margin:0 auto 8px;opacity:.35}

/* Weitere Produkte Grid */
.angebote-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.angebote-grid--5col{grid-template-columns:repeat(5,1fr)}
.angebot-karte{
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;transition:border-color var(--transition),box-shadow var(--transition),transform var(--transition);
  display:flex;flex-direction:column;
}
.angebot-karte:hover{border-color:var(--primary2);box-shadow:var(--shadow-md);transform:translateY(-3px)}
.angebot-bild{height:170px;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:14px}
.angebot-bild img{max-width:100%;max-height:100%;object-fit:contain}
.angebot-body{padding:13px 14px 15px}
.angebot-name{font-size:.88rem;font-weight:600;line-height:1.35;color:var(--text);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:4px;min-height:2.4em}
.angebot-preis{font-size:1.15rem;font-weight:900;color:var(--text);letter-spacing:-.4px}
.angebot-shops{font-size:.72rem;color:var(--text3);margin-top:5px}

/* ── 13. Startseite ──────────────────────────────────────────────────────── */
.hero{
  position:relative;overflow:hidden;
  background:linear-gradient(120deg,#4f46e5 0%,#6366f1 30%,#7c3aed 55%,#6366f1 80%,#4f46e5 100%);
  background-size:300% 300%;
  animation:heroGradient 24s ease infinite;
  padding:56px 20px 46px;text-align:center;color:#fff;
}
@keyframes heroGradient{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@media (prefers-reduced-motion: reduce){
  .hero{animation:none}
}
/* Bewertungs-Laufband (eigener Bereich unter dem Hero) */
.bewertung-ticker{
  position:relative;overflow:hidden;
  height:158px;
  background:linear-gradient(180deg,var(--bg2),var(--bg));
  border-bottom:1px solid var(--border);
}
.bt-track{position:absolute;inset:0}
.bt-card{
  position:absolute;top:50%;left:0;transform:translateX(0);
  width:310px;margin-top:-63px;height:126px;box-sizing:border-box;
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:13px 16px;will-change:transform,opacity;
  display:flex;flex-direction:column;gap:6px;text-decoration:none;color:inherit;
  transition:border-color var(--transition),box-shadow var(--transition);
}
a.bt-card:hover{border-color:var(--primary2);box-shadow:var(--shadow-md)}
.bt-card-top{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.bt-stars{display:inline-flex;gap:1px}
.bt-star{width:14px;height:14px}
.bt-star-f{fill:var(--star)}
.bt-star-h{fill:var(--star)}
.bt-star-e{fill:#dde2ec}
.bt-score{font-size:.82rem;font-weight:800;color:var(--star-dim)}
.bt-text{
  font-size:.82rem;line-height:1.4;color:var(--text2);flex:1 1 auto;
  min-height:2.5em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.bt-meta{display:flex;flex-direction:column;gap:2px;flex:0 0 auto}
.bt-produkt{font-size:.78rem;font-weight:700;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bt-quelle{font-size:.7rem;color:var(--text3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bt-fade{position:absolute;top:0;bottom:0;width:70px;pointer-events:none;z-index:2}
.bt-fade-l{left:0;background:linear-gradient(90deg,var(--bg2),transparent)}
.bt-fade-r{right:0;background:linear-gradient(270deg,var(--bg),transparent)}
@media (max-width:600px){
  .bewertung-ticker{height:150px}
  .bt-card{width:270px;height:120px;margin-top:-60px}
  .bt-fade{width:44px}
}
.hero-content{position:relative;z-index:1;max-width:760px;margin:0 auto}
.hero-mascot{
  width:104px;height:104px;margin:0 auto 22px;border-radius:24px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 28px rgba(0,0,0,.18);backdrop-filter:blur(2px);
  cursor:pointer;
}

/* ============================================================================
   Monster-Maskottchen — Animationen
   Drei verschachtelte Container ermöglichen unabhängige Bewegungen:
     .tm-anim-wrap  → Hover-Reaktion (kurzes Wackeln)
     .tm-anim-walk  → langsames Hin-und-Her-Wandern (alle paar Sekunden)
     .tm-anim-bounce → ständige Atem-/Hüpf-Bewegung
   Auf dem SVG selbst:
     .tm-eye-left .tm-lid  → Lid fährt für ~150ms über die Pupille (Zwinkern)
     .tm-check             → Häkchen-Auge "freut sich" (Skalierung)
   ============================================================================ */
.tm-anim-wrap{display:inline-flex;transform-origin:center bottom}
.tm-anim-walk{display:inline-flex;animation:tmWalk 12s ease-in-out infinite;transform-origin:center bottom}
.tm-anim-bounce{display:inline-flex;animation:tmBounce 2.6s ease-in-out infinite;transform-origin:center bottom}
.tm-anim-svg{display:block;overflow:visible}

/* Lid (Augenlid) — Zwinkern */
.tm-eye-left{transform-origin:9.3px 10.5px}
.tm-lid{
  transform-origin:9.3px 9.0px;
  transform:scaleY(0);
  animation:tmBlink 5.4s ease-in-out infinite;
}

/* Häkchen pulsiert ganz dezent (Glücks-Twinkle alle 8s) */
.tm-check{transform-origin:15px 10.5px;animation:tmTwinkle 8s ease-in-out infinite}

/* Hüpfen / Atmen: leichtes Hoch-Runter + Squash */
@keyframes tmBounce{
  0%,100%{ transform:translateY(0) scale(1,1) }
  45%    { transform:translateY(0) scale(1.03,.97) }
  60%    { transform:translateY(-8px) scale(.97,1.04) }
  78%    { transform:translateY(0) scale(1.04,.96) }
}

/* Wandern: ganz langsam ein paar Pixel nach links/rechts mit leichtem Tilt */
@keyframes tmWalk{
  0%,100% { transform:translateX(0)    rotate(0deg)  }
  25%     { transform:translateX(-10px) rotate(-3deg) }
  50%     { transform:translateX(0)    rotate(0deg)  }
  75%     { transform:translateX(10px)  rotate(3deg)  }
}

/* Zwinkern: Lid kommt kurz runter, in unregelmäßigem Rhythmus */
@keyframes tmBlink{
  0%, 92%, 100% { transform:scaleY(0) }
  94%, 96%      { transform:scaleY(1) }
}

/* Häkchen twinkelt: kurzes Aufleuchten/Vergrößern */
@keyframes tmTwinkle{
  0%, 88%, 100% { transform:scale(1);   opacity:1 }
  92%           { transform:scale(1.25); opacity:.85 }
  96%           { transform:scale(1);   opacity:1 }
}

/* Hover: kurz lebhafter — wackelt, doppelt-blinzelt, Häkchen "freut sich" */
.hero-mascot:hover .tm-anim-wrap,
.tm-logo-anim:hover{
  animation:tmWiggle .7s ease-in-out 1;
}
.hero-mascot:hover .tm-anim-bounce{
  animation-duration:1.1s;
}
.hero-mascot:hover .tm-lid{
  animation:tmBlinkFast .7s ease-in-out 1;
}
.hero-mascot:hover .tm-check{
  animation:tmCheer .7s ease-in-out 1;
}
@keyframes tmWiggle{
  0%,100%{ transform:rotate(0) }
  20%    { transform:rotate(-8deg) }
  40%    { transform:rotate(7deg) }
  60%    { transform:rotate(-5deg) }
  80%    { transform:rotate(4deg) }
}
@keyframes tmBlinkFast{
  0%,30%,55%,100%{ transform:scaleY(0) }
  35%,45%        { transform:scaleY(1) }
  60%,70%        { transform:scaleY(1) }
}
@keyframes tmCheer{
  0%,100%{ transform:scale(1)    rotate(0)  }
  35%    { transform:scale(1.35) rotate(-8deg) }
  70%    { transform:scale(1.2)  rotate(6deg)  }
}

/* Header-/Footer-Logo: nur dezent zwinkern, kein Hüpfen/Wandern */
.tm-logo-anim .tm-lid{
  transform-origin:9.3px 9.0px;
  transform:scaleY(0);
  animation:tmBlink 6.2s ease-in-out infinite;
}
.tm-logo-anim:hover .tm-lid{
  animation:tmBlinkFast .6s ease-in-out 1;
}

/* Bei reduzierter Bewegung: alles ausschalten */
@media (prefers-reduced-motion: reduce){
  .tm-anim-walk, .tm-anim-bounce, .tm-check, .tm-lid,
  .tm-logo-anim .tm-lid{ animation:none !important }
  .tm-lid, .tm-logo-anim .tm-lid{ transform:scaleY(0) }
}

.hero h1{font-size:2.7rem;font-weight:900;letter-spacing:-1px;color:#fff;margin-bottom:14px;line-height:1.1}
.hero h1 em{font-style:normal;background:linear-gradient(135deg,#ffd089,#ff9f6b);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero p{font-size:1.08rem;color:rgba(255,255,255,.88);margin-bottom:28px;max-width:560px;margin-inline:auto}

.hero-search{
  display:flex;gap:8px;background:#fff;border-radius:999px;padding:7px;
  box-shadow:0 14px 44px rgba(0,0,0,.22);max-width:620px;margin:0 auto;
}
.hero-search input{
  flex:1;border:none;background:transparent;font-size:1rem;color:var(--text);outline:none;padding:11px 20px;
}
.hero-search input::placeholder{color:var(--text3)}
.hero-search button{
  display:flex;align-items:center;background:var(--accent);color:#fff;border:none;border-radius:999px;
  padding:13px 26px;font-size:.95rem;font-weight:700;cursor:pointer;transition:background var(--transition);
}
.hero-search button:hover{background:var(--accent-dim)}

.beispiel-link{
  font-size:.8rem;color:#fff;background:rgba(255,255,255,.16);padding:5px 13px;border-radius:999px;
  transition:background var(--transition);
}
.beispiel-link:hover{background:rgba(255,255,255,.28)}

.stats-bar{display:none}

.stripe-section{background:var(--bg2);border-bottom:1px solid var(--border);padding:48px 0}

.so-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.so-schritt{
  background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);
  padding:22px 18px;position:relative;transition:box-shadow var(--transition),transform var(--transition);
}
.so-schritt:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.so-num{position:absolute;top:16px;right:18px;font-size:1.6rem;font-weight:900;color:var(--bg4)}
.so-icon{font-size:1.8rem;margin-bottom:10px}
.so-titel{font-weight:700;font-size:1rem;margin-bottom:8px}
.so-text{font-size:.85rem;color:var(--text2);line-height:1.55}

.kat-section{padding:44px 0}

.vorteile-grid{display:grid;gap:18px}
.vorteil-karte{
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:22px 20px;
  transition:box-shadow var(--transition),transform var(--transition);
}
.vorteil-karte:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.vorteil-icon{font-size:1.9rem;margin-bottom:12px}
.vorteil-titel{font-weight:700;font-size:1.02rem;margin-bottom:8px}
.vorteil-text{font-size:.86rem;color:var(--text2);line-height:1.55}
.vorteil-text em{font-style:normal;color:var(--primary);font-weight:600}

.kat-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:14px}
.kat-karte{
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);
  padding:20px 14px;text-align:center;transition:all var(--transition);
}
.kat-karte:hover{border-color:var(--primary);box-shadow:var(--shadow-md);transform:translateY(-3px)}
.kat-name{font-weight:700;font-size:.9rem;color:var(--text)}
.kat-cnt{font-size:.74rem;color:var(--text3);margin-top:5px}

/* FAQ */
.faq-outer{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.faq-liste{display:flex;flex-direction:column;gap:10px}
.faq-item{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.faq-frage{padding:15px 18px;font-weight:600;font-size:.92rem;cursor:pointer;position:relative;
  padding-right:42px;transition:color var(--transition)}
.faq-frage:hover{color:var(--primary)}
.faq-frage::after{content:'+';position:absolute;right:18px;top:50%;transform:translateY(-50%);
  font-size:1.3rem;color:var(--primary);font-weight:400;transition:transform var(--transition)}
.faq-item.open .faq-frage::after{transform:translateY(-50%) rotate(45deg)}
.faq-antwort{max-height:0;overflow:hidden;transition:max-height .3s ease;padding:0 18px}
.faq-item.open .faq-antwort{max-height:400px;padding:0 18px 16px}
.faq-antwort div{font-size:.86rem;color:var(--text2);line-height:1.6}

/* Trust-Bar (Bewertungsfokus) */
.trust-bar{
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px 28px;align-items:center;
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:26px 28px;box-shadow:var(--shadow);
}
.trust-item{display:flex;align-items:center;gap:12px}
.trust-item .ti-icon{
  width:44px;height:44px;flex:0 0 auto;border-radius:11px;background:var(--primary-soft);
  display:flex;align-items:center;justify-content:center;font-size:1.3rem;
}
.trust-item .ti-text strong{display:block;font-weight:800;font-size:1.05rem}
.trust-item .ti-text span{font-size:.8rem;color:var(--text3)}
@media (max-width:900px){ .trust-bar{grid-template-columns:repeat(2,1fr);gap:22px;padding:24px} }
@media (max-width:480px){ .trust-bar{grid-template-columns:1fr} }

/* ── 14. Hilfselemente ───────────────────────────────────────────────────── */
.preistrend-badge{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:600;
  padding:5px 11px;border-radius:999px;margin-top:10px;border:1px solid transparent}
.trend-fallend{color:var(--green);background:var(--green-bg);border-color:rgba(22,163,74,.25)}
.trend-stabil{color:var(--primary);background:var(--primary-soft);border-color:rgba(var(--primary-rgb),.25)}
.trend-steigend{color:var(--red);background:var(--red-bg);border-color:rgba(220,38,38,.25)}
.preistrend-hinweis{font-size:.72rem;color:var(--text3);margin-top:4px;line-height:1.4}

/* ── 15. Responsive ──────────────────────────────────────────────────────── */
@media (max-width:980px){
  .produkt-grid{grid-template-columns:1fr;gap:24px}
  .galerie-main{max-width:420px;margin:0 auto}
  .so-grid{grid-template-columns:repeat(2,1fr)}
  .kat-grid{grid-template-columns:repeat(4,1fr)}
  .vorteile-grid{grid-template-columns:repeat(2,1fr)!important}
  .angebote-grid--5col{grid-template-columns:repeat(3,1fr)}
  .faq-outer{grid-template-columns:1fr}
}
@media (max-width:820px){
  .suche-grid{grid-template-columns:1fr}
  aside{order:2}
  .footer-inner{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .header-inner{flex-wrap:wrap;height:auto;padding:12px 0;gap:12px}
  .search-bar{order:3;max-width:100%;flex-basis:100%}
  .hero h1{font-size:2rem}
  .hero-search{flex-direction:column;border-radius:var(--radius-lg);padding:10px}
  .hero-search input{text-align:center}
  .hero-search button{justify-content:center}
  .produkt-karte{grid-template-columns:90px 1fr;gap:12px}
  .p-bild{width:90px;height:90px}
  .p-preis-col{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;
    border-left:none;border-top:1px solid var(--border);padding-left:0;padding-top:12px;text-align:left}
  .so-grid{grid-template-columns:1fr}
  .kat-grid{grid-template-columns:repeat(2,1fr)}
  .vorteile-grid{grid-template-columns:1fr!important}
  .angebote-grid--5col{grid-template-columns:repeat(2,1fr)}
  .footer-inner{grid-template-columns:1fr}
  .rating-hero{flex-direction:column;align-items:flex-start;gap:12px}
  .preis-karte{grid-template-columns:38px 1fr;gap:12px}
  .preis-spalte,.btn-shop{grid-column:2}
  .btn-shop{justify-self:start}
}