/* muster.css
   Wiederverwendbar auf abdeckungen.html (Anzeichen, Inbegriffen, Fragen)
   Nur Variablen aus dem Bestand: --blau, --orange, --orange-dunkel, --grau,
   --rand, --hell, --radius, --text, --blau-hell */

/* ---------- Anzeichen ---------- */
.anzeichen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}
@media (min-width: 720px) {
  .anzeichen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .anzeichen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.anzeichen-karte {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  min-width: 0;
  padding: 1.25rem;
  background: #fff;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  color: var(--text);
}
.anzeichen-karte h3 {
  margin: 0;
  font-size: 1.1rem;
  color: var(--blau);
  overflow-wrap: anywhere;
}
.anzeichen-karte p { margin: 0; }
.anzeichen-etikett {
  align-self: flex-start;
  padding: .2rem .55rem;
  border-radius: var(--radius);
  background: var(--orange);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.anzeichen-etikett--refresh { background: var(--blau); }
.anzeichen-link {
  margin-top: auto;
  padding-top: .5rem;
  align-self: flex-start;
  color: var(--blau);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid var(--orange);
}
.anzeichen-link:hover,
.anzeichen-link:focus-visible { color: var(--orange-dunkel); }

/* ---------- Zwei Wege: gleich hohe Karten ---------- */
.wege { align-items: stretch; }
.weg-karte {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
}
.weg-karte .karte-inhalt {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.weg-titel {
  margin: 1rem 0 .25rem;
  font-weight: 700;
  color: var(--blau);
}
.weg-dauer {
  margin-top: 1rem;
  padding: .75rem 1rem;
  background: var(--blau-hell);
  border-radius: var(--radius);
  color: var(--text);
}
.weg-link {
  margin-top: auto;
  padding-top: 1rem;
}

/* ---------- Inbegriffen ---------- */
.inbegriffen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .75rem 2rem;
}
@media (min-width: 720px) {
  .inbegriffen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.inbegriffen li {
  position: relative;
  padding-left: 1.9rem;
  color: var(--text);
}
.inbegriffen li::before {
  content: "";
  position: absolute;
  left: .3rem;
  top: .2em;
  width: .45rem;
  height: .85rem;
  border: solid var(--orange);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

/* ---------- Fragen ---------- */
.fragen .details-liste { max-width: 50rem; }
.fragen summary { color: var(--blau); font-weight: 600; }
.fragen details p { color: var(--text); }

/* ---------- Vorher-Nachher ---------- */
.vorher-nachher[hidden] { display: none !important; }
.vorher-nachher-liste {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}
@media (min-width: 720px) {
  .vorher-nachher-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.vorher-nachher-karte {
  background: #fff;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 1rem;
  min-width: 0;
}
.vorher-nachher-bilder {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
}
.vorher-nachher-bilder figure { margin: 0; }
.vorher-nachher-bilder img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}
.vorher-nachher-bilder figcaption {
  margin-top: .3rem;
  font-size: .85rem;
  color: var(--grau);
}
.vorher-nachher-text {
  margin: .75rem 0 0;
  color: var(--text);
}

/* === Coverseal (abdeckungen.html) === */
/* ---------- Coverseal: in Aktion ---------- */
.cs-aktion {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  align-items: center;
}
@media (min-width: 960px) {
  .cs-aktion { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 2rem; }
}
.cs-video-rahmen { margin: 0; min-width: 0; }
.cs-video,
.cs-video-standbild {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--blau-hell);
}
.cs-video-standbild { display: none; }
@media (prefers-reduced-motion: reduce) {
  .cs-video { display: none; }
  .cs-video-standbild { display: block; }
}
.cs-aktion-text { min-width: 0; }
.cs-claim {
  margin: 0 0 1rem;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--blau);
}

/* ---------- Coverseal: drei Antriebe ---------- */
.cs-antriebe {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}
@media (min-width: 900px) {
  .cs-antriebe { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.cs-antrieb { background: #fff; border: 1px solid var(--rand); border-radius: var(--radius); }
.cs-antrieb h3 { margin: .5rem 0 .5rem; color: var(--blau); }
.cs-antrieb p { margin: 0 0 .5rem; }
.cs-antrieb--empfohlen {
  border: 2px solid var(--orange);
  box-shadow: 0 0 0 3px var(--blau-hell);
}
.cs-merkmale {
  margin: auto 0 0;
  padding: 1rem 0 0;
  list-style: none;
  border-top: 1px solid var(--rand);
  font-size: .9rem;
  color: var(--grau);
}
.cs-merkmale li + li { margin-top: .35rem; }

/* ---------- Coverseal: Kurzvergleich ---------- */
.kurzvergleich-wrap { max-width: 50rem; overflow-x: auto; }
.kurzvergleich {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  font-size: .95rem;
  color: var(--text);
}
.kurzvergleich th,
.kurzvergleich td {
  padding: .65rem .75rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--rand);
  overflow-wrap: anywhere;
  hyphens: auto;
}
.kurzvergleich thead th { background: var(--blau-hell); color: var(--blau); }
.kurzvergleich tbody th { color: var(--blau); font-weight: 600; width: 26%; }
.kurzvergleich tr:last-child th,
.kurzvergleich tr:last-child td { border-bottom: 0; }
@media (max-width: 480px) {
  .kurzvergleich { font-size: .85rem; }
  .kurzvergleich th,
  .kurzvergleich td { padding: .5rem .4rem; }
}

/* === Familienseiten: Merkmale, Grössen, Farbwahl, Bildkacheln (aqua-nova.html) === */
/* ============================================================
   Familienseiten (Compass): Merkmale, Grössen, Farbwahl, Bildkacheln
   Wiederverwendbar für Aqua Nova, Brillant, Classic, Riverina …
   ============================================================ */

/* ---------- Merkmale ---------- */
.merkmale {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}
@media (min-width: 720px) {
  .merkmale { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .merkmale { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.merkmal-karte {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  overflow: hidden;
}
.merkmal-bild { display: block; }
.merkmal-bild img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--blau-hell);
}
.merkmal-text { padding: 1rem 1.1rem 1.2rem; }
.merkmal-text h3 {
  margin: 0 0 .35rem;
  font-size: 1.1rem;
  color: var(--blau);
}
.merkmal-text p { margin: 0; color: var(--text); }

/* ---------- Grössen ---------- */
.groessen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}
@media (min-width: 720px) {
  .groessen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.groesse-karte {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  overflow: hidden;
}
.groesse-bild { display: block; }
.groesse-bild img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--blau-hell);
}
.groesse-inhalt {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 1.1rem 1.25rem 1.25rem;
}
.groesse-inhalt h3 {
  display: block;
  margin: 0 0 .75rem;
  color: var(--blau);
}
.groesse-masse { margin: 0; }
.groesse-masse > div {
  padding: .55rem 0;
  border-top: 1px solid var(--rand);
}
.groesse-masse > div:last-child { border-bottom: 1px solid var(--rand); }
.groesse-masse dt {
  display: block;
  font-size: .85rem;
  color: var(--grau);
}
.groesse-masse dd {
  display: block;
  margin: 0;
  color: var(--text);
  font-weight: 600;
}
.groesse-masse dd + dd { margin-top: .2rem; font-weight: 400; }
@media (min-width: 420px) {
  .groesse-masse > div {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    column-gap: 1rem;
  }
  .groesse-masse dd { grid-column: 2; }
  .groesse-masse dt { grid-row: 1 / span 2; padding-top: .1rem; }
}
.groesse-offen {
  display: inline-block;
  margin: .15rem 0 0;
  padding: .1rem .45rem;
  border: 1px solid var(--blau);
  border-radius: var(--radius);
  background: var(--blau-hell);
  color: var(--blau);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: normal;
  cursor: help;
  vertical-align: baseline;
}
.groesse-plan {
  margin: auto 0 0;
  padding-top: 1rem;
}
.groesse-plan a {
  display: inline-block;
  padding: .35rem 0;
  color: var(--blau);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid var(--orange);
}
.groesse-plan a:hover,
.groesse-plan a:focus-visible { color: var(--orange-dunkel); }
.groesse-plan .klein { display: block; margin-top: .35rem; }

/* ---------- Farbwahl ---------- */
.farbwahl {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}
.farbwahl-bild { margin: 0; min-width: 0; }
/* Mobil im Hochformat: Vorschau klebt unter dem Seitenkopf (68px); im Querformat nicht sticky */
@media (max-width: 719px) and (orientation: portrait) {
  .farbwahl-bild {
    position: sticky;
    top: 68px;
    z-index: 2;
    padding: .5rem 0;
    background: var(--hell);
  }
  .farbwahl-rahmen { max-height: 32vh; }
  .farbwahl-bild figcaption { margin-top: .4rem; gap: 0; }
  .farbwahl-name { font-size: 1rem; }
  .farbwahl-zeile { font-size: .9rem; }
  /* Fokussierte Muster nicht unter der Vorschau verstecken */
  .farbwahl-muster { scroll-margin-top: calc(68px + 32vh + 6rem); }
}
@media (min-width: 960px) {
  .farbwahl { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: 2rem; }
  .farbwahl-bild { position: sticky; top: calc(68px + 1rem); }
}
.farbwahl-rahmen {
  aspect-ratio: 1920 / 1303;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--hell);
  border: 1px solid var(--rand);
}
.farbwahl-rahmen picture,
.farbwahl-rahmen img {
  display: block;
  width: 100%;
  height: 100%;
}
.farbwahl-rahmen img { object-fit: cover; }
.farbwahl--muster .farbwahl-rahmen img {
  object-fit: contain;
  padding: 1.5rem;
  background: #fff;
}
.farbwahl-bild figcaption {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  margin-top: .75rem;
}
.farbwahl-name { font-size: 1.15rem; color: var(--blau); }
.farbwahl-zeile { color: var(--text); }
.farbwahl--muster .farbwahl-hinweis { display: none; }
.farbwahl-gruppen { min-width: 0; }
.farbwahl-gruppe + .farbwahl-gruppe { margin-top: 1.25rem; }
.farbwahl-gruppe h3 { margin: 0 0 .25rem; font-size: 1.1rem; }
.farbwahl-gruppe p { margin: 0 0 .6rem; }
.farbwahl-gruppe ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .4rem;
}
@media (min-width: 560px) {
  .farbwahl-gruppe ul { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.farbwahl-gruppe li { min-width: 0; }
.farbwahl-muster {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  width: 100%;
  min-height: 44px;
  padding: .3rem .2rem .35rem;
  background: #fff;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  color: var(--text);
  font-size: .78rem;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
}
.farbwahl-muster img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--rand);
}
.farbwahl-muster:hover { border-color: var(--blau); }
.farbwahl-muster:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}
.farbwahl-muster[aria-pressed="true"] {
  border: 3px solid var(--blau);
  padding: calc(.3rem - 2px) calc(.2rem - 2px) calc(.35rem - 2px);
  font-weight: 700;
  color: var(--blau);
}
.farbwahl-muster[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  top: .2rem;
  right: .4rem;
  width: .4rem;
  height: .75rem;
  border: solid var(--blau);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

/* ---------- Bildkacheln ---------- */
.bildkacheln {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  margin-top: 1.5rem;
}
@media (min-width: 720px) {
  .bildkacheln { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: stretch; }
}
.bildkachel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--text);
  text-decoration: none;
}
.bildkachel-bild { display: block; }
.bildkachel-bild img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--blau-hell);
}
@media (min-width: 720px) {
  /* Beide Bildbereiche gleich hoch, Bilder füllen die Fläche */
  .bildkachel-bild {
    flex: 0 0 auto;
    height: clamp(14rem, 28vw, 22rem);
    overflow: hidden;
  }
  .bildkachel-bild img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
  }
  .bildkachel-text { flex: 1 1 auto; }
}
.bildkachel-text {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: 1rem 1.2rem 1.2rem;
}
.bildkachel-text strong {
  font-size: 1.15rem;
  color: var(--blau);
  border-bottom: 2px solid var(--orange);
  align-self: flex-start;
}
.bildkachel--gross .bildkachel-text strong { font-size: 1.3rem; }
.bildkachel:hover { border-color: var(--blau); }
.bildkachel:hover .bildkachel-text strong { color: var(--orange-dunkel); }
.bildkachel:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

