/* Einkaufszettel V4 -- Ansicht „Teileliste" (docs/einkaufszettel-v4-plan.md, Etappe 2).
   Nur auf /zettel/v4 geladen. Nur var(--…)-Tokens, wie style.css.

   Umbruchstufen (Plan §6) -- fuer Teileliste UND Shop-Vergleich dieselben:
     >= 1200  Desktop          zweispaltig, Bestellspalte 380 px, Bild 72 px
     1024-1199 Desktop kompakt zweispaltig, Bestellspalte 320 px, Bild 56 px
     768-1023 Tablet           einspaltig, Summenleiste unten, Bestellen als Blatt
     < 768    Mobile           Handy-Teilezeile, Tippflaechen >= 44 px

   Seitliches Scrollen verhindert schon style.css (`overflow-x:clip` an html/body,
   nicht `hidden` -- das schaltete position:sticky ab). */

.z4{--z4-bild:72px;--z4-best:380px;padding-bottom:var(--space-8)}

/* --- Kopf -------------------------------------------------------------- */
.z4-kopf{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin:var(--space-5) 0 var(--space-4)}
.z4-kopf-links{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.z4-titel{margin:0;font-family:var(--font-oswald);font-size:var(--text-2xl);font-weight:var(--fw-semibold);
  text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--ink);line-height:1.1}
.z4-kopf-akt{display:flex;gap:8px;align-items:center}

.z4-fz{position:relative}
.z4-fz-knopf{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;
  border:1px solid var(--line-strong);border-radius:var(--radius-md);background:var(--paper-bright);
  color:var(--ink);font:inherit;font-size:var(--text-sm);font-weight:var(--fw-semibold);cursor:pointer}
.z4-fz-knopf:hover{border-color:var(--fusion)}
.z4-fz-knopf.gewaehlt{background:var(--fusion-deep);border-color:var(--fusion-deep);color:var(--text-on-color)}
.z4-pfeil{flex:none}

/* Menue: am Desktop ein Fenster unter dem Knopf, unter 1024 px ein Blatt. */
.z4-menue{position:absolute;right:0;top:calc(100% + 6px);z-index:60;width:300px;max-height:min(70vh,520px);
  display:flex;flex-direction:column;background:var(--paper-bright);border:1px solid var(--line-soft);
  border-radius:var(--radius-md);box-shadow:var(--shadow-lg);overflow:hidden}
.z4-menue[hidden]{display:none}
.z4-menue-kopf{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 8px 14px;
  font-family:var(--font-display);font-size:var(--text-xs);font-weight:var(--fw-semibold);
  text-transform:uppercase;letter-spacing:var(--tracking-wider);color:var(--ink-2)}
.z4-menue-liste{overflow-y:auto;padding:0 6px 8px}
.z4-fz-gruppe{padding:10px 8px 4px;font-size:var(--text-2xs);font-weight:var(--fw-semibold);
  text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--ink-3)}
.z4-fz-eintrag{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;
  min-height:36px;padding:6px 8px;border:0;border-radius:var(--radius-sm);background:none;
  color:var(--ink);font:inherit;font-size:var(--text-sm);text-align:left;cursor:pointer}
.z4-fz-eintrag:hover{background:var(--paper-sunken)}
.z4-fz-eintrag[aria-checked="true"]{background:var(--fusion-soft);font-weight:var(--fw-semibold)}
.z4-fz-bj{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--ink-3)}
.z4-menue-griff{display:none}
.z4-blatt-zu{display:none;width:40px;height:40px;align-items:center;justify-content:center;
  border:0;border-radius:var(--radius-pill);background:none;color:var(--ink-3);cursor:pointer}
.z4-blatt-zu:hover{background:var(--paper-sunken);color:var(--ink)}

/* Ansichts-Umschalter (Segmented Control). */
.z4-umschalter{display:inline-flex;gap:4px;padding:4px;margin-bottom:var(--space-4);
  background:var(--paper-sunken);border-radius:var(--radius-md);box-shadow:var(--shadow-inset)}
.z4-tab{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 14px;border:0;
  border-radius:var(--radius-sm);background:none;color:var(--ink-2);font:inherit;
  font-size:var(--text-sm);font-weight:var(--fw-semibold);cursor:pointer}
.z4-tab.aktiv{background:var(--paper-bright);color:var(--ink);box-shadow:var(--shadow-sm)}
.z4-tab:disabled{opacity:.5;cursor:default}

.z4-laedt{color:var(--ink-3);font-size:var(--text-sm)}

/* --- Raster ------------------------------------------------------------ */
.z4-raster{display:grid;grid-template-columns:minmax(0,1fr) var(--z4-best);gap:20px;align-items:start}
.z4-karte{background:var(--paper-bright);border:1px solid var(--line-soft);border-radius:var(--radius-md);
  box-shadow:var(--shadow-xs)}
.z4-karte-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:12px 18px;border-bottom:1px solid var(--line-soft)}
.z4-schritt{margin:0;font-family:var(--font-display);font-size:var(--text-xs);font-weight:var(--fw-semibold);
  text-transform:uppercase;letter-spacing:var(--tracking-wider);color:var(--ink-2)}
.z4-mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.z4-klein{font-size:var(--text-xs);color:var(--ink-3)}

.z4-vchips{display:flex;gap:6px;flex-wrap:wrap}
.z4-vchip{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 10px;
  border:1px solid var(--line-strong);border-radius:var(--radius-pill);background:var(--paper);
  color:var(--ink-2);font:inherit;font-size:var(--text-xs);font-weight:var(--fw-semibold);cursor:pointer}
.z4-vchip.aktiv{border-color:var(--fusion);background:var(--paper-bright);color:var(--ink);
  box-shadow:inset 0 0 0 .5px var(--fusion)}

/* --- Teilezeile (V4 §3.2) ---------------------------------------------- */
.z4-pos{border-bottom:1px solid var(--line-soft);padding:14px 18px 12px}
.z4-pos:last-of-type{border-bottom:0}
.z4-zeile{position:relative;display:grid;grid-template-columns:var(--z4-bild) minmax(0,1fr) auto 150px 28px;
  gap:20px;align-items:start}
