/* =====================================================================
   XUPPLY · GESAMTLOESUNG, Stil zu /xupply/neu.js, 24.09.2026
   Nur Token aus tokens.css. Schrift 10, 13, 15, 18, 24. Radien 8, 16, 999.
   ===================================================================== */

/* Alte Teile, die der neue Aufbau ersetzt */
#xupplyInhalt #hero, #xupplyInhalt #katKopf, #xupplyInhalt #filterKnopf, #xupplyInhalt #sortwahl, #xupplyInhalt #auswahlKnopf { display: none !important; }
#xupplyInhalt .master-zeile .suche { display: none !important; }

#xupplyInhalt .kk-klapp, #xupplyInhalt .pfad-klapp { display: none !important; }
/* Dichte, 24.09.2026: Zeile rund 72 px statt 144 px (Platin 3.3). Herstellerlogo je Zeile und
   Stueck je Einheit sind Schicht 2, sie stehen im Detail. */
@media (min-width: 1025px) {
  #xupplyInhalt .zeile > .c { padding-top: 6px; padding-bottom: 6px; }
  #xupplyInhalt .zeile .foto-klein { width: 56px; height: 56px; }
  #xupplyInhalt .zeile .foto-klein img { width: 52px; height: 52px; }
  #xupplyInhalt .zeile .herst-oben, #xupplyInhalt .zeile .pack-info { display: none; }
  #xupplyInhalt .zeile .verf-haupt { font-size: var(--f18); }
  #xupplyInhalt .zeile { margin-bottom: 4px; }
  #xupplyInhalt .zeile .lager-feld .mehr { display: none; }
  #xupplyInhalt .zeile.verf-auftrag .lager-feld { display: none; }
  #xupplyInhalt .zeile .sp-pdf .pdf-lang { display: none; }
  #xupplyInhalt .zeile .sp-pdf .pdf-kurz { display: inline; }
  #xupplyInhalt .zeile > .c.fix-l2 { position: relative; }
  #xupplyInhalt .zeile .vergl-btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }
  #xupplyInhalt .zeile .name b { white-space: nowrap; font-size: var(--f15); }
  #xupplyInhalt .zeile .name .ein { white-space: nowrap; }
  #xupplyInhalt .zeile .lager-feld { display: flex; gap: 8px; align-items: baseline; flex-wrap: nowrap; }
  #xupplyInhalt .zeile .lager-feld .lz, #xupplyInhalt .zeile .lager-feld b { min-height: 0; line-height: 1.3; }
  /* ausgeblendete Spalten tragen keine Hoehe */
  #xupplyInhalt[data-aus~="herst"] .zeile > .sp-herst { padding: 0; }
  #xupplyInhalt[data-aus~="herst"] .zeile > .sp-herst > * { display: none; }
  #xupplyInhalt[data-aus~="eff"] .zeile > .sp-eff { padding: 0; }
  #xupplyInhalt[data-aus~="eff"] .zeile > .sp-eff > * { display: none; }
  #xupplyInhalt[data-aus~="farbe"] .zeile > .sp-farbe { padding: 0; }
  #xupplyInhalt[data-aus~="farbe"] .zeile > .sp-farbe > * { display: none; }
  #xupplyInhalt[data-aus~="glas"] .zeile > .sp-glas { padding: 0; }
  #xupplyInhalt[data-aus~="glas"] .zeile > .sp-glas > * { display: none; }
  #xupplyInhalt[data-aus~="mass"] .zeile > .sp-mass { padding: 0; }
  #xupplyInhalt[data-aus~="mass"] .zeile > .sp-mass > * { display: none; }
  #xupplyInhalt[data-aus~="gew"] .zeile > .sp-gew { padding: 0; }
  #xupplyInhalt[data-aus~="gew"] .zeile > .sp-gew > * { display: none; }
  #xupplyInhalt[data-aus~="pdf"] .zeile > .sp-pdf { padding: 0; }
  #xupplyInhalt[data-aus~="pdf"] .zeile > .sp-pdf > * { display: none; }
  #xupplyInhalt[data-aus~="lager"] .zeile > .sp-lager { padding: 0; }
  #xupplyInhalt[data-aus~="lager"] .zeile > .sp-lager > * { display: none; }
  #xupplyInhalt[data-aus~="liefer"] .zeile > .sp-liefer { padding: 0; }
  #xupplyInhalt[data-aus~="liefer"] .zeile > .sp-liefer > * { display: none; }
  #xupplyInhalt[data-aus~="pack"] .zeile > .sp-pack { padding: 0; }
  #xupplyInhalt[data-aus~="pack"] .zeile > .sp-pack > * { display: none; }
  #xupplyInhalt[data-aus~="preis"] .zeile > .sp-preis { padding: 0; }
  #xupplyInhalt[data-aus~="preis"] .zeile > .sp-preis > * { display: none; }
}
#xupplyInhalt .zeile .name .ein { white-space: normal; }

