/* Layout der Produktseiten (Puzzle, Klick, Design Klick, Design Puzzle).
   Aufbau: Kopfbild mit Titel, danach alternierende Text-Bild-Reihen,
   Ausfuehrungen, Einsatzbereiche, technische Daten, Abschluss mit Anfrage.
   Alle Bildflaechen tragen Fotos. .ph-flaeche bleibt als Grundfarbe
   unter dem Bild stehen, bis es geladen ist.
   Kruemelpfad, Knopfzeile und Abschlussband liegen in basis.css, weil
   auch die Textseiten (FAQ, Impressum, Ueber uns) sie brauchen. */

/* ---------- Kopf ---------- */
.info-kopf{position:relative;min-height:62vh;display:flex;align-items:flex-end;
  padding-top:calc(var(--header-h) + var(--s8));padding-bottom:var(--s8);
  background:var(--stage);overflow:hidden}
.info-kopf .ph-flaeche{position:absolute;inset:0;border-radius:0;aspect-ratio:auto}
.kopf-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Lesbarkeitsverlauf unter Titel und Kruemelpfad */
/* Gemessen bei 375 px (Sichtung 08.09.): Kruemelpfad 4.06:1, Titel 4.33:1
   auf dem hellsten Kopffoto. Mitte und Oberkante deshalb etwas dichter. */
.info-kopf::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,oklch(14% 0.015 60 / .9) 0%,
    oklch(14% 0.015 60 / .48) 46%,oklch(14% 0.015 60 / .62) 100%)}
.info-kopf .shell{position:relative;z-index:2;color:var(--on-dark)}
.info-kopf h1{max-width:16ch;text-shadow:0 2px 24px var(--scrim)}
.info-kopf p{margin-top:var(--s4);max-width:42ch;color:var(--on-dark-2);
  text-shadow:0 1px 12px var(--scrim)}

/* ---------- Alternierende Reihen ---------- */
.reihe{padding-block:var(--pad-section)}
.reihe .shell{display:grid;grid-template-columns:1fr 1fr;
  gap:var(--s9);align-items:center}
/* Jede zweite Reihe spiegelt Bild und Text */
.reihe.gedreht .r-bild{order:-1}
.reihe h2{max-width:20ch}
.reihe p{margin-top:var(--s5);max-width:44ch;color:var(--ink-2)}
.reihe p + p{margin-top:var(--s4)}
.ph-flaeche{background:var(--ph-maker);border-radius:var(--radius);aspect-ratio:4/3}
.ph-hoch{aspect-ratio:3/4}
/* Reihenbild: fuellt die Flaeche, Format bleibt in jeder Reihe gleich */
.r-bild img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--radius);background:var(--ph-maker);display:block}

/* ---------- Merkmalsliste ---------- */
/* Die Spaltenbreite fuer das Stichwort liegt auf der Liste, nicht auf der
   einzelnen Zeile. Waere jede Zeile ihr eigenes Raster, begaenne der Text
   hinter "Stärke" an anderer Stelle als hinter "Oberfläche".
   Die Zeile selbst faellt dafuer ueber display:contents aus dem Kasten
   heraus, ihre beiden Kinder werden direkt zu Rasterfeldern. Das haelt
   dieselbe Spaltenbreite fuer alle Zeilen wie subgrid, kommt aber ohne
   subgrid aus. Die Trennlinie tragen deshalb die beiden Kinder, nicht die
   Zeile; weil Schriftgrad und Zeilenhoehe in beiden gleich sind, liegen ihre
   Oberkanten auf derselben Hoehe und die Linie bleibt durchgehend. */
.merkmale{margin-top:var(--s6);display:grid;grid-template-columns:auto 1fr;
  column-gap:var(--s4);row-gap:var(--s4);align-items:baseline}
.merkmale li{display:contents}
.merkmale b,.merkmale span{padding-top:var(--s3);
  border-top:1px solid var(--line)}
.merkmale b{font-family:var(--f-body);font-weight:700;white-space:nowrap}
.merkmale span{color:var(--ink-2)}

