/* =====================================================================
   XUPPLY · DIAMANT-STAND, Noah am 24.09.2026 um 16:12
   /var/www/heliotropica/xupply/diamant.css, nach neu.css geladen.
   Hero je Seite mit Bildwelt, Liste als eine Tafel mit Haarlinien,
   Galerie mit denselben Kerninfos, Auswahl per Hover mit Auswahlleiste,
   Smart-Option schiebt die Liste als Live-Vorschau nach rechts.
   Nur Palette: Navy, Weiss, Gold, Dunkelgold, Hellblau. Schrift 10, 13,
   15, 18, 24, 32. Radien 8, 16, 999. Bewegung 60, 90, hoechstens 260 ms.
   ===================================================================== */

/* ── 0 Pfad direkt unter dem Subheader ─────────────────────────────── */
#xupplyInhalt > .master-zeile { display: flex; align-items: center; min-height: 44px; margin: -8px 0 0; padding: 0 4px; }
#xupplyInhalt > .master-zeile .pfad { font-size: var(--f13); }
#xupplyInhalt > .master-zeile .pfad button, #xupplyInhalt > .master-zeile .pfad a { min-height: 44px; }

/* ── 1 HERO ────────────────────────────────────────────────────────── */
.xu-hero.xh { position: relative; display: block; min-height: 0; margin: 0 0 12px; padding: 0; overflow: hidden;
  border-radius: 16px; background: var(--navy); color: var(--weiss); isolation: isolate; }
.xh-bild { position: absolute; inset: 0 0 0 auto; width: 56%; z-index: -1; }
.xh-bild img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 42%); mask-image: linear-gradient(90deg, transparent 0, #000 42%);
  animation: xhZoom 260ms cubic-bezier(.2,.8,.2,1) both; }
.xh-bild.produkt img { object-fit: contain; object-position: 70% center; padding: 24px 48px 24px 0; box-sizing: border-box;
  filter: drop-shadow(0 24px 48px rgba(0,0,0,.45)); }
.xh-bild::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 100% 0, rgba(244,169,0,.16), transparent 55%); }
@keyframes xhZoom { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
.xh-text { position: relative; max-width: 700px; padding: 24px 40px 22px; display: grid; gap: 10px; animation: xhRein 260ms cubic-bezier(.2,.8,.2,1) both; }
@keyframes xhRein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.xh-auge { display: inline-flex; align-items: center; gap: 8px; font-size: var(--f13); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.xh-auge::before { content: ""; width: 24px; height: 2px; background: var(--gold); border-radius: 999px; }
.xh-text h1 { margin: 0; font-size: 32px !important; white-space: nowrap; line-height: 1.12; font-weight: 800; color: var(--weiss); letter-spacing: -.01em; }
.xh-text h1 span { color: var(--gold); font-weight: 700; }
.xh-claim { margin: 0; font-size: var(--f15); line-height: 1.5; color: rgba(255,255,255,.88); max-width: 66ch; }
.xh-kz { display: flex; flex-wrap: wrap; gap: 0; margin: 4px 0 0; }
.xh-kz > div { display: grid; gap: 2px; padding: 0 24px 0 0; margin: 0 24px 0 0; border-right: 1px solid rgba(255,255,255,.18); }
.xh-kz > div:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.xh-kz b { font-size: var(--f24); font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--weiss); }
.xh-kz span { font-size: var(--f13); color: rgba(255,255,255,.8); }
.xh-wege { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; margin-top: 4px; }
.xh-wege button, .xh-wege a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 8px;
  font: inherit; font-size: var(--f15); font-weight: 700; cursor: pointer; text-decoration: none; transition: background 90ms, border-color 90ms, transform 60ms; }
.xh-wege button:active { transform: scale(.98); }
.xh-los { background: var(--gold); color: var(--navy); border: 1px solid var(--gold); }
.xh-los:hover { background: var(--weiss); border-color: var(--weiss); }
.xh-neben { background: rgba(255,255,255,.08); color: var(--weiss); border: 1px solid rgba(255,255,255,.4); }
.xh-neben:hover { background: rgba(255,255,255,.16); border-color: var(--weiss); }
.xh-link { background: none; border: 0; color: var(--weiss); padding: 0 8px !important; font-size: var(--f13) !important; white-space: nowrap; }
.xh-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.xh-wege .xi { width: 18px; height: 18px; }
.xh-stand { position: absolute; right: 16px; bottom: 12px; font-size: var(--f10); color: rgba(255,255,255,.72); }
@media (min-width: 1800px) { .xh-text h1 { font-size: 48px !important; } }