/* Marken im Paket */
.pk-marke { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font-size: var(--f10); font-weight: 700; white-space: nowrap; letter-spacing: .02em; vertical-align: middle; }
.pk-wahl { background: var(--navy); color: var(--weiss); }
.pk-abgeleitet { background: var(--hellblau); color: var(--navy); border: 1px solid rgba(0,43,73,.35); }
.pk-vorschlag { background: var(--weiss); color: var(--navy); border: 1px dashed var(--navy); }
.pk-alternative { background: var(--weiss); color: var(--dunkelgold); border: 1px solid var(--dunkelgold); cursor: pointer; }
.name .pk-marke { display: inline-flex; margin-top: 4px; }
.pk-zeile { background: var(--hellblau) !important; }
.pk-zeile b, .pk-rest b { font-size: var(--f15); }

/* Hero, hoechstens ein Drittel der Hoehe */
.xu-hero { background: var(--weiss); border-radius: 16px; padding: 16px 24px; margin: 0 0 8px; display: grid; gap: 8px; }
.xu-hero[hidden] { display: none; }
.xh-z1 { display: flex; align-items: baseline; gap: 24px; flex-wrap: wrap; }
.xh-z1 h1 { font-size: var(--f24); line-height: 1.2; color: var(--navy); margin: 0; }
.xh-z1 h1 span { font-weight: 400; }
.xh-kz { display: flex; gap: 16px; flex-wrap: wrap; font-size: var(--f13); color: var(--navy); }
.xh-kz b { font-size: var(--f18); font-variant-numeric: tabular-nums; }
.xu-hero .dim, .xu-paket .dim, .xu-smart .dim, .zs .dim { color: rgba(0,43,73,.66); }
.xh-z2 { display: flex; gap: 24px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; font-size: var(--f13); color: var(--navy); }
.xh-z2 li::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--gold); margin-right: 8px; vertical-align: 1px; }
.xh-z3 { display: flex; gap: 8px; flex-wrap: wrap; }
.xh-weg { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 48px; padding: 4px 16px; border-radius: 8px; border: 1px solid rgba(0,43,73,.24); background: var(--weiss); color: var(--navy); cursor: pointer; font: inherit; text-align: left; transition: border-color 90ms, transform 60ms; }
.xh-weg:hover { border-color: var(--navy); }
.xh-weg:active { transform: scale(.98); }
.xh-weg b { font-size: var(--f15); }
.xh-weg small { font-size: var(--f10); opacity: .75; }
.xh-weg.haupt { background: var(--gold); border-color: var(--gold); }