/* ---------- Ausfuehrungen (Dekore, Staerken, Farben) ---------- */
.ausfuehrungen{padding-block:var(--pad-section);background:var(--surface)}
/* auto-fit statt auto-fill: leere Spuren fallen dadurch auf null zusammen und
   die vorhandenen Karten fuellen die Reihe. Mit auto-fill legte das Raster bei
   1440 px fuenf Spuren an, obwohl nur vier Karten da waren, und liess rechts
   252 px offen stehen. */
.auf-grid{margin-top:var(--s7);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s6) var(--s5)}
.auf-karte{display:flex;flex-direction:column;gap:var(--s2)}
.auf-karte .probe{aspect-ratio:4/3;border-radius:var(--radius);
  border:1px solid var(--line);overflow:hidden;background:var(--surface)}
/* Gleiches sanftes Heranfahren wie im Dekorraster der Startseite */
.auf-karte .probe img{width:100%;height:100%;object-fit:cover;display:block;
  transform-origin:center;
  transition:transform var(--dur-slow) var(--ease-out)}
.auf-karte .probe:hover img{transform:scale(1.04)}

@media (prefers-reduced-motion:reduce){
  .auf-karte .probe img{transition:none}
  .auf-karte .probe:hover img{transform:none}
}
.auf-karte h3{font-family:var(--f-body);font-weight:700;font-size:var(--text-body);margin-top:var(--s2)}
.auf-karte .masse{font-size:var(--text-small);color:var(--ink-2)}

/* ---------- Einsatzbereiche je System ----------
   Wunsch der Kundin vom 07.09.: auf jeder Produktseite die Bereiche, fuer
   die das System gedacht ist. Als Wortkacheln ohne Fotos, weil nicht fuer
   jeden Bereich ein Foto vorliegt und die Liste je System verschieden lang
   ist. Jede Kachel fuehrt ins Angebotsformular, das System steht dann
   schon drin. */
.einsatz-system{padding-block:var(--pad-section)}
.einsatz-system .shell{display:grid;grid-template-columns:1fr 2fr;gap:var(--s9);
  align-items:start}
.einsatz-system h2{max-width:16ch}
.einsatz-system p{margin-top:var(--s4);max-width:34ch;color:var(--ink-2)}
.bereich-liste{display:flex;flex-wrap:wrap;gap:var(--s3)}
.bereich-liste a{display:inline-flex;align-items:center;min-height:52px;
  padding:0 var(--s5);border-radius:var(--radius-s);
  border:1px solid var(--rahmen);background:var(--surface);
  font-size:var(--text-body);font-weight:500;text-decoration:none;color:var(--ink);
  transition:border-color var(--dur-fast) var(--ease-out),
             background-color var(--dur-fast) var(--ease-out)}
.bereich-liste a:hover{border-color:var(--ink);background:var(--foto-grund)}

/* ---------- Technische Daten ---------- */
.technik{padding-block:var(--pad-section);background:var(--surface)}
.technik p{max-width:38ch;color:var(--ink-2)}
.technik .shell{display:grid;grid-template-columns:1fr 1fr;gap:var(--s9);
  align-items:start}
.datentabelle{width:100%;border-collapse:collapse;margin-top:var(--s5)}
.datentabelle th,.datentabelle td{text-align:left;padding:var(--s3) 0;
  border-bottom:1px solid var(--line);vertical-align:top}
.datentabelle th{font-weight:500;color:var(--ink-2);width:46%;font-size:var(--text-small)}
.datentabelle td{font-weight:500}
/* Datenblatt und Verlegeanleitung als PDF, unter dem Einleitungstext. */
.download-liste{margin-top:var(--s5);display:grid;gap:var(--s3)}
.download-liste a{display:inline-flex;align-items:center;gap:var(--s3);min-height:44px;
  font-size:var(--text-small);font-weight:500;color:var(--ink);
  text-decoration:underline;text-underline-offset:4px;
  transition:color var(--dur-fast) var(--ease-out)}
.download-liste a:hover{color:var(--accent-strong)}
.download-liste svg{flex:none;color:var(--ink-2)}
.download-liste span{color:var(--ink-2);font-weight:400}

