/* ============================================================
   CHOOOD — Startseite
   Wolken-Hero mit Logo, Filterleiste und Motto-Kacheln.
   Ergänzt choood.css.
   ============================================================ */

/* ============================================================
   HERO MIT WOLKE + LOGO
   ============================================================ */
.hero {
  padding: 4px 20px 6px;
  text-align: center;
}
.cloud-wrap {
  position: relative;
  width: 100%;
  max-width: 740px;
  margin: 0 auto;
  aspect-ratio: 5 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
  container-type: inline-size;
}
.cloud-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.cloud-logo {
  position: relative;
  z-index: 2;
}
.cloud-sub {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: max(3.1cqi, 18px);
  color: #6B3F9E;
  margin-top: 0.6cqi;
}

.chooood {
  display: inline-flex;
  align-items: center;
  gap: 0;
  line-height: 1;
}
.chooood .l {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 700;
  line-height: 1;
  display: inline-block;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  font-size: 12.3cqi;
  letter-spacing: -0.45cqi;
  background-size: 1.25cqi 1.25cqi;
  -webkit-text-stroke-width: 0.27cqi;
}
@supports not (font-size: 1cqi) {
  .chooood .l { font-size: 170px; letter-spacing: -7px; background-size: 16px 16px; -webkit-text-stroke-width: 3.5px; }
}
.chooood .l.stroke-pink { -webkit-text-stroke-color: var(--o-pink); }
.chooood .l.stroke-yellow { -webkit-text-stroke-color: var(--o-yellow); }
.chooood .l.stroke-mint { -webkit-text-stroke-color: var(--o-mint); }
.chooood .l.stroke-blue { -webkit-text-stroke-color: var(--o-blue); }
.chooood .l.stroke-orange { -webkit-text-stroke-color: var(--o-orange); }
.chooood .l.stroke-lila { -webkit-text-stroke-color: var(--o-lila); }

.p-stripes-pink { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path d='M-2 2L2 -2M0 8L8 0M6 10L10 6' stroke='%23FCCFDE' stroke-width='2.5' fill='none'/></svg>"); }
.p-checks-yellow { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><rect x='0' y='0' width='5' height='5' fill='%23FFEB95'/><rect x='5' y='5' width='5' height='5' fill='%23FFEB95'/></svg>"); }
.p-dots-mint { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><circle cx='4' cy='4' r='2' fill='%23C0E8C0'/></svg>"); }
.p-stars-blue { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'><path d='M7 1L8.5 5.5L13 5.5L9.5 8L11 12.5L7 10L3 12.5L4.5 8L1 5.5L5.5 5.5Z' fill='%23BDD8F0'/></svg>"); }
.p-flowers-orange { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'><g fill='%23F8C8AB'><circle cx='7' cy='4' r='2'/><circle cx='7' cy='10' r='2'/><circle cx='4' cy='7' r='2'/><circle cx='10' cy='7' r='2'/></g><circle cx='7' cy='7' r='1.5' fill='%23FFEB95'/></svg>"); }
.p-hearts-lila { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M6 10.5C6 10.5 1 7.5 1 4.5C1 2.5 2.5 1 4 1C5 1 6 2 6 3C6 2 7 1 8 1C9.5 1 11 2.5 11 4.5C11 7.5 6 10.5 6 10.5Z' fill='%23D5C4E8'/></svg>"); }

.intro-text {
  max-width: 620px;
  margin: 2px auto 0;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 600;
  font-size: clamp(17px, 2.4vw, 21px);
  line-height: 1.5;
  color: var(--on-bg, var(--text-primary));
  text-align: center;
  padding: 0 16px;
}

/* ============================================================
   FILTER-PANEL
   ============================================================ */
/* Schmaler als die geteilte Variante in choood.css: auf der Startseite stehen
   nur zwei Filterkarten. */
.filter-panel {
  max-width: 1050px;
  margin: 8px auto 24px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 500px) {
  .cloud-wrap { aspect-ratio: 4 / 2; }
  .filter-panel { padding: 0 12px; }
}