/* Arbeitsflaeche: Filterpaneel links, Liste rechts */
.xu-arbeit { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: 16px; align-items: start; }
#xupplyInhalt:not([data-zustand="matrix"]):not([data-zustand="klassisch"]) .xu-arbeit { grid-template-columns: minmax(0, 1fr); }
#xupplyInhalt:not([data-zustand="matrix"]):not([data-zustand="klassisch"]) .xu-fp,
#xupplyInhalt:not([data-zustand="matrix"]):not([data-zustand="klassisch"]) .xu-mobil-leiste { display: none; }
.xu-rechts { min-width: 0; }
.xu-fp { position: sticky; top: 8px; max-height: calc(100vh - 196px); overflow: auto; background: var(--weiss); border-radius: 16px; color: var(--navy); scrollbar-width: thin; }
.fp-kopfzeile { position: sticky; top: 0; z-index: 2; background: var(--weiss); display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 8px 8px 8px 16px; border-bottom: 1.5px solid var(--navy); }
.fp-kopfzeile > b { font-size: var(--f15); }
.fp-an { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--navy); color: var(--weiss); font-size: var(--f10); display: inline-grid; place-items: center; font-weight: 700; }
.fp-smart { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 12px; border-radius: 8px; border: 0; background: var(--gold); color: var(--navy); font: inherit; font-size: var(--f13); font-weight: 700; cursor: pointer; }
.fp-zu { display: none; }
.xi { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.fp-werkzeug { display: flex; gap: 8px; align-items: flex-end; padding: 12px 16px; border-bottom: 1px solid rgba(0,43,73,.12); }
.fp-werkzeug label { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fp-t { font-size: var(--f10); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--navy); }
.xu-fp select, .xu-smart select { height: 44px; border: 1px solid rgba(0,43,73,.3); border-radius: 8px; background: var(--weiss); color: var(--navy); font: inherit; font-size: var(--f13); padding: 0 8px; width: 100%; }
.fp-auswahl { min-height: 44px; padding: 0 12px; border-radius: 8px; border: 1px solid rgba(0,43,73,.3); background: var(--weiss); color: var(--navy); font: inherit; font-size: var(--f13); font-weight: 600; cursor: pointer; }
.fp-auswahl[aria-pressed="true"] { background: var(--navy); color: var(--weiss); border-color: var(--navy); }
.fp-ausr { padding: 12px 16px; border-bottom: 1px solid rgba(0,43,73,.12); display: grid; gap: 8px; }
.fp-seg { display: flex; background: var(--hellblau); border-radius: 8px; padding: 4px; gap: 4px; }
.fp-seg button { flex: 1; min-height: 44px; border: 0; border-radius: 6px; background: none; color: var(--navy); font: inherit; font-size: var(--f13); font-weight: 600; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.fp-seg button small { font-size: var(--f10); font-weight: 400; }
.fp-seg button[aria-pressed="true"] { background: var(--navy); color: var(--weiss); }
.fp-ich { display: flex; flex-direction: column; gap: 4px; }
.fp-hinweis { font-size: var(--f10); color: rgba(0,43,73,.66); margin: 0; }
.fp-gruppe { border-bottom: 1px solid rgba(0,43,73,.12); }
.fp-kopf { width: 100%; display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; border: 0; background: none; color: var(--navy); font: inherit; font-size: var(--f15); font-weight: 700; cursor: pointer; text-align: left; }
.fp-kopf:hover { background: rgba(0,43,73,.03); }
.fp-kopf > span { flex: 1; }
.fp-kopf .pf { transition: transform 90ms; }
.fp-gruppe.auf .fp-kopf .pf { transform: rotate(180deg); }
.fp-rumpf { display: none; padding: 0 8px 8px; }
.fp-gruppe.auf .fp-rumpf { display: block; }
.fp-zeile { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 8px; border-radius: 8px; cursor: pointer; font-size: var(--f13); color: var(--navy); }
.fp-zeile:hover { background: var(--hellblau); }
.fp-zeile img { width: 28px; height: 28px; object-fit: contain; flex: none; }
.fp-name { flex: 1; min-width: 0; }
.fp-zahl { font-size: var(--f10); font-variant-numeric: tabular-nums; color: rgba(0,43,73,.66); }
.fp-zeile input, .sm-komp input { -webkit-appearance: none; appearance: none; width: 44px; height: 44px; margin: -2px -10px -2px -4px; flex: none; cursor: pointer; border-radius: 8px; position: relative;
  background: var(--weiss); box-shadow: inset 0 0 0 12px var(--weiss), inset 0 0 0 13.5px var(--navy); }
.fp-zeile input:checked, .sm-komp input:checked { background: var(--navy); }
.fp-zeile input:checked::after, .sm-komp input:checked::after { content: ""; position: absolute; left: 18px; top: 16px; width: 8px; height: 4px; border: 2px solid var(--weiss); border-top: 0; border-right: 0; transform: rotate(-45deg); }
.fp-zeile input:disabled, .sm-komp input:disabled { cursor: not-allowed; }
.sm-komp input:disabled:checked { opacity: .5; }
.fp-zeile input:focus-visible, .sm-komp input:focus-visible { outline: 2px solid var(--gold); outline-offset: -8px; }
.fp-zeile.leer { opacity: .38; cursor: not-allowed; }
.fp-bereich { display: flex; align-items: center; gap: 8px; padding: 4px 8px; font-size: var(--f13); }
.fp-bereich input { flex: 1; min-width: 0; height: 44px; border: 1px solid rgba(0,43,73,.3); border-radius: 8px; padding: 0 8px; font: inherit; color: var(--navy); }
.fp-bereich small { font-size: var(--f10); }
.fp-reset { margin: 12px 16px 16px; min-height: 44px; width: calc(100% - 32px); border: 1px solid rgba(0,43,73,.3); border-radius: 8px; background: var(--weiss); color: var(--navy); font: inherit; font-size: var(--f13); font-weight: 600; cursor: pointer; }
.xu-mobil-leiste { display: none; }

/* Paket ueber der Liste */
.xu-paket { background: var(--weiss); border-radius: 16px; margin: 0 0 8px; border: 2px solid var(--gold); color: var(--navy); overflow: hidden; }
.xu-paket[hidden] { display: none; }
.pk-kopf { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; padding: 16px 24px 8px; flex-wrap: wrap; }
.pk-kopf h2 { font-size: var(--f24); margin: 4px 0; }
.pk-kopf p { margin: 0; font-size: var(--f13); }
.pk-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.pk-knoepfe button, .pk-aktion button { min-height: 44px; padding: 0 12px; border-radius: 8px; border: 1px solid rgba(0,43,73,.3); background: var(--weiss); color: var(--navy); font: inherit; font-size: var(--f13); font-weight: 600; cursor: pointer; }
.pk-knoepfe button[aria-pressed="true"] { background: var(--navy); color: var(--weiss); border-color: var(--navy); }
.pk-tab { width: 100%; border-collapse: collapse; font-size: var(--f13); }
.pk-tab td { padding: 8px; border-top: 1px solid rgba(0,43,73,.1); vertical-align: middle; }
.pk-tab td:first-child { padding-left: 24px; width: 1%; white-space: nowrap; }
.pk-tab td b { display: block; font-size: var(--f15); }
.pk-tab td small { display: block; font-size: var(--f10); color: rgba(0,43,73,.66); }
.pk-tab .r { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pk-tab input { width: 88px; height: 44px; border: 1px solid rgba(0,43,73,.3); border-radius: 8px; padding: 0 8px; font: inherit; text-align: right; color: var(--navy); }
.pk-tab tr.haupt { background: var(--hellblau); }
.pk-tab tr.weg td { opacity: .45; }
.pk-tab tr.weg td.pk-aktion { opacity: 1; }
.pk-aktion { text-align: right; white-space: nowrap; padding-right: 24px !important; }
.pk-quelle { font-size: var(--f10); color: rgba(0,43,73,.66); margin-right: 8px; }
.pk-tab tr.haupt .pk-quelle { display: none; }
.pk-fuss { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 12px 24px 16px; border-top: 1px solid rgba(0,43,73,.1); }
.pk-fuss p { flex: 1 1 320px; margin: 0; font-size: var(--f13); }
.knopf-neu { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; border-radius: 8px; border: 1px solid rgba(0,43,73,.3); background: var(--weiss); color: var(--navy); font: inherit; font-size: var(--f15); font-weight: 700; cursor: pointer; text-decoration: none; transition: transform 60ms; }
.knopf-neu:active { transform: scale(.98); }
.knopf-neu.navy { background: var(--navy); color: var(--weiss); border-color: var(--navy); }
.knopf-neu.gold { background: var(--gold); color: var(--navy); border-color: var(--gold); }

/* Smart-Option, drei Viertel der Breite */
.xu-smart *, .xu-fp *, .xu-paket *, .zs *, .xu-voll *, .xu-tour * { box-sizing: border-box; }
.xu-smart { position: fixed; left: 0; top: 112px; bottom: 0; width: 75vw; min-width: 900px; max-width: 100vw; z-index: 1900; background: var(--weiss); color: var(--navy); box-shadow: 16px 0 48px rgba(0,43,73,.18); display: flex; flex-direction: column; transform: translateX(-16px); opacity: 0; transition: transform 260ms cubic-bezier(.2,.8,.2,1), opacity 90ms; }
.xu-smart.auf { transform: none; opacity: 1; }
.xu-smart[hidden] { display: none; }
.sm-kopf { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 16px 0 24px; border-bottom: 1.5px solid var(--navy); }
.sm-kopf b { font-size: var(--f18); }
.sm-kopf span { font-size: var(--f13); }
.sm-zu { margin-left: auto; width: 44px; height: 44px; border: 0; border-radius: 8px; background: none; color: var(--navy); font-size: var(--f18); cursor: pointer; }
.sm-zu:hover { background: var(--hellblau); }
.sm-rumpf { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr); }
.sm-filter { overflow: auto; padding: 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; align-content: start; }
.sm-filter .fp-gruppe { border: 1px solid rgba(0,43,73,.16); border-radius: 8px; }
.sm-filter .fp-gruppe.auf .fp-rumpf { max-height: 240px; overflow: auto; }
.sm-rechner { overflow: auto; padding: 16px 24px 24px; background: var(--hellblau); display: flex; flex-direction: column; gap: 12px; }
.sm-rechner h3 { font-size: var(--f18); margin: 0; }
.sm-rechner .fp-seg { background: var(--weiss); }
.sm-ziel { display: grid; gap: 8px; }
.sm-ziel input, .sm-feld input { height: 48px; border: 1.5px solid var(--navy); border-radius: 8px; padding: 0 12px; font: inherit; font-size: var(--f18); font-weight: 700; color: var(--navy); background: var(--weiss); width: 100%; }
.sm-feld { display: flex; flex-direction: column; gap: 4px; position: relative; }
.sm-feld input { font-size: var(--f15); font-weight: 600; }
.sm-vorschlag { position: absolute; top: 72px; left: 0; right: 0; background: var(--weiss); border-radius: 8px; box-shadow: 0 16px 32px rgba(0,43,73,.18); z-index: 3; padding: 4px; }
.sm-vorschlag[hidden] { display: none; }
.sm-vorschlag button { display: block; width: 100%; min-height: 44px; text-align: left; border: 0; background: none; border-radius: 6px; padding: 0 8px; font: inherit; font-size: var(--f13); color: var(--navy); cursor: pointer; }
.sm-vorschlag button:hover { background: var(--hellblau); }
.sm-abgeleitet { display: grid; gap: 4px; font-size: var(--f13); }
.sm-abgeleitet div { display: grid; grid-template-columns: auto auto 1fr; gap: 8px; align-items: center; }
.sm-abgeleitet small { font-size: var(--f10); }
.sm-komp { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: var(--f13); align-items: center; }
.sm-komp .fp-t { width: 100%; }
.sm-komp label { display: inline-flex; gap: 6px; align-items: center; min-height: 32px; cursor: pointer; }

.sm-live { background: var(--weiss); border-radius: 8px; padding: 12px; display: grid; gap: 8px; font-size: var(--f13); }
.sm-live p { margin: 0; }
.sm-pos { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 8px; align-items: center; padding-bottom: 8px; border-bottom: 1px solid rgba(0,43,73,.08); }
.sm-pos b { font-size: var(--f13); }
.sm-pos > span:last-of-type { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; }
.sm-pos small { grid-column: 2 / 4; font-size: var(--f10); color: rgba(0,43,73,.66); }
.sm-pos.haupt b { font-size: var(--f15); }
.sm-ertrag b { font-size: var(--f15); }
.sm-fuss { display: flex; align-items: center; gap: 8px; padding: 12px 24px; border-top: 1px solid rgba(0,43,73,.12); }
.sm-treffer { margin-right: auto; font-size: var(--f15); font-weight: 700; }
.sm-neben, .sm-los { min-height: 48px; padding: 0 20px; border-radius: 8px; font: inherit; font-size: var(--f15); font-weight: 700; cursor: pointer; }
.sm-neben { background: var(--weiss); color: var(--navy); border: 1px solid rgba(0,43,73,.3); }
.sm-los { background: var(--navy); color: var(--weiss); border: 1px solid var(--navy); }

/* Seiten des Menues */
.zs { background: var(--weiss); border-radius: 16px; padding: 24px; color: var(--navy); max-width: 1100px; }
.zs-kopf h1 { font-size: var(--f24); margin: 8px 0 4px; }
.zs-kopf p { font-size: var(--f15); margin: 0 0 16px; }
.zs h3 { font-size: var(--f15); margin: 24px 0 8px; }
.zs-zurueck { min-height: 44px; border: 0; background: none; color: var(--navy); font: inherit; font-size: var(--f13); font-weight: 700; cursor: pointer; padding: 0; }
.zs-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 12px; }
.zs-raster figure { margin: 0; border: 1px solid rgba(0,43,73,.12); border-radius: 8px; padding: 12px; display: grid; gap: 8px; justify-items: center; text-align: center; font-size: var(--f13); }
.zs-raster img { height: 64px; width: auto; max-width: 100%; object-fit: contain; }
.zs-leer { height: 64px; display: grid; place-items: center; font-weight: 700; }
.zs-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.zs-liste button { min-height: 56px; text-align: left; border: 1px solid rgba(0,43,73,.16); border-radius: 8px; background: var(--weiss); color: var(--navy); font: inherit; padding: 8px 12px; cursor: pointer; }
.zs-liste button:hover { border-color: var(--navy); }
.zs-liste small, .zs-tab small { display: block; font-size: var(--f10); color: rgba(0,43,73,.66); }
.zs-tab { width: 100%; border-collapse: collapse; font-size: var(--f13); }
.zs-tab th { text-align: left; font-size: var(--f10); text-transform: uppercase; letter-spacing: .05em; border-bottom: 1.5px solid var(--navy); padding: 8px; }
.zs-tab td { padding: 8px; border-bottom: 1px solid rgba(0,43,73,.08); }
.zs-tab .r { text-align: right; font-variant-numeric: tabular-nums; }
.zs-platz { border: 1px dashed rgba(0,43,73,.4); border-radius: 8px; padding: 16px; font-size: var(--f13); }
.zs-schritte { display: grid; gap: 12px; padding-left: 24px; font-size: var(--f15); }
.zs-schritte b { display: block; }
.zs-schritte span { font-size: var(--f13); }
.zs-zitat { border-left: 3px solid var(--gold); background: var(--hellblau); border-radius: 0 8px 8px 0; padding: 16px; font-size: var(--f15); line-height: 1.5; }
.zs-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.zs textarea { width: 100%; border: 1px solid rgba(0,43,73,.3); border-radius: 8px; padding: 12px; font-family: var(--satz-fest); font-size: var(--f13); color: var(--navy); }

/* Alle Module im Vollbild */
.xu-voll { position: fixed; left: 0; right: 0; top: 112px; bottom: 0; z-index: 1950; background: var(--hellblau); color: var(--navy); overflow: auto; padding: 24px; }
.xu-voll[hidden] { display: none; }
.voll-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; font-size: var(--f18); }
.voll-kopf button { width: 44px; height: 44px; border: 0; border-radius: 8px; background: var(--weiss); color: var(--navy); cursor: pointer; font-size: var(--f18); }
.voll-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.voll-raster button { min-height: 96px; text-align: left; border: 0; border-radius: 16px; background: var(--weiss); color: var(--navy); font: inherit; padding: 16px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; transition: transform 90ms; }
.voll-raster button:hover { transform: translateY(-2px); }
.voll-raster b { font-size: var(--f15); }
.voll-raster small { font-size: var(--f13); opacity: .75; }

