/*
 * PD Child - Styles der Produktseite und des Katalogs.
 *
 * Konsolidiert am 01.09.2026 nach der Redesign-Sitzung (Referenz v6 /
 * Chat-Render). Jede Eigenschaft steht genau einmal - wer aendert,
 * aendert hier und legt keine Ueberschreibungsschicht darueber.
 */
:root {
  --pd-color-text: #192738;
  --pd-color-muted: #5f6d7e;
  --pd-color-accent: #2853a4;
  --pd-color-accent-dark: #142c50;
  --pd-color-accent-light: #eaf0fa;
  --pd-color-border: #dbe1e8;
  --pd-color-zeile: #f2f4f8;
  --pd-color-ground: #f3f5f8;
  --pd-color-card: #ffffff;
  --pd-color-panel: #f8fafc;
  --pd-color-vertrag: #d7262f;
  /* Stufen-Palette (16.09.2026): semantische Flaechenfarben je
     Qualitaetsstufe, wie Vertrags-Rot neben der Zwei-Blau-Regel. */
  --pd-stufe-original-bg: #142c50;
  --pd-stufe-original-fg: #ffffff;
  --pd-stufe-kompatibel-bg: #f0ebfa;
  --pd-stufe-kompatibel-fg: #5b3fa8;
  --pd-stufe-generic-bg: #eaf0fa;
  --pd-stufe-generic-fg: #2853a4;
  --pd-stufe-premium-bg: #fdf3d8;
  --pd-stufe-premium-fg: #8a6410;
  --pd-stufe-reman-bg: #e2f3e8;
  --pd-stufe-reman-fg: #1e6b3c;
  --pd-stufe-tinte-bg: #e0f1f4;
  --pd-stufe-tinte-fg: #0f6474;
  --pd-radius: 8px;
  --pd-radius-card: 16px;
  --pd-radius-block: 12px;
  --pd-shadow-card: 0 6px 24px rgba(20, 44, 80, 0.09);
  --pd-shadow-lift: 0 10px 32px rgba(20, 44, 80, 0.13);
  --pd-shadow-hover: 0 3px 12px rgba(20, 44, 80, 0.1);
  --pd-space: 1rem;
  interpolate-size: allow-keywords;
}

/* --- Seitengrund -------------------------------------------------------- */

body.single-product {
  background: var(--pd-color-ground);
}
.single-product .content-area {
  color: var(--pd-color-text);
}
.single-product .site-content .content-area,
.single-product .inside-article {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
.single-product .inside-article {
  background: transparent;
  padding-top: calc(var(--pd-space) * 1.5);
  padding-bottom: calc(var(--pd-space) * 2);
}

/* --- Kopfzone ----------------------------------------------------------- */

.pd-kopfzone {
  background: var(--pd-color-card);
  border-radius: var(--pd-radius-card);
  box-shadow: var(--pd-shadow-lift);
  padding: calc(var(--pd-space) * 1.5);
  margin-bottom: var(--pd-space);
  display: flow-root;
}
.single-product div.product .pd-kopfzone div.images {
  width: 40%;
  margin-bottom: 0;
}
.single-product div.product .pd-kopfzone div.summary {
  width: 56%;
  margin-bottom: 0;
}
.single-product div.product .pd-kopfzone div.images img {
  max-height: 480px;
  object-fit: contain;
  border-radius: var(--pd-radius-block);
}
.single-product .product_title {
  font-size: 1.5rem;
  line-height: 1.35;
  font-weight: 600;
  margin-bottom: 0.4rem;
}
.single-product .product_meta {
  display: none;
}

/* Artikelzeile und Badge */
.pd-artikelzeile {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 0 0 0.5rem;
}
.pd-artikelzeile__nr {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pd-color-accent);
  font-weight: 500;
}
.pd-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 500;
  border: 0;
  background: var(--pd-color-accent);
  color: #fff;
  padding: 0.25rem 0.8rem;
  border-radius: 99px;
}
.pd-badge svg {
  width: 13px;
  height: 13px;
}

/* Kurzdaten unter dem Titel */
.pd-kurzdaten {
  font-size: 0.875rem;
  color: var(--pd-color-muted);
  margin: 0 0 0.75rem;
}

/* --- OEM-Chips ---------------------------------------------------------- */

.pd-kopfdaten {
  margin: 0 0 0.9rem;
}
.pd-kopfdaten__label {
  font-size: 0.8125rem;
  color: var(--pd-color-muted);
}
.pd-oem-chip {
  position: relative;
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.8125rem;
  border: 1px solid transparent;
  border-radius: var(--pd-radius);
  padding: 0.3rem 0.85rem;
  margin: 0 0.35rem 0.35rem 0;
  cursor: copy;
}
/* GeneratePress stylt button:hover dunkel - Chips davon ausnehmen */
.single-product button.pd-oem-chip,
.single-product button.pd-oem-chip:hover,
.single-product button.pd-oem-chip:focus {
  background: var(--pd-color-accent-light);
  color: var(--pd-color-accent-dark);
}
.single-product button.pd-oem-chip:hover,
.single-product button.pd-oem-chip:focus-visible {
  border-color: var(--pd-color-accent);
}
.single-product button.pd-oem-chip.ist-kopiert,
.single-product button.pd-oem-chip.ist-kopiert:hover {
  background: var(--pd-color-accent);
  color: #fff;
}
/* Geschlossener Chip: ein Pill-Koerper, links Kopieren (data-pd-copy),
   rechts Lupe zum Finder hinter feinem Innentrenner. Rahmen und Radius
   liegen am Paar, die Haelften sind rahmenlos; Hover hinterlegt die
   jeweils aktive Haelfte, damit die zwei Aktionen spuerbar bleiben.
   DESIGNSTAND - siehe renderOemChips() in ProductDetails.php. */
.pd-oem-paar {
  --pd-chip-rand: color-mix(in srgb, var(--pd-color-accent) 30%, var(--pd-color-accent-light));
  display: inline-flex;
  align-items: stretch;
  margin: 0 0.35rem 0.35rem 0;
  border: 1px solid var(--pd-chip-rand);
  border-radius: var(--pd-radius);
  overflow: hidden;
  background: var(--pd-color-accent-light);
}
.pd-oem-paar:hover,
.pd-oem-paar:focus-within {
  border-color: var(--pd-color-accent);
}
.pd-oem-paar .pd-oem-chip {
  margin: 0;
  border: 0;
  border-radius: 0;
  padding-right: 0.5rem;
}
.pd-oem-chip__icon {
  vertical-align: -2px;
  margin-right: 0.35rem;
}
.pd-oem-chip--finder {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.5rem;
  cursor: pointer;
}
/* Split-Button: Trenner in Ton und Staerke des Aussenrahmens.
   Spezifitaet: muss .pd-oem-paar .pd-oem-chip (border: 0) schlagen. */
.pd-oem-paar .pd-oem-chip.pd-oem-chip--finder {
  border-left: 1px solid var(--pd-chip-rand);
}
/* Lupe hinter jedem Geraet: dezent, erst bei Hover praesent. */
.pd-geraete__lupe {
  display: inline-block;
  margin-left: 0.3rem;
  color: var(--pd-color-muted);
  vertical-align: -2px;
}
.pd-geraete__lupe:hover,
.pd-geraete__lupe:focus-visible {
  color: var(--pd-color-accent);
}
.pd-oem-chip--finder .pd-oem-chip__icon {
  margin-right: 0;
}
.single-product .pd-oem-paar a.pd-oem-chip--finder,
.single-product .pd-oem-paar a.pd-oem-chip--finder:hover,
.single-product .pd-oem-paar a.pd-oem-chip--finder:focus {
  background: var(--pd-color-accent-light);
  color: var(--pd-color-accent-dark);
}
.single-product .pd-oem-paar button.pd-oem-chip:hover,
.single-product .pd-oem-paar button.pd-oem-chip:focus-visible,
.single-product .pd-oem-paar a.pd-oem-chip--finder:hover,
.single-product .pd-oem-paar a.pd-oem-chip--finder:focus-visible {
  filter: brightness(0.94);
}
@keyframes pd-blase {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}
.pd-oem-chip.ist-kopiert::after {
  content: "Kopiert!";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  background: var(--pd-color-accent-dark);
  color: #fff;
  font-size: 0.75rem;
  font-family: inherit;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  white-space: nowrap;
  animation: pd-blase 0.18s ease;
  pointer-events: none;
  z-index: 5;
}

/* --- Trust-Leiste ------------------------------------------------------- */

.pd-trust {
  display: flex;
  border: 1px solid var(--pd-color-border);
  border-radius: var(--pd-radius-block);
  margin: 0.9rem 0;
}
.pd-trust__kachel {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
}
.pd-trust__kachel + .pd-trust__kachel {
  border-left: 1px solid var(--pd-color-border);
}
.pd-trust__icon {
  width: 22px;
  height: 22px;
  color: var(--pd-color-accent);
  flex-shrink: 0;
}
.pd-trust__text {
  font-size: 0.75rem;
  line-height: 1.35;
}
.pd-trust__text strong {
  font-weight: 600;
}

/* --- Kaufbox (Gastzustand) ---------------------------------------------- */

.pd-kaufbox {
  background: var(--pd-color-panel);
  border: 1px solid var(--pd-color-border);
  border-radius: 14px;
  padding: 1.1rem;
}
.pd-kaufbox__kopf {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.9rem;
}
.pd-kaufbox__schloss {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--pd-color-accent-light);
  color: var(--pd-color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pd-kaufbox__schloss svg {
  width: 20px;
  height: 20px;
}
.pd-kaufbox__text {
  font-size: 0.9375rem;
  line-height: 1.45;
  max-width: 15em;
}
.pd-kaufbox__aktionen {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.pd-kaufbox__primaer,
.pd-kaufbox__sekundaer {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.65rem 1.6rem;
  border-radius: var(--pd-radius);
  text-decoration: none;
}
.pd-kaufbox__primaer {
  background: var(--pd-color-accent);
  color: #fff;
}
.pd-kaufbox__primaer:hover,
.pd-kaufbox__primaer:focus-visible {
  background: var(--pd-color-accent-dark);
  color: #fff;
}
.pd-kaufbox__sekundaer {
  border: 1px solid var(--pd-color-accent);
  color: var(--pd-color-accent);
  background: #fff;
}
.pd-kaufbox__sekundaer:hover,
.pd-kaufbox__sekundaer:focus-visible {
  background: var(--pd-color-accent-light);
  color: var(--pd-color-accent-dark);
}

/* --- Datenkarten -------------------------------------------------------- */

.single-product .pd-kompatibilitaet,
.single-product .pd-xsell {
  background: var(--pd-color-card);
  border-radius: var(--pd-radius-card);
  box-shadow: var(--pd-shadow-card);
  padding: calc(var(--pd-space) * 1.4);
  margin-top: var(--pd-space);
}
.pd-eyebrow {
  display: block;
  font-size: 0.8125rem;
  color: var(--pd-color-muted);
  margin-bottom: 0.15rem;
}
.pd-xsell__titel,
.pd-kompatibilitaet__titel {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 0.75rem;
}

/* --- Kompatibilitaet ---------------------------------------------------- */

.pd-kompatibilitaet__kopf {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--pd-space);
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.pd-kompatibilitaet__kopf .pd-kompatibilitaet__titel {
  margin: 0;
}
.single-product .pd-kompatibilitaet input.pd-kompatibilitaet__suche[type="search"],
.single-product .pd-shelf input.pd-shelf__suche[type="search"] {
  width: min(360px, 100%);
  padding: 0.65rem 0.8rem 0.65rem 2.4rem;
  border: 1px solid #c8d4e4;
  border-radius: 12px;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%239aa7b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='7'/%3E%3Cline x1='21' y1='21' x2='15' y2='15'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0.85rem center;
}
.single-product .pd-kompatibilitaet input.pd-kompatibilitaet__suche[type="search"]:focus,
.single-product .pd-shelf input.pd-shelf__suche[type="search"]:focus {
  border-color: var(--pd-color-accent);
  box-shadow: 0 0 0 3px rgba(26, 63, 125, 0.12);
  outline: none;
}

/* Herstellerbloecke */
.pd-geraete__block {
  border: 1px solid var(--pd-color-border);
  border-radius: var(--pd-radius-block);
  margin-bottom: 0.5rem;
  overflow: hidden;
}
.pd-geraete__block summary {
  padding: 0.7rem 1.1rem;
  cursor: pointer;
  font-weight: 600;
  color: var(--pd-color-text);
  list-style: none;
  position: relative;
}
.pd-geraete__block summary::-webkit-details-marker {
  display: none;
}
.pd-geraete__block summary::after {
  content: "";
  position: absolute;
  right: 1rem;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--pd-color-muted);
  border-bottom: 2px solid var(--pd-color-muted);
  transform: translateY(-70%) rotate(45deg);
}
.pd-geraete__block summary:hover {
  background: var(--pd-color-accent-light);
}
.pd-geraete__block[open] summary {
  background: #d3ddf0;
  color: var(--pd-color-accent-dark);
}
.pd-geraete__block[open] summary::after {
  transform: translateY(-30%) rotate(225deg);
  border-color: var(--pd-color-accent);
}
.pd-geraete__anzahl {
  color: var(--pd-color-muted);
  font-weight: 400;
}

/* Weiches Hoehengleiten (Chromium/Safari; sonst hartes Aufklappen) */
.pd-geraete__block::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size 0.28s ease, content-visibility 0.28s allow-discrete;
}
.pd-geraete__block[open]::details-content {
  block-size: auto;
}

/* Modelliste im Block */
.pd-geraete--spalten {
  columns: 3 240px;
  column-gap: calc(var(--pd-space) * 1.5);
  padding: 0.85rem 1.1rem;
  margin: 0;
  list-style: none;
  font-size: 0.875rem;
}
.pd-geraete--spalten li {
  break-inside: avoid;
  padding: 0.28rem 0;
}
.pd-geraete--spalten li.ist-verborgen,
.pd-geraete__block.ist-verborgen {
  display: none;
}
/* Anzeigebegrenzung: Eintraege ab Position 13 verbirgt das JS ueber
 * .pd-geraete__rest; sichtbar werden sie durch "Alle anzeigen"
 * (ist-erweitert) oder aktiven Filter (ist-gefiltert). :not haelt
 * dabei gefilterte Nichttreffer weiterhin draussen. */
.pd-geraete__block .pd-geraete__rest {
  display: none;
}
.pd-geraete__block.ist-erweitert .pd-geraete__rest:not(.ist-verborgen),
.pd-geraete__block.ist-gefiltert .pd-geraete__rest:not(.ist-verborgen) {
  display: block;
}
.single-product button.pd-geraete__mehr-knopf {
  display: block;
  background: none;
  border: 0;
  padding: 0.5rem 1.1rem 0.85rem;
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--pd-color-accent);
  cursor: pointer;
}
.single-product button.pd-geraete__mehr-knopf:hover {
  color: var(--pd-color-accent-dark);
  background: none;
}
.pd-geraete__block.ist-gefiltert .pd-geraete__mehr-knopf {
  display: none;
}

/* Fallback-Liste (Textfeld-Altbestand, entfaellt nach Vollexport) */
.pd-geraete:not(.pd-geraete--spalten) {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.875rem;
}

/* --- Bewegung ----------------------------------------------------------- */

