/* Produktseite Zubehör, Variante 1 "Set direkt im Kaufkasten" (Issue #19, Pilot Stabilisierung). Erzeugt von
   server/zubehoer-produktseite.mjs. Keine Inline-Stile: Bild- und Maßbildbreite stehen als Attribute am Element. */

/* Bild-Bühne: die Spalte richtet sich nach dem Bild (höchstens 1,25-fache Originalgröße, Breite am img), keine Freifläche
   neben dem Bild. Unter 861 px einspaltig wie die übrige Produktseite (sortiment.css). */
/* sortiment.css lädt nach diesem Blatt, daher die doppelte Klasse. */
.p1-kopf.zp-kopf { grid-template-columns:auto minmax(0,1fr); }
.zp-kopf .p1-galerie { max-width:608px; }
.p1-galerie .zp-buehne { display:flex; justify-content:center; align-items:center; aspect-ratio:auto; padding:24px; background:#fff; border:1px solid var(--t-line); }
.p1-galerie .zp-buehne img { position:static; display:block; max-width:100%; height:auto; object-fit:contain; }
.zp-massbild { margin:16px 0 0; padding:16px 24px; background:#fff; border:1px solid var(--t-line); }
.zp-massbild svg { display:block; max-width:100%; height:auto; margin-inline:auto; }
.zp-massbild figcaption { margin-top:8px; }

/* Name, Unterzeile, Kennwerte */
.zp-unterzeile { margin:6px 0 0; font-size:14px; color:var(--t-muted); }
.zp-kennwerte { display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:16px 0 0; padding:0; }
.zp-kennwerte li { padding:6px 12px; border:1px solid var(--t-line); border-radius:999px; background:#fff; font-size:13px; font-weight:600; line-height:1.3; }

/* Kaufkasten: Preis groß, darunter eine Zeile Lieferzeit, Gewährleistung, Beratung */
.zp-kaufzeile { display:flex; flex-wrap:wrap; gap:4px 0; margin:8px 0 0; font-size:13px; color:var(--t-muted); }
.zp-kaufzeile > * + *::before { content:"·"; display:inline-block; padding-inline:8px; color:var(--t-muted); text-decoration:none; }
.zp-kaufzeile a { color:inherit; text-underline-offset:3px; }

/* Set im Kaufkasten */
.zp-set { margin-top:20px; padding-top:18px; border-top:1px solid var(--t-line); }
.zp-set-titel { margin:0 0 10px; font-size:16px; }
.zp-teile { display:grid; gap:8px; list-style:none; margin:0; padding:0; }
.zp-teil { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:4px 12px; padding:10px; border:1px solid var(--t-line); background:var(--t-paper); }
.zp-teil:has(input:checked) { border-color:var(--t-ink); background:#fff; }
.zp-teil-wahl { display:grid; grid-template-columns:auto 56px minmax(0,1fr) auto; align-items:center; gap:10px; min-width:0; cursor:pointer; }
.zp-teil-wahl input { width:22px; height:22px; margin:0; }
.zp-teil-wahl img, .zp-teil-ohnebild { width:56px; height:56px; object-fit:contain; background:#fff; border:1px solid var(--t-line); }
.zp-teil-text { display:grid; gap:2px; min-width:0; overflow-wrap:anywhere; }
.zp-teil-name { font-size:14px; font-weight:700; line-height:1.35; }
.zp-teil-zeile, .zp-teil-beleg { font-size:12px; color:var(--t-muted); line-height:1.4; }
.zp-teil-einschraenkung { font-size:12px; font-weight:700; line-height:1.4; }
.zp-teil-preis { font-size:14px; font-weight:700; white-space:nowrap; }
.zp-teil-link { display:inline-flex; align-items:center; min-height:44px; font-size:13px; color:inherit; text-underline-offset:3px; }
.zp-summe { display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 12px; margin:14px 0 0; font-size:15px; }
.zp-summe strong { font-size:20px; }
.zp-set-fehler { margin:10px 0 0; font-size:14px; font-weight:700; }
.zp-set .t-wege { margin-top:14px; }

@media (max-width:860px) {
  .p1-kopf.zp-kopf { grid-template-columns:minmax(0,1fr); }
  .zp-kopf .p1-galerie { max-width:none; }
}
@media (max-width:560px) {
  .zp-teil { grid-template-columns:minmax(0,1fr); }
  .zp-teil-wahl { grid-template-columns:auto 48px minmax(0,1fr); }
  .zp-teil-wahl img, .zp-teil-ohnebild { width:48px; height:48px; }
  .zp-teil-preis { grid-column:3; }
  .zp-teil-link { justify-self:start; }
}

/* Artikelseite übersichtlicher, mehr Orange (Karte 101). Orange nur als Markierung (Kante, Marke,
   Leiste), nie als Schrift auf Weiß und nie als Knopf: Vorwärts-Knöpfe Leitblau mit weißer Schrift (CLAUDE.md). Formsprache
   wie im Glas-Konfigurator (glass-sheet.css #gc-zubehoer): Marke als Glaskante, 6 px Kante links, Ausgewähltes mit Haken.
   Doppelte Angaben (Artikelnummer, Lieferzeit) stehen nur noch einmal oben; Hersteller mit Partnerhinweis bleibt. */
.zp-seite { --zp-orange:var(--k-orange,#f2884b); --zp-tinte:var(--t-ink,#142a4c); --zp-blau:var(--k-blau,#154e8a); --zp-blau-tief:var(--k-blau-tief,#0f3c6b); }
.zp-seite .zp-marke, .zp-seite .p1-info > .t-eyebrow::before, .zp-seite .p1-varianten h2::before, .zp-seite .zp-set-titel::before,
.zp-seite .p1-daten > h2::before, .zp-seite .p1-verwandt > h2::before {
  content:""; display:inline-block; flex:none; width:22px; height:10px; margin-right:10px; vertical-align:.08em;
  background:var(--zp-orange); clip-path:polygon(0 0,100% 0,calc(100% - 4px) 100%,0 100%);
}
.zp-seite .p1-daten > h2::before, .zp-seite .p1-verwandt > h2::before { width:28px; height:14px; margin-right:14px; clip-path:polygon(0 0,100% 0,calc(100% - 5px) 100%,0 100%); }
.zp-seite .p1-info > .t-eyebrow { display:flex; align-items:center; margin:0; }

/* Galerie wandert beim Blättern mit, links bleibt keine leere Spalte neben Kaufkasten und Set. */
@media (min-width:861px) and (min-height:720px) {
  .zp-seite .zp-kopf .p1-galerie { position:sticky; top:calc(var(--t-kopf-h,0px) + 24px); }
}

/* Kennwerte: weiße Marken mit oranger Kante */
.zp-seite .zp-kennwerte li { border-radius:0; border-color:var(--t-line); box-shadow:inset 3px 0 var(--zp-orange); padding:6px 12px 6px 14px; color:var(--zp-tinte); }

/* Ausführung: ausgewählt mit Tintenrand, oranger Kante und orangem Haken */
.zp-seite .p1-varianten { margin:26px 0 0; }
.zp-seite .p1-varianten h2 { display:flex; align-items:center; font-size:16px; }
.zp-seite .p1-varianten a:hover { border-color:var(--zp-tinte); }
.zp-seite .p1-varianten a[aria-current] { border:2px solid var(--zp-tinte); padding:9px; background:#fff; box-shadow:inset 5px 0 var(--zp-orange); padding-left:14px; }
.zp-seite .p1-varianten-haken { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; background:var(--zp-orange); color:var(--zp-tinte); font-size:13px; font-weight:800; line-height:1; }

/* Kaufkasten: Tintenrand mit oranger Oberkante, Preis groß, darunter drei Zusagen mit oranger Marke statt Punkten */
.zp-seite .p1-kasten { border:1px solid var(--zp-tinte); border-top:5px solid var(--zp-orange); padding:24px 28px 28px; box-shadow:0 10px 28px rgba(20,42,76,.08); }
.zp-seite .p1-preis { font-size:38px; font-weight:700; line-height:1.1; color:var(--zp-tinte); }
.zp-seite .p1-kasten > .t-klein { max-width:none; }
.zp-seite .zp-kaufzeile { gap:8px 22px; margin:14px 0 0; font-size:13px; font-weight:600; color:var(--zp-tinte); }
.zp-seite .zp-kaufzeile > * + *::before { content:none; }
.zp-seite .zp-kaufzeile > * { display:inline-flex; align-items:center; gap:8px; }
.zp-seite .zp-kaufzeile > *::before { content:""; display:inline-block; flex:none; width:10px; height:10px; padding:0; background:var(--zp-orange); clip-path:polygon(0 0,100% 0,calc(100% - 3px) 100%,0 100%); }
.zp-seite .zp-kaufzeile a { min-height:44px; margin-block:-12px; }
.zp-seite .p1-kasten > .zp-kaufzeile + .t-klein { margin:14px 0 0; padding:10px 12px; background:var(--t-paper); color:var(--t-muted); }

/* Set: Überschrift mit Marke, ausgewählte Teile mit oranger Kante, Summe als eigene Zeile. Hauptknopf im Kasten (Set oder
   Direktkauf #90) Leitblau. */
.zp-seite .zp-set { margin-top:24px; padding-top:22px; }
.zp-seite .zp-set-titel { display:flex; align-items:center; margin-bottom:12px; }
.zp-seite .zp-teil { padding:12px 14px; transition:border-color .15s, box-shadow .15s; }
.zp-seite .zp-teil:hover { border-color:var(--zp-tinte); }
.zp-seite .zp-teil:has(input:checked) { border-color:var(--zp-tinte); background:#fff; box-shadow:inset 5px 0 var(--zp-orange); }
.zp-seite .zp-teil-wahl input { accent-color:var(--zp-tinte); }
.zp-seite .zp-teil-beleg { font-weight:600; color:var(--zp-tinte); }
.zp-seite .zp-summe { max-width:none; align-items:baseline; margin:16px 0 0; padding:14px 0 0; border-top:1px solid var(--t-line); color:var(--zp-tinte); }
.zp-seite .zp-summe strong { font-size:26px; }
.zp-seite .p1-kasten .t-wege { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.zp-seite .p1-kasten .t-wege .button:not(.secondary) { flex:1 1 220px; background:var(--zp-blau); border-color:var(--zp-blau); color:#fff; }
.zp-seite .p1-kasten .t-wege .button:not(.secondary):hover { background:var(--zp-blau-tief); border-color:var(--zp-blau-tief); }
.zp-seite .p1-kasten .t-wege .button.secondary { flex:0 1 auto; }

/* Unter dem Kasten nur noch der Hersteller mit Partnerhinweis; Artikelnummer und Lieferzeit stehen schon oben. */
.zp-seite .p1-eck { grid-template-columns:minmax(0,1fr); margin-top:-10px; }
.zp-seite .p1-eck > li:first-child, .zp-seite .p1-eck > li:last-child { display:none; }
.zp-seite .p1-eck > li { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; }
.zp-seite .p1-eck > li .t-klein { margin:0; }

/* Reiter: aktiver Reiter weiß mit oranger Unterkante wie das Hauptmenü */
.zp-seite .p1-reiter { margin-top:56px; }
.zp-seite .p1-reiter[data-reiter-bereit] .p1-detailnav { border-bottom:1px solid var(--zp-tinte); }
.zp-seite .p1-reiter[data-reiter-bereit] [role="tab"][aria-selected="true"] { background:#fff; border-bottom-color:var(--zp-orange); }
.zp-seite .p1-reiter[data-reiter-bereit] [role="tab"]:hover { border-bottom-color:var(--t-line); }
.zp-seite .p1-reiter[data-reiter-bereit] [role="tab"][aria-selected="true"]:hover { border-bottom-color:var(--zp-orange); }

/* Alle Angaben und Weiter im Sortiment: Überschrift mit Marke, Angaben auf weißer Fläche */
.zp-seite .p1-daten > h2, .zp-seite .p1-verwandt > h2 { display:flex; align-items:center; }
.zp-seite .p1-daten:not(.p1-hersteller) { border-top:0; padding-top:0; }
.zp-seite .p1-daten-spalten { padding:8px 28px 12px; background:#fff; border:1px solid var(--t-line); }
.zp-seite .p1-daten-spalten .t-tabelle > div:last-child { border-bottom:0; }
.zp-seite .p1-verwandt .t-karte a:hover, .zp-seite .p1-verwandt .t-karte a:focus-visible { box-shadow:inset 0 4px var(--zp-orange); }

@media (max-width:560px) {
  .zp-seite .p1-kasten { padding:18px 16px 20px; }
  .zp-seite .p1-preis { font-size:32px; }
  .zp-seite .p1-daten-spalten { padding:4px 16px 8px; }
  .zp-seite .p1-kasten .t-wege .button { flex:1 1 100%; }
  /* Details rechts neben dem Preis statt in einer eigenen Zeile darunter: keine Freifläche in der Teilekarte. */
  .zp-seite .zp-teil { position:relative; }
  .zp-seite .zp-teil-link { position:absolute; right:14px; bottom:13px; }
}

/* Karte 55: Wahl "eins von beiden" als eigene Gruppe mit Auswahlpunkten und "Keinen". */
.zp-wahl { list-style:none; }
.zp-wahl-feld { margin:0; padding:0; border:0; min-width:0; }
.zp-wahl-titel { padding:0; margin:0 0 6px; font-size:14px; font-weight:800; }
.zp-teil-keins .zp-teil-wahl { grid-template-columns:auto minmax(0,1fr); }
.zp-teil-keins { grid-template-columns:minmax(0,1fr); }

/* Karte 54: Summe rechtsbündig unter den Einzelpreisen. Die Teilekarte hat rechts "Details" (Rand 1 px, Innenabstand 14 px,
   Abstand 12 px); die Summenzeile hält denselben Platz frei, damit die rechten Kanten fluchten. Am Handy steht "Details" im Kasten. */
.zp-summe-platz { visibility:hidden; font-size:13px; }
@media (min-width:561px) {
  .zp-seite .zp-summe { display:grid; grid-template-columns:minmax(0,1fr) auto auto; column-gap:12px; padding-right:15px; }
  .zp-seite .zp-summe strong { justify-self:end; }
}
@media (max-width:560px) { .zp-summe-platz { display:none; } }