/* Passung: schmaler Farbbalken links (Plan §1 C.12). Nur mit Fahrzeug. */
.z4-pos[class*="pas-"] .z4-zeile::before{content:"";position:absolute;left:-12px;top:2px;bottom:2px;
  width:3px;border-radius:2px;background:var(--success)}
.z4-pos.pas-ungeprueft .z4-zeile::before{background:var(--warning)}
.z4-pos.pas-passt_nicht .z4-zeile::before{background:var(--danger)}

.z4-bild{width:var(--z4-bild);height:var(--z4-bild);border:1px solid var(--line-soft);
  border-radius:var(--radius-sm);background:var(--paper-sunken);overflow:hidden;display:flex;
  align-items:center;justify-content:center}
.z4-bild img{width:100%;height:100%;object-fit:contain;display:block}
.z4-bild img.z4-kein-foto{object-fit:cover}

.z4-text{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.z4-name{font-size:var(--text-md);font-weight:var(--fw-semibold);line-height:1.3;color:var(--ink);
  text-wrap:pretty}
.z4-nr{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--ink-3)}
.z4-plaketten{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.z4-plakette{display:inline-flex;align-items:center;height:24px;padding:0 8px;font-size:var(--text-xs);
  color:var(--ink-2);background:var(--paper-sunken);border:1px solid var(--line-soft);
  border-radius:var(--radius-sm);white-space:nowrap}
.z4-plakette b{color:var(--ink);margin-left:.25em}
.z4-pos.pas-ungeprueft .z4-plakette.pas{background:var(--warning-soft);border-color:color-mix(in oklab,var(--warning) 35%,transparent);color:var(--ink)}
.z4-pos.pas-passt_nicht .z4-plakette.pas{background:var(--danger-soft);border-color:color-mix(in oklab,var(--danger) 35%,transparent);color:var(--danger)}
.z4-shopzeile{display:inline-flex;align-items:center;gap:7px;font-size:var(--text-xs);color:var(--ink-2)}
.z4-mono-kachel{flex:none;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:var(--radius-xs);background:var(--paper-bright);font-family:var(--font-display);
  font-size:10px;font-weight:var(--fw-bold)}
.z4-mono-kachel.gross{width:32px;height:32px;font-size:12px;border-radius:var(--radius-sm)}
.z4-passt-nicht{font-size:var(--text-xs);color:var(--danger)}
.z4-hinweis{font-size:var(--text-xs);color:var(--warning);font-weight:var(--fw-medium)}

.z4-menge{display:flex;flex-direction:column;align-items:center;gap:4px}
.z4-stepper{display:inline-flex;align-items:center;border:1px solid var(--line-strong);
  border-radius:var(--radius-md);background:var(--paper-bright);overflow:hidden}
.z4-stepper button{width:36px;height:36px;border:0;background:none;color:var(--ink);font:inherit;
  font-size:var(--text-md);cursor:pointer}
.z4-stepper button:hover:not(:disabled){background:var(--paper-sunken)}
.z4-stepper button:disabled{color:var(--ink-mute);cursor:default}
.z4-stepper .z4-mono{min-width:28px;text-align:center;font-size:var(--text-sm)}

.z4-preis{display:flex;flex-direction:column;align-items:flex-end;gap:3px;text-align:right}
.z4-zeilensumme{font-size:var(--text-lg);font-weight:var(--fw-semibold);color:var(--ink)}
.z4-anfrage{font-size:var(--text-sm);color:var(--ink-2);font-weight:var(--fw-medium)}

.z4-weg{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:var(--radius-pill);background:none;color:var(--ink-3);cursor:pointer}
.z4-weg:hover{background:var(--danger-soft);color:var(--danger)}

/* Spar-Balken (V4 §3.3): „vergleichen" steht buendig mit derselben Zeile ohne
   Balken -- der Balken ist dafuer 12 px nach links versetzt. */
.z4-spar,.z4-schlank{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:10px 0 0 calc(var(--z4-bild) + 20px)}
.z4-spar{margin-left:calc(var(--z4-bild) + 8px);padding:6px 6px 6px 12px;background:var(--success-soft);
  border-radius:var(--radius-sm)}
.z4-vergleichen{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0;border:0;
  background:none;color:var(--fusion-deep);font:inherit;font-size:var(--text-sm);
  font-weight:var(--fw-semibold);cursor:pointer}
.z4-vergleichen[aria-expanded="true"] svg{transform:rotate(180deg)}
.z4-wechseln{min-height:32px;padding:0 12px;border:1px solid var(--success);border-radius:var(--radius-md);
  background:var(--paper-bright);color:var(--success);font:inherit;font-size:var(--text-sm);
  font-weight:var(--fw-semibold);cursor:pointer;white-space:nowrap}
.z4-wechseln:hover{background:var(--success);color:var(--text-on-color)}
.z4-nur{font-size:var(--text-sm);color:var(--ink-3)}

/* Angebotstabelle (V4 §3.4). */
.z4-tabelle{margin:8px 0 2px calc(var(--z4-bild) + 20px);border:1px solid var(--line-soft);
  border-radius:var(--radius-sm);overflow:hidden}
.z4-tabelle[hidden]{display:none}
.z4-angebot{display:grid;grid-template-columns:18px minmax(0,1.4fr) minmax(0,1.2fr) auto 110px;gap:12px;
  align-items:center;width:100%;min-height:44px;padding:6px 12px;border:0;border-top:1px solid var(--line-soft);
  background:var(--paper-bright);color:var(--ink);font:inherit;font-size:var(--text-sm);text-align:left;cursor:pointer}
.z4-angebot:first-child{border-top:0}
.z4-angebot:hover:not(.gewaehlt){background:var(--paper-sunken)}
.z4-angebot.gewaehlt{background:var(--fusion-soft);cursor:default}
.z4-radio{width:16px;height:16px;border:1.5px solid var(--line-strong);border-radius:50%;background:var(--paper-bright)}
.z4-angebot.gewaehlt .z4-radio{border:5px solid var(--fusion)}
.z4-ang-marke,.z4-ang-shop{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.z4-ang-shop{display:inline-flex;align-items:center;gap:7px}
.z4-ang-wirk{text-align:right;color:var(--ink-2)}
.z4-ang-wirk.spart{color:var(--success);font-weight:var(--fw-semibold)}
.z4-ang-wirk.teurer{color:var(--danger)}

.z4-karte-fuss{display:flex;justify-content:flex-end;padding:8px 18px;border-top:1px solid var(--line-soft)}
.z4-leeren{min-height:32px;padding:0 10px;border:0;border-radius:var(--radius-sm);background:none;
  color:var(--ink-3);font:inherit;font-size:var(--text-xs);font-weight:var(--fw-semibold);cursor:pointer}
.z4-leeren:hover{background:var(--danger-soft);color:var(--danger)}

/* --- 2 · So bestellst du (V4 §3.5) ------------------------------------- */
.z4-bestellen{position:sticky;top:calc(var(--kopf-h) + 16px);max-height:calc(100vh - var(--kopf-h) - 32px);
  overflow-y:auto;display:flex;flex-direction:column}
.z4-shops{display:flex;flex-direction:column}
.z4-shop{border-bottom:1px solid var(--line-soft)}
.z4-shop-zeile{display:grid;grid-template-columns:32px minmax(0,1fr) auto;grid-template-areas:
  "mono text summe" "mono text knopf";gap:4px 12px;align-items:center;padding:12px 16px}
.z4-shop-zeile .z4-mono-kachel{grid-area:mono}
.z4-shop-text{grid-area:text;display:flex;flex-direction:column;gap:2px;min-width:0}
.z4-shop-text b{font-size:var(--text-sm);color:var(--ink)}
.z4-shop-summe{grid-area:summe;justify-self:end;font-size:var(--text-sm);font-weight:var(--fw-semibold)}
.z4-bestell-knopf{grid-area:knopf;justify-self:end;display:inline-flex;align-items:center;gap:5px;
  min-height:30px;padding:0 10px;border:1px solid var(--line-strong);border-radius:var(--radius-md);
  background:var(--paper-bright);color:var(--ink);font:inherit;font-size:var(--text-xs);
  font-weight:var(--fw-semibold);cursor:pointer}
.z4-bestell-knopf[aria-expanded="true"] svg{transform:rotate(180deg)}
.z4-fortschritt{font-size:var(--text-xs);color:var(--ink-3)}
.z4-fortschritt.teil{color:var(--fusion-deep);font-weight:var(--fw-medium)}
.z4-fortschritt.fertig{color:var(--success);font-weight:var(--fw-semibold)}
.z4-fortschritt.fertig::before{content:"✓ "}
.z4-shop-teile{list-style:none;margin:0;padding:0 16px 10px 60px;display:flex;flex-direction:column;gap:8px}
.z4-shop-teile[hidden]{display:none}
.z4-shop-teile li{display:flex;align-items:center;gap:10px;justify-content:space-between}
.z4-haken{display:flex;align-items:flex-start;gap:9px;min-width:0;cursor:pointer}
.z4-haken input{flex:none;width:18px;height:18px;margin:2px 0 0;accent-color:var(--success)}
.z4-haken-text{display:flex;flex-direction:column;gap:1px;min-width:0}
.z4-haken-name{font-size:var(--text-sm);color:var(--ink);overflow:hidden;text-overflow:ellipsis}
.z4-haken input:checked+.z4-haken-text .z4-haken-name{color:var(--ink-3);text-decoration:line-through}
.z4-zumshop{flex:none;display:inline-flex;align-items:center;gap:5px;min-height:32px;padding:0 11px;
  border-radius:var(--radius-md);background:var(--fusion);color:var(--text-on-color);
  font-size:var(--text-xs);font-weight:var(--fw-semibold);white-space:nowrap}
.z4-zumshop:hover{background:var(--fusion-deep);text-decoration:none}
.z4-bestell-hinweis{margin:0;padding:10px 16px;font-size:var(--text-xs);color:var(--ink-3);
  border-bottom:1px solid var(--line-soft)}

.z4-summe{padding:12px 16px 14px}
.z4-summe-zeile{display:flex;justify-content:space-between;gap:10px;padding:3px 0;font-size:var(--text-sm);color:var(--ink-2)}
.z4-gesamt{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:8px;
  padding-top:10px;border-top:1px solid var(--line-soft);font-family:var(--font-display);
  font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--ink)}
.z4-gesamt-wert{font-size:var(--text-xl);text-transform:none;letter-spacing:0}
.z4-fussnote{margin:6px 0 0;font-size:var(--text-xs);color:var(--ink-3)}

.z4-tipps{margin:0 16px 16px;padding:12px 14px;background:var(--success-soft);border-radius:var(--radius-md)}
.z4-tipps p{margin:0 0 10px;font-size:var(--text-sm);color:var(--ink)}
.z4-tipps-knopf{width:100%;min-height:38px;padding:0 12px;border:0;border-radius:var(--radius-md);
  background:var(--success);color:var(--text-on-color);font:inherit;font-size:var(--text-sm);
  font-weight:var(--fw-semibold);cursor:pointer}
.z4-tipps-knopf:hover{filter:brightness(.95)}

.z4-leiste{display:none}
.z4-stand{margin-top:var(--space-4)}

/* Verdunkler fuer Blaetter. */
.z4-scrim{position:fixed;inset:0;z-index:55;background:rgba(42,38,32,.35)}
.z4-scrim[hidden]{display:none}

/* Quittung ueber der Summenleiste. */
.zettel-toast.z4-toast{bottom:calc(24px + var(--z4-leiste-h,0px))}

/* --- Desktop kompakt: 1024–1199 ------------------------------------------ */
@media(max-width:1199px){
  .z4{--z4-bild:56px;--z4-best:320px}
  .z4-zeile{grid-template-columns:var(--z4-bild) minmax(0,1fr) auto 120px 28px;gap:16px}
  .z4-spar,.z4-schlank,.z4-tabelle{margin-left:calc(var(--z4-bild) + 16px)}
  .z4-spar{margin-left:calc(var(--z4-bild) + 4px)}
}

/* --- Tablet: 768–1023 — Sprung 1, einspaltig ------------------------------ */
@media(max-width:1023px){
  .z4-raster{grid-template-columns:minmax(0,1fr)}
  .z4{padding-bottom:calc(var(--z4-leiste-h,0px) + var(--space-6))}
  .z4-spar{margin-left:0}
  .z4-schlank,.z4-tabelle{margin-left:0}

  /* „So bestellst du" wird zum Blatt von unten. */
  .z4-bestellen{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:60;max-height:86vh;
    border-radius:20px 20px 0 0;border-bottom:0;box-shadow:var(--shadow-lg);
    transform:translateY(105%);visibility:hidden;
    transition:transform var(--dur-base) var(--ease-standard),visibility 0s linear var(--dur-base);
    padding-bottom:env(safe-area-inset-bottom)}
  /* `visibility`: das geschlossene Blatt liegt nur unter dem Rand -- ohne sie
     waeren seine Knoepfe weiter per Tab erreichbar. */
  .z4-bestellen.offen{transform:none;visibility:visible;transition-delay:0s}
  .z4-bestellen .z4-blatt-zu{display:inline-flex}

  .z4-menue{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;max-height:78vh;
    border-radius:20px 20px 0 0;padding-bottom:env(safe-area-inset-bottom)}
  .z4-menue .z4-blatt-zu{display:inline-flex}
  .z4-menue-griff{display:block;width:40px;height:4px;margin:8px auto 0;border-radius:2px;background:var(--line-strong)}
  .z4-fz-eintrag{min-height:44px}

  .z4-leiste{display:flex;align-items:center;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:50;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--paper-bright);
    border-top:1px solid var(--line);box-shadow:0 -4px 16px rgba(42,38,32,.10)}
  .z4-leiste-summe{display:flex;flex-direction:column;margin-right:auto}
  .z4-leiste-wert{font-size:var(--text-lg);font-weight:var(--fw-semibold);color:var(--ink)}
  .z4-leiste-spart{min-height:36px;padding:0 10px;border:0;border-radius:var(--radius-pill);
    background:var(--success-soft);color:var(--success);font:inherit;font-size:var(--text-xs);
    font-weight:var(--fw-semibold);cursor:pointer;white-space:nowrap}
  .z4-leiste-knopf{min-height:48px;padding:0 22px;border:0;border-radius:var(--radius-md);
    background:var(--fusion);color:var(--text-on-color);font:inherit;font-size:var(--text-base);
    font-weight:var(--fw-semibold);cursor:pointer}
}