.pd-oem-chip,
.pd-kaufbox__primaer,
.pd-kaufbox__sekundaer,
.pd-geraete__block summary,
.pd-geraete__block,
.pd-geraete__mehr-knopf,
.pd-kompatibilitaet__suche {
  transition: background-color 0.18s ease, border-color 0.18s ease,
    color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.pd-oem-chip:hover,
.pd-kaufbox__primaer:hover,
.pd-kaufbox__sekundaer:hover {
  transform: translateY(-1px);
}
.pd-oem-chip:active,
.pd-kaufbox__primaer:active,
.pd-kaufbox__sekundaer:active {
  transform: translateY(0);
}
.pd-geraete__block:hover {
  box-shadow: var(--pd-shadow-hover);
}
@media (prefers-reduced-motion: reduce) {
  .pd-geraete__block::details-content {
    transition: none;
  }
  .pd-oem-chip,
  .pd-kaufbox__primaer,
  .pd-kaufbox__sekundaer,
  .pd-geraete__block summary,
  .pd-geraete__block,
  .pd-geraete__mehr-knopf,
  .pd-kompatibilitaet__suche {
    transition: none;
  }
  .pd-oem-chip.ist-kopiert::after {
    animation: none;
  }
}

/* --- Katalog ------------------------------------------------------------ */

.pd-loop-sku {
  display: block;
  font-size: 0.8125rem;
  color: var(--pd-color-muted);
  letter-spacing: 0.02em;
  margin: 0.25rem 0 0.5rem;
}

/* --- Preis-Bausteine (NetPriceDisplay) ---------------------------------- */

.pd-price-locked {
  display: inline-block;
  padding: 0.35rem 0.6rem;
  background: var(--pd-color-panel);
  border: 1px solid var(--pd-color-border);
  border-radius: var(--pd-radius);
  font-size: 0.875rem;
}
.pd-price-locked a {
  color: var(--pd-color-accent);
  text-decoration: none;
}
.pd-price-locked a:hover,
.pd-price-locked a:focus-visible {
  text-decoration: underline;
}
.pd-tax-notice {
  color: var(--pd-color-muted);
  font-weight: 400;
  white-space: nowrap;
}

/* --- Mobil -------------------------------------------------------------- */

@media (max-width: 600px) {
  .pd-trust__kachel {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 0.35rem;
    padding: 0.7rem 0.4rem;
  }
  .single-product div.product .pd-kopfzone div.images,
  .single-product div.product .pd-kopfzone div.summary {
    width: 100%;
    float: none;
  }
}

/* --- Druckerfinder ------------------------------------------------------ */
/* Neubau 22.09.2026 (Patch C) nach der freigegebenen Referenz
 * druckerfinder-referenz-v10.html: Geraeteband ODER Wahl-Panel, nie
 * beides. Das Band rendert PHP (PrinterFinder::bandGeraete/bandNummer),
 * das Panel baut main.js in [data-pd-panel]. Tokens sind die
 * pdc-Hellwerte. Die Tabs-Regeln liegen schon bereit - aktiv werden
 * sie erst mit dem Tabs/Sidebar-Markup aus Patch D. Seitengrund
 * body.pd-finder ganz unten (Muster body.pd-listing samt
 * GP-Wrapper-Regel aus astra-shop.css, Fixrunde 2). */

.pdf{--f-bg:#f5f7fa;--f-paper:#fff;--f-text:#152d4c;--f-muted:#5b6b7e;--f-line:#dce3ec;--f-soft:#edf2fb;--f-blue:#2855b6;--f-green:#187348;font-family:Inter,"Segoe UI",Arial,sans-serif;font-size:14px;line-height:1.5;color:var(--f-text);interpolate-size:allow-keywords;margin:0 0 22px;text-align:left}
.pdf *{box-sizing:border-box}
.pdf [hidden]{display:none!important}
.pdf .ist-verborgen{display:none}
.pdf-schicht{transition:opacity .2s ease}

/* Geraeteband */
.pdf-band{background:var(--f-paper);border:1px solid var(--f-line);border-left:3px solid var(--f-blue);border-radius:8px;box-shadow:0 3px 12px #152d4c0a;padding:19px 22px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.pdf-band-icon{width:52px;height:52px;flex:none;border-radius:8px;background:var(--f-soft);display:flex;align-items:center;justify-content:center}
.pdf-band-icon svg{width:26px;height:26px;color:var(--f-blue)}
.pdf-band-info{flex:1;min-width:240px}
.pdf-kicker{font-size:10px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--f-muted);margin:0 0 5px}
.pdf-band-geraet{font-size:21px;line-height:1.2;letter-spacing:-.3px;font-weight:700;margin:0}
.pdf-band-chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.pdf-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--f-line);background:var(--f-bg);padding:7px 10px;border-radius:5px;font-size:12.5px;font-weight:600}
.pdf-chip a{color:var(--f-muted);text-decoration:none;font-weight:400;font-size:13px;line-height:1}
.pdf-chip a:hover{color:var(--f-blue)}
.pdf-band-note{font-size:11.5px;color:var(--f-green);margin:6px 0 0;display:flex;align-items:center;gap:6px}
.pdf-band-note svg{width:13px;height:13px}
.pdf-aendern{border:1px solid var(--f-line);background:var(--f-paper);color:var(--f-text);border-radius:6px;padding:10px 14px;font:inherit;font-size:13px;font-weight:600;min-height:40px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.pdf-aendern:hover{border-color:var(--f-blue);background:var(--f-soft);color:var(--f-text)}
.pdf-aendern svg{width:15px;height:15px;color:var(--f-blue)}

/* Bereichs-Tabs (Markup kommt mit Patch D) */
.pdf-tabs{display:flex;gap:26px;border-bottom:1px solid var(--f-line);margin:22px 0 0}
.pdf-tab{display:inline-flex;align-items:center;gap:8px;padding:12px 0;font-size:13px;font-weight:600;color:var(--f-muted);text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px}
.pdf-tab small{font-weight:650;font-size:10.5px;background:var(--f-soft);color:var(--f-muted);border-radius:4px;padding:2px 6px}
.pdf-tab:hover{color:var(--f-text)}
.pdf-tab--aktiv{color:var(--f-blue);border-bottom-color:var(--f-blue)}
.pdf-tab--aktiv small{color:var(--f-blue)}

/* Wahl-Panel */
.pdf-panel{background:var(--f-paper);border:1px solid var(--f-line);border-radius:8px;box-shadow:0 3px 12px #152d4c0a;padding:22px}
.pdf-panel-kopfzeile{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.pdf-panel-titel{font-size:15px;font-weight:650;margin:0 0 3px}
.pdf-panel-sub{font-size:12px;color:var(--f-muted);margin:0 0 15px}
.pdf-abbrechen{border:0;background:none;color:var(--f-muted);font:inherit;font-size:12px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:0}
.pdf-abbrechen:hover{color:var(--f-blue)}
.pdf-feldlabel{font-size:12px;font-weight:600;margin:0 0 7px}
.pdf-suchzeile{display:flex;gap:10px}
.pdf-suchfeld{flex:1;min-width:0;position:relative}
.pdf-suchfeld>svg{position:absolute;left:13px;top:14px;width:18px;height:18px;color:var(--f-muted)}
.pdf-suchfeld input{width:100%;height:46px;box-sizing:border-box;padding:10px 12px 10px 39px;background:var(--f-paper);color:var(--f-text);border:1px solid var(--f-line);border-radius:6px;font:inherit}
.pdf-finden{background:var(--f-blue);border:1px solid var(--f-blue);color:#fff;border-radius:6px;padding:10px 18px;font:inherit;font-size:13px;font-weight:600;min-height:46px;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.pdf-finden:hover{filter:brightness(.94)}
.pdf-finden svg{width:15px;height:15px}
.pdf-hilf{font-size:11.5px;color:var(--f-muted);margin:7px 0 0}
.pdf-vorschlaege{margin-top:7px;border:1px solid var(--f-line);border-radius:6px;background:var(--f-paper);overflow:hidden;box-shadow:0 6px 18px #152d4c14}
.pdf-vorschlaege button{border:0;background:none;color:var(--f-text);padding:12px;text-align:left;width:100%;display:flex;align-items:center;gap:10px;font:inherit;font-size:13px;cursor:pointer}
.pdf-vorschlaege button:hover{background:var(--f-soft)}
.pdf-vorschlaege button+button{border-top:1px solid var(--f-line)}
.pdf-vorschlaege small{color:var(--f-muted)}
.pdf-vorschlaege button[data-gewaehlt="1"]{opacity:.5;cursor:default}
.pdf-vorschlaege button[data-gewaehlt="1"] small::after{content:" - bereits gew\00e4hlt"}
.pdf-blaettern{margin-top:15px;border:1px dashed var(--f-line);border-radius:7px;background:var(--f-bg)}
.pdf-blaettern>summary{list-style:none;cursor:pointer;padding:12px 14px;font-size:12.5px;font-weight:600;color:var(--f-blue);display:flex;align-items:center;gap:8px}
.pdf-blaettern>summary::-webkit-details-marker{display:none}
.pdf-blaettern>summary svg{width:15px;height:15px;transition:transform .15s}
.pdf-blaettern[open]>summary svg{transform:rotate(90deg)}
.pdf-blaettern-inhalt{padding:2px 14px 14px}
.pdf-zeile{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pdf-feld{display:block;font-size:12px;font-weight:600}
.pdf-feld select,.pdf-feld input{display:block;width:100%;box-sizing:border-box;margin-top:6px;background:var(--f-paper);color:var(--f-text);border:1px solid var(--f-line);border-radius:6px;padding:9px 11px;min-height:40px;font:inherit;font-weight:400}
.pdf-select{position:relative;min-width:170px;margin-top:6px}
.pdf-select>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--f-paper);color:var(--f-text);border:1px solid var(--f-line);border-radius:6px;padding:9px 11px;min-height:40px;box-sizing:border-box;font-size:13px;font-weight:400;cursor:pointer}
.pdf-select>summary::-webkit-details-marker{display:none}
.pdf-select>summary svg{width:15px;height:15px;color:var(--f-muted);transition:transform .18s}
.pdf-select[open]>summary{border-color:var(--f-blue)}
.pdf-select[open]>summary svg{transform:rotate(180deg)}
.pdf-select-liste{position:absolute;z-index:20;top:calc(100% + 5px);left:0;right:0;background:var(--f-paper);border:1px solid var(--f-line);border-radius:6px;box-shadow:0 8px 22px #152d4c1a;overflow:hidden;max-height:300px;overflow-y:auto;overscroll-behavior:contain}
.pdf-select-liste button,.pdf-select-liste a{display:block;width:100%;border:0;background:none;color:var(--f-text);text-align:left;padding:10px 12px;font:inherit;font-size:13px;cursor:pointer}
.pdf-select-liste button:hover,.pdf-select-liste a:hover{background:var(--f-soft)}
.pdf-select-liste .pdf-select-aktiv{color:var(--f-blue);font-weight:600;background:var(--f-soft)}
.pdf-feld input:disabled{background:var(--f-soft);color:var(--f-muted);cursor:not-allowed}
.pdf-alle{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--f-muted);margin-top:11px;cursor:pointer}
.pdf-alle input,.pdf-modell input{width:15px;height:15px;accent-color:var(--f-blue);margin:0;flex:none}
.pdf-status{font-size:11px;color:var(--f-muted);margin:12px 0 7px}
.pdf-modelle{max-height:260px;overflow-y:auto;border:1px solid var(--f-line);border-radius:7px;background:var(--f-paper);padding:4px 13px 11px;list-style:none;margin:0}
.pdf-serie2>summary{list-style:none;display:flex;align-items:center;gap:8px;min-height:34px;font-size:12.5px;font-weight:600;cursor:pointer;color:var(--f-text)}
.pdf-serie2>summary::-webkit-details-marker{display:none}
.pdf-serie2>summary svg{width:14px;height:14px;color:var(--f-muted);transition:transform .18s;flex:none}
.pdf-serie2[open]>summary svg{transform:rotate(90deg)}
.pdf-serie2-zaehler{margin-left:auto;font-weight:400;font-size:11px;color:var(--f-muted)}
.pdf-serie2>ul{list-style:none;margin:0 0 6px;padding:0 0 0 22px}
.pdf-modell label{display:flex;align-items:center;gap:8px;min-height:30px;font-size:12.5px;cursor:pointer}
.pdf-anim::details-content{block-size:0;overflow:clip;opacity:0;transition:block-size .26s ease,opacity .26s ease,content-visibility .26s allow-discrete}
.pdf-anim[open]::details-content{block-size:auto;opacity:1}
/* Fixrunde 1 (22.09.2026): Die absolut positionierte Select-Liste
 * wird sonst vom overflow:clip des Blaettern-Aufklappers
 * abgeschnitten (Containing Block der Liste ist .pdf-select,
 * der Aufklapper-Clip liegt darueber und greift daher). :has ist
 * ueberall vorhanden, wo ::details-content ueberhaupt clippt. */
.pdf-blaettern[open]:has(.pdf-select[open])::details-content{overflow:visible}
.pdf-panel-fuss{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:15px;padding-top:15px;border-top:1px solid var(--f-line)}
.pdf-fuss-label{font-size:12px;font-weight:600;color:var(--f-muted)}
.pdf-panel-chips{display:flex;gap:6px;flex-wrap:wrap;flex:1}

/* Patch I (23.09.2026, Befund Leon): Nummernsuche - im Band als
 * vorbefuelltes Formular statt starrem Chip, im Wahl-Zustand als
 * eigene Schicht unter dem Panel. Feld im pdf-suchfeld-Muster,
 * Knopf in pdf-finden-Optik. */
.pdf-nummernsuche{margin-top:14px;padding-top:14px;border-top:1px solid var(--f-line)}
.pdf-nummernsuche .pdf-feldlabel{color:var(--f-muted)}
.pdf-nummernform{display:flex;gap:10px;max-width:560px}
.pdf-band .pdf-nummernform{margin:6px 0 2px;max-width:430px}
.pdf-band .pdf-nummernform input{height:40px;padding-top:8px;padding-bottom:8px}
.pdf-band .pdf-nummernform .pdf-finden{min-height:40px;padding:8px 15px}
.pdf-band .pdf-nummernform .pdf-suchfeld>svg{top:11px}
@media (max-width:640px){
.pdf-nummernform{flex-wrap:wrap}
.pdf-nummernform .pdf-finden{flex:1}
}

/* Fixrunde 6 (23.09.2026): Sortier-Select in Listing-Optik
 * (pdc-select aus astra-shop.css). Die Optionen laufen im Finder
 * als GET-Links - astra stylt nur li>button, hier dieselbe Optik
 * fuer die Links. */
#pdc-shop .pdc-select-liste li>a{display:block;border-radius:5px;padding:8px 10px;font-size:12px;color:var(--pdc-text)}
#pdc-shop .pdc-select-liste li>a:hover{background:var(--pdc-soft);color:var(--pdc-blue)}
#pdc-shop .pdc-select-liste li[aria-selected=true]>a{color:var(--pdc-blue);font-weight:600}

/* Fixrunde 3 (22.09.2026): Der Listenkopf traegt die Spalten-
 * beschriftung - das Karten-Label "Ihr Nettopreis / Stueck"
 * stuende auf der Finder-Seite doppelt. Unter 480px blendet
 * astra-shop.css den Listenkopf aus, dann uebernimmt wieder
 * das Karten-Label. CrossSelling/Regale (ohne Listenkopf)
 * behalten es ueberall. Patch G (23.09.): nur in der Listen-
 * Anordnung - die Kachelansicht (pdc-grid) hat keinen
 * Listenkopf und braucht das Label auf der Karte. */
.pd-finder-karten .pdc-products:not(.pdc-grid) .pdc-price-label{display:none}

@media (max-width:480px){
.pd-finder-karten .pdc-products:not(.pdc-grid) .pdc-price-label{display:inline}
}

@media (max-width:640px){
.pdf-zeile{grid-template-columns:1fr}
.pdf-suchzeile{flex-wrap:wrap}
.pdf-suchfeld{flex-basis:100%}
.pdf-finden{flex:1}
.pdf-band{gap:13px;padding:16px}
.pdf-band-geraet{font-size:18px}
.pdf-aendern{width:100%;justify-content:center}
}

/* Seitengrund der Finder-Seite: body-Klasse setzt assets.php
 * (body_class-Filter); die GP-Wrapper brauchen denselben Grund,
 * sonst bleibt ein weisser Innenkasten stehen (Befund Fixrunde 2
 * des Facetten-Neubaus, Muster body.pd-listing). */
body.pd-finder{background:#f5f7fa}
body.pd-finder #page,body.pd-finder .site-content,body.pd-finder .content-area,body.pd-finder .site-main,body.pd-finder .inside-article,body.pd-finder .entry-content,body.pd-finder.one-container .container{background:#f5f7fa}

/* Patch F + Fixrunde 5 (23.09.2026, Messrunde Leon): Die Buehne
 * laeuft in der NATIVEN GP-Kette der Kategorieseiten (#page
 * 1200px zentriert, inside-article 40px Rand) - die Fixrunde-4-
 * Freistellung zentrierte im vollen Viewport und stand damit
 * breiter und weiter links als das Listing. Nur die etwaige
 * Sidebar-Spalte bleibt neutralisiert; pd-finder-wrap wirkt im
 * selben Innenraum exakt wie die pdc-wrap des Listings (das
 * 1280er-Cap greift dort ebenso nie). */
body.pd-finder :is(.content-area,.site-main){max-width:none;width:100%;margin-left:0;margin-right:0}
body.pd-finder .site-content{display:block}
body.pd-finder .widget-area{display:none}

/* Fixrunde 4 (23.09.2026): Buehnen-Zentrierung scopefrei in
 * pdc-wrap-Geometrie - die pdc-karten-Huelle der Buehne zog die
 * astra-shop-Elementregeln ins Wahl-Panel (Lupe/CTA-Befund). */
.pd-finder-buehne>.pd-finder-wrap{max-width:1280px;margin:0 auto;padding:0 32px}

@media (max-width:1000px){
.pd-finder-buehne>.pd-finder-wrap{padding:0 22px}
}

@media (max-width:760px){
.pd-finder-buehne>.pd-finder-wrap{padding:0 18px}
}

@media (max-width:480px){
.pd-finder-buehne>.pd-finder-wrap{padding:0 13px}
}

/* --- Druckerfinder: Ergebnis -------------------------------------------- */

.pd-finder-ergebnis {
  margin-top: var(--pd-space);
}
.pd-finder-ergebnis__titel {
  font-size: 1.25rem;
  margin: 0 0 calc(var(--pd-space) * 0.75);
}
.pd-finder-ergebnis__leer {
  color: var(--pd-color-muted);
}
/* Fixrunde 9 (23.09.2026): Die Abschnittsoptik der Fixrunde 8 ist
 * mit den Abdeckungs-Tabs (Patch H) entfallen - der Alle-Tab
 * rendert flach. __titel und __leer oben bleiben fuer die
 * Meldungen ausserhalb der Schicht (leere Trefferliste ohne
 * #pdc-shop); die erzeugerlose __abschnitt-Regel ist mit der
 * Guard-Stilllegung (23.09.) gefallen. */

/* Patch H (23.09.2026, Vorschlag Leon): Abdeckungs-Tabs im
 * Mehrgeraete-Fall - zweite Tab-Zeile in der Ergebnis-Spalte
 * zwischen Kopf und Listenkopf, Erklaerzeile darunter. */
#pdc-shop .pd-finder-abdeckung{margin:2px 0 0}
#pdc-shop .pd-finder-abdeckung__hinweis{font-size:12px;color:var(--pdc-muted);margin:10px 0 16px}
/* v4-Rueckbau (Patch B, 23.09.2026): Die alte Finder-Kartenstrecke
 * (pd-finder-karte__*) hat seit der Karten-Konsolidierung K1
 * keinen Erzeuger mehr - karteListe/pdc traegt ueberall. Die
 * __passt-Doppelklasse in Regal.php und ihre Regel sind mit der
 * Guard-Stilllegung (23.09.) gefallen (min-width:0 traegt jetzt
 * die xsell-Begruendungsregel unten), der karte()-Fallback in
 * listing-kachel.php ebenso - karte() ist damit ohne Aufrufer. */

/* --- Cross-Selling (04.09.2026) ----------------------------------------- */
/* Panel- und Titeloptik kommen aus den Datenkarten-Gruppenregeln oben. */
.pd-xsell__hinweis {
  font-size: 0.9375rem;
  color: var(--pd-color-muted);
  margin: -0.25rem 0 1rem;
}

/* --- Cross-Selling: Regale (04.09.2026) --------------------------------- */
/* Generische Regal-Bauform (pd-shelf) - auch fuer kuenftige Regale wie
 * "Zuletzt gesehen". Kacheln und Pills laufen seitlich, nie nach unten;
 * die Blaetterpfeile bedient main.js (data-pd-spur, nur bei Ueberlauf). */
.pd-shelf__kopf {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}
.pd-shelf__kopf .pd-xsell__titel {
  margin-bottom: 0.35rem;
}
.pd-shelf__pfeile {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.35rem;
}
.pd-shelf__pfeil {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--pd-color-border);
  border-radius: 999px;
  background: #fff;
  color: var(--pd-color-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pd-shelf__pfeil:hover,
.pd-shelf__pfeil:focus-visible {
  border-color: var(--pd-color-accent);
  color: var(--pd-color-accent);
}
.pd-shelf__pfeil svg {
  width: 16px;
  height: 16px;
}
.pd-xsell__liste {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 0.4rem;
  scrollbar-width: thin;
}
.pd-xsell-begruendung {
  display: flex;
  gap: 0.3rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
  mask-image: linear-gradient(90deg, #000 88%, transparent);
}
.pd-xsell-begruendung::-webkit-scrollbar {
  display: none;
}
.pd-xsell-pill {
  flex: none;
  font-size: 0.72rem;
  line-height: 1.4;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: var(--pd-color-accent-light);
  color: var(--pd-color-accent-dark);
  text-decoration: none;
  white-space: nowrap;
}
a.pd-xsell-pill:hover,
a.pd-xsell-pill:focus-visible {
  background: var(--pd-color-accent);
  color: #fff;
}
/* OEM-Pills zitieren die Umrandungs-Optik der Kopf-Chips. */
.pd-xsell-pill--oem {
  background: #fff;
  border: 1px solid var(--pd-color-accent);
  color: var(--pd-color-accent);
  font-weight: 600;
}
a.pd-xsell-pill--oem:hover,
a.pd-xsell-pill--oem:focus-visible {
  background: var(--pd-color-accent-light);
  color: var(--pd-color-accent-dark);
}
.pd-xsell-pill--mehr {
  background: var(--pd-color-panel);
  color: var(--pd-color-muted);
}

/* --- Cross-Selling: Regal-Fixes (04.09.2026, nachmittags) --------------- */
/* min-width:auto-Falle: der nowrap-Streifen darf die Kachelbreite
 * nicht aufdruecken. Label-Zeile ueber dem Streifen, Streifen auf
 * der __pills-Ebene. */
.pd-xsell-begruendung {
  display: block;
  min-width: 0;
  overflow: visible;
  -webkit-mask-image: none;
  mask-image: none;
}
.pd-xsell-begruendung__label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2px 8px;
  flex-wrap: wrap;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--pd-color-accent);
  margin-bottom: 0.3rem;
}
.pd-xsell-begruendung__pills {
  display: flex;
  gap: 0.3rem;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
/* Rand-Verlauf nur bei echtem Ueberlauf (Klasse setzt main.js,
 * Schwelle ~20px - passende Streifen bleiben ohne Anschnitt). */
.pd-xsell-begruendung.hat-ueberlauf .pd-xsell-begruendung__pills {
  -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
  mask-image: linear-gradient(90deg, #000 88%, transparent);
}
.pd-xsell-begruendung__pills::-webkit-scrollbar {
  display: none;
}
/* Hinweiszeile am Streifen (Bauplan 16.09.): stummer Erklaertext,
 * klickbar ist nur der "alle N anzeigen"-Knopf. Hover setzt den
 * Hintergrund ausdruecklich - GPs globale button:hover-Regel. */
/* Hinweis als eigene, linksbuendige Zeile unter dem Label -
 * rechtsbuendig neben dem Label wirkte auf schmalen Kacheln
 * gequetscht (Sichtabnahme 16.09., zweite Runde). */
.pd-xsell-begruendung__winkzeile {
  font-weight: 400;
  color: var(--pd-color-muted);
  flex: 1 0 100%;
  min-width: 0;
  text-align: left;
}
.pd-xsell-begruendung__winkzeile[hidden] {
  display: none;
}
.pd-xsell-begruendung__winktext {
  margin-right: 0.25em;
}
.pd-xsell-begruendung__winktext[hidden] {
  display: none;
}
.pd-xsell-begruendung__wink {
  font: inherit;
  font-weight: 400;
  color: var(--pd-color-muted);
  white-space: nowrap;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  vertical-align: bottom;
}
/* Alle drei GP-Zustaende abdecken: button:focus legt sonst beim
 * Mausklick den dunklen GP-Hintergrund auf den Knopf (Learning
 * 04.09., Befund erneut 16.09.). */
.pd-xsell-begruendung__wink:hover,
.pd-xsell-begruendung__wink:focus,
.pd-xsell-begruendung__wink:focus-visible,
.pd-xsell-begruendung__wink:active {
  color: var(--pd-color-accent);
  background: none;
  outline: none;
}
.pd-xsell-begruendung__wink:focus-visible {
  outline: 2px solid var(--pd-color-accent);
  outline-offset: 2px;
}
.pd-xsell-begruendung__wink svg {
  width: 11px;
  height: 11px;
  flex: none;
}
.pd-xsell-begruendung.ist-offen .pd-xsell-begruendung__wink svg {
  transform: rotate(180deg);
}
/* Aufgeklappt (ist-offen, main.js): Pills umbrechen, alles sichtbar;
 * die Reihe waechst mit, Fuesse bleiben per Stretch auf Linie. Die
 * "+n weitere"-Pill der PILLS_MAX-Kappung bleibt stumm. */
.pd-xsell-begruendung.ist-offen .pd-xsell-begruendung__pills {
  flex-wrap: wrap;
  overflow: visible;
  padding-right: 0;
  -webkit-mask-image: none;
  mask-image: none;
}
.pd-xsell-begruendung.ist-offen .pd-xsell-begruendung__mehr {
  display: none;
}
/* Stumme Zeile ohne Pills (z. B. "Keine OEM-Referenz"). */
.pd-xsell-begruendung--stumm {
  font-size: 0.72rem;
  color: var(--pd-color-muted);
}

/* --- Cross-Selling: Streifen-Chevron (04.09.2026) ----------------------- */
.pd-xsell-begruendung {
  position: relative;
}
.pd-xsell-begruendung__mehr {
  position: absolute;
  right: -2px;
  bottom: 0;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--pd-color-border);
  border-radius: 999px;
  background: #fff;
  color: var(--pd-color-accent);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--pd-shadow-hover);
}
.pd-xsell-begruendung__mehr:hover,
.pd-xsell-begruendung__mehr:focus-visible {
  border-color: var(--pd-color-accent);
}
.pd-xsell-begruendung__mehr svg {
  width: 13px;
  height: 13px;
}
/* Am Streifenende zeigt der Knopf zurueck an den Anfang. */
.pd-xsell-begruendung__mehr.ist-am-ende svg {
  transform: rotate(180deg);
}

/* --- Cross-Selling: Regal-Filter + Streifen-Feinschliff (04.09.2026) ---- */
.pd-xsell-begruendung__pills {
  scroll-snap-type: x proximity;
  padding-right: 26px;
}
.pd-xsell-pill {
  scroll-snap-align: start;
}
.pd-shelf__suche {
  display: block;
  width: 100%;
  max-width: 340px;
  margin: 0 0 0.85rem;
  padding: 0.45rem 1rem;
  border: 1px solid var(--pd-color-border);
  border-radius: 999px;
  font-size: 0.9rem;
  background: #fff;
  color: var(--pd-color-text);
}
.pd-shelf__suche:focus {
  outline: none;
  border-color: var(--pd-color-accent);
}
/* Filter-Zustaende: Treffer-Pill leuchtet, trefferlose Kachel dimmt. */
.pd-xsell-pill.ist-treffer {
  background: var(--pd-color-accent);
  border-color: var(--pd-color-accent);
  color: #fff;
}
[data-pd-cross-karte].ist-gedimmt {
  opacity: 0.35;
}

/* --- Cross-Selling: Suchfeld-Feinheiten + Knopf-Zustaende (04.09.2026) -- */
/* Optik kommt aus der Kompa-Such-Regel (gemeinsamer Selektor oben);
 * hier nur Abstand und die Ruecknahme der alten Klassenregel. */
.single-product .pd-shelf input.pd-shelf__suche[type="search"] {
  max-width: none;
  margin: 0 0 0.85rem;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
/* GeneratePress faerbt button:focus dunkel - alle Zustaende explizit. */
.pd-shelf__pfeil,
.pd-xsell-begruendung__mehr {
  transition: border-color 0.18s ease, color 0.18s ease;
}
.pd-shelf__pfeil:hover,
.pd-shelf__pfeil:focus,
.pd-shelf__pfeil:active,
.pd-xsell-begruendung__mehr:hover,
.pd-xsell-begruendung__mehr:focus,
.pd-xsell-begruendung__mehr:active {
  background: #fff;
  border-color: var(--pd-color-accent);
  color: var(--pd-color-accent);
}
.pd-shelf__pfeil:focus-visible,
.pd-xsell-begruendung__mehr:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(26, 63, 125, 0.12);
}


/* --- Cross-Selling: Filter-Feinschliff 2 + [hidden]-Fix (04.09.2026) ---- */
/* display im Autorenstil schlaegt das hidden-Attribut (UA-Stylesheet) -
 * Pfeile und Chevron waren darum auch ohne Ueberlauf sichtbar. */
.pd-shelf__pfeile[hidden],
.pd-xsell-begruendung__mehr[hidden] {
  display: none;
}
/* Dimmen auf hellem Grund: Entsaettigung traegt mehr als Transparenz. */
[data-pd-cross-karte].ist-gedimmt {
  opacity: 0.45;
  filter: grayscale(1);
}
/* Kachel mit Treffer-Pill zusaetzlich hervorheben. */
[data-pd-cross-karte].ist-treffer {
  border-color: var(--pd-color-accent);
}
/* Null-Treffer-Hinweis unterm Suchfeld (JS fuellt und zeigt). */
.pd-shelf__leer {
  margin: -0.35rem 0 0.85rem;
  font-size: 0.85rem;
}
.pd-shelf__leer-link {
  color: var(--pd-color-accent);
  font-weight: 600;
}

/* ==== Kopfbereich (Header-Baustein) ==== */
/* Eigener Header (inc/header.php) ersetzt den GP-Standardheader.
 * Navigation rendert weiterhin GP; hier nur Farben und Quicklink.
 * Nav-Layoutregeln gelten ab 769px, darunter greift der GP-Mobile-Toggle. */

.pd-shell { max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; }

.pd-icon { width: 1.15em; height: 1.15em; vertical-align: -0.2em; flex-shrink: 0; }
.pd-icon-nav { width: 1em; height: 1em; margin-right: 6px; }

.pd-topbar { background: var(--pd-color-accent-dark); color: #c9d6ec; font-size: 13px; }
.pd-topbar-innen { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 7px; padding-bottom: 7px; }
.pd-topbar strong { color: #ffffff; font-weight: 600; }
.pd-topbar a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; }
.pd-topbar a:hover { color: #ffffff; }

.pd-kopf { background: var(--pd-color-card); border-bottom: 1px solid var(--pd-color-border); }
.pd-kopf-innen { display: flex; align-items: center; gap: 18px; padding-top: 14px; padding-bottom: 14px; }
.pd-kopf-logo a { font-size: 21px; font-weight: 700; letter-spacing: 0.02em; color: var(--pd-color-accent); text-decoration: none; white-space: nowrap; }
.pd-kopf-logo img { max-height: 44px; width: auto; display: block; }

.pd-kopf-suche { flex: 1; display: flex; gap: 8px; min-width: 0; }
.pd-kopf-suche input[type="search"] {
  flex: 1; min-width: 0; border: 1px solid var(--pd-color-border); background: var(--pd-color-panel);
  border-radius: var(--pd-radius); padding: 10px 14px; font-size: 14.5px; color: var(--pd-color-text);
}
.pd-kopf-suche input[type="search"]:focus { outline: 2px solid var(--pd-color-accent); outline-offset: -1px; background: var(--pd-color-card); }
.pd-kopf-suche button {
  border: 0; background: var(--pd-color-accent); color: #ffffff; border-radius: var(--pd-radius);
  width: 46px; display: grid; place-items: center; cursor: pointer; padding: 0;
}
.pd-kopf-suche button:hover { background: var(--pd-color-accent-dark); }
.pd-kopf-suche button .pd-icon { width: 18px; height: 18px; }

.pd-kopf-block { display: flex; align-items: center; gap: 9px; color: var(--pd-color-text); text-decoration: none; padding: 4px 8px; border-radius: var(--pd-radius); white-space: nowrap; position: relative; }
.pd-kopf-block:hover { background: var(--pd-color-panel); color: var(--pd-color-text); }
.pd-kopf-block > .pd-icon { width: 24px; height: 24px; color: var(--pd-color-accent); stroke-width: 1.7; }
.pd-kopf-block-text small { display: block; font-size: 11.5px; color: var(--pd-color-muted); line-height: 1.3; }
.pd-kopf-block-text b { display: block; font-size: 13.5px; font-weight: 650; line-height: 1.3; color: var(--pd-color-text); }
.pd-kopf-korb-daten { display: flex; align-items: center; }
.pd-kopf-korb-zahl {
  position: absolute; top: 0; left: 22px; min-width: 17px; line-height: 15px; text-align: center;
  font-size: 10.5px; font-weight: 700; background: var(--pd-color-accent); color: #ffffff;
  border-radius: 999px; border: 2px solid var(--pd-color-card); padding: 0 2px;
}

@media (min-width: 769px) {
  .main-navigation { background: var(--pd-color-card); border-bottom: 1px solid var(--pd-color-border); }
  .main-navigation .main-nav > ul { display: flex; flex-wrap: wrap; align-items: center; max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 10px; padding-right: 10px; }
  .main-navigation .main-nav ul li a { color: var(--pd-color-muted); font-weight: 500; }
  .main-navigation .main-nav ul li a:hover, .main-navigation .main-nav ul li.current-menu-item > a { color: var(--pd-color-accent); }
  .main-navigation .pd-nav-quicklink { margin-left: auto; }
  .main-navigation .pd-nav-quicklink > a { color: var(--pd-color-accent); font-weight: 600; display: inline-flex; align-items: center; }
}

@media (max-width: 900px) {
  .pd-topbar-innen > span { display: none; }
  .pd-kopf-innen { flex-wrap: wrap; gap: 10px; }
  .pd-kopf-suche { order: 3; flex-basis: 100%; }
}

/* Direktbestellung (07.10.2026, docs/direktbestellung-referenz-v3.html,
 * inc/direktbestellung.php). Konto und Warenkorb stehen in .pd-kopf-seite;
 * der Knopf haengt daran und ragt in die GP-Navigationszeile, darum ist er
 * immer genau so breit wie beide zusammen (auch wenn sich der Korb-Text
 * aendert). Lage: Innenabstand unten der Kopfzeile (14px, .pd-kopf-innen)
 * + Kopflinie (1px) + halber Rest der 60px hohen Navigationszeile (GP).
 * Ab 900px abwaerts bricht der Kopf um: dann steht der Knopf rechts in
 * der Navigationszeile, auf dem Handy neben "Menue". */
.pd-kopf-seite { display: flex; align-items: center; gap: 18px; align-self: stretch; position: relative; }
.pd-dir-zelle { --pd-dir-hoehe: 36px; position: absolute; left: 0; right: 0; top: calc(100% + 14px + 1px + (60px - var(--pd-dir-hoehe)) / 2); z-index: 2; }
.pd-dir-knopf {
  display: flex; align-items: center; justify-content: center; gap: 9px; box-sizing: border-box;
  width: 100%; height: var(--pd-dir-hoehe); padding: 0 14px;
  border: 1px solid #c4d2ea; border-radius: var(--pd-radius);
  background: var(--pd-color-accent-light); color: var(--pd-color-accent);
  font-size: 13.5px; font-weight: 650; line-height: 1; text-decoration: none; white-space: nowrap;
  transition: background-color .15s, border-color .15s;
}
.pd-dir-knopf svg { width: 18px; height: 18px; flex: none; }
/* GP faerbt a:hover, a:focus und a:active (0,1,1): eigene Zustaende mit (0,2,0). */
.pd-dir-knopf:visited, .pd-dir-knopf:focus, .pd-dir-knopf:active { color: var(--pd-color-accent); text-decoration: none; outline: none; }
.pd-dir-knopf:focus-visible { outline: 2px solid var(--pd-color-accent); outline-offset: 2px; }
.pd-dir-knopf:hover { background: #dfe7f5; border-color: var(--pd-color-accent); color: var(--pd-color-accent); text-decoration: none; }
@media (max-width: 900px) {
  .pd-kopf { position: relative; }
  .pd-kopf-seite { display: contents; }
  .pd-dir-zelle { left: auto; right: 24px; top: calc(100% + 1px + (60px - var(--pd-dir-hoehe)) / 2); }
  .pd-dir-knopf { width: auto; }
}
@media (max-width: 768px) {
  #site-navigation button.menu-toggle { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .pd-dir-knopf { transition: none; }
}

/* ==== Startseite + Kundenbereich (konsolidiert 16.09.2026) ==== */
/* Ersetzt die gewachsenen Anhaeng-Bloecke des Startseiten-Pakets.
 * Reihenfolge = Sektionsfolge der Seite: Grundgeruest, Hero mit
 * Finder-Karte (pd-hf-*), Vorteilsleiste, Kategorie-Karten mit
 * Hersteller-Laufband, Bestseller-Band, Konto-Band (pd-kb-*),
 * Beratung + Firmen-Zeile, heller Fussbereich, Responsiv.
 * Zwei-Blau-Regel: Navy-Flaechen sind Topbar, Finder-Karte und
 * Konto-Band; der Fussbereich ist hell. Akzent nur interaktiv.
 * Namensraum-Regel: pd-finder-* gehoert pd-core (Produktkarte),
 * der Hero-Finder laeuft deshalb unter pd-hf-*. */

/* ---- Grundgeruest ---- */

.pd-startseite {
  width: 100%;
}

.pd-startseite .pd-hero-innen,
.pd-startseite .pd-vorteile-innen,
.pd-startseite .pd-abschnitt {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

.pd-startseite .pd-abschnitt {
  margin-top: 40px;
  margin-bottom: 40px;
}

.pd-startseite .pd-abschnitt-kopf {
  margin-bottom: 18px;
}

.pd-startseite .pd-abschnitt-kopf h2 {
  margin: 0 0 6px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--pd-color-text);
}

.pd-startseite .pd-abschnitt-kopf p {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--pd-color-muted);
}

.pd-startseite .pd-ikone {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

/* Weiches Aufklappen: Hoehenanimation macht startseite.js, hier nur
 * die Chevron-Drehung (bei Reduced Motion ohne Uebergang). */

details.pd-weich summary .pd-ikone {
  transition: transform 0.28s ease;
}

/* ---- Hero ---- */

.pd-hero {
  background:
    radial-gradient(1100px 420px at 85% -10%, var(--pd-color-accent-light), transparent 62%),
    linear-gradient(180deg, #f6f8fb 0%, var(--pd-color-ground) 100%);
  border-bottom: 1px solid var(--pd-color-border);
}

.pd-hero-innen {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 460px);
  gap: calc(var(--pd-space) * 2.5);
  align-items: center;
  padding-top: 40px;
  padding-bottom: 44px;
}

.pd-hero-eyebrow {
  margin: 0 0 10px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pd-color-accent);
}

.pd-hero-text h1 {
  margin: 0 0 14px;
  font-size: 36px;
  letter-spacing: -0.01em;
  line-height: 1.12;
  color: var(--pd-color-text);
}

.pd-hero-text h1 em {
  font-style: normal;
  color: var(--pd-color-accent);
}

.pd-hero-sub {
  margin: 0;
  max-width: 34em;
  font-size: 16px;
  line-height: 1.6;
  color: var(--pd-color-muted);
}

/* ---- Finder-Karte (Navy-Flaeche, Namensraum pd-hf-*) ---- */

.pd-hf-karte {
  background: linear-gradient(180deg, #1a3765 0%, var(--pd-color-accent-dark) 55%);
  color: #fff;
  border-radius: var(--pd-radius-card);
  box-shadow: var(--pd-shadow-lift);
  padding: calc(var(--pd-space) * 1.5);
}

.pd-hf-titel {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 19px;
  font-weight: 600;
  color: #fff;
}

.pd-hf-titel .pd-ikone {
  color: rgba(255, 255, 255, 0.85);
}

.pd-hf-eingabe {
  position: relative;
}

.pd-hf-eingabe label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
}

.pd-hf-eingabe input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: var(--pd-radius);
  background: #fff;
  color: var(--pd-color-text);
  padding: 12px 14px;
  font-size: 1rem;
}

.pd-hf-eingabe input:focus {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.pd-hf-vorschlaege {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
  background: #fff;
  border-radius: var(--pd-radius);
  box-shadow: var(--pd-shadow-lift);
  overflow: hidden;
}

.pd-hf-vorschlag {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  border: 0;
  background: none;
  text-align: left;
  padding: 10px 14px;
  cursor: pointer;
}

.pd-hf-vorschlag:hover,
.pd-hf-vorschlag:focus {
  background: var(--pd-color-accent-light);
}

.pd-hf-vorschlag b {
  color: var(--pd-color-text);
  font-size: 0.95rem;
}

.pd-hf-vorschlag small {
  color: var(--pd-color-muted);
  font-size: 0.8rem;
}

.pd-hf-vorschlag--leer b {
  color: var(--pd-color-muted);
}

.pd-hf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.pd-hf-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: var(--pd-color-accent-dark);
  border-radius: 999px;
  padding: 6px 7px 6px 13px;
  font-size: 0.85rem;
}

.pd-hf-chip b {
  font-weight: 600;
}

.pd-hf-chip small {
  font-weight: 400;
  color: var(--pd-color-muted);
}

.pd-hf-chip button {
  border: 0;
  background: var(--pd-color-accent-light);
  color: var(--pd-color-accent-dark);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 0.8rem;
  padding: 0;
}

.pd-hf-chip button:hover {
  background: var(--pd-color-border);
}

.pd-hf-knopf {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 14px;
  border: 0;
  border-radius: var(--pd-radius);
  background: #fff;
  color: var(--pd-color-accent-dark);
  font-size: 1rem;
  font-weight: 700;
  padding: 13px 16px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(20, 44, 80, 0.14);
}

/* Heller Hover-Hintergrund ausdruecklich setzen: GPs globale
 * button:hover-Regel (#3f4047) schlaegt sonst durch. */

.pd-hf-knopf:hover,
.pd-hf-knopf:focus {
  background: #f3f6fb;
  color: var(--pd-color-accent-dark);
}

.pd-hf-hinweis {
  margin: 10px 0 0;
  font-size: 0.85rem;
  color: #ffd9d9;
}

.pd-hf-aufklapper {
  margin-top: 12px;
}

.pd-hf-aufklapper summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px dashed rgba(255, 255, 255, 0.55);
  border-radius: var(--pd-radius);
  padding: 8px 12px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  list-style: none;
}

.pd-hf-aufklapper summary::-webkit-details-marker {
  display: none;
}

.pd-hf-aufklapper summary:hover {
  border-color: #fff;
  color: #fff;
}

.pd-hf-aufklapper summary .pd-ikone {
  width: 15px;
  height: 15px;
  transition: transform 0.28s ease;
}

.pd-hf-aufklapper[open] summary .pd-ikone {
  transform: rotate(180deg);
}

.pd-hf-aufklapper-hinweis {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
}

.pd-hf-selects {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.pd-hf-selects label span {
  display: block;
  margin-bottom: 4px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.85);
}

.pd-hf-selects select {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: var(--pd-radius);
  background: #fff;
  color: var(--pd-color-text);
  padding: 10px 12px;
  font-size: 0.95rem;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6d7e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px 16px;
  padding-right: 40px;
}

/* Wartezustand ohne Browser-Grau auf Navy */

.pd-hf-selects select:disabled {
  background: rgba(255, 255, 255, 0.85);
  color: var(--pd-color-muted);
  opacity: 1;
  cursor: not-allowed;
}

/* ---- Vorteilsleiste ---- */

.pd-vorteile {
  background: var(--pd-color-card);
  border-bottom: 1px solid var(--pd-color-border);
}

.pd-vorteile-innen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--pd-space);
  padding-top: 16px;
  padding-bottom: 16px;
}

.pd-vorteil {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.pd-vorteil .pd-ikone {
  margin-top: 2px;
  color: var(--pd-color-accent);
}

.pd-vorteil b {
  display: block;
  font-size: 14.5px;
  color: var(--pd-color-text);
}

.pd-vorteil small {
  color: var(--pd-color-muted);
  font-size: 13px;
}

/* ---- Kategorie-Karten ---- */

.pd-startseite .pd-kategorien {
  margin-bottom: 0;
  padding-bottom: 24px;
}

.pd-kategorie-karten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.pd-kategorie-karte {
  background: var(--pd-color-card);
  border: 1px solid var(--pd-color-border);
  border-radius: var(--pd-radius-card);
  padding: 0;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(20, 44, 80, 0.06), 0 4px 14px rgba(20, 44, 80, 0.05);
  transition: box-shadow 0.15s, border-color 0.15s, transform 0.15s;
}

.pd-kategorie-karte:hover {
  border-color: var(--pd-color-accent);
  transform: translateY(-2px);
  box-shadow: var(--pd-shadow-lift);
}

.pd-kategorie-haupt {
  display: block;
  text-decoration: none;
}

.pd-kategorie-haupt:hover .pd-kategorie-name {
  text-decoration: underline;
}

.pd-kategorie-bild {
  display: block;
  height: 160px;
  overflow: hidden;
}

.pd-kategorie-bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}

.pd-kategorie-haupt:hover .pd-kategorie-bild img {
  transform: scale(1.03);
}

.pd-kategorie-leiste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 20px;
}

.pd-kategorie-leiste-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pd-kategorie-leiste-text small {
  color: var(--pd-color-muted);
  font-size: 13px;
}

.pd-kategorie-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--pd-color-accent);
}