/* Fuehrung */
.xu-tour { position: fixed; inset: 0; z-index: 3000; }
.xu-tour[hidden] { display: none; }
.tr-schleier { position: absolute; inset: 0; background: rgba(0,43,73,.45); }
.tr-ring { position: absolute; border-radius: 12px; box-shadow: 0 0 0 4px var(--gold), 0 0 0 9999px rgba(0,43,73,.45); pointer-events: none; transition: all 260ms cubic-bezier(.2,.8,.2,1); }
.tr-box { position: absolute; width: 360px; max-width: calc(100vw - 32px); background: var(--weiss); color: var(--navy); border-radius: 16px; padding: 20px; box-shadow: 0 16px 48px rgba(0,43,73,.3); }
.tr-box.mitte { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 440px; }
.tr-box h3 { font-size: var(--f18); margin: 4px 0 8px; }
.tr-box p { font-size: var(--f15); line-height: 1.5; margin: 0 0 16px; }
.tr-knoepfe { display: flex; justify-content: flex-end; gap: 8px; }
.tr-knoepfe > button:first-child { min-height: 48px; border: 0; background: none; color: var(--navy); font: inherit; font-weight: 600; cursor: pointer; padding: 0 12px; }

@media (prefers-reduced-motion: reduce) { .xu-smart, .tr-ring, .xh-weg, .knopf-neu, .voll-raster button { transition: none; } }