/* === Familienseiten: Optionen (wischbare Kachelreihen) === */
/* ===== Komponente Optionen ===== */
.optionen-kopf{margin-bottom:2rem;max-width:44rem}
.optionen-gruppen{display:grid;row-gap:2.25rem;min-width:0}
.optionen-gruppe{min-width:0}
.optionen-gruppe > h3{margin-bottom:1rem}

/* Mobil: jede Reihe wischbar, alle Kacheln ca. 78 % breit */
.optionen-reihe{
  list-style:none;margin:0;padding:0 0 .75rem;
  display:flex;gap:1rem;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  scrollbar-width:thin;scrollbar-color:var(--rand) transparent;
  max-width:100%;
}
.optionen-reihe::-webkit-scrollbar{height:6px}
.optionen-reihe::-webkit-scrollbar-thumb{background:var(--rand);border-radius:3px}
.optionen-reihe:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:var(--radius)}

.optionen-reihe > .optionen-kachel{flex:0 0 78%;scroll-snap-align:start}

.optionen-kachel{
  position:relative;min-width:0;
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--rand);border-radius:var(--radius);
  overflow:hidden;
}
.optionen-bild{background:var(--hell)}
.optionen-bild img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}

.optionen-inhalt{padding:1rem 1rem 1.15rem;display:flex;flex-direction:column;flex:1}
.optionen-inhalt h4{margin-bottom:.4rem}
.optionen-inhalt p{margin-bottom:.75rem;font-size:.95rem}