.pd-kategorie-leiste-rechts {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.pd-kategorie-leiste-rechts .pd-ikone {
  width: 20px;
  height: 20px;
  color: var(--pd-color-accent);
  transition: transform 0.2s ease;
}

.pd-kategorie-haupt:hover .pd-kategorie-leiste-rechts .pd-ikone {
  transform: translateX(3px);
}

.pd-kategorie-zahl {
  font-size: 13px;
  color: var(--pd-color-muted);
  white-space: nowrap;
}

.pd-kategorie-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding: 0 20px 18px;
}

.pd-kategorie-chips a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 999px;
  background: var(--pd-color-accent-light);
  color: var(--pd-color-accent);
  font-size: 12.5px;
  font-weight: 500;
  padding: 4px 11px;
  text-decoration: none;
}

.pd-kategorie-chips a:hover {
  background: var(--pd-color-border);
}

.pd-kategorie-chips a span {
  color: var(--pd-color-muted);
  font-size: 11.5px;
}

/* Ab drei Hauptkategorien (Modifier setzt front-page.php) */

.pd-kategorie-karten--dreier {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pd-kategorie-karten--dreier .pd-kategorie-bild {
  height: 130px;
}

/* ---- Hersteller-Laufband ---- */

.pd-hersteller-zeile {
  display: flex;
  align-items: center;
  gap: calc(var(--pd-space) * 1.5);
  margin-top: calc(var(--pd-space) * 1.5);
  padding: calc(var(--pd-space) * 1.5) 20px 0;
}

.pd-hersteller-label {
  flex: 0 0 auto;
  max-width: 160px;
  font-size: 0.8rem;
  color: var(--pd-color-muted);
}

.pd-hersteller-band {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.pd-hersteller-lauf {
  display: inline-flex;
  gap: 3rem;
  padding-right: 3rem;
  white-space: nowrap;
  animation: pd-hersteller-lauf 45s linear infinite;
}

.pd-hersteller-lauf span {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pd-color-muted);
}

@keyframes pd-hersteller-lauf {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---- Bestseller-Band (weiss, Regal aus pd-core) ---- */

.pd-bestseller-band {
  background: var(--pd-color-card);
  border-top: 1px solid var(--pd-color-border);
  margin-top: 0;
}

.pd-bestseller-band .pd-abschnitt {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 32px;
  padding-bottom: 40px;
}

/* ---- Kundenbereich: gemeinsame Bausteine (pd-kb-*) ---- */

.pd-kb-innen {
  width: min(100% - 40px, 1120px);
  margin-inline: auto;
}

.pd-kb-overline {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pd-kb-overline .pd-ikone {
  width: 18px;
  height: 18px;
}

.pd-kb-eintrag,
.pd-kb-neu summary.pd-kb-eintrag {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  height: 48px;
  min-height: 48px;
  border-radius: 5px;
  padding: 0 18px;
  margin-top: 19px;
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

.pd-kb-eintrag .pd-ikone {
  width: 18px;
  height: 18px;
}

/* ---- Konto-Band (Navy-Flaeche) ---- */

.pd-kb-konto {
  background: var(--pd-color-accent-dark);
  color: #fff;
  margin-top: 40px;
}

/* Folgt das Kontoband direkt auf das Bestseller-Band, schliessen
   die Baender ohne Luecke aneinander (Befund Leon 21.09.). */
.pd-bestseller-band + .pd-kb-konto {
  margin-top: 0;
}

.pd-kb-konto-gitter {
  display: grid;
  grid-template-columns: 1.13fr 1fr;
  gap: 40px;
  padding-block: 42px;
  align-items: start;
}

.pd-kb-konto .pd-kb-overline {
  color: rgba(255, 255, 255, 0.78);
}

.pd-kb-konto h2 {
  margin: 9px 0 0;
  font-size: 32px;
  line-height: 1.15;
  font-weight: 650;
  letter-spacing: -0.035em;
  color: #fff;
}

.pd-kb-konto p {
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 14.5px;
  max-width: 400px;
}

.pd-kb-login {
  background: #fff;
  color: var(--pd-color-accent-dark);
  border: 1px solid #fff;
}

.pd-kb-login:hover {
  color: var(--pd-color-accent-dark);
  background: #f3f6fb;
}

.pd-kb-neu {
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  padding: 5px 0 3px 30px;
}

.pd-kb-neu h3 {
  margin: 0;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: #fff;
}

.pd-kb-neu p {
  font-size: 13.5px;
}

.pd-kb-neu details {
  margin: 0;
}

.pd-kb-neu summary {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  list-style: none;
}

.pd-kb-neu summary::-webkit-details-marker,
.pd-kb-hilfe summary::-webkit-details-marker {
  display: none;
}

.pd-kb-neu summary.pd-kb-eintrag:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: #fff;
}

.pd-kb-neu details[open] summary .pd-ikone,
.pd-kb-hilfe[open] summary .pd-ikone {
  transform: rotate(180deg);
}

.pd-kb-reveal {
  padding-top: 6px;
}

.pd-kb-reveal a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #fff;
  margin-top: 10px;
}

.pd-kb-reveal p,
.pd-kb-reveal a {
  font-size: 13.5px;
}

.pd-kb-reveal a .pd-ikone {
  width: 15px;
  height: 15px;
}

/* ---- Beratung + Firmen-Zeile ---- */

.pd-kb-beratung {
  padding-block: 54px 42px;
}

.pd-kb-beratung-gitter {
  display: grid;
  grid-template-columns: 1.13fr 1fr;
  gap: 34px;
  align-items: center;
}

.pd-kb-beratung .pd-kb-overline {
  color: var(--pd-color-accent);
  margin-bottom: 13px;
}

.pd-kb-beratung h2 {
  margin: 0;
  font-size: clamp(27px, 3.8vw, 38px);
  line-height: 1.12;
  font-weight: 650;
  letter-spacing: -0.045em;
  color: var(--pd-color-text);
}

.pd-kb-beratung h2 em {
  font-style: normal;
  color: var(--pd-color-accent);
}

.pd-kb-beratung-text > p {
  color: var(--pd-color-muted);
  font-size: 14.5px;
  line-height: 1.7;
  margin: 16px 0 0;
  max-width: 460px;
}

.pd-kb-kontakt {
  margin-top: 23px;
  display: grid;
  gap: 9px;
}

.pd-kb-kontakt a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  max-width: 100%;
  text-decoration: none;
  color: var(--pd-color-accent);
}

.pd-kb-kontakt a:hover {
  text-decoration: underline;
}

.pd-kb-telefonzeile {
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -0.025em;
}

.pd-kb-mailzeile {
  font-size: 13.5px;
}

.pd-kb-mailzeile .pd-ikone {
  width: 15px;
  height: 15px;
}

.pd-kb-foto {
  margin: 0;
  min-width: 0;
}

.pd-kb-foto img {
  display: block;
  width: 100%;
  height: 282px;
  object-fit: cover;
  object-position: 52% 48%;
  border-radius: 8px;
}

.pd-kb-foto figcaption {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--pd-color-muted);
  font-size: 11px;
  margin-top: 10px;
}

.pd-kb-foto figcaption::before {
  content: "";
  display: block;
  width: 17px;
  height: 2px;
  background: var(--pd-color-accent);
  flex-shrink: 0;
}

.pd-kb-hilfe {
  margin-top: 23px;
  border-top: 1px solid var(--pd-color-border);
}