/* ---------- Galerie ----------
   Waagerecht rastende Bildleiste mit Pfeilen links und rechts daneben,
   nicht auf dem Foto (dort gingen sie je nach Bildstelle unter). Genutzt
   von projekte.html und im Kopf der Einsatzseiten, Skript assets/galerie.js.
   Drei Spalten: ohne Skript sind die Knoepfe hidden, die Aussenspalten
   fallen auf null und das Bild nimmt die volle Breite. Das Polster der
   Pfeile bringt die Trefferflaeche auf 46 mal 54 px. */
[data-galerie]{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center}
.pg-spur{grid-column:2;grid-row:1;
  list-style:none;margin:0;padding:0;display:flex;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  border-radius:var(--radius);scrollbar-width:none;
  overscroll-behavior-x:contain}
.pg-spur::-webkit-scrollbar{display:none}
.pg-spur>li{flex:0 0 100%;scroll-snap-align:start}
.pg-spur img{display:block;width:100%;height:auto;aspect-ratio:3/2;
  object-fit:cover;background:var(--surface)}
.pg-spur:focus-visible{outline-offset:4px}
@media (hover:hover){
  .pg-spur{cursor:grab}
  .pg-spur.zieht{cursor:grabbing;user-select:none}
}
.pg-pfeil{grid-row:1;background:none;border:0;
  padding:var(--s3) var(--s2);cursor:pointer;color:var(--ink-2);
  transition:color var(--dur-fast) var(--ease-out),
             opacity var(--dur-fast) var(--ease-out)}
.pg-pfeil:hover,.pg-pfeil:focus-visible{color:var(--accent-strong)}
.pg-pfeil svg{display:block}
.pg-zurueck{grid-column:1}
.pg-vor{grid-column:3}
.pg-pfeil[disabled]{opacity:.28;cursor:default;color:var(--ink-2)}
.pg-stand{grid-column:2;grid-row:2;
  margin-top:var(--s3);font-size:var(--text-meta);
  letter-spacing:.03em;color:var(--ink-2)}
@media (prefers-reduced-motion:reduce){
  .pg-spur{scroll-behavior:auto}
}
/* Auf dem Handy nehmen die Pfeile neben dem Bild 92 px der 311 px Breite.
   Deshalb ruecken sie unter das Bild, links und rechts vom Zaehler, und die
   Leiste bekommt die volle Breite. Wischen bleibt der Hauptweg. */
@media (max-width:760px){
  .pg-spur{grid-column:1 / -1}
  .pg-pfeil{grid-row:2;margin-top:var(--s2)}
  .pg-stand{margin-top:var(--s2);text-align:center;align-self:center}
}

/* ---------- Responsiv ---------- */
@media (max-width:1023px){
  .reihe .shell,.technik .shell,.einsatz-system .shell{grid-template-columns:1fr;gap:var(--s7)}
  .reihe.gedreht .r-bild{order:0}
  .info-kopf{min-height:44vh}
  .ph-hoch{aspect-ratio:4/3}
}
@media (max-width:760px){
  .info-kopf{min-height:0;
    padding-top:calc(var(--header-h) + var(--s5));padding-bottom:var(--s6)}
  .info-kopf p{margin-top:var(--s3)}
  /* Auf dem Handy stehen Bild und Text ohnehin untereinander. Die
     Sektionspolster vom Rechner ergaben dort bis zu 178 px Leerraum
     zwischen zwei Abschnitten, das reisst die Seite auseinander.
     Reihen enger als Abschnitte, weil sie zusammengehoeren. */
  .reihe{padding-block:var(--s6)}
  .ausfuehrungen,.einsatz-system,.technik{padding-block:var(--s8)}
  .einsatz-system .shell{gap:var(--s5)}
  .bereich-liste a{min-height:44px;padding:0 var(--s4);font-size:var(--text-small)}
}
@media (max-width:640px){
  /* Einspaltig gibt es keine gemeinsame Stichwortspalte mehr, deshalb faellt
     auch display:contents weg. Die Zeile ist wieder ein eigener Kasten und
     traegt Trennlinie und Polster selbst, innen stehen Stichwort und Text
     eng untereinander. */
  .merkmale{display:block}
  .merkmale li{display:grid;grid-template-columns:1fr;gap:var(--s1);
    padding-top:var(--s3);border-top:1px solid var(--line)}
  .merkmale li + li{margin-top:var(--s4)}
  .merkmale b,.merkmale span{padding-top:0;border-top:0}
}