.optionen-link{color:var(--blau);text-decoration:none}
.optionen-link::after{content:"";position:absolute;inset:0;z-index:1;border-radius:var(--radius)}
.optionen-kachel:hover{border-color:var(--orange)}
.optionen-kachel:hover .optionen-link{color:var(--orange-dunkel);text-decoration:underline}
.optionen-link:focus-visible{outline:none}
.optionen-link:focus-visible::after{outline:3px solid var(--orange);outline-offset:-3px}

.optionen-etikett{
  align-self:flex-start;margin-top:auto;
  font-size:.8rem;font-weight:700;line-height:1.3;
  padding:.2rem .55rem;border-radius:3px;
}
/* Kontrast: #fff auf --orange-dunkel #9a4314 ca. 6.5:1 */
.optionen-etikett--empfohlen{background:var(--orange-dunkel);color:#fff}
/* Kontrast: --grau #5a6572 auf --hell #f4f6f8 ca. 5.4:1 (≥4.5:1) */
.optionen-etikett--pruefen{background:var(--hell);color:var(--grau);border:1px solid var(--rand)}

/* Desktop: Abdeckung volle Breite (5 Spalten), darunter Heizung, Gegenstrom, Licht in einer Zeile */
@media (min-width:900px){
  .optionen-gruppen{grid-template-columns:repeat(6,minmax(0,1fr));column-gap:1rem}
  .optionen-gruppe--abdeckung{grid-column:1/-1}
  .optionen-gruppe--heizung{grid-column:span 3}
  .optionen-gruppe--gegenstrom{grid-column:span 2}
  .optionen-gruppe--licht{grid-column:span 1}

  .optionen-reihe{
    display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
    overflow:visible;padding-bottom:0;scroll-snap-type:none;
  }
  .optionen-reihe > .optionen-kachel{flex:none}
}

/* === Kundensicht: Einstieg neue-pools, Klarblick-App-Kachel === */
@media (min-width: 900px) {
  .einstieg-reihe {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow-x: visible;
    scroll-snap-type: none;
  }
  .einstieg-reihe > .optionen-kachel {
    width: auto;
    min-width: 0;
  }
}
.klarblick-app {
  display: grid;
  gap: 1.25rem;
  align-items: center;
}
.klarblick-app-bild {
  margin: 0;
}
.klarblick-app-bild img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
}
.klarblick-app-inhalt > :first-child {
  margin-top: 0;
}
.klarblick-app-inhalt > :last-child {
  margin-bottom: 0;
}
@media (min-width: 900px) {
  .klarblick-app {
    grid-template-columns: 2fr 3fr;
    gap: 2rem;
  }
}
.klarblick-app-bild img{border-radius:var(--radius)}

/* Compass-Raster: Aussen-, Innenmass und Tiefe je eigene Zeile (Gman 09.10.2026 11:13) */
.cf-modelle li{display:block}
.cf-modelle .cf-mname,.cf-modelle .cf-mmass{display:block}
.cf-quelle{font-size:.8rem}
.cf-neu-k{display:inline-block;margin-left:.35rem;padding:0 .4rem;border-radius:4px;background:var(--hell);border:1px solid var(--rand);color:var(--text);font-size:.75rem;font-weight:500;vertical-align:.1em}
.cf-neu{display:inline-block;margin:.1rem 0 .5rem;padding:.2rem .55rem;border-radius:4px;background:var(--hell);border:1px solid var(--rand);color:var(--text);font-size:.85rem}

/* Aqua Nova: drei Grössen (Gman 09.10.2026 11:16) */
@media (min-width:1100px){.groessen{grid-template-columns:repeat(3,minmax(0,1fr))}}