/* --- Mobile: < 768 — Sprung 2, Handy-Muster (4a) -------------------------- */
@media(max-width:767px){
  /* 16 px Seitenrand nach 4a (die Seite sonst: --gutter). */
  .wrap.z4{--z4-bild:56px;padding-inline:16px}
  .z4-kopf{flex-direction:column;align-items:stretch;gap:12px}
  .z4-titel{font-size:var(--text-xl)}
  .z4-kopf-akt{display:block}
  .z4-fz-knopf{min-height:36px}
  .z4-umschalter{display:flex}
  .z4-tab{flex:1;justify-content:center;min-height:40px}

  .z4-pos{padding:14px 16px 12px}
  /* Zweite Zeile eingerueckt auf die Textkante (56 + 12 px): Menge links,
     Preis rechts. Die Spalte `auto` traegt nur in Zeile 2 etwas -- in Zeile 1
     gehoert sie dem Text. */
  .z4-zeile{grid-template-columns:var(--z4-bild) minmax(0,1fr) auto 36px;grid-template-areas:
    "bild text  text  weg" ".    menge preis preis";gap:12px;row-gap:10px}
  .z4-bild{grid-area:bild}
  .z4-text{grid-area:text}
  .z4-weg{grid-area:weg;width:36px;height:36px;margin:-4px 0 0}
  .z4-menge{grid-area:menge;flex-direction:row;align-items:center;gap:8px;justify-self:start}
  .z4-preis{grid-area:preis;white-space:nowrap}
  .z4-name{font-size:var(--text-base)}
  .z4-zeilensumme{font-size:var(--text-md)}
  .z4-preis .z4-klein{font-size:var(--text-2xs)}
  .z4-stepper button{width:40px;height:40px}

  .z4-spar{padding:4px 4px 4px 12px}
  .z4-wechseln{min-height:40px}
  .z4-vergleichen{min-height:40px}
  .z4-angebot{grid-template-columns:18px minmax(0,1fr) auto;grid-template-areas:
    "radio marke wirk" "radio shop stk";min-height:52px;gap:2px 10px}
  .z4-radio{grid-area:radio}
  .z4-ang-marke{grid-area:marke}
  .z4-ang-shop{grid-area:shop;font-size:var(--text-xs);color:var(--ink-3)}
  .z4-ang-stk{grid-area:stk;justify-self:end;font-size:var(--text-xs);color:var(--ink-3)}
  .z4-ang-wirk{grid-area:wirk}

  .z4-shop-zeile{min-height:60px}
  .z4-bestell-knopf{min-height:40px}
  .z4-shop-teile{padding-left:16px}
  .z4-shop-teile li{min-height:56px}
  .z4-haken input{width:28px;height:28px}
  .z4-zumshop{min-height:40px}
  .z4-tipps-knopf{min-height:44px}
  .z4-leeren{min-height:44px}
}