.pd-kb-hilfe summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-block: 14px;
  list-style: none;
  color: var(--pd-color-text);
  font-size: 13.5px;
  font-weight: 550;
  cursor: pointer;
}

.pd-kb-hilfe summary .pd-ikone {
  width: 15px;
  height: 15px;
}

.pd-kb-hilfe p {
  margin: 0;
  color: var(--pd-color-muted);
  font-size: 13.5px;
  line-height: 1.65;
  padding-bottom: 12px;
}

.pd-kb-firma {
  border-top: 1px solid var(--pd-color-border);
  padding-top: 30px;
  margin-top: 32px;
  display: grid;
  grid-template-columns: 1.13fr 1fr;
  gap: 34px;
  align-items: start;
}

.pd-kb-firma h3 {
  margin: 0;
  font-size: 19px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--pd-color-text);
}

.pd-kb-firma p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--pd-color-muted);
}

.pd-kb-firma a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--pd-color-accent);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  margin-top: 12px;
}

.pd-kb-firma a:hover {
  text-decoration: underline;
}

.pd-kb-firma a .pd-ikone {
  width: 15px;
  height: 15px;
}

/* ---- Fussbereich (hell: ground + border) ---- */

.pd-kb-fuss {
  background: var(--pd-color-ground);
  border-top: 1px solid var(--pd-color-border);
  padding-top: 38px;
  color: var(--pd-color-text);
}

.pd-kb-fuss-gitter {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: 30px;
  padding-bottom: 28px;
}

/* Selektor bewusst zweigliedrig: Woos globale .woocommerce img
 * { height: auto } (0,1,1) schlug die flache Klasse auf
 * Produktseiten - Logo fiel auf Naturgroesse (Befund 16.09.). */
.pd-kb-fuss .pd-kb-fusslogo {
  display: block;
  height: 32px;
  width: auto;
}

.pd-kb-wortmarke {
  font-size: 18px;
  font-weight: 750;
  font-style: italic;
  letter-spacing: -0.055em;
  color: var(--pd-color-text);
  line-height: 1.05;
}

.pd-kb-wortmarke span {
  color: var(--pd-color-accent);
}

.pd-kb-firmenlabel {
  margin-top: 13px;
  font-size: 12.5px;
  color: var(--pd-color-muted);
}

.pd-kb-fuss address {
  font-style: normal;
  color: var(--pd-color-muted);
  font-size: 13.5px;
  line-height: 1.8;
  margin-top: 8px;
}

.pd-kb-fuss h3 {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 650;
  color: var(--pd-color-text);
}

.pd-kb-links {
  display: grid;
  gap: 9px;
}

.pd-kb-links a {
  color: var(--pd-color-muted);
  text-decoration: none;
  font-size: 13.5px;
  width: fit-content;
}

.pd-kb-links a:hover {
  color: var(--pd-color-accent);
  text-decoration: underline;
}

.pd-kb-unten {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  flex-wrap: wrap;
  border-top: 1px solid var(--pd-color-border);
  padding-block: 17px;
  font-size: 12.5px;
  color: var(--pd-color-muted);
}