/* ── 2 FILTERKOPF: Smart-Option klein und ruhig ──────────────────────── */
.fp-smart { min-height: 44px !important; padding: 0 !important; background: none !important; border: 0 !important; }
.fp-smart > span { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 8px;
  border: 1px solid rgba(0,43,73,.24); background: var(--weiss); color: var(--navy); font-size: var(--f13); font-weight: 700; transition: border-color 90ms, background 90ms; }
.fp-smart > span .xi { width: 16px; height: 16px; color: var(--dunkelgold); }
.fp-smart:hover > span { border-color: var(--navy); background: var(--hellblau); }
html.xu-smart-auf .fp-smart > span { background: var(--navy); border-color: var(--navy); color: var(--weiss); }
.fp-reset-kopf { min-height: 44px; border: 0; background: none; color: var(--navy); font: inherit; font-size: var(--f13); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 0 4px; }
.fp-aktiv { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px 0 16px; background: var(--hellblau); border-bottom: 1px solid rgba(0,43,73,.12); font-size: var(--f13); font-weight: 600; }

/* ── 3 LISTE ALS EINE TAFEL ─────────────────────────────────────────── */
.xu-rechts { container-type: inline-size; container-name: xr; }
.xl { --xl-sp: 64px minmax(180px, 1.6fr) 84px minmax(116px, 1fr) minmax(168px, 1.2fr) 48px minmax(150px, 1fr) 268px;
  background: var(--weiss); border-radius: 16px; border: 1px solid rgba(0,43,73,.12); overflow: clip; color: var(--navy); }
.xl-kopf, .xl-z { display: grid; grid-template-columns: var(--xl-sp); column-gap: 12px; align-items: center; padding: 0 12px 0 12px; }
.xl-kopf { position: sticky; top: 0; z-index: 3; min-height: 44px; background: var(--weiss); border-bottom: 1.5px solid var(--navy);
  font-size: var(--f13); font-weight: 700; }