/* ======================================================================
   Shop-Vergleich (V4 §4, Etappe 3) -- dieselben Stufen wie die Teileliste.
   ====================================================================== */
.z4{--z4-teilspalte:210px;--z4-zelle:148px}
.z4[data-ansicht="vergleich"] .z4-teile,
.z4[data-ansicht="teile"] .z4-vgl{display:none}
.z4[data-ansicht="vergleich"] .z4-raster{grid-template-columns:minmax(0,1fr)}
.z4[data-ansicht="teile"] .z4-nur-vgl,
.z4[data-ansicht="vergleich"] .z4-nur-teile{display:none}
.z4-vgl{position:relative;min-width:0}

/* Varianten-Kacheln (V4 §4.1). */
.z4-varianten{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.z4-vkachel{position:relative;display:flex;min-width:190px;border:1px solid var(--line-soft);
  border-radius:var(--radius-md);background:var(--paper)}
.z4-vkachel.aktiv{background:var(--paper-bright);border:1.5px solid var(--fusion)}
.z4-vkachel-wahl{display:flex;flex-direction:column;align-items:flex-start;gap:3px;flex:1;
  padding:10px 34px 10px 14px;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.z4-vkachel-name{font-family:var(--font-oswald);font-size:var(--text-xs);text-transform:uppercase;
  letter-spacing:var(--tracking-wide);color:var(--ink-2)}
.z4-vkachel-preis{font-size:var(--text-lg);font-weight:var(--fw-semibold);color:var(--ink)}
.z4-vkachel-vgl{font-size:var(--text-xs);color:var(--ink-3)}
.z4-vkachel-vgl.spart{color:var(--success)}
.z4-vkachel-vgl.teurer{color:var(--danger)}
.z4-vkachel-weg{position:absolute;top:6px;right:6px;width:26px;height:26px;display:inline-flex;
  align-items:center;justify-content:center;border:0;border-radius:var(--radius-pill);background:none;
  color:var(--ink-3);cursor:pointer}
.z4-vkachel-weg:hover{background:var(--danger-soft);color:var(--danger)}
.z4-vkachel-neu{min-width:170px;min-height:64px;padding:0 16px;border:1.5px dashed var(--line-strong);
  border-radius:var(--radius-md);background:none;color:var(--ink-2);font:inherit;font-size:var(--text-sm);
  font-weight:var(--fw-semibold);cursor:pointer}
.z4-vkachel-neu:hover{border-color:var(--fusion);color:var(--fusion-deep)}

.z4-vgl-knoepfe{display:none}
.z4-plus{min-height:44px;border:1.5px dashed var(--line-strong);border-radius:var(--radius-md);
  background:none;color:var(--ink-2);font:inherit;font-size:var(--text-sm);font-weight:var(--fw-semibold);cursor:pointer}

/* Matrix (V4 §4.2): Teile-Spalte fixiert, bei Ueberbreite seitlich scrollen. */
.z4-matrix-rahmen{overflow-x:auto;border:1px solid var(--line-soft);border-radius:var(--radius-md);
  background:var(--paper-bright);box-shadow:var(--shadow-xs)}
.z4-matrix{display:grid;grid-template-columns:var(--z4-teilspalte) repeat(var(--z4-n),var(--z4-zelle)) 64px;
  gap:6px;padding:8px;width:max-content}
.z4-mz{min-width:0}
.z4 .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.z4-mz-ecke,.z4-mteil,.z4-mjeshop-kopf{position:sticky;left:0;z-index:2;background:var(--paper-bright);
  box-shadow:6px 0 8px -6px rgba(42,38,32,.18)}
.z4-mz-ecke{display:flex;align-items:flex-end;padding:6px 8px;font-size:var(--text-2xs);font-weight:var(--fw-semibold);
  text-transform:uppercase;letter-spacing:var(--tracking-wider);color:var(--ink-3)}
/* Shop-Reiter (Entwurf V3/V4): eigene Flaeche, oben gerundet, deutlich vom
   Tabellenkoerper abgesetzt; dunkle Unterkante, wenn in der Variante etwas
   dort liegt. KEINE Versandkosten im Kopf (V4 §4.2). */
.z4-mkopf{position:relative;display:flex;align-items:center;gap:9px;min-height:64px;padding:10px 30px 10px 10px;
  background:var(--paper-sunken);border:1px solid var(--line-soft);border-bottom:2px solid var(--line-strong);
  border-radius:var(--radius-md) var(--radius-md) 0 0;box-shadow:0 1px 2px rgba(42,38,32,.06);
  font-size:var(--text-sm);font-weight:var(--fw-semibold);color:var(--ink)}
.z4-mkopf.im-korb{border-bottom-color:var(--ink)}
.z4-mkopf .z4-mono-kachel{width:30px;height:30px;font-size:11px;border-radius:var(--radius-sm);
  background:var(--paper-bright);box-shadow:var(--shadow-xs)}
.z4-mkopf-name{line-height:1.2;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  hyphens:auto;-webkit-hyphens:auto;overflow-wrap:anywhere}  /* lange Einwortnamen (Wagenteile, Aircooledshop) mit Trennstrich statt abgeschnitten */
.z4-mkopf-weg{position:absolute;right:4px;top:6px;width:26px;height:26px;display:inline-flex;
  align-items:center;justify-content:center;border:0;border-radius:var(--radius-pill);background:none;
  color:var(--ink-3);cursor:pointer}
.z4-mkopf-weg:hover{background:var(--danger-soft);color:var(--danger)}
.z4-mkopf-weg.aus{color:var(--ink-mute);cursor:not-allowed}
.z4-mkopf-weg.aus:hover{background:none;color:var(--ink-mute)}
/* Seitlich blaettern (Pfeile an der Matrix). Lage setzt zettel_v4.js:
   --z4-pfeil-links = rechte Kante der fixierten Teilespalte, --z4-pfeil-oben = Mitte der Reiter. */
.z4-matrix-huelle{position:relative}
.z4-matrix-huelle::before,.z4-matrix-huelle::after{content:"";position:absolute;top:1px;bottom:1px;width:40px;
  pointer-events:none;opacity:0;transition:opacity .15s;z-index:3}
.z4-matrix-huelle::before{left:calc(var(--z4-pfeil-links,0px) + 1px);
  background:linear-gradient(90deg,rgba(42,38,32,.10),rgba(42,38,32,0))}
.z4-matrix-huelle::after{right:1px;border-radius:0 var(--radius-md) var(--radius-md) 0;
  background:linear-gradient(270deg,rgba(42,38,32,.10),rgba(42,38,32,0))}
.z4-matrix-huelle.mehr-links::before,.z4-matrix-huelle.mehr-rechts::after{opacity:1}
.z4-mpfeil{position:absolute;top:var(--z4-pfeil-oben,40px);z-index:4;width:40px;height:40px;margin-top:-20px;
  display:none;align-items:center;justify-content:center;padding:0;border:1px solid var(--line-strong);
  border-radius:var(--radius-pill);background:var(--paper-bright);color:var(--ink);box-shadow:var(--shadow-lg);cursor:pointer}
.z4-mpfeil:hover{border-color:var(--fusion);color:var(--fusion-deep)}
.z4-mpfeil:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.z4-mpfeil-links{left:calc(var(--z4-pfeil-links,0px) + 8px)}
.z4-mpfeil-rechts{right:8px}
.z4-matrix-huelle.mehr-links .z4-mpfeil-links,.z4-matrix-huelle.mehr-rechts .z4-mpfeil-rechts{display:inline-flex}
@media(max-width:767px){.z4-mpfeil{width:34px;height:34px;margin-top:-17px}}
/* Durch ein neues Teil dazugekommener Shop + dessen Zelle: kurz hervorheben. */
@keyframes z4-neu-da{0%,60%{box-shadow:0 0 0 2px var(--fusion)}100%{box-shadow:0 0 0 2px transparent}}
.z4-mkopf.neu-da,.z4-zelle.neu-da{animation:z4-neu-da 2.6s ease-out}
.z4-mplus{display:flex;align-items:center}
.z4-mplus-knopf{width:100%;min-height:36px;border:1.5px dashed var(--line-strong);border-radius:var(--radius-sm);
  background:none;color:var(--ink-2);font:inherit;font-size:var(--text-2xs);font-weight:var(--fw-semibold);cursor:pointer}
.z4-mplus-knopf:hover{border-color:var(--fusion);color:var(--fusion-deep)}

.z4-mteil{display:flex;flex-direction:column;gap:4px;padding:8px 30px 8px 8px;
  border-top:1px solid var(--line-soft)}
.z4-mteil .z4-name{font-size:var(--text-sm);line-height:1.3}
.z4-mteil-nr{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.z4-stepper.klein button{width:26px;height:26px;font-size:var(--text-sm)}
.z4-stepper.klein .z4-mono{min-width:20px;font-size:var(--text-xs)}
.z4-mteil-stk{display:none;font-size:var(--text-xs);color:var(--ink-3)}
.z4-mteil-weg{position:absolute;top:6px;right:2px}

.z4-zelle{display:flex;flex-direction:column;gap:2px;min-height:72px;padding:8px 10px;
  border-radius:var(--radius-sm);font:inherit;font-size:var(--text-xs);text-align:left;color:var(--ink)}
.z4-zelle.gewaehlt{background:var(--paper-bright);border:1.5px solid var(--fusion)}
.z4-zelle.gewaehlt .z4-zelle-summe{font-weight:var(--fw-bold)}
.z4-zelle.alt{background:var(--paper);border:1px solid var(--line-soft);cursor:pointer}
.z4-zelle.alt:hover{background:var(--fusion-soft);border-color:var(--fusion)}
.z4-zelle.leer{align-items:center;justify-content:center;border:1px dashed var(--line);color:var(--ink-mute)}
.z4-zelle-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.z4-zelle-summe{font-size:var(--text-sm);font-weight:var(--fw-semibold)}
.z4-zelle-wirk{font-size:var(--text-2xs);font-weight:var(--fw-semibold);color:var(--ink-2)}
.z4-zelle-wirk.spart{color:var(--success)}
.z4-zelle-wirk.teurer{color:var(--danger)}
.z4-zelle-marke{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2)}

.z4-mjeshop-kopf{display:flex;align-items:center;padding:8px;border-top:1px solid var(--line);
  font-size:var(--text-2xs);font-weight:var(--fw-semibold);text-transform:uppercase;
  letter-spacing:var(--tracking-wider);color:var(--ink-3)}
.z4-mjeshop{display:flex;flex-direction:column;gap:4px;padding:8px;border-top:1px solid var(--line)}
.z4-mjeshop-summe{font-size:var(--text-sm);font-weight:var(--fw-semibold);margin-top:auto}  /* Summe + Knopf in allen Shops auf einer Linie */
.z4-mjeshop .z4-ganz{white-space:nowrap}
.z4-mjeshop-knopf{align-self:flex-start;min-height:30px;padding:0 10px;border:0;border-radius:var(--radius-md);
  background:var(--fusion);color:var(--text-on-color);font:inherit;font-size:var(--text-xs);
  font-weight:var(--fw-semibold);cursor:pointer;white-space:nowrap}
.z4-mjeshop-knopf.fertig{background:var(--success)}
.z4-mjeshop.leer{justify-content:center}

.z4-wisch-hinweis{display:none;margin:8px 0 0;font-size:var(--text-xs);color:var(--ink-3)}

.z4-gesamtleiste{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-top:12px;padding:14px 18px;
  border:1px solid var(--line-soft);border-radius:var(--radius-md);background:var(--paper-bright)}
.z4-gesamtleiste-name{font-family:var(--font-display);font-size:var(--text-sm);font-weight:var(--fw-semibold);
  text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--ink)}
.z4-gesamtleiste-text{font-size:var(--text-sm);color:var(--ink-2)}
.z4-gesamtleiste-wert{margin-left:auto;font-size:var(--text-xl);font-weight:var(--fw-semibold);color:var(--ink)}

/* „Shop als Spalte zeigen" -- die Hoehe setzt zettel_v4.js unter den Knopf. */
.z4-shopmenue{right:0;left:auto;width:340px}
.z4-shop-eintrag{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:6px 8px;border:0;
  border-radius:var(--radius-sm);background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.z4-shop-eintrag:hover:not(:disabled){background:var(--paper-sunken)}
.z4-shop-eintrag:disabled{opacity:.5;cursor:default}
.z4-shop-eintrag-text{display:flex;flex-direction:column;flex:1;min-width:0;font-size:var(--text-sm)}
.z4-shop-eintrag-plus{font-size:var(--text-lg);color:var(--fusion-deep)}
.z4-menue-leer{padding:10px 8px;margin:0}

/* Foto beim Ueberfahren -- nur mit Maus (Plan §1a Nr. 2), s. zettel_v4.js. */
.z4-fotopop{position:fixed;z-index:65;width:190px;padding:6px;background:var(--paper-bright);
  border:1px solid var(--line-soft);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);pointer-events:none}
.z4-fotopop img{display:block;width:100%;height:150px;object-fit:contain;background:var(--paper-sunken);border-radius:var(--radius-sm)}
.z4-fotopop span{display:block;padding-top:4px;font-size:var(--text-2xs);color:var(--ink-3)}

/* Bestellen aus der Zeile „Je Shop": am Desktop ein Fenster, darunter das Blatt. */
@media(min-width:1024px){
  .z4[data-ansicht="vergleich"] .z4-bestellen{position:fixed;top:auto;bottom:24px;left:50%;
    width:min(440px,calc(100% - 32px));max-height:70vh;transform:translateX(-50%);z-index:60;
    display:none;box-shadow:var(--shadow-lg)}
  .z4[data-ansicht="vergleich"] .z4-bestellen.offen{display:flex}
  .z4[data-ansicht="vergleich"] .z4-bestellen .z4-blatt-zu{display:inline-flex}
}
@media(max-width:1023px){
  .z4{--z4-teilspalte:160px}
  .z4-shopmenue{left:0;right:0;width:auto}
}
@media(max-width:767px){
  .z4{--z4-teilspalte:108px;--z4-zelle:120px}
  .z4-matrix{grid-template-columns:var(--z4-teilspalte) repeat(var(--z4-n),var(--z4-zelle));padding:6px}
  .z4-mz-ecke{visibility:hidden}
  .z4-mplus,.z4-mrest{display:none}
  .z4-matrix-rahmen{scrollbar-width:none}
  .z4-matrix-rahmen::-webkit-scrollbar{display:none}
  .z4-varianten{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding-inline:16px}
  .z4-vkachel{min-width:150px;flex:none}
  .z4-vkachel-preis{font-size:var(--text-md)}
  .z4-vkachel-neu{flex:none;min-width:120px}
  .z4-vgl-knoepfe{display:flex;gap:8px;margin-bottom:10px}
  .z4-vgl-knoepfe .z4-plus{flex:1}
  .z4-mteil{padding:6px 24px 6px 6px}
  /* Lange Namen ("Hauptbremszylinder 20,64mm (2 Schalter) ...") auf drei Zeilen
     kappen -- sonst bestimmt die schmale Teile-Spalte die Hoehe der ganzen Zeile. */
  .z4-mteil .z4-name{font-size:var(--text-xs);font-weight:var(--fw-semibold);display:-webkit-box;
    -webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .z4-mteil .z4-nr,.z4-mteil .z4-stepper,.z4-mteil .z4-klein{display:none}
  .z4-mteil-stk{display:inline}
  .z4-mkopf{min-height:56px;padding:8px 30px 8px 8px;gap:7px;font-size:var(--text-xs)}
  .z4-mkopf .z4-mono-kachel{display:none}   /* Platz fuer den Shopnamen (nur 120-px-Spalten) */
  .z4-mkopf-weg{width:28px;height:28px;top:4px;right:2px}
  .z4-wisch-hinweis{display:block}
  .z4-gesamtleiste{padding:12px 14px}
}

/* ======================================================================
   + Teil hinzufuegen (V4 §5, Etappe 4)
   ====================================================================== */
.z4-dazu-zeile{padding:10px 18px;border-bottom:1px solid var(--line-soft)}
.z4-dazu-zeile.unten{border-bottom:0;border-top:1px solid var(--line-soft)}
.z4-dazu{display:inline-flex;align-items:center;justify-content:center;gap:7px;width:100%;min-height:40px;
  padding:0 14px;border:1.5px dashed var(--line-strong);border-radius:var(--radius-md);background:none;
  color:var(--ink-2);font:inherit;font-size:var(--text-sm);font-weight:var(--fw-semibold);cursor:pointer}
.z4-dazu:hover{border-color:var(--fusion);color:var(--fusion-deep);background:var(--paper)}
.z-leer .z4-dazu{width:auto;margin-top:4px}

.z4-mdazu{position:sticky;left:0;z-index:2;background:var(--paper-bright);padding:8px 0;
  border-top:1px solid var(--line-soft);box-shadow:6px 0 8px -6px rgba(42,38,32,.18)}
.z4-mdazu .z4-dazu{min-height:36px;font-size:var(--text-xs)}
.z4-mdazu-hinweis{grid-column:2 / -1;display:flex;align-items:center;padding:8px;
  border-top:1px solid var(--line-soft);font-size:var(--text-xs);color:var(--ink-3)}

/* Das Suchfenster. Am Desktop setzt zettel_v4.js die Lage am Knopf. */
.z4-suche{position:fixed;right:auto;top:auto;z-index:62;width:min(460px,calc(100vw - 32px));max-height:min(70vh,560px)}
.z4-such-feld-rahmen{display:flex;align-items:center;gap:8px;margin:0 12px 8px;padding:0 12px;min-height:44px;
  border:1px solid var(--line-strong);border-radius:var(--radius-md);background:var(--paper-bright);color:var(--ink-3)}
.z4-such-feld-rahmen:focus-within{border-color:var(--fusion);box-shadow:var(--focus-ring)}
.z4-such-feld{flex:1;min-width:0;border:0;outline:0;background:none;color:var(--ink);font:inherit;font-size:var(--text-sm)}
.z4-such-ergebnis{overflow-y:auto;padding:0 6px 8px}
.z4-such-kopf{margin:4px 8px 6px;font-size:var(--text-2xs);font-weight:var(--fw-semibold);text-transform:uppercase;
  letter-spacing:var(--tracking-wide);color:var(--ink-3)}
.z4-such-leer{margin:6px 8px;font-size:var(--text-sm);color:var(--ink-3)}
.z4-such-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.z4-treffer{display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;padding:8px 10px;border:0;
  border-radius:var(--radius-sm);background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.z4-treffer:hover:not(:disabled),.z4-treffer.markiert{background:var(--paper-sunken)}
.z4-treffer:disabled{cursor:default;opacity:.6}
.z4-treffer.passt-nicht{opacity:.85}
.z4-treffer-kopf{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.z4-treffer-name{font-size:var(--text-sm);font-weight:var(--fw-semibold)}
.z4-treffer-ziel{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:var(--text-xs);color:var(--ink-2)}
.z4-plakette.gelb{background:var(--warning-soft);color:var(--ink)}
.z4-plakette.rot{background:var(--danger-soft);color:var(--danger)}
.z4-begriffe{display:flex;flex-wrap:wrap;gap:6px;padding:0 8px 6px}
.z4-begriff{min-height:32px;padding:0 12px;border:1px solid var(--line-strong);border-radius:var(--radius-pill);
  background:var(--paper-bright);color:var(--ink-2);font:inherit;font-size:var(--text-xs);cursor:pointer}
.z4-begriff:hover{border-color:var(--fusion);color:var(--fusion-deep)}

@media(max-width:1023px){
  .z4-suche{left:0;right:0;bottom:0;top:auto;width:auto;max-height:86vh}
}
@media(max-width:767px){
  .z4-dazu,.z4-mdazu .z4-dazu{min-height:44px}
  .z4-dazu-zeile{padding:10px 16px}
  .z4-such-feld{font-size:16px}          /* sonst zoomt iOS beim Antippen */
  .z4-such-feld-rahmen{min-height:48px}
  .z4-mdazu,.z4-mdazu-hinweis{display:none} /* am Handy: Knopf „+ Teil" ueber der Matrix */
}

@media(prefers-reduced-motion:reduce){
  .z4-bestellen{transition:none}
}

/* ======================================================================
   Kopf-Werkzeuge, ⋯-Menue, Variantenabfrage (Etappe 4, Plan §1 D.19)
   ====================================================================== */
.z4-titelzeile{display:flex;align-items:center;gap:8px}
.z4-wz{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 14px;
  border:1px solid var(--line-strong);border-radius:var(--radius-md);background:var(--paper-bright);
  color:var(--ink);font:inherit;font-size:var(--text-sm);font-weight:var(--fw-semibold);cursor:pointer}
.z4-wz:hover{border-color:var(--fusion);color:var(--fusion-deep)}
.z4-mehr-knopf{display:none;width:44px;height:44px;margin-left:auto;align-items:center;justify-content:center;
  border:0;border-radius:var(--radius-pill);background:none;color:var(--ink-2);cursor:pointer}
.z4-mehr-knopf:hover{background:var(--paper-sunken);color:var(--ink)}
.z4-mehr-eintrag{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:0 10px;border:0;
  border-radius:var(--radius-sm);background:none;color:var(--ink);font:inherit;font-size:var(--text-base);
  text-align:left;cursor:pointer}
.z4-mehr-eintrag:hover{background:var(--paper-sunken)}

.z4-vwahl{position:fixed;left:50%;top:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);
  z-index:63;width:min(360px,calc(100vw - 32px))}
.z4-vwahl-liste{display:flex;flex-direction:column;gap:4px;padding:0 10px 6px}
.z4-vwahl-eintrag{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 6px;border-radius:var(--radius-sm);
  font-size:var(--text-sm);cursor:pointer}
.z4-vwahl-eintrag:hover{background:var(--paper-sunken)}
.z4-vwahl-eintrag input{width:20px;height:20px;accent-color:var(--fusion)}
.z4-vwahl-eintrag .z4-mono{margin-left:auto;color:var(--ink-2)}
.z4-vwahl-akt{display:flex;gap:8px;justify-content:flex-end;padding:8px 12px 12px;border-top:1px solid var(--line-soft)}
.z4-vwahl-ja{min-height:40px;padding:0 18px;border:0;border-radius:var(--radius-md);background:var(--fusion);
  color:var(--text-on-color);font:inherit;font-size:var(--text-sm);font-weight:var(--fw-semibold);cursor:pointer}
.z4-vwahl-ja:disabled{opacity:.5;cursor:default}
.z4-vwahl-nein{min-height:40px;padding:0 14px;border:1px solid var(--line-strong);border-radius:var(--radius-md);
  background:var(--paper-bright);color:var(--ink-2);font:inherit;font-size:var(--text-sm);cursor:pointer}

/* Druckblaetter und Kopierfassungen liegen im Fragment, am Bildschirm nie sichtbar. */
.z4-druck{display:none}

@media(max-width:1199px){
  /* Desktop kompakt: Drucken / Liste kopieren nur als Icon + Tooltip (4b). */
  .z4-wz{padding:0 11px}
  .z4-wz-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
}
@media(max-width:1023px){
  .z4-vwahl{left:0;right:0;top:auto;bottom:0;transform:none;width:auto}
}
@media(max-width:767px){
  .z4-wz{display:none}
  .z4-mehr-knopf{display:inline-flex}
  /* Titelzeile: Zurueck-Pfeil · Titel · ⋯ (Plan §1a Nr. 3). */
  .z4-kopf-links{flex-direction:row;align-items:center;gap:6px;width:100%}
  .z4-kopf-links .z-zurueck{flex:none;width:44px;height:44px;padding:0;justify-content:center}
  .z4-kopf-links .z-zurueck [data-zettel-zurueck-text]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .z4-titelzeile{flex:1;min-width:0}
}

@media print{
  /* Gedruckt wird NUR das Blatt der gewaehlten Varianten (`.an`), jede auf
     eine eigene Seite. Alles andere der Seite faellt weg. */
  .z4 > :not(.z4-druck-ziel),.z4-fotopop,.z4-toast{display:none !important}
  .z4-druck.an{display:block}
  .z4-druck.an ~ .z4-druck.an{break-before:page}
  .z4-druck [data-zettel-kopie],.z4-druck [data-z4-text]{display:none !important}
}