.pd-kb-recht {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.pd-kb-recht a {
  color: inherit;
  text-decoration: none;
}

.pd-kb-recht a:hover {
  text-decoration: underline;
}

/* ---- CTA-Verhalten (Hover-Lift, Aktiv-Zustand) ---- */

.pd-hf-knopf,
.pd-kb-eintrag {
  transition: transform 0.15s ease, box-shadow 0.15s ease,
    background-color 0.15s ease, border-color 0.15s ease;
}

.pd-hf-knopf:hover,
.pd-kb-login:hover,
.pd-kb-neu summary.pd-kb-eintrag:hover {
  transform: translateY(-1px);
}

.pd-hf-knopf:hover,
.pd-kb-login:hover {
  box-shadow: 0 6px 18px rgba(10, 22, 40, 0.25);
}

.pd-hf-knopf:active,
.pd-kb-eintrag:active {
  transform: translateY(0);
}

/* ---- Responsiv ---- */

@media (max-width: 900px) {
  .pd-hero-innen {
    grid-template-columns: minmax(0, 1fr);
    gap: calc(var(--pd-space) * 1.5);
  }

  .pd-hero-text h1 {
    font-size: 30px;
  }

  .pd-vorteile-innen {
    grid-template-columns: minmax(0, 1fr);
    gap: calc(var(--pd-space) * 0.75);
  }

  .pd-kategorie-karten,
  .pd-kategorie-karten--dreier {
    grid-template-columns: minmax(0, 1fr);
  }

  .pd-kategorie-bild {
    height: 140px;
  }

  .pd-hersteller-zeile {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .pd-hersteller-label {
    max-width: none;
  }

  .pd-hersteller-band {
    width: 100%;
  }
}

@media (max-width: 600px) {
  .pd-kb-innen {
    width: calc(100% - 36px);
  }

  .pd-kb-konto-gitter {
    grid-template-columns: 1fr;
    gap: 26px;
    padding-block: 27px;
  }

  .pd-kb-konto p {
    max-width: none;
  }

  .pd-kb-neu {
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    padding: 21px 0 0;
  }

  .pd-kb-beratung {
    padding-block: 32px 27px;
  }

  .pd-kb-beratung-gitter {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .pd-kb-foto img {
    height: 230px;
  }

  .pd-kb-beratung h2 {
    font-size: 31px;
  }

  .pd-kb-firma {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 25px;
    padding-top: 23px;
  }

  .pd-kb-fuss-gitter {
    grid-template-columns: 1fr 1fr;
    gap: 26px 18px;
  }

  .pd-kb-fuss-firma {
    grid-column: 1 / -1;
  }

  .pd-kb-eintrag {
    width: fit-content;
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  details.pd-weich summary .pd-ikone,
  .pd-hf-aufklapper summary .pd-ikone {
    transition: none;
  }

  .pd-hersteller-lauf {
    animation: none;
    flex-wrap: wrap;
    white-space: normal;
  }

  .pd-hersteller-lauf span[aria-hidden] {
    display: none;
  }

  .pd-kategorie-karte:hover {
    transform: none;
  }

  .pd-hf-knopf:hover,
  .pd-kb-login:hover,
  .pd-kb-neu summary.pd-kb-eintrag:hover {
    transform: none;
  }
}

/* --- Preisinfo Produktseite (Preispaket Punkt 5, 16.09.) ---------------- */

.single-product div.product p.price del {
  font-size: 15px;
  font-weight: 400;
  color: var(--pd-color-muted);
  opacity: 1;
  margin-right: 8px;
}
.single-product div.product p.price ins {
  color: var(--pd-color-vertrag);
  text-decoration: none;
  font-weight: 700;
}
.pd-preisinfo {
  margin: 4px 0 10px;
}
.pd-preisinfo__vertrag {
  display: inline-block;
  margin: 0 0 8px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--pd-color-vertrag);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}
.pd-preisinfo__staffelliste {
  max-width: 340px;
  margin: 0 0 8px;
}
.pd-preisinfo__stufe {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 6px 10px;
  font-size: 13px;
  border-left: 3px solid transparent;
}
.pd-preisinfo__stufe + .pd-preisinfo__stufe {
  border-top: 1px solid var(--pd-color-zeile);
}
.pd-preisinfo__menge {
  color: var(--pd-color-muted);
}
.pd-preisinfo__preis {
  font-weight: 600;
}
.pd-preisinfo__stufe--vertrag .pd-preisinfo__preis {
  color: var(--pd-color-vertrag);
}
.pd-preisinfo__stufe.pd-ist-aktiv {
  border-left-color: var(--pd-color-vertrag);
  background: var(--pd-color-panel);
}
.pd-preisinfo__stufe.pd-ist-aktiv .pd-preisinfo__menge {
  color: var(--pd-color-text);
  font-weight: 600;
}
.pd-preisinfo__ersparnis {
  margin: 0 0 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--pd-color-vertrag);
}

/* ------------------------------------------------------------------
   Kachel-Kopfzone v3 (16.09.2026): Markenzeile ("Intercopy ersetzt"
   bzw. OEM-Hersteller bei Originalen) + Original-Nummernzeile.
   ------------------------------------------------------------------ */
.pd-finder-karte__marke {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--pd-color-muted);
  margin-bottom: 2px;
}
.pd-finder-karte__marke b {
  color: var(--pd-color-text);
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* --- Kopfsuche: Artikelvorschlaege (data-pd-kopf-vorschlaege) ----- */
.pd-kopf-suche{position:relative;z-index:150}
.pd-kopf-vorschlaege[hidden]{display:none}
.pd-kopf-vorschlaege{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:140;background:var(--pd-color-card);border:1px solid var(--pd-color-border);border-radius:10px;box-shadow:0 14px 30px rgba(15,26,42,.16);padding:6px;display:grid;gap:2px;max-height:340px;overflow:auto}
.pd-kopf-vorschlaege button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;text-align:left;border:0;background:transparent;border-radius:7px;padding:9px 11px;font:inherit;font-size:13px;color:var(--pd-color-text);cursor:pointer}
.pd-kopf-vorschlaege button:hover,.pd-kopf-vorschlaege button:focus-visible{background:var(--pd-color-accent-light)}
.pd-kopf-vorschlaege button small{color:var(--pd-color-muted);font-size:11px}
.pd-kopf-vorschlaege .pd-kopf-vorschlaege-alle{align-items:center;color:var(--pd-color-accent);font-weight:600;border-top:1px solid var(--pd-color-border);border-radius:0;margin-top:2px}
.pd-kopf-vorschlaege-leer{padding:10px 11px;font-size:12px;color:var(--pd-color-muted)}

/* ============================================================
   Abschnitt 16: Kundenportal (Rahmen + Navigation, Patch 2)
   Referenz: docs/portal-referenz-v5.html
   ============================================================ */
body.pd-portal .woocommerce{display:grid;grid-template-columns:232px minmax(0,1fr);gap:22px;align-items:start}
body.pd-portal .woocommerce-notices-wrapper{grid-column:1/-1}
body.pd-portal .woocommerce-MyAccount-content{grid-column:2;min-width:0;width:auto;float:none}
body.pd-portal .woocommerce-MyAccount-navigation{width:auto;float:none}

.pd-portal-nav{grid-column:1;background:var(--pd-color-card);border:1px solid var(--pd-color-border);border-radius:var(--pd-radius);box-shadow:var(--pd-shadow-card);overflow:hidden;position:sticky;top:14px}
.pd-portal-nav__kopf{background:var(--pd-color-accent-dark);color:#fff;padding:14px 16px}
.pd-portal-nav__kopf b{display:block;font-size:14.5px}
.pd-portal-nav__kopf span{font-size:12px;color:#b9c5d8}
.pd-portal-nav ul{list-style:none;margin:0;padding:8px 0}
.pd-portal-nav li{margin:0}
.pd-portal-nav li a{display:flex;align-items:center;gap:10px;padding:9px 16px;font-size:14px;color:var(--pd-color-text);text-decoration:none}
.pd-portal-nav li a:hover{background:var(--pd-color-accent-light);color:var(--pd-color-accent)}
.pd-portal-nav li.is-active a{background:var(--pd-color-accent-light);color:var(--pd-color-accent);font-weight:600;box-shadow:inset 3px 0 0 var(--pd-color-accent)}
.pd-portal-nav li a svg{width:17px;height:17px;flex-shrink:0;fill:none;stroke:var(--pd-color-muted);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pd-portal-nav li a:hover svg,.pd-portal-nav li.is-active a svg{stroke:currentColor}
.pd-portal-nav__label{flex:1}

.pd-portal-karte{background:var(--pd-color-card);border:1px solid var(--pd-color-border);border-radius:var(--pd-radius);box-shadow:var(--pd-shadow-card);padding:16px 18px}
.pd-portal-karte + .pd-portal-karte{margin-top:16px}
.pd-portal-karte h2{margin:8px 0 4px;font-size:18px;color:var(--pd-color-accent-dark)}
.pd-portal-karte p{margin:0;font-size:13.5px;color:var(--pd-color-muted)}
.pd-portal-vorb{border-style:dashed;background:#fbfcfe}
.pd-portal-pill{display:inline-block;border-radius:99px;font-size:12.5px;font-weight:600;padding:2px 10px;background:#fdf3dd;color:#a06a00}

@media (max-width:980px){
  body.pd-portal .woocommerce{grid-template-columns:1fr}
  body.pd-portal .woocommerce-MyAccount-content{grid-column:1}
  .pd-portal-nav{grid-column:1;position:static}
}

/* ============================================================
   Abschnitt 16b: Kundenportal Adressbuch (Patch 3a)
   Referenz: docs/portal-referenz-v5.html (a-adressbuch)
   ============================================================ */
.pd-adr-kopf{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.pd-adr-kopf h2{margin:0}
.pd-adr-kn{display:inline-block;border-radius:var(--pd-radius);font-size:13px;font-weight:600;font-family:inherit;line-height:1.4;padding:7px 14px;text-decoration:none;cursor:pointer;border:1px solid var(--pd-color-accent)}
.pd-adr-kn--voll{background:var(--pd-color-accent);color:#fff}
.pd-adr-kn--voll:hover,.pd-adr-kn--voll:focus{background:var(--pd-color-accent-dark);border-color:var(--pd-color-accent-dark);color:#fff}
.pd-adr-kn--rand{background:#fff;color:var(--pd-color-accent)}
.pd-adr-kn--rand:hover,.pd-adr-kn--rand:focus{background:var(--pd-color-accent-light);color:var(--pd-color-accent)}
.pd-adr-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.pd-adr-karte{border:1px solid var(--pd-color-border);border-radius:var(--pd-radius);padding:12px 14px;font-size:13.5px;line-height:1.5;color:var(--pd-color-text);position:relative;background:var(--pd-color-panel)}
.pd-adr-karte--standard{border-left:3px solid var(--pd-color-accent);background:var(--pd-color-accent-light)}
.pd-adr-kennung{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 70px 8px 0;font:11.5px ui-monospace,Consolas,monospace;letter-spacing:.02em;color:var(--pd-color-muted)}
.pd-adr-pill{position:absolute;top:10px;right:12px;border-radius:99px;font-size:11.5px;font-weight:600;padding:1px 9px;background:var(--pd-color-accent);color:#fff}
.pd-adr-aktionen{margin-top:8px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.pd-adr-aktionen a{font-size:13px;color:var(--pd-color-accent);text-decoration:none}
.pd-adr-aktionen form{margin:0;display:inline}
.pd-adr-linkknopf{background:none;border:0;padding:0;font-size:13px;font-family:inherit;color:var(--pd-color-accent);cursor:pointer}
.pd-adr-linkknopf:hover,.pd-adr-linkknopf:focus,.pd-adr-linkknopf:active{background:none;text-decoration:underline}
.pd-adr-aktionen a:hover{text-decoration:underline}
.pd-adr-linkknopf--rot{color:var(--pd-color-vertrag)}
.pd-adr-leer,.pd-adr-fussnote{font-size:13px;color:var(--pd-color-muted)}
.pd-adr-fussnote{margin:12px 0 0}
.pd-adr-form{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;max-width:560px}
.pd-adr-feld{display:flex;flex-direction:column;gap:4px}
.pd-adr-feld--voll{grid-column:1/-1}
.pd-adr-feld label{font-size:12.5px;font-weight:600;color:var(--pd-color-muted)}
.pd-adr-feld input,.pd-adr-feld select{border:1px solid var(--pd-color-border);border-radius:var(--pd-radius);padding:8px 10px;font-size:14px;background:#fff;color:var(--pd-color-text);width:100%}
.pd-adr-feld input:focus,.pd-adr-feld select:focus{border-color:var(--pd-color-accent);outline:1px solid var(--pd-color-accent)}
.pd-adr-form__fuss{grid-column:1/-1;display:flex;gap:12px;align-items:center;margin-top:4px}
@media (max-width:720px){
  .pd-adr-form{grid-template-columns:1fr}
  .pd-adr-feld--voll{grid-column:auto}
}

/* ============================================================
   Abschnitt 16c: Checkout-Adresswahl Adressbuch (Patch 3b)
   ============================================================ */
.pd-chk-adr{border:1px solid var(--pd-color-border);border-radius:var(--pd-radius);background:var(--pd-color-panel);padding:12px 14px;margin:0 0 16px}
.pd-chk-adr__titel{margin:0 0 8px;font-weight:600;font-size:14px;color:var(--pd-color-accent-dark)}
.pd-chk-adr__wahl{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border:1px solid var(--pd-color-border);border-radius:var(--pd-radius);background:#fff;margin:0 0 8px;font-size:13.5px;line-height:1.45;cursor:pointer;font-weight:400}
.pd-chk-adr__wahl:has(input:checked){border-color:var(--pd-color-accent);background:var(--pd-color-accent-light)}
.pd-chk-adr__wahl input{margin:3px 0 0;flex-shrink:0}
.pd-chk-adr__kennung{display:block;font-size:12px;color:var(--pd-color-muted)}
.pd-chk-adr__hinweis{margin:4px 0 0;font-size:12.5px;color:var(--pd-color-muted)}
.pd-chk-adr__hinweis a{color:var(--pd-color-accent)}

/* ============================================================
   Abschnitt 16d: Kundenportal Bestelllisten (Patch 4a)
   Referenz: docs/portal-referenz-v5.html (a-listen)
   ============================================================ */
.pd-bl-unterzeile{margin:-6px 0 14px;font-size:13px;color:var(--pd-color-muted)}
.pd-bl-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.pd-bl-karte{border:1px solid var(--pd-color-border);border-radius:var(--pd-radius);padding:13px 15px;background:var(--pd-color-panel)}
.pd-bl-karte h3{margin:0 0 2px;font-size:15.5px;color:var(--pd-color-accent-dark)}
.pd-bl-neben{font-size:12.5px;color:var(--pd-color-muted)}
.pd-bl-karte .pd-bl-neben{display:block;margin-bottom:10px}
.pd-bl-aktionen{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pd-bl-aktionen form{margin:0;display:inline}
.pd-bl-neu{border:1px dashed var(--pd-color-accent);border-radius:var(--pd-radius);background:#fbfcfe;padding:13px 15px;display:flex;flex-direction:column;gap:8px;justify-content:center}
.pd-bl-neu label{font-weight:600;font-size:14px;color:var(--pd-color-accent);cursor:pointer;margin:0}
.pd-bl-neu__zeile,.pd-bl-schnell__zeile{display:flex;gap:8px;flex-wrap:wrap}
.pd-bl-neu input[type=text],.pd-bl-schnell input[type=text],.pd-bl-verwalten input[type=text]{flex:1;min-width:140px;border:1px solid var(--pd-color-border);border-radius:var(--pd-radius);padding:7px 10px;font-size:13.5px;background:#fff;color:var(--pd-color-text)}
.pd-bl-verwalten{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin:0 0 14px}
.pd-bl-verwalten form{margin:0;display:flex;gap:8px;align-items:center}
.pd-bl-tabelle{width:100%;border-collapse:collapse;font-size:13.5px}
.pd-bl-tabelle th{text-align:left;font-size:12px;color:var(--pd-color-muted);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--pd-color-border);white-space:nowrap}
.pd-bl-tabelle td{padding:9px 10px;border-bottom:1px solid var(--pd-color-zeile);vertical-align:middle}
.pd-bl-tabelle .pd-bl-r,.pd-bl-tabelle th.pd-bl-r{text-align:right}
.pd-bl-artikel{color:var(--pd-color-text);text-decoration:none}
a.pd-bl-artikel:hover{color:var(--pd-color-accent)}
.pd-bl-menge{width:74px;border:1px solid var(--pd-color-border);border-radius:var(--pd-radius);padding:6px 8px;font-size:13.5px;text-align:right;background:#fff;color:var(--pd-color-text)}
.pd-bl-tabelle .pd-ampel{display:inline-flex;align-items:center;gap:6px;margin:0;font-size:12.5px;font-weight:600;white-space:nowrap}
.pd-bl-tabelle .pd-ampel__punkt{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none}
.pd-bl-tabelle .pd-ampel--gruen{color:#2ecb72}
.pd-bl-tabelle .pd-ampel--gruen .pd-ampel__punkt{background:#2ecb72}
.pd-bl-tabelle .pd-ampel--gelb{color:#f2b400}
.pd-bl-tabelle .pd-ampel--gelb .pd-ampel__punkt{background:#f2b400}
.pd-bl-tabelle .pd-ampel--rot{color:#e5484d}
.pd-bl-tabelle .pd-ampel--rot .pd-ampel__punkt{background:#e5484d}
.pd-bl-fuss{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 0}
.pd-bl-schnell{margin:16px 0 0;display:flex;flex-direction:column;gap:6px}
.pd-bl-schnell label{font-size:12.5px;font-weight:600;color:var(--pd-color-muted);margin:0}
@media (max-width:1023px){
  .pd-bl-tabelle thead{display:none}
  .pd-bl-tabelle tr{display:block;border:1px solid var(--pd-color-border);border-radius:var(--pd-radius);margin:0 0 10px;padding:4px 0}
  .pd-bl-tabelle td{display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:0;padding:6px 12px}
  .pd-bl-tabelle td[data-t]::before{content:attr(data-t);font-size:12px;color:var(--pd-color-muted);font-weight:600}
}

/* ============================================================
   Abschnitt 16d-5: Bestelllisten Neubau v5 (24.09.) - Positions-
   Suche, Kurzkompa-Chips, Preis-Stapel, Nummern-Dialog mit
   kopierbaren Kaertchen. Loest 16d-2 bis 16d-4 ab; die 16d-
   Basisregeln (Raster, Formulare, Menge) bleiben in Nutzung.
   ============================================================ */
.pd-bl-defaultsubmit{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;border:0;padding:0;background:none}
.pd-bl-suche{margin:0 0 4px}
.pd-bl-suche input{width:100%;border:1px solid var(--pd-color-border);border-radius:var(--pd-radius);padding:8px 11px;font-size:13.5px;background:#fff;color:var(--pd-color-text)}
.pd-bl-suchinfo{font-size:12px;color:var(--pd-color-muted);min-height:16px;margin:0 0 8px}
.pd-bl-posliste{display:flex;flex-direction:column;gap:9px}
.pd-bl-pos{border:1px solid var(--pd-color-border);border-radius:var(--pd-radius);background:#fff;padding:11px 13px}
.pd-bl-pos--treffer{border-color:var(--pd-color-accent);background:#fbfdff}
.pd-bl-pos--weg{display:none}
.pd-bl-pos__zeile1{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
.pd-bl-pos__ident{min-width:0;flex:1 1 220px}
.pd-bl-pos__ident .pd-bl-artikel{font-weight:700;font-size:14.5px}
.pd-bl-titel{font-size:13.5px}
.pd-bl-pos .pd-ampel{display:inline-flex;align-items:center;gap:5px;margin:0 0 0 8px;font-size:12px;font-weight:600;white-space:nowrap}
.pd-bl-pos .pd-ampel__punkt{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
.pd-bl-pos .pd-ampel--gruen{color:#2ecb72}
.pd-bl-pos .pd-ampel--gruen .pd-ampel__punkt{background:#2ecb72}
.pd-bl-pos .pd-ampel--gelb{color:#f2b400}
.pd-bl-pos .pd-ampel--gelb .pd-ampel__punkt{background:#f2b400}
.pd-bl-pos .pd-ampel--rot{color:#e5484d}
.pd-bl-pos .pd-ampel--rot .pd-ampel__punkt{background:#e5484d}
.pd-bl-pos__zahlen{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:flex-end;margin-left:auto}
.pd-bl-stapel{display:flex;flex-direction:column;align-items:flex-end;line-height:1.35}
.pd-bl-stk{font-size:11.5px;color:var(--pd-color-muted);white-space:nowrap}
.pd-bl-pos .preis-rot{color:#e5484d;font-weight:700}
.pd-bl-gesamt{font-size:14px;font-weight:700}
.pd-bl-entf{border:0;background:none;color:#e5484d;font-size:17px;line-height:1;cursor:pointer;padding:2px}
.pd-bl-chips{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0 0}
.pd-bl-chip{font-size:11.5px;border:1px solid var(--pd-color-border);border-radius:999px;padding:2px 9px;background:var(--pd-color-panel);color:var(--pd-color-text);white-space:nowrap}
.pd-bl-chip--markiert{border-color:var(--pd-color-accent);background:#e8f0fd;color:var(--pd-color-accent);font-weight:600}
.pd-bl-fussnote{font-size:11.5px;color:var(--pd-color-muted);margin:7px 0 0}
.pd-bl-oemtreffer{color:var(--pd-color-accent);font-weight:600}
.pd-bl-dlgknopf{border:0;background:none;color:var(--pd-color-accent);font-size:11.5px;font-weight:600;cursor:pointer;padding:0}
.pd-bl-summezeile{margin:10px 0 0;font-size:13.5px;text-align:right}
dialog.pd-bl-dlg{border:0;border-radius:var(--pd-radius);box-shadow:0 12px 40px rgba(16,32,64,.25);padding:0;max-width:600px;width:calc(100% - 40px)}
dialog.pd-bl-dlg::backdrop{background:rgba(18,42,76,.45)}
.pd-bl-dlg__kopf{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px 10px;border-bottom:1px solid var(--pd-color-border)}
.pd-bl-dlg__kopf h4{margin:0;font-size:15px;color:var(--pd-color-accent-dark)}
.pd-bl-dlg__zu{border:0;background:none;font-size:20px;line-height:1;cursor:pointer;color:var(--pd-color-muted);padding:2px 6px}
.pd-bl-dlg__suche{padding:12px 18px 0}
.pd-bl-dlg__suche input{width:100%;border:1px solid var(--pd-color-border);border-radius:var(--pd-radius);padding:8px 11px;font-size:13px;background:#fff;color:var(--pd-color-text)}
.pd-bl-dlg__suchinfo{font-size:11.5px;color:var(--pd-color-muted);padding:4px 18px 0;min-height:16px}
.pd-bl-dlg__leib{padding:10px 18px 14px;max-height:min(60vh,430px);overflow:auto}
.pd-bl-dlg .pd-bl-dlg__abschnitt{font-size:11.5px;color:var(--pd-color-muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin:10px 0 7px}
.pd-bl-kaertchen{display:flex;flex-wrap:wrap;gap:6px}
.pd-bl-oemkarte{display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;border:1px solid var(--pd-color-border);border-radius:var(--pd-radius);background:var(--pd-color-panel);padding:6px 10px;cursor:pointer;font:inherit;text-align:left;color:var(--pd-color-text)}
.pd-bl-oemkarte:hover{border-color:var(--pd-color-accent);background:#e8f0fd}
.pd-bl-oemkarte b{font-size:12.5px;color:var(--pd-color-accent-dark)}
.pd-bl-oemkarte small{font-size:10.5px;color:var(--pd-color-muted)}
.pd-bl-chipknopf{font-size:11.5px;border:1px solid var(--pd-color-border);border-radius:999px;padding:3px 10px;background:var(--pd-color-panel);color:var(--pd-color-text);white-space:nowrap;cursor:pointer;font-family:inherit}
.pd-bl-chipknopf:hover{border-color:var(--pd-color-accent);background:#e8f0fd}
.pd-bl-oemkarte--kopiert,.pd-bl-chipknopf--kopiert{border-color:#2ecb72;background:#e9faf1}
.pd-bl-oemkarte--kopiert b,.pd-bl-chipknopf--kopiert{color:#2ecb72}
.pd-bl-oemkarte--weg,.pd-bl-chipknopf--weg,.pd-bl-marke--weg{display:none}
.pd-bl-marke{margin:0 0 10px}
.pd-bl-marke>b{display:block;font-size:12.5px;margin:0 0 4px}
.pd-bl-dlg__fuss{padding:12px 18px;border-top:1px solid var(--pd-color-border);display:flex;justify-content:space-between;align-items:center;gap:10px}
.pd-bl-dlg__fuss a{color:var(--pd-color-accent);font-weight:600;text-decoration:none;font-size:13px}
.pd-bl-dlg__hinweis{font-size:11px;color:var(--pd-color-muted)}
/* 0.8.65: Typ in Titelzeilen (Bestellliste, Pruefdialog, Vorschlaege,
   Nummern-Popup). Stufen-Pill in den Farben der Kachel-Badges
   (astra-shop.css pdc-badge), dahinter Anzeige-Titel und Markenzeile. */
.pd-typ{display:inline-block;margin-right:2px;padding:1px 6px;border-radius:3px;background:#e8eef6;color:var(--pd-color-accent-dark);font-size:10.5px;font-weight:650;line-height:1.45;vertical-align:1px;white-space:nowrap}
.pd-typ--original{background:var(--pd-color-text);color:#fff}
.pd-typ--premium{background:#fdf3d8;color:#8a6410}
.pd-typ--generic{background:#eaf0fa;color:#2853a4}
.pd-typ--kompatibel{background:#f0ebfa;color:#5b3fa8}
.pd-typ--reman{background:#e2f3e8;color:#1e6b3c}
.pd-typ--tinte{background:#e0f1f4;color:#0f6474}
.pd-bl-dlg__titel{min-width:0}
.pd-bl-dlg__typ{margin:4px 0 0;font-size:12px;line-height:1.5;color:var(--pd-color-muted)}
.pd-bl-dlg__kopf:has(.pd-bl-dlg__typ){align-items:flex-start}
/* GP faerbt jeden fokussierten button dunkelgrau mit weisser Schrift
   (button:focus, 0,1,1): Details-Knopf, Kreuz, Kaertchen und Chips
   behalten ihre Optik, die Tastatur bekommt einen Ring (07.10.2026;
   gilt fuer Bestellliste und Pruefdialog des Imports). */
.pd-bl-dlgknopf:hover,.pd-bl-dlgknopf:focus{background:none;color:var(--pd-color-accent)}
.pd-bl-dlgknopf:hover{text-decoration:underline}
.pd-bl-dlgknopf[aria-busy="true"]{cursor:progress;opacity:.6}
.pd-bl-dlg__zu:hover,.pd-bl-dlg__zu:focus{background:none;color:var(--pd-color-text)}
.pd-bl-oemkarte:focus,.pd-bl-chipknopf:focus{background:var(--pd-color-panel);color:var(--pd-color-text)}
.pd-bl-oemkarte:hover,.pd-bl-chipknopf:hover{border-color:var(--pd-color-accent);background:#e8f0fd;color:var(--pd-color-text)}
.pd-bl-oemkarte--kopiert:focus,.pd-bl-chipknopf--kopiert:focus{border-color:#2ecb72;background:#e9faf1}
.pd-bl-chipknopf--kopiert:focus{color:#2ecb72}
:is(.pd-bl-dlgknopf,.pd-bl-dlg__zu,.pd-bl-oemkarte,.pd-bl-chipknopf):focus{outline:none}
:is(.pd-bl-dlgknopf,.pd-bl-dlg__zu,.pd-bl-oemkarte,.pd-bl-chipknopf):focus-visible{outline:2px solid var(--pd-color-accent);outline-offset:2px}

/* ============================================================
   Abschnitt 16e: Kundenportal Rahmenbreite (24.09.)
   GP-Container auf 1280px (Referenz v5) - nur body.pd-portal.
   Fallback: falls ein Seiten-Meta das no-sidebar-Layout aus
   inc/portal.php ueberstimmt, Sidebar aus + primary volle Breite.
   ============================================================ */
body.pd-portal .grid-container{max-width:1280px}
body.pd-portal .site-content .sidebar{display:none}
body.pd-portal .site-content #primary{width:100%;max-width:none}

/* == 16f. Kundenportal: Katalog-Einstieg Bestelllisten (4b) =====
   Knopf auf Listenkarte (.pdc-buy, Ghost-Button volle Breite) und
   Artikelseite (.buy-actions, dort als Textlink wie die Nachbarn);
   Dialog kommt aus inc/portal-katalog.php. Ein Markup, zwei Orte.
   ============================================================ */
.pd-ble-knopf{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:8px 12px;border:1px solid var(--pd-color-border);border-radius:var(--pd-radius);background:transparent;color:var(--pd-color-accent);font:inherit;font-size:.85rem;font-weight:600;cursor:pointer}
.pd-ble-knopf:focus{outline:none;background:transparent;border-color:var(--pd-color-border);color:var(--pd-color-accent)}
.pd-ble-knopf:focus-visible{outline:2px solid var(--pd-color-accent);outline-offset:2px}
.pd-ble-knopf:hover{border-color:var(--pd-color-accent);background:var(--pd-color-accent-light)}
.buy-actions .pd-ble-knopf{width:auto;border:0;padding:0;background:none}
.buy-actions .pd-ble-knopf:hover{background:none;text-decoration:underline}
.pdc-buy .pd-ble-knopf{margin-top:6px}
.pd-ble-dialog{width:min(92vw,420px);border:0;border-radius:var(--pd-radius-block);padding:0;box-shadow:var(--pd-shadow-lift);color:var(--pd-color-text)}
.pd-ble-dialog::backdrop{background:rgba(20,44,80,.45)}
.pd-ble-kopf{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--pd-color-border)}
.pd-ble-zu{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:1px solid var(--pd-color-border);border-radius:var(--pd-radius);background:var(--pd-color-zeile);font-size:1.1rem;line-height:1;color:var(--pd-color-muted);cursor:pointer}
.pd-ble-zu:focus{outline:none;background:var(--pd-color-zeile);border-color:var(--pd-color-border);color:var(--pd-color-muted)}
.pd-ble-zu:focus-visible{outline:2px solid var(--pd-color-accent);outline-offset:2px}
.pd-ble-zu:hover{background:var(--pd-color-accent-light);border-color:var(--pd-color-accent);color:var(--pd-color-accent)}
.pd-ble-artikel{margin:12px 18px 0;font-size:.85rem;color:var(--pd-color-muted)}
.pd-ble-listen{max-height:240px;overflow:auto;margin:8px 10px 0;display:grid;gap:2px}
.pd-ble-liste,.pd-ble-neu{display:flex;align-items:center;gap:10px;padding:8px;border-radius:var(--pd-radius);cursor:pointer}
.pd-ble-liste:hover{background:var(--pd-color-zeile)}
.pd-ble-liste:has(input:checked),.pd-ble-neu:has(input:checked){background:var(--pd-color-accent-light)}
.pd-ble-liste span{flex:1;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pd-ble-liste small{color:var(--pd-color-muted);white-space:nowrap}
.pd-ble-neu{margin:4px 10px 0}
.pd-ble-neu input[type=text]{flex:1;padding:6px 10px;border:1px solid var(--pd-color-border);border-radius:var(--pd-radius);font:inherit}
.pd-ble-meldung{margin:10px 18px 0;padding:8px 12px;border-radius:var(--pd-radius);background:var(--pd-color-accent-light);color:var(--pd-color-accent);font-size:.85rem}
.pd-ble-fuss{padding:14px 18px 18px;display:flex;justify-content:flex-end}
.pd-ble-senden{padding:9px 16px;border:0;border-radius:var(--pd-radius);background:var(--pd-color-accent);color:#fff;font:inherit;font-weight:600;cursor:pointer}
.pd-ble-senden:hover{background:var(--pd-color-accent-dark)}
.pd-ble-senden:disabled{opacity:.6;cursor:default}

/* == 16g. Kundenportal: Meine Vertragspreise ====================
   Zeilen laufen auf den pd-bl-Klassen des Bestelllisten-Details
   (eine Optik); hier nur die Zusaetze: Werkzeugzeile mit Suche +
   CSV-Knopf, Preis-Stack mit Streichpreis und Vertrags-Pill,
   Kaufzeile je Zeile. Buttons mit :hover/:focus nach der
   Theme-Button-Lehre (GP-Globalregeln 0,1,1).
   ============================================================ */
.pd-vp-werkzeug{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:4px}
.pd-vp-werkzeug .pd-vp-suche{flex:1;min-width:260px;margin:0}
.pd-vp-werkzeug .pd-adr-kn{white-space:nowrap}
.pd-vp-zahlen{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.pd-vp-stapel{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.pd-vp-preis{display:inline-flex;align-items:baseline;gap:6px}
.pd-vp-streich{color:var(--pd-color-muted);text-decoration:line-through;font-size:.85rem}
.pd-vp-pill{display:inline-block;padding:1px 8px;border-radius:999px;background:var(--pd-color-vertrag);color:#fff;font-size:.7rem;font-weight:600;letter-spacing:.02em}
.pd-vp-staffeln{color:var(--pd-color-muted);font-size:.8rem}
.pd-vp-kauf{display:flex;align-items:center;gap:8px;margin:0}
.pd-vp-kauf .pd-bl-menge{width:70px}
.pd-vp-kn{padding:7px 14px;font-size:.85rem}
.pd-vp-kn:focus{outline:none}
.pd-vp-kn:focus-visible{outline:2px solid var(--pd-color-accent);outline-offset:2px}
@media (max-width: 700px){
  .pd-vp-zahlen{justify-content:flex-start}
  .pd-vp-stapel{align-items:flex-start}
}
.pd-vp-aktionen{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.pd-vp-aktionen .pd-ble-knopf{width:auto}
@media (max-width: 700px){
  .pd-vp-aktionen{justify-content:flex-start}
}
.pd-vp-grid{margin-top:8px;border-radius:8px}
.pd-vp-kachel{min-width:0}
.pd-vp-resttitel{margin:22px 0 4px}
.pd-vp-viewzeile{display:flex;justify-content:flex-end;margin-bottom:10px}
/* == 16h. Kundenportal: Bestellimport (CSV und Excel) ===========
   Upload-Karte auf dem Import-Endpoint plus natives Pruef-Popup
   (Session-getragen): Tabelle der erkannten Positionen mit
   Status-Pills, Fuss mit Warenkorb-/Bestelllisten-Uebernahme.
   Buttons mit :hover/:focus nach der Theme-Button-Lehre.
   v4 (07.10.2026, docs/direktbestellung-referenz-v4.html): Kopf mit
   "Eingabe bearbeiten", Chips und Details je Artikel, Fuss als ein
   Formular mit Listenname und Haken, unter 640px Positionen als Karten.
   v5 (0.8.64, docs/direktbestellung-referenz-v5.html): Vorschlags-Karten
   fuer nicht gefundene und mehrdeutige Nummern (Auge + Uebernehmen),
   "statt ... rueckgaengig", Uebernehmen im Nummern-Popup.
   ============================================================ */
.pd-imp-karten{display:grid;gap:18px}
.pd-imp-form{margin-top:14px}
.pd-imp-zone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:26px 18px;border:1.5px dashed #c7d0dc;border-radius:9px;background:#f8fafc;text-align:center;cursor:pointer;color:var(--pd-color-muted);transition:border-color .15s,background .15s}
.pd-imp-zone:hover{border-color:var(--pd-color-accent);background:#f2f6fb}
.pd-imp-zone:focus-within{border-color:var(--pd-color-accent);background:#f2f6fb}
.pd-imp-zone--voll{border-style:solid;border-color:var(--pd-color-accent);background:#f2f6fb}
.pd-imp-zone input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.pd-imp-zone svg{color:var(--pd-color-accent)}
.pd-imp-zone strong{color:#152d4c;font-size:.95rem}
.pd-imp-zone-sub{font-size:.8rem}
.pd-imp-datei{font-size:.85rem;font-weight:600;color:var(--pd-color-accent);overflow-wrap:anywhere}
.pd-imp-aktionen{display:flex;justify-content:flex-end;margin-top:12px}
.pd-imp-merk{margin-top:12px;padding:10px 14px;border-left:3px solid var(--pd-color-accent);background:#f2f6fb;border-radius:0 6px 6px 0;color:var(--pd-color-muted);font-size:.85rem}
.pd-imp-format{margin:12px 0 0;padding-left:18px;color:var(--pd-color-muted);font-size:.85rem}
.pd-imp-format li{margin:3px 0}
.pd-imp-dialog{border:0;border-radius:10px;padding:0;width:min(760px,calc(100vw - 32px));box-shadow:0 18px 48px rgba(21,45,76,.25)}
.pd-imp-dialog::backdrop{background:rgba(20,46,81,.45)}
.pd-imp-dialog:focus{outline:none}
.pd-imp-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid #e2e7ee}
.pd-imp-kopf h3{margin:0;font-size:1.05rem}
.pd-imp-kopf form{margin:0}
.pd-imp-kopfrechts{display:flex;align-items:center;gap:14px}
.pd-imp-zu{width:32px;height:32px;border:1px solid #e2e7ee;border-radius:6px;background:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:1.05rem;line-height:1;padding:0;color:var(--pd-color-muted)}
.pd-imp-zu:focus{outline:none;background:#fff;color:var(--pd-color-text)}
.pd-imp-zu:hover{border-color:var(--pd-color-accent);background:#f6f8fb;color:var(--pd-color-text)}
.pd-imp-zu:focus-visible{outline:2px solid var(--pd-color-accent);outline-offset:2px}
/* 0.8.73 (Referenz pruefdialog-weitere-treffer-v2): Bearbeiten und
   Verwerfen als Kontur-Knoepfe mit Icon, Hoehe wie das Kreuz */
.pd-imp-bearbeiten,.pd-imp-verwerfen{display:inline-flex;align-items:center;gap:7px;min-height:32px;margin:0;padding:5px 12px;border:1px solid;border-radius:6px;background:#fff;font:inherit;font-size:13px;font-weight:600;line-height:1.2;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .15s ease,border-color .15s ease}
.pd-imp-bearbeiten svg,.pd-imp-verwerfen svg{flex:none}
.pd-imp-bearbeiten,.pd-imp-bearbeiten:focus{border-color:color-mix(in srgb,var(--pd-color-accent) 35%,#e2e7ee);background:#fff;color:var(--pd-color-accent);outline:none}
.pd-imp-bearbeiten:not(:disabled):hover{border-color:var(--pd-color-accent);background:#e8f0fd;color:var(--pd-color-accent)}
.pd-imp-bearbeiten:focus-visible{outline:2px solid var(--pd-color-accent);outline-offset:2px}
.pd-imp-verwerfen,.pd-imp-verwerfen:focus{border-color:color-mix(in srgb,#b42318 30%,#e2e7ee);background:#fff;color:#b42318;outline:none}
.pd-imp-verwerfen:not(:disabled):hover{border-color:#b42318;background:#fdecec;color:#b42318}
.pd-imp-verwerfen:focus-visible{outline:2px solid #b42318;outline-offset:2px}
.pd-imp-kopfrechts button:disabled,.pd-imp-verwerfen:disabled{opacity:.5;cursor:default;text-decoration:none}
.pd-imp-zu{position:relative}
.pd-imp-tipp{position:absolute;top:calc(100% + 9px);right:0;z-index:5;display:flex;flex-direction:column;gap:2px;width:max-content;max-width:240px;padding:8px 11px;border-radius:7px;background:#1c2740;color:#fff;font-size:12px;font-weight:400;line-height:1.4;text-align:left;white-space:normal;box-shadow:0 8px 20px rgba(15,27,58,.25);opacity:0;visibility:hidden;transform:translateY(-3px);transition:opacity .15s ease,transform .15s ease,visibility 0s linear .15s;pointer-events:none}
.pd-imp-tipp b{font-size:12.5px;font-weight:650}
.pd-imp-tipp::before{content:"";position:absolute;top:-4px;right:12px;width:8px;height:8px;background:#1c2740;transform:rotate(45deg)}
.pd-imp-zu:hover .pd-imp-tipp,.pd-imp-zu:focus-visible .pd-imp-tipp{opacity:1;visibility:visible;transform:translateY(0);transition:opacity .15s ease .3s,transform .15s ease .3s,visibility 0s linear .3s}
.pd-imp-hinweis{margin:12px 20px 0;color:#89530b;font-size:.85rem}
.pd-imp-body{position:relative;max-height:min(48vh,420px);overflow:auto}
.pd-imp-tab{width:100%;border-collapse:collapse;font-size:.9rem}
.pd-imp-tab th{text-align:left;font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;color:var(--pd-color-muted);padding:12px 20px 6px;white-space:nowrap}
.pd-imp-tab td{padding:9px 20px;border-top:1px solid #eef1f6;vertical-align:top}
.pd-imp-tab td:last-child,.pd-imp-tab th:last-child{text-align:right}
.pd-imp-titel{display:block;color:var(--pd-color-muted);font-size:.8rem}
.pd-imp-oem{display:inline}
.pd-imp-ext{display:inline-block;vertical-align:-1px;margin-left:2px;color:var(--pd-color-muted)}
a .pd-imp-ext{color:inherit;opacity:.7}
.pd-imp-tab .pd-imp-titel a{color:var(--pd-color-accent);font-weight:600;text-decoration:none}
.pd-imp-tab .pd-imp-titel a:hover{text-decoration:underline}
.pd-imp-tab .pd-bl-chips{margin-top:6px}
.pd-imp-tab .pd-bl-fussnote{margin-top:5px}
.pd-imp-pill{display:inline-block;padding:1px 8px;border-radius:999px;font-size:.7rem;font-weight:600;white-space:nowrap}
.pd-imp-pill--ok{background:#e7f7ee;color:#187348}
.pd-imp-pill--halt{background:#fdf3df;color:#89530b}
.pd-imp-pill--mehr{background:#fdeaea;color:#c02531}
.pd-imp-pill--fehl{background:#eef1f6;color:#5b6b7e}
.pd-imp-fuss{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0;padding:14px 20px;border-top:1px solid #e2e7ee}
.pd-imp-fuss .pd-imp-zaehler{margin-right:auto;color:var(--pd-color-muted);font-size:.85rem}
.pd-imp-kn:focus{outline:none}
.pd-imp-kn:focus-visible{outline:2px solid var(--pd-color-accent);outline-offset:2px}
.pd-imp-kn:disabled{opacity:.55;cursor:not-allowed}
.pd-imp-fuss--liste{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 16px;align-items:end}
.pd-imp-fuss--liste .pd-imp-zaehler{grid-column:1/-1;margin:0}
.pd-imp-fusskopf{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin-right:auto}
.pd-imp-fuss--liste .pd-imp-fusskopf{grid-column:1/-1;justify-content:space-between;margin-right:0}
.pd-imp-liste{display:flex;flex-direction:column;gap:8px;min-width:0}
.pd-imp-namefeld{display:flex;flex-direction:column;gap:4px;margin:0;font-size:12px;font-weight:600;color:var(--pd-color-muted)}
.pd-imp-namefeld .pd-imp-name{width:100%;max-width:320px;box-sizing:border-box;border:1px solid var(--pd-color-border);border-radius:var(--pd-radius);background:#fff;padding:8px 11px;font-size:13.5px;font-weight:400;color:var(--pd-color-text)}
.pd-imp-auch{display:flex;align-items:center;gap:7px;margin:0;font-size:13px;color:var(--pd-color-text);cursor:pointer}
.pd-imp-auch input{width:16px;height:16px;margin:0;accent-color:var(--pd-color-accent)}
.pd-imp-auch:has(input:disabled){color:var(--pd-color-muted);cursor:default}
.pd-imp-knoepfe{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.pd-imp-vorlage a{color:var(--pd-color-accent);font-weight:600;text-decoration:none}
.pd-imp-vorlage a:hover{text-decoration:underline}
/* v5: Vorschlaege. Karte = Auge (ansehen) + Flaeche (uebernehmen), ein Rahmen fuer beide */
.pd-imp-vorschlaege{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;max-width:470px;margin-top:6px}
.pd-imp-vorschlaege__frage,.pd-imp-vorschlaege__mehr{grid-column:1/-1;font-size:12px;color:var(--pd-color-muted)}
.pd-imp-vorschlaege__mehr{font-size:11.5px}
.pd-imp-wahl{display:flex;align-items:stretch;min-width:0;border:1px solid var(--pd-color-border);border-radius:var(--pd-radius);background:var(--pd-color-panel);overflow:hidden}
.pd-imp-wahl:hover,.pd-imp-wahl:focus-within{border-color:var(--pd-color-accent)}
.pd-imp-wahl__ansehen{display:flex;align-items:center;justify-content:center;flex:none;width:32px;margin:0;padding:0;border:0;border-right:1px solid var(--pd-color-border);border-radius:0;background:#fff;color:var(--pd-color-muted);cursor:pointer}
.pd-imp-wahl__ansehen:focus{outline:none;background:#fff;color:var(--pd-color-muted)}
.pd-imp-wahl__ansehen:hover{background:#e8f0fd;color:var(--pd-color-accent)}
.pd-imp-wahl__ansehen[aria-busy="true"]{cursor:progress;opacity:.6}
.pd-imp-vorschlag{display:flex;flex:1 1 auto;flex-direction:column;align-items:flex-start;gap:1px;min-width:0;margin:0;border:0;border-radius:0;background:transparent;padding:6px 10px;cursor:pointer;font:inherit;text-align:left;color:var(--pd-color-text)}
.pd-imp-vorschlag__nr,.pd-imp-vorschlag small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pd-imp-vorschlag__nr{font-size:11px;color:var(--pd-color-muted)}
.pd-imp-vorschlag__nr b{margin-right:3px;font-size:12.5px;color:var(--pd-color-accent-dark)}
.pd-imp-vorschlag small{font-size:11px;color:var(--pd-color-text)}
.pd-imp-vorschlag small .pd-typ{padding:0 5px;font-size:9.5px}
.pd-imp-vorschlag .pd-imp-vorschlag__marke{color:var(--pd-color-muted)}
/* Hover-Flaeche der Karte (#e8f0fd) schluckt sonst die blaue Generic-Pill */
.pd-imp-vorschlag:hover :is(.pd-typ--generic,.pd-typ[class="pd-typ"]){background:#fff}
.pd-imp-vorschlag:focus{outline:none;background:transparent;color:var(--pd-color-text)}
.pd-imp-vorschlag:hover{background:#e8f0fd;color:var(--pd-color-text)}
:is(.pd-imp-wahl__ansehen,.pd-imp-vorschlag):focus-visible{outline:2px solid var(--pd-color-accent);outline-offset:-2px}
/* 0.8.73: "N weitere anzeigen" als Leiste unter den Karten, Trefferliste
   (scrollt nach etwa sechs Zeilen in sich) und Bitte um genauere Eingabe */
.pd-imp-mehr,.pd-imp-mehr:focus{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:36px;margin:2px 0 0;padding:6px 12px;border:1px dashed color-mix(in srgb,var(--pd-color-accent) 40%,var(--pd-color-border));border-radius:var(--pd-radius);background:var(--pd-color-panel);color:var(--pd-color-accent);font:inherit;font-size:13px;font-weight:600;line-height:1.2;cursor:pointer;outline:none;transition:background-color .15s ease,border-color .15s ease}
.pd-imp-mehr:hover{border-style:solid;border-color:var(--pd-color-accent);background:#e8f0fd;color:var(--pd-color-accent)}
.pd-imp-mehr:focus-visible{outline:2px solid var(--pd-color-accent);outline-offset:2px}
.pd-imp-mehr[aria-busy="true"]{cursor:progress;opacity:.7}
.pd-imp-mehr__auf{display:inline-flex;align-items:center;gap:8px}
.pd-imp-mehr__zahl{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:20px;padding:0 6px;border-radius:999px;background:var(--pd-color-accent);color:#fff;font-size:11px;font-weight:700}
.pd-imp-mehr svg{flex:none;transition:transform .2s ease}
.pd-imp-mehr[aria-expanded="true"] svg{transform:rotate(180deg)}
.pd-imp-mehr[aria-expanded="true"] .pd-imp-mehr__auf,.pd-imp-mehr:not([aria-expanded="true"]) .pd-imp-mehr__zu{display:none}
.pd-imp-liste-treffer{grid-column:1/-1;max-height:236px;overflow-y:auto;overscroll-behavior:contain;margin-top:2px;border:1px solid var(--pd-color-border);border-radius:var(--pd-radius);background:#fff}
.pd-imp-lzeile{display:flex;align-items:stretch;border-top:1px solid var(--pd-color-border)}
.pd-imp-lzeile:first-child{border-top:0}
.pd-imp-lwahl,.pd-imp-lwahl:focus{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;flex:1 1 auto;min-width:0;margin:0;padding:7px 10px;border:0;border-radius:0;background:transparent;color:var(--pd-color-text);font:inherit;font-size:12px;text-align:left;cursor:pointer;outline:none}
.pd-imp-lwahl:hover{background:#e8f0fd;color:var(--pd-color-text)}
.pd-imp-lwahl:hover :is(.pd-typ--generic,.pd-typ[class="pd-typ"]){background:#fff}
.pd-imp-lwahl:focus-visible{outline:2px solid var(--pd-color-accent);outline-offset:-2px}
.pd-imp-lwahl b{font-size:12.5px;font-weight:700;color:var(--pd-color-accent-dark)}
.pd-imp-lwahl__titel{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--pd-color-muted)}
.pd-imp-lwahl__titel .pd-typ{padding:0 5px;font-size:9.5px}
.pd-imp-lwahl__marke{font-size:11px;color:var(--pd-color-muted);white-space:nowrap}
.pd-imp-tab tr[aria-busy="true"] .pd-imp-liste-treffer{opacity:.6;cursor:progress}
.pd-imp-genauer{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin-top:2px;padding:9px 12px;border-radius:var(--pd-radius);background:var(--pd-color-panel);color:var(--pd-color-muted);font-size:12px;line-height:1.45}
.pd-imp-genauer svg{flex:none;width:18px;height:18px;color:var(--pd-color-accent)}
.pd-imp-genauer b{color:var(--pd-color-text);font-weight:650}
@media (max-width:640px){.pd-imp-lwahl__marke{display:none}}
/* Nummern-Popup aus einem Vorschlag: Uebernehmen im Fuss (nur dort, das
   Popup der Bestelllisten bleibt wie es ist) */
.pd-bl-dlg__fuss:has(.pd-imp-dlg-uebernehmen) .pd-bl-dlg__hinweis{flex:1 1 auto}
.pd-imp-dlg-uebernehmen{white-space:nowrap}
.pd-imp-zurueck,.pd-imp-zurueck:hover,.pd-imp-zurueck:focus{border:0;background:none;padding:0;margin:0;font:inherit;color:var(--pd-color-accent);font-weight:600;cursor:pointer}
.pd-imp-zurueck:hover{text-decoration:underline}
.pd-imp-zurueck:focus{outline:none}
.pd-imp-zurueck:focus-visible{outline:2px solid var(--pd-color-accent);outline-offset:2px}
/* Zeile waehrend der Aenderung, danach kurz gruen; Fehler unter dem Artikel */
.pd-imp-tab tr:focus{outline:none}
.pd-imp-tab tr:focus-visible{outline:2px solid var(--pd-color-accent);outline-offset:-2px}
.pd-imp-tab tr[aria-busy="true"] :is(.pd-imp-vorschlaege,.pd-imp-zurueck){opacity:.6;cursor:progress}
.pd-imp-zeilenfehler{display:block;margin-top:6px;color:#c02531;font-size:12px}
.pd-imp-tab tr.pd-imp-neu{animation:pd-imp-neu 1.4s ease-out}
@keyframes pd-imp-neu{from{background:#e9f7ef}to{background:transparent}}
@media (prefers-reduced-motion:reduce){.pd-imp-tab tr.pd-imp-neu{animation:none}}
@media (max-width:640px){.pd-imp-vorschlaege{grid-template-columns:minmax(0,1fr);max-width:none}.pd-bl-dlg__fuss:has(.pd-imp-dlg-uebernehmen){flex-wrap:wrap}}
@media (max-width:760px){
  /* Fuss einspaltig: Name und Haken, darunter die Knoepfe. */
  .pd-imp-fuss--liste{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
  .pd-imp-fuss:not(.pd-imp-fuss--liste){flex-direction:column;align-items:stretch}
  .pd-imp-fuss .pd-imp-zaehler{margin-right:0}
}
@media (max-width:640px){
  /* Positionen als Karten: Artikel oben, Menge und Status darunter. */
  .pd-imp-tab,.pd-imp-tab tbody{display:block;border:0}
  .pd-imp-tab thead{display:none}
  .pd-imp-tab tr{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px 10px;padding:12px 18px;border-top:1px solid #eef1f6}
  .pd-imp-tab tr:first-child{border-top:0}
  .pd-imp-tab td{display:block;padding:0;border:0}
  .pd-imp-tab td:first-child{grid-column:1/-1}
  .pd-imp-tab td:nth-child(2)::before{content:"Menge ";color:var(--pd-color-muted);font-size:12px}
  .pd-imp-tab td:last-child{text-align:right}
  .pd-imp-kopf,.pd-imp-fuss{padding-left:18px;padding-right:18px}
  .pd-imp-kopf{gap:10px}
  .pd-imp-kopfrechts{gap:10px}
  .pd-imp-kopf h3{font-size:1rem}
  .pd-imp-bearbeiten,.pd-imp-verwerfen{white-space:nowrap}
  .pd-imp-knoepfe{justify-content:stretch}
  .pd-imp-knoepfe .pd-adr-kn{flex:1 1 auto;text-align:center}
}
/* == 16i. Kundenportal: Bestellungen (v3, Fixrunde 2) ===========
   Vorgangs-Karten nach dem Muster der fuehrenden B2B-Shops
   (Kopfleisten-Karte je Bestellung statt Datentabelle): graue
   Kopfzeile mit beschrifteten Werten + Bestellnummer, weisser
   Korpus mit Status-Pill/Versand-Balken und Aktionen, Aufklapp-
   Bereich mit weisser Positions-Karte. Ghost-Chips mit
   expliziten :hover/:focus (Theme-Button-Lehre), globale
   .pd-sr-Utility. Unter 760px stapeln Kopf und Positions-Karte.
   ============================================================ */
.pd-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.pd-best-werkzeug{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:16px 0 4px}
.pd-best-werkzeug .pd-bl-suche{flex:1;min-width:230px;margin:0}
.pd-best-werkzeug select{min-height:42px;border:1px solid #d8e0ea;border-radius:8px;background:#fff;padding:8px 12px;font-size:.9rem;color:inherit;cursor:pointer}
.pd-best-werkzeug select:hover{border-color:var(--pd-color-accent)}
.pd-best-werkzeug select:focus{outline:2px solid var(--pd-color-accent);outline-offset:1px}
.pd-best-zeitform{margin:0;display:flex;gap:8px}
.pd-best-liste{display:grid;gap:14px;margin-top:12px}
.pd-best-karte{border:1px solid #e2e8f0;border-radius:11px;overflow:hidden;background:#fff;box-shadow:0 1px 3px rgba(21,45,76,.05)}
.pd-best-karte[hidden]{display:none}
.pd-best-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;flex-wrap:wrap;padding:12px 18px;background:#f7f9fc;border-bottom:1px solid #e8edf4}
.pd-best-kopfwerte{display:flex;gap:28px;flex-wrap:wrap;margin:0}
.pd-best-kopfwerte div{display:flex;flex-direction:column;gap:2px}
.pd-best-kopfwerte dt{font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;color:var(--pd-color-muted);font-weight:600}
.pd-best-kopfwerte dd{margin:0;font-size:.9rem;font-weight:600}
.pd-best-kopfnr{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}
.pd-best-nr{font-weight:700;font-size:.98rem}
.pd-best-neben{display:block;color:var(--pd-color-muted);font-size:.78rem}
.pd-best-preis{font-variant-numeric:tabular-nums;white-space:nowrap}
.pd-best-r{text-align:right}
.pd-best-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:.74rem;font-weight:600;white-space:nowrap}
.pd-best-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.pd-best-pill--eingang{background:#eef4fd;color:#2855b6}
.pd-best-pill--wartend{background:#fdf3df;color:#89530b}
.pd-best-pill--bearbeitung{background:#dbe7fb;color:#1d4ea8}
.pd-best-pill--fertig{background:#e7f7ee;color:#187348}
.pd-best-pill--storno{background:#fdeaea;color:#c02531}
.pd-best-body{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:14px 18px}
.pd-best-stand{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.pd-best-balken{display:flex;flex-direction:column;gap:5px;min-width:170px}
.pd-best-spur{display:block;height:6px;border-radius:99px;background:#e9eef5;overflow:hidden}
.pd-best-voll{display:block;height:100%;background:#2ecb72;border-radius:99px}
.pd-best-balken>span:last-child{font-size:.75rem;color:var(--pd-color-muted)}
.pd-best-bodyakt{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-left:auto}
.pd-best-klapp{display:inline-flex;align-items:center;gap:6px;border:1px solid #d8e0ea;background:#fff;color:var(--pd-color-accent);border-radius:8px;padding:7px 12px;font-size:.82rem;font-weight:600;cursor:pointer;white-space:nowrap}
.pd-best-klapp:hover{border-color:var(--pd-color-accent);background:#f2f6fb;color:var(--pd-color-accent)}
.pd-best-klapp:focus{outline:none;background:#fff;color:var(--pd-color-accent)}
.pd-best-klapp:focus-visible{outline:2px solid var(--pd-color-accent);outline-offset:2px}
.pd-best-pfeil{transition:transform .15s ease;line-height:1}
.pd-best-klapp[aria-expanded=true] .pd-best-pfeil{transform:rotate(180deg)}
.pd-best-aufklapp{padding:14px 18px 16px;background:#fbfcfe;border-top:1px solid #eef2f7}
.pd-best-aufklapp h4{margin:0 0 10px;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--pd-color-muted)}
.pd-best-postab{width:100%;border-collapse:separate;border-spacing:0;font-size:.86rem;background:#fff;border:1px solid #e6ebf3;border-radius:9px;overflow:hidden;margin-bottom:14px}
.pd-best-postab td{padding:10px 12px;border-top:1px solid #eef1f6;vertical-align:middle}
.pd-best-postab tr:first-child td{border-top:0}
.pd-best-kauf{display:flex;gap:6px;align-items:center;justify-content:flex-end;margin:0}
.pd-best-kauf .pd-bl-menge{width:64px;text-align:center}
.pd-best-kn{padding:7px 12px;font-size:.82rem;white-space:nowrap}
.pd-best-kn:focus{outline:none}
.pd-best-kn:focus-visible{outline:2px solid var(--pd-color-accent);outline-offset:2px}
.pd-best-aktionen{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.pd-best-still{display:inline-flex;align-items:center;border:1px solid #d8e0ea;border-radius:8px;background:#fff;color:var(--pd-color-accent);padding:7px 12px;font-size:.82rem;font-weight:600;text-decoration:none}
.pd-best-still:hover{border-color:var(--pd-color-accent);background:#f2f6fb;color:var(--pd-color-accent);text-decoration:none}
.pd-best-still:focus{outline:none;background:#fff;color:var(--pd-color-accent)}
.pd-best-still:focus-visible{outline:2px solid var(--pd-color-accent);outline-offset:2px}
.pd-best-blaettern{display:flex;justify-content:space-between;gap:12px;margin-top:14px}
@media (max-width:760px){
  .pd-best-kopf{flex-direction:column;align-items:stretch;gap:10px}
  .pd-best-kopfnr{flex-direction:row;justify-content:space-between;align-items:baseline;text-align:left;order:-1}
  .pd-best-kopfwerte{gap:16px}
  .pd-best-body{align-items:flex-start}
  .pd-best-bodyakt{margin-left:0}
  .pd-best-postab td{display:block;border:0;padding:3px 12px;text-align:left}
  .pd-best-postab tr{display:block;border-top:1px solid #e8edf4;padding:8px 0}
  .pd-best-postab tr:first-child{border-top:0}
  .pd-best-kauf{justify-content:flex-start;padding-top:4px}
}
.pd-best-postab .pd-bl-chips{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}
/* == 16j. Kundenportal: Seitengrund + Kopf (Kategorieseiten-Muster) ==
   Grund #f5f7fa auf body.pd-portal + GP-Wrapper-Kette (1:1 das
   body.pd-listing-Muster aus astra-shop.css; Literal statt var,
   die pdc-Tokens leben im :is(#pdc-shop,.pdc-karten)-Scope).
   GP-H1 in der pdc-heading-Typo der Kategorieseite.
   ============================================================ */
body.pd-portal{background:#f5f7fa}
body.pd-portal #page,body.pd-portal .site-content,body.pd-portal .content-area,body.pd-portal .site-main,body.pd-portal .inside-article,body.pd-portal .entry-content,body.pd-portal.one-container .container{background:#f5f7fa}
body.pd-portal .entry-header{margin-bottom:22px}
body.pd-portal h1.entry-title{font-size:30px;line-height:1.15;letter-spacing:-.7px;font-weight:700;margin:0;color:#152d4c}
@media (max-width:760px){
  body.pd-portal .entry-header{margin-bottom:18px}
  body.pd-portal h1.entry-title{font-size:27px}
}
/* == 16k. Kundenportal: Uebersicht (Dashboard nach v5) ==========
   Kennzahl-Kacheln als Links, Zweier-Layout (Offene Bestellungen
   links, Ansprechpartner + Bestelllisten rechts), Kompaktzeilen
   mit den 16i-Pill-/Preis-Klassen. Unter 1024px einspaltig.
   ============================================================ */
.pd-dash-kennzahlen{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:16px}
.pd-dash-kennzahl{display:block;background:#fff;border:1px solid #e2e8f0;border-radius:11px;box-shadow:0 1px 3px rgba(21,45,76,.05);padding:14px 16px;text-decoration:none;color:inherit}
.pd-dash-kennzahl:hover{border-color:var(--pd-color-accent);color:inherit}
.pd-dash-kennzahl b{display:block;font-size:26px;line-height:1.15;color:var(--pd-color-accent-dark)}
.pd-dash-kennzahl span{font-size:.8rem;color:var(--pd-color-muted)}
.pd-dash-zweier{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
.pd-dash-karte{margin:0}
.pd-dash-karte+.pd-dash-karte{margin-top:16px}
.pd-dash-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px}
.pd-dash-kopf h2{margin:0;font-size:1.05rem}
.pd-dash-mehr{font-size:.82rem;font-weight:600;color:var(--pd-color-accent);text-decoration:none;white-space:nowrap}
.pd-dash-mehr:hover{text-decoration:underline}
.pd-dash-best{display:flex;flex-direction:column}
.pd-dash-bestzeile{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:10px 2px;border-top:1px solid #eef1f6;text-decoration:none;color:inherit}
.pd-dash-bestzeile:first-child{border-top:0}
.pd-dash-bestzeile:hover{background:#fafcfe;color:inherit}
.pd-dash-bestlinks{display:flex;flex-direction:column;gap:2px;min-width:0}
.pd-dash-bestrechts{display:flex;align-items:center;gap:12px;flex:none}
.pd-dash-kontaktname{font-weight:700;font-size:.95rem;margin-top:2px}
.pd-dash-kontakttel{display:block;font-size:1.2rem;font-weight:700;color:var(--pd-color-accent-dark);text-decoration:none;margin:6px 0 2px}
.pd-dash-kontakttel:hover{color:var(--pd-color-accent)}
.pd-dash-kontaktzeit{font-size:.8rem;color:var(--pd-color-muted)}
.pd-dash-listen{display:flex;flex-direction:column}
.pd-dash-liste{display:flex;flex-direction:column;gap:2px;padding:9px 2px;border-top:1px solid #eef1f6;text-decoration:none;color:inherit}
.pd-dash-liste:first-child{border-top:0}
.pd-dash-liste:hover{background:#fafcfe;color:inherit}
.pd-dash-listenname{font-weight:600;font-size:.9rem}
@media (max-width:1023px){
  .pd-dash-kennzahlen{grid-template-columns:1fr}
  .pd-dash-zweier{grid-template-columns:1fr}
}
/* 16k-Ergaenzung (Fixrunde 1): v5-Seitenkopf der Uebersicht -
   ersetzt dort die GP-H1, Typo wie der 16j-Kopf. */
.pd-dash-seitenkopf{margin-bottom:20px}
.pd-dash-seitenkopf h1{font-size:30px;line-height:1.15;letter-spacing:-.7px;font-weight:700;margin:0 0 6px;color:#152d4c}
.pd-dash-seitenkopf p{margin:0;font-size:.85rem;color:var(--pd-color-muted)}
@media (max-width:760px){
  .pd-dash-seitenkopf h1{font-size:27px}
}
/* 16k-Ergaenzung (Fixrunde 2): Handlungsbedarf-Streifen der
   Uebersicht (v5 hinweis-streifen, Wartend-Farbwelt). */
.pd-dash-hinweis{background:#fdf3df;border:1px solid #f0dfb2;border-radius:9px;padding:11px 16px;font-size:.85rem;margin-bottom:16px;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.pd-dash-hinweis b{color:#89530b}
.pd-dash-hinweis span{color:var(--pd-color-muted)}
.pd-dash-hinweis a{margin-left:auto;font-weight:600;color:var(--pd-color-accent);text-decoration:none;white-space:nowrap}
.pd-dash-hinweis a:hover{text-decoration:underline}
/* == 16l. Kundenportal: Retouren-Anfrageformular ================
   Antrag-Muster nach v5: schlanke Formular-Karte, Felder in der
   Portal-Feld-Optik.
   ============================================================ */
.pd-ret-form{max-width:560px;margin-top:20px}
.pd-ret-feld{margin:0 0 14px}
.pd-ret-feld label{display:block;font-size:.82rem;font-weight:600;margin-bottom:5px}
.pd-ret-feld input,.pd-ret-feld select,.pd-ret-feld textarea{width:100%;border:1px solid #d8e0ea;border-radius:8px;background:#fff;padding:9px 12px;font-size:.9rem;color:inherit}
.pd-ret-feld textarea{resize:vertical}
.pd-ret-feld input:focus,.pd-ret-feld select:focus,.pd-ret-feld textarea:focus{outline:2px solid var(--pd-color-accent);outline-offset:1px}
.pd-ret-senden{margin:18px 0 0}
/* == 16m. Kundenportal: Selects (Kategorieseiten-Muster) ========
   Native Portal-Selects mit eigenem Chevron (14px vom Rand,
   appearance:none) und mehr Label-Luft; Custom-Select-Optik
   1:1 aus den pdc-select-Regeln der astra-shop.css (weiche
   Oeffnung .18s), Farbwerte als Literale der Portal-Palette.
   ============================================================ */
body.pd-portal .pd-best-werkzeug select,body.pd-portal .pd-ret-feld select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6b7e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:15px;padding-right:40px}
.pd-ret-feld{margin:0 0 24px}
.pd-ret-feld label{margin-bottom:8px}
select[data-pd-ersetzt]{display:none}
.pd-select{position:relative}
.pd-ret-feld .pd-select{width:100%}
.pd-select-knopf{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:9px 12px;font-size:.9rem;border:1px solid #d8e0ea;border-radius:8px;background:#fff;color:inherit;cursor:pointer}
.pd-ret-feld .pd-select-knopf{width:100%;justify-content:space-between}
.pd-select-knopf:hover{border-color:var(--pd-color-accent);background:#fff;color:inherit}
.pd-select-knopf:focus{outline:none;background:#fff;color:inherit}
.pd-select-knopf:focus-visible{outline:2px solid var(--pd-color-accent);outline-offset:2px}
.pd-select-pfeil{transform:rotate(90deg);transition:transform .18s ease;color:#5b6b7e}
.pd-select[data-offen] .pd-select-pfeil{transform:rotate(-90deg)}
.pd-select-liste{position:absolute;top:calc(100% + 6px);left:0;right:auto;min-width:100%;white-space:nowrap;margin:0;padding:5px;list-style:none;background:#fff;border:1px solid #d8e0ea;border-radius:8px;box-shadow:0 12px 28px rgba(15,27,58,.14);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:40}
.pd-ret-feld .pd-select-liste{white-space:normal}
.pd-select[data-offen] .pd-select-liste{opacity:1;visibility:visible;transform:translateY(0)}
.pd-select-liste li{margin:0}
.pd-select-liste li>button{display:block;width:100%;text-align:left;border:0;background:transparent;border-radius:5px;padding:9px 11px;font-size:.88rem;color:inherit;cursor:pointer}
.pd-select-liste li>button:hover{background:#f2f6fb;color:var(--pd-color-accent)}
.pd-select-liste li>button:focus{outline:none;background:#f2f6fb;color:var(--pd-color-accent)}
.pd-select-liste li[aria-selected=true]>button{color:var(--pd-color-accent);font-weight:600}
/* 16l-Ergaenzung (Fixrunde 2): Pflichtfeld-Markierung */
.pd-ret-feld.pd-feld-leer input,.pd-ret-feld.pd-feld-leer select,.pd-ret-feld.pd-feld-leer textarea,.pd-ret-feld.pd-feld-leer .pd-select-knopf{border-color:#b42318}
.pd-feld-hinweis{display:block;margin-top:6px;font-size:.8rem;color:#b42318}
/* 16l-Ergaenzung (Fixrunde 4): Positions-Mehrfachauswahl im
   Retouren-Formular - Multiselect-Dropdown in pd-select-Optik
   (Leon-Entscheid statt Chip-Wolke), Checkbox-Kaestchen je
   Position, Liste scrollt bei grossen Bestellungen. */
.pd-ret-pos{display:block;margin:2px 0 10px}
.pd-ret-pos[hidden]{display:none}
.pd-ret-pos .pd-select-knopf{width:100%;justify-content:space-between}
.pd-ret-pos .pd-select-liste{left:0;right:0;white-space:normal;max-height:260px;overflow-y:auto}
.pd-ret-pos .pd-select-liste li>button{display:flex;align-items:baseline;gap:8px}
.pd-ret-pos .pd-select-liste li>button::before{content:"";flex:none;width:14px;height:14px;border:1px solid #c6d2df;border-radius:4px;background:#fff;transform:translateY(2px)}
.pd-ret-pos .pd-select-liste li[aria-selected=true]>button::before{content:"\2713";color:#fff;background:var(--pd-color-accent);border-color:var(--pd-color-accent);font-size:10px;line-height:14px;text-align:center}
.pd-ret-pos .pd-select-liste li[aria-selected=true]>button{color:var(--pd-color-accent);font-weight:600}
.pd-ret-pos-name{color:var(--pd-color-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400}
.pd-ret-feld input[data-pd-versteckt]{display:none}
/* == 16n. Kundenportal: Rechnungen (Download-Archiv) ============
   Zeilenliste der E-Rechnungs-PDFs: Nummer, Datum/Groesse,
   Download-Knopf; mobil bricht die Zeile weich um.
   ============================================================ */
.pd-re-liste{margin-top:14px;display:flex;flex-direction:column}
.pd-re-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:12px 2px;border-top:1px solid #eef2f7}
.pd-re-zeile:first-child{border-top:0}
.pd-re-name{font-weight:600}
.pd-re-meta{color:var(--pd-color-muted);font-size:.82rem;margin-left:auto}
/* == 16o. Meldungen als Toast ===================================
   Woo-Meldungen werden per JS (inc/hinweis-toast.php, window.pdToast)
   zu Toasts unten rechts - Optik 1:1 des Kategorieseiten-Kauf-
   Toasts (pdc-toast, Literale, haengt am body). 0.8.67 (Leon 08.10.):
   auch Hinweise (blauer Punkt) und Fehler (rot, bleiben bis zum
   Schliessen). Der Halter ist ein Popover und liegt damit auch ueber
   offenen Dialogen; die UA-Regeln fuer [popover] werden hier
   zurueckgesetzt. Haengt er in einem offenen Dialog, steht er oben
   rechts statt unten, damit er die Knoepfe im Dialogfuss nicht
   verdeckt. Halter stapelt mehrere Meldungen.
   ============================================================ */
.pd-toast-halter{position:fixed;right:18px;bottom:18px;z-index:220;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.pd-toast{display:flex;align-items:center;gap:8px;padding:11px 16px;background:#1c2740;color:#fff;font-size:13px;border-radius:8px;box-shadow:0 12px 28px rgba(15,27,58,.28);opacity:0;transform:translateY(8px);transition:opacity .22s ease,transform .22s ease;max-width:min(92vw,440px)}
.pd-toast[data-sichtbar]{opacity:1;transform:translateY(0)}
.pd-toast-punkt{width:8px;height:8px;border-radius:50%;background:#16a34a;flex:none}
.pd-toast-halter[popover]{inset:auto 18px 18px auto;margin:0;padding:0;border:0;background:transparent;color:inherit;overflow:visible;width:auto;height:auto;max-width:none;max-height:none}
.pd-toast-text{flex:1 1 auto;min-width:0}
.pd-toast .pd-toast-aktion{color:#a6c4ff;font-weight:650;text-decoration:underline;text-underline-offset:3px;margin-left:8px;white-space:nowrap}
.pd-toast .pd-toast-aktion:hover,.pd-toast .pd-toast-aktion:focus{color:#fff}
.pd-toast--info .pd-toast-punkt{background:#6ea0ff}
/* 0.8.73 (Leon 09.10.): Verwerfen und Entfernen mit weissem Punkt,
   Rot nur fuer Fehler */
.pd-toast--weg .pd-toast-punkt{background:#fff}
.pd-toast--fehler{background:#c4262e;align-items:center;box-shadow:0 12px 28px rgba(120,16,22,.32)}
.pd-toast--fehler .pd-toast-icon{flex:none;display:block}
.pd-toast--fehler .pd-toast-text{line-height:1.45}
.pd-toast--fehler .pd-toast-aktion{color:#fff}
.pd-toast .pd-toast-zu,.pd-toast .pd-toast-zu:hover,.pd-toast .pd-toast-zu:focus{flex:none;display:grid;place-items:center;width:22px;height:22px;margin:-2px -6px -2px 4px;padding:0;border:0;border-radius:5px;background:transparent;color:inherit;cursor:pointer;line-height:1}
.pd-toast .pd-toast-zu:hover{background:rgba(255,255,255,.16)}
.pd-toast .pd-toast-zu:focus-visible{outline:2px solid #fff;outline-offset:1px}
@media (max-width:600px){.pd-toast-halter,.pd-toast-halter[popover]{left:12px;right:12px;bottom:12px;inset:auto 12px 12px 12px;align-items:stretch}.pd-toast{max-width:none}}
dialog > .pd-toast-halter[popover]{inset:16px 16px auto auto}
@media (max-width:600px){dialog > .pd-toast-halter[popover]{inset:12px 12px auto 12px}}
/* == 16p. Kundenportal: Adressbuch-Feinschliff ==================
   Hover-/Focus-Fix der Aktionsknoepfe (GP-Button-Falle: das
   Theme faerbt button:hover/:focus weiss), Badge und Schalter
   fuer den neutralen Lieferschein.
   ============================================================ */
.pd-adr-linkknopf:hover,.pd-adr-linkknopf:focus{background:transparent;color:var(--pd-color-accent)}
.pd-adr-linkknopf--rot:hover,.pd-adr-linkknopf--rot:focus{background:transparent;color:#b42318}
.pd-adr-neutral{display:inline-flex;align-items:center;gap:5px;margin-top:8px;font-size:.72rem;font-weight:600;color:#2f5e3f;background:#eef7f0;border:1px solid #cfe6d5;border-radius:999px;padding:2px 9px}
.pd-adr-schalter{display:flex;align-items:center;gap:9px;margin:6px 0 0;cursor:pointer}
.pd-adr-schalter input{width:16px;height:16px;accent-color:var(--pd-color-accent);margin:0}
/* 16p-Ergaenzung (Fixrunde 3): Checkbox-Fokusring nur fuer die
   Tastatur - Maus-Klick ohne Rahmen, :focus-visible behaelt ihn. */
.pd-adr-schalter input:focus{outline:none}
.pd-adr-schalter input:focus-visible{outline:2px solid var(--pd-color-accent);outline-offset:2px}
/* == 16q. Kundenportal: Mein Unternehmen (v3, Antrag-Modal) ====
   Anatomie nach v5 (adr-rechnung-Flex: Adressspalte links mit
   grauer Schloss-Zeile, Antrag-Knopf rechts; adr-block
   13.5px/1.6; Zugangsdaten 480px im 12px-Feldrhythmus).
   Der Aenderungsantrag liegt in einem nativen dialog-Modal in
   Karten-Optik mit abgedunkeltem Backdrop.
   ============================================================ */
.pd-unt-adresse{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:flex-start}
.pd-unt-links{min-width:0;max-width:560px}
.pd-unt-block{margin:0;font-size:13.5px;line-height:1.6}
.pd-unt-sperr{display:flex;align-items:flex-start;gap:6px;margin:8px 0 0;font-size:12.5px;color:#5b6b7e;max-width:480px}
.pd-unt-sperr svg{flex:none;margin-top:2px}
.pd-unt-dialog{border:1px solid #dce6f2;border-radius:12px;box-shadow:0 18px 50px rgba(21,45,76,.22);padding:0;width:min(560px,calc(100vw - 32px))}
.pd-unt-dialog::backdrop{background:rgba(21,45,76,.38)}
.pd-unt-dialog-kopf{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 18px;border-bottom:1px solid #dce6f2}
.pd-unt-dialog-kopf h2{margin:0;font-size:17px;color:#152d4c}
.pd-unt-dialog-x{border:0;background:none;cursor:pointer;font-size:22px;line-height:1;color:#5b6b7e;padding:2px 6px;border-radius:6px}
.pd-unt-dialog-x:hover{background:#f2f6fb;color:#152d4c}
.pd-unt-dialog-x:focus{outline:none;background:none;color:#5b6b7e}
.pd-unt-dialog-x:focus:hover{background:#f2f6fb;color:#152d4c}
.pd-unt-dialog-x:focus-visible{outline:2px solid var(--pd-color-accent);outline-offset:2px}
.pd-unt-dialog .pd-ret-form{padding:16px 18px;margin:0;max-width:none}
.pd-unt-dialog .pd-ret-feld{margin:0 0 12px}
.pd-unt-dialog .pd-ret-feld label{font-size:12.5px;color:#5b6b7e}
.pd-unt-dialog-senden{display:flex;gap:10px;margin:14px 0 0}
.pd-unt-verweis{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.pd-unt-verweis b{color:#152d4c}
.pd-unt-verweis .pd-bl-neben{font-size:12px}
.pd-unt-zugang{max-width:480px}
.pd-unt-fest{display:flex;flex-direction:column;gap:2px;margin:0 0 12px}
.pd-unt-fest span{font-size:12.5px;font-weight:600;color:#5b6b7e}
.pd-unt-fest b{font-weight:500;font-size:14px}
.pd-unt-zugang .pd-unt-sperr{margin:2px 0 18px}
.pd-unt-zugang .pd-ret-form{margin-top:0;max-width:none}
.pd-unt-zugang .pd-ret-feld{margin:0 0 12px}
.pd-unt-zugang .pd-ret-feld label{font-size:12.5px;color:#5b6b7e}
.pd-unt-zugang .pd-ret-senden{margin:14px 0 0}
/* == 16r. Kundenportal: Adressbuch-Karten v2 ===================
   Feinschliff der Adresskarten: Mono-Kennung mit Endkunden-Chip
   (Markup), Firma abgesetzt, Trennlinie vor den Aktionen mit
   Masken-Icons Stift/Stern/Papierkorb - rein per Selektor, das
   Loeschen-Icon greift ueber value=loeschen und degradiert
   schlimmstenfalls zu Text -, Hover-Anhebung, Standard-Karte
   mit Akzentkante links, Neutral-Chip gruen mit Punkt.
   ============================================================ */
.pd-adr-karte{transition:box-shadow .16s ease,transform .16s ease}
.pd-adr-karte:hover{box-shadow:0 6px 18px rgba(21,45,76,.10);transform:translateY(-1px)}
.pd-adr-karte--standard{padding-left:12px}
.pd-adr-ref{display:inline-block;font:600 11px/1.6 var(--pd-font,system-ui);color:#41546b;background:#eef3f9;border-radius:999px;padding:1px 8px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pd-adr-karte b{display:block;margin:2px 0 1px;font-size:14px;color:#152d4c}
.pd-adr-karte b+br{display:none}
.pd-adr-aktionen{border-top:1px solid var(--pd-color-border);padding-top:9px;margin-top:11px}
.pd-adr-aktionen a,.pd-adr-linkknopf{display:inline-flex;align-items:center;gap:5px}
.pd-adr-aktionen a::before,.pd-adr-linkknopf::before{content:"";width:12px;height:12px;background:currentColor;-webkit-mask:var(--pd-adr-ikon,none) center/contain no-repeat;mask:var(--pd-adr-ikon,none) center/contain no-repeat}
.pd-adr-aktionen a{--pd-adr-ikon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z'/%3E%3C/svg%3E")}
.pd-adr-linkknopf[value=standard]{--pd-adr-ikon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26'/%3E%3C/svg%3E")}
.pd-adr-linkknopf[value=loeschen]{--pd-adr-ikon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'/%3E%3Cpath d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E")}
.pd-adr-neutral::before{content:"";width:6px;height:6px;border-radius:50%;background:#3f7a52}
/* == 16s. Kundenportal: Lieferungen ============================
   Sendungs-Karten aus den DESADV-Versandmeldungen: Mono-Kopf
   Lieferschein + Datum, Versandart- und Bestellungs-Chips,
   Positionsliste mit Menge/Name/SKU, Fusszeile mit Stueckzahl
   und Lieferstand (Teillieferung bernsteinfarben), neutrale
   Sendungsreferenz-Zeile nur bei befuelltem Tracking-Feld.
   ============================================================ */
.pd-lief-karte{font-size:13.5px}
.pd-lief-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 8px}
.pd-lief-nr{font:600 12.5px ui-monospace,Consolas,monospace;letter-spacing:.02em;color:#152d4c}
.pd-lief-datum{font-size:12px;color:#5b6b7e}
.pd-lief-chips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 10px}
.pd-lief-chip{display:inline-block;font-size:11.5px;font-weight:600;color:#41546b;background:#eef3f9;border-radius:999px;padding:2px 9px}
.pd-lief-chip--link{text-decoration:none}
.pd-lief-chip--link:hover{background:#dfe9f5;color:#152d4c}
.pd-lief-positionen{list-style:none;margin:0;padding:10px 0;border-top:1px solid var(--pd-color-border);border-bottom:1px solid var(--pd-color-border);display:flex;flex-direction:column;gap:5px}
.pd-lief-positionen li{display:flex;align-items:baseline;gap:8px}
.pd-lief-menge{font:600 12.5px ui-monospace,Consolas,monospace;color:#152d4c;min-width:34px;text-align:right}
.pd-lief-name{flex:1;min-width:0}
.pd-lief-sku{font:11.5px ui-monospace,Consolas,monospace;color:#8a97a6}
.pd-lief-fuss{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:10px 0 0;font-size:12.5px;color:#41546b}
.pd-lief-stand--teil{color:#8a5a00;font-weight:600}
.pd-lief-tracking{margin:8px 0 0;font:12px ui-monospace,Consolas,monospace;color:#5b6b7e}
/* 16s-Ergaenzung (05.10.): Lieferschein-PDF-Chip auf der Sendungs-Karte */
.pd-lief-chip--pdf{background:#e8f1ff;color:#1b4e9b}
.pd-lief-chip--pdf:hover{background:#d7e7fd;color:#143a73}

/* ==== [Sprache] Umschalter DE|EN, Globus, Hinweisbalken, Fusszeile ====
 * 0.8.79 (14.10.2026), Referenz docs/sprache-referenz-v1.html, inc/sprache.php.
 * Topbar: rechts steht ein div (Telefon + Umschalter); das span-Verstecken
 * unter 900px (.pd-topbar-innen > span) trifft weiter nur den Slogan. */
.pd-topbar-rechts { display: flex; align-items: center; gap: 18px; }
.pd-sprache-wahl { display: inline-flex; align-items: center; gap: 7px; }
.pd-sprache-globus { width: 16px; height: 16px; color: #c9d6ec; }
.pd-sprache { display: inline-flex; align-items: center; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: 1px; font-size: 12px; font-weight: 600; letter-spacing: .04em; line-height: 1.4; }
.pd-sprache a, .pd-sprache span { display: inline-block; padding: 2px 9px; border-radius: 999px; color: #c9d6ec; text-decoration: none; }
.pd-sprache a:hover, .pd-sprache a:focus-visible { color: #ffffff; text-decoration: none; }
.pd-sprache a:focus-visible { outline: 2px solid #ffffff; outline-offset: 1px; }
.pd-sprache [aria-current] { background: #ffffff; color: var(--pd-color-accent-dark); }
.pd-sprachhinweis { background: var(--pd-color-accent-light); border-bottom: 1px solid #c4d2ea; color: var(--pd-color-text); font-size: 13.5px; }
.pd-sprachhinweis[hidden] { display: none; }
.pd-sprachhinweis-innen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; padding-top: 9px; padding-bottom: 9px; }
.pd-sprachhinweis-text { display: inline-flex; align-items: center; gap: 8px; }
.pd-sprachhinweis-text .pd-icon { width: 18px; height: 18px; color: var(--pd-color-accent); }
.pd-sprachhinweis-knoepfe { display: inline-flex; gap: 8px; }
.pd-sprachhinweis-knoepfe a { text-decoration: none; border-radius: var(--pd-radius); padding: 5px 12px; font-weight: 600; font-size: 13px; line-height: 1.4; }
.pd-sprachhinweis-ja { background: var(--pd-color-accent); color: #ffffff; }
.pd-sprachhinweis-ja:hover, .pd-sprachhinweis-ja:focus { background: var(--pd-color-accent-dark); color: #ffffff; }
.pd-sprachhinweis-nein { color: var(--pd-color-accent); border: 1px solid #c4d2ea; background: var(--pd-color-card); }
.pd-sprachhinweis-nein:hover, .pd-sprachhinweis-nein:focus { border-color: var(--pd-color-accent); color: var(--pd-color-accent); }
.pd-kb-unten .pd-sprache { border-color: rgba(127,127,127,.45); margin-left: auto; }
.pd-kb-unten .pd-sprache a, .pd-kb-unten .pd-sprache span { color: inherit; }
.pd-kb-unten .pd-sprache [aria-current] { background: var(--pd-color-accent); color: #ffffff; }
@media (max-width: 900px) {
  .pd-topbar-rechts { margin-left: auto; gap: 12px; }
}

/* == 16t. Kundenportal: Positionsstand und Verlauf der Vorgangs-Karte ==
   Statusmodell 15.10.2026, docs/verlauf-referenz-v1.html: Aufklapp
   zweispaltig (Positionen links, Verlauf rechts), Mengenhinweis bei
   Abweichung ORDRSP vs Shop, gestrichene und ergaenzte Positionen,
   Zeitleiste neuester Eintrag oben.
   ============================================================ */
.pd-best-zweier{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
.pd-best-aufklapp h4 .pd-best-l{font-weight:400;text-transform:none;letter-spacing:0;font-size:.72rem;color:var(--pd-color-muted)}
.pd-best-mengeneu{display:block;font-size:.72rem;color:#89530b;font-weight:400}
.pd-best-pos--weg td{color:var(--pd-color-muted)}
.pd-best-pos--weg .pd-bl-artikel,.pd-best-pos--weg .pd-best-neben{text-decoration:line-through}
.pd-best-tag{display:inline-block;font-size:.68rem;font-weight:600;border-radius:999px;padding:2px 8px;margin-left:6px;vertical-align:1px}
.pd-best-tag--weg{background:#fdeaea;color:#c02531}
.pd-best-tag--neu{background:#e7f7ee;color:#187348}
.pd-best-verlauf{list-style:none;margin:0;padding:0 0 0 18px;border-left:2px solid #e3e9f1}
.pd-best-verlauf li{position:relative;padding:0 0 16px 16px;font-size:.86rem}
.pd-best-verlauf li:last-child{padding-bottom:4px}
.pd-best-verlauf li::before{content:"";position:absolute;left:-25px;top:4px;width:10px;height:10px;border-radius:50%;background:#fff;border:2px solid #b9c5d6}
.pd-best-verlauf li.ist::before{border-color:var(--pd-color-accent);background:var(--pd-color-accent)}
.pd-best-verlauf li.ok::before{border-color:#187348;background:#187348}
.pd-best-verlauf .vk{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.pd-best-verlauf .vk b{font-weight:700}
.pd-best-verlauf .vk time{font-size:.76rem;color:var(--pd-color-muted)}
.pd-best-verlauf .vt{margin-top:3px;color:var(--pd-color-muted);font-size:.8rem;line-height:1.5}
.pd-best-verlauf .vt code{font-family:Consolas,Menlo,monospace;font-size:.78rem;background:#eef2f7;border-radius:4px;padding:1px 6px;color:var(--pd-color-text)}
.pd-best-verlauf .vt .pdf{display:inline-flex;align-items:center;gap:5px;border:1px solid #d8e0ea;border-radius:7px;padding:3px 9px;background:#fff;font-size:.76rem;font-weight:600;color:var(--pd-color-accent);margin-top:6px;text-decoration:none}
.pd-best-verlauf .vt .pdf:hover{border-color:var(--pd-color-accent);text-decoration:none}
.pd-best-verlauf table{border-collapse:collapse;margin-top:6px;font-size:.78rem}
.pd-best-verlauf td{padding:2px 14px 2px 0;color:var(--pd-color-text)}
.pd-best-verlauf td.alt{color:var(--pd-color-muted);text-decoration:line-through}
@media (max-width:760px){.pd-best-zweier{grid-template-columns:1fr}}

/* 16t-Ergaenzung (Fixrunde 1, 15.10.): Positionen volle Breite, Verlauf
   darunter als eigene Karte; Zweispalter erst ab 1360px. Mengen ohne
   Umbruch, keine senkrechten Zelllinien, kein Balken bei Storno. */
.pd-best-zweier{display:block}
.pd-best-zweier>div+div{margin-top:16px}
@media (min-width:1360px){.pd-best-zweier{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px}.pd-best-zweier>div+div{margin-top:0}}
.pd-best-postab td{border-left:0;border-right:0}
.pd-best-postab td.pd-best-r{white-space:nowrap}
.pd-best-postab .pd-bl-chips{max-width:420px}
.pd-best-verlaufbox{background:#fff;border:1px solid #e6ebf3;border-radius:9px;padding:14px 18px 8px}
.pd-best-verlaufbox .pd-best-verlauf{margin-left:4px}
.pd-best-verlauf li.ist .vk b{color:var(--pd-color-accent-dark)}

/* 16t-Ergaenzung (Fixrunde 2, 15.10.): Artikelspalte bekommt die Breite,
   die vier rechten Spalten schrumpfen auf Inhalt; Chips nebeneinander,
   hoechstens 4 plus "+N"-Chip. */
.pd-best-postab td.pd-best-r{width:1%}
.pd-best-postab .pd-bl-chips{max-width:none;display:flex;flex-wrap:wrap;gap:5px}
.pd-best-postab .pd-bl-chip--mehr{color:var(--pd-color-accent);text-decoration:none;font-weight:600}
.pd-best-postab .pd-bl-chip--mehr:hover{text-decoration:underline}

/* 16u. Positionsstatus (17.10.): Tabellenkopf, Spalte Versandt mit Pille,
   Einzelpreis als Nebenzeile, Nachbestellen als Fusszeile je Position,
   Artikelnummer sichtbar als Link, Handy mit Beschriftung je Zelle. */
.pd-best-postab th{padding:7px 12px;font-size:.66rem;letter-spacing:.05em;text-transform:uppercase;color:var(--pd-color-muted);font-weight:600;text-align:left;background:#f8fafc;border-bottom:1px solid #eef1f6;white-space:nowrap}
.pd-best-postab th.pd-best-r{text-align:right}
.pd-best-postab tr.pd-best-pos td{padding-bottom:4px}
.pd-best-postab tr.pd-best-posfuss td{border-top:0;padding:0 12px 10px}
.pd-best-postab tr.pd-best-posfuss+tr.pd-best-pos td{border-top:1px solid #eef1f6}
.pd-best-postab .pd-bl-artikel{color:var(--pd-color-accent);font-weight:600;text-decoration:none}
.pd-best-fuss{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pd-best-zumartikel{font-size:.8rem;font-weight:600;color:var(--pd-color-accent);text-decoration:none;white-space:nowrap}
.pd-best-zumartikel::after{content:"\203A";margin-left:3px;opacity:.7}
.pd-best-zumartikel:hover{text-decoration:underline}
.pd-best-postab .pd-bl-artikel:hover{text-decoration:underline}
.pd-best-einzel{display:block;font-size:.72rem;color:var(--pd-color-muted);font-weight:400;white-space:nowrap}
.pd-best-vpill{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;font-size:.74rem;font-weight:600;white-space:nowrap}
.pd-best-vpill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.pd-best-vpill--voll{background:#e7f7ee;color:#187348}
.pd-best-vpill--teil{background:#fdf3df;color:#89530b}
.pd-best-vpill--offen{background:#f1f4f8;color:#6b7684}
.pd-best-vpill--leer{background:transparent;color:var(--pd-color-muted);padding-left:0}
.pd-best-vpill--leer::before{display:none}
.pd-best-pill--teil{background:#fdf3df;color:#89530b}
@media (max-width:760px){
  .pd-best-postab thead{display:none}
  .pd-best-postab tr.pd-best-pos{padding:10px 0 0}
  .pd-best-postab tr.pd-best-pos td{padding:3px 12px}
  .pd-best-postab tr.pd-best-pos td.pd-best-r{display:inline-block;width:33%;padding:8px 12px 2px;text-align:left;white-space:normal;vertical-align:top}
  .pd-best-postab tr.pd-best-pos td.pd-best-r::before{content:attr(data-label);display:block;font-size:.64rem;letter-spacing:.05em;text-transform:uppercase;color:var(--pd-color-muted);margin-bottom:2px}
  .pd-best-postab tr.pd-best-pos td.pd-best-preis{text-align:right}
  .pd-best-postab tr.pd-best-posfuss{border-top:0;padding:0}
  .pd-best-postab tr.pd-best-posfuss td{padding:6px 12px 10px}
  .pd-best-fuss{flex-direction:column;align-items:stretch;gap:8px}
  .pd-best-zumartikel{align-self:flex-start}
  .pd-best-posfuss .pd-best-kauf{justify-content:stretch}
  .pd-best-posfuss .pd-best-kauf .pd-bl-menge{width:60px;height:38px}
  .pd-best-posfuss .pd-best-kauf .pd-best-kn{flex:1;text-align:center;padding:9px 12px}
}

/* Bestellungen-Leerfall (28.10.2026, Befund Leon): Abstand zur
   Kartenbeschreibung, Knopf mit eigenem Anlauf - .pd-portal-karte p
   setzt margin:0, darum zweigliedrig selektiert. */
.pd-portal-karte .pd-best-leer{margin-top:14px}
.pd-portal-karte .pd-best-leer .pd-best-leer-aktion{margin-top:14px}

/* 16v. Mobil-Durchgang (28.10.2026, iPhone-Befund Leon) ----------------
   Nur Darstellung unterhalb der Tablet-Breite. Einige Regeln tragen ein
   vorangestelltes body, weil main.css VOR astra-shop.css, astra-artikel.css
   und kasse.css geladen wird und gleich spezifische Regeln dort sonst
   gewinnen. */

/* [1] Portal-Uebersicht: Karten laufen nicht mehr rechts aus dem Bild.
   1fr hiess minmax(auto,1fr) - die nowrap-Statuspille gab die
   Mindestbreite vor (392px in 315px Inhalt). */
@media (max-width:1023px){
  .pd-dash-zweier{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  .pd-dash-kopf{flex-wrap:wrap}
  .pd-dash-bestzeile{flex-wrap:wrap;gap:6px 12px}
  .pd-dash-bestrechts{flex:1 1 100%;justify-content:space-between;min-width:0}
}

/* [2] Portal-Navigation (0.8.103, Canvas A und D): bis 979px ein
   Kachelraster mit drei Spalten und Kurznamen. Auf der Uebersicht offen,
   auf Unterseiten zugeklappt hinter der Zeile "Bereich: ..." (main.js
   setzt .ist-offen). Desktop unveraendert. */
.pd-portal-nav__kurz,.pd-portal-nav__bereich{display:none}
@media (max-width:979px){
  .pd-portal-nav__kopf{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:10px 14px}
  .pd-portal-nav__kopf b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px}
  .pd-portal-nav__kopf span{flex:none}
  .pd-portal-nav ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:10px}
  .pd-portal-nav:not(.ist-uebersicht):not(.ist-offen) ul{display:none}
  .pd-portal-nav li a{flex-direction:column;justify-content:center;gap:5px;min-height:60px;padding:7px 4px;border:1px solid var(--pd-color-border);border-radius:9px;font-size:12px;line-height:1.25;text-align:center}
  .pd-portal-nav li.is-active a{box-shadow:none;border-color:var(--pd-color-accent)}
  .pd-portal-nav li a svg{width:18px;height:18px}
  .pd-portal-nav__label{flex:none}
  .pd-portal-nav li a:has(.pd-portal-nav__kurz) .pd-portal-nav__label{display:none}
  .pd-portal-nav__kurz{display:block}
  .pd-portal-nav__bereich{display:flex;align-items:center;gap:10px;width:100%;min-height:54px;margin:0;padding:0 14px;border:0;background:var(--pd-color-card);color:var(--pd-color-text);font:inherit;text-align:left;cursor:pointer}
  .pd-portal-nav__bereich:hover,.pd-portal-nav__bereich:focus,.pd-portal-nav__bereich:active{background:var(--pd-color-card);color:var(--pd-color-text)}
  .pd-portal-nav__bereich:focus-visible{outline:2px solid var(--pd-color-accent);outline-offset:-2px}
  .pd-portal-nav.ist-offen .pd-portal-nav__bereich{border-bottom:1px solid var(--pd-color-border)}
  .pd-portal-nav__bereich-icon{width:34px;height:34px;border-radius:8px;background:var(--pd-color-accent-light);display:flex;align-items:center;justify-content:center;flex:none}
  .pd-portal-nav__bereich-icon svg{width:18px;height:18px;fill:none;stroke:var(--pd-color-accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .pd-portal-nav__bereich-text{flex:1;min-width:0;display:flex;flex-direction:column}
  .pd-portal-nav__bereich-text small{font-size:11px;color:var(--pd-color-muted)}
  .pd-portal-nav__bereich-text b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pd-portal-nav__bereich-alle{font-size:13px;font-weight:600;color:var(--pd-color-accent);white-space:nowrap}
  .pd-portal-nav__bereich-pfeil{width:16px;height:16px;flex:none;fill:none;stroke:var(--pd-color-accent);stroke-width:2.2;stroke-linecap:round;transition:transform .18s}
  .pd-portal-nav.ist-offen .pd-portal-nav__bereich-pfeil{transform:rotate(180deg)}
}

/* [9] Bestellungen: Suche, Status und Zeitraum je in voller Breite
   (nebeneinander schnitt "Zeitraum: 90 Tage" ab), Details-Knopf steht
   immer links unter dem Status. */
@media (max-width:600px){
  .pd-best-werkzeug .pd-bl-suche{flex:1 1 100%}
  .pd-best-werkzeug>.pd-select,.pd-best-zeitform{flex:1 1 100%;min-width:0}
  .pd-best-zeitform .pd-select{flex:1 1 auto;min-width:0}
  .pd-best-werkzeug .pd-select-knopf{width:100%;justify-content:space-between;gap:6px}
  .pd-best-werkzeug .pd-select-knopf span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pd-best-body{flex-direction:column;align-items:flex-start}
}

/* [3] Kategorie-Werkzeugleiste: Filter und Sortierung je halbe Zeile,
   die Ansichtsumschaltung entfaellt am Handy. Die Sortierung trug
   min-width:200px aus pd-select.css und lief links ueber den Filter. */
@media (max-width:480px){
  body :is(#pdc-shop,.pdc-karten) .pdc-results-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  body :is(#pdc-shop,.pdc-karten) .pdc-results-top .pdc-mobile-filter{justify-content:center}
  body :is(#pdc-shop,.pdc-karten) .pdc-results-controls{min-width:0}
  body :is(#pdc-shop,.pdc-karten) .pdc-results-controls .woocommerce-ordering{flex:1 1 auto;min-width:0}
  body :is(#pdc-shop,.pdc-karten) .pdc-results-controls .pdc-select{display:block;width:100%;min-width:0}
  body :is(#pdc-shop,.pdc-karten) .pdc-results-controls .pdc-select-knopf{width:100%;justify-content:space-between}
  body :is(#pdc-shop,.pdc-karten) .pdc-view{display:none}
}

/* [6] Produktkarte: Preis und Lager oben, Menge und Korb ueber die
   volle Breite, Details und Bestellliste nebeneinander darunter. */
@media (max-width:480px){
  body :is(#pdc-shop,.pdc-karten) .pdc-buy{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"preis lager" "order order" "detail liste";gap:10px}
  body :is(#pdc-shop,.pdc-karten) .pdc-buy>.pdc-price-head{grid-area:preis}
  body :is(#pdc-shop,.pdc-karten) .pdc-buy>.pdc-stock{grid-area:lager;justify-self:end;display:flex;align-items:center;gap:6px;text-align:right}
  body :is(#pdc-shop,.pdc-karten) .pdc-buy>.pdc-stock .pdc-stock-punkt{flex:none;margin:0}
  body :is(#pdc-shop,.pdc-karten) .pdc-buy>.pdc-line-total{grid-column:1/-1}
  body :is(#pdc-shop,.pdc-karten) .pdc-buy>.pdc-order{grid-area:order}
  body :is(#pdc-shop,.pdc-karten) .pdc-buy>.pdc-detail-btn{grid-area:detail}
  body :is(#pdc-shop,.pdc-karten) .pdc-buy>.pd-ble-knopf{grid-area:liste;margin-top:0}
  body :is(#pdc-shop,.pdc-karten) .pdc-buy>.pdc-detail-btn:last-child{grid-column:1/-1}
}

/* [7] Artikelseite, Karussells: eine Karte je Bildbreite ohne
   angeschnittene Nachbarkarte, Kartenhoehe nach Inhalt. */
@media (max-width:580px){
  body #pd3 .pdc-karten .pdc-products.pdc-grid{align-items:flex-start}
  body #pd3 .pdc-karten .pdc-products.pdc-grid>[data-pd-cross-karte]{flex-basis:100%}
  body #pd3 .pdc-karten .pdc-products.pdc-grid>[data-pd-cross-karte]>.pdc-product{height:auto}
}

/* [8] FAQ-Pfeile: iOS zeichnete das Dreieck als Emoji und zusaetzlich
   den eigenen Marker. FE0E erzwingt die Textform. */
body #pd3 .faq-item summary::-webkit-details-marker{display:none}
body #pd3 .faq-item summary::before{content:"\25B6\FE0E"}
body #pd3 .faq-item[open] summary::before{content:"\25BC\FE0E"}

/* [10] Kasse: Hinweis zur Bestellnummer unter dem Feld in voller
   Breite statt Woos 47%-Spalte. */
@media (max-width:600px){
  body :is(#pdc-shop,.pdc-karten).pdc-ks .form-row-last.pdc-ks-hilfe{width:100%;float:none}
}

/* [11] Warenkorb: unter 900px stehen die Vorschlaege direkt an den
   Artikeln, die Kurzliste ist dort aus - Ueberschrift und Pruefsatz
   standen dann ohne Liste da. Der Ausblenden-Schalter bleibt. */
@media (max-width:900px){
  body :is(#pdc-shop,.pdc-karten) .pdc-wk-passend-kurz :is(h3,.pdc-wk-passend-kurz-pruef){display:none}
}

/* 16w. Mobil-Kopf und Menue (0.8.103, 28.10.2026, Canvas A-C) ----------
   Bis 768px: Logo + Symbolzeile (Direkt, Konto, Warenkorb, Menue) und
   darunter die Suche; Topbar und GP-Navigation entfallen, ihr Inhalt
   steht im Menue (ganze Seite mit Kacheln, inc/header.php, main.js).
   Ab 769px unveraendert. */
.pd-kopf-mobil,.pd-mm{display:none}
@media (max-width:768px){
  .pd-topbar,#site-navigation,.main-navigation,.pd-kopf-seite{display:none!important}
  .pd-kopf-innen{flex-wrap:wrap;gap:10px;padding:10px 16px 12px}
  .pd-kopf-logo{flex:1 1 0;min-width:0}
  .pd-kopf-logo img{max-height:34px;max-width:100%;height:auto}
  .pd-kopf-suche{order:3;flex-basis:100%}
  .pd-kopf-suche input[type="search"]{height:44px;font-size:16px}
  .pd-kopf-suche button{width:48px}
  .pd-kopf-mobil{display:flex;flex:none;align-items:center;gap:2px;margin-left:auto}
  .pd-km-knopf{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:48px;height:48px;padding:0 4px;border:0;border-radius:10px;background:none;color:var(--pd-color-text);font:inherit;font-size:10.5px;font-weight:600;line-height:1;text-decoration:none;cursor:pointer}
  .pd-km-knopf:hover,.pd-km-knopf:focus,.pd-km-knopf:active,.pd-km-knopf:visited{background:none;color:var(--pd-color-text);text-decoration:none}
  .pd-km-knopf:focus-visible{outline:2px solid var(--pd-color-accent);outline-offset:1px}
  .pd-km-icon{width:21px;height:21px;color:var(--pd-color-accent)}
  .pd-km-menue .pd-km-icon{color:var(--pd-color-text)}
  .pd-km-direkt,.pd-km-direkt:hover,.pd-km-direkt:focus,.pd-km-direkt:visited{background:var(--pd-color-accent-light);color:var(--pd-color-accent)}
  .pd-km-korb{display:flex;flex-direction:column;align-items:center;gap:3px}
  .pd-km-korb .pd-km-label{font-weight:700;white-space:nowrap}
  .pd-km-zahl{position:absolute;top:2px;right:calc(50% - 21px);min-width:17px;height:17px;padding:0 4px;box-sizing:border-box;border-radius:9px;border:2px solid var(--pd-color-card);background:var(--pd-color-accent);color:#fff;font-size:10px;font-weight:700;line-height:13px;text-align:center}
  .pd-km-anmelden{display:flex;align-items:center;gap:7px;height:40px;padding:0 14px;border-radius:10px;background:var(--pd-color-accent);color:#fff;font-size:14px;font-weight:700;text-decoration:none;margin-right:4px}
  .pd-km-anmelden:hover,.pd-km-anmelden:focus,.pd-km-anmelden:visited{background:var(--pd-color-accent-dark);color:#fff;text-decoration:none}
  .pd-km-anmelden .pd-km-icon{width:17px;height:17px;color:#fff}

  .pd-mm:not([hidden]){display:flex;flex-direction:column;position:fixed;inset:0;z-index:100000;background:var(--pd-color-ground);overflow-y:auto;overscroll-behavior:contain}
  html.pd-mm-offen,html.pd-mm-offen body{overflow:hidden}
  .pd-mm-kopf{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px 10px 16px;background:var(--pd-color-card);border-bottom:1px solid var(--pd-color-border)}
  .pd-mm-logo img{max-height:34px;width:auto;display:block}
  .pd-mm-zu,.pd-mm-zu:hover,.pd-mm-zu:focus,.pd-mm-zu:active{display:flex;align-items:center;gap:8px;height:44px;padding:0 14px;border:1px solid var(--pd-color-border);border-radius:10px;background:var(--pd-color-card);color:var(--pd-color-text);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
  .pd-mm-zu:focus-visible{outline:2px solid var(--pd-color-accent);outline-offset:2px}
  .pd-mm-zu .pd-icon{width:16px;height:16px}
  .pd-mm-inhalt{flex:1;display:flex;flex-direction:column;gap:10px;padding:14px 16px 18px}
  .pd-mm-gruppe{margin:6px 2px 0;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--pd-color-muted)}
  .pd-mm-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .pd-mm-kachel{display:flex;flex-direction:column;gap:7px;min-height:104px;box-sizing:border-box;padding:12px;border:1px solid var(--pd-color-border);border-radius:12px;background:var(--pd-color-card);color:var(--pd-color-text);text-decoration:none}
  .pd-mm-kachel:hover,.pd-mm-kachel:focus,.pd-mm-kachel:visited{color:var(--pd-color-text);text-decoration:none}
  .pd-mm-kachel:hover{border-color:var(--pd-color-accent)}
  .pd-mm-kachel b{font-size:14.5px;line-height:1.25}
  .pd-mm-kachel-text{font-size:12px;line-height:1.35;color:var(--pd-color-muted)}
  .pd-mm-kachel-icon{width:36px;height:36px;border-radius:9px;background:var(--pd-color-accent-light);color:var(--pd-color-accent);display:flex;align-items:center;justify-content:center;flex:none}
  .pd-mm-kachel-icon .pd-icon{width:20px;height:20px}
  .pd-mm-finder,.pd-mm-finder:hover,.pd-mm-finder:focus,.pd-mm-finder:visited{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:var(--pd-color-accent-dark);color:#fff;text-decoration:none}
  .pd-mm-finder .pd-mm-kachel-icon{background:rgba(255,255,255,.12);color:#fff}
  .pd-mm-finder-text{flex:1;display:flex;flex-direction:column}
  .pd-mm-finder-text b{font-size:14.5px}
  .pd-mm-finder-text span{font-size:12px;color:#b9c5d8}
  .pd-mm-weiter{width:16px;height:16px;color:#b9c5d8}
  .pd-mm-fuss{display:flex;flex-direction:column;gap:12px;padding:12px 16px 22px;background:var(--pd-color-card);border-top:1px solid var(--pd-color-border)}
  .pd-mm-tel,.pd-mm-tel:hover,.pd-mm-tel:focus,.pd-mm-tel:visited{display:flex;align-items:center;gap:10px;color:var(--pd-color-text);text-decoration:none}
  .pd-mm-tel-icon{width:40px;height:40px;border-radius:50%;background:var(--pd-color-accent-dark);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
  .pd-mm-tel-icon .pd-icon{width:18px;height:18px}
  .pd-mm-tel small{display:block;font-size:12px;color:var(--pd-color-muted)}
  .pd-mm-tel b{display:block;font-size:15px;color:var(--pd-color-accent-dark)}
  .pd-mm-fusszeile{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .pd-mm-ab,.pd-mm-ab:hover,.pd-mm-ab:focus,.pd-mm-ab:visited{display:inline-flex;align-items:center;gap:7px;min-height:44px;font-size:14px;font-weight:600;color:var(--pd-color-muted);text-decoration:none}
  .pd-mm-ab .pd-icon{width:17px;height:17px}
  .pd-mm .pd-sprache{border-color:var(--pd-color-border);font-size:13px;padding:3px}
  .pd-mm .pd-sprache a,.pd-mm .pd-sprache span{padding:6px 14px;color:var(--pd-color-text)}
  .pd-mm .pd-sprache [aria-current]{background:var(--pd-color-accent-dark);color:#fff}
}

/* 16u Kaufhistorie aus der Bestellbibliothek (28.10.2026): Pille abgeschlossen (laut IFS fakturiert), einspaltiger Aufklapp */
.pd-best-pill--abgerechnet{background:#e3f3f1;color:#116b5e}
.pd-best-zweier--einspaltig{grid-template-columns:minmax(0,1fr)}