/* Landingpage Kaminglasplatte, Zusätze zu Layout A (kaminglasplatte.css), nur auf /seiten/kaminglasplatte/ geladen.
   Rückmeldung des Betreibers vom 04.11.2026: Zeichnungen statt der Formbilder des bisherigen Shops (public/kaminplatte-bilder.mjs),
   Formen mit Maßen, Fläche vor dem Ofen, Kante mit Werkstattfotos. Handy zuerst, keine festen Breiten über 280 px. */

/* Bühne: Ofen auf der Platte mit den Maßen A und B */
.kp-a .kp-buehne-bild svg.kp-held-svg{display:block;width:100%;max-width:560px;height:auto;margin:0 auto;border:1px solid var(--t-line,#cfd7e1);border-radius:8px;background:#fff}
.kp-held-text{max-width:560px;margin:10px auto 0;font-size:14px;line-height:1.5;color:var(--t-muted,#5a6678)}

/* Aufstellung: Seitenansicht mit Abstand nach vorn */
.kp-a .kp-wahl .kp-szene{max-width:320px;border-radius:6px;border:1px solid var(--t-line,#cfd7e1)}

/* Ausführungen: Ofen auf der Platte in der Farbe des Glases */
.kp-karte-szene{display:block;width:100%;height:auto;border-bottom:1px solid var(--t-line,#cfd7e1);background:#f7f9fb}

/* Fläche vor dem Ofen: Text und Draufsicht */
.kp-brand{display:grid;gap:24px}
.kp-brand-bild{margin:0}
.kp-brand-bild svg{display:block;width:100%;max-width:460px;height:auto;border:1px solid var(--t-line,#cfd7e1);border-radius:8px;background:#fff}
.kp-legende{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px;max-width:460px}
.kp-legende li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;align-items:start;font-size:15px;line-height:1.45;color:#2b3a52}
.kp-legende span{display:block;width:22px;height:15px;margin-top:3px;border-radius:2px}
.kp-l-min{background:#cfe7e0;border:2px solid #4f7f75}
.kp-l-emp{background:#e8f0f8;border:2px dashed #154e8a}
.kp-legende .kp-l-tuer{height:5px;margin-top:9px;background:#f2884b;border-radius:3px}

/* Formen mit Maßen */
.kp-massformen{list-style:none;margin:18px 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:16px}
.kp-massformen figure{margin:0;height:100%;padding:12px 12px 14px;border:1px solid var(--t-line,#cfd7e1);border-radius:6px;background:#fff}
.kp-massformen svg{display:block;width:100%;max-width:300px;height:auto;margin:0 auto 8px}
.kp-massformen figcaption,.kp-kantenfotos figcaption{font-size:15px;line-height:1.45;color:#2b3a52}
.kp-massformen strong,.kp-kantenfotos strong{display:block;font-size:17px;color:var(--t-ink,#142a4c)}

/* Kanten: Werkstattfotos und Querschnitte */
.kp-kantenfotos{list-style:none;margin:18px 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:16px}
.kp-kantenfotos figure{margin:0;height:100%;border:1px solid var(--t-line,#cfd7e1);border-radius:6px;background:#fff;overflow:hidden}
.kp-kantenfotos img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:#eef3f2}
.kp-kantenfotos figcaption{padding:12px 14px 14px}

@media (min-width:960px){
 .kp-brand{grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:56px;align-items:start}
 .kp-massformen{grid-template-columns:repeat(3,minmax(0,1fr))}
 .kp-kantenfotos{grid-template-columns:repeat(5,minmax(0,1fr))}
}

/* Ausführungen mit echtem Glasfoto (sonst die Zeichnung oben): gleiche Höhe wie die Zeichnung, randlos zugeschnitten. */
main.kp-seite .kp-karte img.kp-karte-foto{display:block;width:100%;height:auto;aspect-ratio:46/33;object-fit:cover;border-bottom:1px solid var(--t-line,#cfd7e1);background:#f7f9fb}

/* Rückmeldung 05.11.2026: Leiste "Alle Formen" unter der Bühne, Erklärteile, Datenblatt, Pflege und Zubehör, Foto in der Bühne. */
.kp-alleformen{padding:28px 0 32px;border-top:1px solid var(--t-line,#cfd7e1)}
.kp-alleformen h2{font-size:22px;margin:0 0 12px}
.kp-alleformen ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:6px}
.kp-alleformen a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:80px;padding:8px 4px;border:1px solid var(--t-line,#cfd7e1);border-radius:6px;background:#fff;font-size:12px;letter-spacing:-.01em;font-weight:700;line-height:1.25;text-align:center;text-decoration:none}
.kp-alleformen a:hover,.kp-alleformen a:focus-visible{border-color:#154e8a}
.kp-alleformen .kp-form{width:min(76px,100%);height:auto}
.kp-alleformen span{max-width:100%;hyphens:none;-webkit-hyphens:none;overflow-wrap:normal}
.kp-massformen li{scroll-margin-top:96px}
/* Knopf je Form: unten in der Karte, alle Knöpfe einer Reihe auf gleicher Höhe. */
.kp-massformen figure{display:flex;flex-direction:column}
.kp-massformen figcaption{margin-bottom:14px}
.kp-massformen a.kp-form-knopf{margin-top:auto;justify-content:center;text-align:center}

.kp-erklaert{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:28px}
.kp-erklaert li{display:grid;gap:16px;align-items:center;scroll-margin-top:96px}
.kp-erklaert figure{margin:0;border:1px solid var(--t-line,#cfd7e1);border-radius:8px;overflow:hidden;background:#fff}
.kp-erklaert img,.kp-erklaert svg{display:block;width:100%;height:auto}
.kp-erklaert img.kp-erklaert-foto{aspect-ratio:3/2;object-fit:cover}
.kp-erklaert-zeichnung{position:relative;background:#eef3f2}
.kp-erklaert-zeichnung img{aspect-ratio:3/2;object-fit:contain;padding:6%}
.kp-erklaert figcaption{position:absolute;right:8px;bottom:8px;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.9);font-size:12px;font-weight:700;color:var(--t-muted,#5a6678)}
.kp-erklaert h3{font-size:21px;margin:0 0 8px}
.kp-erklaert p{color:#2b3a52}

.kp-datenblatt{display:grid;gap:16px;align-items:center}
.kp-datenblatt p{margin:0;color:#2b3a52}
.kp-pdf-groesse{font-weight:600;opacity:.85}

.kp-zubehoer{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:14px}
.kp-zubehoer a{display:grid;grid-template-columns:88px minmax(0,1fr);grid-template-rows:auto auto;column-gap:14px;align-items:center;min-height:104px;padding:10px 14px 10px 10px;border:1px solid var(--t-line,#cfd7e1);border-radius:6px;background:#fff;text-decoration:none}
.kp-zubehoer a:hover{border-color:#154e8a}
.kp-zubehoer img{grid-row:1/3;width:88px;height:88px;object-fit:contain}
.kp-zubehoer strong{display:block;font-size:16px}
.kp-zubehoer-link{font-size:14px;font-weight:700;text-decoration:underline;text-decoration-color:#f2884b;text-decoration-thickness:2px;text-underline-offset:4px}

.kp-held-foto{position:relative;max-width:560px;margin:0 auto}
.kp-held-foto img{display:block;width:100%;height:auto;border-radius:8px}
.kp-held-foto svg{position:absolute;inset:0;width:100%;height:100%}

@media (min-width:768px){
 .kp-erklaert li{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px}
 .kp-erklaert li:nth-child(even) figure{order:2}
 .kp-datenblatt{grid-template-columns:minmax(0,1fr) auto;gap:32px}
}

/* Wissen und "Auf einen Blick" untereinander statt Text links und Kasten rechts (Rückmeldung 11.11.2026: links zu viel freie
   Fläche, rechts voll). Die Fakten laufen im Kasten in Spalten. Nur diese Seite, Layout A bleibt für die anderen Seiten gleich. */
@media (min-width:600px){
 .kp-fakten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}
}
@media (min-width:960px){
 .kp-wissen{grid-template-columns:minmax(0,1fr);gap:32px}
 .kp-wissen-text{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:56px}
 .kp-wissen-text h2{grid-column:1/-1}
 .kp-wissen-text p{margin-top:0}
 .kp-kasten{padding:28px 32px}
 .kp-fakten{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:40px}
}

/* Beispielbilder der Bildstellen (11.11.2026): Aufstellung als Bild über die ganze Karte statt der kleinen Zeichnung. */
.kp-a .kp-wahl img.kp-szene-foto{max-width:none;aspect-ratio:3/2;object-fit:cover}
.kp-erklaert-beispiel{position:relative}

.kp-kamin-vergleich{position:relative;display:block}
.kp-kamin-vergleich .kp-ral-muster{position:absolute;right:0;bottom:0;width:24%;height:auto;aspect-ratio:3/2;object-fit:cover;border:2px solid white;border-radius:0}