/* NewactiveDesignNA – Design nur fuer newactive (FRONTEND-012)
   Laedt nach newactive.css (gemeinsamer Kern) und ueberschreibt es.
   Neues Design fuer newactive nur hier; nie nach TE deployen.
   Regeln: Notion FRONTEND-012 / Entscheidungsseite Design je Shop. */

/* Kennung fuer Wirknachweis (unsichtbar): getComputedStyle(document.documentElement).getPropertyValue('--na-design-shop') */
:root{--na-design-shop:"na";}

/* ==========================================================================
   FRONTEND-011 Teil E0 – Grundlage Konto + Checkout (nur NA)
   Tokens 1:1 aus Prototyp V2 (FRONTEND-011/Dateien, Designwerte FRONTEND-008).
   Nur unter body.na-account / body.na-checkout (gesetzt in base.html.twig), damit der uebrige Shop unveraendert bleibt.
   Hinweis: newactive.css nutzt teils dieselben Namen (--na-radius 12px, --na-border rgba) global; hier gelten fuer
   Konto/Checkout die Zielwerte (Radius 10/14/999, neutrale Rahmen #dde3ea).
   ========================================================================== */
body.na-account, body.na-checkout{
  --na-primary:#0654b0; --na-primary-hover:#05479a; --na-primary-dark:#0b3a6e;
  --na-text:#2b3136; --na-muted:#5c6670; --na-faint:#8a949e;
  --na-bg:#ffffff; --na-surface:#f4f6f9; --na-surface-2:#eef2f7;
  --na-border:#dde3ea; --na-border-strong:#c4ccd6;
  --na-info-bg:#EAF2FB; --na-info-border:#0654B0; --na-info-text:#0B3A6E;
  --na-success:#007e4e; --na-success-bg:#e6f4ee;
  --na-warning:#974200; --na-warning-bg:#fbf0e6;
  --na-danger:#c20017; --na-danger-bg:#fbe9eb;
  --na-radius:10px; --na-radius-card:14px; --na-radius-pill:999px;
  --na-gutter:24px;
  --na-shadow:0 1px 2px rgba(16,38,66,.06),0 4px 16px rgba(16,38,66,.06);
  --na-h1:32px; --na-h2:24px; --na-h3:20px;
  --sw-border-color:var(--na-border);
}

/* Doppelter Seitenrand: newactive.css gibt .container UND .container-main je 1.5rem Innenabstand;
   auf Konto-/Checkout-Seiten liegt .container-main in .container (CW-FE011-07 E: Inhalt mobil ca. 240-280 px). */
body.na-account .content-main .container-main,
body.na-checkout .content-main .container-main{
  padding-left:0 !important;
  padding-right:0 !important;
}

/* Mobil: Seitenrand 16 px statt 24 px (Designwert FRONTEND-008) */
@media (max-width:640px){
  body.na-account, body.na-checkout{ --na-gutter:16px; --na-h1:26px; }
  body.na-account .content-main > .container,
  body.na-checkout .content-main > .container{
    padding-left:var(--na-gutter) !important;
    padding-right:var(--na-gutter) !important;
  }
}

/* Lange Platzhalter (z. B. IBAN „leer lassen = hinterlegte Bankverbindung“, CW-FE011-04 Mobil): sauber mit „…“ enden
   statt hart abgeschnitten; mobil kleinere Schrift, damit der Hinweis meist ganz passt */
body.na-account input::placeholder,
body.na-checkout input::placeholder{ text-overflow:ellipsis; }
@media (max-width:640px){
  body.na-account input::placeholder,
  body.na-checkout input::placeholder{ font-size:13px; }
}

/* ==========================================================================
   FRONTEND-011 Teil E0b – Kundennummer im Shop-Header (nur NA, ab Tablet; Markup layout/header/header.html.twig)
   ========================================================================== */
.na-header-customer{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 12px; border:1px solid #dde3ea; border-radius:999px;
  background:#EAF2FB; color:#0B3A6E; font-size:13px; line-height:1.4;
  text-decoration:none; white-space:nowrap;
}
.na-header-customer:hover, .na-header-customer:focus-visible{ border-color:#0654B0; color:#0654B0; text-decoration:none; }
.na-header-customer-label{ color:#5c6670; }
.na-header-customer-no{ font-weight:600; font-variant-numeric:tabular-nums; }

/* ==========================================================================
   FRONTEND-011 Teil E1 – Konto-Layout, Seitenleiste, Uebersicht (nur NA, nur body.na-account)
   Markup: NewactiveCustomerIntegration page/account/_page, sidebar, index (Spezifikation 3 / 3.1, Werte FRONTEND-008)
   ========================================================================== */
body.na-account .na-account-layout{
  display:grid; grid-template-columns:260px minmax(0,1fr); gap:32px; align-items:start;
  margin:24px 0 48px; color:var(--na-text);
}
body.na-account .na-account-aside{ position:sticky; top:96px; }
body.na-account .na-account-main{ min-width:0; }
body.na-account .na-account-main .account-welcome h1,
body.na-account .na-page-title{ font-size:var(--na-h1); font-weight:700; margin:0 0 4px; }

/* Seitenleiste */
body.na-account .na-account-side{ display:flex; flex-direction:column; gap:16px; }
body.na-account .na-side-card{
  background:var(--na-bg); border:1px solid var(--na-border); border-radius:var(--na-radius-card);
  padding:16px; box-shadow:var(--na-shadow);
}
body.na-account .na-side-company{ font-weight:600; font-size:16px; line-height:1.3; }
body.na-account .na-side-number{
  margin:12px 0; padding:10px 12px; border-radius:var(--na-radius);
  background:var(--na-info-bg); color:var(--na-info-text); display:flex; flex-direction:column;
}
body.na-account .na-side-number-label{ font-size:12px; color:var(--na-muted); }
body.na-account .na-side-number-value{ font-size:24px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.2; }
body.na-account .na-side-person{ font-size:14px; color:var(--na-muted); }
body.na-account .na-side-nav{
  display:flex; flex-direction:column; background:var(--na-bg); border:1px solid var(--na-border);
  border-radius:var(--na-radius-card); padding:6px; box-shadow:var(--na-shadow);
}
body.na-account .na-side-link{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--na-radius);
  color:var(--na-text); text-decoration:none; font-size:15px;
}
body.na-account .na-side-link:hover{ background:var(--na-surface); color:var(--na-primary); text-decoration:none; }
body.na-account .na-side-link.is-active{ background:var(--na-info-bg); color:var(--na-primary); font-weight:600; }
body.na-account .na-side-icon{ display:inline-flex; width:20px; justify-content:center; color:inherit; }
body.na-account .na-side-icon .icon{ color:inherit; }
body.na-account .na-side-label{ flex:1 1 auto; }
body.na-account .na-side-count{
  min-width:28px; padding:1px 8px; border-radius:var(--na-radius-pill); background:var(--na-surface-2);
  color:var(--na-muted); font-size:13px; text-align:center; font-variant-numeric:tabular-nums;
}
body.na-account .na-side-logout{ border-top:1px solid var(--na-border); border-radius:0 0 var(--na-radius) var(--na-radius); margin-top:4px; color:var(--na-muted); }
body.na-account .na-side-contact{
  background:var(--na-surface); border:1px solid var(--na-border); border-radius:var(--na-radius-card);
  padding:16px; font-size:14px; display:flex; flex-direction:column; gap:6px;
}
body.na-account .na-side-contact-title{ font-weight:600; }
body.na-account .na-side-contact-text{ color:var(--na-muted); }
body.na-account .na-side-contact-link{ color:var(--na-primary); text-decoration:none; display:inline-flex; gap:6px; align-items:center; }

/* Uebersicht */
body.na-account .na-page-head{ margin-bottom:24px; }
body.na-account .na-page-sub{ color:var(--na-muted); margin:0; font-size:16px; }
body.na-account .na-kpis{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:24px; }
body.na-account .na-kpi{
  display:flex; flex-direction:column; gap:4px; padding:16px; background:var(--na-bg);
  border:1px solid var(--na-border); border-radius:var(--na-radius-card); box-shadow:var(--na-shadow);
  color:var(--na-text); text-decoration:none;
}
body.na-account .na-kpi:hover{ border-color:var(--na-primary); text-decoration:none; color:var(--na-text); }
body.na-account .na-kpi-label{ font-size:13px; color:var(--na-muted); }
body.na-account .na-kpi-value{ font-size:28px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.2; }
body.na-account .na-kpi-value-text{ font-size:16px; line-height:1.35; }
body.na-account .na-kpi-meta{ font-size:13px; color:var(--na-faint); }
body.na-account .na-card{
  background:var(--na-bg); border:1px solid var(--na-border); border-radius:var(--na-radius-card);
  box-shadow:var(--na-shadow); padding:20px; margin-bottom:24px;
}
body.na-account .na-card-head{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:12px; }
body.na-account .na-card-title{ font-size:18px; font-weight:600; margin:0; }
body.na-account .na-card-link{ font-size:14px; color:var(--na-primary); }
body.na-account .na-empty{ color:var(--na-muted); margin:0; }
body.na-account .na-muted{ color:var(--na-muted); font-size:13px; }
body.na-account .na-table-wrap{ overflow-x:auto; }
body.na-account .na-table{ width:100%; border-collapse:collapse; font-size:15px; }
body.na-account .na-table th{ text-align:left; font-size:13px; font-weight:600; color:var(--na-muted); padding:8px 10px; border-bottom:1px solid var(--na-border); }
body.na-account .na-table td{ padding:10px; border-bottom:1px solid var(--na-border); vertical-align:middle; }
body.na-account .na-table tr:last-child td{ border-bottom:0; }
body.na-account .na-num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
body.na-account .na-pill{ display:inline-block; padding:2px 10px; border-radius:var(--na-radius-pill); font-size:13px; font-weight:600; white-space:nowrap; }
body.na-account .na-pill.s-open{ background:var(--na-info-bg); color:var(--na-info-text); }
body.na-account .na-pill.s-partial{ background:var(--na-warning-bg); color:var(--na-warning); }
body.na-account .na-pill.s-shipped{ background:var(--na-success-bg); color:var(--na-success); }
body.na-account .na-pill.s-cancel{ background:var(--na-surface-2); color:var(--na-muted); }
/* Shopware-Karten im Konto (Standardadressen, Newsletter): neutrale Rahmen, Radius 14 */
body.na-account .na-account-main .card{ border:1px solid var(--na-border); border-radius:var(--na-radius-card); box-shadow:var(--na-shadow); }
body.na-account .na-account-main .btn{ border-radius:var(--na-radius); }

/* Tablet: Seitenleiste als Pill-Navigation, kompakte Kundenkarte, Kontaktbox aus */
@media (max-width:900px){
  body.na-account .na-account-layout{ grid-template-columns:minmax(0,1fr); gap:16px; margin-top:16px; }
  body.na-account .na-account-aside{ position:static; min-width:0; }
  body.na-account .na-side-card{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; padding:10px 14px; box-shadow:none; }
  body.na-account .na-side-number{ margin:0; padding:2px 10px; flex-direction:row; gap:6px; align-items:baseline; border-radius:var(--na-radius-pill); }
  body.na-account .na-side-number-value{ font-size:15px; }
  body.na-account .na-side-person{ display:none; }
  body.na-account .na-side-nav{ flex-direction:row; overflow-x:auto; gap:6px; padding:0; border:0; box-shadow:none; background:transparent; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  body.na-account .na-side-nav::-webkit-scrollbar{ display:none; }
  body.na-account .na-side-link{ flex:0 0 auto; border:1px solid var(--na-border); border-radius:var(--na-radius-pill); background:var(--na-bg); padding:6px 14px; font-size:14px; white-space:nowrap; }
  body.na-account .na-side-link.is-active{ border-color:var(--na-primary); }
  body.na-account .na-side-logout{ margin-top:0; border-radius:var(--na-radius-pill); }
  body.na-account .na-side-contact{ display:none; }
  body.na-account .na-kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* Mobil: Tabellen als Zeilenkarten (Label aus data-label) */
@media (max-width:640px){
  body.na-account .na-kpis{ gap:10px; }
  body.na-account .na-kpi{ padding:12px; }
  body.na-account .na-kpi-value{ font-size:22px; }
  body.na-account .na-card{ padding:14px; }
  body.na-account .na-table.na-stack thead{ display:none; }
  body.na-account .na-table.na-stack tr{ display:block; border:1px solid var(--na-border); border-radius:var(--na-radius); padding:8px 12px; margin-bottom:10px; }
  body.na-account .na-table.na-stack td{ display:flex; justify-content:space-between; gap:12px; padding:4px 0; border:0; text-align:right; }
  body.na-account .na-table.na-stack td::before{ content:attr(data-label); color:var(--na-muted); font-size:13px; text-align:left; }
}

/* ==========================================================================
   FRONTEND-011 Teil E1b – Korrekturen aus CW-FE011-13 (nur NA)
   ========================================================================== */
/* B4: Shopware-Karten im Konto (Standardadressen, Newsletter) mit Innenabstand 24 px, Titel ohne alte blaue Linie */
body.na-account .na-account-main .account-overview-card .card-body,
body.na-account .na-account-main .account-overview-newsletter .card-body{ padding:24px; }
body.na-account .na-account-main .account-overview-card .card-title,
body.na-account .na-account-main .account-overview-newsletter .card-title{
  border-bottom:0; padding-bottom:0; margin-bottom:12px; font-size:18px; font-weight:600;
}
body.na-account .na-account-main .account-overview-card .card-actions{ margin-top:12px; }
body.na-account .na-overview .js-account-overview-addresses{ margin-bottom:8px; }
body.na-account .na-overview .js-account-overview-addresses > .card-col{ margin-bottom:24px; }
/* Prototyp: Lieferadresse vor Rechnungsadresse */
body.na-account .na-overview .overview-shipping-address{ order:1; }
body.na-account .na-overview .overview-billing-address{ order:2; }
body.na-account .na-order-link{ color:var(--na-primary); font-weight:600; text-decoration:none; }
body.na-account .na-order-link:hover{ text-decoration:underline; }
body.na-account .na-kpi-meta{ color:var(--na-primary); }
/* Prototyp: Kennzahlen ab <=1100 px 2x2 */
@media (max-width:1100px){
  body.na-account .na-kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
/* Seitenleiste sticky: newactive.css setzt ab 992 px html/body overflow-x:hidden, das verhindert position:sticky.
   clip schneidet genauso ab, erzeugt aber keinen Scroll-Container (nur Kontoseiten). */
html:has(body.na-account), body.na-account{ overflow-x:clip; }

/* ==========================================================================
   FRONTEND-011 Teil E1b – H1 aus CW-FE011-12: waagerechtes Scrollen bei 768 px (ganzer NA-Shop, Header)
   newactive.css (eingefroren) setzt .header-main * { overflow: visible !important } und hebt damit das Verstecken der
   Vorlesetexte (.visually-hidden) an Merkzettel/Warenkorb auf; diese ragen rechts aus dem Header. Hier fuer NA zurueck.
   TE hat dieselbe Kernregel – Korrektur dort separat in te-design.css (NA-ARCH-DESIGN-001).
   ========================================================================== */
.header-main .visually-hidden,
.header-main .visually-hidden-focusable:not(:focus):not(:focus-within){ overflow:hidden !important; }

/* ==========================================================================
   FRONTEND-011 Teil E1c – Korrekturen aus CW-FE011-13b (nur NA)
   ========================================================================== */
/* Schritt 4: Seitenleiste unter dem festen Header halten (Hoehe setzt na-sticky-header.js als --na-sticky-h) */
@media (min-width:901px){
  body.na-account .na-account-aside{ top:calc(var(--na-sticky-h, 171px) + 16px); }
}
/* Schritt 6: 768–991 px seitliches Scrollen im ganzen NA-Shop. newactive.css schneidet nur <=767 und >=992 px ab;
   die Luecke hier mit clip schliessen (kein Scroll-Container, sticky bleibt). Footer: langes Wort im Datenschutz-Haekchen umbrechen. */
@media (min-width:768px) and (max-width:991.98px){
  html, body{ overflow-x:clip; }
}
.na-footer-newsletter-privacy{ min-width:0; max-width:100%; }
.na-footer-newsletter-privacy label, .na-footer-newsletter-privacy a{ overflow-wrap:anywhere; hyphens:auto; }

/* ==========================================================================
   FRONTEND-011 Teil E2a – Adressen im Konto: Standardkarten, Tabelle mit Suche/Sortierung/Paging (nur body.na-account)
   Markup: NewactiveCustomerIntegration page/account/addressbook/index.html.twig (Spezifikation 3.5)
   ========================================================================== */
body.na-account .na-page-head-row{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; }
body.na-account .na-page-head-row .btn{ border-radius:var(--na-radius); white-space:nowrap; }
body.na-account .na-address-defaults{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-bottom:24px; }
body.na-account .na-address-card{ margin-bottom:0; display:flex; flex-direction:column; gap:8px; }
body.na-account .na-address-card .address{ font-size:15px; line-height:1.5; }
body.na-account .na-toolbar{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:12px; }
body.na-account .na-toolbar-search{ flex:1 1 280px; min-width:0; border-radius:var(--na-radius); border-color:var(--na-border-strong); }
body.na-account .na-toolbar-limit{ flex:0 0 auto; width:auto; border-radius:var(--na-radius); border-color:var(--na-border-strong); }
body.na-account .na-toolbar .btn{ border-radius:var(--na-radius); }
body.na-account .na-result-info{ margin:0 0 8px; }
body.na-account .na-sort{ color:var(--na-muted); text-decoration:none; }
body.na-account .na-sort:hover, body.na-account .na-sort.is-active{ color:var(--na-primary); }
body.na-account .na-address-table td{ vertical-align:top; }
body.na-account .na-address-table .na-pill{ margin:0 4px 4px 0; }
body.na-account .na-actions{ white-space:nowrap; text-align:right; }
body.na-account .na-menu-btn{ border:1px solid var(--na-border); border-radius:var(--na-radius); background:var(--na-bg); padding:2px 8px; margin-left:8px; }
body.na-account .na-address-list .dropdown-menu{ border-radius:var(--na-radius); border-color:var(--na-border); box-shadow:var(--na-shadow); }
body.na-account .na-pager{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:16px; }
body.na-account .na-pager-link{
  min-width:36px; padding:6px 10px; text-align:center; border:1px solid var(--na-border); border-radius:var(--na-radius);
  color:var(--na-text); text-decoration:none; background:var(--na-bg); font-variant-numeric:tabular-nums;
}
body.na-account .na-pager-link:hover{ border-color:var(--na-primary); color:var(--na-primary); text-decoration:none; }
body.na-account .na-pager-link.is-active{ background:var(--na-primary); border-color:var(--na-primary); color:#fff; }
body.na-account .na-pager-gap{ color:var(--na-faint); }
@media (max-width:900px){
  body.na-account .na-address-defaults{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:640px){
  body.na-account .na-toolbar-search{ flex-basis:100%; }
  body.na-account .na-actions{ text-align:right; }
  body.na-account .na-address-table.na-stack td.na-actions::before{ content:none; }
}

/* ==========================================================================
   FRONTEND-011 Teil E3 – Bestellungen (Liste, Detail) + einheitliche Formulare im Konto (B3, nur body.na-account)
   Markup: NewactiveCustomerIntegration page/account/order-history/index.html.twig (Spezifikation 3.2/3.3)
   ========================================================================== */
/* B3: Formularelemente, Buttons, Hinweise und Shopware-Karten im ganzen Konto mit Radius 10 / 14 und neutralen Rahmen */
body.na-account .na-account-main .form-control,
body.na-account .na-account-main .form-select,
body.na-account .na-account-main .input-group-text{ border-radius:var(--na-radius); border-color:var(--na-border-strong); }
body.na-account .na-account-main .input-group > .form-control:not(:last-child){ border-top-right-radius:0; border-bottom-right-radius:0; }
body.na-account .na-account-main .input-group > .btn:last-child{ border-top-left-radius:0; border-bottom-left-radius:0; }
body.na-account .na-account-main .btn{ border-radius:var(--na-radius); }
body.na-account .na-account-main .alert{ border-radius:var(--na-radius); }
body.na-account .na-account-main .dropdown-menu{ border-radius:var(--na-radius); border-color:var(--na-border); }
body.na-account .na-account-main .card,
body.na-account .na-account-main .order-table,
body.na-account .na-account-main .address-manager-select-address{ border-radius:var(--na-radius-card); border-color:var(--na-border); }
body.na-account .na-account-main .form-check-input{ border-color:var(--na-border-strong); }
body.na-account .na-account-main .form-check-input[type=checkbox]{ border-radius:4px; }
/* Bestellungen */
body.na-account .na-order-table .na-actions{ display:flex; gap:8px; align-items:center; justify-content:flex-end; flex-wrap:wrap; }
body.na-account .na-icon-link{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border:1px solid var(--na-border); border-radius:var(--na-radius); color:var(--na-primary); }
body.na-account .na-back{ display:inline-block; margin-bottom:8px; }
body.na-account .na-timeline{ display:flex; gap:0; list-style:none; padding:0; margin:0 0 24px; }
body.na-account .na-timeline-step{ flex:1 1 0; position:relative; padding-top:22px; font-size:13px; color:var(--na-faint); text-align:center; }
body.na-account .na-timeline-step::before{ content:""; position:absolute; top:6px; left:0; right:0; height:4px; background:var(--na-surface-2); }
body.na-account .na-timeline-step:first-child::before{ border-radius:var(--na-radius-pill) 0 0 var(--na-radius-pill); }
body.na-account .na-timeline-step:last-child::before{ border-radius:0 var(--na-radius-pill) var(--na-radius-pill) 0; }
body.na-account .na-timeline-step.is-done{ color:var(--na-text); }
body.na-account .na-timeline-step.is-done::before{ background:var(--na-primary); }
body.na-account .na-timeline-step.is-current{ font-weight:600; color:var(--na-primary); }
body.na-account .na-detail-grid{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:24px; align-items:start; }
body.na-account .na-detail-side .na-card{ margin-bottom:16px; }
body.na-account .na-sub-title{ font-size:14px; font-weight:600; color:var(--na-muted); margin:12px 0 4px; }
body.na-account .na-reorder-selected{ margin-top:12px; }
body.na-account .na-sums{ display:grid; grid-template-columns:1fr auto; gap:4px 16px; margin:16px 0 0 auto; max-width:320px; font-variant-numeric:tabular-nums; }
body.na-account .na-sums dt{ font-weight:400; color:var(--na-muted); }
body.na-account .na-sums dd{ margin:0; text-align:right; }
body.na-account .na-sums .na-sum-total{ font-weight:700; color:var(--na-text); border-top:1px solid var(--na-border); padding-top:6px; }
body.na-account .na-doc-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
body.na-account .na-doc{ display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; }
@media (max-width:1100px){
  body.na-account .na-detail-grid{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:640px){
  body.na-account .na-order-table .na-actions{ justify-content:flex-start; }
  body.na-account .na-table.na-stack td.na-actions::before{ content:none; }
  body.na-account .na-timeline-step{ font-size:12px; }
}

/* ==========================================================================
   FRONTEND-011 Teil E4 – Profil & Zugang, Meine Konditionen, Konto aktivieren (nur NA)
   ========================================================================== */
/* Alle Shopware-Karten im Kontoinhalt: Innenabstand 24 px, Titel ohne alte Linie (Erweiterung von E1b auf alle Seiten) */
body.na-account .na-account-main .card > .card-body{ padding:24px; }
body.na-account .na-account-main .card-title{ border-bottom:0; padding-bottom:0; margin-bottom:12px; font-size:18px; font-weight:600; }
body.na-account .na-account-main .account-welcome h1{ font-size:var(--na-h1); font-weight:700; }
body.na-account .na-account-main .account-welcome p{ color:var(--na-muted); }
body.na-account .na-account-main .card-actions{ margin-top:16px; }
/* Profil & Zugang */
body.na-account .account-profile-personal,
body.na-account .account-profile-credentials,
body.na-account .na-profile-newsletter{ margin-bottom:24px !important; }
body.na-account .account-profile-credentials .btn-link{ padding-left:0; }
/* Meine Konditionen: Zahlung | Belege nebeneinander */
body.na-account .na-cond-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-bottom:16px; }
body.na-account .na-cond-grid > .card{ margin-bottom:0 !important; }
body.na-account .account-na-conditions dl.row dt{ font-weight:400; color:var(--na-muted); }
body.na-account .account-na-conditions dl.row dd{ margin-bottom:10px; }
body.na-account .na-cond-note{ background:var(--na-info-bg); border:1px solid var(--na-info-border); color:var(--na-info-text); }
@media (max-width:1100px){
  body.na-account .na-cond-grid{ grid-template-columns:minmax(0,1fr); }
}
/* Konto aktivieren (Seite fuer noch nicht angemeldete Bestandskunden, CW-FE011-02: Karte ohne Rahmen/Flaeche) */
.na-activation{ max-width:640px; margin:32px auto 48px; }
.na-activation > .card{ border:1px solid #dde3ea; border-radius:14px; box-shadow:0 1px 2px rgba(16,38,66,.06),0 4px 16px rgba(16,38,66,.06); background:#fff; }
.na-activation > .card > .card-body{ padding:32px; }
.na-activation .card-title{ font-size:26px; font-weight:700; border-bottom:0; padding-bottom:0; margin-bottom:16px; }
.na-activation .na-activation-info{ background:#EAF2FB; border:1px solid #0654B0; color:#0B3A6E; border-radius:10px; }
.na-activation .form-control{ border-radius:10px; }
.na-activation .btn{ border-radius:10px; }
@media (max-width:640px){
  .na-activation{ margin:16px auto 32px; }
  .na-activation > .card > .card-body{ padding:20px; }
  .na-activation .card-title{ font-size:22px; }
}

/* ==========================================================================
   FRONTEND-011 Teil E5 – Warenkorb und Offcanvas-Warenkorb (nur NA)
   Markup: NewactiveCustomerIntegration page/checkout/cart/index, component/checkout/offcanvas-cart (Spezifikation 3.8)
   ========================================================================== */
body.na-checkout .checkout-product-table{ border:1px solid var(--na-border); border-radius:var(--na-radius-card); box-shadow:var(--na-shadow); }
body.na-checkout .checkout-aside-summary,
body.na-checkout .checkout-aside-container .card{ border-radius:var(--na-radius-card); }
body.na-checkout .checkout-aside-summary{ border:1px solid var(--na-border); padding:20px; background:var(--na-bg); }
body.na-checkout .form-control,
body.na-checkout .form-select,
body.na-checkout .btn{ border-radius:var(--na-radius); }
body.na-checkout .input-group > .form-control:not(:last-child){ border-top-right-radius:0; border-bottom-right-radius:0; }
body.na-checkout .input-group > .btn:last-child{ border-top-left-radius:0; border-bottom-left-radius:0; }
body.na-checkout .cart-add-product-container{
  border:1px solid var(--na-border); border-radius:var(--na-radius-card); padding:16px; background:var(--na-surface); margin-bottom:16px;
}
body.na-checkout .na-quick-add-label{ font-weight:600; }
body.na-checkout .cart-main-header{ font-size:var(--na-h1); font-weight:700; }
body.na-checkout .begin-checkout-btn{ border-radius:var(--na-radius); }
/* Fortschritt versandkostenfrei (Warenkorb und Offcanvas) */
body.na-checkout .na-free-shipping,
.offcanvas-cart .na-free-shipping{
  display:flex; flex-direction:column; gap:6px; padding:10px 12px; margin:0 0 12px;
  background:#EAF2FB; border:1px solid #c9dcf2; border-radius:10px; color:#0B3A6E; font-size:14px;
}
body.na-checkout .na-free-shipping.is-reached,
.offcanvas-cart .na-free-shipping.is-reached{ background:#e6f4ee; border-color:#b7dfcb; color:#007e4e; }
body.na-checkout .na-free-shipping-bar,
.offcanvas-cart .na-free-shipping-bar{ display:block; height:6px; border-radius:999px; background:#d6e4f5; overflow:hidden; }
body.na-checkout .na-free-shipping-bar > span,
.offcanvas-cart .na-free-shipping-bar > span{ display:block; height:100%; background:#0654B0; border-radius:999px; }
/* Offcanvas: gleiche Tokens wie Konto/Checkout */
.offcanvas-cart .btn{ border-radius:10px; }
.offcanvas-cart .form-control{ border-radius:10px; }

/* ==========================================================================
   FRONTEND-011 Teil E6 – Bestellung pruefen (Confirm) und Bestellabschluss (nur NA, nur body.na-checkout)
   Markup: NewactiveCustomerIntegration page/checkout/confirm/index, finish/index (Spezifikation 3.9/3.10)
   ========================================================================== */
body.na-checkout .na-step{ display:flex; align-items:center; gap:10px; font-size:var(--na-h3); font-weight:700; margin:28px 0 12px; }
body.na-checkout .na-step-row{ justify-content:space-between; }
body.na-checkout .na-step-row > span{ display:flex; align-items:center; gap:10px; }
body.na-checkout .na-step-no{
  display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:999px;
  background:var(--na-primary); color:#fff; font-size:14px; font-weight:700; flex:0 0 auto;
}
body.na-checkout .na-step-hint{ font-size:14px; font-weight:400; color:var(--na-muted); }
body.na-checkout .na-step-link{ font-size:14px; font-weight:400; color:var(--na-primary); }
body.na-checkout .checkout-card,
body.na-checkout .confirm-address .card,
body.na-checkout .confirm-payment-shipping .card,
body.na-checkout .checkout-main > .card{ border:1px solid var(--na-border); border-radius:var(--na-radius-card); box-shadow:var(--na-shadow); }
body.na-checkout .checkout-card > .card-body,
body.na-checkout .confirm-address .card > .card-body{ padding:20px; }
body.na-checkout .card-title{ border-bottom:0; padding-bottom:0; font-size:17px; font-weight:600; }
body.na-checkout .checkout-aside{ align-self:flex-start; }
body.na-checkout .checkout-aside-container{ position:sticky; top:calc(var(--na-sticky-h, 120px) + 16px); }
body.na-checkout .na-confirm-tos{ margin:12px 0; padding:12px; border:1px solid var(--na-border); border-radius:var(--na-radius); background:var(--na-surface); }
body.na-checkout .na-confirm-tos .form-check-input{ margin-top:.2rem; }
body.na-checkout .na-confirm-total{ display:none; }
body.na-checkout #confirmFormSubmit{ border-radius:var(--na-radius); }
/* Bestellabschluss */
body.na-checkout .na-finish-actions{ display:flex; flex-wrap:wrap; gap:10px; margin:12px 0 4px; }
body.na-checkout .finish-header{ font-size:var(--na-h1); font-weight:700; }
/* Mobil: feste Bestellleiste unten (Gesamt, AGB-Haken, Bestellbutton) */
@media (max-width:640px){
  body.na-checkout:has(#confirmOrderForm){ padding-bottom:180px; }
  body.na-checkout #confirmOrderForm{
    position:fixed; left:0; right:0; bottom:0; z-index:1030; margin:0;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:var(--na-bg);
    border-top:1px solid var(--na-border); box-shadow:0 -4px 16px rgba(16,38,66,.12);
  }
  body.na-checkout #confirmOrderForm .na-confirm-tos{ margin:0 0 8px; padding:6px 8px; font-size:13px; }
  body.na-checkout #confirmOrderForm .na-confirm-total{ display:flex; justify-content:space-between; margin:0 0 8px; font-size:15px; }
  body.na-checkout .checkout-aside-container{ position:static; }
}

/* ==========================================================================
   FRONTEND-011 Teil E7 – Korrekturen aus CW-FE011-14/-15 (nur NA)
   ========================================================================== */
/* B1: Zusammenfassung im Checkout laeuft mit (newactive.css: ab 992 px html/body overflow-x:hidden verhindert sticky) */
html:has(body.na-checkout), body.na-checkout{ overflow-x:clip; }
/* Konditionen: in den halbbreiten Karten Bezeichnung ueber dem Wert statt Umbruch mitten im Wort */
body.na-account .na-cond-grid dl.row > dt,
body.na-account .na-cond-grid dl.row > dd{ flex:0 0 100%; max-width:100%; width:100%; overflow-wrap:normal; word-break:normal; }
body.na-account .na-cond-grid dl.row > dt{ margin-bottom:2px; font-size:13px; }
body.na-account .na-cond-grid dl.row > dd{ margin-bottom:12px; }
/* Ecken: Produktbilder und Positionskarte in Warenkorb und Checkout */
body.na-checkout .line-item-img-container,
body.na-checkout .line-item-img,
body.na-checkout .line-item-img-link img{ border-radius:var(--na-radius); overflow:hidden; }
body.na-checkout .checkout-main .card,
body.na-checkout .confirm-product .card,
body.na-checkout .checkout-product-table{ border:1px solid var(--na-border); border-radius:var(--na-radius-card); overflow:hidden; }
body.na-checkout .checkout-main .card > .card-body{ border-radius:var(--na-radius-card); }

/* ==========================================================================
   FRONTEND-011 Teil E8 – Bestellseite und Abschlussseite zweispaltig (CW-FE011-15b), nur NA
   Shopware 6.7 setzt auf diesen Seiten Hauptteil 66 % und die Zusammenfassung versetzt darunter. Hier ab 992 px ein Raster:
   links Hauptteil + Angaben (checkout-additional), rechts Zusammenfassung ueber die ganze Hoehe, mitlaufend.
   ========================================================================== */
@media (min-width:992px){
  body.na-checkout.is-active-route-frontend-checkout-confirm-page .checkout .checkout-container,
  body.na-checkout.is-active-route-frontend-checkout-finish-page .checkout .checkout-container{
    display:grid; grid-template-columns:minmax(0,1fr) 380px; column-gap:32px; row-gap:0; align-items:start; margin-left:0; margin-right:0;
  }
  body.na-checkout.is-active-route-frontend-checkout-confirm-page .checkout .checkout-container > *,
  body.na-checkout.is-active-route-frontend-checkout-finish-page .checkout .checkout-container > *{
    grid-column:1; width:auto; max-width:none; margin-left:0; padding-left:0; padding-right:0;
  }
  body.na-checkout.is-active-route-frontend-checkout-confirm-page .checkout .checkout-container > .checkout-aside,
  body.na-checkout.is-active-route-frontend-checkout-finish-page .checkout .checkout-container > .checkout-aside{
    grid-column:2; grid-row:1 / span 20; align-self:stretch; width:auto; margin-left:0;
  }
  body.na-checkout.is-active-route-frontend-checkout-confirm-page .checkout-aside-container,
  body.na-checkout.is-active-route-frontend-checkout-finish-page .checkout-aside-container{
    position:sticky; top:calc(var(--na-sticky-h, 0px) + 16px);
  }
}
@media (min-width:992px) and (max-width:1199.98px){
  body.na-checkout.is-active-route-frontend-checkout-confirm-page .checkout .checkout-container,
  body.na-checkout.is-active-route-frontend-checkout-finish-page .checkout .checkout-container{ grid-template-columns:minmax(0,1fr) 320px; column-gap:24px; }
}
/* ==========================================================================
   FRONTEND-011 Teil E9 – Abschlussseite: Buttons unter der Bestellnummer zentriert (CW-FE011-15c), nur NA
   ========================================================================== */
body.na-checkout .na-finish-actions{ justify-content:center; }

/* ==========================================================================
   FRONTEND-011 Teil E10 – Befundliste 29.10.2026 (Pakete E10 bis E17, E2b), nur NA
   Markup: NewactiveCustomerIntegration (Konto, Warenkorb, Bestellseite, Abschluss, Kontomenue). Nummern = Befundliste.
   ========================================================================== */
body.na-account, body.na-checkout{ --na-label:#3d454d; }

/* --- E10 Grundregeln ----------------------------------------------------- */
/* Nr. 6: Hauptaktionen in Primaerfarbe, Nebenaktionen (btn-light) als erkennbarer Rahmen-Button */
body.na-account .content-main .btn-primary,
body.na-checkout .content-main .btn-primary,
body.na-checkout .address-manager-modal .btn-primary{ background:var(--na-primary); border-color:var(--na-primary); color:#fff; }
body.na-account .content-main .btn-primary:hover,
body.na-checkout .content-main .btn-primary:hover,
body.na-checkout .address-manager-modal .btn-primary:hover{ background:var(--na-primary-hover); border-color:var(--na-primary-hover); color:#fff; }
body.na-account .content-main .btn-light,
body.na-checkout .content-main .btn-light{ background:var(--na-bg); border:1px solid var(--na-primary); color:var(--na-primary); }
body.na-account .content-main .btn-light:hover,
body.na-checkout .content-main .btn-light:hover{ background:var(--na-info-bg); color:var(--na-primary); }
body.na-checkout .add-product-button{ border-color:var(--na-primary); color:var(--na-primary); background:var(--na-bg); }
body.na-checkout .add-product-button:hover{ background:var(--na-info-bg); color:var(--na-primary); }
/* Nr. 14: Symbol und Beschriftung in Buttons auf einer Mittellinie */
body.na-account .content-main .btn:not(.btn-link-inline):not(.btn-link),
body.na-checkout .content-main .btn:not(.btn-link-inline):not(.btn-link){ display:inline-flex; align-items:center; justify-content:center; gap:6px; vertical-align:middle; }
body.na-account .content-main .btn .icon,
body.na-checkout .content-main .btn .icon{ vertical-align:middle; }
body.na-account .content-main .btn .icon > svg,
body.na-checkout .content-main .btn .icon > svg{ top:0; }
/* Nr. 9: Bezeichnung/Wert: Hierarchie ueber Schriftstaerke, Bezeichnung nie kleiner als 14 px */
body.na-account .account-na-conditions dl.row dt,
body.na-account .na-cond-grid dl.row > dt{ font-size:14px; font-weight:600; color:var(--na-label); margin-bottom:2px; }
body.na-account .account-na-conditions dl.row dd,
body.na-account .na-cond-grid dl.row > dd{ font-size:15px; color:var(--na-text); margin-bottom:14px; }
body.na-account .na-kpi-label{ font-size:14px; font-weight:600; color:var(--na-label); }
body.na-account .na-table th{ font-size:14px; color:var(--na-label); }
body.na-account .na-sub-title,
body.na-checkout .na-sub-title{ font-size:14px; font-weight:600; color:var(--na-label); margin:0 0 4px; }
body.na-account .na-sums dt{ font-size:14px; font-weight:600; color:var(--na-label); }
body.na-account .na-sums dd{ font-size:15px; }
body.na-checkout .checkout-aside-summary-label{ font-size:14px; font-weight:600; color:var(--na-label); }
body.na-checkout .checkout-aside-summary-value{ font-size:15px; }
/* Nr. 23: Telefonnummern und zusammengehoerige Angaben ohne Umbruch */
body.na-account a[href^="tel:"],
body.na-checkout a[href^="tel:"],
body.na-account .na-nowrap,
body.na-checkout .na-nowrap{ white-space:nowrap; }
/* Nr. 31: Luft zum Kartenrand in Warenkorb, Bestellseite und Abschluss */
body.na-checkout .checkout-product-table > .card-body,
body.na-checkout .confirm-product .card > .card-body{ padding:4px 20px; }
body.na-checkout .cart-table-header{ margin:0; padding:14px 0 10px; border-bottom:1px solid var(--na-border); font-size:14px; font-weight:600; color:var(--na-label); }
body.na-checkout .line-item{ padding:14px 0; border-bottom:1px solid var(--na-border); }
body.na-checkout .line-item:last-child{ border-bottom:0; }
@media (max-width:640px){
  body.na-checkout .checkout-product-table > .card-body,
  body.na-checkout .confirm-product .card > .card-body{ padding:2px 14px; }
}
/* Ueberschriften nie mitten im Wort trennen (Nr. 21, 47) */
body.na-account .na-card-title,
body.na-checkout .card-title,
body.na-checkout .na-sub-title{ overflow-wrap:normal; word-break:normal; hyphens:manual; }

/* --- E11 Mein Konto: Inhalte ---------------------------------------------- */
/* Nr. 10, 17: Kacheln gleich aufgebaut, Text-Wert in eigener Zeilenhoehe, Links unten buendig */
body.na-account .na-kpi-value-text{ font-size:20px; line-height:1.2; min-height:33.6px; display:flex; align-items:center; }
body.na-account .na-kpi-meta{ margin-top:auto; }
@media (max-width:640px){
  body.na-account .na-kpi-value-text{ font-size:16px; min-height:26.4px; }
}
/* Nr. 12, 20: Kontaktkarte; am Seitenende nur bis 900 px (in der Seitenleiste dort ausgeblendet) */
body.na-account .na-side-contact.na-contact-main{ display:none; }
@media (max-width:900px){
  body.na-account .na-side-contact.na-contact-main{ display:flex; margin-top:8px; }
  body.na-account .na-side-contact.na-contact-main .na-side-contact-link{ min-height:44px; }
}
body.na-checkout .na-side-contact{
  background:var(--na-surface); border:1px solid var(--na-border); border-radius:var(--na-radius-card);
  padding:16px; font-size:14px; display:flex; flex-direction:column; gap:6px;
}
body.na-checkout .na-side-contact-title{ font-weight:600; }
body.na-checkout .na-side-contact-text{ color:var(--na-muted); }
body.na-checkout .na-side-contact-link{ color:var(--na-primary); text-decoration:none; display:inline-flex; gap:6px; align-items:center; }
/* Nr. 7, 8: Konditionen */
body.na-account .na-pay-default{ margin-bottom:4px; }
body.na-account .na-pay-more-title{ margin:10px 0 2px; }
body.na-account .na-cond-note-inline{ margin:4px 0 0; padding-top:12px; border-top:1px solid var(--na-border); font-size:14px; color:var(--na-muted); }

/* --- E12 Mein Konto: Layout ----------------------------------------------- */
/* Nr. 3: eine Aktion je Adresse (Stift), Menue vollstaendig sichtbar (Popper fixed im Markup) */
body.na-account .na-edit-btn{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; padding:0; margin:0; border:1px solid transparent; border-radius:var(--na-radius); background:transparent; color:var(--na-primary); }
body.na-account .na-edit-btn:hover,
body.na-account .na-edit-btn[aria-expanded="true"]{ background:var(--na-info-bg); border-color:var(--na-border); }
body.na-account .na-address-list .dropdown-menu{ min-width:240px; z-index:1060; }
/* Nr. 4: persoenliche Daten kompakt (ab 992 px: Kontotyp | Anrede | Vor- und Nachname, Firma halbe Breite) */
@media (min-width:992px){
  body.na-account #profilePersonalForm{ display:flex; flex-wrap:wrap; column-gap:16px; align-items:flex-end; }
  body.na-account #profilePersonalForm > *{ flex:1 1 100%; min-width:0; }
  body.na-account #profilePersonalForm > .row:has(select[name="accountType"]),
  body.na-account #profilePersonalForm > .row:has([name="salutationId"]){ flex:0 0 calc(25% - 12px); }
  body.na-account #profilePersonalForm > .row:has([name="firstName"]),
  body.na-account #profilePersonalForm > div:has([name="company"]),
  body.na-account #profilePersonalForm > div:has([name="vatIds[]"]){ flex:0 0 calc(50% - 8px); }
  body.na-account #profilePersonalForm > .row:has(select[name="accountType"]) > *,
  body.na-account #profilePersonalForm > .row:has([name="salutationId"]) > *,
  body.na-account #profilePersonalForm > .row:has([name="firstName"]) > *{ flex:1 1 0; width:auto; max-width:none; }
  body.na-account #profilePersonalForm > .account-profile-required-info{ flex:1 1 auto; order:90; margin:0; font-size:13px; color:var(--na-muted); }
  body.na-account #profilePersonalForm > .card-actions{ flex:0 0 auto; order:91; margin-top:0; }
}
/* Nr. 5: E-Mail-/Passwort-Formular innerhalb der Karte „Zugangsdaten“ */
body.na-account .account-profile-credentials .profile-content{ margin-top:12px; }
body.na-account .account-profile-credentials .profile-content .card{ border:0; border-top:1px solid var(--na-border); border-radius:0; box-shadow:none; margin:0; }
body.na-account .account-profile-credentials .profile-content .card > .card-body{ padding:16px 0 0; }
/* Nr. 46: gleichmaessige Abstaende in Konto-Formularen, Zurueck-Button immer mit Text */
body.na-account .na-account-main form .row.g-2{ --bs-gutter-y:0; }
body.na-account .na-account-main form .row.g-2 > *{ margin-top:0; }
body.na-account .na-account-main form .form-group{ margin-bottom:14px; }
body.na-account .account-address-back .d-none{ display:inline !important; }
/* Nr. 45: Bestelldetail einspaltig, Versand | Belege | Zahlung als Kartenreihe unter den Positionen */
body.na-account .na-detail-grid{ grid-template-columns:minmax(0,1fr); }
body.na-account .na-detail-cards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; align-items:stretch; }
body.na-account .na-detail-cards .na-card{ margin-bottom:0; }
body.na-account .na-ship-method{ margin:0 0 8px; font-size:15px; }
body.na-account .na-detail-cards p{ font-size:15px; }
body.na-account .na-title-status .na-pill{ position:relative; top:-4px; margin-left:8px; font-size:13px; vertical-align:middle; }
/* Nr. 15, 18, 19, 21: unter 1100 px Karten statt Tabellen (bisher erst unter 640 px), kompakte Bestell-/Adress-/Positionskarten */
@media (max-width:1100px){
  body.na-account .na-detail-cards{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  body.na-account .na-table-wrap{ overflow:visible; }
  body.na-account .na-table.na-stack,
  body.na-account .na-table.na-stack tbody{ display:block; }
  body.na-account .na-table.na-stack thead{ display:none; }
  body.na-account .na-table.na-stack tr{ display:block; border:1px solid var(--na-border); border-radius:var(--na-radius); padding:10px 14px; margin-bottom:10px; }
  body.na-account .na-table.na-stack td{ display:flex; justify-content:space-between; gap:12px; padding:4px 0; border:0; text-align:right; }
  body.na-account .na-table.na-stack td::before{ content:attr(data-label); color:var(--na-label); font-size:14px; font-weight:600; text-align:left; }
  /* Bestellkarte: Nr. + Status | Datum, Auftragsnr. + Summe | Aktionen */
  body.na-account .na-table.na-stack.na-order-table tr{ display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:12px; row-gap:2px; align-items:center; }
  body.na-account .na-table.na-stack.na-order-table td{ display:block; padding:0; text-align:left; }
  body.na-account .na-table.na-stack.na-order-table td::before{ content:none; }
  body.na-account .na-order-table td.na-c-nr{ grid-column:1; grid-row:1; white-space:nowrap; }
  body.na-account .na-order-table td.na-c-status{ grid-column:2; grid-row:1; text-align:right; }
  body.na-account .na-order-table td.na-c-date{ grid-column:1; grid-row:2; font-size:14px; color:var(--na-muted); }
  body.na-account .na-order-table td.na-c-ref{ grid-column:1; grid-row:3; font-size:14px; color:var(--na-muted); }
  body.na-account .na-table.na-stack.na-order-table td.na-c-ref::before{ content:attr(data-label); margin-right:6px; font-size:14px; font-weight:400; color:var(--na-muted); }
  body.na-account .na-order-table td.na-c-ship,
  body.na-account .na-order-table td.na-c-empty{ display:none; }
  body.na-account .na-order-table td.na-c-sum{ grid-column:2; grid-row:2 / span 2; align-self:end; text-align:right; font-weight:700; }
  body.na-account .na-order-table td.na-actions{ grid-column:1 / -1; grid-row:4; display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-start; margin-top:8px; }
  /* Adresskarte wie Briefkopf */
  body.na-account .na-table.na-stack.na-address-table tr{ display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:12px; row-gap:2px; }
  body.na-account .na-table.na-stack.na-address-table td{ display:block; padding:0; text-align:left; }
  body.na-account .na-table.na-stack.na-address-table td::before{ content:none; }
  body.na-account .na-address-table td.na-c-name{ grid-column:1; grid-row:1; }
  body.na-account .na-address-table td.na-actions{ grid-column:2; grid-row:1; text-align:right; }
  body.na-account .na-address-table td.na-c-street,
  body.na-account .na-address-table td.na-c-city,
  body.na-account .na-address-table td.na-c-no,
  body.na-account .na-address-table td.na-c-use{ grid-column:1 / -1; }
  body.na-account .na-address-table td.na-c-no{ font-size:14px; color:var(--na-muted); }
  body.na-account .na-table.na-stack.na-address-table td.na-c-no::before{ content:"Adressnr. "; display:inline; font-weight:400; font-size:14px; color:var(--na-muted); }
  body.na-account .na-address-table td.na-c-use{ margin-top:4px; }
  body.na-account .na-address-table td.na-c-empty{ display:none; }
  /* Position im Bestelldetail: Auswahl + Artikel | Menge × Einzelpreis + Summe */
  body.na-account .na-table.na-stack.na-pos-table tr{ display:grid; grid-template-columns:auto auto minmax(0,1fr) auto; column-gap:10px; row-gap:4px; align-items:baseline; }
  body.na-account .na-table.na-stack.na-pos-table td{ display:block; padding:0; text-align:left; }
  body.na-account .na-table.na-stack.na-pos-table td::before{ content:none; }
  body.na-account .na-pos-table td.na-c-sel{ grid-column:1; grid-row:1; }
  body.na-account .na-pos-table td.na-c-art{ grid-column:2 / -1; grid-row:1; }
  body.na-account .na-pos-table td.na-c-qty{ grid-column:2; grid-row:2; }
  body.na-account .na-pos-table td.na-c-qty::after{ content:" ×"; }
  body.na-account .na-pos-table td.na-c-unit{ grid-column:3; grid-row:2; }
  body.na-account .na-pos-table td.na-c-sum{ grid-column:4; grid-row:2; text-align:right; font-weight:700; }
  /* Filterzeile: Suche volle Breite, darunter Auswahlfelder nebeneinander */
  body.na-account .na-toolbar-search{ flex:1 1 100%; }
  body.na-account .na-toolbar .na-toolbar-limit{ flex:1 1 0; min-width:0; }
}
/* Nr. 16: Konto-Navigation bis 900 px als Kachelraster (alle Bereiche und Abmelden sichtbar) */
@media (max-width:900px){
  body.na-account .na-side-nav{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; overflow:visible; }
  body.na-account .na-side-link{ flex-direction:column; justify-content:center; text-align:center; gap:4px; min-height:64px; padding:8px 6px; border-radius:var(--na-radius); white-space:normal; font-size:13px; line-height:1.25; }
  body.na-account .na-side-label{ flex:0 0 auto; }
  body.na-account .na-side-count{ display:none; }
  body.na-account .na-side-logout{ border-top:1px solid var(--na-border); border-radius:var(--na-radius); }
}
@media (max-width:640px){
  body.na-account .na-side-nav{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  body.na-account .na-detail-cards{ grid-template-columns:minmax(0,1fr); }
  body.na-account .na-toolbar .btn{ flex:1 1 100%; }
}

/* --- E13 Konto-Menue im Header (alle Seiten, angemeldet) ------------------ */
.account-menu-dropdown:has(.na-hmenu){ min-width:260px; padding:8px; border:0; border-radius:14px; box-shadow:0 1px 2px rgba(16,38,66,.06),0 8px 24px rgba(16,38,66,.14); }
.account-menu .na-hmenu-head{ display:flex; flex-direction:column; gap:2px; padding:8px 10px 10px; margin:0 0 6px; border-bottom:1px solid #dde3ea; color:#2b3136; white-space:normal; }
.na-hmenu-company{ font-weight:600; font-size:15px; line-height:1.3; }
.na-hmenu-number{ font-size:13px; color:#5c6670; }
.na-hmenu{ display:flex; flex-direction:column; gap:2px; }
.na-hmenu-link{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; color:#2b3136; font-size:15px; text-decoration:none; }
.na-hmenu-link:hover,
.na-hmenu-link:focus-visible,
.na-hmenu-link.is-active{ background:#EAF2FB; color:#0654b0; text-decoration:none; }
.na-hmenu-link.is-active{ font-weight:600; }
.na-hmenu-icon{ display:inline-flex; width:20px; justify-content:center; color:inherit; }
.na-hmenu-icon .icon{ color:inherit; }
.na-hmenu-logout{ margin-top:4px; padding-top:10px; border-top:1px solid #dde3ea; border-radius:0 0 10px 10px; color:#5c6670; }

/* --- E14 Warenkorb und Offcanvas ------------------------------------------ */
/* Nr. 24: leerer Warenkorb */
body.na-checkout .na-cart-empty-page{ margin:24px 0 48px; }
body.na-checkout .na-cart-empty-grid{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:24px; align-items:start; }
body.na-checkout .na-cart-empty.card{ border:1px solid var(--na-border); border-radius:var(--na-radius-card); box-shadow:var(--na-shadow); }
body.na-checkout .na-cart-empty.card > .card-body{ padding:24px; }
body.na-checkout .na-cart-empty-head{ display:flex; align-items:center; gap:12px; margin-bottom:8px; }
body.na-checkout .na-cart-empty-icon{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:var(--na-radius-pill); background:var(--na-info-bg); color:var(--na-primary); }
body.na-checkout .na-cart-empty-icon .icon{ color:inherit; }
body.na-checkout .na-cart-empty-title{ font-size:20px; font-weight:700; margin:0; }
body.na-checkout .na-cart-empty-text{ color:var(--na-muted); margin:0 0 16px; }
body.na-checkout .na-cart-quick .cart-add-product-container,
body.na-checkout .na-cart-extras .cart-add-product-container{ width:100%; max-width:none; flex:none; margin:0 0 20px; padding:16px; }
body.na-checkout .na-cart-quick .input-group,
body.na-checkout .na-cart-extras .input-group{ max-width:520px; }
body.na-checkout .na-cart-extras{ margin-top:16px; }
body.na-checkout .na-cart-extras .cart-add-product-container{ margin-bottom:0; }
body.na-checkout .na-cart-empty-tiles{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
body.na-checkout .na-cart-tile{ display:flex; flex-direction:column; gap:4px; padding:14px; border:1px solid var(--na-border); border-radius:var(--na-radius); background:var(--na-bg); color:var(--na-text); text-decoration:none; }
body.na-checkout .na-cart-tile:hover{ border-color:var(--na-primary); color:var(--na-text); text-decoration:none; }
body.na-checkout .na-cart-tile-icon{ color:var(--na-primary); }
body.na-checkout .na-cart-tile-icon .icon{ color:inherit; }
body.na-checkout .na-cart-tile-title{ font-weight:600; }
body.na-checkout .na-cart-tile-text{ font-size:14px; color:var(--na-muted); }
@media (max-width:900px){
  body.na-checkout .na-cart-empty-grid{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:640px){
  body.na-checkout .na-cart-empty-tiles{ grid-template-columns:minmax(0,1fr); }
  body.na-checkout .na-cart-empty.card > .card-body{ padding:16px; }
}
/* Nr. 28, 30, 36: kompakte Positionen (Warenkorb, Bestellseite, Abschluss) */
body.na-checkout .line-item-info > .line-item-row{ display:flex; flex-wrap:nowrap; align-items:center; gap:14px; margin:0; }
body.na-checkout .line-item-info > .line-item-row > .line-item-info-img{ flex:0 0 56px; width:56px; max-width:none; padding:0; margin:0; }
body.na-checkout .line-item-info > .line-item-row > .line-item-details{ flex:1 1 auto; width:auto; max-width:none; min-width:0; padding:0; margin:0; }
body.na-checkout .line-item-img-container{ width:56px; margin:0; border-radius:0; }
body.na-checkout .line-item-img,
body.na-checkout .line-item-img-link img{ height:56px; padding:0; border:0; border-radius:0; background:#fff; }
body.na-checkout .line-item-details-container{ display:flex; flex-wrap:wrap; align-items:center; column-gap:12px; row-gap:2px; padding-left:0; }
body.na-checkout .line-item-details-container > .line-item-label,
body.na-checkout .line-item-details-container > a.line-item-label{ flex:1 1 100%; font-size:15px; font-weight:600; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
body.na-checkout .line-item-product-number{ margin:0; font-size:13px; color:var(--na-muted); }
body.na-checkout .na-delivery{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--na-muted); }
body.na-checkout .na-delivery-dot,
.offcanvas-cart .na-delivery-dot{ display:inline-block; width:8px; height:8px; border-radius:999px; background:#007e4e; flex:0 0 auto; }
body.na-checkout .na-delivery.is-soldout .na-delivery-dot,
.offcanvas-cart .na-delivery.is-soldout .na-delivery-dot{ background:#c20017; }
body.na-checkout .na-line-wishlist,
.offcanvas-cart .na-line-wishlist{ display:inline-flex; }
body.na-checkout .na-line-wishlist .product-wishlist{ margin:0; }
body.na-checkout .line-item-garan-label{ flex:1 1 100%; }
@media (min-width:768px){
  body.na-checkout .line-item.is-default > .line-item-row,
  body.na-checkout .line-item.is-order > .line-item-row,
  body.na-checkout .cart-header-row{ display:grid; grid-template-columns:minmax(0,1fr) 128px 104px 112px 40px; column-gap:12px; align-items:center; margin:0; }
  body.na-checkout .line-item.is-default > .line-item-row > *,
  body.na-checkout .line-item.is-order > .line-item-row > *,
  body.na-checkout .cart-header-row > *{ width:auto; max-width:none; flex:none; margin:0; padding:0; order:0; }
  body.na-checkout .line-item.is-default > .line-item-row > .line-item-info,
  body.na-checkout .line-item.is-order > .line-item-row > .line-item-info,
  body.na-checkout .cart-header-row > .cart-header-info{ grid-column:1; }
  body.na-checkout .line-item.is-default > .line-item-row > .line-item-quantity,
  body.na-checkout .line-item.is-order > .line-item-row > .line-item-quantity,
  body.na-checkout .cart-header-row > .cart-header-quantity{ grid-column:2; }
  body.na-checkout .line-item.is-default > .line-item-row > .line-item-unit-price,
  body.na-checkout .line-item.is-default > .line-item-row > .line-item-tax-price,
  body.na-checkout .line-item.is-order > .line-item-row > .line-item-unit-price,
  body.na-checkout .line-item.is-order > .line-item-row > .line-item-tax-price{ grid-column:3; display:flex; justify-content:flex-end; text-align:right; font-style:normal; font-size:14px; color:var(--na-muted); }
  body.na-checkout .cart-header-row > .cart-header-unit-price,
  body.na-checkout .cart-header-row > .cart-header-tax-price{ grid-column:3; text-align:right; }
  body.na-checkout .line-item.is-default > .line-item-row > .line-item-total-price,
  body.na-checkout .line-item.is-order > .line-item-row > .line-item-total-price{ grid-column:4; justify-content:flex-end; text-align:right; }
  body.na-checkout .cart-header-row > .cart-header-total-price{ grid-column:4; text-align:right; }
  body.na-checkout .line-item.is-default > .line-item-row > .line-item-remove{ grid-column:5; text-align:right; }
  body.na-checkout .line-item.is-default > .line-item-row > .line-item-children,
  body.na-checkout .line-item.is-order > .line-item-row > .line-item-children{ grid-column:1 / -1; }
}
@media (max-width:767.98px){
  body.na-checkout .line-item.is-default > .line-item-row,
  body.na-checkout .line-item.is-order > .line-item-row{ display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:10px; row-gap:8px; align-items:center; margin:0; }
  body.na-checkout .line-item.is-default > .line-item-row > *,
  body.na-checkout .line-item.is-order > .line-item-row > *{ width:auto; max-width:none; flex:none; margin:0; padding:0; order:0; }
  body.na-checkout .line-item.is-default > .line-item-row > .line-item-info,
  body.na-checkout .line-item.is-order > .line-item-row > .line-item-info{ grid-column:1; grid-row:1; }
  body.na-checkout .line-item.is-order > .line-item-row > .line-item-info{ grid-column:1 / -1; }
  body.na-checkout .line-item.is-default > .line-item-row > .line-item-remove{ grid-column:2; grid-row:1; align-self:start; }
  body.na-checkout .line-item.is-default > .line-item-row > .line-item-quantity,
  body.na-checkout .line-item.is-order > .line-item-row > .line-item-quantity{ grid-column:1; grid-row:2; }
  body.na-checkout .line-item.is-default > .line-item-row > .line-item-total-price,
  body.na-checkout .line-item.is-order > .line-item-row > .line-item-total-price{ grid-column:2; grid-row:2; justify-content:flex-end; text-align:right; }
  body.na-checkout .line-item.is-default > .line-item-row > .line-item-unit-price,
  body.na-checkout .line-item.is-default > .line-item-row > .line-item-tax-price,
  body.na-checkout .line-item.is-order > .line-item-row > .line-item-unit-price,
  body.na-checkout .line-item.is-order > .line-item-row > .line-item-tax-price{ grid-column:2; grid-row:3; display:flex; justify-content:flex-end; font-size:13px; }
  body.na-checkout .line-item.is-default > .line-item-row > .line-item-children,
  body.na-checkout .line-item.is-order > .line-item-row > .line-item-children{ grid-column:1 / -1; }
  body.na-checkout .line-item-quantity-label{ display:none; }
  body.na-checkout .line-item-quantity-row{ margin:0; }
  body.na-checkout .line-item-quantity-row > .line-item-quantity-select-wrapper{ width:auto; max-width:none; flex:none; padding:0; margin:0; }
  body.na-checkout .cart-table-header{ display:none; }
}
/* Offcanvas: Bilder ohne Rahmen */
.offcanvas-cart .line-item-img{ border:0; border-radius:0; padding:0; }
.offcanvas-cart .na-delivery{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:#5c6670; }
/* Nr. 33: Versandbedingung unter „Versandkosten“ */
body.na-checkout .na-ship-term{ margin:-2px 0 8px; font-size:13px; color:var(--na-muted); text-align:left; }
/* Nr. 33: mobil feste Leiste mit Gesamt und „Zur Kasse“ (nur Warenkorb) */
body.na-checkout .na-cart-bar{ display:none; }
@media (max-width:640px){
  body.na-checkout:has(.na-cart-bar){ padding-bottom:76px; }
  body.na-checkout .na-cart-bar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:1030; align-items:center; justify-content:space-between; gap:12px;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:var(--na-bg);
    border-top:1px solid var(--na-border); box-shadow:0 -4px 16px rgba(16,38,66,.12);
  }
  body.na-checkout .na-cart-bar-total{ display:flex; flex-direction:column; font-size:13px; line-height:1.2; color:var(--na-muted); }
  body.na-checkout .na-cart-bar-total strong{ font-size:17px; color:var(--na-text); }
  body.na-checkout .na-cart-bar-btn{ flex:0 0 auto; }
}

/* --- E15 Bestellseite verdichtet ------------------------------------------ */
body.na-checkout .na-step{ margin:24px 0 10px; }
body.na-checkout .na-confirm-section{ margin-bottom:0; }
body.na-checkout .na-sum-row{ display:grid; grid-template-columns:150px minmax(0,1fr) auto; column-gap:16px; align-items:baseline; padding:12px 0; border-top:1px solid var(--na-border); }
body.na-checkout .na-sum-list > .na-sum-row:first-child{ border-top:0; padding-top:0; }
body.na-checkout .na-sum-label{ font-size:14px; font-weight:600; color:var(--na-label); }
body.na-checkout .na-sum-value{ min-width:0; font-size:15px; color:var(--na-text); }
body.na-checkout .na-sum-action{ padding:0; border:0; font-size:14px; white-space:nowrap; color:var(--na-primary); text-decoration:none; }
body.na-checkout .na-sum-action:hover{ text-decoration:underline; }
body.na-checkout .na-sum-collapse > *{ padding:0 0 12px; }
body.na-checkout .na-sum-collapse .card{ border:0; box-shadow:none; }
body.na-checkout .na-sum-collapse .confirm-product .card,
body.na-checkout #naPositions .card{ border:1px solid var(--na-border); box-shadow:var(--na-shadow); margin-top:12px; }
body.na-checkout .na-sepa{ margin:0; }
body.na-checkout .na-sepa > p{ margin:12px 0 8px; }
@media (max-width:640px){
  body.na-checkout .na-sum-row{ grid-template-columns:minmax(0,1fr) auto; row-gap:2px; }
  body.na-checkout .na-sum-row > .na-sum-label{ grid-column:1; grid-row:1; }
  body.na-checkout .na-sum-row > .na-sum-action{ grid-column:2; grid-row:1; }
  body.na-checkout .na-sum-row > .na-sum-value{ grid-column:1 / -1; grid-row:2; }
}
/* Nr. 37: gleicher Abstand zwischen allen Karten in Schritt 4 */
body.na-checkout .checkout-additional .checkout-card{ margin-bottom:16px; }
body.na-checkout .na-option-doc{ margin-top:16px; padding-top:14px; border-top:1px solid var(--na-border); }
body.na-checkout .na-option-title{ font-weight:600; margin-bottom:4px; }
body.na-checkout .na-details{ margin:2px 0 8px; }
body.na-checkout .na-details > summary{ cursor:pointer; color:var(--na-primary); font-size:14px; }
body.na-checkout .na-options-summary{ color:var(--na-muted); font-size:14px; }
/* Nr. 34, 43: AGB-Haken innerhalb des Kastens, Widerrufshinweis im Kasten, Meldung bei fehlendem Haken */
body.na-checkout .na-confirm-tos.form-check{ padding:12px 12px 12px calc(12px + 1.5em); }
body.na-checkout .na-confirm-tos.form-check .form-check-input{ margin-left:-1.5em; }
body.na-checkout .na-confirm-tos:has(#tos.is-invalid){ border-color:var(--na-danger); background:var(--na-danger-bg); }
body.na-checkout .na-tos-feedback{ margin-top:6px; color:var(--na-danger); font-size:14px; font-weight:600; }
body.na-checkout .na-tos-note{ margin:8px 0 0; font-size:13px; color:var(--na-muted); }
@media (max-width:640px){
  body.na-checkout #confirmOrderForm .na-confirm-tos.form-check{ padding:6px 8px 6px calc(8px + 1.5em); }
  body.na-checkout #confirmOrderForm .na-tos-note{ display:none; }
}
/* E2b: Adressdialog mit Suche und Seiten */
body.na-checkout .na-am-search .form-control{ border-radius:var(--na-radius); }
body.na-checkout .na-am-pager{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:12px; }
body.na-checkout .na-am-pager .na-pager-link{ min-width:36px; padding:6px 10px; text-align:center; border:1px solid var(--na-border); border-radius:var(--na-radius); color:var(--na-text); text-decoration:none; background:var(--na-bg); }
body.na-checkout .na-am-pager .na-pager-link:hover{ border-color:var(--na-primary); color:var(--na-primary); }
body.na-checkout .na-am-pager .na-pager-link.is-active{ background:var(--na-primary); border-color:var(--na-primary); color:#fff; }

/* --- E16 Abschlussseite ---------------------------------------------------- */
body.na-checkout .na-finish-confirm > .card-body{ padding:24px 20px; text-align:center; }
body.na-checkout .na-finish-check{ display:flex; align-items:center; justify-content:center; width:48px; height:48px; margin:0 auto 10px; border-radius:var(--na-radius-pill); background:var(--na-success-bg); color:var(--na-success); }
body.na-checkout .na-finish-check .icon{ color:inherit; }
body.na-checkout .na-finish-confirm .finish-header{ font-size:26px; margin:0 0 8px; }
body.na-checkout .na-finish-confirm .finish-ordernumber{ margin:0 0 6px; font-size:16px; }
body.na-checkout .na-finish-confirm .finish-teaser{ margin:0 0 14px; color:var(--na-muted); }
body.na-checkout .na-finish-confirm .na-finish-actions{ margin:0; }
body.na-checkout .na-finish-details{ margin-top:24px; }
body.na-checkout .na-finish-cols{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
body.na-checkout .na-finish-col{ min-width:0; overflow-wrap:break-word; word-break:normal; hyphens:manual; }
body.na-checkout .na-finish-dl{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 12px; margin:0; }
body.na-checkout .na-finish-dl dt{ font-size:14px; font-weight:600; color:var(--na-label); }
body.na-checkout .na-finish-dl dd{ margin:0; font-size:15px; }
body.na-checkout .na-nowrap-soft{ hyphens:manual; word-break:keep-all; }
body.na-checkout.is-active-route-frontend-checkout-finish-page .checkout-product-table{ margin-top:24px; }
@media (max-width:1100px){
  body.na-checkout .na-finish-cols{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px){
  body.na-checkout .na-finish-cols{ grid-template-columns:minmax(0,1fr); gap:16px; }
  body.na-checkout .na-finish-confirm .finish-header{ font-size:22px; }
}

/* --- E17 Kopf auf Bestell- und Abschlussseite ------------------------------ */
body.na-checkout .header-minimal{ background:var(--na-bg); border-bottom:1px solid var(--na-border); margin-bottom:32px; }
body.na-checkout .header-minimal > .container{ max-width:var(--na-container, 1320px); padding-left:var(--bs-gutter-x, 1.5rem); padding-right:var(--bs-gutter-x, 1.5rem); }
body.na-checkout .header-minimal-row{ display:flex; flex-wrap:nowrap; align-items:center; gap:16px; min-height:72px; margin:0; padding:8px 0; }
body.na-checkout .header-minimal-row > *{ width:auto; max-width:none; flex:0 0 auto; padding:0; margin:0; }
body.na-checkout .header-minimal-logo img{ max-width:250px; max-height:50px; width:auto; height:auto; }
body.na-checkout .header-minimal-row > .na-hmin-contact{ flex:1 1 auto; display:flex; flex-direction:column; align-items:center; text-align:center; font-size:14px; line-height:1.3; }
body.na-checkout .na-hmin-q{ color:var(--na-muted); }
body.na-checkout .na-hmin-phone{ display:inline-flex; align-items:center; gap:6px; font-weight:600; color:var(--na-primary); text-decoration:none; }
body.na-checkout .na-hmin-phone .icon{ color:inherit; }
body.na-checkout .na-hmin-hours{ font-size:13px; color:var(--na-muted); }
body.na-checkout .header-minimal-row > .na-hmin-right{ display:flex; align-items:center; gap:16px; margin-left:auto; }
body.na-checkout .na-hmin-company{ max-width:220px; margin-right:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
body.na-checkout .na-hmin-back{ font-size:14px; color:var(--na-primary); white-space:nowrap; }
@media (max-width:767.98px){
  body.na-checkout .header-minimal{ margin-bottom:16px; }
  body.na-checkout .header-minimal-row{ min-height:56px; gap:10px; }
  body.na-checkout .header-minimal-logo img{ max-width:150px; max-height:36px; }
  body.na-checkout .na-hmin-q,
  body.na-checkout .na-hmin-hours,
  body.na-checkout .na-hmin-phone-text,
  body.na-checkout .na-hmin-customer{ display:none; }
  body.na-checkout .header-minimal-row > .na-hmin-contact{ flex:0 0 auto; margin-left:auto; }
  body.na-checkout .na-hmin-phone{ width:40px; height:40px; justify-content:center; border:1px solid var(--na-border); border-radius:var(--na-radius-pill); }
  body.na-checkout .header-minimal-row > .na-hmin-right{ margin-left:0; }
}

/* ==========================================================================
   FRONTEND-011 Teil E10b – Korrekturen aus CW-FE011-16 (Nr. 50 bis 58), nur NA
   ========================================================================== */
/* Nr. 56, 58 a: Positionskarte bis 1199 px (Tablet und mobil), Tabellenzeile erst ab 1200 px; Artikelname nie kuerzen */
body.na-checkout .line-item-details-container > .line-item-label,
body.na-checkout .line-item-details-container > a.line-item-label{ display:block; -webkit-line-clamp:unset; overflow:visible; }
body.na-checkout .line-item-details-container{ position:relative; padding-right:30px; }
body.na-checkout .na-line-wishlist{ position:absolute; top:-2px; right:0; }
body.na-checkout .na-delivery{ white-space:nowrap; }
@media (min-width:768px) and (max-width:1199.98px){
  body.na-checkout .line-item.is-default > .line-item-row,
  body.na-checkout .line-item.is-order > .line-item-row{ display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:12px; row-gap:8px; align-items:center; margin:0; }
  body.na-checkout .line-item.is-default > .line-item-row > .line-item-info,
  body.na-checkout .line-item.is-order > .line-item-row > .line-item-info{ grid-column:1; grid-row:1; }
  body.na-checkout .line-item.is-order > .line-item-row > .line-item-info{ grid-column:1 / -1; }
  body.na-checkout .line-item.is-default > .line-item-row > .line-item-remove{ grid-column:2; grid-row:1; align-self:start; }
  body.na-checkout .line-item.is-default > .line-item-row > .line-item-quantity,
  body.na-checkout .line-item.is-order > .line-item-row > .line-item-quantity{ grid-column:1; grid-row:2; }
  body.na-checkout .line-item.is-default > .line-item-row > .line-item-total-price,
  body.na-checkout .line-item.is-order > .line-item-row > .line-item-total-price{ grid-column:2; grid-row:2; justify-content:flex-end; text-align:right; }
  body.na-checkout .line-item.is-default > .line-item-row > .line-item-unit-price,
  body.na-checkout .line-item.is-default > .line-item-row > .line-item-tax-price,
  body.na-checkout .line-item.is-order > .line-item-row > .line-item-unit-price,
  body.na-checkout .line-item.is-order > .line-item-row > .line-item-tax-price{ grid-column:2; grid-row:3; display:flex; justify-content:flex-end; font-size:13px; }
  body.na-checkout .line-item-quantity-label{ display:none; }
  body.na-checkout .line-item-quantity-row{ margin:0; }
  body.na-checkout .line-item-quantity-row > .line-item-quantity-select-wrapper{ width:auto; max-width:none; flex:none; padding:0; margin:0; }
  body.na-checkout .cart-table-header{ display:none; }
}
@media (max-width:1199.98px){
  body.na-checkout .line-item.is-order .line-item-quantity-select-wrapper > .d-flex::after{ content:"\00a0×"; }
  body.na-checkout .line-item.is-order .line-item-quantity-select-wrapper > .d-flex{ justify-content:flex-start !important; }
}
/* Nr. 58 b, 51: Offcanvas kompakt wie der Warenkorb, Herz neben dem Titel */
.offcanvas-cart .line-item{ padding:12px 0; }
.offcanvas-cart .line-item.is-offcanvas > .line-item-row{ display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:10px; row-gap:8px; align-items:center; margin:0; }
.offcanvas-cart .line-item.is-offcanvas > .line-item-row > *{ width:auto; max-width:none; flex:none; margin:0; padding:0; order:0; }
.offcanvas-cart .line-item.is-offcanvas > .line-item-row > .line-item-info{ grid-column:1; grid-row:1; }
.offcanvas-cart .line-item.is-offcanvas > .line-item-row > .line-item-remove{ grid-column:2; grid-row:1; align-self:start; }
.offcanvas-cart .line-item.is-offcanvas > .line-item-row > .line-item-quantity{ grid-column:1; grid-row:2; }
.offcanvas-cart .line-item.is-offcanvas > .line-item-row > .line-item-total-price{ grid-column:2; grid-row:2; justify-content:flex-end; text-align:right; }
.offcanvas-cart .line-item.is-offcanvas > .line-item-row > .line-item-unit-price{ grid-column:2; grid-row:3; justify-content:flex-end; font-size:13px; }
.offcanvas-cart .line-item.is-offcanvas > .line-item-row > .line-item-tax-price{ display:none; }
.offcanvas-cart .line-item.is-offcanvas > .line-item-row > .line-item-children{ grid-column:1 / -1; }
.offcanvas-cart .line-item-info > .line-item-row{ display:flex; flex-wrap:nowrap; align-items:center; gap:12px; margin:0; }
.offcanvas-cart .line-item-info > .line-item-row > .line-item-info-img{ flex:0 0 56px; width:56px; max-width:none; padding:0; margin:0; }
.offcanvas-cart .line-item-info > .line-item-row > .line-item-details{ flex:1 1 auto; width:auto; max-width:none; min-width:0; padding:0; margin:0; }
.offcanvas-cart .line-item-img-container{ width:56px; margin:0; }
.offcanvas-cart .line-item-img{ height:56px; }
.offcanvas-cart .line-item-details-container{ display:flex; flex-wrap:wrap; align-items:center; column-gap:10px; row-gap:2px; position:relative; padding-left:0; padding-right:30px; }
.offcanvas-cart .line-item-details-container > .line-item-label{ flex:1 1 100%; font-size:14px; font-weight:600; }
.offcanvas-cart .line-item-product-number{ margin:0; font-size:13px; color:#5c6670; }
.offcanvas-cart .na-line-wishlist{ position:absolute; top:-2px; right:0; }
.offcanvas-cart .na-delivery{ white-space:nowrap; }
.offcanvas-cart .line-item-quantity-label{ display:none; }
.offcanvas-cart .line-item-quantity-row{ margin:0; }
.offcanvas-cart .line-item-quantity-row > .line-item-quantity-select-wrapper{ width:auto; max-width:none; flex:none; padding:0; margin:0; }
/* Nr. 52: Abstand unter der Zusammenfassung; Ueberschrift bleibt in der Karte (1024) */
body.na-checkout .checkout-aside-summary{ margin-bottom:24px; }
body.na-checkout .checkout-aside-summary-header{ font-size:20px; overflow-wrap:break-word; hyphens:auto; }
/* Nr. 53: Haken in aufklappbaren Bereichen mit Innenabstand (vorher hob .na-sum-collapse > * den Einzug auf) */
body.na-checkout .na-sum-collapse > .form-check{ padding-left:1.5em; }
body.na-checkout .na-options-body{ padding:4px 0 4px; }
/* Nr. 58 d: Schalter zeigen offen „Ausblenden“ */
body.na-checkout .na-sum-action .na-when-open{ display:none; }
body.na-checkout .na-sum-action:not(.collapsed) .na-when-open{ display:inline; }
body.na-checkout .na-sum-action:not(.collapsed) .na-when-closed{ display:none; }
/* Nr. 57: Abstand Kopf zur Ueberschrift ca. 24 bis 32 px (Theme setzt .checkout 70 px), Kopf bei Tablet einzeilig */
body.na-checkout.is-active-route-frontend-checkout-confirm-page .checkout,
body.na-checkout.is-active-route-frontend-checkout-finish-page .checkout{ padding-top:0; }
body.na-checkout .header-minimal{ margin-bottom:24px; }
body.na-checkout .na-phone-ico{ display:block; flex:0 0 auto; }
body.na-checkout .na-hmin-back{ flex:0 0 auto; white-space:nowrap; }
body.na-checkout .confirm-main-header{ display:inline; margin:0; }
body.na-checkout .confirm-main-header-item-counter{ display:inline !important; margin:0 0 0 6px !important; font-size:18px !important; }
body.na-checkout .confirm-main-header-item-counter::after{ content:""; display:block; height:16px; }
@media (max-width:1199.98px){
  body.na-checkout .na-hmin-hours{ display:none; }
  body.na-checkout .header-minimal-row > .na-hmin-contact{ flex-direction:row; justify-content:center; gap:6px; white-space:nowrap; }
}
@media (max-width:900px){
  body.na-checkout .na-hmin-customer,
  body.na-checkout .na-hmin-q{ display:none; }
}
@media (max-width:480px){
  body.na-checkout .na-hmin-long{ display:none; }
  body.na-checkout .header-minimal-logo img{ max-width:120px; }
}
body.na-account .na-side-contact-link .na-phone-ico{ flex:0 0 auto; }
body.na-checkout .na-side-contact-link .na-phone-ico{ display:inline-block; }
/* Nr. 50: Profil nur Anrede, Vor- und Nachname (Kontotyp, Firma, USt-IdNr. ausgeblendet, Werte werden unveraendert mitgesendet;
   bei leerer Firma bleibt das Feld sichtbar, damit die Pflichtpruefung fuer Gewerblich nicht unsichtbar blockiert) */
body.na-account #profilePersonalForm:has(input[name="company"]:not([value=""])) > .row:has(select[name="accountType"]),
body.na-account #profilePersonalForm > div:has(input[name="company"]:not([value=""])),
body.na-account #profilePersonalForm:has(input[name="company"]:not([value=""])) > div:has([name="vatIds[]"]){ display:none; }
/* Nr. 58 g: Neue Adresse / Adresse bearbeiten: Firma direkt nach dem Kontotyp */
body.na-account .na-account-main form:has(select[name="address[accountType]"]){ display:flex; flex-direction:column; }
body.na-account .na-account-main form:has(select[name="address[accountType]"]) > *{ order:10; }
body.na-account .na-account-main form:has(select[name="address[accountType]"]) > .row:has(select[name="address[accountType]"]){ order:1; }
body.na-account .na-account-main form:has(select[name="address[accountType]"]) > div:has([name="address[company]"]){ order:2; }
/* Nr. 58 c: Bestellungen mobil ohne Lieferadresse, leere Zellen aus; Auswahlfelder nicht abgeschnitten */
@media (max-width:1100px){
  body.na-account .na-table.na-stack.na-order-table td.na-c-ship,
  body.na-account .na-table.na-stack.na-order-table td.na-c-empty,
  body.na-account .na-table.na-stack.na-address-table td.na-c-empty{ display:none; }
}
@media (max-width:480px){
  body.na-account .na-toolbar .na-toolbar-limit{ flex:1 1 100%; }
}

/* ==========================================================================
   FRONTEND-011 Teil E10c – Korrekturen aus CW-FE011-16b und Befunde Nr. 46, 60 bis 63, nur NA
   ========================================================================== */
/* Nr. 57 (1024): Kopf passt auch zwischen 901 und 1199 px (Firma/Kundennr. erst ab 1200 px) */
@media (max-width:1199.98px){
  body.na-checkout .na-hmin-customer{ display:none; }
  body.na-checkout .header-minimal-logo img{ max-width:200px; }
}
/* Nr. 57 (1024): Zusammenfassungszeilen bis 1199 px wie mobil (Schalter neben der Bezeichnung, Wert volle Breite),
   damit z. B. die IBAN nicht in einer schmalen Mittelspalte umbricht */
@media (max-width:1199.98px){
  body.na-checkout .na-sum-row{ grid-template-columns:minmax(0,1fr) auto; row-gap:2px; }
  body.na-checkout .na-sum-row > .na-sum-label{ grid-column:1; grid-row:1; }
  body.na-checkout .na-sum-row > .na-sum-action{ grid-column:2; grid-row:1; }
  body.na-checkout .na-sum-row > .na-sum-value{ grid-column:1 / -1; grid-row:2; }
}
/* Nr. 58 a (390): Bestellseite kompakt, ohne Entfernen-Spalte (aendern ueber „Warenkorb bearbeiten“), kleineres Bild */
@media (max-width:640px){
  body.na-checkout.is-active-route-frontend-checkout-confirm-page .line-item.is-default > .line-item-row > .line-item-remove{ display:none; }
  body.na-checkout.is-active-route-frontend-checkout-confirm-page .line-item.is-default > .line-item-row > .line-item-info{ grid-column:1 / -1; }
  body.na-checkout.is-active-route-frontend-checkout-confirm-page .line-item-details-container{ padding-right:0; }
  body.na-checkout .line-item-info > .line-item-row > .line-item-info-img{ flex-basis:44px; width:44px; }
  body.na-checkout .line-item-img-container{ width:44px; }
  body.na-checkout .line-item-img,
  body.na-checkout .line-item-img-link img{ height:44px; }
  body.na-checkout .line-item-info > .line-item-row{ gap:10px; }
  body.na-checkout .line-item-details-container > .line-item-label,
  body.na-checkout .line-item-details-container > a.line-item-label{ font-size:14px; line-height:1.3; }
  body.na-checkout .line-item{ padding:10px 0; }
}
/* Nr. 60: Bestelltabellen einzeilig und ruhig, Zeile klickbar (Skript na-row-link) */
body.na-account .na-order-table .na-pos-inline{ display:none; }
body.na-account .na-order-table td.na-c-pos{ width:56px; }
body.na-account .na-order-table td.na-c-go{ width:40px; text-align:right; }
body.na-account .na-order-table .na-go-link{ color:var(--na-primary); }
@media (min-width:1101px){
  body.na-account .na-order-table th,
  body.na-account .na-order-table td{ white-space:nowrap; }
  body.na-account .na-order-table td{ padding-top:12px; padding-bottom:12px; }
  body.na-account .na-order-table td.na-c-sum{ font-weight:700; }
  body.na-account .na-order-table td.na-c-ref{ max-width:200px; overflow:hidden; text-overflow:ellipsis; }
  body.na-account .na-order-table .na-actions{ flex-wrap:nowrap; }
  body.na-account .na-row-link{ cursor:pointer; }
  body.na-account .na-row-link:hover > td{ background:var(--na-info-bg); }
}
@media (max-width:1100px){
  body.na-account .na-order-table .na-pos-inline{ display:inline; }
  body.na-account .na-table.na-stack.na-order-table td.na-c-pos,
  body.na-account .na-table.na-stack.na-order-table td.na-c-go{ display:none; }
}
/* Nr. 62: Auftragsnummer in der rechten Spalte unter der Zusammenfassung */
body.na-checkout .na-confirm-ref{ margin:0 0 16px; }
body.na-checkout .na-confirm-ref > .card-body{ padding:16px 20px; }
body.na-checkout .na-confirm-ref .card-title{ margin-bottom:6px; }
body.na-checkout .na-confirm-ref .form-label{ font-size:13px; color:var(--na-muted); }
body.na-checkout .checkout-additional:not(:has(*)){ display:none; }
/* Nr. 63: Adressdialog im Stil von Mein Konto */
body.na-checkout .address-manager-modal .modal-header h1{ font-size:22px; font-weight:700; }
body.na-checkout .address-manager-modal h2,
body.na-checkout .address-manager-modal h5{ font-size:17px; font-weight:600; margin:16px 0 10px; }
body.na-checkout .address-manager-modal .btn-outline-secondary{ border-color:var(--na-primary); color:var(--na-primary); background:var(--na-bg); }
body.na-checkout .address-manager-modal .btn-check:checked + .btn-outline-secondary,
body.na-checkout .address-manager-modal .btn-outline-secondary:hover{ background:var(--na-primary); border-color:var(--na-primary); color:#fff; }
body.na-checkout .address-manager-modal .btn-secondary{ background:var(--na-bg); border:1px solid var(--na-primary); color:var(--na-primary); }
body.na-checkout .address-manager-modal .btn-secondary:hover{ background:var(--na-info-bg); color:var(--na-primary); }
body.na-checkout .address-manager-modal .btn{ border-radius:var(--na-radius); }
body.na-checkout .address-manager-modal .address-manager-select-address{ padding:12px 14px !important; border:1px solid var(--na-border) !important; border-radius:var(--na-radius); font-size:14px; line-height:1.45; background:var(--na-bg); }
body.na-checkout .address-manager-modal .address-manager-select-address:has(input:checked){ border-color:var(--na-primary) !important; background:var(--na-info-bg); }
body.na-checkout .address-manager-modal .address-item-default-badge{ background:var(--na-info-bg) !important; color:var(--na-info-text) !important; font-size:13px !important; padding:2px 10px !important; }
body.na-checkout .address-manager-modal .na-edit-btn{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; padding:0; border:1px solid transparent; border-radius:var(--na-radius); background:transparent; color:var(--na-primary); }
body.na-checkout .address-manager-modal .na-edit-btn:hover,
body.na-checkout .address-manager-modal .na-edit-btn[aria-expanded="true"]{ background:var(--na-info-bg); border-color:var(--na-border); }
body.na-checkout .address-manager-modal .dropdown-menu{ border-radius:var(--na-radius); border-color:var(--na-border); box-shadow:var(--na-shadow); z-index:1080; }
body.na-checkout .address-manager-modal .form-control{ border-radius:var(--na-radius); }

/* ==========================================================================
   FRONTEND-011 Teil E10d – Bestellseite Abstaende (Befundliste Nr. 66), nur NA
   ========================================================================== */
/* Abstand Schritt 3 zu 4 wie zwischen den uebrigen Schritten; kein Leerraum unter der letzten Position */
body.na-checkout .confirm-product{ margin-bottom:0; }
body.na-checkout .confirm-product .card > .card-body,
body.na-checkout .checkout-product-table > .card-body{ margin-bottom:0; }
body.na-checkout .confirm-product .line-item:last-child,
body.na-checkout .checkout-product-table .line-item:last-child{ padding-bottom:12px; }
body.na-checkout .checkout-additional:not(:has(.card, .na-step)){ display:none; }
body.na-checkout .na-checkout-extras{ margin-top:0; }
body.na-checkout .na-checkout-extras > .na-step:first-child{ margin-top:24px; }

/* ==========================================================================
   FRONTEND-011 Teil E10e – Befunde Nr. 67 bis 69 (Anmeldung, Konto vor Freischaltung, Checkout-Kopf), nur NA
   ========================================================================== */
/* Nr. 67: Ruecklink-Button im Checkout-Kopf beim Ueberfahren lesbar (weisse Schrift auf Primaerfarbe) */
body.na-checkout .na-hmin-back.btn-outline-primary:hover,
body.na-checkout .na-hmin-back.btn-outline-primary:focus-visible,
body.na-checkout .na-hmin-back.btn-outline-primary:hover span{ background:var(--na-primary); border-color:var(--na-primary); color:#fff; }
/* Nr. 68 b, 69 a: Hinweise (alert-info) hellblau statt rosa (Theme setzt #f0dcdc), auch auf den Anmeldeseiten */
body.na-account .alert-info,
body.na-checkout .alert-info,
body.na-auth .alert-info{ --bs-alert-bg:#EAF2FB; --bs-alert-border-color:#c9dcf2; --bs-alert-color:#0B3A6E; border-radius:10px; }
/* Nr. 68: Anmeldeseite im Stil von Mein Konto */
body.na-auth{ --na-primary:#0654b0; --na-text:#2b3136; --na-muted:#5c6670; --na-border:#dde3ea; --na-label:#3d454d; }
body.na-auth .account-register .na-b2b-auth-panel{ background:#fff; border:1px solid var(--na-border); border-radius:14px; box-shadow:0 1px 2px rgba(16,38,66,.06),0 4px 16px rgba(16,38,66,.06); padding:24px; }
body.na-auth .account-register .na-b2b-auth-panel .card-title,
body.na-auth .account-recover-password .card-title{ border-bottom:0; padding-bottom:0; font-size:22px; font-weight:700; color:var(--na-text); }
body.na-auth .account-register .na-b2b-auth-panel .card-title::after{ content:none; display:none; }
body.na-auth .account-register .na-b2b-auth-panel .form-label,
body.na-auth .account-register .na-b2b-auth-panel label{ font-size:14px; font-weight:600; color:var(--na-label); }
body.na-auth .account-register .na-b2b-auth-panel .form-control,
body.na-auth .account-register .na-b2b-auth-panel .form-select,
body.na-auth .account-register .na-b2b-auth-panel input:not([type="checkbox"]):not([type="radio"]),
body.na-auth .account-recover-password .form-control{ border-radius:10px !important; border-color:#c4ccd6 !important; }
/* Nr. 68 c: Auswahlfelder mit Pfeil (newactive.css setzt background:#fff !important und entfernt den Pfeil) */
body.na-auth .account-register .na-b2b-auth-panel select,
body.na-auth .account-register .na-b2b-auth-panel .form-select{
  background:#fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%234a545b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") no-repeat right 12px center / 16px 12px !important;
  padding-right:40px !important; -webkit-appearance:none; appearance:none;
}
body.na-auth .na-b2b-benefits-title{ font-size:16px; font-weight:600; margin:20px 0 8px; }
body.na-auth .na-b2b-benefit-card{ border:1px solid var(--na-border); border-radius:10px; background:#f4f6f9; padding:10px 12px; margin-bottom:8px; font-size:14px; }
body.na-auth .account-register .btn{ border-radius:10px !important; }
/* Nr. 68 a: Einstieg „Konto aktivieren“ */
body.na-auth .na-activate-box{ margin-top:20px; padding:16px; border:1px solid #c9dcf2; border-radius:10px; background:#EAF2FB; color:#0B3A6E; }
body.na-auth .na-activate-title{ font-weight:700; font-size:16px; margin-bottom:4px; }
body.na-auth .na-activate-text{ margin:0 0 12px; font-size:14px; line-height:1.5; }
body.na-auth .na-activate-btn{ background:#fff; }
body.na-auth .account-recover-password-form{ border:1px solid var(--na-border); border-radius:14px; box-shadow:0 1px 2px rgba(16,38,66,.06),0 4px 16px rgba(16,38,66,.06); padding:8px; margin:32px 0 48px; }
body.na-auth .account-recover-password-form-actions{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }

/* ==========================================================================
   FRONTEND-011 Teil E10f – Befunde Nr. 68 (Rest), 71 bis 73 (Anmeldung, Konto aktivieren, Registrierung), nur NA
   ========================================================================== */
/* Nr. 72: Hinweisboxen in Anmeldung/Registrierung hellblau (newactive.css .account-register .na-b2b-auth-panel .alert = #efe7e7) */
body.na-auth .account-register .na-b2b-auth-panel .alert-info,
body.na-auth .na-activate-card .alert-info{ background:#EAF2FB; border:1px solid #c9dcf2; color:#0B3A6E; border-radius:10px; }
/* Nr. 71: Card „Konto aktivieren“ ueber volle Breite oberhalb von Anmeldung/Registrierung; mobil untereinander */
body.na-auth .na-activate-card{ border:1px solid #c9dcf2; border-radius:14px; background:#F5F9FE; box-shadow:0 1px 2px rgba(16,38,66,.06); margin:0 0 24px; }
body.na-auth .na-activate-card .card-body{ display:flex; align-items:center; gap:24px; padding:18px 24px; }
body.na-auth .na-activate-card .na-activate-intro{ flex:1 1 auto; min-width:0; color:#0B3A6E; }
body.na-auth .na-activate-card .na-activate-title{ font-size:18px; font-weight:700; margin-bottom:4px; }
body.na-auth .na-activate-card .na-activate-text{ margin:0; font-size:14px; line-height:1.5; }
body.na-auth .na-activate-card .na-activate-action{ flex:0 0 460px; max-width:460px; }
body.na-auth .na-activate-card .form-label{ font-size:14px; font-weight:600; color:var(--na-label); margin-bottom:4px; }
body.na-auth .na-activate-card .na-activate-fields{ display:flex; gap:8px; }
body.na-auth .na-activate-card .na-activate-fields .form-control{ flex:1 1 auto; min-width:0; min-height:46px; border-radius:10px; border-color:#c4ccd6; background:#fff; }
body.na-auth .na-activate-card .na-activate-btn{ flex:0 0 auto; min-height:46px; border-radius:10px; font-weight:700; white-space:nowrap; }
body.na-auth .na-activate-card .na-activate-msg{ margin-top:6px; font-size:13px; color:var(--na-muted); }
body.na-auth .na-activate-card .na-activate-msg.text-danger{ color:#b42318 !important; }
@media (max-width: 991.98px){
  body.na-auth .na-activate-card .card-body{ flex-direction:column; align-items:stretch; gap:14px; padding:16px; }
  body.na-auth .na-activate-card .na-activate-action{ flex:1 1 auto; max-width:none; }
}
@media (max-width: 479.98px){
  body.na-auth .na-activate-card .na-activate-fields{ flex-direction:column; }
}
/* Nr. 73: Registrierung, Anrede so breit wie Vorname („Keine Angabe“ nicht abgeschnitten) */
@media (min-width: 576px){
  body.na-auth .na-b2b-register-panel .form-group.col-md-3:has(select[id$="ersonalSalutation"]){ flex:0 0 50%; max-width:50%; }
}
/* Rest Nr. 68: Passwort-/Aktivierungsseite, Card mit Innenabstand, „Zurueck“ in Primaerfarbe statt schwarz umrandet */
body.na-auth .account-recover-password-form{ padding:24px; }
body.na-auth .account-recover-password-form > .card-title{ margin:0 0 8px; padding:0; }
body.na-auth .account-recover-password-form > .card-body{ padding:0; }
body.na-auth .account-recover-password-form .btn{ border-radius:10px; min-height:44px; }
body.na-auth .account-recover-password-back.btn-outline-secondary{ color:var(--na-primary); border-color:var(--na-primary); background:#fff; }
body.na-auth .account-recover-password-back.btn-outline-secondary:hover,
body.na-auth .account-recover-password-back.btn-outline-secondary:focus-visible{ color:#fff; background:var(--na-primary); border-color:var(--na-primary); }

/* ==========================================================================
   FRONTEND-011 Teil E10g – Nachbesserung Nr. 71 (CW-FE011-16f), nur NA
   ========================================================================== */
/* Button „Konto aktivieren“ in Primaerblau mit weisser Schrift (E10e-Regel .na-activate-btn setzte background:#fff) */
body.na-auth .na-activate-card .na-activate-btn.btn-primary{ background:var(--na-primary); border-color:var(--na-primary); color:#fff; }
body.na-auth .na-activate-card .na-activate-btn.btn-primary:hover,
body.na-auth .na-activate-card .na-activate-btn.btn-primary:focus-visible{ background:#05468f; border-color:#05468f; color:#fff; }

/* ==========================================================================
   FRONTEND-011 Teil E10h – Nachbesserung Nr. 71 (CW-FE011-16g), nur NA
   ========================================================================== */
/* Feld bei ungueltiger Eingabe rot markieren (E10f-Regel setzte border-color #c4ccd6 auch bei .is-invalid) */
body.na-auth .na-activate-card .na-activate-fields .form-control.is-invalid{ border-color:#b42318; box-shadow:0 0 0 3px rgba(180,35,24,.12); }
body.na-auth .na-activate-card .na-activate-fields .form-control.is-invalid:focus{ border-color:#b42318; box-shadow:0 0 0 3px rgba(180,35,24,.2); }

/* ===== FRONTEND-010 Stufe 1 (30.10.2026): eigene Artikelnummern des Kunden (nur NA) =====
   Produktbox/Produktseite/Positionen: „Ihre Art.-Nr.“; Kontoseite „Meine Artikel“ (Karten wie Warenkorb-Positionen);
   Header-Icon „Meine Artikel“. Werte nach FRONTEND-008 (Radius, Karten, Farben ueber --na-*). */
.na-can-box{ margin-top:6px; font-size:13px; line-height:1.35; color:var(--na-muted); }
.na-can-box-label{ margin-right:4px; }
.na-can-box-no{ font-weight:600; color:var(--na-primary-dark); font-variant-numeric:tabular-nums; }
.na-can-detail{ margin-top:6px; font-size:14px; color:var(--na-muted); }
.na-can-detail-row{ display:flex; flex-wrap:wrap; gap:4px 8px; align-items:baseline; }
.na-can-detail-no{ font-weight:600; color:var(--na-primary-dark); font-variant-numeric:tabular-nums; }
.na-can-detail-desc{ color:var(--na-text); }
.line-item-na-own-number{ font-size:13px; color:var(--na-primary-dark); font-weight:600; }
.na-header-articles-col{ display:flex; align-items:center; }
.na-header-articles-btn .icon{ color:var(--na-text); }
.na-header-articles-btn:hover .icon, .na-header-articles-btn:focus-visible .icon{ color:var(--na-primary); }
body.na-account .na-can-search{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px; }
body.na-account .na-can-search .form-control{ flex:1 1 260px; border-radius:var(--na-radius); }
body.na-account .na-can-search .btn{ border-radius:var(--na-radius); }
body.na-account .na-can-count{ margin:0 0 8px; color:var(--na-muted); font-size:14px; }
body.na-account .na-can-list{ display:flex; flex-direction:column; gap:12px; }
body.na-account .na-can-card{ display:grid; grid-template-columns:100px minmax(0,1fr) auto; gap:16px; align-items:center;
  padding:16px; background:var(--na-bg); border:1px solid var(--na-border); border-radius:var(--na-radius-card); box-shadow:var(--na-shadow); }
body.na-account .na-can-image{ width:100px; height:100px; display:flex; align-items:center; justify-content:center; }
body.na-account .na-can-image img{ max-width:100%; max-height:100px; object-fit:contain; }
body.na-account .na-can-image-placeholder{ width:72px; height:72px; color:var(--na-faint); }
body.na-account .na-can-info{ min-width:0; display:flex; flex-direction:column; gap:4px; }
body.na-account .na-can-own-row{ display:flex; flex-wrap:wrap; gap:4px 8px; align-items:baseline; }
body.na-account .na-can-own-label{ font-size:13px; color:var(--na-muted); }
body.na-account .na-can-own-no{ font-weight:700; color:var(--na-primary-dark); font-variant-numeric:tabular-nums; }
body.na-account .na-can-own-desc{ font-size:14px; color:var(--na-text); }
body.na-account .na-can-name{ font-weight:600; color:var(--na-text); }
body.na-account .na-can-name:hover{ color:var(--na-primary); }
body.na-account .na-can-number{ font-size:13px; color:var(--na-muted); }
body.na-account .na-can-unavailable{ font-size:14px; color:var(--na-warning); }
body.na-account .na-can-info .na-delivery{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--na-muted); }
body.na-account .na-can-info .na-delivery-dot{ display:inline-block; width:8px; height:8px; border-radius:999px; background:var(--na-success); flex:0 0 auto; }
body.na-account .na-can-info .na-delivery.is-soldout .na-delivery-dot{ background:var(--na-danger); }
body.na-account .na-can-buy{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
body.na-account .na-can-price{ font-weight:700; font-size:16px; color:var(--na-text); white-space:nowrap; }
body.na-account .na-can-form{ display:flex; gap:8px; align-items:center; }
body.na-account .na-can-qty{ width:80px; border-radius:var(--na-radius); text-align:center; }
body.na-account .na-can-add{ display:inline-flex; align-items:center; gap:6px; border-radius:var(--na-radius); white-space:nowrap; }
body.na-account .na-can-pages{ display:flex; gap:8px; align-items:center; justify-content:center; margin-top:16px; }
body.na-account .na-can-page{ padding:6px 12px; border:1px solid var(--na-border); border-radius:var(--na-radius-pill); color:var(--na-text); }
body.na-account .na-can-page.is-active{ border-color:var(--na-primary); color:var(--na-primary); font-weight:600; }
@media (max-width:767.98px){
  body.na-account .na-can-card{ grid-template-columns:72px minmax(0,1fr); }
  body.na-account .na-can-image{ width:72px; height:72px; }
  body.na-account .na-can-buy{ grid-column:1 / -1; flex-direction:row; justify-content:space-between; align-items:center; }
  body.na-account .na-can-add-text{ display:none; }
}

/* ===== FRONTEND-010 Stufe 2 (30.10.2026): Suche/Vorschlaege ueber die eigene Artikelnummer (nur NA) =====
   Block „Meine Artikel“ oben in den Suchvorschlaegen und auf der Suchseite. */
.na-can-suggest{ padding:8px 12px 10px; border-bottom:1px solid var(--na-border); background:var(--na-info-bg); }
.na-can-suggest-head{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:4px; }
.na-can-suggest-title{ font-weight:700; font-size:14px; color:var(--na-info-text); }
.na-can-suggest-all{ font-size:13px; color:var(--na-primary); }
.na-can-suggest-list{ list-style:none; margin:0; padding:0; }
.na-can-suggest-own{ font-size:13px; font-weight:700; color:var(--na-primary-dark); }
.na-can-hits{ margin:0 0 24px; padding:16px; background:var(--na-info-bg); border:1px solid var(--na-border); border-radius:var(--na-radius-card); }
.na-can-hits-head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:12px; }
.na-can-hits-title{ margin:0; font-size:var(--na-h3); color:var(--na-info-text); }
.na-can-hits-all{ font-size:14px; color:var(--na-primary); }
.na-can-hits-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:8px; }
.na-can-hits-link{ display:flex; gap:12px; align-items:center; padding:8px; background:var(--na-bg); border:1px solid var(--na-border); border-radius:var(--na-radius); color:var(--na-text); text-decoration:none; }
.na-can-hits-link:hover, .na-can-hits-link:focus-visible{ border-color:var(--na-primary); text-decoration:none; }
.na-can-hits-image{ flex:0 0 64px; width:64px; height:64px; display:flex; align-items:center; justify-content:center; }
.na-can-hits-image img{ max-width:64px; max-height:64px; object-fit:contain; }
.na-can-hits-text{ display:flex; flex-direction:column; min-width:0; }
.na-can-hits-own{ font-size:13px; font-weight:700; color:var(--na-primary-dark); }
.na-can-hits-name{ font-weight:600; font-size:14px; }
.na-can-hits-number{ font-size:13px; color:var(--na-muted); }

/* ===== FRONTEND-010 Stufe 2b (30.10.2026): Befunde CW-FE010-02 (nur NA) =====
   Trefferkarten im Suchseiten-Block nicht breiter als der Block (390 px); eigene Nummer als Zeile in der Merkmalliste. */
.na-can-hits-list{ grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr)); }
.na-can-hits-link{ min-width:0; }
.na-can-hits-name{ overflow-wrap:anywhere; }
.na-chip.na-chip-can{ font-weight:600; color:var(--na-primary-dark); }

/* ===== FRONTEND-010 Stufe 3 (30.10.2026): Stift „Eigene Artikelnummer“ und Dialog (nur NA) ===== */
.na-can-edit{ display:inline-flex; align-items:center; gap:4px; margin-left:6px; color:var(--na-primary); text-decoration:none; vertical-align:middle; }
.na-can-edit:hover, .na-can-edit:focus-visible{ color:var(--na-primary-hover); text-decoration:underline; }
.na-can-edit .icon{ width:14px; height:14px; color:currentColor; }
.na-can-edit-text{ font-size:13px; }
.na-can-box-empty{ margin-top:6px; }
.na-can-box-empty .na-can-edit{ margin-left:0; }
.na-can-detail-empty .na-can-edit{ margin-left:0; }
.na-can-edit-modal{ text-align:left; }
.na-can-edit-title{ font-size:var(--na-h3); margin:0 0 12px; }
.na-can-edit-product{ display:flex; flex-direction:column; margin-bottom:12px; }
.na-can-edit-product-name{ font-weight:600; }
.na-can-edit-product-number{ font-size:13px; color:var(--na-muted); }
.na-can-edit-row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:8px 12px; align-items:end; padding:12px 0; border-top:1px solid var(--na-border); }
.na-can-edit-row .form-control{ border-radius:var(--na-radius); }
.na-can-edit-delete, .na-can-edit-pending{ grid-column:1 / -1; }
.na-can-edit-pending{ font-size:13px; color:var(--na-warning); }
.na-can-edit-hint{ font-size:13px; color:var(--na-muted); margin:8px 0 12px; }
.na-can-edit-actions .btn{ border-radius:var(--na-radius); }
.na-can-own-pending{ font-size:13px; color:var(--na-warning); }
@media (max-width:575.98px){ .na-can-edit-row{ grid-template-columns:1fr; } }

/* ===== FRONTEND-010 Stufe 3b (30.10.2026): Hinweise CW-FE010-02/-03 (nur NA) =====
   „Produkte filtern“ ausblenden, wenn nur eigene Treffer da sind; Trefferkarte bei schmalen Bildschirmen. */
.search-page:has(.na-can-hits-only) .cms-element-sidebar-filter{ display:none; }
@media (max-width:575.98px){
  .na-can-hits{ padding:12px; }
  .na-can-hits-link{ gap:8px; padding:6px; }
  .na-can-hits-image{ flex-basis:44px; width:44px; height:44px; }
  .na-can-hits-image img{ max-width:44px; max-height:44px; }
}

/* ===== FRONTEND-010 Stufe 4 (30.10.2026): CW-FE010-04 B1-B6, C1-C3 (nur NA) =====
   Ein Feld „Ihre Referenz“ mit Icon wie „Meine Artikel“; Stift direkt rechts neben der Nummer, vertikal mittig;
   Produktseite: Referenz im Chip „Produktnummer“ (Merkmalliste wird nicht laenger, B3); „Meine Artikel“ ab Tablet bis
   kleinem Desktop zweizeilig (C1); Suchseite ohne doppelten Seitenrand wie Konto/Checkout (C2). */
.na-can-label{ display:inline-flex; align-items:center; gap:4px; color:var(--na-muted); font-weight:400; white-space:nowrap; }
.na-can-label .icon{ width:12px; height:12px; color:var(--na-primary); flex:0 0 auto; }
.na-can-box, .na-can-detail-row, body.na-account .na-can-own-row, .line-item-na-own-number{
  display:flex; flex-wrap:wrap; align-items:center; gap:2px 6px; }
.na-can-box .na-can-edit, .na-can-detail-row .na-can-edit, body.na-account .na-can-own-row .na-can-edit,
.line-item-na-own-number .na-can-edit{ margin-left:0; }
.na-can-box-no, .na-can-detail-no, body.na-account .na-can-own-no, .line-item-na-own-no, .na-can-hits-own, .na-can-suggest-own{
  overflow-wrap:normal; word-break:normal; }
.na-can-edit{ line-height:1; }
.na-can-edit .icon{ display:block; }
.na-chip.na-chip-pn.na-chip-pn-can{ flex-wrap:wrap; column-gap:10px; row-gap:4px; }
.na-can-in-chip{ display:inline-flex; flex-wrap:wrap; align-items:center; gap:2px 6px; font-weight:600; color:var(--na-primary-dark); }
.na-can-in-chip .na-can-label{ font-weight:400; }
.na-can-hits-own .na-can-label, .na-can-suggest-own .na-can-label{ margin-right:2px; }
.na-can-edit-field-hint{ font-size:12px; color:var(--na-muted); margin-top:4px; }
.na-can-edit-row{ grid-template-columns:minmax(0,1fr); }
@media (min-width:768px) and (max-width:1199.98px){
  body.na-account .na-can-card{ grid-template-columns:88px minmax(0,1fr); gap:12px 16px; }
  body.na-account .na-can-image{ width:88px; height:88px; }
  body.na-account .na-can-image img{ max-height:88px; }
  body.na-account .na-can-buy{ grid-column:1 / -1; flex-direction:row; justify-content:flex-end; align-items:center; gap:16px;
    padding-top:12px; border-top:1px solid var(--na-border); }
}
body.is-ctl-search .content-main .container-main{ padding-left:0 !important; padding-right:0 !important; }
@media (max-width:640px){
  body.is-ctl-search .content-main > .container{ padding-left:16px !important; padding-right:16px !important; }
}

/* ===== FRONTEND-010 Stufe 5 (30.10.2026): CW-FE010-06 (nur NA) =====
   Ein Icon (Etikett) nur rechts neben der Nummer, Nummer + Icon als Gruppe ohne Umbruch, Icon auf der Textmitte
   (Shopware setzt .icon > svg um .25em tiefer); Warenkorb: Beschriftung und Nummer auf einer Linie; Dialog 520 px mit
   14 px Radius wie das Konto-Menue; Konto-Menue abgemeldet im selben Stil wie angemeldet. */
.na-can-value{ display:inline-flex; align-items:center; gap:4px; white-space:nowrap; max-width:100%; }
.na-can-value .na-can-edit, .na-can-box-empty .na-can-edit, .na-can-detail-empty .na-can-edit{ margin-left:0; }
.na-can-edit{ display:inline-flex; align-items:center; gap:4px; line-height:1; vertical-align:middle; }
.na-can-edit .icon{ display:inline-flex; align-items:center; width:14px; height:14px; }
.na-can-edit .icon > svg{ top:0; width:14px; height:14px; }
.line-item-na-own-number{ align-items:center; line-height:1.3; }
.line-item-na-own-number .na-can-label{ line-height:1.3; }
.modal-dialog:has(.na-can-edit-modal){ max-width:min(520px, calc(100% - 16px)); }
.modal-content:has(.na-can-edit-modal){ border:0; border-radius:14px; overflow:hidden; box-shadow:0 1px 2px rgba(16,38,66,.06),0 8px 24px rgba(16,38,66,.14); }
.account-menu-dropdown:has(.na-hmenu) .account-menu-header:not(.na-hmenu-head){ padding:8px 10px 6px; font-weight:600; font-size:15px; color:#2b3136; white-space:normal; }
.account-menu-dropdown:has(.na-hmenu) .account-menu-login{ padding:4px 10px 10px; margin:0 0 6px; border-bottom:1px solid #dde3ea; }
.account-menu-dropdown:has(.na-hmenu) .account-menu-login-button{ width:100%; border-radius:10px; }
.account-menu-dropdown:has(.na-hmenu) .account-menu-register{ margin-top:6px; font-size:14px; color:#5c6670; text-align:center; }
.account-menu-dropdown:has(.na-hmenu) .account-menu-inner{ border:0; background:transparent; }

/* ===== FRONTEND-010 Stufe 6 (30.10.2026): Buttons einheitlich im ganzen NA-Shop (B11/B12, USER_CONFIRMED, Werte Cowork) =====
   Zentrale Werte als Variablen: Buttons und Felder 10 px, Karten/Menues/Dialoge 14 px, Primaer Blau mit weisser Schrift,
   Hoehe 40 px, Haupt-Aktionen 48 px; angemeldet und abgemeldet gleich. Das Theme (newactive.css) setzt Radien/Farben teils mit
   !important (0/8/12 px, #111) - deshalb hier ebenfalls !important, aber nie fuer verbundene Gruppen (Suchfeld + Button,
   Mengen-Stepper, Button-Gruppen), Header-Icons, Text-Links und Schliessen-Kreuze. */
:root{
  --na-btn-radius:10px; --na-ui-radius:14px; --na-btn-height:40px; --na-btn-height-main:48px;
  --na-btn-primary-bg:#0654b0; --na-btn-primary-bg-hover:#05479a; --na-btn-primary-text:#fff;
  --na-menu-shadow:0 1px 2px rgba(16,38,66,.06),0 8px 24px rgba(16,38,66,.14);
}
.btn:not(.header-actions-btn):not(.btn-link):not(.btn-close):not(.input-group > .btn):not(.btn-group > .btn):not(.quantity-selector-group .btn){
  border-radius:var(--na-btn-radius) !important; }
.btn-primary:not(:disabled):not(.disabled):not(.btn-link){
  background-color:var(--na-btn-primary-bg) !important; border-color:var(--na-btn-primary-bg) !important;
  color:var(--na-btn-primary-text) !important; font-weight:600; }
.btn-primary:not(:disabled):not(.disabled):not(.btn-link):hover, .btn-primary:not(:disabled):not(.disabled):not(.btn-link):focus-visible{
  background-color:var(--na-btn-primary-bg-hover) !important; border-color:var(--na-btn-primary-bg-hover) !important; color:var(--na-btn-primary-text) !important; }
.btn-primary:not(.btn-link) .icon, .btn-primary:not(.btn-link) .icon svg{ color:var(--na-btn-primary-text); }
.btn:is(.btn-primary, .btn-secondary, .btn-outline-primary, .btn-outline-secondary, .btn-light, .btn-buy):not(.header-actions-btn):not(.btn-link):not(.btn-sm):not(.input-group > .btn):not(.btn-group > .btn):not(.quantity-selector-group .btn){
  display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:var(--na-btn-height); padding-top:0; padding-bottom:0; }
.btn.btn-buy:not(.btn-sm), .btn.begin-checkout-btn, #confirmFormSubmit.btn, .login-submit .btn{
  min-height:var(--na-btn-height-main) !important; height:auto !important; padding-top:0 !important; padding-bottom:0 !important; }
.filter-panel-item-toggle{ border-radius:var(--na-btn-radius) !important; color:#2b3136 !important; }
.product-detail-tabs .nav-link{ border-radius:var(--na-btn-radius) var(--na-btn-radius) 0 0 !important; }
.form-control:not(.input-group > .form-control):not(.quantity-selector-group-input):not(.form-control-plaintext),
.form-select:not(.input-group > .form-select){ border-radius:var(--na-btn-radius) !important; }
.modal-content{ border-radius:var(--na-ui-radius); }
.dropdown-menu:not(.input-group .dropdown-menu){ border-radius:var(--na-ui-radius); }
.account-menu-dropdown:has(.na-hmenu){ box-shadow:var(--na-menu-shadow) !important; }
.account-menu-dropdown:has(.na-hmenu) .account-menu-header:not(.na-hmenu-head){ border-bottom:0 !important; box-shadow:none !important; }
.account-menu-dropdown:has(.na-hmenu) .account-menu-header:not(.na-hmenu-head)::after{ display:none !important; }

/* ===== FRONTEND-010 Stufe 7 (30.10.2026): Befunde CW-FE010-08 zu Stufe 6 (nur NA) =====
   A1 Handy-Button „Menü schließen“ im Konto-Dropdown am Desktop wieder aus (Stufe 6 hatte display ueberschrieben), mobil weisse
   Schrift; A2 Offcanvas-Schliessen volle Breite ohne Radius; A3 Hoehen, die das Theme fest setzt (Produktbox, Kaufbox mobil,
   Geraete-Filter, Konto aktivieren); A4 Startseite (Inline-Styles der CMS-Buttons), Kontaktfelder, Geraetesuche, Login mobil. */
.offcanvas-close.btn{ border-radius:0 !important; }
.offcanvas-close.btn.btn-secondary{ color:#fff !important; }
.offcanvas-close.btn.btn-secondary .icon, .offcanvas-close.btn.btn-secondary .icon svg{ color:#fff; }
@media (min-width:768px){
  .account-menu-dropdown .offcanvas-header, .account-menu-dropdown .offcanvas-header .offcanvas-close{ display:none !important; }
}
.product-box .product-action .btn.btn-buy{ height:var(--na-btn-height-main) !important; min-height:var(--na-btn-height-main) !important;
  line-height:1.2 !important; padding-top:0 !important; padding-bottom:0 !important; }
.product-box .product-action .btn.btn-primary:not(.btn-buy){ height:var(--na-btn-height) !important; min-height:var(--na-btn-height) !important;
  line-height:1.2 !important; padding-top:0 !important; padding-bottom:0 !important; }
body .cms-block-gallery-buybox .product-detail-buy .btn.btn-buy, body .product-detail-buy .btn.btn-buy{
  height:var(--na-btn-height-main) !important; min-height:var(--na-btn-height-main) !important; line-height:1.2 !important;
  padding-top:0 !important; padding-bottom:0 !important; }
.na-device-group-filter-btn.btn, body.na-auth .na-activate-card .btn.na-activate-btn{ height:var(--na-btn-height) !important;
  min-height:var(--na-btn-height) !important; line-height:1.2 !important; padding-top:0 !important; padding-bottom:0 !important; }
.cms-page a[href][style*="border-radius:8px"]{ border-radius:var(--na-btn-radius) !important; }
.na-contact-form-card input.form-control, .na-contact-form-card select.form-select{ border-radius:var(--na-btn-radius) !important;
  height:var(--na-btn-height) !important; min-height:var(--na-btn-height) !important; padding-top:0 !important; padding-bottom:0 !important; }
.na-contact-form-card textarea.form-control{ border-radius:var(--na-btn-radius) !important; }
.btn.df-go:disabled, .btn.df-go.disabled{ background-color:var(--na-btn-primary-bg) !important; border-color:var(--na-btn-primary-bg) !important;
  color:var(--na-btn-primary-text) !important; opacity:.55; }
@media (max-width:575.98px){
  .login-submit .btn, .register-submit .btn{ width:100%; }
}

/* ===== FRONTEND-010 Stufe 8 (30.10.2026): Befunde CW-FE010-09 (nur NA) =====
   Das Theme setzt Felder/Buttons mit hoher Spezifitaet und !important (Kontaktband 0,5,1; Kopf-Suche 0,5,0; Geraetesuche) -
   hier jeweils mit hoeherer Spezifitaet. Felder ueberall 40 px hoch und 10 px Radius (ausser Gruppen, Mehrzeilenfeld frei),
   Kopf-Suche 10 px wie alle Felder, Startseiten-Buttons 48 px (Haupt-Aktion). .btn-sm (34 px) bleibt bewusst kleiner. */
.btn.offcanvas-close:not(.header-actions-btn):not(.btn-link):not(.btn-close):not(.input-group > .btn):not(.btn-group > .btn):not(.quantity-selector-group .btn){
  border-radius:0 !important; }
input.form-control:not(.input-group > .form-control):not(.quantity-selector-group-input):not(.form-control-plaintext):not([type="file"]):not([type="checkbox"]):not([type="radio"]),
select.form-select:not(.input-group > .form-select):not([multiple]):not([size]){
  height:var(--na-btn-height) !important; min-height:var(--na-btn-height) !important; padding-top:0 !important; padding-bottom:0 !important;
  border-radius:var(--na-btn-radius) !important; }
body .content-main .cms-section.na-home-contact-band .na-home-contact-form textarea,
body .na-contact-form-card textarea{ border-radius:var(--na-btn-radius) !important; padding:10px 12px !important; }
body .content-main .cms-section.na-home-contact-band .na-home-contact-form :is(input[type="text"], input[type="email"], input[type="tel"], select){
  height:var(--na-btn-height) !important; min-height:var(--na-btn-height) !important; padding:0 12px !important; border-radius:var(--na-btn-radius) !important; }
body :is(.na-device-finder, .device-finder-nav-inner) .btn.df-go{ height:var(--na-btn-height) !important; min-height:var(--na-btn-height) !important;
  padding-top:0 !important; padding-bottom:0 !important; }
body :is(.na-device-finder, .device-finder-nav-inner) .btn.df-go:disabled{ opacity:.55 !important; }
body .header-main .header-search .header-search-form .input-group{ border-radius:var(--na-btn-radius) !important; }
body .header-main .header-search .header-search-form :is(.form-control, .header-search-input){ border-radius:var(--na-btn-radius) 0 0 var(--na-btn-radius) !important; }
body .header-main .header-search .header-search-form :is(.btn, .header-search-btn, .header-close-btn){ border-radius:0 var(--na-btn-radius) var(--na-btn-radius) 0 !important; }
.cms-page a[href][style*="border-radius:8px"]{ display:flex !important; align-items:center; justify-content:center;
  min-height:var(--na-btn-height-main) !important; padding-top:0 !important; padding-bottom:0 !important; }

/* ===== FRONTEND-010 Stufe 9 (30.10.2026): Restbefunde CW-FE010-10 (nur NA) =====
   R1 Startseite: halbtransparente CMS-Buttons (Inline-Style rgba(255,255,255,0.12)) 48 px wie die uebrigen Haupt-Aktionen.
   R2 Produktseite: Mengen-Stepper ueberall 10 px Radius und 48 px Hoehe wie „In den Warenkorb“ daneben (Theme: Desktop 46,
   mobil 40/12 px, je mit !important). */
.cms-page a[href][style*="rgba(255,255,255,0.12)"]{ display:inline-flex !important; align-items:center; justify-content:center;
  min-height:var(--na-btn-height-main) !important; padding-top:0 !important; padding-bottom:0 !important; border-radius:var(--na-btn-radius) !important; }
body .product-detail-buy .product-detail-quantity-group.quantity-selector-group,
body .cms-block-gallery-buybox .product-detail-buy .product-detail-quantity-group.quantity-selector-group{
  height:var(--na-btn-height-main) !important; min-height:var(--na-btn-height-main) !important; border-radius:var(--na-btn-radius) !important;
  align-items:stretch !important; }
body .cms-block-gallery-buybox .product-detail-buy .product-detail-quantity-group.quantity-selector-group :is(.btn, .quantity-selector-group-input),
body .product-detail-buy .product-detail-quantity-group.quantity-selector-group :is(.btn, .quantity-selector-group-input){
  height:auto !important; min-height:0 !important; line-height:1.2 !important; padding-top:0 !important; padding-bottom:0 !important; }

/* ===== INFRA-036 Paket D (31.10.2026): Formular-Bestaetigungen und Newsletter im Footer (nur NA, Cowork-Formulartest 31.10.) =====
   D1/D2: Shopware ersetzt nach erfolgreichem Absenden den ganzen .cms-block durch <div class="confirm-message">.
   Bisher ohne Hintergrund (dunkelgrau auf dem dunklen Kontakt-Band, nackter Text beim Widerruf). Jetzt weisse Karte mit Erfolgs-Haken.
   D3: alert-info (Theme #f0dcdc, wirkt wie Fehler) auch ausserhalb von Konto/Checkout hellblau wie FRONTEND-011 Nr. 68 b;
   Newsletter im Footer: Reihenfolge E-Mail -> Datenschutz-Checkbox -> Button (nur CSS, Kern-Markup unveraendert). */
.confirm-message{ position:relative; background:#ffffff; color:#1F2933; border:1px solid #D9E2EC; border-left:4px solid #1E8E3E;
  border-radius:10px; box-shadow:0 4px 16px rgba(11,58,110,.10); padding:18px 22px 18px 58px; margin:12px auto; max-width:760px;
  font-size:15px; line-height:1.55; text-align:left; }
.confirm-message::before{ content:""; position:absolute; left:20px; top:18px; width:24px; height:24px; border-radius:50%;
  background:#1E8E3E url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6.5'/%3E%3C/svg%3E") center/14px no-repeat; }
.confirm-message, .confirm-message *{ color:#1F2933; }
.confirm-message a{ color:#0654B0; }
.confirm-message p:last-child{ margin-bottom:0; }
.confirm-message:has(.alert){ padding:0; border:0; box-shadow:none; background:transparent; }
.confirm-message:has(.alert)::before{ display:none; }
.alert-info{ --bs-alert-bg:#EAF2FB; --bs-alert-border-color:#c9dcf2; --bs-alert-color:#0B3A6E; border-radius:10px; }
.na-footer-newsletter-form{ display:flex; flex-direction:column; gap:10px; max-width:360px; }
.na-footer-newsletter-form .na-footer-newsletter-row{ display:contents; }
.na-footer-newsletter-form .na-footer-newsletter-input{ order:1; }
.na-footer-newsletter-form .na-footer-newsletter-privacy{ order:2; margin-top:0; }
.na-footer-newsletter-form .na-footer-newsletter-privacy .form-check{ margin-top:0; }
.na-footer-newsletter-form .na-footer-newsletter-btn{ order:3; }

/* ===== INFRA-036 Paket E (31.10.2026): Newsletter-Bestaetigung /newsletter-subscribe als NA-Karte (nur NA, Nebenbefund N3 Cowork P1) =====
   Shopware zeigt nach dem Klick auf den Bestaetigungslink nur alert-success in voller Breite (page/newsletter/confirm-subscribe).
   Jetzt gleiche Karte wie .confirm-message aus Paket D: weiss, gruene Kante, mittig, max. 760 px; Icon des Alerts bleibt. */
body.is-active-route-frontend-newsletter-subscribe .container-main .alert-success{ --bs-alert-bg:#ffffff; --bs-alert-border-color:#D9E2EC;
  --bs-alert-color:#1F2933; background:#ffffff; color:#1F2933; border:1px solid #D9E2EC; border-left:4px solid #1E8E3E; border-radius:10px;
  box-shadow:0 4px 16px rgba(11,58,110,.10); padding:18px 22px; margin:24px auto; max-width:760px; font-size:15px; line-height:1.55; }
body.is-active-route-frontend-newsletter-subscribe .container-main .alert-success .icon{ color:#1E8E3E; }
body.is-active-route-frontend-newsletter-subscribe .container-main .alert-success .icon svg{ fill:#1E8E3E; }

/* ===== COMPLIANCE-004 (31.10.2026): Rechtsseiten Impressum, AGB, Datenschutz, Widerruf, Versand & Zahlung (nur NA) =====
   Klasse na-legal + na-legal-<typ> aus base.html.twig (Layout der Kategorie = core.basicInformation). Inhalt von Impressum, AGB,
   Datenschutz und Widerruf kommt aus dem Kanzlei-Plugin und wird bei jedem Update ueberschrieben: nur CSS hier, Karte/Inhaltsverzeichnis/
   Stand/Formularbox ergaenzt das kleine Skript in base.html.twig im Browser. Schwarzer .nav-main-Balken bleibt FRONTEND-008 F2. */
body.na-legal .cms-section:not(:has(.cms-block)){ display:none; }
body.na-legal .cms-page{ margin:24px 0 56px; }
body.na-legal .cms-block-text .cms-block-container-row{ justify-content:center; }
body.na-legal .cms-block-text .cms-block-container-row > [class*="col-"]:has(.na-legal-doc){ flex:0 1 900px; max-width:900px; }
body.na-legal .na-legal-doc{ background:var(--na-bg); border:1px solid var(--na-border); border-radius:var(--na-radius-card);
  box-shadow:var(--na-shadow); padding:40px 48px; color:var(--na-text); font-size:16px; line-height:1.65; overflow-wrap:break-word; }
body.na-legal .na-legal-doc h1, body.na-legal .na-legal-doc .na-legal-title{ font-size:var(--na-h1); line-height:1.25; font-weight:700;
  margin:0 0 10px; color:var(--na-text); }
body.na-legal .na-legal-doc h2{ font-size:22px; line-height:1.3; font-weight:700; margin:36px 0 12px; color:var(--na-text); scroll-margin-top:24px; }
body.na-legal .na-legal-doc h2.na-legal-title{ font-size:var(--na-h1); margin-top:0; }
body.na-legal .na-legal-doc h3{ font-size:18px; line-height:1.35; font-weight:600; margin:24px 0 8px; color:var(--na-text); }
body.na-legal .na-legal-doc p, body.na-legal .na-legal-doc ul, body.na-legal .na-legal-doc ol{ margin:0 0 12px; }
body.na-legal .na-legal-doc ul, body.na-legal .na-legal-doc ol{ padding-left:1.4em; }
body.na-legal .na-legal-doc li{ margin-bottom:6px; }
body.na-legal .na-legal-doc a{ color:var(--na-primary); text-decoration:underline; text-underline-offset:2px; overflow-wrap:anywhere; }
body.na-legal .na-legal-doc a:hover{ color:var(--na-primary-hover); }
body.na-legal .na-legal-doc table{ display:block; max-width:100%; overflow-x:auto; border-collapse:collapse; margin:0 0 16px; }
body.na-legal .na-legal-doc th, body.na-legal .na-legal-doc td{ border:1px solid var(--na-border); padding:6px 10px; vertical-align:top; }
body.na-legal .na-legal-stand{ display:inline-block; margin:0 0 24px; padding:3px 12px; border-radius:var(--na-radius-pill);
  background:var(--na-surface-2); color:var(--na-muted); font-size:13px; line-height:1.5; }
body.na-legal .na-legal-kanzlei-toc{ display:none !important; }
body.na-legal #itkanzlei_txt_copyright{ margin-top:40px !important; padding-top:16px; border-top:1px solid var(--na-border);
  font-size:13px !important; line-height:1.5; color:var(--na-muted); }
body.na-legal #itkanzlei_txt_copyright p{ margin:0 0 4px; }
body.na-legal #itkanzlei_img_copyright img{ max-width:120px; height:auto; }
body.na-legal .na-legal-formbox{ margin:32px 0 0; padding:24px 28px; background:var(--na-surface); border:1px solid var(--na-border);
  border-left:4px solid var(--na-primary); border-radius:var(--na-radius); }
body.na-legal .na-legal-formbox > h2:first-child{ margin-top:0; }
/* Inhaltsverzeichnis (AGB, Datenschutz): Desktop Seitenleiste neben der Karte, Mobil eingeklappt darueber */
body.na-legal .na-legal-has-toc{ display:grid !important; grid-template-columns:260px minmax(0,900px); gap:32px; justify-content:center;
  align-items:start; margin-left:0; margin-right:0; }
body.na-legal .na-legal-has-toc > [class*="col-"]{ width:auto; max-width:none; padding-left:0; padding-right:0; }
body.na-legal .na-legal-toc{ position:sticky; top:24px; max-height:calc(100vh - 48px); overflow:auto; background:var(--na-bg);
  border:1px solid var(--na-border); border-radius:var(--na-radius-card); box-shadow:var(--na-shadow); padding:16px; font-size:14px; }
body.na-legal .na-legal-toc summary{ font-weight:700; font-size:15px; cursor:pointer; margin-bottom:8px; color:var(--na-text); }
body.na-legal .na-legal-toc ol{ list-style:none; padding:0; margin:0; }
body.na-legal .na-legal-toc a{ display:block; padding:6px 8px; border-radius:var(--na-radius); color:var(--na-text); text-decoration:none; line-height:1.35; }
body.na-legal .na-legal-toc a:hover, body.na-legal .na-legal-toc a:focus-visible{ background:var(--na-surface); color:var(--na-primary); }
body.na-legal .na-legal-toc .na-legal-top{ display:inline-block; margin-top:8px; padding:4px 8px; font-size:13px; color:var(--na-primary); }
@media (max-width:991.98px){
  body.na-legal .na-legal-has-toc{ grid-template-columns:minmax(0,1fr); gap:16px; }
  body.na-legal .na-legal-toc{ position:static; max-height:none; }
}
@media (max-width:575.98px){
  body.na-legal .cms-page{ margin:16px 0 40px; }
  body.na-legal .na-legal-doc{ padding:24px 18px; font-size:15px; }
  body.na-legal .na-legal-doc h1, body.na-legal .na-legal-doc .na-legal-title{ font-size:26px; }
  body.na-legal .na-legal-doc h2{ font-size:20px; margin-top:28px; }
  body.na-legal .na-legal-doc h2.na-legal-title{ font-size:26px; }
  body.na-legal .na-legal-formbox{ padding:18px 16px; }
}
@media print{
  body.na-legal header, body.na-legal .header-main, body.na-legal .nav-main, body.na-legal footer, body.na-legal .footer-main,
  body.na-legal .breadcrumb, body.na-legal .na-legal-toc, body.na-legal .cookie-permission-container{ display:none !important; }
  body.na-legal .na-legal-has-toc{ display:block !important; }
  body.na-legal .na-legal-doc{ border:0; box-shadow:none; padding:0; font-size:11pt; }
  body.na-legal .na-legal-doc a{ color:#000; }
  body.na-legal .na-legal-formbox{ background:none; border:1px solid #999; }
}

/* ===== COMPLIANCE-004 v2 (31.10.2026): Design-Variablen fuer die Rechtsseiten =====
   Befund Cowork 20:10: H1 der Kanzlei-Texte in der Karte sehr klein. Ursache: die Tokens aus FRONTEND-011 E0 gelten nur unter
   body.na-account/body.na-checkout; auf body.na-legal war --na-h1 leer bzw. kamen Rahmen/Radius aus newactive.css. Gleiche Werte, nur fuer Karte und
   Inhaltsverzeichnis (nicht am body, damit Kopf und Fuss der Seite unveraendert bleiben). */
body.na-legal .na-legal-doc, body.na-legal .na-legal-toc{
  --na-primary:#0654b0; --na-primary-hover:#05479a; --na-primary-dark:#0b3a6e;
  --na-text:#2b3136; --na-muted:#5c6670; --na-faint:#8a949e;
  --na-bg:#ffffff; --na-surface:#f4f6f9; --na-surface-2:#eef2f7;
  --na-border:#dde3ea; --na-border-strong:#c4ccd6;
  --na-radius:10px; --na-radius-card:14px; --na-radius-pill:999px;
  --na-shadow:0 1px 2px rgba(16,38,66,.06),0 4px 16px rgba(16,38,66,.06);
  --na-h1:32px; --na-h2:24px; --na-h3:20px;
}
@media (max-width:575.98px){ body.na-legal .na-legal-doc{ --na-h1:26px; } }

/* ===== COMPLIANCE-004 v3 (31.10.2026): Korrekturen aus CW-4 (Cowork 21:58) =====
   FAIL 1: Inhalt-Leiste lief nicht mit. newactive.css setzt ab 992 px html/body overflow-x:hidden (body wird Scroll-Container);
   clip schneidet genauso ab, ohne Scroll-Container – wie bei na-account/na-checkout. Leiste unter dem festen Header halten.
   FAIL 2: Stand-Zeile stand am Ende (Plugin liefert div statt p); Skript kopiert sie jetzt unter den Titel, Original hier ausblenden.
   Hinweis Mobil: Karte nur 247–287 px breit – Innenabstaende von Block (Inline 20 px), Spalte und Karte unter 576 px verkleinern. */
html:has(body.na-legal), body.na-legal{ overflow-x:clip; }
@media (min-width:992px){
  body.na-legal .na-legal-toc{ top:calc(var(--na-sticky-h, 171px) + 16px); max-height:calc(100vh - var(--na-sticky-h, 171px) - 32px); }
  body.na-legal .na-legal-doc h2{ scroll-margin-top:calc(var(--na-sticky-h, 171px) + 16px); }
}
body.na-legal .na-legal-stand-src, body.na-legal #itkanzlei_txt_copyright.na-legal-copyright-empty{ display:none !important; }
@media (max-width:575.98px){
  body.na-legal .cms-block-text .cms-block-container{ padding-left:0 !important; padding-right:0 !important; }
  body.na-legal .cms-block-text .cms-block-container-row{ margin-left:0; margin-right:0; }
  body.na-legal .cms-block-text .cms-block-container-row > [class*="col-"]{ padding-left:0; padding-right:0; }
  body.na-legal .na-legal-doc{ padding:20px 16px; }
}

/* ===== COMPLIANCE-004 v4 (31.10.2026): Mobil-Seitenrand Rechtsseiten (CW-4 Nachpruefung Cowork 23:52) =====
   Karte bei 390 px nur 302 px breit: .container-main (newactive.css 1.5rem !important) plus .cms-section .boxed (20 px) je Seite.
   Unter 576 px: aussen nur 12 px (container-main), boxed ohne Seitenrand. Ziel Karte ca. 366 px. Desktop unveraendert.
   Lange Titel (AGB „Geschaeftsbedingungen“) mobil mit Silbentrennung. */
@media (max-width:575.98px){
  body.na-legal .content-main .container-main{ padding-left:12px !important; padding-right:12px !important; }
  body.na-legal .content-main .cms-section .boxed{ padding-left:0 !important; padding-right:0 !important; }
  body.na-legal .na-legal-doc h1, body.na-legal .na-legal-doc .na-legal-title{ hyphens:auto; -webkit-hyphens:auto; overflow-wrap:break-word; }
}

/* ==========================================================================
   FRONTEND-008 Header NA neu (02.11.2026, Entwurf v2, abgenommen Rabih) – nur NA (NA-ARCH-DESIGN-001)
   Markup: layout/header.html.twig + layout/header/header.html.twig (dieses Plugin), Skript na-header.js.
   Zwei Zeilen, beide sticky: Desktop 60 + 56 px (+1 px Linie) = 117 px, mobil bis 600 px 56 + 52 + 1 = 109 px.
   Ersetzt fuer NA die Vorgabe „Sticky max. 72px“ (23.10.). Werte: Brand #0654B0, Zeile 2 #EAF2FB, Radius 10 px,
   Inhaltsbreite 1200 px + 24 px Rand, Eingabefelder 16 px, Touch-Ziele mind. 40 px.
   Kern-Regeln (newactive.css, eingefroren) mit !important werden hier gezielt unter .na-hdr uebersteuert.
   ========================================================================== */
:root{ --na-sticky-h:117px; }
/* position:sticky braucht einen Seiten-Scroll ohne Scroll-Container: Kern setzt html/body overflow-x:hidden (<=767 und >=992 px).
   clip schneidet genauso ab (kein seitliches Scrollen), erzeugt aber keinen Scroll-Container. */
:root, :root body{ overflow-x:clip !important; }

body header.header-main{
  position:sticky !important; top:0 !important; z-index:1030 !important;
  padding:0 !important; margin:0 !important; background:#fff !important;
  box-shadow:0 1px 0 #e5e7eb, 0 4px 12px rgba(17,24,39,.04) !important;
}
body header.header-main::before{ display:none !important; content:none !important; }
body .header-main .na-hdr{ --hb:#0654b0; --hb-dark:#0b3a6e; --hb-soft:#eaf2fb; --ht:#2b3136; --hm:#6b7280; --hl:#e5e7eb; --hbg:#f3f4f6; color:var(--ht); }
body .header-main .na-hdr-wrap{ max-width:1200px; margin:0 auto; padding:0 24px; display:flex; align-items:center; }

/* Zeile 1 */
body .header-main .na-hdr-row1 .na-hdr-wrap{ height:60px; gap:20px; }
body .header-main .na-hdr .na-hdr-logo{ flex:0 0 auto; display:flex; align-items:center; }
body .header-main .na-hdr .na-hdr-logo .header-logo-main,
body .header-main .na-hdr .na-hdr-logo .header-logo-main-link,
body .header-main .na-hdr .na-hdr-logo picture{ display:flex !important; align-items:center !important; margin:0 !important; text-align:left !important; }
body .header-main .na-hdr .na-hdr-logo img{ height:30px !important; max-height:30px !important; width:auto !important; max-width:none !important; margin:0 !important; }
body .header-main .na-hdr .na-hdr-menu{ display:flex; flex:1 1 auto; min-width:0; gap:0; }
body .header-main .na-hdr .na-hdr-menu-link{ color:var(--ht) !important; text-decoration:none; font-weight:500; font-size:14px; line-height:1.3; padding:8px 9px; border-radius:10px; white-space:nowrap; }
body .header-main .na-hdr .na-hdr-menu-link:hover,
body .header-main .na-hdr .na-hdr-menu-link:focus-visible{ background:var(--hbg); color:var(--hb) !important; }
body .header-main .na-hdr .na-hdr-menu-link.is-active{ color:var(--hb) !important; }
body .header-main .na-hdr .na-hdr-icons{ display:flex; align-items:center; gap:2px; margin-left:auto; flex:0 0 auto; }
body .header-main .na-hdr .na-hdr-icons > div{ display:flex; align-items:center; }
body .header-main .na-hdr .na-hdr-ic{
  position:relative; display:inline-flex !important; align-items:center; justify-content:center; gap:6px;
  height:40px; min-width:40px; padding:0 8px !important; margin:0 !important; border:0 !important; border-radius:10px !important;
  background:transparent !important; box-shadow:none !important; font-size:13px; font-weight:500; line-height:1; text-decoration:none; cursor:pointer;
}
body .header-main .na-hdr .na-hdr-ic,
body .header-main .na-hdr .na-hdr-ic *{ color:var(--ht) !important; }
body .header-main .na-hdr .na-hdr-ic:hover,
body .header-main .na-hdr .na-hdr-ic:focus-visible{ background:var(--hbg) !important; }
body .header-main .na-hdr .na-hdr-ic:hover *,
body .header-main .na-hdr .na-hdr-ic:focus-visible *{ color:var(--hb) !important; }
body .header-main .na-hdr .na-hdr-ic .icon,
body .header-main .na-hdr .na-hdr-ic .icon svg{ width:20px !important; height:20px !important; top:0 !important; flex:0 0 auto; }
body .header-main .na-hdr .na-hdr-ic .header-cart-icon,
body .header-main .na-hdr .na-hdr-ic .header-wishlist-icon{ display:inline-flex; margin:0 !important; }
body .header-main .na-hdr .na-hdr-ic .badge{
  position:absolute !important; top:3px !important; left:22px !important; right:auto !important; transform:none !important;
  min-width:16px; height:16px; padding:0 4px !important; margin:0 !important; border-radius:999px !important;
  display:inline-flex; align-items:center; justify-content:center; background:var(--hb) !important; color:#fff !important;
  font-size:10px !important; font-weight:700; line-height:1 !important;
}
body .header-main .na-hdr .na-hdr-ic .badge:empty{ display:none !important; }
body .header-main .na-hdr .header-cart-total{ margin:0 !important; font-weight:600; font-size:13px; }
body .header-main .na-hdr.na-hdr--out .header-cart-total{ display:none !important; }
body .header-main .na-hdr .na-hdr-sep{ width:1px; height:24px; background:var(--hl); margin:0 6px; }
body .header-main .na-hdr .na-hdr-tip{
  position:absolute; top:44px; left:50%; transform:translateX(-50%); z-index:5;
  background:#111827; color:#fff !important; font-size:11px; font-weight:500; line-height:1.3; padding:4px 8px; border-radius:6px; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .15s;
}
body .header-main .na-hdr .na-hdr-ic:hover .na-hdr-tip,
body .header-main .na-hdr .na-hdr-ic:focus-visible .na-hdr-tip{ opacity:1; color:#fff !important; }
body .header-main .na-hdr .na-hdr-account .dropdown.show .na-hdr-tip{ opacity:0; }
body .header-main .na-hdr .na-hdr-burger{ display:none !important; }

/* Zeile 2: Suche + Toner-Finder */
body .header-main .na-hdr .na-hdr-row2{ background:var(--hb-soft); border-top:1px solid #dbe7f6; }
body .header-main .na-hdr .na-hdr-row2 .na-hdr-wrap{ height:56px; gap:16px; }
body .header-main .na-hdr .na-hdr-search{ flex:0 0 40%; min-width:0; position:relative; }
body .header-main .na-hdr #searchCollapse{ display:block !important; height:auto !important; visibility:visible !important; }
body .header-main .na-hdr .header-search{ width:100% !important; max-width:none !important; margin:0 !important; }
body .header-main .na-hdr .header-search .header-search-form .input-group{
  position:relative; display:flex; flex-wrap:nowrap; border:0 !important; border-radius:10px !important; background:transparent !important; box-shadow:none !important;
}
body .header-main .na-hdr .header-search .header-search-form .input-group .header-search-input{
  flex:1 1 auto; height:40px !important; min-height:40px !important; padding:0 44px 0 14px !important;
  border:1px solid #cbd5e1 !important; border-radius:10px !important; background:#fff !important; color:var(--ht) !important;
  font-size:16px !important; box-shadow:none !important;
}
body .header-main .na-hdr .header-search .header-search-form .input-group .header-search-input::placeholder{ color:#8a949e !important; }
body .header-main .na-hdr .header-search .header-search-form .input-group .header-search-input:focus{ border-color:var(--hb) !important; box-shadow:0 0 0 3px rgba(6,84,176,.15) !important; }
body .header-main .na-hdr .header-search .header-search-form .input-group .header-search-btn{
  position:absolute !important; right:4px; top:4px; z-index:12011; width:36px; height:32px !important; min-height:32px !important; padding:0 !important;
  display:flex; align-items:center; justify-content:center; border:0 !important; border-radius:8px !important; background:var(--hb) !important;
}
body .header-main .na-hdr .header-search .header-search-btn .icon,
body .header-main .na-hdr .header-search .header-search-btn .icon svg{ width:18px !important; height:18px !important; color:#fff !important; top:0 !important; }
body .header-main .na-hdr .header-search .header-close-btn{ display:none !important; }
body .header-main .na-hdr .na-hdr-devbtn{ display:none; }

body .header-main .na-hdr .na-hdr-finder{ flex:1 1 auto; min-width:0; }
body .header-main .na-hdr .na-hdr-finder .device-finder-nav{ width:100% !important; max-width:none !important; margin:0 !important; padding:0 !important; }
body .header-main .na-hdr .na-hdr-finder .device-finder-nav-inner{
  display:flex !important; align-items:center !important; gap:8px !important; width:100% !important; max-width:none !important;
  margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important;
}
body .header-main .na-hdr .na-hdr-finder .df-col{ flex:1 1 0; min-width:0; padding:0; margin:0; }
body .header-main .na-hdr .na-hdr-finder .df-btn-col{ display:none !important; }
body .header-main .na-hdr .na-hdr-finder .form-select{
  width:100% !important; height:40px !important; min-height:40px !important; margin:0 !important; padding:0 32px 0 10px !important;
  border:1px solid #cbd5e1 !important; border-radius:10px !important; background-color:#fff !important; color:var(--ht) !important;
  font-size:16px !important; line-height:1.2 !important; box-shadow:none !important; opacity:1 !important;
}
body .header-main .na-hdr .na-hdr-finder .form-select:disabled{ background-color:#f8fafc !important; color:#9ca3af !important; cursor:not-allowed; }
body .header-main .na-hdr .na-hdr-finder .form-select.is-next,
body .header-main .na-hdr .na-hdr-finder .form-select:focus{ border-color:var(--hb) !important; box-shadow:0 0 0 3px rgba(6,84,176,.12) !important; }

/* Burger-Menue (Offcanvas, Inhalt aus layout/header.html.twig) */
.offcanvas .na-hdr-drawer{ display:flex; flex-direction:column; padding:4px 0 16px; color:#2b3136; }
.offcanvas .na-hdr-drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:0 0 4px 12px; }
.offcanvas .na-hdr-drawer-title{ font-weight:700; font-size:16px; }
.offcanvas .na-hdr-drawer-close{ width:44px; height:44px; padding:0; border:0; border-radius:10px; background:transparent; display:inline-flex; align-items:center; justify-content:center; }
.offcanvas .na-hdr-drawer-close:hover{ background:#f3f4f6; }
.offcanvas .na-hdr-drawer-h{ margin:14px 12px 4px; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:#6b7280; }
.offcanvas .na-hdr-drawer-link{ display:flex; align-items:center; gap:10px; min-height:44px; padding:10px 12px; border-radius:10px; color:#2b3136; font-weight:500; text-decoration:none; }
.offcanvas .na-hdr-drawer-link:hover, .offcanvas .na-hdr-drawer-link:focus-visible{ background:#f3f4f6; color:#0654b0; text-decoration:none; }
.offcanvas .na-hdr-drawer-link .icon{ width:20px; height:20px; color:#0654b0; flex:0 0 auto; }
.offcanvas .na-hdr-drawer-link .icon svg{ top:0; }

/* Tablet (bis 1199 px): Menue in den Burger */
@media (max-width:1199.98px){
  body .header-main .na-hdr-wrap{ padding:0 20px; }
  body .header-main .na-hdr-row1 .na-hdr-wrap{ gap:10px; }
  body .header-main .na-hdr .na-hdr-menu{ display:none; }
  body .header-main .na-hdr .na-hdr-burger{ display:inline-flex !important; }
  body .header-main .na-hdr .na-hdr-txt{ display:none; }
}
/* Mobil (bis 600 px) */
@media (max-width:600px){
  :root{ --na-sticky-h:109px; }
  body .header-main .na-hdr-wrap{ padding:0 12px; }
  body .header-main .na-hdr-row1 .na-hdr-wrap{ height:56px; gap:4px; }
  body .header-main .na-hdr .na-hdr-logo img{ height:26px !important; max-height:26px !important; }
  body .header-main .na-hdr .na-hdr-ic{ min-width:40px; padding:0 6px !important; }
  body .header-main .na-hdr .na-hdr-hide-m,
  body .header-main .na-hdr .na-hdr-sep{ display:none !important; }
  body .header-main .na-hdr .na-hdr-tip,
  body .header-main .na-hdr .header-cart-total{ display:none !important; }
  body .header-main .na-hdr .na-hdr-row2{ position:relative; }
  body .header-main .na-hdr .na-hdr-row2 .na-hdr-wrap{ height:52px; gap:8px; }
  body .header-main .na-hdr .na-hdr-search{ flex:1 1 auto; }
  body .header-main .na-hdr .header-search .header-search-form .input-group .header-search-input{ padding-right:84px !important; }
  body .header-main .na-hdr .header-search .header-search-form .input-group .header-search-btn{ right:44px; background:transparent !important; }
  body .header-main .na-hdr .header-search .header-search-btn .icon,
  body .header-main .na-hdr .header-search .header-search-btn .icon svg{ color:#6b7280 !important; }
  body .header-main .na-hdr .na-hdr-devbtn{
    display:flex; position:absolute; right:4px; top:4px; z-index:12012; height:32px; padding:0 8px; gap:4px; align-items:center;
    border:0; border-radius:8px; background:#0654b0; color:#fff; font-size:13px; font-weight:600; cursor:pointer;
  }
  body .header-main .na-hdr .na-hdr-devbtn .icon,
  body .header-main .na-hdr .na-hdr-devbtn .icon svg{ width:16px !important; height:16px !important; color:#fff !important; top:0 !important; }
  body .header-main .na-hdr .na-hdr-finder{ display:none; }
  body .header-main .na-hdr .na-hdr-finder.is-open{
    display:block; position:absolute; left:0; right:0; top:100%; z-index:20;
    background:#eaf2fb; padding:10px 12px 14px; border-bottom:1px solid #dbe7f6; box-shadow:0 8px 16px rgba(17,24,39,.08);
  }
  body .header-main .na-hdr .na-hdr-finder.is-open .device-finder-nav-inner{ flex-direction:column !important; align-items:stretch !important; }
  body .header-main .na-hdr .na-hdr-finder.is-open .df-col{ flex:0 0 auto; }
}

/* ==========================================================================
   FRONTEND-008 Artikelzeile NA überall (02.11.2026, Entwurf v1, abgenommen Rabih) – nur NA (NA-ARCH-DESIGN-001)
   Jede Produktbox (.card.product-box: Listings, Suche, Geraeteseite /device, Merkzettel, CMS-Produkt-Box, Produkt-Slider und
   Cross-Selling als Liste) wird als Zeile dargestellt; Listing-Raster 1 Spalte. Markup: component/product/card/* und
   element/cms-element-product-slider.html.twig (dieses Plugin).
   Raster: Bild 84x72 | Name + Infozeilen | Preis | Menge + Warenkorb; Merkzettel-Herz rechts. Desktop ca. 94 px hoch.
   Tablet (bis 1023 px): Warenkorb-Button nur Symbol. Mobil (bis 600 px): Bild 64 px + Infos, darunter Preis | Menge + Button.
   Selektor mit dreifacher Klasse: newactive.css (eingefroren) setzt Produktbox-Regeln bis (0,5,1) mit !important.
   ========================================================================== */
html body .cms-listing-row > .cms-listing-col,
html body .row > .cms-listing-col{ flex:0 0 100% !important; max-width:100% !important; width:100% !important; margin-bottom:10px !important; }
html body .cms-listing-col > .card.product-box{ height:auto !important; }
html body .na-row-list{ display:flex; flex-direction:column; gap:10px; }

html body .card.product-box.product-box.product-box{
  position:relative; height:auto !important; min-height:0 !important; margin:0 !important;
  border:1px solid #e5e7eb !important; border-radius:14px !important; background:#fff !important; box-shadow:none !important;
  transition:box-shadow .15s, border-color .15s; overflow:visible !important;
}
html body .card.product-box.product-box.product-box:hover{ border-color:#cbd5e1 !important; box-shadow:0 4px 14px rgba(17,24,39,.06) !important; }
html body .card.product-box.product-box.product-box > .card-body{
  display:grid !important; grid-template-columns:84px minmax(0,1fr) auto auto; column-gap:18px; row-gap:4px; align-items:center;
  padding:10px 66px 10px 10px !important; min-height:92px; height:auto !important; flex:none !important;
}
html body .card.product-box.product-box.product-box .product-info{ display:contents !important; }
html body .card.product-box.product-box.product-box .product-rating{ display:none !important; }
html body .card.product-box.product-box.product-box .product-badges{ top:4px !important; left:4px !important; z-index:1; }

/* Bild */
html body .card.product-box.product-box.product-box .product-image-wrapper{
  grid-column:1; grid-row:1 / span 3; position:static !important;
  width:84px !important; height:72px !important; min-height:0 !important; max-height:none !important; margin:0 !important; padding:0 !important;
  display:flex !important; align-items:center; justify-content:center; border-radius:10px; background:#fff;
}
html body .card.product-box.product-box.product-box .product-image-wrapper :is(a, picture){ display:flex !important; align-items:center; justify-content:center; width:100%; height:100%; }
html body .card.product-box.product-box.product-box .product-image-wrapper img{
  width:auto !important; height:auto !important; max-width:100% !important; max-height:72px !important; object-fit:contain !important; margin:0 !important; position:static !important;
}
html body .card.product-box.product-box.product-box .product-image-placeholder{
  width:100% !important; height:100% !important; max-width:none !important; display:flex !important; align-items:center; justify-content:center;
  border-radius:10px; background:#f3f4f6; color:#9ca3af;
}
html body .card.product-box.product-box.product-box .product-image-placeholder .icon{ width:32px !important; height:32px !important; }

/* Name und Infozeilen */
html body .card.product-box.product-box.product-box .product-info > :is(.product-name-headline, a.product-name){ grid-column:2; grid-row:1; min-width:0; margin:0 !important; }
html body .card.product-box.product-box.product-box .product-name{
  display:block !important; margin:0 !important; height:auto !important; min-height:0 !important; max-height:none !important;
  font-size:15px !important; font-weight:600 !important; line-height:1.35 !important; color:#2b3136 !important; text-decoration:none;
  white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; -webkit-line-clamp:unset !important;
}
html body .card.product-box.product-box.product-box .product-name:hover{ color:#0654b0 !important; text-decoration:underline; }
html body .card.product-box.product-box.product-box .product-variant-characteristics{ grid-column:2; grid-row:2; min-height:0 !important; height:auto !important; margin:0 !important; font-size:12px; color:#6b7280; }
html body .card.product-box.product-box.product-box .product-variant-characteristics:not(:has(.product-variant-characteristics-option)){ display:none !important; }
html body .card.product-box.product-box.product-box .na-row-meta{ grid-column:2; grid-row:3; min-width:0; display:flex; flex-direction:column; gap:4px; }
html body .card.product-box.product-box.product-box :is(.na-row-l2, .na-row-l3){ display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; font-size:13px; line-height:1.4; color:#6b7280; }
html body .card.product-box.product-box.product-box .na-row-tag{ font-size:11px; font-weight:600; line-height:1.5; padding:2px 8px; border-radius:999px; }
html body .card.product-box.product-box.product-box .na-row-tag--orig{ background:#eaf2fb; color:#0b3a6e; }
html body .card.product-box.product-box.product-box .na-row-tag--komp{ background:#ecfdf3; color:#166534; }
html body .card.product-box.product-box.product-box .na-row-tag--hw{ background:#f3f4f6; color:#374151; }
html body .card.product-box.product-box.product-box .na-row-delivery .product-delivery-information{ margin:0 !important; padding:0 !important; }
html body .card.product-box.product-box.product-box .na-row-delivery .delivery-information{
  display:inline-flex !important; flex-wrap:wrap; align-items:center; gap:0 5px; margin:0 !important; padding:0 !important; font-size:13px !important; color:#6b7280 !important; line-height:1.4;
}
html body .card.product-box.product-box.product-box .na-row-delivery .delivery-information br{ display:none; }
html body .card.product-box.product-box.product-box .na-row-delivery .delivery-information br + span::before{ content:"· "; }
html body .card.product-box.product-box.product-box .na-row-delivery .delivery-status-indicator{
  display:inline-block !important; width:7px !important; height:7px !important; min-width:7px; border-radius:50% !important; margin:0 !important; background:#16a34a !important;
}
html body .card.product-box.product-box.product-box .na-row-delivery .delivery-status-indicator::before{ content:none !important; }
html body .card.product-box.product-box.product-box .na-row-delivery :is(.delivery-soldout, .delivery-preorder) .delivery-status-indicator{ background:#f59e0b !important; }
html body .card.product-box.product-box.product-box .na-row-delivery .delivery-not-available .delivery-status-indicator{ background:#dc2626 !important; }
html body .card.product-box.product-box.product-box .na-row-l3 .na-can-box{ margin:0 !important; font-size:13px; color:#0654b0; }
html body .card.product-box.product-box.product-box .na-row-l3 .na-can-box-empty .na-can-edit{ color:#6b7280; }
html body .card.product-box.product-box.product-box .na-row-l3 .na-can-box-empty .na-can-edit-text::after{ content:" anlegen"; }
html body .card.product-box.product-box.product-box .na-row-l3 a{ position:relative; z-index:2; }

/* Preis */
html body .card.product-box.product-box.product-box .na-row-price{ grid-column:3; grid-row:1 / span 3; min-width:96px; text-align:right; margin:0; }
html body .card.product-box.product-box.product-box .na-row-price :is(.product-price-info, .product-price-wrapper){ margin:0 !important; padding:0 !important; min-height:0 !important; height:auto !important; }
html body .card.product-box.product-box.product-box .na-row-price .product-price-unit:not(:has(span)){ display:none !important; }
html body .card.product-box.product-box.product-box .na-row-price .product-price-unit{ margin:0 !important; font-size:11px; color:#6b7280; }
html body .card.product-box.product-box.product-box .na-row-price .product-cheapest-price:empty{ display:none !important; }
html body .card.product-box.product-box.product-box .na-row-price .product-price{ display:block; margin:0 !important; font-size:18px !important; font-weight:700 !important; line-height:1.2 !important; color:#2b3136 !important; white-space:nowrap; }
html body .card.product-box.product-box.product-box .na-row-price .list-price{ font-size:12px !important; }
html body .card.product-box.product-box.product-box .na-row-tax{ display:block; font-size:11px; color:#6b7280; white-space:nowrap; }
html body .card.product-box.product-box.product-box .na-row-price--note{ min-width:0; max-width:180px; font-size:12px; color:#6b7280; }

/* Kauf-Bereich */
html body .card.product-box.product-box.product-box .product-action{ grid-column:4; grid-row:1 / span 3; position:relative; z-index:2; margin:0 !important; padding:0 !important; }
html body .card.product-box.product-box.product-box .product-action .buy-widget{ display:flex !important; align-items:center; gap:10px; margin:0 !important; }
html body .card.product-box.product-box.product-box .product-action .d-grid{ display:block !important; }
html body .card.product-box.product-box.product-box .product-action .na-row-qty{
  width:62px !important; height:40px !important; min-height:40px !important; padding:0 4px !important; margin:0 !important; text-align:center;
  border:1px solid #cbd5e1 !important; border-radius:10px !important; font-size:16px !important; background:#fff !important; color:#2b3136 !important;
}
html body .card.product-box.product-box.product-box .product-action :is(.btn-buy, .btn-detail, .na-row-login, .btn){
  display:inline-flex !important; align-items:center; justify-content:center; gap:6px; width:auto !important;
  height:40px !important; min-height:40px !important; padding:0 14px !important; margin:0 !important; border-radius:10px !important;
  font-size:14px !important; font-weight:600 !important; line-height:1 !important; white-space:nowrap; text-decoration:none;
}
html body .card.product-box.product-box.product-box .product-action .btn-buy{ background:#0654b0 !important; border:0 !important; color:#fff !important; }
html body .card.product-box.product-box.product-box .product-action .btn-buy:hover{ background:#05468f !important; }
html body .card.product-box.product-box.product-box .product-action .btn-buy .icon{ width:17px !important; height:17px !important; color:#fff !important; }
html body .card.product-box.product-box.product-box .product-action .btn-buy .icon svg{ top:0 !important; color:#fff !important; fill:currentColor; }
html body .card.product-box.product-box.product-box .product-action :is(.btn-detail, .na-row-login){ background:#fff !important; border:1px solid #0654b0 !important; color:#0654b0 !important; }
html body .card.product-box.product-box.product-box .product-action .na-row-login{ min-width:200px; }
html body .card.product-box.product-box.product-box .product-action :is(.btn-detail, .na-row-login):hover{ background:#eaf2fb !important; }

/* Merkzettel-Herz bzw. Entfernen (Merkzettel-Seite) rechts in der Zeile */
html body .card.product-box.product-box.product-box .product-wishlist{
  position:absolute !important; top:50% !important; right:14px !important; left:auto !important; bottom:auto !important; transform:translateY(-50%); z-index:2; margin:0 !important;
}
html body .card.product-box.product-box.product-box .product-wishlist .product-wishlist-btn{
  width:40px !important; height:40px !important; min-width:40px; padding:0 !important; border:1px solid #e5e7eb !important; border-radius:50% !important;
  background:#fff !important; color:#6b7280 !important; display:inline-flex !important; align-items:center; justify-content:center; box-shadow:none !important;
}
html body .card.product-box.product-box.product-box .product-wishlist .product-wishlist-btn:hover,
html body .card.product-box.product-box.product-box .product-wishlist .product-wishlist-added{ color:#dc2626 !important; border-color:#fecaca !important; }
html body .card.product-box.product-box.product-box .product-wishlist .icon{ width:18px !important; height:18px !important; color:inherit !important; }

/* Tablet (bis 1023 px): Warenkorb-Button nur Symbol */
@media (max-width:1023.98px){
  html body .card.product-box.product-box.product-box .product-action .na-row-buy-txt{ display:none; }
  html body .card.product-box.product-box.product-box .product-action .btn-buy{ padding:0 12px !important; }
  html body .card.product-box.product-box.product-box .na-row-price{ min-width:80px; }
}
/* Mobil (bis 600 px) */
@media (max-width:600px){
  html body .card.product-box.product-box.product-box > .card-body{
    grid-template-columns:64px minmax(0,1fr) auto; column-gap:12px; row-gap:4px; padding:10px !important; min-height:0;
  }
  html body .card.product-box.product-box.product-box > .card-body::after{
    content:""; grid-column:1 / -1; grid-row:4; align-self:start; border-top:1px solid #e5e7eb; pointer-events:none;
  }
  html body .card.product-box.product-box.product-box .product-image-wrapper{ grid-row:1 / span 3; width:64px !important; height:60px !important; align-self:start; }
  html body .card.product-box.product-box.product-box .product-image-wrapper img{ max-height:60px !important; }
  html body .card.product-box.product-box.product-box .product-info > :is(.product-name-headline, a.product-name){ grid-column:2 / -1; padding-right:44px; }
  html body .card.product-box.product-box.product-box .product-name{
    white-space:normal !important; display:-webkit-box !important; -webkit-line-clamp:2 !important; -webkit-box-orient:vertical; font-size:14px !important;
  }
  html body .card.product-box.product-box.product-box .product-variant-characteristics{ grid-column:2 / -1; }
  html body .card.product-box.product-box.product-box .na-row-meta{ grid-column:2 / -1; }
  html body .card.product-box.product-box.product-box :is(.na-row-l2, .na-row-l3){ font-size:12px; }
  html body .card.product-box.product-box.product-box .na-row-price{ grid-column:1 / span 2; grid-row:4; text-align:left; min-width:0; padding-top:10px; margin-right:auto; }
  html body .card.product-box.product-box.product-box .na-row-price .product-price{ font-size:17px !important; }
  html body .card.product-box.product-box.product-box .product-action{ grid-column:3; grid-row:4; padding-top:10px !important; justify-self:end; }
  html body .card.product-box.product-box.product-box .product-info:not(:has(.na-row-price)) .product-action{ grid-column:1 / -1; justify-self:stretch; }
  html body .card.product-box.product-box.product-box .product-action .buy-widget{ gap:8px; }
  html body .card.product-box.product-box.product-box .product-action .na-row-qty{ width:52px !important; }
  html body .card.product-box.product-box.product-box .product-action .na-row-buy-txt{ display:inline; }
  html body .card.product-box.product-box.product-box .product-action .na-row-login{ min-width:0; width:100% !important; }
  html body .card.product-box.product-box.product-box .product-wishlist{ top:10px !important; right:10px !important; transform:none; }
  html body .card.product-box.product-box.product-box .product-wishlist .product-wishlist-btn{ width:36px !important; height:36px !important; min-width:36px; }
}

/* ==========================================================================
   FRONTEND-008 Header-Korrektur K1–K5 nach Sichtprüfung (02.11.2026, freigegeben Rabih) – nur NA
   Uebersteuert den Abschnitt „FRONTEND-008 Header NA neu“ oben.
   K1 Breite wie Shop-Container/Footer: max-width var(--na-container) (1320 px ab 1400) + 20 px Innenabstand (gemessen Footer 1280 px Inhalt).
   K2 Logo 40 px (1200–1399 px: 36 px, mobil 26 px). Zeile 1 72 px, Zeile 2 64 px → 137 px (Desktop/Tablet); mobil unveraendert 109 px.
   Menue 15 px, Padding 10/14 px; 1200–1399 px kompakter (14 px, 10/8 px), damit Menue und Symbole in 1100 px passen.
   K3 Warenkorb: Anzahl als kleiner Punkt oben rechts am Symbol, Betrag mit mind. 8 px Abstand (auch 3-stellig).
   K4 Telefon-Hoerer als eigenes SVG (Strich, ohne Fuellung; newactive.css setzt .header-main svg { fill: currentColor !important }).
   K5 Mobil: Button „Gerät“ lag beim Tippen ins Suchfeld unter dem Feld (newactive.css: .header-search z-index 12000,
   bei :focus-within 100000). Button jetzt darueber; Suche und Button in Zeile 2 sichtbar erzwungen.
   ========================================================================== */
:root{ --na-sticky-h:137px; }
body .header-main .na-hdr-wrap{ max-width:var(--na-container, 1320px); padding:0 20px; }
body .header-main .na-hdr-row1 .na-hdr-wrap{ height:72px; gap:24px; }
body .header-main .na-hdr .na-hdr-row2 .na-hdr-wrap{ height:64px; gap:16px; }
body .header-main .na-hdr .na-hdr-logo img{ height:40px !important; max-height:40px !important; }
body .header-main .na-hdr .na-hdr-menu{ gap:2px; }
body .header-main .na-hdr .na-hdr-menu-link{ font-size:15px; padding:10px 14px; }
body .header-main .na-hdr .na-hdr-icons{ gap:6px; }
body .header-main .na-hdr .na-hdr-sep{ margin:0 4px; }
/* K3 */
body .header-main .na-hdr .na-hdr-cart .na-hdr-ic .badge{ top:4px !important; left:20px !important; min-width:16px; height:16px; padding:0 4px !important; font-size:10px !important; }
body .header-main .na-hdr .na-hdr-cart .header-cart-total{ margin-left:18px !important; white-space:nowrap; }
body .header-main .na-hdr .na-hdr-cart .na-hdr-ic{ padding:0 10px 0 8px !important; }
/* K4 */
body .header-main .na-hdr .na-hdr-svg,
.offcanvas .na-hdr-drawer .na-hdr-svg{ display:inline-flex; width:20px; height:20px; flex:0 0 auto; }
body .header-main .na-hdr .na-hdr-svg svg,
.offcanvas .na-hdr-drawer .na-hdr-svg svg{ width:20px !important; height:20px !important; fill:none !important; stroke:currentColor !important; top:0 !important; }
.offcanvas .na-hdr-drawer .na-hdr-svg{ color:#0654b0; }
/* K5 */
body .header-main .na-hdr .na-hdr-search .na-hdr-devbtn{ z-index:100005 !important; }

@media (min-width:1200px) and (max-width:1399.98px){
  body .header-main .na-hdr-row1 .na-hdr-wrap{ gap:16px; }
  body .header-main .na-hdr .na-hdr-logo img{ height:36px !important; max-height:36px !important; }
  body .header-main .na-hdr .na-hdr-menu-link{ font-size:14px; padding:10px 8px; }
  body .header-main .na-hdr .na-hdr-icons{ gap:2px; }
}
@media (max-width:600px){
  :root{ --na-sticky-h:109px; }
  body .header-main .na-hdr-wrap{ max-width:none; padding:0 12px; }
  body .header-main .na-hdr-row1 .na-hdr-wrap{ height:56px; gap:4px; }
  body .header-main .na-hdr .na-hdr-row2 .na-hdr-wrap{ height:52px; gap:8px; }
  body .header-main .na-hdr .na-hdr-logo img{ height:26px !important; max-height:26px !important; }
  body .header-main .na-hdr .na-hdr-icons{ gap:2px; }
  body .header-main .na-hdr .na-hdr-search{ display:block !important; flex:1 1 auto !important; min-width:0; width:auto; }
  body .header-main .na-hdr .na-hdr-search #searchCollapse,
  body .header-main .na-hdr .na-hdr-search .header-search{ display:block !important; visibility:visible !important; height:auto !important; }
  body .header-main .na-hdr .na-hdr-search .na-hdr-devbtn{ display:flex !important; visibility:visible !important; }
}

/* ==========================================================================
   FRONTEND-008 Korrektur Header mobil H1–H6 + Artikelzeile R1–R8 nach CW-FE008-HDR-2 / CW-FE008-ROW-1 (02.11.2026, freigegeben Rabih) – nur NA
   Uebersteuert die FRONTEND-008-Abschnitte oben.
   H1/H2 Mobil (bis 600 px): Button „Gerät“ im Suchfeld entfaellt (lag im Stapelkontext von .header-search unter dem Eingabefeld);
   eigene dritte Zeile „Toner für Ihr Gerät finden“ (40 px, Hintergrund wie Zeile 2) klappt Hersteller/Serie/Geraet darunter auf.
   3 Zeilen sticky, zugeklappt 56 + 52 + 40 + 1 = 149 px. Suche volle Breite, Such-Button wie Desktop.
   H3/H5 Mobil: Zeile 1 als 3 Bereiche (Burger | Logo mittig | Konto + Warenkorb), Logo 32 px, Logo-Link nur so breit wie das Bild.
   H4 1200–1399 px Kompaktgroesse bleibt (Abschnitt K1–K5). H6 Finder-Texte 601–1199 px kurz (na-header.js).
   R1 Herz in der Kaufspalte (.na-row-buy) rechts neben dem Button. R2 Name und Infozeilen direkt untereinander, vertikal mittig
   (Leerzeilen 1fr oben/unten nehmen die Resthoehe), Desktop <= 100 px. R3 ein Preishinweis (price-unit.html.twig).
   R4 Zeile 2 mit OEM, Farbe (Punkt), Reichweite; Desktop hoechstens 2 Zeilen. R6 „anlegen“ jetzt im Template (CSS-Zusatz aus).
   R7 Tablet: Preis- und Kaufspalte feste Breite, Infospalte nimmt den Rest (<= 110 px). R8 Mobil: Preis links, Menge + Button
   (nur Symbol) + Herz rechts in einer Zeile innerhalb der Box (<= 170 px).
   ========================================================================== */
/* H1 Finder-Zeile: Desktop/Tablet aus */
body .header-main .na-hdr .na-hdr-devbtn{ display:none !important; }
body .header-main .na-hdr .na-hdr-findbtn{ display:none; }

@media (max-width:600px){
  :root{ --na-sticky-h:149px; }
  /* H3/H5 Zeile 1 */
  body .header-main .na-hdr-row1 .na-hdr-wrap{ display:grid; grid-template-columns:minmax(80px,1fr) minmax(0,auto) minmax(80px,1fr); align-items:center; gap:4px; }
  body .header-main .na-hdr .na-hdr-burger{ justify-self:start; }
  body .header-main .na-hdr .na-hdr-logo{ justify-self:center; min-width:0; max-width:100%; }
  body .header-main .na-hdr .na-hdr-logo :is(.header-logo-main, .header-logo-main-link, picture){ width:auto !important; min-width:0 !important; max-width:100% !important; flex:0 1 auto !important; justify-content:center !important; }
  body .header-main .na-hdr .na-hdr-logo img{ height:auto !important; max-height:32px !important; width:auto !important; max-width:100% !important; }
  body .header-main .na-hdr .na-hdr-icons{ justify-self:end; gap:0; margin:0; }
  body .header-main .na-hdr .na-hdr-ic{ min-width:40px; padding:0 !important; }
  body .header-main .na-hdr .na-hdr-cart .na-hdr-ic{ padding:0 !important; }

  /* Zeile 2 (Suche) + Zeile 3 (Finder-Zeile) + aufgeklappter Finder */
  body .header-main .na-hdr .na-hdr-row2 .na-hdr-wrap{ height:auto; flex-wrap:wrap; gap:0; }
  body .header-main .na-hdr .na-hdr-search{ flex:0 0 100% !important; height:52px; display:flex !important; align-items:center; }
  body .header-main .na-hdr .na-hdr-search > *{ flex:1 1 auto; min-width:0; }
  body .header-main .na-hdr .header-search .header-search-form .input-group .header-search-input{ padding-right:44px !important; }
  body .header-main .na-hdr .header-search .header-search-form .input-group .header-search-btn{ right:4px; background:var(--hb) !important; }
  body .header-main .na-hdr .header-search .header-search-btn .icon,
  body .header-main .na-hdr .header-search .header-search-btn .icon svg{ color:#fff !important; }
  body .header-main .na-hdr .na-hdr-findbtn{
    display:flex; flex:0 0 calc(100% + 24px); margin:0 -12px; height:40px; padding:0 12px; align-items:center; justify-content:space-between; gap:8px;
    border:0; border-top:1px solid #dbe7f6; background:var(--hb-soft); color:var(--hb); font-size:14px; font-weight:600; cursor:pointer; text-align:left;
  }
  body .header-main .na-hdr .na-hdr-findbtn .na-hdr-chev{ width:18px; height:18px; flex:0 0 auto; fill:none !important; transition:transform .15s; }
  body .header-main .na-hdr .na-hdr-findbtn[aria-expanded="true"] .na-hdr-chev{ transform:rotate(180deg); }
  body .header-main .na-hdr .na-hdr-finder,
  body .header-main .na-hdr .na-hdr-finder.is-open{ position:static; box-shadow:none; border:0; background:transparent; }
  body .header-main .na-hdr .na-hdr-finder{ display:none; flex:0 0 100%; padding:0; }
  body .header-main .na-hdr .na-hdr-finder.is-open{ display:block; padding:2px 0 12px; }
  body .header-main .na-hdr .na-hdr-finder.is-open .device-finder-nav-inner{ flex-direction:column !important; align-items:stretch !important; gap:8px !important; }
}

/* R1–R4 Desktop-Raster: Bild | Name + Infozeilen | Preis | Kaufspalte (Menge, Button, Herz) */
html body .card.product-box.product-box.product-box > .card-body{
  grid-template-columns:84px minmax(0,1fr) auto auto; grid-template-rows:1fr auto auto auto 1fr; row-gap:0; column-gap:16px;
  padding:8px 14px 8px 8px !important; min-height:0;
}
html body .card.product-box.product-box.product-box .product-image-wrapper{ grid-row:1 / -1; }
html body .card.product-box.product-box.product-box .product-info > :is(.product-name-headline, a.product-name){ grid-row:2; }
html body .card.product-box.product-box.product-box .product-variant-characteristics{ grid-row:3; }
html body .card.product-box.product-box.product-box .na-row-meta{ grid-row:4; gap:2px; margin-top:2px; }
html body .card.product-box.product-box.product-box .product-name{ line-height:20px !important; }
html body .card.product-box.product-box.product-box :is(.na-row-l2, .na-row-l3){ gap:2px 10px; font-size:12.5px; line-height:18px; }
html body .card.product-box.product-box.product-box .na-row-l2{ max-height:38px; overflow:hidden; }
html body .card.product-box.product-box.product-box .na-row-tag{ line-height:16px; padding:1px 7px; }
html body .card.product-box.product-box.product-box .na-row-color{ display:inline-flex; align-items:center; gap:5px; }
html body .card.product-box.product-box.product-box .na-row-color i{ display:inline-block; width:9px; height:9px; border-radius:50%; background:#9ca3af; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); }
html body .card.product-box.product-box.product-box .na-row-color--k i{ background:#111827; }
html body .card.product-box.product-box.product-box .na-row-color--c i{ background:#06b6d4; }
html body .card.product-box.product-box.product-box .na-row-color--m i{ background:#db2777; }
html body .card.product-box.product-box.product-box .na-row-color--y i{ background:#facc15; }
html body .card.product-box.product-box.product-box .na-row-delivery .delivery-information{ font-size:12.5px !important; line-height:18px; }
html body .card.product-box.product-box.product-box .na-row-l3 .na-can-box{ font-size:12.5px; }
html body .card.product-box.product-box.product-box .na-row-l3 .na-can-box-empty .na-can-edit-text::after{ content:none !important; }

/* R3 Preis mit einem Hinweis */
html body .card.product-box.product-box.product-box .na-row-price{ grid-row:1 / -1; min-width:0; width:118px; }
html body .card.product-box.product-box.product-box .na-row-price .na-row-taxlink{
  display:block; margin:2px 0 0 auto !important; padding:0 !important; border:0; background:none; font-size:11px !important; line-height:1.3; color:#6b7280 !important;
  text-decoration:underline; text-underline-offset:2px; text-align:right; white-space:nowrap;
}
html body .card.product-box.product-box.product-box .na-row-price .na-row-taxlink:hover{ color:#0654b0 !important; }
html body .card.product-box.product-box.product-box .na-row-price--note{ width:auto; max-width:180px; }

/* R1 Kaufspalte mit Herz */
html body .card.product-box.product-box.product-box .na-row-buy{ grid-column:4; grid-row:1 / -1; display:flex; align-items:center; justify-content:flex-end; gap:10px; position:relative; z-index:2; }
html body .card.product-box.product-box.product-box .na-row-buy .product-action{ grid-column:auto; grid-row:auto; }
html body .card.product-box.product-box.product-box .na-row-buy .product-wishlist{ position:static !important; transform:none !important; margin:0 !important; flex:0 0 auto; }
/* Merkzettel-Seite: kein zweites Herz, Entfernen-Button bleibt rechts */
html body .card.product-box.box-wishlist.product-box.product-box > .card-body{ padding-right:66px !important; }
html body .card.product-box.box-wishlist.product-box.product-box .na-row-buy .product-wishlist{ display:none !important; }

/* R7 Tablet */
@media (max-width:1023.98px){
  html body .card.product-box.product-box.product-box > .card-body{ grid-template-columns:72px minmax(0,1fr) 112px auto; column-gap:12px; }
  html body .card.product-box.product-box.product-box .product-image-wrapper{ width:72px !important; height:64px !important; }
  html body .card.product-box.product-box.product-box .product-image-wrapper img{ max-height:64px !important; }
  html body .card.product-box.product-box.product-box .na-row-price{ width:auto; min-width:0; }
  html body .card.product-box.product-box.product-box .na-row-price .product-price{ font-size:17px !important; }
  html body .card.product-box.product-box.product-box .na-row-price .na-row-taxlink{ white-space:normal; }
  html body .card.product-box.product-box.product-box .na-row-buy{ gap:8px; }
  html body .card.product-box.product-box.product-box .product-action .na-row-qty{ width:54px !important; }
  html body .card.product-box.product-box.product-box .product-action .na-row-login{ min-width:0; padding:0 12px !important; }
}

/* R8 Mobil */
@media (max-width:600px){
  html body .card.product-box.product-box.product-box > .card-body{
    grid-template-columns:60px minmax(0,1fr) auto; grid-template-rows:auto auto auto auto; column-gap:10px; row-gap:0; padding:10px !important;
  }
  html body .card.product-box.product-box.product-box > .card-body::after{ grid-row:4; }
  html body .card.product-box.product-box.product-box .product-image-wrapper{ grid-row:1 / span 3; width:60px !important; height:56px !important; }
  html body .card.product-box.product-box.product-box .product-image-wrapper img{ max-height:56px !important; }
  html body .card.product-box.product-box.product-box .product-info > :is(.product-name-headline, a.product-name){ grid-column:2 / -1; grid-row:1; padding-right:0; }
  html body .card.product-box.product-box.product-box .product-name{ line-height:18px !important; }
  html body .card.product-box.product-box.product-box .product-variant-characteristics{ grid-row:2; }
  html body .card.product-box.product-box.product-box .na-row-meta{ grid-column:2 / -1; grid-row:3; }
  html body .card.product-box.product-box.product-box :is(.na-row-l2, .na-row-l3){ font-size:12px; line-height:17px; gap:1px 8px; }
  html body .card.product-box.product-box.product-box .na-row-l2{ max-height:none; overflow:visible; }
  html body .card.product-box.product-box.product-box .na-row-price{ grid-column:1 / span 2; grid-row:4; width:auto; min-width:0; text-align:left; padding-top:10px; align-self:center; }
  html body .card.product-box.product-box.product-box .na-row-price .na-row-taxlink{ margin:1px 0 0 !important; text-align:left; white-space:normal; }
  html body .card.product-box.product-box.product-box .na-row-buy{ grid-column:3; grid-row:4; padding-top:10px; gap:6px; justify-self:end; min-width:0; }
  html body .card.product-box.product-box.product-box .product-info:not(:has(.na-row-price)) .na-row-buy{ grid-column:1 / -1; justify-self:stretch; }
  html body .card.product-box.product-box.product-box .product-info:not(:has(.na-row-price)) .na-row-buy .product-action{ flex:1 1 auto; min-width:0; }
  html body .card.product-box.product-box.product-box .product-action{ padding-top:0 !important; justify-self:auto; }
  html body .card.product-box.product-box.product-box .product-action .buy-widget{ gap:6px; }
  html body .card.product-box.product-box.product-box .product-action .na-row-qty{ width:48px !important; }
  html body .card.product-box.product-box.product-box .product-action .na-row-buy-txt{ display:none; }
  html body .card.product-box.product-box.product-box .product-action .btn-buy{ width:44px !important; padding:0 !important; }
  html body .card.product-box.product-box.product-box .product-action .na-row-login{ width:100% !important; }
  html body .card.product-box.product-box.product-box .na-row-buy .product-wishlist .product-wishlist-btn{ width:40px !important; height:40px !important; min-width:40px; }
  html body .card.product-box.box-wishlist.product-box.product-box > .card-body{ padding-right:10px !important; }
  html body .card.product-box.box-wishlist.product-box.product-box .product-wishlist-remove{ top:8px !important; right:8px !important; transform:none !important; }
  html body .card.product-box.box-wishlist.product-box.product-box .product-info > :is(.product-name-headline, a.product-name){ padding-right:40px; }
}

/* FRONTEND-008 R1-Fix Herz (02.11.2026): Kern setzt .product-wishlist-action-circle absolut (bottom/right 1rem) – in der Kaufspalte
   lag das Herz dadurch auf „In den Warenkorb“. Button in .na-row-buy im Fluss halten. Nur NA. */
html body .card.product-box.product-box.product-box .na-row-buy .product-wishlist .product-wishlist-btn{ position:static !important; inset:auto !important; transform:none !important; }

/* ==========================================================================
   FRONTEND-008 Korrektur R1b/R2/R9–R12 nach CW-FE008-ROW-2 + Cowork-Ergaenzung abgemeldet (02.11.2026, freigegeben Rabih) – nur NA
   R1b Klickflaeche des Herzes nur 40×40 px: Kern-Pseudo-Element .product-wishlist-action-circle::before (120 %, absolut) aus, Button
       wieder positioniert (relativ), sonst bezog sich ::before auf die ganze Kaufspalte und lag ueber „In den Warenkorb“/„Anmelden für Preise“.
   R10 Kaufspalte .na-row-side: oben Preis + „zzgl. MwSt. und Versand“ (rechtsbuendig), darunter Menge + Button + Herz. Mobil unter der Linie,
       Preis + Hinweis in einer Zeile, darunter Menge + Button (mit Text) + Herz.
   R2 Hoehen: Name Desktop/Tablet einzeilig (voller Name als Tooltip), Zeile 2 hoechstens 2 Zeilen; Ziel Desktop <= 100, Tablet <= 110, mobil <= 170 px.
   R9 Geraeteseite mobil: Gruppen-Boxen mit kleinem Innenabstand, Karten fast volle Breite; „Anmelden für Preise“ passt in den Button.
   R11 Tablet: Zeile 2 nicht mehr abgeschnitten (Etikett sichtbar); Lieferpunkt und Text bleiben zusammen (nowrap).
   R12 ab 2 Farben je Farbe ein Punkt ohne Text (na-row-colors, Tooltip), bei einer Farbe Punkt + Text (wie bisher).
   ========================================================================== */
/* R1b */
html body .card.product-box.product-box.product-box .na-row-buy .product-wishlist{ position:relative !important; flex:0 0 40px; width:40px; height:40px; }
html body .card.product-box.product-box.product-box .na-row-buy .product-wishlist .product-wishlist-btn{ position:relative !important; inset:auto !important; width:40px !important; height:40px !important; min-width:40px; overflow:hidden; }
html body .card.product-box.product-box.product-box .na-row-buy .product-wishlist .product-wishlist-btn::before{ content:none !important; display:none !important; }

/* R10 Desktop: Bild | Name + Infozeilen | Kaufspalte */
html body .card.product-box.product-box.product-box > .card-body{ grid-template-columns:84px minmax(0,1fr) auto; }
html body .card.product-box.product-box.product-box .na-row-side{
  grid-column:3; grid-row:1 / -1; align-self:center; display:flex; flex-direction:column; align-items:flex-end; justify-content:center; gap:4px;
  position:relative; z-index:2; min-width:0;
}
html body .card.product-box.product-box.product-box .na-row-side .na-row-price{ grid-column:auto; grid-row:auto; width:auto; min-width:0; max-width:none; text-align:right; margin:0; }
html body .card.product-box.product-box.product-box .na-row-side .na-row-price .product-price{ line-height:22px !important; }
html body .card.product-box.product-box.product-box .na-row-side .na-row-price .na-row-taxlink{ margin:0 0 0 auto !important; line-height:14px; white-space:nowrap; }
html body .card.product-box.product-box.product-box .na-row-side .na-row-price--note{ max-width:300px; }
html body .card.product-box.product-box.product-box .na-row-side .na-row-buy{ grid-column:auto; grid-row:auto; display:flex; align-items:center; justify-content:flex-end; gap:10px; position:static; z-index:auto; }

/* R2 Name einzeilig, Zeile 2 hoechstens 2 Zeilen ohne Abschneiden einzelner Angaben */
html body .card.product-box.product-box.product-box .product-name{ display:block !important; white-space:nowrap !important; overflow:hidden; text-overflow:ellipsis; }
html body .card.product-box.product-box.product-box .na-row-l2{ max-height:none; overflow:visible; }

/* R11 Lieferstatus zusammenhalten */
html body .card.product-box.product-box.product-box .na-row-delivery .delivery-information{ flex-wrap:nowrap !important; white-space:nowrap; }
html body .card.product-box.product-box.product-box .na-row-delivery{ min-width:0; }

/* R12 mehrere Farben als Punkte */
html body .card.product-box.product-box.product-box .na-row-colors{ display:inline-flex; align-items:center; gap:3px; }
html body .card.product-box.product-box.product-box .na-row-colors .na-row-dot{ display:inline-block; width:10px; height:10px; border-radius:50%; background:#9ca3af; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); }
html body .card.product-box.product-box.product-box .na-row-colors .na-row-dot.na-row-color--k{ background:#111827; }
html body .card.product-box.product-box.product-box .na-row-colors .na-row-dot.na-row-color--c{ background:#06b6d4; }
html body .card.product-box.product-box.product-box .na-row-colors .na-row-dot.na-row-color--m{ background:#db2777; }
html body .card.product-box.product-box.product-box .na-row-colors .na-row-dot.na-row-color--y{ background:#facc15; }
html body .card.product-box.product-box.product-box .na-row-color--r i,
html body .card.product-box.product-box.product-box .na-row-colors .na-row-dot.na-row-color--r{ background:#dc2626; }
html body .card.product-box.product-box.product-box .na-row-color--b i,
html body .card.product-box.product-box.product-box .na-row-colors .na-row-dot.na-row-color--b{ background:#2563eb; }
html body .card.product-box.product-box.product-box .na-row-color--g i,
html body .card.product-box.product-box.product-box .na-row-colors .na-row-dot.na-row-color--g{ background:#16a34a; }

/* Tablet */
@media (max-width:1023.98px){
  html body .card.product-box.product-box.product-box > .card-body{ grid-template-columns:72px minmax(0,1fr) auto; }
  html body .card.product-box.product-box.product-box .na-row-side .na-row-price .na-row-taxlink{ white-space:nowrap; }
  html body .card.product-box.product-box.product-box .na-row-side .na-row-buy{ gap:8px; }
}

/* Mobil */
@media (max-width:600px){
  html body .card.product-box.product-box.product-box > .card-body{ grid-template-columns:60px minmax(0,1fr); padding:8px 10px !important; }
  html body .card.product-box.product-box.product-box .product-name{ white-space:normal !important; display:-webkit-box !important; -webkit-line-clamp:2 !important; -webkit-box-orient:vertical; }
  html body .card.product-box.product-box.product-box :is(.na-row-l2, .na-row-l3){ line-height:16px; }
  html body .card.product-box.product-box.product-box .na-row-side{
    grid-column:1 / -1; grid-row:4; align-items:stretch; gap:4px; padding-top:8px; width:100%;
  }
  html body .card.product-box.product-box.product-box .na-row-side .na-row-price{ display:flex; flex-wrap:wrap; align-items:baseline; gap:0 8px; text-align:left; padding:0; }
  html body .card.product-box.product-box.product-box .na-row-side .na-row-price :is(.product-price-info, .product-price-wrapper){ display:contents !important; }
  html body .card.product-box.product-box.product-box .na-row-side .na-row-price .product-price{ line-height:20px !important; }
  html body .card.product-box.product-box.product-box .na-row-side .na-row-price .na-row-taxlink{ margin:0 !important; text-align:left; }
  html body .card.product-box.product-box.product-box .na-row-side .na-row-buy{ grid-column:auto; grid-row:auto; padding:0; justify-self:auto; justify-content:flex-end; gap:6px; width:100%; }
  html body .card.product-box.product-box.product-box .na-row-side .na-row-buy .product-action{ flex:1 1 auto; min-width:0; }
  html body .card.product-box.product-box.product-box .na-row-side .na-row-buy .product-action .buy-widget{ width:100%; }
  html body .card.product-box.product-box.product-box .na-row-side .na-row-buy .product-action form{ flex:1 1 auto; min-width:0; }
  html body .card.product-box.product-box.product-box .na-row-side .product-action .btn-buy{ width:auto !important; flex:1 1 auto; min-width:0; padding:0 12px !important; }
  html body .card.product-box.product-box.product-box .na-row-side .product-action .na-row-buy-txt{ display:inline; }
  html body .card.product-box.product-box.product-box .na-row-side .product-action .na-row-login{ width:100% !important; min-width:0; padding:0 10px !important; overflow:hidden; text-overflow:ellipsis; }
  html body .card.product-box.product-box.product-box .product-info:not(:has(.na-row-price)) .na-row-buy{ grid-column:auto; }
  /* R9 Geraeteseite: Gruppen-Boxen schmaler, Karten fast volle Breite */
  body.is-ctl-device :is(.na-device-group-block, .na-device-group-single){ padding:10px !important; border-radius:12px; }
  body.is-ctl-device .na-device-subcategory-block{ padding-left:0 !important; padding-right:0 !important; margin-left:0 !important; margin-right:0 !important; }
  body.is-ctl-device .na-device-subcategory-block .row{ --bs-gutter-x:0; margin-left:0 !important; margin-right:0 !important; }
  body.is-ctl-device .na-device-subcategory-block .row > .cms-listing-col{ padding-left:0 !important; padding-right:0 !important; }
}

/* FRONTEND-008 Korrektur R13 Kaufspalte (02.11.2026, Vorgabe Rabih) – nur NA:
   Merkzettel-Herz links vor der Mengenauswahl, „In den Warenkorb“ rechtsbuendig direkt unter dem Preis (Desktop, Tablet, Mobil). */
html body .card.product-box.product-box.product-box .na-row-side .na-row-buy .product-wishlist{ order:-1; }
html body .card.product-box.product-box.product-box .na-row-side .na-row-buy .product-action{ order:0; }
/* R14 Luft (Vorgabe Rabih „nicht so zusammengeklebt“): mehr Abstand zwischen Bild, Text und Kaufspalte, zwischen den Infozeilen,
   zwischen Preis und Buttons und zwischen den Karten. Hoehengrenzen R2 bleiben (Desktop ≤100, Tablet ≤110, mobil ≤170). */
html body .card.product-box.product-box.product-box > .card-body{ column-gap:24px; padding:8px 18px 8px 12px !important; }
html body .card.product-box.product-box.product-box .card-body{ row-gap:3px; }
html body .card.product-box.product-box.product-box .na-row-side{ gap:8px; }
html body .card.product-box.product-box.product-box .na-row-side .na-row-buy{ gap:12px; }
html body .row > .cms-listing-col{ margin-bottom:14px !important; }
@media (max-width:1023.98px){
  html body .card.product-box.product-box.product-box > .card-body{ column-gap:18px; padding:8px 14px 8px 10px !important; }
  html body .card.product-box.product-box.product-box .na-row-side .na-row-buy{ gap:10px; }
}
@media (max-width:600px){
  html body .card.product-box.product-box.product-box > .card-body{ column-gap:12px; padding:10px 12px !important; }
  html body .card.product-box.product-box.product-box .card-body{ row-gap:2px; }
  html body .card.product-box.product-box.product-box .na-row-side{ gap:6px; padding-top:10px; }
  html body .card.product-box.product-box.product-box .na-row-side .na-row-buy{ gap:10px; }
  html body .row > .cms-listing-col{ margin-bottom:12px !important; }
}

/* FRONTEND-008 Korrektur R15 Header-Suche (03.11.2026, Vorgabe Rabih) – nur NA, ab 601 px (Desktop/Tablet):
   Such-Button nicht mehr als kleiner Block im Feld, sondern buendig angesetzt: Feld + Button eine Einheit, 40 px hoch wie die
   Toner-Finder-Dropdowns, aussen 10 px Radius. Mobil (≤600 px, Button „Gerät“ im Feld) unveraendert. */
@media (min-width:601px){
  body .header-main .na-hdr .header-search .header-search-form .input-group{ display:flex !important; align-items:stretch; height:40px; }
  body .header-main .na-hdr .header-search .header-search-form .input-group .header-search-input{
    padding-right:14px !important; border-right:0 !important; border-radius:10px 0 0 10px !important; }
  body .header-main .na-hdr .header-search .header-search-form .input-group .header-search-btn{
    position:static !important; flex:0 0 48px; width:48px; height:40px !important; min-height:40px !important; margin:0 !important;
    border:1px solid var(--hb) !important; border-radius:0 10px 10px 0 !important; }
  body .header-main .na-hdr .header-search .header-search-form .input-group .header-search-btn:hover{ filter:brightness(.92); }
  body .header-main .na-hdr .header-search .header-search-form .input-group:focus-within .header-search-input{ border-color:var(--hb) !important; }
}

/* ==========================================================================
   FRONTEND-008 Korrektur R8 nach CW-FE008-SAMMEL-1 + Vorgabe Rabih mobil (03.11.2026), nur NA (NA-ARCH-DESIGN-001)
   Uebersteuert die FRONTEND-008-Abschnitte oben. R11, R12, R13, R15, M4 und die Klicktests (PASS) bleiben unveraendert.
   S1 R2 Hoehen: leeres .product-cheapest-price (Kern, 20 px + Abstand) aus, Preisblock als Flex-Spalte (keine Leerzeichen-Zeilen),
      Rasterzeilen ohne row-gap, Kaufspalte 6 px Abstand. Rechnerisch Desktop angemeldet ca. 98 px, abgemeldet ca. 88 px.
      Mobil: Zeile 3 (Lieferstatus, Eigene Referenz) unter dem Bild ueber die volle Breite, Bild 56 px.
   S2/S3 R9 Geraeteseite und Merkzettel bis 1023 px: Seitenrand wie in der Suche (.container-main ohne Innenabstand,
      mobil .container 16 px); Geraeteseite mobil Gruppen-Boxen ohne Rahmen und Innenabstand, Karten so breit wie in der Suche.
   S4 Tablet 601 bis 1023 px: Name hoechstens 2 Zeilen statt einzeilig gekuerzt (Geraeteseite 768).
   S5 Layout-Shift Listing/Suche ab 992 px: Kern-Skript listing-inline-filters.js verschiebt Hersteller/Preis erst nach dem Laden
      neben die Sortierung, der CMS-Filterblock darueber schrumpft dann um ca. 48 px. Block ab 992 px ausgeblendet, solange er
      nur diese beiden Filter enthaelt (weitere Filter bleiben sichtbar).
   Mobil bis 600 px (Vorgabe Rabih 03.11.2026): a) Zeile 1 60 px, Logo 36 px, Symbole 44 px (SVG 22 px). b) Finder als Button,
      gleich breit wie die Suche. c) Suche 44 px, Lupen-Button buendig rechts in voller Hoehe, aussen runde Ecken (wie Desktop R15).
      d) Finder-Felder 44 px. Header zugeklappt ca. 60 + 110 + 1 = 171 px.
   ========================================================================== */

/* S1 R2 Preisblock ohne Leerraum */
html body .card.product-box.product-box.product-box .na-row-price .product-cheapest-price:not(:has(.product-cheapest-price-price)){ display:none !important; }
html body .card.product-box.product-box.product-box .na-row-price .product-cheapest-price{ min-height:0 !important; margin:0 !important; }
html body .card.product-box.product-box.product-box .na-row-side .na-row-price :is(.product-price-info, .product-price-wrapper){ display:flex; flex-direction:column; align-items:flex-end; }
html body .card.product-box.product-box.product-box .na-row-side .na-row-price .na-b2b-login-note{ margin:0 !important; }

/* S1 R2 Raster kompakt (Desktop, Tablet) */
html body .card.product-box.product-box.product-box > .card-body{ row-gap:0 !important; padding-top:7px !important; padding-bottom:7px !important; }
html body .card.product-box.product-box.product-box .na-row-meta{ margin-top:2px; gap:2px; }
html body .card.product-box.product-box.product-box .na-row-side{ gap:6px; }

/* S5 Layout-Shift: CMS-Filterblock ab 992 px aus, wenn das Kern-Skript seine Filter neben die Sortierung holt */
@media (min-width:992px){
  html body:has([data-na-inline-filters="true"]) .cms-block-sidebar-filter:not(:has(.filter-panel-item:not(.filter-multi-select-manufacturer):not(.filter-range))){ display:none !important; }
}

/* S2/S3 Geraeteseite und Merkzettel: Seitenrand wie Suche */
@media (max-width:1023.98px){
  body:is(.is-ctl-device, .is-ctl-wishlist) .content-main .container-main{ padding-left:0 !important; padding-right:0 !important; }
  body.is-ctl-device :is(.na-device-group-block, .na-device-group-single){ padding:12px !important; }
}

/* S4 Tablet: Name bis 2 Zeilen, Infozeilen etwas kleiner */
@media (min-width:601px) and (max-width:1023.98px){
  html body .card.product-box.product-box.product-box .product-name{
    white-space:normal !important; display:-webkit-box !important; -webkit-line-clamp:2 !important; -webkit-box-orient:vertical;
    font-size:14px !important; line-height:18px !important;
  }
  html body .card.product-box.product-box.product-box :is(.na-row-l2, .na-row-l3){ font-size:12px; line-height:16px; }
}

@media (max-width:640px){
  body:is(.is-ctl-device, .is-ctl-wishlist) .content-main > .container{ padding-left:16px !important; padding-right:16px !important; }
}

@media (max-width:600px){
  /* S2 Geraeteseite mobil: Gruppen-Boxen ohne Rahmen, Karten volle Breite */
  body.is-ctl-device :is(.na-device-group-block, .na-device-group-single){ padding:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; }

  /* S1 R2 mobil: Bild | Name + Zeile 2, darunter Zeile 3 und Kaufspalte ueber die volle Breite */
  html body .card.product-box.product-box.product-box > .card-body{
    grid-template-columns:56px minmax(0,1fr); grid-template-rows:auto auto auto auto auto; column-gap:12px; row-gap:0 !important;
    padding:8px 12px !important;
  }
  html body .card.product-box.product-box.product-box .product-image-wrapper{ grid-row:1 / span 3; width:56px !important; height:52px !important; align-self:start; }
  html body .card.product-box.product-box.product-box .product-image-wrapper img{ max-height:52px !important; }
  html body .card.product-box.product-box.product-box .product-info > :is(.product-name-headline, a.product-name){ grid-row:1; }
  html body .card.product-box.product-box.product-box .product-variant-characteristics{ grid-row:2; }
  html body .card.product-box.product-box.product-box .na-row-meta{ display:contents; }
  html body .card.product-box.product-box.product-box .na-row-l2{ grid-column:2; grid-row:3; margin-top:2px; align-self:start; }
  html body .card.product-box.product-box.product-box .na-row-l3{ grid-column:1 / -1; grid-row:4; margin-top:6px; min-width:0; }
  html body .card.product-box.product-box.product-box > .card-body::after{ grid-row:5; }
  html body .card.product-box.product-box.product-box .na-row-side{ grid-row:5; padding-top:6px; gap:4px; }
  /* Merkzettel: Entfernen-X ueberdeckt den Namen nicht */
  html body .card.product-box.box-wishlist.product-box.product-box > .card-body{ padding-right:12px !important; }
  html body .card.product-box.box-wishlist.product-box.product-box .product-wishlist-remove{ top:6px !important; right:6px !important; }
  html body .card.product-box.box-wishlist.product-box.product-box .product-wishlist-remove .product-wishlist-btn{ width:36px !important; height:36px !important; min-width:36px; }
  html body .card.product-box.box-wishlist.product-box.product-box .product-info > :is(.product-name-headline, a.product-name){ padding-right:36px; }

  /* a) Zeile 1 */
  :root{ --na-sticky-h:171px; }
  body .header-main .na-hdr-row1 .na-hdr-wrap{ height:60px; grid-template-columns:minmax(88px,1fr) minmax(0,auto) minmax(88px,1fr); }
  body .header-main .na-hdr .na-hdr-logo img{ max-height:36px !important; }
  body .header-main .na-hdr .na-hdr-ic{ height:44px; min-width:44px; }
  body .header-main .na-hdr .na-hdr-ic .icon,
  body .header-main .na-hdr .na-hdr-ic .icon svg{ width:22px !important; height:22px !important; }

  /* c) Suche 44 px, Lupen-Button buendig rechts */
  body .header-main .na-hdr .na-hdr-row2 .na-hdr-wrap{ padding-top:6px; padding-bottom:8px; row-gap:8px; }
  body .header-main .na-hdr .na-hdr-search{ height:44px; }
  body .header-main .na-hdr .header-search .header-search-form .input-group{ display:flex !important; align-items:stretch; height:44px; }
  body .header-main .na-hdr .header-search .header-search-form .input-group .header-search-input{
    height:44px !important; min-height:44px !important; padding:0 12px !important; border-right:0 !important; border-radius:10px 0 0 10px !important; }
  body .header-main .na-hdr .header-search .header-search-form .input-group .header-search-btn{
    position:static !important; flex:0 0 48px; width:48px; height:44px !important; min-height:44px !important; margin:0 !important;
    border:1px solid var(--hb) !important; border-radius:0 10px 10px 0 !important; background:var(--hb) !important; }
  body .header-main .na-hdr .header-search .header-search-btn .icon,
  body .header-main .na-hdr .header-search .header-search-btn .icon svg{ width:20px !important; height:20px !important; color:#fff !important; }
  body .header-main .na-hdr .header-search .header-search-form .input-group:focus-within .header-search-input{ border-color:var(--hb) !important; }

  /* b) Finder als Button, gleich breit wie die Suche */
  body .header-main .na-hdr .na-hdr-findbtn{
    flex:0 0 100%; margin:0; height:44px; padding:0 14px; justify-content:center; gap:8px;
    border:1px solid var(--hb); border-radius:10px; background:#fff; color:var(--hb); font-size:15px; font-weight:600;
    box-shadow:0 1px 2px rgba(6,84,176,.08); text-align:center;
  }
  body .header-main .na-hdr .na-hdr-findbtn:active{ background:var(--hb-soft); }
  body .header-main .na-hdr .na-hdr-findbtn[aria-expanded="true"]{ background:var(--hb); color:#fff; }

  /* d) aufgeklappter Finder: Felder 44 px */
  body .header-main .na-hdr .na-hdr-finder.is-open{ padding:0 0 4px; }
  body .header-main .na-hdr .na-hdr-finder .form-select{ height:44px !important; min-height:44px !important; padding:0 32px 0 12px !important; }
}

/* ==========================================================================
   FRONTEND-008 Korrektur R9 nach CW-FE008-SAMMEL-2 (03.11.2026), nur NA (NA-ARCH-DESIGN-001)
   Uebersteuert die FRONTEND-008-Abschnitte oben. PASS aus SAMMEL-2 (Breiten R9/Merkzettel, Header H1/H2/H3/H5, Klicktests,
   Filter, Tablet-Name, TE) bleibt unveraendert.
   T1 R2 Desktop/Tablet: Die Mindesthoehe 92 px aus dem Abschnitt „Artikelzeile“ griff weiter (gemessen: Rasterzeilen
      16/20/0/40/16, Tablet einzeilig genau 92 + 14 = 106 px). Mindesthoehe jetzt mit !important aus, Raster ohne fr-Zeilen
      (Name | Merkmale | Infozeilen, Bild und Kaufspalte ueber alle Zeilen). Erwartet Desktop angemeldet ca. 98 px, abgemeldet ca. 88 px.
   T2 Layout-Shift Listing/Suche ab 992 px: Kern-Skript newactive.js haengt das Filterpanel zuerst in eine eigene Spalte
      .na-listing-filters-target (68 px), danach holt listing-inline-filters.js Hersteller/Preis neben die Sortierung, die Spalte
      schrumpft auf 16 px. Spalte ab 992 px ausgeblendet, wenn die Seite den Inline-Filter-Platz hat.
   T3 Kaufbereich mobil (Vorschlag Cowork): Preis + Hinweis linksbuendig, darunter eine Zeile Herz | Menge | Button, alles 44 px,
      Button bis zum rechten Innenrand, Herz innerhalb der Karte (Kern-Regel top/right 10 px am Herz aufgehoben).
      Mehr Abstand ueber und unter der Trennlinie.
   T4 Finder-Felder mobil 44 px: globale Feldregel (select.form-select:not(...), Spezifitaet 0,5,1) setzt var(--na-btn-height);
      im Header mobil jetzt --na-btn-height 44 px.
   T5 Merkzettel mobil: Zeile 2 haelt Abstand zum Entfernen-X (Etikett nicht mehr verdeckt).
   ========================================================================== */

/* T1 Desktop/Tablet: Raster ohne Mindesthoehe und ohne fr-Zeilen */
html body .card.product-box.product-box.product-box > .card-body{ min-height:0 !important; grid-template-rows:auto auto auto !important; align-content:center; }
html body .card.product-box.product-box.product-box .product-image-wrapper{ grid-row:1 / -1; align-self:center; }
html body .card.product-box.product-box.product-box .product-info > :is(.product-name-headline, a.product-name){ grid-row:1; align-self:end; }
html body .card.product-box.product-box.product-box .product-variant-characteristics{ grid-row:2; }
html body .card.product-box.product-box.product-box .na-row-meta{ grid-row:3; align-self:start; }
html body .card.product-box.product-box.product-box .na-row-side{ grid-row:1 / -1; }

/* T2 Layout-Shift: Zwischen-Spalte des Kern-Skripts ab 992 px aus */
@media (min-width:992px){
  html body:has([data-na-inline-filters="true"]) .cms-element-product-listing-actions .na-listing-filters-target{ display:none !important; }
}

@media (max-width:600px){
  /* T1 mobil: 5 Zeilen wie in R8 (Name | Merkmale | Zeile 2 | Zeile 3 | Kaufbereich) */
  html body .card.product-box.product-box.product-box > .card-body{ grid-template-rows:auto auto auto auto auto !important; align-content:start; }
  html body .card.product-box.product-box.product-box .product-image-wrapper{ grid-row:1 / span 3; align-self:start; }
  html body .card.product-box.product-box.product-box .product-info > :is(.product-name-headline, a.product-name){ grid-row:1; align-self:start; }
  html body .card.product-box.product-box.product-box .na-row-l2{ grid-row:3; }
  html body .card.product-box.product-box.product-box .na-row-l3{ grid-row:4; margin-top:4px; margin-bottom:8px; }

  /* T3 Kaufbereich: Preis links, darunter Herz | Menge | Button */
  html body .card.product-box.product-box.product-box .na-row-side{
    --na-btn-height:44px;
    grid-column:1 / -1 !important; grid-row:5 !important; justify-self:stretch !important; align-self:start !important; width:100% !important;
    display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:6px !important; margin:0 !important; padding:8px 0 0 !important;
  }
  html body .card.product-box.product-box.product-box .na-row-side .na-row-price{
    align-self:stretch !important; width:100% !important; max-width:none !important; margin:0 !important; padding:0 !important;
    display:flex !important; flex-wrap:wrap; align-items:baseline; justify-content:flex-start !important; gap:0 8px; text-align:left !important;
  }
  html body .card.product-box.product-box.product-box .na-row-side .na-row-price .product-price{ margin:0 !important; text-align:left !important; }
  html body .card.product-box.product-box.product-box .na-row-side .na-row-price .na-row-taxlink{ margin:0 !important; text-align:left !important; }
  html body .card.product-box.product-box.product-box .na-row-side .na-row-buy{
    display:flex !important; align-items:center !important; justify-content:flex-start !important; gap:8px !important;
    width:100% !important; margin:0 !important; padding:0 !important;
  }
  html body .card.product-box.product-box.product-box .na-row-side .na-row-buy .product-wishlist{
    order:-1; position:relative !important; inset:auto !important; transform:none !important; margin:0 !important;
    flex:0 0 44px; width:44px; height:44px;
  }
  html body .card.product-box.product-box.product-box .na-row-side .na-row-buy .product-wishlist .product-wishlist-btn{ width:44px !important; height:44px !important; min-width:44px; }
  html body .card.product-box.product-box.product-box .na-row-side .na-row-buy .product-action{
    order:0; flex:1 1 auto !important; min-width:0; width:auto !important; margin:0 !important; padding:0 !important; justify-self:auto;
  }
  html body .card.product-box.product-box.product-box .na-row-side .product-action .buy-widget{ display:flex !important; align-items:center; gap:8px !important; width:100%; }
  html body .card.product-box.product-box.product-box .na-row-side .product-action form{ flex:1 1 auto; min-width:0; }
  html body .card.product-box.product-box.product-box .na-row-side .product-action .na-row-qty{ flex:0 0 56px; width:56px !important; height:44px !important; min-height:44px !important; }
  html body .card.product-box.product-box.product-box .na-row-side .product-action .d-grid{ display:flex !important; flex:1 1 auto; min-width:0; }
  html body .card.product-box.product-box.product-box .na-row-side .product-action .btn-buy{ flex:1 1 auto; width:100% !important; height:44px !important; min-height:44px !important; padding:0 12px !important; }
  html body .card.product-box.product-box.product-box .na-row-side .product-action .na-row-login{ width:100% !important; height:44px !important; min-height:44px !important; }
  /* Merkzettel-Seite: ohne Herz (Entfernen-X oben rechts), Button volle Breite */
  html body .card.product-box.box-wishlist.product-box.product-box .na-row-side .na-row-buy .product-wishlist{ display:none !important; }

  /* T5 Merkzettel: Zeile 2 nicht unter dem Entfernen-X */
  html body .card.product-box.box-wishlist.product-box.product-box .na-row-l2{ padding-right:36px; }

  /* T4 Finder-Felder 44 px */
  body .header-main .na-hdr .na-hdr-finder{ --na-btn-height:44px; }
}

/* ==========================================================================
   FRONTEND-008 Korrektur R10 nach CW-FE008-SAMMEL-3 (03.11.2026), nur NA (NA-ARCH-DESIGN-001)
   Uebersteuert die FRONTEND-008-Abschnitte oben. PASS aus SAMMEL-3 (Kaufbereich mobil P3, Desktop-Hoehe P1, Finder-Felder P5,
   Klicktests, Filter, kein horizontales Scrollen, TE) bleibt unveraendert. Soll mobil (Entscheidung Rabih 03.11.2026):
   angemeldet <= 180 px (Name 1-zeilig) / <= 200 px (2-zeilig), abgemeldet <= 170 px, Bedienelemente 44 px.
   U1 Desktop/Tablet: R9 hatte die fr-Zeilen durch auto-Zeilen ersetzt; die Hoehe der Kaufspalte wurde dadurch auf Name und
      Infozeilen verteilt (24 px Luecke, Tablet 2-zeilig 126 bis 129 px). Mit Mindesthoehe 0 (R9) wieder fr-Zeilen oben und unten:
      Name und Infozeilen direkt untereinander, Block mittig. Hoehen wie P1 (ca. 98 / 92 px), Tablet <= 110 px.
   U2 Mobil: Zeile 2 und 3 kleiner (11.5 px, Zeilenhoehe 15 px), Bild 48 px, Abstand an der Trennlinie 6 px, Innenabstand 6 px, Preis zu Kaufzeile 4 px. Ziel: Zeile 2
      hoechstens 2 Zeilen neben dem Bild.
   U3 Merkzettel mobil: Name und Zeile 2 halten rechts 44 px frei, Entfernen-X in der Ecke oben rechts.
   ========================================================================== */

/* U1 Desktop/Tablet: fr-Zeilen oben und unten, Inhalt dazwischen */
html body .card.product-box.product-box.product-box > .card-body{ grid-template-rows:minmax(0,1fr) auto auto auto minmax(0,1fr) !important; }
html body .card.product-box.product-box.product-box .product-info > :is(.product-name-headline, a.product-name){ grid-row:2; align-self:auto; }
html body .card.product-box.product-box.product-box .product-variant-characteristics{ grid-row:3; }
html body .card.product-box.product-box.product-box .na-row-meta{ grid-row:4; align-self:auto; }
@media (min-width:601px) and (max-width:1023.98px){
  html body .card.product-box.product-box.product-box :is(.na-row-l2, .na-row-l3){ gap:1px 8px; }
}

@media (max-width:600px){
  /* Mobil bleibt bei 5 Zeilen (R9); nur die Zeilennummern neu, weil U1 oben die Desktop-Zeilen setzt */
  html body .card.product-box.product-box.product-box > .card-body{ grid-template-rows:auto auto auto auto auto !important; grid-template-columns:48px minmax(0,1fr); }
  html body .card.product-box.product-box.product-box .product-info > :is(.product-name-headline, a.product-name){ grid-row:1; align-self:start; }
  html body .card.product-box.product-box.product-box .product-variant-characteristics{ grid-row:2; }

  /* U2 kompakter */
  html body .card.product-box.product-box.product-box .product-image-wrapper{ width:48px !important; height:48px !important; }
  html body .card.product-box.product-box.product-box .product-image-wrapper img{ max-height:48px !important; }
  html body .card.product-box.product-box.product-box :is(.na-row-l2, .na-row-l3){ font-size:11.5px; line-height:15px; gap:0 6px; }
  html body .card.product-box.product-box.product-box :is(.na-row-l2, .na-row-l3) :is(.na-row-delivery .delivery-information, .na-can-box){ font-size:11.5px !important; line-height:15px; }
  html body .card.product-box.product-box.product-box .na-row-tag{ line-height:15px; padding:0 6px; }
  html body .card.product-box.product-box.product-box .na-row-l3{ margin-top:4px; margin-bottom:6px; }
  html body .card.product-box.product-box.product-box > .card-body{ padding:6px 12px !important; }
  html body .card.product-box.product-box.product-box .na-row-side{ padding-top:6px !important; gap:4px !important; }

  /* U3 Merkzettel: rechts 44 px fuer das Entfernen-X */
  html body .card.product-box.box-wishlist.product-box.product-box .product-info > :is(.product-name-headline, a.product-name),
  html body .card.product-box.box-wishlist.product-box.product-box .na-row-l2{ padding-right:44px; }
  html body .card.product-box.box-wishlist.product-box.product-box .product-wishlist-remove{ top:4px !important; right:4px !important; }
}

/* ==========================================================================
   FRONTEND-008 Korrektur R11 Artikelzeile nach CW-FE008-SAMMEL-4 (03.11.2026), nur NA (NA-ARCH-DESIGN-001)
   PASS aus SAMMEL-4 bleibt (Desktop 98/88, Abstand Name zu Zeile 2, abgemeldet mobil/Tablet). Soll mobil angemeldet <= 180 / <= 200 px,
   Tablet <= 110 px. V1 mobil: Abstand an der Trennlinie 4 px, Innenabstand 5 px (ca. 6 px weniger). V2 Tablet: Name 13,5/17 px,
   Zeile 2 und 3 11,5/15 px, Innenabstand 5 px (2-zeiliger Name ca. 10 px weniger). V3 Merkzettel mobil: Entfernen-X in der Ecke.
   ========================================================================== */
@media (min-width:601px) and (max-width:1023.98px){
  html body .card.product-box.product-box.product-box > .card-body{ padding-top:5px !important; padding-bottom:5px !important; }
  html body .card.product-box.product-box.product-box .product-name{ font-size:13.5px !important; line-height:17px !important; }
  html body .card.product-box.product-box.product-box :is(.na-row-l2, .na-row-l3){ font-size:11.5px; line-height:15px; }
  html body .card.product-box.product-box.product-box .na-row-meta{ margin-top:1px; gap:1px; }
}
@media (max-width:600px){
  html body .card.product-box.product-box.product-box > .card-body{ padding:5px 12px !important; }
  html body .card.product-box.product-box.product-box .na-row-l3{ margin-bottom:4px; }
  html body .card.product-box.product-box.product-box .na-row-side{ padding-top:4px !important; }
  html body .card.product-box.box-wishlist.product-box.product-box .product-wishlist-remove{
    position:absolute !important; inset:2px 2px auto auto !important; top:2px !important; right:2px !important; margin:0 !important; transform:none !important; z-index:3;
  }
  html body .card.product-box.box-wishlist.product-box.product-box .product-wishlist-remove :is(form, .product-wishlist-form){ margin:0 !important; padding:0 !important; }
  html body .card.product-box.box-wishlist.product-box.product-box .product-wishlist-remove .product-wishlist-btn{ margin:0 !important; width:32px !important; height:32px !important; min-width:32px; }
  html body .card.product-box.box-wishlist.product-box.product-box .product-info > :is(.product-name-headline, a.product-name),
  html body .card.product-box.box-wishlist.product-box.product-box .na-row-l2{ padding-right:26px; }
}

/* ==========================================================================
   FRONTEND-008 Korrektur R12 Artikelzeile nach CW-FE008-SAMMEL-5 (03.11.2026), nur NA (NA-ARCH-DESIGN-001)
   PASS aus SAMMEL-5 bleibt (Desktop 98/88, Suche/Geraeteseite mobil 179/197, Kaufbereich, Klicktests, TE).
   W1 /Hardware/ mobil angemeldet 186 px: Zeile 3 brach um, wenn der Lieferstatus lang ist („Nicht auf Lager Lieferzeit 3-4 Tage“)
      und „Eigene Referenz anlegen“ dazukommt (+15 px). Zeile 3 jetzt einzeilig, die Referenz wird bei Platzmangel gekuerzt (…).
   W2 Tablet Geraeteseite angemeldet, Name 2-zeilig 112 px: Innenabstand 4 px, Infozeilen ohne Abstand oben (ca. 3 px weniger).
   W3 Merkzettel mobil: Entfernen-X stand 27 px von der Ecke (absolute Lage griff nicht verlaesslich). Jetzt ohne absolute Lage im
      Raster der Karte (Zeile 1, rechts), mit negativem Rand 2 px in die Ecke, ohne Einfluss auf die Zeilenhoehe.
   ========================================================================== */
@media (min-width:601px) and (max-width:1023.98px){
  html body .card.product-box.product-box.product-box > .card-body{ padding-top:4px !important; padding-bottom:4px !important; }
  html body .card.product-box.product-box.product-box .na-row-meta{ margin-top:0; }
}
@media (max-width:600px){
  /* W1 Zeile 3 einzeilig */
  html body .card.product-box.product-box.product-box .na-row-l3{ flex-wrap:nowrap !important; min-width:0; overflow:hidden; }
  html body .card.product-box.product-box.product-box .na-row-l3 > .na-row-delivery{ flex:0 0 auto; }
  html body .card.product-box.product-box.product-box .na-row-l3 .delivery-information{ white-space:nowrap; }
  html body .card.product-box.product-box.product-box .na-row-l3 > .na-can-box{ flex:0 1 auto; min-width:0; overflow:hidden; white-space:nowrap; }
  html body .card.product-box.product-box.product-box .na-row-l3 > .na-can-box :is(.na-can-edit, .na-can-value){ display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  /* W3 Merkzettel: Entfernen-X in der Ecke */
  html body .card.product-box.box-wishlist.product-box.product-box > .card-body > .product-wishlist-remove{
    position:relative !important; inset:auto !important; top:auto !important; right:auto !important; bottom:auto !important; left:auto !important;
    transform:none !important; grid-column:2 !important; grid-row:1 !important; justify-self:end; align-self:start; z-index:3;
    display:flex; width:32px; height:32px; margin:-3px -10px -29px 0 !important;
  }
  html body .card.product-box.box-wishlist.product-box.product-box > .card-body > .product-wishlist-remove .product-wishlist-form{ display:flex; margin:0 !important; padding:0 !important; }
}

/* ==========================================================================
   FRONTEND-008 PDP Feinschliff P3 (03.11.2026, Vorgabe Rabih nach CW-FE008-PDP-2, ersetzt den Abschnitt P2), nur NA (NA-ARCH-DESIGN-001)
   Markup unveraendert aus P2: component/buy-widget/buy-widget.html.twig, element/cms-element-product-name.html.twig, public/na-pdp.js.
   Eine Box (Galerie + Kaufbox als ein Raster, Zwischen-Container mit display:contents). Der Kaufbereich (Kern-Container mit
   itemprop=offers: Preis, „zzgl. MwSt. und Versand“, Menge + Button bzw. „Anmelden für Preise“) bleibt EIN Block.
   Desktop ab 1100 px: Bild 220 px | Name + Herz rechts daneben, Zeile 2, Zeile 3, Passt-Hinweis | Kaufbereich, in der Box mittig.
   Tablet 768 bis 1099 px: Bild 150 px | Name + Herz, Zeilen, Passt-Hinweis, darunter Kaufbereich; Reiter einzeilig.
   Mobil: volle Breite wie die Suche (Seitenrand 16 px), Bild 96 px | Name + Herz, Zeile 2; darunter Zeile 3, Passt-Hinweis
   (Platz fest reserviert), Kaufbereich: Preis + Hinweis in einer Zeile, Menge + Button bis zum rechten Rand.
   Blau #0654b0 staerker: Box-Akzent oben, Preis, Kaufbereich hinterlegt, aktiver Reiter. Radien 10/14/999, Bedienelemente 44 px.
   Grossansicht (Zoom-Fenster liegt im Markup in der Galerie): alle Groessenregeln der kleinen Galerie gelten nicht im Zoom-Fenster.
   ========================================================================== */
body.is-ctl-product{ --na-pdp-blue:#0654b0; --na-pdp-line:#e5e7eb; --na-pdp-mut:#6b7280; --na-pdp-soft:#f4f8fd; --na-pdp-soft-line:#d6e3f4; }
body.is-ctl-product .cms-block-product-heading{ display:none !important; }
body.is-ctl-product :is(.na-pdp-center-meta, .na-can-detail, .product-detail-ordernumber-container, .product-detail-buy .product-detail-delivery-information){ display:none !important; }
body.is-ctl-product :is(.magnifier-overlay, .magnifier-zoom-image){ display:none !important; }
body.is-ctl-product .product-detail-tabs.na-pdp-tabs-done{ display:none !important; }
body.is-ctl-product .cms-element-buy-box :is(.product-detail-reviews, .product-detail-ordernumber-container){ display:none !important; }
body.is-ctl-product .cms-element-buy-box > [class^="product-detail-buy"] > div[itemprop="brand"]{ display:none !important; }

/* Box */
body.is-ctl-product .cms-block-gallery-buybox .cms-block-container-row.cms-row{
  display:grid !important; grid-template-columns:220px minmax(0,1fr) 44px minmax(260px,300px);
  grid-template-rows:auto auto auto auto minmax(0,1fr); column-gap:16px; row-gap:10px; align-items:start;
  margin:0 0 20px !important; padding:20px 24px; background:#fff;
  border:1px solid var(--na-pdp-soft-line); border-top:3px solid var(--na-pdp-blue); border-radius:14px; box-shadow:0 2px 6px rgba(6,84,176,.06);
  --na-btn-height:44px; --na-btn-height-main:44px;
}
body.is-ctl-product .cms-block-gallery-buybox .cms-row > :is(.product-detail-media, .product-detail-buy){ width:auto !important; max-width:none !important; flex:none !important; padding:0 !important; margin:0 !important; }
body.is-ctl-product .cms-block-gallery-buybox :is(.product-detail-buy, .cms-element-buy-box, .cms-element-buy-box > [class^="product-detail-buy"],
  .na-pdp-head, .na-pdp-head .na-row-meta){ display:contents !important; }

/* Bild, Klick = Grossansicht (nicht im Zoom-Fenster) */
body.is-ctl-product .cms-block-gallery-buybox .product-detail-media{ grid-column:1; grid-row:1 / -1; align-self:start; }
body.is-ctl-product .product-detail-media .cms-element-image-gallery{ --na-pdp-img:220px; width:var(--na-pdp-img); }
body.is-ctl-product .product-detail-media .gallery-slider-row:not(.zoom-modal *){ margin:0 !important; }
body.is-ctl-product .product-detail-media .gallery-slider-col:not(.zoom-modal *){ padding:0 !important; width:var(--na-pdp-img); flex:none; }
body.is-ctl-product .product-detail-media :is(.gallery-slider-single-image, .gallery-slider-item):not(.zoom-modal *){
  min-height:0 !important; height:var(--na-pdp-img) !important; width:var(--na-pdp-img); cursor:zoom-in; border-radius:10px; overflow:hidden;
}
body.is-ctl-product .product-detail-media .gallery-slider-image:not(.zoom-modal *){ cursor:zoom-in; }
body.is-ctl-product .product-detail-media :is(.gallery-slider-thumbnails-col, .gallery-slider-controls, .base-slider-dots, .gallery-slider-thumbnails):not(.zoom-modal *){ display:none !important; }

/* Mitte: Name + Herz, Zeile 2, Zeile 3, Passt-Hinweis */
body.is-ctl-product .na-pdp-name{ grid-column:2; grid-row:1; align-self:center; margin:0 !important; font-size:22px !important; line-height:1.3 !important; font-weight:700 !important; color:#1f2937; text-align:left; }
body.is-ctl-product .cms-element-buy-box .product-wishlist{ grid-column:3; grid-row:1; align-self:start; position:relative !important; inset:auto !important; transform:none !important; margin:0 !important; width:44px; height:44px; }
body.is-ctl-product .na-pdp-head .na-row-l2{ grid-column:2 / 4; grid-row:2; }
body.is-ctl-product .na-pdp-head .na-row-l3{ grid-column:2 / 4; grid-row:3; }
body.is-ctl-product .na-pdp-fit-slot{ grid-column:2 / 4; grid-row:4; min-height:36px; display:flex; align-items:center; }
body.is-ctl-product .na-pdp-head :is(.na-row-l2, .na-row-l3){ display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; font-size:14px; line-height:20px; color:var(--na-pdp-mut); min-width:0; }
body.is-ctl-product .na-pdp-head .na-row-tag{ font-size:12px; font-weight:600; line-height:18px; padding:1px 9px; border-radius:999px; }
body.is-ctl-product .na-pdp-head .na-row-tag--orig{ background:#eaf2fb; color:#0b3a6e; }
body.is-ctl-product .na-pdp-head .na-row-tag--komp{ background:#ecfdf3; color:#166534; }
body.is-ctl-product .na-pdp-head .na-row-tag--hw{ background:#f3f4f6; color:#374151; }
body.is-ctl-product .na-pdp-head .na-row-color{ display:inline-flex; align-items:center; gap:6px; }
body.is-ctl-product .na-pdp-head :is(.na-row-color i, .na-row-colors .na-row-dot){ display:inline-block; width:10px; height:10px; border-radius:50%; background:#9ca3af; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); }
body.is-ctl-product .na-pdp-head .na-row-colors{ display:inline-flex; align-items:center; gap:4px; }
body.is-ctl-product .na-pdp-head :is(.na-row-color--k i, .na-row-dot.na-row-color--k){ background:#111827; }
body.is-ctl-product .na-pdp-head :is(.na-row-color--c i, .na-row-dot.na-row-color--c){ background:#06b6d4; }
body.is-ctl-product .na-pdp-head :is(.na-row-color--m i, .na-row-dot.na-row-color--m){ background:#db2777; }
body.is-ctl-product .na-pdp-head :is(.na-row-color--y i, .na-row-dot.na-row-color--y){ background:#facc15; }
body.is-ctl-product .na-pdp-head :is(.na-row-color--r i, .na-row-dot.na-row-color--r){ background:#dc2626; }
body.is-ctl-product .na-pdp-head :is(.na-row-color--b i, .na-row-dot.na-row-color--b){ background:#2563eb; }
body.is-ctl-product .na-pdp-head :is(.na-row-color--g i, .na-row-dot.na-row-color--g){ background:#16a34a; }
body.is-ctl-product .na-pdp-head .na-row-delivery .product-delivery-information{ margin:0 !important; padding:0 !important; }
body.is-ctl-product .na-pdp-head .na-row-delivery .delivery-information{ display:inline-flex !important; align-items:center; gap:0 6px; margin:0 !important; padding:0 !important; font-size:14px !important; color:#374151 !important; white-space:nowrap; }
body.is-ctl-product .na-pdp-head .na-row-delivery .delivery-information br{ display:none; }
body.is-ctl-product .na-pdp-head .na-row-delivery .delivery-status-indicator{ display:inline-block !important; width:8px !important; height:8px !important; min-width:8px; border-radius:50% !important; margin:0 !important; background:#16a34a !important; }
body.is-ctl-product .na-pdp-head .na-row-delivery .delivery-status-indicator::before{ content:none !important; }
body.is-ctl-product .na-pdp-head .na-row-delivery :is(.delivery-soldout, .delivery-preorder) .delivery-status-indicator{ background:#f59e0b !important; }
body.is-ctl-product .na-pdp-head .na-row-delivery .delivery-not-available .delivery-status-indicator{ background:#dc2626 !important; }
body.is-ctl-product .na-pdp-head .na-row-l3 .na-can-box{ margin:0 !important; font-size:14px; color:var(--na-pdp-blue); }
body.is-ctl-product .na-pdp-head .na-row-l3 .na-can-box-empty .na-can-edit{ color:var(--na-pdp-mut); }
body.is-ctl-product .na-pdp-fit{
  display:inline-flex; align-items:center; gap:10px; min-height:36px; padding:6px 16px 6px 7px; border:1px solid #bcd3ef; border-radius:999px;
  background:#eaf2fb; color:#1f2937; font-size:14px; line-height:1.3; text-decoration:none;
}
body.is-ctl-product .na-pdp-fit:hover{ border-color:var(--na-pdp-blue); color:#1f2937; text-decoration:none; }
body.is-ctl-product .na-pdp-fit-ic{ flex:0 0 22px; width:22px; height:22px; border-radius:50%; background:var(--na-pdp-blue); color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; }
body.is-ctl-product .na-pdp-fit-lnk{ color:var(--na-pdp-blue); font-weight:700; white-space:nowrap; }
body.is-ctl-product .na-pdp-fit-lnk::before{ content:"· "; color:var(--na-pdp-mut); font-weight:400; }

/* Rechts: Kaufbereich als eine Einheit, in der Box mittig */
body.is-ctl-product .cms-element-buy-box > [class^="product-detail-buy"] > div:not([class]):not([itemprop="brand"]){
  grid-column:4; grid-row:1 / -1; align-self:center; display:flex; flex-direction:column; gap:10px; min-width:0;
  padding:16px; background:var(--na-pdp-soft); border:1px solid var(--na-pdp-soft-line); border-radius:10px;
}
body.is-ctl-product .cms-element-buy-box :is(.product-detail-price-container, .product-detail-tax-container, .product-detail-configurator-container, .product-detail-price-unit){ margin:0 !important; text-align:left; }
body.is-ctl-product .cms-element-buy-box .product-detail-tax-container{ margin-top:-8px !important; }
body.is-ctl-product .cms-element-buy-box .product-detail-price{ font-size:28px !important; line-height:1.15; font-weight:700; color:var(--na-pdp-blue) !important; margin:0 !important; }
body.is-ctl-product .cms-element-buy-box .product-detail-tax{ margin:0 !important; }
body.is-ctl-product .cms-element-buy-box .na-pdp-taxlink{ padding:0 !important; border:0; background:none; font-size:13px !important; color:var(--na-pdp-mut) !important; text-decoration:underline; text-underline-offset:2px; }
body.is-ctl-product .cms-element-buy-box .na-pdp-taxlink:hover{ color:var(--na-pdp-blue) !important; }
body.is-ctl-product .cms-element-buy-box .na-b2b-login-note{ margin:0; font-size:14px; color:var(--na-pdp-mut); }
body.is-ctl-product .cms-element-buy-box .product-detail-form-container{ margin:0 !important; min-width:0; }
body.is-ctl-product .cms-element-buy-box .product-wishlist .product-wishlist-btn{
  position:relative !important; width:44px !important; height:44px !important; min-width:44px; padding:0 !important; margin:0 !important;
  display:inline-flex !important; align-items:center; justify-content:center; border:1px solid var(--na-pdp-soft-line) !important; border-radius:50% !important;
  background:#fff !important; color:var(--na-pdp-mut) !important; box-shadow:none !important; overflow:hidden;
}
body.is-ctl-product .cms-element-buy-box .product-wishlist .product-wishlist-btn::before{ content:none !important; display:none !important; }
body.is-ctl-product .cms-element-buy-box .product-wishlist :is(.product-wishlist-btn:hover, .product-wishlist-added){ color:#dc2626 !important; border-color:#fecaca !important; }
body.is-ctl-product .cms-element-buy-box .product-wishlist .icon{ width:20px !important; height:20px !important; color:inherit !important; }
body.is-ctl-product .cms-element-buy-box .product-detail-form-container .buy-widget-container{ display:flex !important; flex-wrap:nowrap; align-items:center; gap:8px; margin:0 !important; }
body.is-ctl-product .cms-element-buy-box .product-detail-form-container .buy-widget-container > *{ padding:0 !important; margin:0 !important; width:auto; max-width:none; }
body.is-ctl-product .cms-element-buy-box .product-detail-form-container .buy-widget-container > fieldset{ flex:0 0 120px; display:flex; align-items:center; justify-content:flex-start !important; }
body.is-ctl-product .cms-element-buy-box .product-detail-form-container .buy-widget-container > div:last-of-type{ flex:1 1 auto; min-width:0; }
body.is-ctl-product .cms-element-buy-box .product-detail-form-container .quantity-selector-group{ display:flex; flex-wrap:nowrap; width:120px !important; height:44px; }
body.is-ctl-product .cms-element-buy-box .product-detail-form-container .quantity-selector-group :is(.btn, .form-control, input){ height:44px !important; min-height:44px !important; }
body.is-ctl-product .cms-element-buy-box .product-detail-form-container .quantity-selector-group .btn{ flex:0 0 36px; width:36px; padding:0 !important; }
body.is-ctl-product .cms-element-buy-box .product-detail-form-container .quantity-selector-group :is(.form-control, input){ flex:1 1 auto; min-width:0; padding:0 2px !important; text-align:center; }
body.is-ctl-product .cms-element-buy-box .product-detail-form-container .btn-buy{ width:100%; height:44px !important; min-height:44px !important; border-radius:10px !important; font-weight:600; white-space:nowrap; }
body.is-ctl-product .cms-element-buy-box .na-pdp-login{
  display:flex !important; align-items:center; justify-content:center; width:100%; height:44px; padding:0 16px !important; border:1px solid var(--na-pdp-blue) !important;
  border-radius:10px !important; background:#fff !important; color:var(--na-pdp-blue) !important; font-size:15px; font-weight:600; text-decoration:none; white-space:nowrap;
}
body.is-ctl-product .cms-element-buy-box .na-pdp-login:hover{ background:#eaf2fb !important; }

/* Reiter (Desktop) / Aufklapper (mobil) */
body.is-ctl-product .na-pdp-tabs{ margin:0 0 24px; }
body.is-ctl-product .na-pdp-tabnav{ display:flex; flex-wrap:nowrap; gap:4px; border-bottom:1px solid var(--na-pdp-line); margin-bottom:0; }
body.is-ctl-product .na-pdp-tabbtn{
  appearance:none; border:1px solid transparent; border-bottom:0; background:none; margin:0 0 -1px; padding:0 18px; height:44px; white-space:nowrap;
  border-radius:10px 10px 0 0; font-size:15px; font-weight:600; color:var(--na-pdp-mut); cursor:pointer;
}
body.is-ctl-product .na-pdp-tabbtn:hover{ color:var(--na-pdp-blue); }
body.is-ctl-product .na-pdp-tabbtn.is-active{ background:#fff; border-color:var(--na-pdp-line); color:var(--na-pdp-blue); box-shadow:inset 0 3px 0 var(--na-pdp-blue); }
body.is-ctl-product .na-pdp-tab{ display:none; background:#fff; border:1px solid var(--na-pdp-line); border-top:0; border-radius:0 0 14px 14px; }
body.is-ctl-product .na-pdp-tab.is-active{ display:block; }
body.is-ctl-product .na-pdp-tab-h{ display:none; }
body.is-ctl-product .na-pdp-tab-b{ padding:18px 20px; }
body.is-ctl-product .na-pdp-tab-b .product-detail-description{ padding:0 !important; }
body.is-ctl-product :is(.na-pdp-tabs, .na-pdp-tab){ scroll-margin-top:calc(var(--na-sticky-h, 137px) + 12px); }
body.is-ctl-product .na-pdp-tech-t{ width:100%; max-width:640px; border-collapse:collapse; font-size:14px; }
body.is-ctl-product .na-pdp-tech-t :is(th, td){ padding:7px 0; border-top:1px solid var(--na-pdp-line); vertical-align:top; text-align:left; }
body.is-ctl-product .na-pdp-tech-t tr:first-child :is(th, td){ border-top:0; }
body.is-ctl-product .na-pdp-tech-t th{ width:180px; padding-right:16px; font-weight:600; color:var(--na-pdp-mut); }
body.is-ctl-product .na-pdp-tech-t td{ color:#2b3136; word-break:break-word; }
body.is-ctl-product .na-pdp-dev{ display:flex; flex-direction:column; gap:16px; }
body.is-ctl-product :is(.na-pdp-dev-loading, .na-pdp-dev-empty){ margin:0; color:var(--na-pdp-mut); }
body.is-ctl-product .na-pdp-brand + .na-pdp-brand{ border-top:1px solid var(--na-pdp-line); padding-top:16px; }
body.is-ctl-product .na-pdp-brand-h{ margin:0 0 10px; font-size:17px; font-weight:400; }
body.is-ctl-product .na-pdp-brand-n{ color:var(--na-pdp-mut); font-size:14px; }
body.is-ctl-product .na-pdp-row{ display:grid; grid-template-columns:150px minmax(0,1fr); gap:16px; padding:12px 0; border-top:1px solid var(--na-pdp-line); }
body.is-ctl-product .na-pdp-brand-h + .na-pdp-row{ border-top:0; padding-top:0; }
body.is-ctl-product .na-pdp-ser{ font-size:12px; font-weight:700; color:var(--na-pdp-mut); text-transform:uppercase; letter-spacing:.04em; padding-top:6px; }
body.is-ctl-product .na-pdp-ser small{ display:block; margin-top:2px; font-size:12px; font-weight:400; text-transform:none; letter-spacing:0; }
body.is-ctl-product .na-pdp-chips{ display:flex; flex-wrap:wrap; gap:6px; }
body.is-ctl-product .na-pdp-chip{
  display:inline-flex; align-items:center; min-height:32px; padding:0 12px; border:1px solid #e2e8f0; border-radius:999px; background:#f1f5f9;
  color:#1f2937; font-size:13px; line-height:1.2; white-space:nowrap; text-decoration:none;
}
body.is-ctl-product .na-pdp-chip:hover{ border-color:var(--na-pdp-blue); color:var(--na-pdp-blue); text-decoration:none; }

/* Tablet 768 bis 1099 px: Kaufbereich unter Name und Infozeilen, Reiter einzeilig */
@media (min-width:768px) and (max-width:1099.98px){
  body.is-ctl-product .cms-block-gallery-buybox .cms-block-container-row.cms-row{ grid-template-columns:150px minmax(0,1fr) 44px; grid-template-rows:auto auto auto auto auto minmax(0,1fr); padding:18px 20px; }
  body.is-ctl-product .product-detail-media .cms-element-image-gallery{ --na-pdp-img:150px; }
  body.is-ctl-product .na-pdp-name{ font-size:20px !important; }
  body.is-ctl-product .cms-element-buy-box > [class^="product-detail-buy"] > div:not([class]):not([itemprop="brand"]){
    grid-column:2 / 4; grid-row:5; align-self:start; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:baseline; gap:6px 12px; padding:14px;
  }
  body.is-ctl-product .cms-element-buy-box .product-detail-tax-container{ margin-top:0 !important; }
  body.is-ctl-product .cms-element-buy-box :is(.product-detail-form-container, .product-detail-configurator-container, .product-detail-price-unit){ grid-column:1 / -1; }
  body.is-ctl-product .cms-element-buy-box .product-detail-form-container{ max-width:440px; }
  body.is-ctl-product .na-pdp-tabbtn{ padding:0 12px; font-size:14px; }
}

/* Mobil */
@media (max-width:767.98px){
  /* volle Breite wie die Suche: .container-main (newactive.css 1.5rem) plus .cms-section .boxed (20 px) gaben doppelten Rand */
  body.is-ctl-product .content-main .container-main{ padding-left:0 !important; padding-right:0 !important; }
  body.is-ctl-product .content-main .cms-section .boxed{ padding-left:16px !important; padding-right:16px !important; }
  body.is-ctl-product .cms-block-gallery-buybox .cms-block-container-row.cms-row{
    grid-template-columns:96px minmax(0,1fr) 44px; grid-template-rows:auto auto minmax(0,1fr) auto auto auto; column-gap:12px; row-gap:10px; padding:14px; margin:0 0 14px !important;
  }
  body.is-ctl-product .cms-block-gallery-buybox .product-detail-media{ grid-column:1; grid-row:1 / span 3; }
  body.is-ctl-product .product-detail-media .cms-element-image-gallery{ --na-pdp-img:96px; }
  body.is-ctl-product .na-pdp-name{ grid-column:2; grid-row:1; align-self:start; font-size:17px !important; line-height:1.3 !important; }
  body.is-ctl-product .cms-element-buy-box .product-wishlist{ grid-column:3; grid-row:1; }
  body.is-ctl-product .na-pdp-head .na-row-l2{ grid-column:2 / 4; grid-row:2; }
  body.is-ctl-product .na-pdp-head .na-row-l3{ grid-column:1 / -1; grid-row:4; }
  body.is-ctl-product .na-pdp-head :is(.na-row-l2, .na-row-l3){ font-size:13px; line-height:18px; gap:4px 10px; }
  body.is-ctl-product .na-pdp-head .na-row-delivery .delivery-information{ font-size:13px !important; }
  body.is-ctl-product .na-pdp-fit-slot{ grid-column:1 / -1; grid-row:5; min-height:46px; }
  body.is-ctl-product .na-pdp-fit{
    display:grid; grid-template-columns:22px minmax(0,1fr); column-gap:10px; align-items:center; min-height:46px; padding:5px 16px 5px 8px;
    font-size:13px; line-height:17px; border-radius:14px;
  }
  body.is-ctl-product .na-pdp-fit-ic{ grid-row:1 / span 2; }
  body.is-ctl-product .na-pdp-fit-t{ grid-column:2; grid-row:1; min-width:0; }
  body.is-ctl-product .na-pdp-fit-lnk{ grid-column:2; grid-row:2; }
  body.is-ctl-product .na-pdp-fit-lnk::before{ content:none; }
  body.is-ctl-product .cms-element-buy-box > [class^="product-detail-buy"] > div:not([class]):not([itemprop="brand"]){
    grid-column:1 / -1; grid-row:6; align-self:start; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:baseline; gap:6px 10px; padding:12px;
  }
  body.is-ctl-product .cms-element-buy-box .product-detail-tax-container{ margin-top:0 !important; }
  body.is-ctl-product .cms-element-buy-box :is(.product-detail-form-container, .product-detail-configurator-container, .product-detail-price-unit){ grid-column:1 / -1; }
  body.is-ctl-product .cms-element-buy-box .product-detail-price{ font-size:22px !important; }
  /* Aufklapper */
  body.is-ctl-product .na-pdp-tabnav{ display:none; }
  body.is-ctl-product .na-pdp-tabs{ display:flex; flex-direction:column; gap:8px; }
  body.is-ctl-product .na-pdp-tab, body.is-ctl-product .na-pdp-tab.is-active{ display:block; border:1px solid var(--na-pdp-line); border-radius:14px; }
  body.is-ctl-product .na-pdp-tab-h{
    display:flex; align-items:center; justify-content:space-between; width:100%; min-height:48px; padding:0 14px; border:0; background:none;
    font-size:16px; font-weight:700; color:#2b3136; text-align:left; cursor:pointer;
  }
  body.is-ctl-product .na-pdp-tab.is-open .na-pdp-tab-h{ color:var(--na-pdp-blue); }
  body.is-ctl-product .na-pdp-tab-h::after{ content:""; flex:0 0 auto; width:9px; height:9px; border-right:2px solid var(--na-pdp-mut); border-bottom:2px solid var(--na-pdp-mut); transform:rotate(45deg); margin:-4px 4px 0 12px; }
  body.is-ctl-product .na-pdp-tab.is-open .na-pdp-tab-h::after{ transform:rotate(225deg); margin-top:4px; border-color:var(--na-pdp-blue); }
  body.is-ctl-product .na-pdp-tab-b{ display:none; padding:0 14px 14px; }
  body.is-ctl-product .na-pdp-tab.is-open .na-pdp-tab-b{ display:block; }
  body.is-ctl-product .na-pdp-tech-t th{ width:130px; }
  body.is-ctl-product .na-pdp-row{ grid-template-columns:1fr; gap:8px; }
  body.is-ctl-product .na-pdp-ser{ padding-top:0; }
  body.is-ctl-product .na-pdp-chip{ min-height:34px; }
}

/* ==========================================================================
   FRONTEND-008 PDP Feinschliff P4 + Merkzettel R13 (03.11.2026, nach CW-FE008-PDP-3 / SAMMEL-6 und Rueckmeldung Rabih), nur NA
   Ergaenzt den Abschnitt P3 (P3 bleibt, PASS aus PDP-3 unveraendert: Bildgroesse, Akzent, mobil volle Breite, Zoom, eine Anfrage).
   V1 Menge und „In den Warenkorb“ auf einer Hoehe (Desktop, Tablet, mobil): newactive.css (Kern, „PDP Quantity + Buy Button Layout v4“)
      setzt .buy-widget-container flex-direction:column und Kinder width:100% mit !important; hier gezielt aufgehoben.
   V2 Desktop ab 1100 px (Rabih): Preis und „zzgl. MwSt. und Versand“ rechtsbuendig; Herz links neben dem Kaufbereich auf dessen Hoehe;
      Passt-Hinweis unten in der Infospalte auf Hoehe der Bildunterkante (Bildrahmen).
   V3 1100 bis 1279 px: Inhalt nur ca. 820 px breit (Bootstrap-Container 960 px), Infospalte war 210 px. Bild 160 px, Kaufbereich 290 px,
      Abstaende 12 px; Passt-Hinweis dort zweizeilig wie mobil.
   V4 Mobil: Kaufbutton rutschte nach dem Laden um 10 px. Platz des Passt-Hinweises jetzt feste Hoehe (46 px) statt Mindesthoehe.
   R13 Merkzettel mobil: Kern-CSS setzt den Button .product-wishlist-btn-remove selbst absolut (top/right 1.5rem = die gemessenen 27 px);
      Button jetzt ohne absolute Lage, die Huelle sitzt seit R12 im Raster 2 px in der Ecke.
   ========================================================================== */
/* V1 */
body.is-ctl-product .cms-block-gallery-buybox .cms-element-buy-box .product-detail-form-container .buy-widget-container{
  flex-direction:row !important; flex-wrap:nowrap !important; align-items:center !important; justify-content:flex-start !important; gap:8px !important;
}
body.is-ctl-product .cms-block-gallery-buybox .cms-element-buy-box .product-detail-form-container .buy-widget-container > fieldset{
  flex:0 0 auto !important; width:auto !important; max-width:none !important; margin:0 !important;
}
body.is-ctl-product .cms-block-gallery-buybox .cms-element-buy-box .product-detail-form-container .buy-widget-container > div:last-of-type{
  flex:1 1 auto !important; width:auto !important; max-width:none !important; min-width:0 !important; display:block !important;
}
body.is-ctl-product .cms-block-gallery-buybox .cms-element-buy-box .product-detail-form-container .quantity-selector-group{ margin:0 !important; width:var(--na-pdp-qty, 112px) !important; }
body.is-ctl-product .cms-block-gallery-buybox .cms-element-buy-box .product-detail-form-container .quantity-selector-group .btn{ flex:0 0 var(--na-pdp-qty-btn, 36px) !important; width:var(--na-pdp-qty-btn, 36px) !important; }
body.is-ctl-product .cms-block-gallery-buybox .cms-element-buy-box .product-detail-form-container .btn-buy{
  width:100% !important; min-width:0 !important; margin:0 !important; padding:0 12px !important;
}

/* V2 Desktop ab 1100 px */
@media (min-width:1100px){
  body.is-ctl-product .cms-block-gallery-buybox .cms-block-container-row.cms-row{
    grid-template-columns:220px minmax(0,1fr) 44px 310px; grid-template-rows:auto auto auto minmax(0,1fr) auto;
  }
  body.is-ctl-product .na-pdp-name{ grid-column:2; align-self:start; }
  body.is-ctl-product .na-pdp-head :is(.na-row-l2, .na-row-l3){ grid-column:2; }
  body.is-ctl-product .na-pdp-fit-slot{ grid-column:2; grid-row:5; align-self:end; height:36px; min-height:0; }
  body.is-ctl-product .cms-element-buy-box .product-wishlist{ grid-column:3; grid-row:1 / -1; align-self:center; }
  body.is-ctl-product .cms-element-buy-box > [class^="product-detail-buy"] > div:not([class]):not([itemprop="brand"]) > :is(.product-detail-price-container, .product-detail-tax-container, .product-detail-price-unit){
    align-self:stretch; text-align:right !important;
  }
  body.is-ctl-product .cms-element-buy-box :is(.product-detail-price-container, .product-detail-tax-container) :is(.product-detail-price, .product-detail-tax){ text-align:right !important; justify-content:flex-end; }
}
/* V3 1100 bis 1279 px */
@media (min-width:1100px) and (max-width:1279.98px){
  body.is-ctl-product .cms-block-gallery-buybox .cms-block-container-row.cms-row{ grid-template-columns:160px minmax(0,1fr) 44px 290px; column-gap:12px; padding:18px 20px; }
  body.is-ctl-product .product-detail-media .cms-element-image-gallery{ --na-pdp-img:160px; }
  body.is-ctl-product .na-pdp-name{ font-size:20px !important; }
  body.is-ctl-product .cms-element-buy-box > [class^="product-detail-buy"] > div:not([class]):not([itemprop="brand"]){ padding:14px; }
  body.is-ctl-product .cms-block-gallery-buybox{ --na-pdp-qty:104px; --na-pdp-qty-btn:32px; }
  body.is-ctl-product .cms-element-buy-box .product-detail-form-container .btn-buy{ font-size:14px !important; }
  body.is-ctl-product .na-pdp-fit-slot{ height:46px; }
  body.is-ctl-product .na-pdp-fit{
    display:grid; grid-template-columns:22px minmax(0,1fr); column-gap:10px; align-items:center; min-height:46px; padding:5px 16px 5px 8px;
    font-size:13px; line-height:17px; border-radius:14px;
  }
  body.is-ctl-product .na-pdp-fit-ic{ grid-row:1 / span 2; }
  body.is-ctl-product .na-pdp-fit-t{ grid-column:2; grid-row:1; min-width:0; }
  body.is-ctl-product .na-pdp-fit-lnk{ grid-column:2; grid-row:2; }
  body.is-ctl-product .na-pdp-fit-lnk::before{ content:none; }
}
/* V4 Mobil */
@media (max-width:767.98px){
  body.is-ctl-product .cms-block-gallery-buybox{ --na-pdp-qty:120px; }
  body.is-ctl-product .na-pdp-fit-slot{ height:46px; min-height:0; overflow:hidden; }
}

/* R13 Merkzettel mobil: Entfernen-Button ohne absolute Lage */
@media (max-width:600px){
  html body .card.product-box.box-wishlist.product-box.product-box > .card-body > .product-wishlist-remove .product-wishlist-btn.product-wishlist-btn-remove{
    position:static !important; inset:auto !important; top:auto !important; right:auto !important; bottom:auto !important; left:auto !important;
    margin:0 !important; width:32px !important; height:32px !important; min-width:32px; transform:none !important;
  }
}

/* ==========================================================================
   FRONTEND-008 PDP Feinschliff P5 (03.11.2026, nach CW-FE008-PDP-4), nur NA (NA-ARCH-DESIGN-001). Ergaenzt P3/P4, PASS aus PDP-4 bleibt.
   X1 Button „In den Warenkorb“ am Desktop nur 112 bis 128 px („n den Warenkorb“): newactive.css (Kern, „Stepper: horizontal + fix widths“)
      setzt das Mengenfeld fest auf 52 px (width/min-width/max-width !important), die Menge wurde dadurch ca. 140 px breit.
      Feld jetzt flexibel; ab 1100 px Menge 104 px (Knoepfe 32 px), Button erwartet 1440 ca. 164 px, 1100 ca. 150 px.
   X2 Mobil rutscht alles ab der Zeile Art.-Nr. nach ca. 1,1 s um ca. 22 px (= eine Namenszeile): die Theme-Schrift Inter kommt mit
      font-display:fallback nach und laeuft breiter als die Ersatzschrift, der Name bekommt eine Zeile mehr. In der Box jetzt eine
      Ersatzschrift mit Inter-Massen (Arial/Roboto mit size-adjust), mobil zusaetzlich Platz fuer 3 Namenszeilen reserviert.
   ========================================================================== */
@font-face{ font-family:"NA Inter Fallback"; src:local("Arial"), local("ArialMT"), local("Helvetica"), local("Roboto"); ascent-override:90.2%; descent-override:22.48%; line-gap-override:0%; size-adjust:107.4%; }
body.is-ctl-product .cms-block-gallery-buybox{ font-family:"Inter", "NA Inter Fallback", sans-serif; }
body.is-ctl-product .cms-block-gallery-buybox :is(.na-pdp-name, .btn, .form-control, button, input){ font-family:inherit; }
body.is-ctl-product .cms-block-gallery-buybox .cms-element-buy-box .product-detail-form-container .quantity-selector-group .quantity-selector-group-input{
  flex:1 1 auto !important; width:auto !important; min-width:0 !important; max-width:none !important;
}
@media (min-width:1100px){
  body.is-ctl-product .cms-block-gallery-buybox{ --na-pdp-qty:104px; --na-pdp-qty-btn:32px; }
  body.is-ctl-product .cms-block-gallery-buybox .cms-element-buy-box .product-detail-form-container .btn-buy{ padding:0 10px !important; overflow:visible; }
}
@media (max-width:767.98px){
  body.is-ctl-product .na-pdp-name{ min-height:calc(3 * 1.3em); }
}

/* ==========================================================================
   FRONTEND-008 PDP Feinschliff P6 (03.11.2026, nach Messung Cowork zu P5), nur NA (NA-ARCH-DESIGN-001). Ergaenzt P3 bis P5.
   Y1 Desktop ab 1100 px: Menge blieb 140 px (Minus 32 / Feld 76 / Plus 32), Button 128 bzw. 112 px, Text abgeschnitten.
      Kaufzeile jetzt als Raster mit fester Mengen-Spalte; Selektoren mit ID-Gewicht (:not(#na-p6)), damit keine Kern-Regel
      (newactive.css „Layout v4“, !important) mehr gewinnt. Menge 104 px (32 / 40 / 32), Button erhaelt den Rest.
      Kaufbereich breiter: ab 1280 px 340 px (Button ca. 196 px), 1100 bis 1279 px 320 px (Button ca. 180 px).
   Y2 Mobil: Bildzelle fest 96 px hoch, damit die Zeile Bild/Name beim Laden des Bildes nicht waechst.
   Tablet 768 und mobile Kaufzeile (PASS aus PDP-4) unveraendert.
   ========================================================================== */
@media (min-width:1100px){
  body.is-ctl-product .cms-block-gallery-buybox .cms-block-container-row.cms-row{ grid-template-columns:220px minmax(0,1fr) 44px 340px; }
  body.is-ctl-product:not(#na-p6) .cms-block-gallery-buybox .cms-element-buy-box .product-detail-form-container .buy-widget-container{
    display:grid !important; grid-template-columns:var(--na-pdp-qty) minmax(0,1fr) !important; column-gap:8px !important; row-gap:0 !important;
    align-items:center !important; width:100% !important; max-width:none !important; margin:0 !important;
  }
  body.is-ctl-product:not(#na-p6) .cms-block-gallery-buybox .cms-element-buy-box .product-detail-form-container .buy-widget-container > :is(fieldset, div){
    width:auto !important; min-width:0 !important; max-width:none !important; flex:none !important; margin:0 !important; padding:0 !important;
  }
  body.is-ctl-product:not(#na-p6) .cms-block-gallery-buybox .cms-element-buy-box .product-detail-form-container .buy-widget-container > fieldset{ grid-column:1; }
  body.is-ctl-product:not(#na-p6) .cms-block-gallery-buybox .cms-element-buy-box .product-detail-form-container .buy-widget-container > div:last-of-type{ grid-column:1 / -1; }
  body.is-ctl-product:not(#na-p6) .cms-block-gallery-buybox .cms-element-buy-box .product-detail-form-container .buy-widget-container > fieldset ~ div:last-of-type{ grid-column:2; }
  body.is-ctl-product:not(#na-p6) .cms-block-gallery-buybox .cms-element-buy-box .product-detail-form-container .product-detail-quantity-group.quantity-selector-group{
    width:var(--na-pdp-qty) !important; min-width:var(--na-pdp-qty) !important; max-width:var(--na-pdp-qty) !important; flex:none !important; margin:0 !important;
  }
  body.is-ctl-product:not(#na-p6) .cms-block-gallery-buybox .cms-element-buy-box .product-detail-form-container .product-detail-quantity-group.quantity-selector-group :is(.btn-minus, .btn-plus){
    flex:0 0 var(--na-pdp-qty-btn) !important; width:var(--na-pdp-qty-btn) !important; min-width:0 !important; max-width:var(--na-pdp-qty-btn) !important;
  }
  body.is-ctl-product:not(#na-p6) .cms-block-gallery-buybox .cms-element-buy-box .product-detail-form-container .product-detail-quantity-group.quantity-selector-group .quantity-selector-group-input{
    flex:1 1 0 !important; width:0 !important; min-width:0 !important; max-width:none !important;
  }
  body.is-ctl-product:not(#na-p6) .cms-block-gallery-buybox .cms-element-buy-box .product-detail-form-container .btn-buy{
    width:100% !important; min-width:0 !important; max-width:none !important; margin:0 !important; padding:0 12px !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
}
@media (min-width:1100px) and (max-width:1279.98px){
  body.is-ctl-product .cms-block-gallery-buybox .cms-block-container-row.cms-row{ grid-template-columns:160px minmax(0,1fr) 44px 320px; }
}
@media (max-width:767.98px){
  body.is-ctl-product .cms-block-gallery-buybox .product-detail-media{ align-self:start; height:96px; }
}

/* ==========================================================================
   FRONTEND-008 PDP Feinschliff P7 (03.11.2026, nach CW-FE008-PDP-5 PASS und Rueckmeldung Rabih zu FE008P6), nur NA (NA-ARCH-DESIGN-001).
   Ergaenzt P3 bis P6, Werte aus PDP-5 (Button-Text, Menge und Button auf einer Hoehe, mobil kein Versatz) bleiben.
   Z1 Lieferstatus im Kaufbereich direkt unter Preis und „zzgl. MwSt. und Versand“ (ab 1100 px rechtsbuendig wie der Preis).
      Nur CSS: der Kern gibt den Lieferstatus im Kaufbereich ohnehin aus (product-detail-delivery-information, bisher ausgeblendet);
      jetzt dort sichtbar und in der Infospalte ausgeblendet. „Ihre Referenz“ bleibt in der Infospalte.
   Z2 Bildrahmen: Rahmen sass an .product-detail-media (newactive.css, 1px, Radius 16), das Bild (Radius 10) ragte 2 px darueber.
      Rahmen jetzt am Bild selbst (1px, Radius 14, border-box), Huelle ohne Rahmen. Grossansicht ausgenommen.
   Z3 Mobil: Platz des Passt-Hinweises 56 px statt 46 px (Inhalt 56 px wurde oben und unten abgeschnitten), weiterhin feste Hoehe.
   ========================================================================== */
/* Z1 */
body.is-ctl-product .na-pdp-head .na-row-delivery{ display:none !important; }
body.is-ctl-product:not(#na-p7) .cms-block-gallery-buybox .cms-element-buy-box .product-detail-delivery-information{ display:block !important; margin:6px 0 0 !important; padding:0 !important; }
body.is-ctl-product .cms-element-buy-box .product-detail-delivery-information .product-delivery-information{ margin:0 !important; padding:0 !important; }
body.is-ctl-product .cms-element-buy-box .product-detail-delivery-information .delivery-information{
  display:inline-flex !important; align-items:center; gap:0 6px; margin:0 !important; padding:0 !important; font-size:14px !important; line-height:20px; color:#374151 !important; white-space:nowrap;
}
body.is-ctl-product .cms-element-buy-box .product-detail-delivery-information .delivery-information br{ display:none; }
body.is-ctl-product .cms-element-buy-box .product-detail-delivery-information .delivery-status-indicator{
  display:inline-block !important; width:8px !important; height:8px !important; min-width:8px; border-radius:50% !important; margin:0 !important; background:#16a34a !important;
}
body.is-ctl-product .cms-element-buy-box .product-detail-delivery-information .delivery-status-indicator::before{ content:none !important; }
body.is-ctl-product .cms-element-buy-box .product-detail-delivery-information :is(.delivery-soldout, .delivery-preorder) .delivery-status-indicator{ background:#f59e0b !important; }
body.is-ctl-product .cms-element-buy-box .product-detail-delivery-information .delivery-not-available .delivery-status-indicator{ background:#dc2626 !important; }
@media (min-width:1100px){
  body.is-ctl-product .cms-element-buy-box > [class^="product-detail-buy"] > div:not([class]):not([itemprop="brand"]) > .product-detail-delivery-information{ align-self:stretch; text-align:right !important; }
}
@media (max-width:767.98px){
  body.is-ctl-product .cms-element-buy-box .product-detail-delivery-information{ grid-column:1 / -1; margin-top:0 !important; }
  body.is-ctl-product .cms-element-buy-box .product-detail-delivery-information .delivery-information{ font-size:13px !important; line-height:18px; }
}
/* Z2 */
body.is-ctl-product:not(#na-p7) .cms-block-gallery-buybox .product-detail-media{ border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; }
body.is-ctl-product .product-detail-media :is(.gallery-slider-single-image, .gallery-slider-item):not(.zoom-modal *){
  box-sizing:border-box; border:1px solid rgba(0,0,0,.08); border-radius:14px; background:#fff;
}
/* Z3 */
@media (max-width:767.98px){
  body.is-ctl-product .na-pdp-fit-slot{ height:56px; }
}

/* ==========================================================================
   FRONTEND-008 PDP Feinschliff P8 (03.11.2026, nach Cowork-Pruefung zu P7), nur NA (NA-ARCH-DESIGN-001). Ergaenzt P3 bis P7.
   Werte aus PDP-5/P7 (Button-Breiten, Menge und Button auf einer Hoehe, mobil kein Versatz, Passt-Hinweis mobil 56 px) bleiben.
   L1 Lieferzeit im Kaufbereich: newactive.css (Kern) setzte .product-delivery-information grid 230 px und p.delivery-information
      flex 190 px, align-items start: zweizeilig, Punkt oben links. Jetzt eine Zeile, Punkt mittig; ab 1100 px rechtsbuendig unter
      Preis und „zzgl. MwSt. und Versand“, Tablet und mobil linksbuendig (Tablet ueber die ganze Kaufbereich-Breite).
   L2 Herz bei 1100 px lag ueber „2.200 Seiten“: Zeile 2 und 3 ab 1100 px fest in der Infospalte, Herz fest in der eigenen Spalte.
   L3 Bildrahmen fuer alle Breiten gleich: Rahmen als Ebene ueber dem Bild (1 px, Radius 14), Bild mit gleichem Radius beschnitten.
   ========================================================================== */
/* L1 */
body.is-ctl-product:not(#na-p8) .cms-block-gallery-buybox .cms-element-buy-box .product-detail-delivery-information{ margin:0 !important; }
body.is-ctl-product:not(#na-p8) .cms-block-gallery-buybox .cms-element-buy-box .product-detail-delivery-information .product-delivery-information{
  display:flex !important; justify-content:flex-start !important; align-items:center !important; width:auto !important; max-width:none !important; min-width:0 !important;
  margin:6px 0 0 !important; padding:0 !important;
}
body.is-ctl-product:not(#na-p8) .cms-block-gallery-buybox .cms-element-buy-box .product-detail-delivery-information p.delivery-information{
  display:inline-flex !important; align-items:center !important; gap:6px !important; width:auto !important; max-width:none !important; min-width:0 !important;
  margin:0 !important; padding:0 !important; white-space:nowrap !important; font-size:13px !important; line-height:18px !important;
}
body.is-ctl-product:not(#na-p8) .cms-block-gallery-buybox .cms-element-buy-box .product-detail-delivery-information .delivery-status-indicator{
  flex:none !important; width:8px !important; height:8px !important; margin:0 !important; align-self:center !important; position:static !important;
}
@media (min-width:1100px){
  body.is-ctl-product:not(#na-p8) .cms-block-gallery-buybox .cms-element-buy-box .product-detail-delivery-information .product-delivery-information{ justify-content:flex-end !important; }
}
@media (max-width:1099.98px){
  body.is-ctl-product .cms-element-buy-box .product-detail-delivery-information{ grid-column:1 / -1; }
}
/* L2 */
@media (min-width:1100px){
  body.is-ctl-product:not(#na-p8) .cms-block-gallery-buybox .na-pdp-head :is(.na-row-l2, .na-row-l3){ grid-column:2 !important; min-width:0 !important; max-width:100% !important; flex-wrap:wrap !important; }
  body.is-ctl-product:not(#na-p8) .cms-block-gallery-buybox .cms-element-buy-box .product-wishlist{ grid-column:3 !important; justify-self:center; }
}
/* L3 */
body.is-ctl-product:not(#na-p8) .product-detail-media :is(.gallery-slider-single-image, .gallery-slider-item):not(.zoom-modal *){ border:0 !important; border-radius:14px !important; overflow:hidden !important; }
body.is-ctl-product .product-detail-media .gallery-slider-col:not(.zoom-modal *){ position:relative; }
body.is-ctl-product .product-detail-media .gallery-slider-col:not(.zoom-modal *)::after{
  content:""; position:absolute; left:0; top:0; width:var(--na-pdp-img); height:var(--na-pdp-img); box-sizing:border-box;
  border:1px solid rgba(0,0,0,.12); border-radius:14px; pointer-events:none; z-index:2;
}

/* ==========================================================================
   FRONTEND-008 PDP Feinschliff P9 (03.11.2026, nach CW-FE008-PDP-7), nur NA (NA-ARCH-DESIGN-001). Sonst PDP-7 PASS, nichts anderes geaendert.
   H1 1100 bis 1279 px: Herz (x 565 bis 609) lag weiter ueber „2.200 Seiten“ (.na-row-cap bis x 568), L2 aus P8 griff dort nicht.
      Zeile 2 und 3 halten rechts 52 px frei (Herz 44 px + 8 px), die Angaben brechen frueher um.
   ========================================================================== */
@media (min-width:1100px) and (max-width:1279.98px){
  body.is-ctl-product:not(#na-p9) .cms-block-gallery-buybox .na-pdp-head :is(.na-row-l2, .na-row-l3){ padding-right:52px !important; box-sizing:border-box !important; }
}

/* ==========================================================================
   FRONTEND-008 PDP Feinschliff P10 (03.11.2026, Messung Cowork nach P9), nur NA (NA-ARCH-DESIGN-001). Ab 1100 px nichts geaendert.
   W1 Bis 1099 px klebte das Herz an der Box-Linie (1024/768: 2 px, 390: -2 px): der Kern-Button .product-wishlist-action-circle
      war um 16 px nach oben/innen versetzt (computed top -16 px, right 16 px). Button jetzt ohne Versatz, Oberkante buendig mit
      dem Namen, Abstand zur Box-Linie = Innenabstand der Box (768: 18 px, 390: 14 px).
   ========================================================================== */
@media (max-width:1099.98px){
  body.is-ctl-product:not(#na-p10) .cms-block-gallery-buybox .cms-element-buy-box .product-wishlist{ position:relative !important; inset:auto !important; top:0 !important; right:0 !important; align-self:start !important; margin:0 !important; }
  body.is-ctl-product:not(#na-p10) .cms-block-gallery-buybox .cms-element-buy-box .product-wishlist .product-wishlist-btn{
    position:static !important; inset:auto !important; top:auto !important; right:auto !important; bottom:auto !important; left:auto !important; margin:0 !important; transform:none !important;
  }
}

/* ==========================================================================
   FRONTEND-008 PDP Feinschliff P11 (03.11.2026, Messung Cowork nach P10), nur NA (NA-ARCH-DESIGN-001).
   F1 Passt-Hinweis bei 1100 bis ca. 1420 px zweizeilig und hoeher als sein Platz (1280: 36 / 50 px, 1100: 46 / 56 px).
      1280 bis 1439 px: Pill einzeilig (Text und „alle anzeigen ↓“ ohne Umbruch, 13 px, engere Abstaende), Text nur notfalls mit „…“.
      1100 bis 1279 px: Text einzeilig, „alle anzeigen ↓“ in Zeile 2 linksbuendig (wie bisher), Platz passt sich an.
      Ab 1100 px Platz ohne feste Hoehe (Hinweis steht unten in der Infospalte, darunter verschiebt sich nichts).
      1440 px und breiter, 1024, 768, 390: unveraendert.
   ========================================================================== */
@media (min-width:1100px) and (max-width:1439.98px){
  body.is-ctl-product:not(#na-p11) .cms-block-gallery-buybox .na-pdp-fit-slot{ height:auto !important; min-height:36px !important; overflow:visible !important; }
  body.is-ctl-product:not(#na-p11) .cms-block-gallery-buybox .na-pdp-fit{ max-width:100%; min-width:0; }
  body.is-ctl-product:not(#na-p11) .cms-block-gallery-buybox .na-pdp-fit-t{ white-space:nowrap !important; overflow:hidden; text-overflow:ellipsis; min-width:0; max-width:none !important; }
  body.is-ctl-product:not(#na-p11) .cms-block-gallery-buybox .na-pdp-fit-lnk{ white-space:nowrap !important; }
}
@media (min-width:1280px) and (max-width:1439.98px){
  body.is-ctl-product:not(#na-p11) .cms-block-gallery-buybox .na-pdp-fit{ display:inline-flex !important; flex-wrap:nowrap !important; gap:8px !important; padding:5px 14px 5px 7px !important; font-size:13px !important; }
  body.is-ctl-product:not(#na-p11) .cms-block-gallery-buybox .na-pdp-fit-t{ flex:0 1 auto; }
  body.is-ctl-product:not(#na-p11) .cms-block-gallery-buybox .na-pdp-fit-lnk{ flex:0 0 auto; }
}

/* ==========================================================================
   FRONTEND-008 Merkzettel R14 (03.11.2026, Hinweis Rabih, Messung Cowork /wishlist), nur NA (NA-ARCH-DESIGN-001). Bis 600 px (R13) unveraendert.
   Ab 601 px sass das Entfernen-X (Kern: .product-wishlist-btn-remove absolut top/right 1.5rem) relativ zur Huelle .product-wishlist-remove
   statt zur Karte und ragte unten heraus (1440: 15 px, 1100: 8 px, 768: 18 px). Jetzt wie R13: X oben rechts in der Karte, 8 px Abstand,
   Huelle als Ecke der Karte, Button ohne eigene Lage; Kaufspalte haelt rechts Platz frei, damit das X nichts ueberdeckt.
   ========================================================================== */
@media (min-width:601px){
  html body:not(#na-r14) .card.product-box.box-wishlist{ position:relative !important; }
  html body:not(#na-r14) .card.product-box.box-wishlist > .card-body{ position:relative !important; }
  html body:not(#na-r14) .card.product-box.box-wishlist > .card-body > .product-wishlist-remove{
    position:absolute !important; inset:auto !important; top:8px !important; right:8px !important; bottom:auto !important; left:auto !important;
    margin:0 !important; transform:none !important; display:flex !important; width:36px !important; height:36px !important; z-index:3;
  }
  html body:not(#na-r14) .card.product-box.box-wishlist > .card-body > .product-wishlist-remove .product-wishlist-form{ display:flex; margin:0 !important; padding:0 !important; }
  html body:not(#na-r14) .card.product-box.box-wishlist > .card-body > .product-wishlist-remove .product-wishlist-btn.product-wishlist-btn-remove{
    position:static !important; inset:auto !important; top:auto !important; right:auto !important; bottom:auto !important; left:auto !important;
    margin:0 !important; width:36px !important; height:36px !important; min-width:36px !important; transform:none !important;
  }
}
@media (min-width:601px) and (max-width:1023.98px){
  html body:not(#na-r14) .card.product-box.box-wishlist > .card-body{ padding-right:52px !important; }
}

/* ==========================================================================
   COMMERCE-003 B1 (04.11.2026, CW-COM003-01 Variante B, freigegeben Rabih): Anmeldeseite nach fehlgeschlagenem Login.
   Meldung (.na-login-hint, role=alert) unter der H1 ueber der Card „Konto aktivieren“, Card mit Rahmen in Primaerfarbe.
   scroll-margin-top: Sprung (Skript in page/account/register/index.html.twig bzw. Anker #na-aktivieren) endet unter der festen Kopfzeile.
   ========================================================================== */
body.na-auth .na-login-hint{ margin:0 0 16px; padding:14px 16px; border-radius:10px; font-size:14px; line-height:1.5; }
body.na-auth .na-login-hint p{ margin:0; }
body.na-auth .na-login-hint .na-login-hint-main{ margin-bottom:4px; }
body.na-auth .na-activate-card.na-activate-card--hinweis{ border:2px solid var(--na-primary); }
body.na-auth #na-login-fehler,
body.na-auth #na-aktivieren{ scroll-margin-top:calc(var(--na-sticky-h, 117px) + 8px); }
@media (max-width:600px){
  body.na-auth .na-login-hint{ margin-bottom:12px; padding:12px; }
}

/* ==========================================================================
   COMMERCE-003 B2 (04.11.2026, CW-COM003-02 Nacharbeit, nur Gestaltung, nur NA): Masken abgemeldet auf /account/login (Card,
   Anmeldung, Registrierung) und /account/recover wie das Kontaktformular (na-contact-form-card): Label 16 px/600, 10 px Abstand,
   Feld 40 px mit 12 px Innenabstand, Radius 10 px, Rahmen #c4ccd6, ca. 22 px Zeilenabstand, Pflichtstern rot, Hinweise klein/grau.
   Button „Anmelden“ 40 px wie alle anderen. Handy: solange die Meldung nach Fehlversuch steht, Meldung und Card kompakter, damit
   Meldung, Card und Button „Konto aktivieren“ unter der festen Kopfzeile ganz sichtbar sind (Befund 334 x 657: Button 15 px unter dem Rand).
   ========================================================================== */
/* Labels und Felder */
body.na-auth .account-register .na-b2b-auth-panel .form-label,
body.na-auth .na-activate-card .form-label,
body.na-auth .account-recover-password .form-label{ font-size:16px; font-weight:600; line-height:1.35; color:var(--na-label); margin-bottom:10px; }
body.na-auth .account-register .na-b2b-auth-panel input.form-control:not([type="checkbox"]):not([type="radio"]),
body.na-auth .na-activate-card input.form-control,
body.na-auth .account-recover-password input.form-control{ padding-left:12px !important; padding-right:12px !important; }
body.na-auth .account-register .na-b2b-auth-panel select.form-select{ padding-left:12px !important; }
body.na-auth .account-register .na-b2b-auth-panel .form-required-label,
body.na-auth .account-recover-password .form-required-label{ color:#c20017; }
/* Zeilenabstand wie Kontaktformular: kein Bootstrap-Zeilenabstand, 22 px unter jedem Feld; leere Fehlerzeilen ohne Hoehe */
body.na-auth .account-register .na-b2b-auth-panel .row.g-2{ --bs-gutter-y:0px; }
body.na-auth .account-register .na-b2b-auth-panel .form-group,
body.na-auth .account-recover-password .form-group{ margin-bottom:22px; }
body.na-auth .account-register .na-b2b-auth-panel .form-field-feedback:not(:has(*)),
body.na-auth .account-recover-password .form-field-feedback:not(:has(*)){ display:none; }
/* Anmeldung: „Passwort vergessen“ als kleiner Link rechts unter dem Passwortfeld, Pflichtfeld-Hinweis, Button 40 px */
body.na-auth .account-register .na-b2b-login-panel .login-password-recover{ margin:-14px 0 16px !important; text-align:right; font-size:14px; line-height:1.4; }
body.na-auth .account-register .na-b2b-login-panel .login-password-recover a{ color:var(--na-primary); text-decoration:none; }
body.na-auth .account-register .na-b2b-login-panel .login-password-recover a:hover,
body.na-auth .account-register .na-b2b-login-panel .login-password-recover a:focus-visible{ text-decoration:underline; }
body.na-auth .account-register .na-b2b-auth-panel .na-login-required-info,
body.na-auth .account-register .na-b2b-register-panel .register-required-info{ margin:0 0 12px; font-size:14px; line-height:1.4; color:var(--na-muted); }
body.na-auth .account-register .na-b2b-login-panel .login-submit .btn{ height:var(--na-btn-height) !important; min-height:var(--na-btn-height) !important; }
/* Registrierung: E-Mail ueber volle Breite (leere Platzhalter-Spalte ausblenden), Passwort-Hinweis klein und grau */
body.na-auth .account-register .na-b2b-register-panel .form-group:has(> #personalMail){ flex:0 0 100%; max-width:100%; }
body.na-auth .account-register .na-b2b-register-panel .row > .form-group:not(:has(*)){ display:none; }
body.na-auth .account-register .na-b2b-register-panel .form-text{ display:block; margin-top:6px; font-size:13px; line-height:1.4; color:var(--na-muted); }
/* Passwort-Wiederherstellung: Ueberschrift wie die H1 der Anmeldeseite */
body.na-auth .account-recover-password .account-recover-password-form > .card-title{ font-size:calc(1.35rem + 1.2vw); line-height:1.2; }
@media (min-width:1200px){
  body.na-auth .account-recover-password .account-recover-password-form > .card-title{ font-size:2.25rem; }
}
/* Handy: kompakt, solange die Meldung nach Fehlversuch steht */
@media (max-width:600px){
  body.na-auth .na-login-hint{ margin-bottom:8px; padding:10px 12px; font-size:13px; line-height:1.4; }
  body.na-auth #na-login-fehler{ scroll-margin-top:calc(var(--na-sticky-h, 109px) + 4px); }
  body.na-auth .na-activate-card.na-activate-card--hinweis{ margin-bottom:16px; }
  body.na-auth .na-activate-card.na-activate-card--hinweis .card-body{ gap:10px; padding:12px; }
  body.na-auth .na-activate-card.na-activate-card--hinweis .na-activate-title{ font-size:16px; margin-bottom:2px; }
  body.na-auth .na-activate-card.na-activate-card--hinweis .na-activate-text{ font-size:13px; line-height:1.4; }
  body.na-auth .na-activate-card.na-activate-card--hinweis .form-label{ margin-bottom:6px; }
}

/* ==========================================================================
   COMMERCE-003 B5 (04.11.2026, Entscheidung Rabih nach Rueckbau auf B2): nur Farben, Aufbau, Breiten, Abstaende und Masse wie B2.
   Vorlage newactive-Seite /page/cms/019d25d0b9557167aa2f7ac80fc4cacf: Hintergrundbild bg_2.png ueber die ganze Seite, dunkle Flaechen
   rgba(0,0,0,.62) mit Radius 14 px wie der Formularbereich, Glas-Kaesten rgba(255,255,255,.10) mit Rahmen rgba(255,255,255,.16),
   Schrift weiss, Felder rgba(255,255,255,.96) mit Rahmen rgba(255,255,255,.45), Feldtext #2b3136, Pflichtstern #c20017, Button Primaerblau.
   Rahmenbreiten bleiben wie B2 (1 px, Card nach Fehlversuch 2 px), damit sich keine Hoehe aendert (Handy-Sichtbarkeit aus B2).
   ========================================================================== */
body.na-auth main.content-main{ background:#2b3136 url('/media/d8/0c/a5/1775023775/bg_2.png?ts=1775023775') center / cover no-repeat; }
body.na-auth .account-register > h1,
body.na-auth .account-register .h1{ color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.45); }
/* Kaesten: dunkel wie der Formularbereich der Vorlage */
body.na-auth .account-register .na-b2b-auth-panel,
body.na-auth .na-activate-card,
body.na-auth .account-recover-password-form{ background:rgba(0,0,0,.62); border-color:rgba(255,255,255,.16); border-radius:14px; box-shadow:0 16px 40px rgba(0,0,0,.16); color:#fff; }
body.na-auth .na-activate-card.na-activate-card--hinweis{ border-color:var(--na-primary); box-shadow:0 0 0 2px rgba(255,255,255,.85), 0 16px 40px rgba(0,0,0,.16); }
/* Kaesten in den Kaesten (Hinweise, Vorteile): Glas wie die Infokaesten der Vorlage */
body.na-auth .account-register .na-b2b-auth-panel .alert-info,
body.na-auth .na-activate-card .alert-info{ --bs-alert-bg:rgba(255,255,255,.10); --bs-alert-border-color:rgba(255,255,255,.16); --bs-alert-color:#fff;
  background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.16); color:#fff; }
body.na-auth .account-register .na-b2b-benefit-card{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.16); color:#fff; }
body.na-auth .na-b2b-benefits-title{ color:#fff; }
/* Schrift */
body.na-auth .account-register .na-b2b-auth-panel .card-title,
body.na-auth .account-register .na-b2b-auth-panel legend,
body.na-auth .account-recover-password .card-title,
body.na-auth .na-activate-card .na-activate-intro,
body.na-auth .na-activate-card .na-activate-title{ color:#fff; }
body.na-auth .account-register .na-b2b-auth-panel .form-label,
body.na-auth .account-register .na-b2b-auth-panel label,
body.na-auth .na-activate-card .form-label,
body.na-auth .account-recover-password .form-label{ color:#fff; }
body.na-auth .account-register .na-b2b-auth-panel :is(.custom-control-label, .form-check-label){ color:#fff !important; }
body.na-auth .account-register .na-b2b-auth-panel .login-form-description,
body.na-auth .account-register .na-b2b-auth-panel .na-login-required-info,
body.na-auth .account-register .na-b2b-register-panel .register-required-info,
body.na-auth .account-register .na-b2b-register-panel .form-text,
body.na-auth .na-activate-card .na-activate-text,
body.na-auth .na-activate-card .na-activate-msg,
body.na-auth .account-recover-password .card-text{ color:rgba(255,255,255,.84); }
body.na-auth .account-register .na-b2b-auth-panel .form-required-label,
body.na-auth .account-recover-password .form-required-label{ color:#c20017; }
/* Links */
body.na-auth .account-register .na-b2b-auth-panel a:not(.btn),
body.na-auth .account-register .na-b2b-auth-panel .btn.btn-link-inline{ color:#fff !important; text-decoration:underline; }
body.na-auth .account-register .na-b2b-login-panel .login-password-recover a{ color:#fff !important; font-weight:600; text-decoration:none; }
body.na-auth .account-register .na-b2b-login-panel .login-password-recover a:hover,
body.na-auth .account-register .na-b2b-login-panel .login-password-recover a:focus-visible{ text-decoration:underline; }
/* Felder wie in der Vorlage */
body.na-auth .account-register .na-b2b-auth-panel input.form-control:not([type="checkbox"]):not([type="radio"]),
body.na-auth .account-register .na-b2b-auth-panel select.form-select,
body.na-auth .na-activate-card .na-activate-fields input.form-control,
body.na-auth .account-recover-password input.form-control{ background-color:rgba(255,255,255,.96) !important; border-color:rgba(255,255,255,.45) !important; color:#2b3136 !important; }
body.na-auth .account-register .na-b2b-auth-panel input.form-control:not([type="checkbox"]):not([type="radio"]):focus,
body.na-auth .account-register .na-b2b-auth-panel select.form-select:focus,
body.na-auth .na-activate-card .na-activate-fields input.form-control:focus,
body.na-auth .account-recover-password input.form-control:focus{ border-color:#fff !important; box-shadow:0 0 0 3px rgba(110,168,255,.55) !important; }
/* Validierung: roter Rahmen (gleiche Breite), Fehlertext hell */
body.na-auth .account-register .na-b2b-auth-panel :is(.form-control, .form-select).is-invalid,
body.na-auth .na-activate-card .na-activate-fields .form-control.is-invalid,
body.na-auth .account-recover-password .form-control.is-invalid{ border-color:#e5484d !important; box-shadow:0 0 0 3px rgba(229,72,77,.45) !important; }
body.na-auth .account-register .na-b2b-auth-panel .form-check-input.is-invalid{ border-color:#e5484d !important; box-shadow:0 0 0 3px rgba(229,72,77,.45) !important; }
body.na-auth .account-register .na-b2b-auth-panel :is(.invalid-feedback, .form-field-feedback),
body.na-auth .na-activate-card .na-activate-msg.text-danger,
body.na-auth .account-recover-password :is(.invalid-feedback, .form-field-feedback){ color:#ffb4b4 !important; }
/* Meldung nach Fehlversuch: deckend hellrot, dunkle Schrift */
body.na-auth .alert-danger.na-login-hint{ --bs-alert-bg:#fde8e8; --bs-alert-border-color:#f5b5b5; --bs-alert-color:#7a1414; background:#fde8e8; border-color:#f5b5b5; color:#7a1414; }
/* Passwortseite: „Zurueck“ als heller Umriss-Button */
body.na-auth .account-recover-password-back.btn-outline-secondary{ background:transparent; color:#fff; border-color:rgba(255,255,255,.7); }

/* ==========================================================================
   COMMERCE-003 B6a (04.11.2026, CW-COM003-06 Handy-Befunde, nur NA, nur abgemeldete Anmeldeseiten): Aufbau und Farben aus B5 bleiben.
   1. /account/recover Handy: gleicher Seitenrand wie /account/login (Theme setzte dort Container und container-main auf je 40 px Gutter),
      Zeile/Spalte ohne Zusatzabstand, Box 16 px Innenabstand; H1 bricht nur am Bindestrich; Buttons einzeilig 40 px.
   2. Fusszeile: Die Theme-Regel „NA B2B AUTH: mobile gutter fix“ (--bs-gutter-x 6px auf jedem .container der Anmeldeseiten) traf auch
      die Fusszeile (3 px statt 20 px). Fusszeile wieder 40 px Gutter wie auf allen anderen Seiten; Inhaltsbereich bleibt wie er ist.
   ========================================================================== */
@media (max-width:767.98px){
  body.na-auth.is-active-route-frontend-account-recover-page .content-main .container{ --bs-gutter-x:6px !important; }
  body.na-auth .account-recover-password{ margin-left:0; margin-right:0; }
  body.na-auth .account-recover-password > [class*="col-"]{ padding-left:0; padding-right:0; }
  body.na-auth .account-recover-password .account-recover-password-form{ padding:16px; }
  body.na-auth .account-recover-password .account-recover-password-form > .card-title{ font-size:min(calc(1.35rem + 1.2vw), 7.2vw); hyphens:manual; overflow-wrap:normal; word-break:normal; }
  body.na-auth .account-recover-password .account-recover-password-form .btn{ white-space:nowrap; height:var(--na-btn-height); min-height:var(--na-btn-height); padding-top:0; padding-bottom:0; display:inline-flex; align-items:center; justify-content:center; }
  body.na-auth :is(.footer-main, .footer-bottom, .footer-minimal) .container{ --bs-gutter-x:40px !important; }
}

/* ==========================================================================
   COMMERCE-003 B6b (04.11.2026, Wuensche Rabih, Vorschau HEADER-VORSCHAU_01 bis _05, nur NA, shopweit, nur Gestaltung):
   3. Kopfzeile Zeile 2 (Suche, Tonerfinder): Hintergrund wie der Seitenstreifen (bg_2.png, cover) statt Babyblau; Felder bleiben weiss.
   4. Kopfzeile Zeile 1 ab 601 px wie mobil: Burger links, Logo mittig, Symbole rechts; Textmenue aus (Punkte stehen im Offcanvas).
      Offcanvas ab 601 px 320 px breit, Innenabstand links ca. 20 px. Hoehen der Kopfzeile unveraendert (--na-sticky-h bleibt).
   5. Seitenstreifen (.na-page-stripe, /Hardware/ und /hersteller) kompakt: Titel-Pille 24 px und Untertitel in einer Zeile, ca. 76 px hoch;
      weniger Abstand darunter. 6. /Hardware/: obere Seitennavigation aus, untere bleibt.
   7. /hersteller: Top-Hersteller-Logos in einer Zeile (12 Spalten, Kachel 52 px, Logo max. 34 px), A-Z-Leiste klebt unter der Kopfzeile;
      Handy: Logos im 4er-Raster, A-Z-Leiste waagerecht wischbar. Untertitel-Text kommt aus der Plugin-Konfiguration (nicht hier).
   ========================================================================== */
/* 3. Zeile 2 */
body .header-main .na-hdr .na-hdr-row2{ background:#0b3a6e url('/media/d8/0c/a5/1775023775/bg_2.png?ts=1775023775') center / cover no-repeat; border-top-color:rgba(255,255,255,.18); }
/* 4. Zeile 1 und Offcanvas ab 601 px */
@media (min-width:601px){
  body .header-main .na-hdr-row1 .na-hdr-wrap{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; }
  body .header-main .na-hdr .na-hdr-burger{ display:inline-flex !important; justify-self:start; }
  body .header-main .na-hdr .na-hdr-menu{ display:none !important; }
  body .header-main .na-hdr .na-hdr-logo{ justify-self:center; }
  body .header-main .na-hdr .na-hdr-icons{ justify-self:end; margin-left:0; }
  body .offcanvas.offcanvas-start:has(.na-hdr-drawer){ --bs-offcanvas-width:320px; width:320px !important; max-width:320px; }
  body .offcanvas .na-hdr-drawer{ padding-left:8px; padding-right:8px; }
}
/* 5. Seitenstreifen kompakt (Inline-Stile der Vorlage, daher !important) */
body main.content-main .na-page-stripe{ margin-bottom:12px !important; }
body main.content-main .na-page-stripe > div{ min-height:0 !important; }
body main.content-main .na-page-stripe > div > div{ max-width:none !important; padding:16px 0 !important; display:flex; flex-wrap:wrap; align-items:center; column-gap:20px; row-gap:8px; }
body main.content-main .na-page-stripe h1{ margin:0 !important; padding:6px 14px !important; font-size:24px !important; line-height:1.25 !important; }
body main.content-main .na-page-stripe p{ margin:0 !important; flex:1 1 320px; min-width:0; line-height:1.5 !important; }
body main.content-main:has(.na-page-stripe) .cms-section .cms-block-container{ padding-top:8px !important; }
/* 6. /Hardware/ obere Seitennavigation */
body main.content-main:has(.na-page-stripe) .listing-pagination-top{ display:none !important; }
/* 7. /hersteller */
body.is-act-brandspage .container-main > .container > div:has(> .na-brand-logos){ margin:20px 0 16px !important; }
body.is-act-brandspage .na-brand-logos-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; }
body.is-act-brandspage .na-brand-logos-item{ height:52px; padding:6px 8px; }
body.is-act-brandspage .na-brand-logos-img{ max-height:34px; }
@media (min-width:576px){ body.is-act-brandspage .na-brand-logos-grid{ grid-template-columns:repeat(6, minmax(0,1fr)); } }
@media (min-width:992px){ body.is-act-brandspage .na-brand-logos-grid{ grid-template-columns:repeat(12, minmax(0,1fr)); gap:8px; } }
body.is-act-brandspage .container-main > .container > .d-flex.flex-wrap.gap-2{ position:sticky; top:var(--na-sticky-h, 137px); z-index:20; background:#fff; padding:8px 0; margin-bottom:12px !important; }
body.is-act-brandspage .container-main > .container > h2[id^="letter-"]{ scroll-margin-top:calc(var(--na-sticky-h, 137px) + 64px); }
@media (max-width:767.98px){
  body.is-act-brandspage .container-main > .container > .d-flex.flex-wrap.gap-2{ flex-wrap:nowrap !important; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
  body.is-act-brandspage .container-main > .container > .d-flex.flex-wrap.gap-2 > .btn{ flex:0 0 auto; }
}

/* ==========================================================================
   COMMERCE-003 B7 (04.11.2026, CW-COM003-07 Befunde, Entscheidungen Rabih, nur NA, shopweit, nur Gestaltung):
   1. Kopfzeile Zeile 2: kein Kasten hinter dem Tonerfinder (.na-device-finder ohne Hintergrund, Rahmen, Radius).
   2. Suchbutton Variante c (Vorschau CW-COM003-07_08): weiss wie das Feld, Rahmen #cbd5e1, keine Trennlinie zum Feld, Lupe #2b3136;
      Fokus: Feld und Button mit Rahmen Primaerblau und gemeinsamem Ring um die ganze Suche.
   3. Keine helle Linie an Zeile 2.
   4. Seitenstreifen ab 601 px am Container der Kopfzeile ausgerichtet (max-width var(--na-container), 20 px Rand wie .na-hdr-wrap);
      Handy bleibt wie es ist.
   ========================================================================== */
/* 1. */
body .header-main .na-hdr .na-hdr-finder .na-device-finder{ background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; }
/* 2. */
body .header-main .na-hdr .header-search .header-search-form .input-group .header-search-input{ border-right:0 !important; }
body .header-main .na-hdr .header-search .header-search-form .input-group .header-search-btn{ background:#fff !important; border:1px solid #cbd5e1 !important; border-left:0 !important; filter:none; }
body .header-main .na-hdr .header-search .header-search-form .input-group .header-search-btn:hover{ background:#f3f6fa !important; filter:none; }
body .header-main .na-hdr .header-search .header-search-form .input-group .header-search-btn .icon,
body .header-main .na-hdr .header-search .header-search-form .input-group .header-search-btn .icon svg{ color:#2b3136 !important; }
body .header-main .na-hdr .header-search .header-search-form .input-group .header-search-input:focus{ box-shadow:none !important; }
body .header-main .na-hdr .header-search .header-search-form .input-group:focus-within .header-search-input,
body .header-main .na-hdr .header-search .header-search-form .input-group:focus-within .header-search-btn{ border-color:var(--hb, #0654b0) !important; }
body .header-main .na-hdr .header-search .header-search-form .input-group:focus-within{ box-shadow:0 0 0 3px rgba(255,255,255,.75), 0 0 0 5px rgba(6,84,176,.55) !important; }
/* 3. */
body .header-main .na-hdr .na-hdr-row2{ border-top:0 !important; border-bottom:0 !important; }
/* 4. */
@media (min-width:601px){
  body main.content-main .na-page-stripe{ padding-left:0 !important; padding-right:0 !important; }
  body main.content-main .na-page-stripe > div{ max-width:var(--na-container, 1320px) !important; padding-left:20px !important; padding-right:20px !important; box-sizing:border-box; }
}

/* ==========================================================================
   COMMERCE-003 B9 (04.11.2026, CW-COM003-08 Zwischenbreiten, Nachmessung Claude Code mit Headless-Browser, Wunsch Rabih, nur NA, shopweit):
   a) Helle Linie unter Zeile 2 = Schatten der Kopfzeile (0 1px 0 #e5e7eb), kein Rahmen: nur die 1-px-Linie entfaellt (vorher Kandidat B8).
   b) Kopfzeile: Handy-Kopfzeile (Suche volle Breite, Button „Toner fuer Ihr Geraet finden“, Handy-Symbole) bis 991 px statt bis 600 px.
      Die Handy-Regeln der Kopfzeile (68 Regeln aus den Bloecken @media (max-width:600px), nur .header-main/.na-hdr/.offcanvas und
      --na-sticky-h) gelten zusaetzlich fuer 601 bis 991 px. Offcanvas 320 px und Seitenstreifen am Kopfzeilen-Container erst ab 992 px.
   c) /Hardware/ (Seiten mit Seitenstreifen): kein Leerraum zwischen Streifen und Filterzeile (leere CMS-Bloecke Kategorie-Ueberschrift und
      Bild-Text ausblenden, Abstand unter dem Streifen 16 px, Blockabstand oben 0).
   ========================================================================== */
/* a) */
body header.header-main{ box-shadow:0 4px 12px rgba(17,24,39,.04) !important; }
/* b) */
@media (min-width:601px) and (max-width:991.98px){
  :root{ --na-sticky-h:109px; }
  body .header-main .na-hdr-wrap{ padding:0 12px; }
  body .header-main .na-hdr-row1 .na-hdr-wrap{ height:56px; gap:4px; }
  body .header-main .na-hdr .na-hdr-logo img{ height:26px !important; max-height:26px !important; }
  body .header-main .na-hdr .na-hdr-ic{ min-width:40px; padding:0 6px !important; }
  body .header-main .na-hdr .na-hdr-hide-m, body .header-main .na-hdr .na-hdr-sep{ display:none !important; }
  body .header-main .na-hdr .na-hdr-tip, body .header-main .na-hdr .header-cart-total{ display:none !important; }
  body .header-main .na-hdr .na-hdr-row2{ position:relative; }
  body .header-main .na-hdr .na-hdr-row2 .na-hdr-wrap{ height:52px; gap:8px; }
  body .header-main .na-hdr .na-hdr-search{ flex:1 1 auto; }
  body .header-main .na-hdr .header-search .header-search-form .input-group .header-search-input{ padding-right:84px !important; }
  body .header-main .na-hdr .header-search .header-search-form .input-group .header-search-btn{ right:44px; background:transparent !important; }
  body .header-main .na-hdr .header-search .header-search-btn .icon, body .header-main .na-hdr .header-search .header-search-btn .icon svg{ color:#6b7280 !important; }
  body .header-main .na-hdr .na-hdr-devbtn{ display:flex; position:absolute; right:4px; top:4px; z-index:12012; height:32px; padding:0 8px; gap:4px; align-items:center; border:0; border-radius:8px; background:#0654b0; color:#fff; font-size:13px; font-weight:600; cursor:pointer; }
  body .header-main .na-hdr .na-hdr-devbtn .icon, body .header-main .na-hdr .na-hdr-devbtn .icon svg{ width:16px !important; height:16px !important; color:#fff !important; top:0 !important; }
  body .header-main .na-hdr .na-hdr-finder{ display:none; }
  body .header-main .na-hdr .na-hdr-finder.is-open{ display:block; position:absolute; left:0; right:0; top:100%; z-index:20; background:#eaf2fb; padding:10px 12px 14px; border-bottom:1px solid #dbe7f6; box-shadow:0 8px 16px rgba(17,24,39,.08); }
  body .header-main .na-hdr .na-hdr-finder.is-open .device-finder-nav-inner{ flex-direction:column !important; align-items:stretch !important; }
  body .header-main .na-hdr .na-hdr-finder.is-open .df-col{ flex:0 0 auto; }
  :root{ --na-sticky-h:109px; }
  body .header-main .na-hdr-wrap{ max-width:none; padding:0 12px; }
  body .header-main .na-hdr-row1 .na-hdr-wrap{ height:56px; gap:4px; }
  body .header-main .na-hdr .na-hdr-row2 .na-hdr-wrap{ height:52px; gap:8px; }
  body .header-main .na-hdr .na-hdr-logo img{ height:26px !important; max-height:26px !important; }
  body .header-main .na-hdr .na-hdr-icons{ gap:2px; }
  body .header-main .na-hdr .na-hdr-search{ display:block !important; flex:1 1 auto !important; min-width:0; width:auto; }
  body .header-main .na-hdr .na-hdr-search #searchCollapse, body .header-main .na-hdr .na-hdr-search .header-search{ display:block !important; visibility:visible !important; height:auto !important; }
  body .header-main .na-hdr .na-hdr-search .na-hdr-devbtn{ display:flex !important; visibility:visible !important; }
  :root{ --na-sticky-h:149px; }
  body .header-main .na-hdr-row1 .na-hdr-wrap{ display:grid; grid-template-columns:minmax(80px,1fr) minmax(0,auto) minmax(80px,1fr); align-items:center; gap:4px; }
  body .header-main .na-hdr .na-hdr-burger{ justify-self:start; }
  body .header-main .na-hdr .na-hdr-logo{ justify-self:center; min-width:0; max-width:100%; }
  body .header-main .na-hdr .na-hdr-logo :is(.header-logo-main, .header-logo-main-link, picture){ width:auto !important; min-width:0 !important; max-width:100% !important; flex:0 1 auto !important; justify-content:center !important; }
  body .header-main .na-hdr .na-hdr-logo img{ height:auto !important; max-height:32px !important; width:auto !important; max-width:100% !important; }
  body .header-main .na-hdr .na-hdr-icons{ justify-self:end; gap:0; margin:0; }
  body .header-main .na-hdr .na-hdr-ic{ min-width:40px; padding:0 !important; }
  body .header-main .na-hdr .na-hdr-cart .na-hdr-ic{ padding:0 !important; }
  body .header-main .na-hdr .na-hdr-row2 .na-hdr-wrap{ height:auto; flex-wrap:wrap; gap:0; }
  body .header-main .na-hdr .na-hdr-search{ flex:0 0 100% !important; height:52px; display:flex !important; align-items:center; }
  body .header-main .na-hdr .na-hdr-search > *{ flex:1 1 auto; min-width:0; }
  body .header-main .na-hdr .header-search .header-search-form .input-group .header-search-input{ padding-right:44px !important; }
  body .header-main .na-hdr .header-search .header-search-form .input-group .header-search-btn{ right:4px; background:var(--hb) !important; }
  body .header-main .na-hdr .header-search .header-search-btn .icon, body .header-main .na-hdr .header-search .header-search-btn .icon svg{ color:#fff !important; }
  body .header-main .na-hdr .na-hdr-findbtn{ display:flex; flex:0 0 calc(100% + 24px); margin:0 -12px; height:40px; padding:0 12px; align-items:center; justify-content:space-between; gap:8px; border:0; border-top:1px solid #dbe7f6; background:var(--hb-soft); color:var(--hb); font-size:14px; font-weight:600; cursor:pointer; text-align:left; }
  body .header-main .na-hdr .na-hdr-findbtn .na-hdr-chev{ width:18px; height:18px; flex:0 0 auto; fill:none !important; transition:transform .15s; }
  body .header-main .na-hdr .na-hdr-findbtn[aria-expanded="true"] .na-hdr-chev{ transform:rotate(180deg); }
  body .header-main .na-hdr .na-hdr-finder, body .header-main .na-hdr .na-hdr-finder.is-open{ position:static; box-shadow:none; border:0; background:transparent; }
  body .header-main .na-hdr .na-hdr-finder{ display:none; flex:0 0 100%; padding:0; }
  body .header-main .na-hdr .na-hdr-finder.is-open{ display:block; padding:2px 0 12px; }
  body .header-main .na-hdr .na-hdr-finder.is-open .device-finder-nav-inner{ flex-direction:column !important; align-items:stretch !important; gap:8px !important; }
  :root{ --na-sticky-h:171px; }
  body .header-main .na-hdr-row1 .na-hdr-wrap{ height:60px; grid-template-columns:minmax(88px,1fr) minmax(0,auto) minmax(88px,1fr); }
  body .header-main .na-hdr .na-hdr-logo img{ max-height:36px !important; }
  body .header-main .na-hdr .na-hdr-ic{ height:44px; min-width:44px; }
  body .header-main .na-hdr .na-hdr-ic .icon, body .header-main .na-hdr .na-hdr-ic .icon svg{ width:22px !important; height:22px !important; }
  body .header-main .na-hdr .na-hdr-row2 .na-hdr-wrap{ padding-top:6px; padding-bottom:8px; row-gap:8px; }
  body .header-main .na-hdr .na-hdr-search{ height:44px; }
  body .header-main .na-hdr .header-search .header-search-form .input-group{ display:flex !important; align-items:stretch; height:44px; }
  body .header-main .na-hdr .header-search .header-search-form .input-group .header-search-input{ height:44px !important; min-height:44px !important; padding:0 12px !important; border-right:0 !important; border-radius:10px 0 0 10px !important; }
  body .header-main .na-hdr .header-search .header-search-form .input-group .header-search-btn{ position:static !important; flex:0 0 48px; width:48px; height:44px !important; min-height:44px !important; margin:0 !important; border:1px solid var(--hb) !important; border-radius:0 10px 10px 0 !important; background:var(--hb) !important; }
  body .header-main .na-hdr .header-search .header-search-btn .icon, body .header-main .na-hdr .header-search .header-search-btn .icon svg{ width:20px !important; height:20px !important; color:#fff !important; }
  body .header-main .na-hdr .header-search .header-search-form .input-group:focus-within .header-search-input{ border-color:var(--hb) !important; }
  body .header-main .na-hdr .na-hdr-findbtn{ flex:0 0 100%; margin:0; height:44px; padding:0 14px; justify-content:center; gap:8px; border:1px solid var(--hb); border-radius:10px; background:#fff; color:var(--hb); font-size:15px; font-weight:600; box-shadow:0 1px 2px rgba(6,84,176,.08); text-align:center; }
  body .header-main .na-hdr .na-hdr-findbtn:active{ background:var(--hb-soft); }
  body .header-main .na-hdr .na-hdr-findbtn[aria-expanded="true"]{ background:var(--hb); color:#fff; }
  body .header-main .na-hdr .na-hdr-finder.is-open{ padding:0 0 4px; }
  body .header-main .na-hdr .na-hdr-finder .form-select{ height:44px !important; min-height:44px !important; padding:0 32px 0 12px !important; }
  body .header-main .na-hdr .na-hdr-finder{ --na-btn-height:44px; }
  body .offcanvas.offcanvas-start:has(.na-hdr-drawer){ --bs-offcanvas-width:400px; width:var(--bs-offcanvas-width) !important; max-width:100%; }
  body .offcanvas .na-hdr-drawer{ padding-left:0; padding-right:0; }
  body main.content-main .na-page-stripe{ padding-left:20px !important; padding-right:20px !important; }
  body main.content-main .na-page-stripe > div{ max-width:1200px !important; padding-left:0 !important; padding-right:0 !important; }
}
/* c) */
body main.content-main:has(.na-page-stripe) .na-page-stripe{ margin-bottom:16px !important; }
body main.content-main:has(.na-page-stripe) .cms-section .cms-block-category-heading{ display:none !important; }
body main.content-main:has(.na-page-stripe) .cms-section .cms-block-image-text:not(:has(img)):not(:has(.cms-element-text :is(p, h1, h2, h3, h4, ul, ol, a))){ display:none !important; }
body main.content-main:has(.na-page-stripe) .cms-section .cms-block-container{ padding-top:0 !important; }
/* b) Nachtrag: Suchbutton Variante c (B7) auch 601 bis 991 px, die kopierten Handy-Regeln setzten ihn dort wieder blau */
@media (min-width:601px) and (max-width:991.98px){
  body .header-main .na-hdr .header-search .header-search-form .input-group .header-search-input{ border-right:0 !important; }
  body .header-main .na-hdr .header-search .header-search-form .input-group .header-search-btn{ background:#fff !important; border:1px solid #cbd5e1 !important; border-left:0 !important; filter:none; }
  body .header-main .na-hdr .header-search .header-search-form .input-group .header-search-btn .icon,
  body .header-main .na-hdr .header-search .header-search-form .input-group .header-search-btn .icon svg{ color:#2b3136 !important; }
  body .header-main .na-hdr .header-search .header-search-form .input-group:focus-within .header-search-input,
  body .header-main .na-hdr .header-search .header-search-form .input-group:focus-within .header-search-btn{ border-color:var(--hb, #0654b0) !important; }
}

/* ==========================================================================
   COMMERCE-003 B10 (04.11.2026, CW-COM003-09, nur NA, shopweit): Kopfzeile 992 bis 1199 px nur angemeldet (.na-hdr--in, zusaetzlich
   Merkzettel-Zaehler, „Meine Artikel“ und Warenkorbbetrag) nur 4 px zwischen Logo und Symbolen. Dort Telefon, E-Mail und Trennstrich
   ausblenden (stehen im Offcanvas unter Kontakt), das gibt 107 px Luft. Abgemeldet und alle anderen Breiten unveraendert.
   ========================================================================== */
@media (min-width:992px) and (max-width:1199.98px){
  body .header-main .na-hdr.na-hdr--in .na-hdr-icons > :is(a.na-hdr-ic[href^="tel:"], a.na-hdr-ic[href^="mailto:"], .na-hdr-sep){ display:none !important; }
}

/* ==========================================================================
   FRONTEND-015 A (07.11.2026, Claude Code): Kundenkonto Anzeige
   B21 Uebersicht: Rechnungsadresse vor Standard-Lieferadresse (ersetzt die Reihenfolge aus FRONTEND-011 E1b).
   B18 Bestellungen: „Erneut bestellen“ einzeilig ab 1100 px (Auftragsnr. kuerzen), mobil unveraendert.
   B22 Profil: Anrede, Vorname, Nachname nebeneinander, nur Anzeige.
   ========================================================================== */
body.na-account .na-overview .overview-billing-address{ order:1; }
body.na-account .na-overview .overview-shipping-address{ order:2; }
@media (min-width:1100px){
  body.na-account .na-order-table .na-actions{ flex-wrap:nowrap; }
  body.na-account .na-order-table .na-actions .btn{ white-space:nowrap; }
  body.na-account .na-order-table td.na-c-ref{ max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}
body.na-account .na-profile-person{ display:flex; flex-wrap:wrap; gap:16px 40px; margin:0 0 16px; }
body.na-account .na-profile-person dt{ font-size:13px; font-weight:400; color:var(--na-muted); }
body.na-account .na-profile-person dd{ margin:2px 0 0; font-size:15px; }

/* ==========================================================================
   FRONTEND-015 K (07.11.2026, Claude Code): Korrektur CW-FE015-A A-F1
   Ab 1100 px ist die Tabelle mit einzeiligem „Erneut bestellen“ (B18) 55 px breiter als der Rahmen: Spalte „Pos.“ ausblenden,
   die Anzahl steht inline an der Bestellnummer („· n Pos.“). Aufheben der Kuerzung „Auftragsnr.“ aus FRONTEND-015 A. Mobil unveraendert.
   ========================================================================== */
@media (min-width:1100px){
  body.na-account .na-order-table th:nth-child(4),
  body.na-account .na-order-table td.na-c-pos{ display:none; }
  body.na-account .na-order-table .na-pos-inline{ display:inline; }
  body.na-account .na-order-table td.na-c-ref{ max-width:none; overflow:visible; text-overflow:clip; white-space:normal; }
}

/* ==========================================================================
   FRONTEND-015 K2 (07.11.2026, Claude Code): Korrektur CW-FE015-K K-F1
   Bestellungen ab 1100 px noch 38 px zu breit: Detail-Pfeil in der Aktionsspalte ausblenden (die Zeile und die Bestellnummer
   fuehren schon zum Bestelldetail), Abstand und Innenabstand des Buttons kleiner. „Erneut bestellen“ bleibt einzeilig. Mobil unveraendert.
   ========================================================================== */
@media (min-width:1100px){
  body.na-account .na-order-table .na-actions .na-go-link{ display:none; }
  body.na-account .na-order-table .na-actions{ gap:6px; }
  body.na-account .na-order-table .na-actions .btn{ padding-left:8px; padding-right:8px; }
}

/* ==========================================================================
   FRONTEND-015 L (07.11.2026, Claude Code): Testlauf E2E / B24 / K3-H1
   B24 Abschlussseite: Karte „Bestelldetails“ oben Rechnung an | Lieferung an, darunter Zahlung und Versand als eigene Zeile
   (Bezeichnung links, Wert rechts, kein Umbruch der Werte). Positionen auf Pruef- und Abschlussseite ab 1200 px: Artikelname
   ueber die volle Breite, Menge/Preise darunter rechts unter den Spaltenkoepfen (Spalte „Produkt“ war neben der Zusammenfassung zu schmal).
   ========================================================================== */
body.na-checkout .na-finish-cols{ grid-template-columns:repeat(2,minmax(0,1fr)); }
body.na-checkout .na-finish-col-pay{ grid-column:1 / -1; padding-top:16px; border-top:1px solid var(--na-border); }
body.na-checkout .na-finish-col-pay .na-finish-dl{ grid-template-columns:max-content minmax(0,1fr); gap:6px 16px; }
body.na-checkout .na-finish-col-pay .na-finish-dl dt{ white-space:nowrap; }
body.na-checkout .na-finish-col-pay .na-finish-dl dd{ text-align:right; overflow-wrap:anywhere; }
@media (max-width:640px){
  body.na-checkout .na-finish-cols{ grid-template-columns:minmax(0,1fr); }
}
@media (min-width:1200px){
  body.na-checkout.is-active-route-frontend-checkout-confirm-page .line-item.is-default > .line-item-row > .line-item-info,
  body.na-checkout.is-active-route-frontend-checkout-confirm-page .line-item.is-order > .line-item-row > .line-item-info,
  body.na-checkout.is-active-route-frontend-checkout-finish-page .line-item.is-order > .line-item-row > .line-item-info{ grid-column:1 / -1; grid-row:1; }
  body.na-checkout.is-active-route-frontend-checkout-confirm-page .line-item > .line-item-row > .line-item-quantity,
  body.na-checkout.is-active-route-frontend-checkout-confirm-page .line-item > .line-item-row > .line-item-unit-price,
  body.na-checkout.is-active-route-frontend-checkout-confirm-page .line-item > .line-item-row > .line-item-tax-price,
  body.na-checkout.is-active-route-frontend-checkout-confirm-page .line-item > .line-item-row > .line-item-total-price,
  body.na-checkout.is-active-route-frontend-checkout-confirm-page .line-item > .line-item-row > .line-item-remove,
  body.na-checkout.is-active-route-frontend-checkout-finish-page .line-item > .line-item-row > .line-item-quantity,
  body.na-checkout.is-active-route-frontend-checkout-finish-page .line-item > .line-item-row > .line-item-unit-price,
  body.na-checkout.is-active-route-frontend-checkout-finish-page .line-item > .line-item-row > .line-item-tax-price,
  body.na-checkout.is-active-route-frontend-checkout-finish-page .line-item > .line-item-row > .line-item-total-price{ grid-row:2; }
}
/* K3-H1 Registrierung (nur NA, Klasse aus NewactiveCustomerIntegration): Fehlertext unter der Anrede am Desktop einzeilig;
   rechts neben der Anrede ist die Zeile frei (Anrede eigene Zeile seit K3) */
@media (min-width:768px){
  .na-reg-salutation .invalid-feedback,
  .na-reg-salutation .form-field-feedback{ white-space:nowrap; }
}