:root {
  --primary:#ff9dbd;           /* sanftes Rosa (Akzent) */
  --primary-600:#e8759f;       /* dunkleres Rosa */
  --secondary:#7cc6ff;         /* Babyblau */
  --bg:#fffafc;                /* leichtes Cremeweiß */
  --card:#ffffff;
  --text:#2a2a2a;
  --muted:#6b7280;
  --ring:rgba(255,157,189,0.25);
  --shadow:0 10px 25px rgba(0,0,0,.05),0 4px 10px rgba(0,0,0,.04);
  --radius:16px;
  --card-h:430px;
  --media-h:240px;

  /* Schnullerzeit Tuning */
  --header-blue:#e6f3ff;       /* sehr helles Babyblau */
  --header-blue-2:#d6edff;     /* etwas kräftigeres Babyblau */
  --header-pink-hint:#fff0f6;  /* ganz zarter Rosa-Schimmer */
  --card-blue:#f4faff;         /* zartes Karten-Blau   */
  --card-blue-2:#ffffff;       /* Verlauf-Ende         */
  --card-blue-br:#d6e9ff;      /* zarter Karten-Rand   */
}
@media(max-width:1024px){
  :root{--card-h:400px;--media-h:220px}
}
@media(max-width:640px){
  :root{--card-h:360px;--media-h:200px}
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Helvetica Neue,Arial,Noto Sans,sans-serif;
}

.wrap{max-width:1200px;margin:0 auto;padding:24px}

/* Header: hauptsächlich blau, nur wenig rosa am rechten Rand */
header{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;
  background:linear-gradient(
    90deg,
    var(--header-blue-2) 0%,
    var(--header-blue) 68%,
    var(--header-blue) 90%,
    var(--header-pink-hint) 100%
  );
  border:1px solid #cfe6ff; /* blauer Rand */
  border-radius:16px;
  padding:14px 18px;
  box-shadow:0 10px 24px rgba(124,198,255,.18), 0 4px 10px rgba(124,198,255,.12);
}
.brand a{font-weight:800;font-size:24px;text-decoration:none;color:#243042}
.brand a span{color:var(--primary)} /* kleiner rosa Akzent im Logo */
nav a{color:#3c5678;text-decoration:none;margin-left:16px}
nav a:hover{color:var(--secondary)} /* Hover nun babyblau statt rosa */

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

/* Karten: zartes Blau */
.card{
  position:relative;
  background:linear-gradient(180deg,var(--card-blue) 0%, var(--card-blue-2) 100%);
  border:1px solid var(--card-blue-br);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  min-height:var(--card-h);
  display:flex;
  flex-direction:column;
  transition:transform .18s ease,box-shadow .18s ease;
  height:auto!important;
}
.card:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 30px rgba(0,0,0,.07),0 6px 14px rgba(0,0,0,.05)
}
.card a.stretch{position:absolute;inset:0;z-index:1}

.card .card-body{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
  padding:14px 14px 16px;
  flex:1 1 auto!important;
  min-height:0!important
}

.card .meta,.card .chip,.card .chips__toggle,.card .disclaimer{position:relative;z-index:3}

/* Bildbereich leicht bläulich */
.media{
  height:var(--media-h)!important;
  padding:14px;
  border-bottom:1px solid #eaf2ff;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f8fbff;
  z-index:2;
  flex:0 0 var(--media-h)!important
}
.media img{
  display:block;
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain
}
.media .ph{
  width:55%;height:55%;
  border-radius:12px;
  background:linear-gradient(135deg,#fdfbfb 0%,#f3f6f9 100%)
}

.price{color:var(--primary);font-weight:800;font-size:18px;letter-spacing:.2px}
.title{
  font-weight:700;font-size:15px;color:var(--text);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;line-height:1.25;
  min-height:calc(1.25em * 2)
}
.meta{font-size:12px;color:var(--muted);margin-top:4px;font-weight:700}

.badge{
  position:absolute;
  left:10px;top:10px;z-index:4;
  background:var(--secondary);
  color:#fff;font-weight:700;font-size:11px;
  padding:6px 8px;border-radius:999px;
  letter-spacing:.3px;
  box-shadow:0 6px 18px var(--ring)
}

.h1{font-size:22px;margin:12px 0 18px 0;font-weight:800}

.chips{
  position:relative;display:flex;flex-wrap:wrap;
  gap:6px;margin-top:4px;max-height:56px;overflow:hidden
}
.chip{
  display:inline-flex;align-items:center;
  padding:4px 8px;border-radius:999px;
  font-size:11px;font-weight:700;line-height:1;
  background:#f9f9fb;color:#374151;border:1px solid #e5e7eb
}
.chip-cat{background:#ffe7f3;border-color:#ffd0e8;color:#a81c66}
.chip-aud{background:#eef6ff;border-color:#d6e9ff;color:#0b4aa2}

.chips.has-overflow::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:24px;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,0),#fff 70%);
  border-bottom-left-radius:inherit;border-bottom-right-radius:inherit
}
.chips.expanded{max-height:none}
.chips.expanded::after{display:none}

.chips__toggle{
  display:none;margin-top:6px;background:transparent;border:0;
  padding:0;font-size:12px;font-weight:800;
  color:var(--primary);cursor:pointer;text-decoration:none
}
.chips.has-overflow+.chips__toggle{display:inline-block}

.disclaimer{margin-top:10px;font-size:10px;line-height:1.2;color:#6b7280}

.stars{display:flex;align-items:center;gap:6px}
.stars .count{font-size:.85rem;color:#666}
.stars .star{
  display:inline-block;width:14px;height:14px;background:#f5b301;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.431 8.2 1.192-5.934 5.787 1.401 8.168L12 18.896 4.665 23.165l1.401-8.168L.132 9.21l8.2-1.192z"/></svg>') center/contain no-repeat;
  mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.431 8.2 1.192-5.934 5.787 1.401 8.168L12 18.896 4.665 23.165l1.401-8.168L.132 9.21l8.2-1.192z"/></svg>') center/contain no-repeat
}

.chips__toggle:focus-visible,.card a:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:2px
}

.seo-product-link {
  text-decoration: underline;
  font-weight: 600;
  color: var(--primary-600);
}

/* Optionale Tipp-Karten weiterhin rosa (kannst du löschen, wenn alles blau sein soll) */
.card.tip{
  background:linear-gradient(180deg,#ffe7f3 0%,#fff 100%);
  border:1px solid #ffd0e8;
}
.site-header{
  background: linear-gradient(90deg,#d6edff 0%,#e6f3ff 72%,#e6f3ff 92%,#fff0f6 100%);
  border:1px solid #cfe6ff;
  border-radius:16px;
  padding:20px 0;
  color:#243042;
  box-shadow:0 10px 24px rgba(124,198,255,.18),0 4px 10px rgba(124,198,255,.12);
}
.site-header nav a{ color:#3c5678; }
.site-header nav a:hover{ color:#7cc6ff; }