/* ============================================================
   Badipool – Konfigurator-Einstieg mit 3 Kacheln (Gman 08.10.2026)
   Umbau: Kachel 1 «Fertigbecken» mit Marken-Chips (Korrektur nach Prüfung Sol)
   Eingebunden nach runde4.css. Nur .ke-Klassen.
   ============================================================ */
.ke{background:#fff}
.ke-titel{font-size:clamp(1.8rem,4vw,3rem);letter-spacing:-.03em;line-height:1.1;margin:0 0 .75rem}
.ke-titel em{font-family:var(--font-serif);font-style:italic;font-weight:400;color:var(--orange)}
.ke-lead{max-width:56ch;margin:0 0 1.5rem}

.ke-liste{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.ke-liste li{margin:0}

/* Handy: Bild links, Text rechts, kompakt */
.ke-kachel{
  display:grid;grid-template-columns:minmax(7rem,38%) 1fr;align-items:stretch;
  min-height:48px;height:100%;
  background:#fff;color:var(--blau);text-decoration:none;
  border:1px solid var(--rand);border-radius:var(--radius);overflow:hidden;
  transition:border-color .15s ease,box-shadow .15s ease}
a.ke-kachel:hover{border-color:var(--blau);box-shadow:0 4px 14px rgba(18,46,77,.1)}
a.ke-kachel:focus-visible{outline:3px solid var(--orange);outline-offset:3px}

.ke-bild{display:block;background:var(--hell)}
.ke-bild img{display:block;width:100%;height:100%;aspect-ratio:4/3;object-fit:cover}

.ke-text{display:flex;flex-direction:column;gap:.3rem;padding:.75rem .9rem}
.ke-name{font-size:1.05rem;line-height:1.2;margin:0;color:var(--blau)}
.ke-zeile{font-size:.9rem;line-height:1.4;color:var(--grau)}
.ke-los{margin-top:auto;padding-top:.25rem;font-size:.92rem;font-weight:700;color:var(--orange)}
a.ke-kachel:hover .ke-los{text-decoration:underline;text-underline-offset:.2em}

/* Kachel 1: Fertigbecken mit Marken-Chips (kein Kachel-Link) */
.ke-marken{grid-template-areas:"bild text" "chips chips"}
.ke-marken .ke-bild{grid-area:bild}
.ke-marken .ke-text{grid-area:text}
.ke-chips{
  grid-area:chips;display:flex;flex-wrap:wrap;gap:.5rem;
  padding:.6rem .75rem .75rem;border-top:1px solid var(--rand)}
.ke-chip{
  box-sizing:border-box;
  flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:.3rem;
  min-height:44px;padding:0 .8rem;
  border:1.5px solid var(--blau);border-radius:999px;
  background:#fff;color:var(--blau);font-size:.9rem;font-weight:700;line-height:1.1;
  text-decoration:none;white-space:nowrap;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.ke-chip span{color:var(--orange)}
.ke-chip:hover{background:var(--hell);border-color:var(--orange)}
.ke-chip:focus-visible{outline:3px solid var(--orange);outline-offset:2px}

/* Ab 360 px: drei gleich breite Chips in einer Zeile, Pfeil entfällt */
@media (min-width:360px){
  .ke-chips{flex-wrap:nowrap;gap:.4rem}
  .ke-chip{flex:1 1 0;min-width:0;padding:0 .35rem;font-size:.8rem}
  .ke-chip span{display:none}
}

.ke-finder{margin:1.25rem 0 0;font-size:.95rem;color:var(--grau)}
.ke-finder a{color:var(--blau);font-weight:600;text-decoration:underline;text-underline-offset:.25em}
.ke-finder a:hover{color:var(--orange)}
.ke-finder a:focus-visible{outline:3px solid var(--orange);outline-offset:2px;border-radius:2px}

/* Handy und Tablet: Lead kompakter, schmalere Bildspalte nur bei Fertigbecken */
@media (max-width:899.98px){
  .ke-lead{font-size:1.05rem;line-height:1.45;margin-bottom:1.25rem}
  .ke-marken{grid-template-columns:28% minmax(0,1fr)}
}

/* Desktop: drei Kacheln nebeneinander, Bild oben */
@media (min-width:900px){
  .ke-liste{grid-template-columns:repeat(3,1fr);gap:1.5rem}
  .ke-kachel{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .ke-marken{grid-template-areas:"bild" "text" "chips";grid-template-rows:auto 1fr auto}
  .ke-bild img{height:auto}
  .ke-text{padding:1.1rem 1.25rem 1.25rem;gap:.4rem}
  .ke-name{font-size:1.25rem}
  .ke-zeile{font-size:.98rem}
  .ke-los{padding-top:.6rem;font-size:1rem}
  .ke-chips{border-top:0;padding:0 .75rem 1.25rem;gap:.5rem}
  .ke-chip{font-size:.88rem;padding:0 .5rem}
}

@media (prefers-reduced-motion:reduce){.ke-kachel,.ke-chip{transition:none}}