.xl-kopf > span { display: flex; align-items: center; min-width: 0; white-space: nowrap; }
.xl-kopf button { border: 0; background: none; color: var(--navy); font: inherit; font-weight: 700; min-height: 44px; padding: 0; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.xl-kopf button:hover { text-decoration: underline; text-underline-offset: 3px; }
.xl-kopf button[aria-sort="ascending"], .xl-kopf button[aria-sort="descending"] { color: var(--dunkelgold); }
.xl-kopf svg { width: 12px; height: 12px; }
.xl-gruppe { display: flex; align-items: baseline; gap: 12px; padding: 16px 16px 8px; border-bottom: 1px solid rgba(0,43,73,.1); background: var(--weiss); }
.xl-gruppe b { font-size: var(--f18); font-weight: 800; letter-spacing: .02em; }
.xl-gruppe span { font-size: var(--f13); }
.xl-gruppe em { margin-left: auto; font-style: normal; font-size: var(--f13); font-weight: 600; }
.xl-gruppe.pk { background: var(--hellblau); border-left: 4px solid var(--gold); }
.xl-gruppe.pk-rest b { font-size: var(--f15); }
.xl-z { position: relative; min-height: 76px; border-bottom: 1px solid rgba(0,43,73,.08); transition: background 60ms; }
.xl-z:last-child { border-bottom: 0; }
.xl-z:hover, .xl-z:focus-within { background: var(--hellblau); }
.xl-z.gewaehlt { background: var(--hellblau); box-shadow: inset 4px 0 0 var(--navy); }
.xl-z.im-pk { box-shadow: inset 4px 0 0 var(--gold); }
.xl-z > * { min-width: 0; }
/* Foto mit Auswahlkaestchen beim Ueberfahren */
.xl-foto { position: relative; width: 64px; height: 64px; }
.xl .foto-klein, .xk .foto-klein { width: 64px; height: 64px; border: 0; padding: 0; background: none; cursor: zoom-in; border-radius: 8px; }
.xl .foto-klein img { width: 56px; height: 56px; object-fit: contain; }
.xl-wahl { position: absolute; left: -10px; top: -10px; width: 44px; height: 44px; display: grid; place-items: center; opacity: 0; transition: opacity 60ms; z-index: 2; }
.xl-wahl .kaestchen { width: 44px; height: 44px; background-color: transparent; }
.xl-wahl::before { content: ""; position: absolute; width: 22px; height: 22px; border-radius: 6px; background: var(--weiss); box-shadow: 0 2px 6px rgba(0,43,73,.24); z-index: -1; }
.xl-z:hover .xl-wahl, .xl-z:focus-within .xl-wahl, .xl-z.gewaehlt .xl-wahl, .xl.auswahl .xl-wahl,
.xk:hover .xl-wahl, .xk:focus-within .xl-wahl, .xk.gewaehlt .xl-wahl, .gx.auswahl .xl-wahl { opacity: 1; }
@media (hover: none) { .xl-wahl { opacity: 1; } }
/* Name */
.xl-name { display: grid; gap: 1px; justify-items: start; text-align: left; border: 0; background: none; color: var(--navy); font: inherit; padding: 8px 0; cursor: pointer; min-width: 0; }
.xl-name:hover b { text-decoration: underline; text-underline-offset: 3px; }
.xl-tech { font-size: var(--f10); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dunkelgold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.xl-name b { font-size: var(--f15); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.xl-mass { font-size: var(--f13); font-weight: 500; white-space: nowrap; }
.xl-name .pk-marke { margin-top: 4px; }
/* Leistung mit Effizienz */
.xl-wp { display: grid; gap: 1px; }
.xl-wp span { font-size: var(--f13); font-weight: 600; white-space: nowrap; }
.xl-wp b { font-size: var(--f18); font-weight: 800; }
.xl-wp small { font-size: var(--f13); white-space: nowrap; }
/* Glas und Farbe */
.xl-glas { display: grid; gap: 1px; font-size: var(--f13); }
.xl-glas b { font-size: var(--f15); font-weight: 700; white-space: nowrap; }
.xl-glas small { font-size: var(--f13); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xl-glas small + small { font-size: var(--f10); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
/* Verfuegbarkeit */
.xl-verf { display: flex; align-items: flex-start; gap: 8px; width: 100%; min-height: 44px; padding: 6px 8px; margin-left: -8px; border: 0; border-radius: 8px;
  background: none; color: var(--navy); font: inherit; text-align: left; cursor: pointer; }
button.xl-verf:hover { background: rgba(0,43,73,.05); }
div.xl-verf { cursor: default; }
.xl-verf[aria-disabled="true"] { cursor: default; }
.xl-punkt { flex: none; width: 10px; height: 10px; margin-top: 5px; border-radius: 999px; background: var(--navy); }
.st-zulauf .xl-punkt { background: var(--gold); }
.st-auftrag .xl-punkt { background: var(--weiss); box-shadow: inset 0 0 0 2px var(--navy); }
.st-leer .xl-punkt { background: var(--weiss); box-shadow: inset 0 0 0 2px rgba(0,43,73,.4); }
.xl-vt { display: grid; gap: 1px; min-width: 0; }
.xl-vt b { font-size: var(--f15); font-weight: 800; white-space: nowrap; }
.xl-vt small { font-size: var(--f13); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xl-lager { display: grid; gap: 2px; margin-top: 6px; font-size: var(--f13); }
.xl-lager span { display: grid; grid-template-columns: auto 1fr auto; gap: 6px; align-items: center; }
.xl-lager i { font-style: normal; font-size: var(--f10); font-weight: 800; padding: 1px 6px; border-radius: 999px; background: var(--navy); color: var(--weiss); }
.xl-lager i.zu { background: var(--gold); color: var(--navy); }
.xl-lager em { font-style: normal; font-weight: 700; }
/* Datenblatt */
.xl-pdf .pdf, .xk .pdf { width: 44px; height: 44px; border: 0; border-radius: 8px; background: none; color: var(--navy); display: grid; place-items: center; cursor: pointer; }
.xl-pdf .pdf:hover, .xk .pdf:hover { background: var(--weiss); box-shadow: inset 0 0 0 1px var(--navy); }
.xl-pdf .pdf .ic, .xk .pdf .ic { width: 22px; height: 22px; }
/* Preis */
.xl-preis { display: grid; justify-items: end; text-align: right; font-size: var(--f13); }
.xl-preis .p2 { display: grid; grid-template-columns: auto auto; justify-items: end; align-items: baseline; column-gap: 10px; row-gap: 0; }
.xl-preis .p2 > span.zahl { font-size: var(--f13); }
.xl-preis .p2 small { font-size: var(--f10); }
.xl.gast { --xl-sp: 64px minmax(180px, 1.6fr) 84px minmax(116px, 1fr) minmax(168px, 1.2fr) 48px minmax(116px, .8fr) 268px; }
.xl-preis .p2 b { font-size: var(--f18); font-weight: 800; }
.xl-preis .anfrage { font-weight: 700; }
.xl-pp, .xk-pp { display: grid; justify-items: end; gap: 0; border: 0; background: none; color: var(--navy); font: inherit; cursor: pointer; padding: 4px 0; min-height: 44px; text-align: right; }
.xl-pp b, .xk-pp { font-size: var(--f15); font-weight: 800; }
.xl-pp small, .xk-pp small { font-size: var(--f10); font-weight: 600; }
.xl-pp:hover b, .xk-pp:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Menge */
.xl-menge .menge { justify-content: flex-end; gap: 6px; flex-wrap: nowrap; }
.xl-menge .seg { flex: none; }
.xl-menge .seg { height: 36px; align-items: center; border-radius: 8px; }
.xl-menge .seg button { height: 44px; min-width: 44px; border: 0; background: none; cursor: pointer; padding: 0 2px; }
.xl-menge .seg button span { font-size: var(--f13); padding: 4px 8px; }
.xl-menge .menge input { width: 52px; height: 44px; font-size: var(--f15); border-radius: 8px; }
.xl-menge .plus { width: 44px; height: 44px; border-radius: 8px; cursor: pointer; }

/* Weniger Breite: Datenblatt wandert als Zeichen in die Namenszeile */
@container xr (max-width: 1099px) {
  .xl { --xl-sp: 64px minmax(170px, 1.6fr) 80px minmax(108px, 1fr) minmax(150px, 1.1fr) minmax(104px, .8fr) 250px; }
  .xl-kopf .xl-pdf, .xl-z > .xl-pdf { display: none; }
  .xl-menge .seg button span { padding: 4px 6px; }
}
@container xr (max-width: 959px) {
  .xl { --xl-sp: 64px minmax(160px, 1.6fr) 76px minmax(150px, 1.2fr) minmax(96px, .8fr) 176px; }
  .xl-kopf > span:nth-child(4), .xl-z > .xl-glas { display: none; }
  .xl-menge .seg { display: none; }
}
/* Vorschau neben der Smart-Option und Telefon: kompakte Karte in zwei Zeilen */
@container xr (max-width: 760px) {
  .xl-kopf { display: none; }
  .xl-z { grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "foto name preis" "foto verf menge"; column-gap: 12px; row-gap: 0; padding: 8px 12px; min-height: 0; }
  .xl-foto { grid-area: foto; width: 56px; height: 56px; align-self: start; }
  .xl .foto-klein { width: 56px; height: 56px; } .xl .foto-klein img { width: 52px; height: 52px; }
  .xl-name { grid-area: name; padding: 0; }
  .xl-wp { display: none; }
  .xl-v { grid-area: verf; }
  .xl-preis { grid-area: preis; align-self: start; }
  .xl-menge { grid-area: menge; }
  .xl-verf { padding: 2px 8px; min-height: 44px; align-items: center; }
  .xl-vt b { font-size: var(--f13); }
  .xl-vt small { font-size: var(--f10); }
  .xl-pp small { display: none; }
  .xl-gruppe { padding: 12px 12px 6px; }
  .xl-gruppe b { font-size: var(--f15); }
  .xl-gruppe span { display: none; }
}
@media (max-width: 1024px) {
  .xl-menge .menge input { height: 56px; } .xl-menge .plus { width: 56px; height: 56px; }
  .xl-name, .xl-verf, .xl-pp { min-height: 56px; }
}

/* ── 4 GALERIE ──────────────────────────────────────────────────────── */
.gx-karte.xk { flex: 0 0 232px; border: 1px solid rgba(0,43,73,.12); border-radius: 16px; background: var(--weiss); overflow: hidden; transition: box-shadow 90ms, transform 90ms; }
.gx-karte.xk:hover { box-shadow: 0 12px 32px rgba(0,43,73,.12); transform: translateY(-2px); }
.gx-karte.xk.gewaehlt { box-shadow: inset 0 0 0 2px var(--navy); }
.gx-bahn.voll .gx-karte.xk { flex: 0 0 calc((100% - 3 * 16px) / 4); }
.xk-bild { position: relative; aspect-ratio: 4 / 3; background: radial-gradient(90% 80% at 50% 40%, var(--weiss), var(--hellblau)); border-bottom: 1px solid rgba(0,43,73,.08); }
.xk-bildknopf { position: absolute; inset: 0; border: 0; padding: 0; background: none; cursor: pointer; }
.xk-bildknopf img { position: absolute; inset: 12px; margin: auto; max-width: calc(100% - 24px); max-height: calc(100% - 24px); object-fit: contain; transition: transform 260ms cubic-bezier(.2,.8,.2,1); }
.xk:hover .xk-bildknopf img { transform: scale(1.04); }
.xk .gx-marke { left: auto; right: 8px; }
.xk .xl-wahl { left: 0; top: 0; }
.xk-text { display: grid; gap: 1px; justify-items: start; text-align: left; border: 0; background: none; color: var(--navy); font: inherit; padding: 12px 12px 4px; cursor: pointer; }
.xk-text b { font-size: var(--f15); font-weight: 800; }
.xk-werte { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 12px 0; }
.xk-werte span { font-size: var(--f13); padding: 2px 8px; border-radius: 999px; background: var(--hellblau); color: var(--navy); white-space: nowrap; }
.xk-werte b { font-weight: 800; }
.xk > .pk-marke { margin: 6px 12px 0; align-self: flex-start; }
.xk-fuss { display: flex; align-items: center; gap: 4px; margin-top: auto; padding: 8px 8px 8px 12px; }
.xk-fuss > :first-child { margin-right: auto; }
.xk-pp { justify-items: start; text-align: left; }
.xk-preis { font-size: var(--f13); } .xk-preis b { font-size: var(--f18); font-weight: 800; }
.xk .gx-plus { margin-left: 0; }

/* ── 5 AUSWAHLLEISTE ────────────────────────────────────────────────── */
#vergleichsLeiste { position: fixed; left: 50%; right: auto; bottom: 88px; z-index: 1800; transform: translate(-50%, 16px); opacity: 0;
  display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; max-width: calc(100vw - 32px); width: max-content; padding: 6px 6px 6px 16px;
  border-radius: 16px; background: var(--navy); color: var(--weiss); box-shadow: 0 16px 40px rgba(0,43,73,.32); transition: transform 260ms cubic-bezier(.2,.8,.2,1), opacity 90ms; }
#vergleichsLeiste.sichtbar { transform: translate(-50%, 0); opacity: 1; }
#vergleichsLeiste[hidden] { display: none !important; }
.al-zahl { font-size: var(--f13); white-space: nowrap; } .al-zahl b { font-size: var(--f18); }
.al-chips { display: flex; gap: 4px; min-width: 0; overflow: hidden; }
.al-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 8px; border: 0; border-radius: 8px; background: rgba(255,255,255,.1); color: var(--weiss); font: inherit; font-size: var(--f13); white-space: nowrap; cursor: pointer; }
.al-chip .ic { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.2; }
.al-chip:hover { background: rgba(255,255,255,.2); }
.al-mehr { font-size: var(--f13); align-self: center; padding: 0 4px; }
.al-knopf { min-height: 44px; padding: 0 14px; border-radius: 8px; border: 1px solid rgba(255,255,255,.35); background: none; color: var(--weiss); font: inherit; font-size: var(--f13); font-weight: 700; white-space: nowrap; cursor: pointer; }
.al-knopf:hover { background: rgba(255,255,255,.12); }
.al-knopf.hell { background: var(--weiss); color: var(--navy); border-color: var(--weiss); }
.al-knopf.gold { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.al-knopf[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.al-zu { width: 44px; height: 44px; border: 0; border-radius: 8px; background: none; color: var(--weiss); display: grid; place-items: center; cursor: pointer; }
.al-zu .ic { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.2; }
.al-zu:hover { background: rgba(255,255,255,.12); }
@media (max-width: 1024px) {
  #vergleichsLeiste { bottom: 96px; flex-wrap: wrap; width: calc(100vw - 32px); }
  .al-chips { display: none; }
  .al-knopf, .al-zu { min-height: 56px; }
}

/* ── 6 SMART-OPTION NEBEN DER LISTE ─────────────────────────────────── */
@media (min-width: 1025px) {
  .xu-arbeit.smart-inline { grid-template-columns: minmax(640px, 60%) minmax(0, 1fr); }
  .xu-arbeit.smart-inline > .xu-fp { display: none; }
  .xu-arbeit.smart-inline > .xu-smart { position: sticky; top: 8px; left: auto; bottom: auto; width: auto; min-width: 0; max-width: none;
    height: calc(100vh - 196px); z-index: 5; border-radius: 16px; box-shadow: 0 8px 32px rgba(0,43,73,.12); overflow: hidden; }
  .xu-arbeit.smart-inline > .xu-smart .sm-rumpf { grid-template-columns: minmax(0, 1.2fr) minmax(300px, 1fr); }
  .xu-arbeit.smart-inline > .xu-smart .sm-filter { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .xu-arbeit.smart-inline .xu-rechts::before { content: "Live-Vorschau · jede Änderung wirkt sofort"; display: block; margin: 0 0 8px; padding: 10px 16px; border-radius: 8px;
    background: var(--weiss); border-left: 4px solid var(--gold); font-size: var(--f13); font-weight: 700; color: var(--navy); }
  .xu-arbeit.smart-inline .xu-paket { display: none; }
}

/* ── 7 PV-SYSTEM: andere Module waehlen ─────────────────────────────── */
.pk-wahlliste { display: grid; gap: 4px; padding: 8px 24px 16px; background: var(--hellblau); border-top: 1px solid rgba(0,43,73,.1); }
.pk-wahlliste[hidden] { display: none; }
.pk-wahlliste > b { font-size: var(--f13); padding: 4px 0; }
.pk-option { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; min-height: 56px; padding: 4px 12px; border: 1px solid rgba(0,43,73,.14);
  border-radius: 8px; background: var(--weiss); color: var(--navy); font: inherit; font-size: var(--f13); text-align: left; cursor: pointer; transition: border-color 60ms; }
.pk-option:hover { border-color: var(--navy); }
.pk-option[aria-current="true"] { box-shadow: inset 4px 0 0 var(--gold); border-color: var(--navy); }
.pk-option img { width: 40px; height: 40px; object-fit: contain; }
.pk-option b { display: block; font-size: var(--f15); }
.pk-option .r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── 8 Mobil bis 1024 ───────────────────────────────────────────────── */
@media (max-width: 1024px) {
  #xupplyInhalt > .master-zeile { display: none; }
  .xu-hero.xh { min-height: 0; }
  .xh-bild { width: 70%; opacity: .55; }
  .xh-text { padding: 20px 16px 16px; gap: 8px; }
  .xh-text h1 { font-size: var(--f24) !important; white-space: normal; }
  .xh-claim { display: none; }
  .xh-wege { display: none; }
  .xh-kz { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
  .xh-kz > div { border: 0; margin: 0; padding: 0; }
  .xh-kz b { font-size: var(--f18); }
  .xh-wege button { min-height: 56px; }
  .xh-link { display: none !important; }
  .xh-stand { display: none; }
  .gx-karte.xk { flex: 0 0 72vw; }
  .gx-bahn.voll .gx-karte.xk { flex: 0 0 calc((100% - 16px) / 2); }
}
@media (prefers-reduced-motion: reduce) {
  .xh-bild img, .xh-text { animation: none; }
  .xk, .xk-bildknopf img, #vergleichsLeiste { transition: none; }
}

/* Hero tritt zurueck, solange geplant wird (Smart-Option offen oder PV-System gesetzt) */
.xu-hero.xh.klein .xh-bild, .xu-hero.xh.klein .xh-claim, .xu-hero.xh.klein .xh-auge, .xu-hero.xh.klein .xh-stand { display: none; }
.xu-hero.xh.klein .xh-text { max-width: none; padding: 12px 24px; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; animation: none; }
.xu-hero.xh.klein h1 { font-size: var(--f24); white-space: nowrap; }
.xu-hero.xh.klein .xh-kz { margin: 0; }
.xu-hero.xh.klein .xh-kz b { font-size: var(--f18); }
.xu-hero.xh.klein .xh-wege { margin: 0; }
.xu-hero.xh.klein .xh-neben, .xu-hero.xh.klein .xh-link { display: none; }
@media (max-width: 1024px) { .xu-hero.xh.klein .xh-text { grid-template-columns: 1fr; gap: 8px; } .xu-hero.xh.klein .xh-wege { display: none; } }