/* Mobil bis 1024 */
@media (max-width: 1024px) {
  .xu-hero { padding: 12px 16px; }
  .xh-z1 h1 { font-size: var(--f18); }
  .xh-z2 { display: none; }
  .xh-z3 { display: none; }
  .xh-z1 { gap: 8px; }
  .xh-kz { gap: 12px; font-size: var(--f10); }
  .xh-kz b { font-size: var(--f15); }
  .xh-weg { min-height: 56px; }
  .xu-arbeit { grid-template-columns: minmax(0, 1fr); }
  .xu-fp { display: none; }
  .xu-arbeit.fp-auf .xu-fp { display: block; position: fixed; inset: 0; top: 0; max-height: none; border-radius: 0; z-index: 2500; }
  .xu-arbeit.fp-auf .fp-zu { display: grid; place-items: center; width: 56px; height: 56px; border: 0; background: none; color: var(--navy); font-size: var(--f18); cursor: pointer; }
  .fp-smart { min-height: 56px; }
  .xu-mobil-leiste { display: flex; gap: 8px; margin: 0 0 8px; }
  .xu-mobil-leiste button { flex: 1; min-height: 56px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid rgba(0,43,73,.3); border-radius: 8px; background: var(--weiss); color: var(--navy); font: inherit; font-size: var(--f13); font-weight: 700; cursor: pointer; }
  .xu-mobil-leiste button:last-child { background: var(--gold); border-color: var(--gold); }
  .xu-mobil-leiste b { min-width: 20px; height: 20px; border-radius: 999px; background: var(--navy); color: var(--weiss); font-size: var(--f10); display: inline-grid; place-items: center; }
  .fp-zeile, .fp-kopf { min-height: 56px; }
  .xu-smart { top: 0; width: 100vw; min-width: 0; z-index: 2600; }
  .sm-rumpf { display: flex; flex-direction: column; overflow: auto; overflow-x: hidden; }
  .sm-rechner { order: -1; }
  .sm-filter { overflow: visible; grid-template-columns: minmax(0, 1fr); }
  .sm-rechner { overflow: visible; }
  .sm-fuss { flex-wrap: wrap; }
  .sm-neben { display: none; }
  .pk-kopf, .pk-fuss { padding-left: 16px; padding-right: 16px; }
  .pk-tab, .pk-tab tbody, .pk-tab tr, .pk-tab td { display: block; }
  .pk-tab tr { border-top: 1px solid rgba(0,43,73,.1); padding: 8px 16px; display: grid; grid-template-columns: 1fr auto; gap: 4px; }
  .pk-tab td { border: 0; padding: 0 !important; width: auto !important; }
  .pk-tab td.dim { grid-column: 1 / -1; font-size: var(--f10); }
  .pk-aktion { text-align: left; }
  .xu-voll { top: 0; z-index: 2600; }
  .tr-box, .tr-box.mitte { left: 16px !important; right: 16px; width: auto; top: auto !important; bottom: 88px; transform: none; }
}

/* Kaufbox im Detail, 24.09.2026 */
#xupplyInhalt .dt-kauf { position: sticky; top: 0; z-index: 2; background: var(--weiss); padding-bottom: 12px; margin-bottom: 8px; border-bottom: 1px solid rgba(0,43,73,.12); display: grid; gap: 8px; }
#xupplyInhalt .dt-kauf h2 { margin: 0; }
@media (max-width:1024px){
.dt-raster{display:flex!important;flex-direction:column;gap:16px}
.dt-raster>.dt-mitte{display:contents}
.dt-mitte>.galerie{order:1}.dt-mitte>.galerie-daumen{order:2}
.dt-raster>.feld.rechner{order:3}
.dt-raster>.feld:not(.dt-mitte):not(.rechner){order:4}
.dt-mitte>.reiter{order:5}.dt-mitte>.reiter-inhalt{order:6}
.dt-kauf{position:static}
}
@media (max-width:1024px){.fp-spalten{display:none}}