/* 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; }
}

/* ==========================================================================
   FRONTEND-011 Teil E11 – Befunde CW-REST-0911 A7a/A7b (390 px), nur NA
   ========================================================================== */
/* A7a: Zusammenfassungszeile mobil/Tablet – Bezeichnung (z. B. „Bankverbindung“) nie mitten im Wort umbrechen;
   der Schalter rechts darf stattdessen zweizeilig werden (rechtsbuendig) */
@media (max-width:1199.98px){
  body.na-checkout .na-sum-row{ grid-template-columns:auto minmax(0,1fr); }
  body.na-checkout .na-sum-row > .na-sum-label{ white-space:nowrap; overflow-wrap:normal; word-break:normal; hyphens:manual; }
  body.na-checkout .na-sum-row > .na-sum-action{ justify-self:end; min-width:0; white-space:normal; text-align:right; }
}
/* A7b: Kopf der Bestellseite – rechts derselbe Abstand wie links: Logo darf schrumpfen, Zeile laeuft nicht ueber den Container */
@media (max-width:767.98px){
  body.na-checkout .header-minimal-row{ min-width:0; }
  body.na-checkout .header-minimal-row > .header-minimal-logo{ flex:0 1 auto; min-width:0; }
  body.na-checkout .header-minimal-logo img{ max-width:100%; }
}
@media (max-width:480px){
  body.na-checkout .header-minimal-logo img{ max-width:min(120px, 100%); }
  body.na-checkout .header-minimal-row{ gap:8px; }
}

/* ==========================================================================
   API-010 Teil L – Lieferstand je Position und je Lieferung im Bestelldetail, nur NA
   ========================================================================== */
body.na-account .na-ship-line{ display:inline-block; margin-top:2px; font-size:13px; font-weight:600; }
body.na-account .na-ship-line.is-done{ color:var(--na-success); }
body.na-account .na-ship-line.is-part{ color:var(--na-warning); }
body.na-account .na-ship-line.is-open{ color:var(--na-muted); font-weight:400; }
body.na-account .na-ship-deliveries{ list-style:none; margin:4px 0 12px; padding:0; font-size:14px; }
body.na-account .na-ship-deliveries > li{ padding:4px 0; overflow-wrap:anywhere; }
body.na-account .na-ship-dl-head{ font-weight:600; }

/* ==========================================================================
   API-010 Teil L Fix 2 – Bestelldetail neu (Vorgabe_Bestelldetail_newactive.md, 09.11.2026), nur NA
   Reihenfolge: Lieferungen, Positionen, Bestelldetails, Belege (nur wenn vorhanden), Fragen
   ========================================================================== */
body.na-account .na-od2{ display:flex; flex-direction:column; gap:16px; min-width:0; }
body.na-account .na-od2 .na-od2-card{ margin-bottom:0; border-radius:var(--na-radius-card); padding:20px 22px; }
body.na-account .na-od2-title{ font-size:17px; font-weight:700; margin:0 0 14px; color:var(--na-text); }
body.na-account .na-od2 .na-card-head .na-od2-title{ margin:0; }
/* Lieferungen */
body.na-account .na-od2-del{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px 20px; padding:16px 0; border-top:1px solid var(--na-border); }
body.na-account .na-od2-title + .na-od2-del{ border-top:0; padding-top:0; }
body.na-account .na-od2-del-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-weight:600; }
body.na-account .na-od2-ok{ display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:var(--na-success-bg); color:var(--na-success); font-size:12px; flex:0 0 auto; }
body.na-account .na-od2-del-items{ color:var(--na-muted); font-size:14px; margin-top:4px; overflow-wrap:anywhere; }
body.na-account .na-od2-pkgs{ display:flex; flex-direction:column; gap:8px; align-items:flex-end; min-width:0; }
body.na-account .na-od2-pkg{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
body.na-account .na-od2-pkg-id{ white-space:nowrap; }
body.na-account .na-od2-carrier{ display:inline-block; font-size:11px; font-weight:700; letter-spacing:.04em; background:var(--na-surface-2); color:#4b5560; border-radius:6px; padding:2px 7px; margin-right:4px; }
body.na-account .na-od2-num{ font-variant-numeric:tabular-nums; font-size:14px; color:var(--na-text); }
body.na-account .na-od2-btn{ display:inline-flex; align-items:center; gap:6px; background:var(--na-primary); color:#fff; text-decoration:none; border-radius:var(--na-radius-pill); padding:7px 14px; font-size:13px; font-weight:600; white-space:nowrap; }
body.na-account .na-od2-btn:hover, body.na-account .na-od2-btn:focus{ background:var(--na-primary-hover); color:#fff; text-decoration:none; }
body.na-account .na-od2-link{ color:var(--na-primary); font-size:13px; text-decoration:none; white-space:nowrap; }
body.na-account .na-od2-link:hover{ text-decoration:underline; }
body.na-account .na-od2-nopkg{ color:var(--na-muted); font-size:14px; }
body.na-account .na-od2-box{ border-radius:var(--na-radius); padding:14px 16px; font-size:14px; }
body.na-account .na-od2-box.is-info{ background:var(--na-info-bg); color:var(--na-info-text); }
body.na-account .na-od2-box.is-warn{ background:var(--na-warning-bg); color:var(--na-warning); margin-top:14px; }
/* Positionen */
body.na-account .na-od2 .na-sums{ margin-left:auto; }
/* Bestelldetails */
body.na-account .na-od2-details > summary{ cursor:pointer; list-style:none; margin:0; }
body.na-account .na-od2-details > summary::-webkit-details-marker{ display:none; }
body.na-account .na-od2-details > summary::after{ content:"▾"; float:right; color:var(--na-muted); }
body.na-account .na-od2-details:not([open]) > summary::after{ content:"▸"; }
body.na-account .na-od2-details[open] > summary{ margin-bottom:14px; }
body.na-account .na-od2-cols{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; }
body.na-account .na-od2-lbl{ font-size:12px; color:var(--na-muted); text-transform:uppercase; letter-spacing:.05em; margin:0 0 4px; }
body.na-account .na-od2-blk{ margin-bottom:14px; font-size:15px; }
body.na-account .na-od2-chips{ display:flex; flex-wrap:wrap; gap:6px; }
body.na-account .na-od2-chip{ font-size:12px; background:var(--na-surface-2); border-radius:var(--na-radius-pill); padding:3px 10px; }
/* Belege */
body.na-account .na-od2-doc{ display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--na-border); font-size:14px; }
body.na-account .na-od2-title + .na-od2-doc{ border-top:0; }
body.na-account .na-od2-doc-ic{ width:30px; height:30px; border-radius:8px; background:var(--na-info-bg); color:var(--na-primary); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex:0 0 auto; }
body.na-account .na-od2-doc-meta{ flex:1 1 auto; min-width:0; }
body.na-account .na-od2-doc-meta small{ display:block; color:var(--na-muted); }
/* Fragen */
body.na-account .na-od2-help{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; background:var(--na-bg); border:1px solid var(--na-border); border-radius:var(--na-radius-card); padding:16px 22px; }
body.na-account .na-od2-help strong{ display:block; }
body.na-account .na-od2-help span{ color:var(--na-muted); font-size:14px; }
body.na-account .na-od2-help-actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
/* Mobil */
@media (max-width:640px){
  body.na-account .na-od2 .na-od2-card{ padding:16px; }
  body.na-account .na-od2-help{ padding:16px; }
  body.na-account .na-od2-del{ grid-template-columns:minmax(0,1fr); }
  body.na-account .na-od2-pkgs{ align-items:flex-start; }
  body.na-account .na-od2-pkg{ flex-direction:column; align-items:flex-start; gap:6px; }
  body.na-account .na-od2-cols{ grid-template-columns:minmax(0,1fr); gap:4px; }
  body.na-account .na-od2 .na-table.na-stack td.na-c-unit, body.na-account .na-od2 .na-table th.na-c-unit{ display:none; }
}

/* ==========================================================================
   API-010 Teil L Fix 3 – Bestelldetail: Lieferungen nach Kartenbreite statt Fensterbreite (CW-L1-F2 Punkt 9),
   Einzelpreis in der Positionskarte 641–1100 px sichtbar, Paketbuttons auf Touch-Geraeten 44 px, nur NA
   ========================================================================== */
body.na-account .na-od2-deliveries{ container-type:inline-size; container-name:naod2del; }
body.na-account .na-od2-del{ grid-template-columns:minmax(220px,1fr) auto; }
body.na-account .na-od2-del > *{ min-width:0; }
body.na-account .na-od2-pkgs{ max-width:100%; }
@container naod2del (max-width:620px){
  body.na-account .na-od2-del{ grid-template-columns:minmax(0,1fr); }
  body.na-account .na-od2-pkgs{ align-items:flex-start; }
  body.na-account .na-od2-pkg{ justify-content:flex-start; }
}
@container naod2del (max-width:420px){
  body.na-account .na-od2-pkg{ flex-direction:column; align-items:flex-start; gap:6px; }
}
@media (min-width:641px) and (max-width:1100px){
  body.na-account .na-od2 .na-table.na-stack.na-pos-table td.na-c-unit{ display:block; }
}
@media (pointer:coarse){
  body.na-account .na-od2-btn{ min-height:44px; padding-top:10px; padding-bottom:10px; }
}

/* ===== FRONTEND-016 Paket 1 (10.11.2026, nur NA) =====
   S-001: Shopware-Kern gibt .product-box.box-minimal .stretched-link::after eine feste Hoehe (200 px + Spacer = 216 px).
   Die newactive-Zeilenkarte ist nur ca. 88 px hoch, die Klickflaeche der letzten Karte lag deshalb ueber der unteren
   Seitennavigation (Klick auf Seitenzahl oeffnete das Produkt). Klickflaeche auf die Karte begrenzen. */
html body .card.product-box .stretched-link::after{ height:auto !important; top:0; bottom:0; }
html body .pagination-nav.listing-pagination-bottom{ position:relative; z-index:3; }
/* ===== FRONTEND-016 Paket 3a CSS-Schnellweg (10.11.2026, nur NA) =====
   S-013 (Rabih 10.11.2026): Hintergrund hinter Suche und Tonerfinder einfarbig Navy #00315E (Farbe „active“ aus dem Logo),
   kein Verlauf, kein Bild; Felder bleiben weiss; Fokusrahmen auf dunklem Grund hell (#9CC3EF) statt newactive-Blau.
   Vergleich S-013_Suchleiste_Farbvergleich.html (Drive FRONTEND-016). */
body .header-main .na-hdr .na-hdr-row2{ background:#00315e !important; background-image:none !important; border-top-color:rgba(255,255,255,.18) !important; }
body .header-main .na-hdr .na-hdr-finder.is-open{ background:#00315e !important; border-bottom-color:rgba(255,255,255,.18) !important; }
body .header-main .na-hdr .na-hdr-row2 :is(.form-control, .form-select, .header-search-btn, .btn):is(:focus, :focus-visible){ border-color:#9cc3ef !important; box-shadow:0 0 0 3px rgba(156,195,239,.6) !important; outline:0 !important; }
/* S-009 (Rabih 10.11.2026): abgemeldet in der Topnav nur das Konto-Icon, Text „Anmelden“ nur fuer Screenreader (aria-label bleibt). */
body .header-main .na-hdr .account-menu-btn .na-hdr-txt{ position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }


/* ===== FRONTEND-016 Paket 2 (10.11.2026, nur NA): Breadcrumb (S-012), Geräteseite (S-011/S-012), Seitenkopf Gerätefinder (S-019) =====
   Entwürfe S-012_Geraeteseite_Breadcrumb_Entwurf_newactive.html und S-019_Seitenkopf_Entwurf.html (Drive FRONTEND-016). */
:root{ --na-slate-1:#1c2731; --na-slate-2:#2e363e; --na-glass:rgba(255,255,255,.06); --na-glass-border:rgba(255,255,255,.12); --na-on-dark:#e9edf1; --na-on-dark-muted:#a9b4be; }

/* Breadcrumb */
.na-bc{ padding:14px 0 0; }
.na-bc ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:4px; font-size:13px; color:var(--na-muted); }
.na-bc li{ display:flex; align-items:center; gap:4px; min-width:0; }
.na-bc a{ color:#4a545d; text-decoration:none; padding:4px 6px; border-radius:6px; }
.na-bc a:hover, .na-bc a:focus-visible{ background:#fff; color:var(--na-primary); }
.na-bc .na-bc-home svg{ width:15px; height:15px; display:block; stroke:currentColor; fill:none; stroke-width:1.8; }
.na-bc .na-bc-chev{ width:14px; height:14px; flex:0 0 auto; stroke:#a7b0b8; fill:none; stroke-width:2; }
.na-bc [aria-current="page"]{ color:var(--na-text); font-weight:600; padding:4px 6px; overflow-wrap:anywhere; }
.na-bc-back{ display:none; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--na-primary) !important; text-decoration:none; padding:6px 0; }
.na-bc-back svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; }
@media (max-width:767.98px){ .na-bc ol{ display:none; } .na-bc-back{ display:inline-flex; } }

/* Einheitlicher Seitenkopf (Gerät, Hersteller, Marke, Serie) */
.na-phead{ margin-top:12px; background:linear-gradient(135deg,var(--na-slate-1),var(--na-slate-2)); color:var(--na-on-dark); border-radius:var(--na-radius-card); padding:26px 30px; display:grid; grid-template-columns:84px minmax(0,1fr) auto; gap:22px; align-items:center; }
.na-phead-ico{ width:84px; height:84px; border-radius:var(--na-radius-card); background:var(--na-glass); border:1px solid var(--na-glass-border); display:grid; place-items:center; overflow:hidden; }
.na-phead-ico svg{ width:42px; height:42px; stroke:#fff; fill:none; stroke-width:1.5; }
.na-phead-ico.is-logo{ background:#fff; padding:10px; }
.na-phead-ico.is-logo img{ max-width:100%; max-height:100%; object-fit:contain; display:block; }
.na-phead-eyebrow{ font-size:13px; color:var(--na-on-dark-muted); margin-bottom:4px; }
.na-phead h1{ margin:0 0 12px; font-size:30px; line-height:1.15; color:#fff; letter-spacing:-.3px; overflow-wrap:anywhere; }
.na-phead-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.na-chip{ font-size:12px; font-weight:600; padding:5px 11px; border-radius:var(--na-radius-pill); background:var(--na-glass); border:1px solid var(--na-glass-border); color:var(--na-on-dark); }
.na-chip b{ color:#fff; }
.na-steps{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.na-steps span{ font-size:12px; font-weight:600; padding:5px 10px; border-radius:8px; background:var(--na-glass); border:1px solid var(--na-glass-border); color:var(--na-on-dark-muted); }
.na-steps .is-on{ background:var(--na-primary); border-color:var(--na-primary); color:#fff; }
.na-steps .is-ok{ color:#cfe0f5; }
.na-phead-side{ display:flex; flex-direction:column; gap:8px; align-items:flex-end; }
.na-phead-btn{ font-size:13px; font-weight:600; color:#fff !important; background:var(--na-glass); border:1px solid var(--na-glass-border); border-radius:var(--na-radius); padding:9px 14px; text-decoration:none !important; white-space:nowrap; display:inline-flex; gap:8px; align-items:center; justify-content:center; }
.na-phead-btn:hover, .na-phead-btn:focus-visible{ background:rgba(255,255,255,.14); }
.na-phead-btn svg{ width:16px; height:16px; stroke:#fff; fill:none; stroke-width:1.8; }
.na-phead-hint{ font-size:12px; color:var(--na-on-dark-muted); }
@media (max-width:767.98px){
  .na-phead{ grid-template-columns:56px minmax(0,1fr); padding:20px; gap:14px; }
  .na-phead-ico{ width:56px; height:56px; }
  .na-phead-ico svg{ width:28px; height:28px; }
  .na-phead-ico.is-logo{ padding:6px; }
  .na-phead h1{ font-size:22px; }
  .na-phead-side{ grid-column:1 / -1; align-items:stretch; }
}

/* Geräteseite */
.na-dev{ padding-bottom:8px; }
.na-dev-bar{ position:sticky; top:0; z-index:5; background:var(--na-surface); padding:16px 0 12px; display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center; }
.na-seg{ display:inline-flex; background:#fff; border:1px solid var(--na-border); border-radius:var(--na-radius); padding:3px; }
.na-seg a{ font-size:13px; font-weight:600; color:#4a545d; padding:8px 14px; border-radius:8px; text-decoration:none; white-space:nowrap; }
.na-seg a span{ color:var(--na-muted); font-weight:500; margin-left:4px; }
.na-seg a.is-on{ background:var(--na-primary); color:#fff; }
.na-seg a.is-on span{ color:#cfe0f5; }
.na-seg a:not(.is-on):hover{ color:var(--na-primary); }
.na-jump{ display:flex; flex-wrap:wrap; gap:6px; }
.na-jump a{ font-size:13px; font-weight:500; color:#4a545d; text-decoration:none; background:#fff; border:1px solid var(--na-border); border-radius:var(--na-radius-pill); padding:6px 12px; white-space:nowrap; }
.na-jump a:hover{ border-color:var(--na-primary); color:var(--na-primary); }
.na-dev-grp{ margin:8px 0 28px; }
.na-dev-grp-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:8px 0 4px; }
.na-dev-grp-head h2{ margin:0; font-size:20px; }
.na-dev-grp-head p{ margin:0; font-size:13px; color:var(--na-muted); }
.na-dev-grp-count{ font-size:13px; color:var(--na-muted); white-space:nowrap; }
.na-dev-sub{ display:flex; align-items:center; gap:10px; margin:18px 0 10px; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#4a545d; scroll-margin-top:90px; }
.na-dev-sub::after{ content:""; flex:1; height:1px; background:var(--na-border); }
.na-dev-sub em{ font-style:normal; font-weight:500; letter-spacing:0; text-transform:none; color:var(--na-muted); }
.na-dev-empty{ margin:16px 0; color:var(--na-muted); }
.na-help{ margin:8px 0 40px; background:#fff; border:1px solid var(--na-border); border-radius:var(--na-radius-card); padding:18px 20px; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.na-help b{ display:block; }
.na-help span{ font-size:13px; color:var(--na-muted); }
.na-help-links{ display:flex; gap:18px; flex-wrap:wrap; }
.na-help-links a{ font-size:13px; font-weight:600; color:var(--na-primary); text-decoration:none; white-space:nowrap; }
body.is-ctl-device .na-device-pagination{ margin:8px 0 24px; }
@media (max-width:767.98px){
  .na-dev-bar{ flex-direction:column; align-items:stretch; }
  .na-seg{ display:flex; }
  .na-seg a{ flex:1; text-align:center; padding:8px 6px; }
  .na-jump{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:2px; }
  .na-dev-grp-head{ flex-direction:column; gap:2px; }
  .na-help{ flex-direction:column; align-items:flex-start; }
}

/* Gerätefinder: Hersteller, Marke, Serie */
.na-finder{ padding-bottom:28px; }
.na-finder-tools{ display:flex; gap:10px 16px; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:16px 0 10px; }
.na-finder-filter{ flex:1; max-width:420px; height:40px; border:1px solid var(--na-border); border-radius:var(--na-radius); background:#fff; display:flex; align-items:center; gap:8px; padding:0 12px; margin:0; }
.na-finder-filter:focus-within{ border-color:var(--na-primary); box-shadow:0 0 0 3px rgba(6,84,176,.15); }
.na-finder-filter svg{ width:16px; height:16px; flex:0 0 auto; stroke:#8a949d; fill:none; stroke-width:2; }
.na-finder-filter input{ border:0; outline:0; flex:1; min-width:0; height:38px; font-size:14px; background:transparent; color:var(--na-text); }
.na-finder-note{ font-size:13px; color:var(--na-muted); }
.na-finder-az{ display:flex; flex-wrap:wrap; gap:4px; }
.na-finder-az a{ min-width:30px; height:30px; padding:0 6px; border:1px solid var(--na-border); border-radius:8px; background:#fff; display:grid; place-items:center; font-size:12px; font-weight:600; color:#4a545d; text-decoration:none; }
.na-finder-az a:hover{ border-color:var(--na-primary); color:var(--na-primary); }
.na-finder-letter{ font-size:16px; margin:20px 0 10px; scroll-margin-top:90px; }
.na-tiles{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.na-tile{ min-height:48px; border:1px solid var(--na-border); border-radius:12px; background:#fff; display:flex; align-items:center; justify-content:center; text-align:center; padding:8px 12px; font-size:13px; font-weight:500; color:var(--na-text) !important; text-decoration:none !important; overflow-wrap:anywhere; }
.na-tiles-left .na-tile{ justify-content:flex-start; text-align:left; padding:8px 14px; }
.na-tile:hover, .na-tile:focus-visible{ border-color:var(--na-primary); color:var(--na-primary) !important; box-shadow:0 4px 14px rgba(20,40,70,.06); }
.na-tile[hidden], [data-na-group][hidden], .na-finder-none[hidden]{ display:none !important; }
.na-finder-none{ margin:16px 0; color:var(--na-muted); }
@media (max-width:991.98px){ .na-tiles{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:767.98px){ .na-tiles{ grid-template-columns:repeat(2,minmax(0,1fr)); } .na-finder-filter{ max-width:none; flex-basis:100%; } }


/* ===== FRONTEND-016 Paket 3b (10.11.2026, nur NA): Footer neu S-010 (Entwurf S-010_Footer_Entwurf_newactive.html Stand 3), S-004 ===== */
body footer.footer-main{ background:linear-gradient(135deg,var(--na-slate-1,#1c2731) 0%,var(--na-slate-2,#2e363e) 100%) !important; color:#e9edf1; border-top:0 !important; padding:0 !important; margin-top:40px; }
body footer.footer-main > .container, body footer.footer-main .footer-inner{ max-width:none; padding:0; }
.na-ft{ font-size:14px; line-height:1.55; color:#e9edf1; }
.na-ft a, .na-ft-bottom a{ color:#e9edf1; text-decoration:none; }
.na-ft a:hover, .na-ft a:focus-visible{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.na-ft-wrap{ max-width:1120px; margin:0 auto; padding:0 24px; }
.na-ft-usp{ border-bottom:1px solid rgba(255,255,255,.12); }
.na-ft-usp .na-ft-wrap{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; padding-top:28px; padding-bottom:28px; }
.na-ft-usp-item{ display:flex; gap:12px; align-items:flex-start; }
.na-ft-ico{ flex:0 0 36px; height:36px; border-radius:10px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); display:grid; place-items:center; }
.na-ft-ico svg{ width:18px; height:18px; stroke:#fff; fill:none; stroke-width:1.8; }
.na-ft-usp b{ display:block; color:#fff; font-weight:600; }
.na-ft-usp span{ color:#a9b4be; font-size:13px; }
.na-ft-main .na-ft-wrap{ display:grid; grid-template-columns:1.1fr 1.1fr 1fr 1.35fr; gap:40px; padding-top:44px; padding-bottom:40px; }
.na-ft-col > summary{ list-style:none; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#fff; margin:0 0 14px; cursor:default; }
.na-ft-col > summary::-webkit-details-marker{ display:none; }
.na-ft-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.na-ft-hint{ display:block; color:#a9b4be; font-size:12px; line-height:1.35; }
.na-ft-more{ margin-top:6px; padding-top:12px; border-top:1px solid rgba(255,255,255,.12); }
.na-ft-more > a{ font-weight:600; color:#fff !important; }
.na-ft-contact li{ display:flex; gap:10px; align-items:flex-start; }
.na-ft-contact li svg{ flex:0 0 16px; width:16px; height:16px; margin-top:2px; stroke:#a9b4be; fill:none; stroke-width:1.8; }
.na-ft-contact a, .na-ft-plain{ white-space:nowrap; }
.na-ft-plain{ color:#e9edf1; }
.na-ft-hours{ color:#a9b4be; font-size:13px; display:block !important; }
.na-ft-social{ display:flex; gap:8px; margin-top:18px; }
.na-ft-social a{ width:36px; height:36px; border-radius:10px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); display:grid; place-items:center; }
.na-ft-social a:hover{ background:rgba(255,255,255,.14); text-decoration:none; }
.na-ft-social svg{ width:16px; height:16px; fill:#fff; stroke:none; }
.na-ft-news{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:20px; }
.na-ft-news-title{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#fff; margin:0 0 10px; }
.na-ft-news p{ color:#a9b4be; margin:0 0 12px; font-size:13px; }
.na-ft-news-row{ display:flex; gap:8px; }
.na-ft-news-row .form-control{ flex:1; min-width:0; font-size:14px; padding:10px 12px; border-radius:10px; border:1px solid transparent; background:#f6f7f9; color:#2b3136; height:auto; }
.na-ft-news-row .form-control:focus{ border-color:#9cc3ef; box-shadow:0 0 0 3px rgba(156,195,239,.6); }
.na-ft-news-row .btn{ font-weight:600; font-size:14px; border-radius:10px; padding:10px 16px; white-space:nowrap; background:var(--na-primary,#0654b0); border-color:var(--na-primary,#0654b0); }
.na-ft-news-privacy{ margin-top:12px; font-size:12px; color:#a9b4be; }
.na-ft-news-privacy label, .na-ft-news-privacy .form-check-label, .na-ft-news-privacy p{ color:#a9b4be !important; font-size:12px; }
.na-ft-news-privacy a{ color:#e9edf1 !important; text-decoration:underline; text-underline-offset:2px; }
.na-ft-seal{ margin-top:20px; display:flex; align-items:center; gap:10px; color:#a9b4be; font-size:12px; }
.na-ft-seal img{ width:70px; height:auto; display:block; background:#fff; border-radius:50%; }
.na-ft-bottom{ border-top:1px solid rgba(255,255,255,.12); background:rgba(0,0,0,.18); color:#a9b4be; }
.na-ft-bottom .na-ft-wrap{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding-top:16px; padding-bottom:16px; font-size:12px; }
.na-ft-bottom a{ color:#a9b4be !important; text-decoration:underline; text-underline-offset:2px; }
@media (max-width:991.98px){ .na-ft-main .na-ft-wrap{ grid-template-columns:1fr 1fr; } }
@media (max-width:767.98px){
  .na-ft-wrap{ padding:0 16px; }
  .na-ft-usp .na-ft-wrap{ grid-template-columns:1fr; gap:14px; padding-top:22px; padding-bottom:22px; }
  .na-ft-main .na-ft-wrap{ grid-template-columns:1fr; gap:0; padding-top:12px; padding-bottom:28px; }
  .na-ft-col{ border-top:1px solid rgba(255,255,255,.12); }
  .na-ft-col > summary{ display:flex; justify-content:space-between; align-items:center; padding:12px 0; margin:0; cursor:pointer; }
  .na-ft-col > summary::after{ content:"+"; font-size:18px; font-weight:400; color:#a9b4be; }
  .na-ft-col[open] > summary::after{ content:"\2212"; }
  .na-ft-col ul{ padding-bottom:12px; }
  .na-ft-social{ margin:12px 0 16px; }
  .na-ft-side{ margin-top:24px; }
  .na-ft-news-row{ flex-direction:column; }
  .na-ft-bottom .na-ft-wrap{ flex-direction:column; align-items:flex-start; gap:6px; padding-top:16px; padding-bottom:20px; }
}


/* ===== FRONTEND-016 Paket 4 (10.11.2026, nur NA): Startseite S-023/S-025, Sicherheitshinweise S-027 ===== */
/* S-025: Leiste „Aus vimprint.de wird newactive.de“ nur fuer Gaeste und nur bei eingeschaltetem Schalter (body.na-vimprint-on) */
body.na-guest.na-vimprint-on .na-vimprint{ display:flex !important; }
@media (max-width:767.98px){
  body.na-guest.na-vimprint-on .na-vimprint{ flex-wrap:wrap; gap:10px !important; padding:12px !important; }
  .na-vimprint .na-vimprint-text{ flex-basis:100% !important; }
  .na-vimprint .na-vimprint-link{ display:none !important; }
  .na-vimprint .na-vimprint-btn{ display:block !important; flex:1 1 auto !important; text-align:center; }
}
/* S-023 3a „Bestellen mit System“: angemeldet nur „Zum Kundenkonto“ */
body.na-member .na-home-sys-guest{ display:none !important; }
body.na-member .na-home-sys-member{ display:inline-block !important; }
.na-home-sys-card{ transition:border-color .15s, box-shadow .15s; }
/* S-027 Sicherheitshinweise */
.na-safety .na-safety-for{ font-size:12px; color:var(--na-muted); margin:0 0 12px; }
.na-safety .na-safety-list{ list-style:none; margin:0 0 20px; padding:0; display:grid; gap:8px; font-size:14px; line-height:1.55; }
.na-safety .na-safety-list li{ display:flex; gap:10px; align-items:flex-start; }
.na-safety .na-safety-list li svg{ flex:0 0 18px; width:18px; height:18px; stroke:var(--na-primary); fill:none; stroke-width:2; margin-top:2px; }

/* ===== FRONTEND-016 Paket 5a CSS-Schnellweg (10.11.2026, nur NA): Variablen der neuen Komponenten fest setzen =====
   Die Pakete 2, 3b und 4 nutzen --na-primary/--na-muted/--na-text/--na-border/--na-surface/--na-radius*; diese sind in na-design.css
   nur in einzelnen Bereichen (z. B. Konto) gesetzt bzw. dort anders belegt. Hier gelten sie nur innerhalb der neuen Komponenten. */
:is(.na-dev, .na-finder, .na-bc, .na-phead, .na-ft, .na-ft-bottom, .na-safety, .na-home-sys, .na-help, .na-vimprint){
  --na-primary:#0654b0; --na-muted:#5c6670; --na-text:#2b3136; --na-border:#dde3ea; --na-surface:#f4f6f9;
  --na-radius:10px; --na-radius-card:14px; --na-radius-pill:999px;
}
/* ===== FRONTEND-016 Paket 5a2 CSS-Schnellweg (10.11.2026, nur NA): Footer S-010 Feinschliff =====
   newactive.css (Kern) malt die Footer-Flaeche ueber footer.footer-main::before (hellgrau, z-index -1 im Stapelkontext des Footers)
   und setzt Footer-Linkfarben mit !important; beides lag ueber dem dunklen Footer aus S-010. Nur im neuen Footer (.na-ft) wirksam. */
body footer.footer-main:has(> .na-ft)::before{ content:none !important; display:none !important; }
body footer.footer-main:has(> .na-ft){ background:linear-gradient(135deg,#1c2731 0%,#2e363e 100%) !important; }
body footer.footer-main .na-ft a, body footer.footer-main .na-ft-bottom a{ color:#e9edf1 !important; }
body footer.footer-main .na-ft a:hover, body footer.footer-main .na-ft a:focus-visible{ color:#fff !important; }
body footer.footer-main .na-ft .na-ft-more > a{ color:#fff !important; }
body footer.footer-main .na-ft .na-ft-col > summary{ color:#fff !important; }
body footer.footer-main .na-ft .na-ft-news-row{ display:flex !important; }
body footer.footer-main .na-ft .na-ft-news-row .form-control{ flex:1 1 auto !important; width:auto !important; min-width:0 !important; max-width:none !important; }
body footer.footer-main .na-ft .na-ft-news-row .btn{ flex:0 0 auto !important; width:auto !important; }
body footer.footer-main .na-ft .na-ft-news-privacy, body footer.footer-main .na-ft .na-ft-news-privacy *{ color:#a9b4be !important; }
body footer.footer-main .na-ft .na-ft-news-privacy :is(h1,h2,h3,h4,h5,.h5,strong,b){ color:#fff !important; font-size:13px !important; }
body footer.footer-main .na-ft .na-ft-news-privacy a{ color:#e9edf1 !important; }
body footer.footer-main .na-ft .na-ft-seal span{ color:#a9b4be !important; }
@media (max-width:767.98px){ body footer.footer-main .na-ft .na-ft-news-row{ flex-direction:column !important; } }

/* ===== FRONTEND-016 Paket 6 (10.11.2026, nur NA): S-008 Merkzettel im Kundenkonto, Gaeste zur Anmeldung ===== */
.na-wishlist-login{ display:flex; justify-content:center; padding:48px 16px 64px; }
.na-wishlist-login-card{ max-width:520px; width:100%; background:#fff; border:1px solid #dde3ea; border-radius:14px; padding:28px; text-align:center; box-shadow:0 1px 2px rgba(16,38,66,.06),0 4px 16px rgba(16,38,66,.06); }
.na-wishlist-login-card h1{ font-size:24px; margin:0 0 10px; }
.na-wishlist-login-card p{ color:#5c6670; margin:0 0 18px; }
.na-wishlist-account .wishlist-page{ margin:0; }
.na-wishlist-guest .product-wishlist-action{ display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }/* S-012/S-019 Kategorien: Breadcrumb und einheitlicher Kopf; die Kategorie-Ueberschrift der Erlebniswelt entfaellt neben dem Kopf (eine H1) */
.na-bc-wrap{ margin:0 0 4px; }
main:has(.na-phead-cat) .cms-element-category-name, main:has(.na-phead-cat) .cms-element-category-name-headline{ display:none !important; }
.na-phead-cat{ margin-bottom:20px; }
/* FRONTEND-016 Paket 7a CSS-Schnellweg (10.11.2026, S-031, nur NA): Footer-Unterleiste lesbar, Footer-Container wie Seite, Nach-oben-Button frei.
   Ursache schwarze Schrift: Kern-Regel .footer-main * { color: var(--na-footer-fg) } mit --na-footer-fg #000; Unterleiste und Pfeil hatten keine eigene Farbe.
   Container: gleiche Breite wie .container-main (max-width var(--na-container), Innenabstand 24 px). */
html body footer.footer-main .na-ft-bottom{--na-footer-fg:#a9b4be;color:#a9b4be}
html body footer.footer-main .na-ft-bottom a{color:#c9d2da;text-decoration:underline;text-underline-offset:2px}
html body footer.footer-main .na-ft-bottom a:hover,html body footer.footer-main .na-ft-bottom a:focus-visible{color:#fff}
html body footer.footer-main .na-ft a > span[aria-hidden="true"]{color:inherit}
html body footer.footer-main .na-ft-wrap{max-width:var(--na-container,1320px);padding-left:24px;padding-right:24px}
html body footer.footer-main .na-ft-bottom .na-ft-wrap{padding-right:max(24px,calc(85px - max(0px,(100vw - var(--na-container,1320px)) / 2)))}
/* FRONTEND-016 Paket 7 (10.11.2026, S-030, nur NA): vimprint-Leiste groesser (Logos in Kacheln, Text, Button) und
   „Bestellen mit System“ Variante 2B (dunkles Panel, sechs Karten 2 x 3). Inline-Stile im CMS, hier Zustand und mobile Ansicht. */
body.na-guest.na-vimprint-on .na-vimprint{display:flex !important;flex-direction:column}
body.na-member .na-home-sys-member{display:block !important}
.na-home-sys .na-home-sys-card{transition:border-color .15s,background-color .15s}
.na-home-sys .na-home-sys-card:hover{border-color:rgba(255,255,255,.24) !important;background:rgba(255,255,255,.09) !important}
.na-home-sys .na-home-sys-actions a:focus-visible,.na-vimprint .na-vimprint-btn:focus-visible{outline:2px solid #9cc3ef;outline-offset:2px}
@media (max-width:991.98px){
  .na-home-sys .na-home-sys-panel{grid-template-columns:1fr !important}
}
@media (max-width:767.98px){
  body.na-guest.na-vimprint-on .na-vimprint{flex-wrap:nowrap;gap:12px !important;padding:14px !important}
  .na-vimprint .na-vimprint-chip{height:44px !important}
  .na-vimprint .na-vimprint-old img{height:20px !important}
  .na-vimprint .na-vimprint-chip:not(.na-vimprint-old) img{height:28px !important}
  .na-vimprint .na-vimprint-row{flex-direction:column;align-items:stretch !important}
  .na-vimprint .na-vimprint-text{flex-basis:auto !important}
  .na-vimprint .na-vimprint-btn{display:block !important;text-align:center}
  .na-home-sys .na-home-sys-panel{padding:20px !important;gap:20px !important}
  .na-home-sys .na-home-sys-grid{grid-template-columns:1fr !important;grid-auto-rows:auto !important}
}
/* FRONTEND-016 Paket 8 (10.11.2026, S-002/S-003, nur NA): ein Listen-Layout fuer Suche und Kategorien (Entwurf S-003_Suchergebnis_Listen_Entwurf.html).
   Reihenfolge Filterleiste vor Seitennavigation (nur CSS, Kern-JS unveraendert), Filterleiste bleibt ab 992 px unter der Kopfzeile stehen,
   Seitennavigation oben/unten gleich, Suchkopf, Ansicht ohne Treffer, Abstand Kopf zu Filterleiste 16 px. */
html body .cms-element-product-listing-actions{display:flex !important;flex-direction:column !important;grid-template-columns:none !important;align-items:stretch;margin:16px 0 8px 0 !important;row-gap:0}
html body .cms-element-product-listing-actions > *{width:100%;max-width:100%;flex:0 0 auto;padding-left:0;padding-right:0;grid-area:auto !important}
html body .cms-element-product-listing-actions > :has(.na-listing-actions-right){order:1}
html body .cms-element-product-listing-actions > .na-listing-filters-target{order:2}
html body .cms-element-product-listing-actions > :has(.na-pg-top){order:3}
html body .na-listing-actions-right{justify-content:flex-start !important;padding:12px 0 10px;border-bottom:1px solid #e3e7eb}
html body .na-listing-actions-right > .sorting,html body .na-listing-actions-right > [data-listing-sorting]{margin-left:auto}
@media (min-width:992px){html body .cms-element-product-listing-actions{position:sticky;top:136px;z-index:20;background:#fff}}
/* Seitennavigation */
html body .na-pg{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 0}
html body .na-pg-info{font-size:13px;color:#6b7680}
html body .na-pg .pagination-nav{margin:0}
html body .na-pg .pagination{margin:0;gap:4px;flex-wrap:wrap}
html body .na-pg .page-first,html body .na-pg .page-last{display:none}
html body .na-pg .page-item .page-link{min-width:36px;height:36px;padding:0 10px;display:flex;align-items:center;justify-content:center;border:1px solid #e3e7eb !important;background:#fff;border-radius:10px !important;font-size:13px;font-weight:600;color:#4a545d;margin:0;box-shadow:none}
html body .na-pg .page-item .page-link:hover{border-color:#0654b0 !important;color:#0654b0}
html body .na-pg .page-item.active .page-link{background:#0654b0;border-color:#0654b0 !important;color:#fff}
html body .na-pg .page-item.disabled .page-link{opacity:.4}
html body .na-pg .page-prev .page-link,html body .na-pg .page-next .page-link{padding:0 12px;white-space:nowrap}
html body .na-pg-bottom{margin-top:6px;padding-top:16px;border-top:1px solid #e3e7eb;position:relative;z-index:1}
@media (max-width:767.98px){
  html body .na-pg .page-item:not(.page-prev):not(.page-next):not(.active){display:none}
  html body .na-pg{justify-content:center}
  html body .na-pg-info{flex-basis:100%;text-align:center}
}
/* Suchkopf (S-003) */
html body .na-search-top{margin:0 0 0 0}
html body .na-search-top .na-phead{margin:12px 0 0 0}
html body .search-page .na-phead-search h1{word-break:break-word}
/* Kategorie-Kopf: Abstand zur Filterleiste 16 px, leerer Bild-Text-Block entfaellt */
html body .na-bc-wrap:has(.na-phead-cat){margin-bottom:0}
html body .na-phead-cat{margin-bottom:0}
html body:has(.na-phead-cat) .cms-block-image-text:not(:has(img,picture,p,h1,h2,h3,h4,ul,a)){display:none}
html body:has(.na-phead-cat) .cms-block-product-listing > .cms-block-container{padding-top:0}
/* Ohne Treffer (S-003) */
html body .na-empty{background:#fff;border:1px solid #e3e7eb;border-radius:14px;padding:28px;margin:16px 0;display:grid;grid-template-columns:1fr 1fr;gap:28px;color:#2b3136}
html body .na-empty h2{margin:0 0 8px;font-size:18px;font-weight:700}
html body .na-empty ul{margin:0;padding-left:18px;font-size:14px;color:#4a545d;display:grid;gap:6px}
html body .na-empty ul a{color:#0654b0;font-weight:600}
html body .na-empty-help{background:#f4f6f8;border-radius:12px;padding:16px}
html body .na-empty-help b{display:block;margin-bottom:6px}
html body .na-empty-help p{margin:0 0 10px;font-size:13px;color:#4a545d}
html body .na-empty-btn{display:inline-block;font-weight:600;font-size:13px;background:#0654b0;color:#fff;border:1.5px solid #0654b0;border-radius:10px;padding:8px 14px;text-decoration:none;margin:0 6px 6px 0}
html body .na-empty-btn:hover{color:#fff;background:#00315e;border-color:#00315e}
html body .na-empty-btn-out{background:#fff;color:#0654b0}
html body .na-empty-btn-out:hover{background:#e8f0fa;color:#0654b0;border-color:#0654b0}
html body .cms-element-product-listing:has(.na-empty) .cms-element-product-listing-actions{display:none !important}
@media (max-width:767.98px){html body .na-empty{grid-template-columns:1fr;padding:18px}}
/* FRONTEND-016 Paket 9 (10.11.2026, S-003, nur NA): Umschalter Alle / Original / Kompatibel in der Filterleiste (wie Geraeteseite),
   Sortierung rechtsbuendig, versteckte Filter na-orig / na-komp. */
html body .cms-element-product-listing-actions > :has(.na-listing-actions-right){display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px 0 10px !important;border-bottom:1px solid #e3e7eb}
html body .na-listing-actions-right{flex:1 1 auto;padding:0 !important;border-bottom:0 !important}
html body .na-listing-actions-right > .sorting{margin-left:auto !important}
html body .na-seg{display:inline-flex;background:#fff;border:1px solid #e3e7eb;border-radius:10px;padding:3px;gap:2px;flex:0 0 auto}
html body .na-seg-btn{font:600 13px/1.2 inherit;border:0;background:transparent;color:#4a545d;padding:7px 12px;border-radius:8px;cursor:pointer;white-space:nowrap}
html body .na-seg-btn:hover{color:#0654b0}
html body .na-seg-btn.is-on{background:#0654b0;color:#fff}
html body .na-seg-btn:focus-visible{outline:2px solid #9cc3ef;outline-offset:1px}
html body .na-seg-n{font-weight:500;opacity:.75;margin-left:2px}
html body .na-seg-filters{display:none !important}
@media (max-width:767.98px){
  html body .na-seg{display:flex;width:100%}
  html body .na-seg-btn{flex:1 1 0}
  html body .na-listing-actions-right > .sorting{margin-left:0 !important}
}
/* FRONTEND-016 Paket 10 (10.11.2026, S-033/S-035, nur NA):
   (b) Herstellerseiten /hersteller, /hersteller/{Marke}, Serie: doppelter Seitencontainer (container-main in container-main + container)
       verdoppelte Abstand oben und Rand seitlich, besonders bei 390 px; jetzt wie Geraeteseite.
   (c) Suchfeld „Hersteller suchen“ / „Gerät suchen“: nur ein Fokusrahmen (Rahmen am Feld), globaler Fokus-Schatten am Eingabefeld entfaellt.
   S-035 Hinweis auf der Anmeldeseite nach Klick auf das Merkzettel-Herz. */
html body .container-main > .container-main.na-finder{padding:0 !important;margin:0 !important;max-width:none !important}
html body .container-main.na-finder > .container{padding-left:0 !important;padding-right:0 !important;max-width:none !important}
html body .na-finder-filter input:focus,html body .na-finder-filter input:focus-visible{box-shadow:none !important;outline:0 !important}
html body .na-login-hint{background:#e8f0fa;border:1px solid #c9dcf3;color:#00315e;border-radius:10px;padding:10px 14px;font-size:14px;font-weight:600;line-height:1.45;margin:0 0 14px}
/* FRONTEND-016 Paket 11 (10.11.2026, nur NA): S-003 Umschalter Alle / Original / Kompatibel links in der Filterleiste (nicht eigene Zeile);
   S-020 Karte „Meine Artikel“ wie Suche: Infozeile aus na-row-meta, Name wie Artikelname der Listen, Referenz-Teil der Komponente aus. */
@media (min-width:768px){html body .cms-element-product-listing-actions > :has(.na-listing-actions-right){flex-wrap:nowrap !important;justify-content:flex-start !important}}
html body .na-listing-actions-right{flex:1 1 0 !important;min-width:0}
html body .na-can-card .na-can-name{text-decoration:none !important;font-weight:600;font-size:15px;color:#2b3136}
html body .na-can-card .na-can-name:hover,html body .na-can-card .na-can-name:focus-visible{color:#0654b0;text-decoration:underline !important}
html body .na-can-card .na-row-meta{margin-top:4px}
html body .na-can-card .na-row-l3 > :not(.na-row-delivery){display:none !important}
/* FRONTEND-016 Paket 11a CSS-Schnellweg (10.11.2026, S-020, nur NA): Infozeile der Karte Meine Artikel gestaltet wie in den Listen.
   Automatisch uebernommen: alle Regeln oberster Ebene fuer .na-row-* aus .card.product-box, Praefix auf .na-can-card umgesetzt (39 Regeln). */
html body .na-can-card :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 .na-can-card .na-row-tag{ font-size:11px; font-weight:600; line-height:1.5; padding:2px 8px; border-radius:999px; }
html body .na-can-card .na-row-tag--orig{ background:#eaf2fb; color:#0b3a6e; }
html body .na-can-card .na-row-tag--komp{ background:#ecfdf3; color:#166534; }
html body .na-can-card .na-row-tag--hw{ background:#f3f4f6; color:#374151; }
html body .na-can-card .na-row-delivery .product-delivery-information{ margin:0 !important; padding:0 !important; }
html body .na-can-card .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 .na-can-card .na-row-delivery .delivery-information br{ display:none; }
html body .na-can-card .na-row-delivery .delivery-information br + span::before{ content:"· "; }
html body .na-can-card .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 .na-can-card .na-row-delivery .delivery-status-indicator::before{ content:none !important; }
html body .na-can-card .na-row-delivery :is(.delivery-soldout, .delivery-preorder) .delivery-status-indicator{ background:#f59e0b !important; }
html body .na-can-card .na-row-delivery .delivery-not-available .delivery-status-indicator{ background:#dc2626 !important; }
html body .na-can-card .na-row-l3 .na-can-box{ margin:0 !important; font-size:13px; color:#0654b0; }
html body .na-can-card .na-row-l3 .na-can-box-empty .na-can-edit{ color:#6b7280; }
html body .na-can-card .na-row-l3 .na-can-box-empty .na-can-edit-text::after{ content:" anlegen"; }
html body .na-can-card .na-row-l3 a{ position:relative; z-index:2; }
html body .na-can-card :is(.na-row-l2, .na-row-l3){ gap:2px 10px; font-size:12.5px; line-height:18px; }
html body .na-can-card .na-row-l2{ max-height:38px; overflow:hidden; }
html body .na-can-card .na-row-tag{ line-height:16px; padding:1px 7px; }
html body .na-can-card .na-row-color{ display:inline-flex; align-items:center; gap:5px; }
html body .na-can-card .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 .na-can-card .na-row-color--k i{ background:#111827; }
html body .na-can-card .na-row-color--c i{ background:#06b6d4; }
html body .na-can-card .na-row-color--m i{ background:#db2777; }
html body .na-can-card .na-row-color--y i{ background:#facc15; }
html body .na-can-card .na-row-delivery .delivery-information{ font-size:12.5px !important; line-height:18px; }
html body .na-can-card .na-row-l3 .na-can-box{ font-size:12.5px; }
html body .na-can-card .na-row-l3 .na-can-box-empty .na-can-edit-text::after{ content:none !important; }
html body .na-can-card .na-row-l2{ max-height:none; overflow:visible; }
html body .na-can-card .na-row-delivery{ min-width:0; }
html body .na-can-card .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 .na-can-card .na-row-colors .na-row-dot.na-row-color--k{ background:#111827; }
html body .na-can-card .na-row-colors .na-row-dot.na-row-color--c{ background:#06b6d4; }
html body .na-can-card .na-row-colors .na-row-dot.na-row-color--m{ background:#db2777; }
html body .na-can-card .na-row-colors .na-row-dot.na-row-color--y{ background:#facc15; }
html body .na-can-card .na-row-color--r i, html body .na-can-card .na-row-colors .na-row-dot.na-row-color--r{ background:#dc2626; }
html body .na-can-card .na-row-color--b i, html body .na-can-card .na-row-colors .na-row-dot.na-row-color--b{ background:#2563eb; }
html body .na-can-card .na-row-color--g i, html body .na-can-card .na-row-colors .na-row-dot.na-row-color--g{ background:#16a34a; }
html body .na-can-card .na-row-l2{max-height:none;overflow:visible}

/* FRONTEND-016 Paket 12 (10.11.2026, S-036 MUSS, S-002, S-003, nur NA): mobile Listen und Filteransicht.
   Kopf ohne Icon-Spalte, kein Wortbruch, Geraetearten als Textzeile; Seitennavigation mobil nur aktuelle Seite, aktive Seite blau
   (Theme-Regeln mit hoeherer Gewichtung uebersteuert); Filter auch in der Suche; Filteransicht mit offenen Listen, Geraetetyp und
   Button „Produkte anzeigen“; Anzahl aktiver Filter am Button; kein Ueberlauf in der Kartenzeile „Eigene Referenz“. */
html body .na-pg .page-item.active .page-link{background:#0654b0 !important;border-color:#0654b0 !important;color:#fff !important}
html body .filter-panel-wrapper-toggle .na-filter-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;margin-left:8px;border-radius:999px;background:#0654b0;color:#fff;font-size:12px;font-weight:700}
html body .filter-panel-wrapper-toggle .na-filter-count[hidden]{display:none}
html body .na-filter-devtypes ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
html body .na-filter-devtypes li{display:flex;justify-content:space-between;align-items:center;gap:10px}
html body .na-filter-devtypes a{display:block;padding:7px 0;color:#2b3136;font-size:14px;text-decoration:none}
html body .na-filter-devtypes a:hover{color:#0654b0}
html body .na-filter-devtypes .na-devtype-n{font-size:12px;color:#6b7680}
html body .na-filter-apply{position:sticky;bottom:0;background:#fff;padding:12px 0 4px;margin-top:8px}
html body .na-filter-apply .btn{width:100%;justify-content:center}
@media (max-width:991.98px){
  html body.is-ctl-search .cms-element-sidebar-filter .filter-panel-wrapper-toggle{display:block !important}
  html body .cms-element-sidebar-filter{margin-top:12px}
  html body .offcanvas .filter-panel-items-container{display:flex !important;flex-direction:column !important;flex-wrap:nowrap !important;gap:18px !important;align-items:stretch !important}
  html body .offcanvas .filter-panel-item{width:100% !important;margin:0 !important}
  html body .offcanvas .filter-panel-item-toggle{width:100% !important;display:flex !important;justify-content:flex-start !important;border:0 !important;padding:0 0 6px !important;font-weight:700 !important;font-size:15px !important;pointer-events:none;background:transparent !important;box-shadow:none !important;color:#2b3136 !important}
  html body .offcanvas .filter-panel-item-toggle .icon{display:none !important}
  html body .offcanvas .filter-panel-item .dropdown-menu{position:static !important;display:block !important;transform:none !important;inset:auto !important;width:100% !important;min-width:0 !important;box-shadow:none !important;border:1px solid #e3e7eb !important;border-radius:10px !important;max-height:none !important;padding:8px 12px !important;margin:0 !important;float:none !important}
}
@media (max-width:767.98px){
  html body .na-bc-wrap.container{padding-left:0 !important;padding-right:0 !important}
  html body .na-phead{grid-template-columns:1fr !important;gap:12px !important;padding:18px !important}
  html body .na-phead .na-phead-ico{display:none !important}
  html body .na-phead h1{word-break:normal !important;overflow-wrap:normal !important;hyphens:manual !important;font-size:24px !important;line-height:1.2}
  html body .na-phead-chips{display:flex;flex-wrap:wrap;gap:6px}
  html body .na-phead-cat .na-phead-chips .na-chip + .na-chip{flex-basis:100%;border-radius:0 !important;background:transparent !important;border:0 !important;padding:2px 0 0 !important;font-weight:500;line-height:1.45;white-space:normal}
  html body .na-phead-side{text-align:left !important;align-items:stretch}
  html body .na-phead-side .na-phead-btn{display:block;text-align:center}
  html body .cms-element-product-listing-actions{margin-top:8px !important}
  html body .cms-element-product-listing-actions > :has(.na-listing-actions-right){padding:8px 0 !important}
  html body .na-pg{padding:8px 0}
  html body .na-pg .pagination .page-item:not(.page-prev):not(.page-next):not(.active){display:none !important}
  html body .card.product-box .na-row-l3{flex-wrap:wrap;min-width:0}
  html body .card.product-box .na-row-l3 > *{min-width:0;max-width:100%}
  html body .card.product-box .na-row-l3 .na-can-edit-text{white-space:normal}
}/* FRONTEND-016 Paket 15 (S-037, Entscheidung Rabih 10.11.2026): mobil einheitlich 16 px Seitenrand, "Referenz" mit Icon,
   Leerzeichen in "< Zurueck" / "Weiter >", Markenlogo klein ueber der H1. */
html body .na-pg .page-prev .page-link,html body .na-pg .page-next .page-link{gap:.3em}
@media (max-width:767.98px){
  html body.is-ctl-navigation .container-main{padding-left:16px !important;padding-right:16px !important}
  html body.is-ctl-navigation .cms-section-default.boxed{padding-left:0 !important;padding-right:0 !important}
  html body.is-ctl-devicefinderpage .content-main > .container{padding-left:16px !important;padding-right:16px !important}
  html body .na-can-box-empty .na-can-edit-text{display:none !important}
  html body .na-can-box-empty .na-can-edit::after{content:"Referenz";font-size:13px}
  html body .na-phead .na-phead-ico.is-logo{display:flex !important;align-items:center;justify-self:start;width:auto !important;height:40px !important;max-width:160px;padding:6px 10px !important}
  html body .na-phead .na-phead-ico.is-logo img{height:28px;width:auto;max-width:140px;max-height:28px}
}

/* ==========================================================================
   FRONTEND-017 Paket 1 (11.11.2026, Design-Standard USER_CONFIRMED Rabih, nur NA, shopweit, nur CSS):
   1. Inhaltsbreite auf allen Seiten = Kopfzeile: exakt von der linken Kante der Volltextsuche bis zur
      rechten Kante des Tonerfinders (ab 992 px: max-width var(--na-container), 20 px Rand wie .na-hdr-wrap;
      bis 991 px: volle Breite, 12 px Rand wie die Suche). Verschachtelte .container/.container-main im
      Inhalt ohne eigenen Rand; CMS-Abschnitte (boxed) ohne Zusatzrand.
   2. Landingpages (CMS-HTML mit eigener Breite im HTML): Inhalt der Vollbreite-Abschnitte auf dieselbe Breite.
   3. Rechtstexte: Karte ueber die volle Inhaltsbreite (mit Inhaltsverzeichnis: 260 px + Rest), Text max. 900 px.
   4. Leere Produkt-Slider (ohne Produkte) ausblenden: keine weisse Luecke vor dem Footer (B1).
   5. Footer: Instagram-Symbol ausgeblendet (B2, Entscheidung Rabih 11.11.2026).
   Spezifitaet ueber :not(#na-fe017), damit die Regel alle aelteren Seitenregeln sicher ersetzt.
   ========================================================================== */
:root{ --na-inner:calc(var(--na-container, 1320px) - 40px); }
@media (max-width:991.98px){ :root{ --na-inner:calc(100vw - 24px); } }
/* 1. */
@media (min-width:992px){
  html body:not(#na-fe017) main.content-main > .container,
  html body:not(#na-fe017) main.content-main > .container-main{ max-width:var(--na-container, 1320px) !important; width:100% !important; padding-left:20px !important; padding-right:20px !important; margin-left:auto !important; margin-right:auto !important; box-sizing:border-box !important; }
}
@media (max-width:991.98px){
  html body:not(#na-fe017) main.content-main > .container,
  html body:not(#na-fe017) main.content-main > .container-main{ max-width:none !important; width:100% !important; padding-left:12px !important; padding-right:12px !important; margin-left:0 !important; margin-right:0 !important; box-sizing:border-box !important; }
}
html body:not(#na-fe017) main.content-main > :is(.container, .container-main) :is(.container, .container-main){ max-width:none !important; width:auto !important; padding-left:0 !important; padding-right:0 !important; margin-left:0 !important; margin-right:0 !important; }
html body:not(#na-fe017) main.content-main .cms-section:not(.na-home-fullbleed) > :is(.cms-section-default, .cms-section-sidebar).boxed{ padding-left:0 !important; padding-right:0 !important; }
html body:not(#na-fe017) main.content-main .cms-section:not(.na-home-fullbleed) .cms-block-container{ padding-left:0 !important; padding-right:0 !important; }
/* 2. */
html body:not(#na-fe017) main.content-main .cms-element-html > section{ padding-left:0 !important; padding-right:0 !important; }
html body:not(#na-fe017) main.content-main .cms-element-html > section > div,
html body:not(#na-fe017) main.content-main .cms-element-html > .na-home-mid,
html body:not(#na-fe017) main.content-main .cms-section.na-home-contact-band > section.cms-section-default.full-width > .cms-block{ max-width:var(--na-inner) !important; width:var(--na-inner) !important; margin-left:auto !important; margin-right:auto !important; box-sizing:border-box !important; }
html body:not(#na-fe017) main.content-main .cms-section.na-home-contact-band > section.cms-section-default.full-width{ padding-left:0 !important; padding-right:0 !important; }
/* 3. */
html body:not(#na-fe017) main.content-main .cms-element-text.na-legal-doc{ max-width:none !important; width:auto !important; margin-left:0 !important; margin-right:0 !important; }
html body:not(#na-fe017) main.content-main .cms-element-text.na-legal-doc > *{ max-width:900px; }
html body:not(#na-fe017) main.content-main .cms-block-container-row.row:has(.na-legal-doc){ margin-left:0 !important; margin-right:0 !important; justify-content:flex-start !important; column-gap:24px; }
html body:not(#na-fe017) main.content-main .cms-block-container-row.row:has(.na-legal-doc) > .col-12:has(.na-legal-doc){ max-width:none !important; flex:1 1 0% !important; min-width:0; padding-left:0 !important; padding-right:0 !important; }
html body:not(#na-fe017) main.content-main .cms-block-container-row.row:has(.na-legal-doc) > .na-legal-toc{ margin-left:0 !important; }
@media (min-width:992px){
  html body.na-legal:not(#na-fe017) main.content-main .cms-block-container-row.row.na-legal-has-toc{ grid-template-columns:260px minmax(0, 1fr) !important; }
}
@media (max-width:991.98px){
  html body:not(#na-fe017) main.content-main .cms-block-container-row.row:has(.na-legal-doc) > .col-12:has(.na-legal-doc){ flex:1 1 100% !important; }
}
/* 4. */
html body:not(#na-fe017) main.content-main .cms-block-product-slider:not(:has(.product-box)){ display:none !important; }
html body:not(#na-fe017) main.content-main .cms-section:has(.cms-block-product-slider):not(:has(.cms-block:not(.cms-block-product-slider))):not(:has(.product-box)){ display:none !important; }
/* 5. */
html body:not(#na-fe017) footer a[href*="instagram.com"]{ display:none !important; }
/* ==========================================================================
   FRONTEND-017 Paket 1b (11.11.2026, Befunde Rabih nach Paket 1, nur NA, nur CSS):
   a) Paket 1 setzte bei CMS-HTML-Inhalten den Innenabstand auf 0 (z. B. "Bestellen mit System" klebte am Rand,
      Kontaktformular-Felder ueber die dunkle Karte). Korrigiert: Paket-1-Regel ohne Innenabstand (Block oben ersetzt).
   b) Dunkle Formular-Karten (Kontaktband auf allen Seiten, Vertrag widerrufen) ueber die volle Inhaltsbreite;
      Innenabstand rundum einheitlich var(--na-card-pad) (48 px, bis 991 px 20 px); Ueberschrift und Felder an derselben Kante;
      Karte 40 px vom Rand des Hintergrunds. Widerruf: kein weisser Streifen ueber dem Hintergrund.
   c) Footer Newsletter: Button auf Hoehe des Eingabefelds (kein margin-top).
   ========================================================================== */
:root{ --na-card-pad:48px; }
@media (max-width:991.98px){ :root{ --na-card-pad:20px; } }
/* b) Kontaktband */
html body:not(#na-fe017) main.content-main .cms-section.na-home-contact-band > section.cms-section-default.full-width{ padding-top:40px !important; padding-bottom:40px !important; }
html body:not(#na-fe017) main.content-main .cms-section.na-home-contact-band > section.cms-section-default.full-width::before{ width:var(--na-inner) !important; max-width:var(--na-inner) !important; left:50% !important; right:auto !important; transform:translateX(-50%) !important; margin-left:0 !important; top:40px !important; bottom:40px !important; }
html body:not(#na-fe017) main.content-main .cms-section.na-home-contact-band > section.cms-section-default.full-width > .cms-block .cms-element-html > section > div{ padding:var(--na-card-pad) !important; }
html body:not(#na-fe017) main.content-main .cms-section.na-home-contact-band > section.cms-section-default.full-width > .cms-block.na-home-contact-form{ padding:32px var(--na-card-pad) var(--na-card-pad) !important; margin-top:0 !important; }
html body:not(#na-fe017) main.content-main .cms-section.na-home-contact-band > section.cms-section-default.full-width > .cms-block.na-home-contact-form .na-contact-form-card-body{ padding:0 !important; }
/* b) Vertrag widerrufen */
html body:not(#na-fe017) main.content-main > .container-main:has(.cms-section:first-child #cms-form-online-revocation-request){ padding-top:0 !important; }
html body:not(#na-fe017) main.content-main .cms-section:has(#cms-form-online-revocation-request) > section.cms-section-default{ padding-top:40px !important; padding-bottom:40px !important; }
html body:not(#na-fe017) main.content-main .cms-section:has(#cms-form-online-revocation-request) > section.cms-section-default::before{ width:var(--na-inner) !important; max-width:var(--na-inner) !important; top:40px !important; bottom:40px !important; }
html body:not(#na-fe017) main.content-main .cms-section:has(#cms-form-online-revocation-request) .cms-block:has(#cms-form-online-revocation-request){ max-width:var(--na-inner) !important; width:var(--na-inner) !important; padding:var(--na-card-pad) !important; box-sizing:border-box !important; }
html body:not(#na-fe017) main.content-main .cms-section:has(#cms-form-online-revocation-request) .cms-block:has(#cms-form-online-revocation-request) > .cms-block-container{ padding:0 !important; }
html body:not(#na-fe017) main.content-main .cms-section:has(#cms-form-online-revocation-request) .cms-block:has(#cms-form-online-revocation-request) .na-contact-form-card-body{ padding:0 !important; }
/* c) */
html body:not(#na-fe017) footer .na-ft-news-row .na-footer-newsletter-btn{ margin-top:0 !important; }
/* ==========================================================================
   FRONTEND-017 Paket 2a (11.11.2026, B5 Entscheidung Rabih, nur NA): 404-Seite im Design-Standard.
   Breadcrumb + dunkler Seitenkopf (na-phead) wie Suche/Hersteller; darunter Karte (Radius 14 px, Innenabstand var(--na-card-pad))
   mit Erklaerung, Suchfeld und drei Einstiegen. Buttons 40 px, Radius 10 px.
   ========================================================================== */
html body:not(#na-fe017) .na-404{ padding-bottom:56px; }
html body:not(#na-fe017) .na-404 .na-phead{ margin-top:12px; }
html body:not(#na-fe017) .na-404-body{ margin-top:24px; padding:var(--na-card-pad, 48px); background:#fff; border:1px solid #e5e7eb; border-radius:14px; box-shadow:0 1px 2px rgba(17,24,39,.04); }
html body:not(#na-fe017) .na-404-text{ margin:0 0 20px; font-size:16px; line-height:1.6; color:#374151; max-width:900px; }
html body:not(#na-fe017) .na-404-search{ display:flex; gap:8px; max-width:640px; margin:0 0 24px; }
html body:not(#na-fe017) .na-404-search .form-control{ height:40px; border-radius:10px; flex:1 1 auto; min-width:0; }
html body:not(#na-fe017) .na-404-search .btn{ height:40px; border-radius:10px; padding:0 18px; font-weight:600; }
html body:not(#na-fe017) .na-404-links{ display:flex; flex-wrap:wrap; gap:10px; }
html body:not(#na-fe017) .na-404-links .btn{ height:40px; display:inline-flex; align-items:center; border-radius:10px; padding:0 18px; font-weight:600; }
/* ==========================================================================
   FRONTEND-017 Paket 2b (11.11.2026, Design-Standard USER_CONFIRMED Rabih, nur NA):
   1. Seitenanfang einheitlich: Breadcrumb ueberall 20 px unter der Kopfzeile, Seitenkopf 74 px (main ohne Zusatzabstand,
      404 ohne doppelten Container-Abstand).
   2. Inhaltsseiten (Vorlage page/content/index.html.twig): Breadcrumb + dunkler Seitenkopf "Kundeninformation"
      (Rechtstexte, Versand & Zahlung, Widerruf); doppelte Titel in der Karte ausgeblendet.
   3. Landingpages (Originalprodukte, Gepruefte Alternativen, Kontakt): Breadcrumb hell auf dem Hero an derselben Stelle;
      Hero-H1 einheitlich clamp(30px, 5vw, 64px).
   4. Widerruf: Inhaltsbreite gegen die aeltere Kernregel (body.is-act-pagefull) durchgesetzt.
   ========================================================================== */
/* 1. */
html body:not(#na-fe017) main.content-main{ padding-top:0 !important; }
html body:not(#na-fe017) main.content-main .container-main > .container-main.na-404{ padding-top:0 !important; }
/* 4. */
@media (min-width:992px){
  html body:not(#na-fe017):not(#na-fe017b) main.content-main > .container-main{ max-width:var(--na-container, 1320px) !important; width:100% !important; padding-left:20px !important; padding-right:20px !important; margin-left:auto !important; margin-right:auto !important; box-sizing:border-box !important; }
}
@media (max-width:991.98px){
  html body:not(#na-fe017):not(#na-fe017b) main.content-main > .container-main{ max-width:none !important; width:100% !important; padding-left:12px !important; padding-right:12px !important; margin-left:0 !important; margin-right:0 !important; box-sizing:border-box !important; }
}
html body:not(#na-fe017):not(#na-fe017b) main.content-main > .container-main:has(.na-bc-wrap:not(.na-bc-onhero)){ padding-top:20px !important; }
/* 2. */
html body:not(#na-fe017) main.content-main .na-bc-wrap > .na-phead-info{ margin-top:12px; margin-bottom:24px; }
html body:not(#na-fe017) main.content-main:has(.na-phead-info) .na-legal-doc .na-legal-title{ display:none !important; }
html body:not(#na-fe017) main.content-main:has(.na-phead-info) .na-contact-form-title{ display:none !important; }
/* 3. */
html body:not(#na-fe017):not(#na-fe017b) main.content-main > .container-main:has(.na-bc-onhero){ padding-top:0 !important; position:relative !important; }
html body:not(#na-fe017) main.content-main .na-bc-wrap.na-bc-onhero{ position:absolute !important; top:20px; left:0; right:0; z-index:5; padding-left:20px !important; padding-right:20px !important; max-width:var(--na-container, 1320px) !important; margin:0 auto !important; pointer-events:none; }
@media (max-width:991.98px){
  html body:not(#na-fe017) main.content-main .na-bc-wrap.na-bc-onhero{ padding-left:12px !important; padding-right:12px !important; max-width:none !important; }
  html body:not(#na-fe017) main.content-main > .container-main:has(.na-bc-onhero) .cms-section.na-home-fullbleed:first-child .cms-element-html > section{ padding-top:84px !important; }
}
html body:not(#na-fe017) main.content-main .na-bc-onhero .na-bc{ pointer-events:auto; }
html body:not(#na-fe017) main.content-main .na-bc-onhero .na-bc :is(a, span){ color:rgba(255,255,255,.88) !important; }
html body:not(#na-fe017) main.content-main .na-bc-onhero .na-bc [aria-current="page"]{ color:#fff !important; }
html body:not(#na-fe017) main.content-main .na-bc-onhero .na-bc svg{ stroke:#fff !important; color:#fff !important; }
html body:not(#na-fe017) main.content-main .na-bc-onhero .na-bc a:hover{ color:#fff !important; text-decoration:underline; }
html body:not(#na-fe017) main.content-main .cms-section.na-home-fullbleed .cms-element-html h1{ font-size:clamp(30px, 5vw, 64px) !important; line-height:1.08 !important; }
/* ==========================================================================
   FRONTEND-017 Paket 2c (11.11.2026, Befund Rabih: Hero-Anfang Originalprodukte vs. Gepruefte Alternativen ungleich, nur NA, nur CSS):
   Die linke Hero-Spalte der Landingpages war per Inline-Stil vertikal zentriert (justify-content:center); je nach Hoehe des
   rechten Kastens begann der Inhalt bei 90, 99 oder 140 px. Jetzt oben buendig: Badge auf allen Landingpages und der Startseite
   bei 90 px, Badge einheitlich (14 px, 600, 10/16 px, rund, 20 px Abstand zur H1), H1 ohne Zusatzabstand.
   ========================================================================== */
html body:not(#na-fe017) main.content-main .cms-section.na-home-fullbleed:first-child .cms-element-html > section :is([style*="justify-content:center"], [style*="justify-content: center"]){ justify-content:flex-start !important; }
html body:not(#na-fe017) main.content-main .cms-section.na-home-fullbleed:first-child .cms-element-html > section :is([style*="align-items:center"], [style*="align-items: center"]):has(h1){ align-items:flex-start !important; }
html body:not(#na-fe017) main.content-main .cms-section.na-home-fullbleed:first-child .cms-element-html div:has(> h1) > div:is([style*="border-radius:999px"], [style*="border-radius: 999px"]){ margin:0 0 20px !important; font-size:14px !important; font-weight:600 !important; padding:10px 16px !important; border-radius:999px !important; line-height:1.5 !important; }
html body:not(#na-fe017) main.content-main .cms-section.na-home-fullbleed:first-child .cms-element-html div:has(> h1) > h1{ margin-top:0 !important; }
/* ==========================================================================
   FRONTEND-017 Paket 2d (11.11.2026, Design-Standard USER_CONFIRMED Rabih, nur NA): Funktionsseiten Konto, Merkzettel, Warenkorb,
   Anmelden, Passwort vergessen mit Breadcrumb + dunklem Seitenkopf (component/na-std-head.html.twig): Breadcrumb 20 px,
   Seitenkopf 74 px unter der Kopfzeile, 24 px Abstand zum Inhalt. Die bisherigen Seiten-H1 sind ausgeblendet (Titel steht im Kopf).
   ========================================================================== */
html body:not(#na-fe017) main.content-main .na-std-head > .na-phead-std{ margin-top:12px; margin-bottom:24px; }
html body:not(#na-fe017) main.content-main:has(.na-phead-acc) .na-account-main :is(.na-page-title, .account-welcome > h1){ display:none !important; }
html body:not(#na-fe017) main.content-main:has(.na-phead-acc-home) .na-account-main .na-overview > .na-page-head{ display:none !important; }
html body:not(#na-fe017) main.content-main:has(.na-phead-cart) :is(.cart-main-header, .cart-main-header-item-counter){ display:none !important; }
html body:not(#na-fe017) main.content-main:has(.na-phead-login) .account-register > h1{ display:none !important; }
html body:not(#na-fe017) main.content-main:has(.na-phead-login) .account-recover-password-form > h1.card-title{ display:none !important; }
html body:not(#na-fe017) main.content-main:has(.na-phead-login) .account-recover-password.row{ justify-content:flex-start !important; }
/* ==========================================================================
   FRONTEND-017 Paket 2f (11.11.2026, Design-Standard + Entscheidung Rabih "so umsetzen", nur NA, nur CSS):
   Buttons einheitlich hoch: Desktop 40 px, bis 991 px 44 px (Touch-Ziel), Radius 10 px. Gilt fuer alle Buttons im Inhalt
   (Kauf-Buttons, Filter, Sortierung, Umschalter Alle/Original/Kompatibel, Menge +/-, Entfernen, Zur Kasse, Seitenkopf-Button,
   Merkzettel-Herz quadratisch). Ausgenommen: Text-Links (btn-link), Schliessen-Kreuze, kleines Herz in der Warenkorbzeile.
   ========================================================================== */
:root{ --na-btn-h:40px; }
@media (max-width:991.98px){ :root{ --na-btn-h:44px; } }
html body:not(#na-fe017) main.content-main :is(.btn:not(.btn-link):not(.btn-link-inline):not(.btn-close):not([class*="product-wishlist"]), .na-seg-btn, .na-pdp-tabbtn, .na-phead-btn, .filter-panel-item-toggle){ height:var(--na-btn-h) !important; min-height:var(--na-btn-h) !important; padding-top:0 !important; padding-bottom:0 !important; line-height:calc(var(--na-btn-h) - 2px) !important; box-sizing:border-box !important; }
html body:not(#na-fe017) main.content-main :is(.quantity-selector-group-input, .sorting.form-select){ height:var(--na-btn-h) !important; min-height:var(--na-btn-h) !important; box-sizing:border-box !important; }
html body:not(#na-fe017) main.content-main .na-seg-btn{ border-radius:10px !important; }
html body:not(#na-fe017) main.content-main .product-wishlist-btn.btn{ height:var(--na-btn-h) !important; min-height:var(--na-btn-h) !important; width:var(--na-btn-h) !important; padding:0 !important; }
/* ==========================================================================
   FRONTEND-017 Paket 2g (11.11.2026, Befund Rabih: Symbol im Kreis neben "Direkter Kontakt" verschoben, nur NA, nur CSS):
   Korrektur Paket 2c: die Regel justify-content:flex-start traf alle inline zentrierten Elemente im ersten Hero (Symbol-Kreise,
   vimprint-Banner fuer Gaeste, Kopfzeilen der rechten Kaesten). Jetzt nur noch die Spalte mit der H1; alle anderen wieder zentriert.
   ========================================================================== */
html body:not(#na-fe017) main.content-main .cms-section.na-home-fullbleed:first-child .cms-element-html > section :is([style*="justify-content:center"], [style*="justify-content: center"]):not(:has(> h1)){ justify-content:center !important; }
/* ==========================================================================
   FRONTEND-017 Paket 2h (12.11.2026, Wunsch Rabih "Design der Dropdown-Buttons ueberall", nur NA, nur CSS):
   Alle Dropdowns gleich: Hoehe wie Buttons (40 px, bis 991 px 44 px), Radius 10 px, Innenabstand 12 px links / 36 px rechts,
   16 px Schrift, ein einheitlicher Pfeil (16 px, rechts 12 px; deaktiviert grau). Vorher ohne Pfeil: Tonerfinder in der Kopfzeile,
   Sortierung, Anrede im Kontaktformular. Toolbar-Dropdowns (Sortierung, Konto-Filter) und Filter-Buttons: Rahmen #cbd5e1, weiss.
   Formular-Dropdowns behalten Farben des Formulars. Fokus: Rahmen Primaerblau mit Ring.
   ========================================================================== */
:root{ --na-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%232b3136' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); --na-chev-off:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%239ca3af' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); }
html body:not(#na-fe017) :is(header.header-main, main.content-main) select.form-select{ -webkit-appearance:none !important; appearance:none !important; height:var(--na-btn-h, 40px) !important; min-height:var(--na-btn-h, 40px) !important; border-radius:10px !important; padding:0 36px 0 12px !important; font-size:16px !important; font-weight:400 !important; line-height:calc(var(--na-btn-h, 40px) - 2px) !important; background-image:var(--na-chev) !important; background-repeat:no-repeat !important; background-position:right 12px center !important; background-size:16px 16px !important; cursor:pointer; box-sizing:border-box !important; }
html body:not(#na-fe017) :is(header.header-main, main.content-main) select.form-select:disabled{ background-image:var(--na-chev-off) !important; cursor:not-allowed; }
html body:not(#na-fe017) main.content-main :is(select.sorting, select.na-toolbar-limit){ border:1px solid #cbd5e1 !important; background-color:#fff !important; color:#2b3136 !important; }
html body:not(#na-fe017) main.content-main .filter-panel-item-toggle{ border:1px solid #cbd5e1 !important; background-color:#fff !important; color:#2b3136 !important; font-size:16px !important; font-weight:400 !important; padding:0 36px 0 12px !important; border-radius:10px !important; background-image:var(--na-chev) !important; background-repeat:no-repeat !important; background-position:right 12px center !important; background-size:16px 16px !important; }
html body:not(#na-fe017) main.content-main .filter-panel-item-toggle :is(svg, .icon){ display:none !important; }
html body:not(#na-fe017) main.content-main :is(select.form-select, .filter-panel-item-toggle):focus-visible{ border-color:#0654b0 !important; box-shadow:0 0 0 3px rgba(6,84,176,.18) !important; outline:0 !important; }
/* ==========================================================================
   FRONTEND-017 Paket 3 (12.11.2026, Entscheidung Rabih, nur NA): Auswahl-Panel (na-select.js) im Stil des Konto-Menues
   (.account-menu-dropdown: weiss, Radius 14, Schatten, Eintraege 15 px, Radius 10 beim Darueberfahren).
   Dazu B16: Tooltip am Konto-Symbol ausgeblendet, solange das Konto-Menue offen ist.
   ========================================================================== */
.na-sel-panel{ position:fixed; z-index:100020; background:#fff; border:1px solid #e5e7eb; border-radius:14px; box-shadow:0 1px 2px rgba(16,38,66,.06), 0 12px 32px rgba(16,38,66,.16); padding:8px; overflow:auto; box-sizing:border-box; font-family:inherit; }
.na-sel-search{ position:sticky; top:-8px; margin:-8px -8px 6px; padding:8px; background:#fff; border-bottom:1px solid #eef1f5; z-index:1; }
.na-sel-search .form-control{ height:40px; border-radius:10px; border:1px solid #cbd5e1; padding:0 12px; font-size:15px; width:100%; box-sizing:border-box; }
.na-sel-search .form-control:focus{ border-color:#0654b0; box-shadow:0 0 0 3px rgba(6,84,176,.18); outline:0; }
.na-sel-list{ list-style:none; margin:0; padding:0; }
.na-sel-group{ padding:10px 10px 4px; font-size:12px; font-weight:600; letter-spacing:.02em; color:#6b7280; text-transform:none; }
.na-sel-opt{ position:relative; padding:8px 34px 8px 10px; border-radius:10px; font-size:15px; line-height:1.45; color:#2b3136; cursor:pointer; white-space:normal; }
.na-sel-opt.is-active{ background:#eef4fb; color:#0654b0; }
.na-sel-opt.is-selected{ font-weight:600; }
.na-sel-opt.is-selected::after{ content:""; position:absolute; right:10px; top:50%; width:16px; height:16px; margin-top:-8px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%230654b0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") no-repeat center/16px 16px; }
.na-sel-opt.is-disabled{ color:#9ca3af; cursor:not-allowed; }
.na-sel-empty{ padding:10px; font-size:14px; color:#6b7280; }
select.form-select.na-sel-open{ border-color:#0654b0 !important; box-shadow:0 0 0 3px rgba(6,84,176,.18) !important; }
/* B16 */
html body:not(#na-fe017) header.header-main .na-hdr-ic:is(.show, [aria-expanded="true"]) .na-hdr-tip{ display:none !important; }
.na-sel-panel{ scrollbar-width:thin; scrollbar-color:#cbd5e1 transparent; }


/* FRONTEND-017 Paket 6 (B24, 12.11.2026): Produktsicherheit - Herstellerangaben (Shopware-Absaetze nach .na-safety) kompakt wie die Sicherheitshinweise:
   Abstand Ueberschrift -> erste Zeile 10 px statt 24+48 px, Absaetze 14 px / 10 px statt 16 px / 32 px. */
.product-detail-description-text .na-safety.mb-5:has(+ p){ margin-bottom:0 !important; }
.product-detail-description-text .na-safety > h4:last-child{ margin-bottom:10px !important; }
.product-detail-description-text .na-safety ~ p{ font-size:14px; line-height:1.55; margin:0 0 10px; }

/* FRONTEND-017 Paket 7 (B27, 12.11.2026): Checkout Weitere Lieferoptionen - Hinweis "Fuer Ihr Kundenkonto gilt: Lieferung frei Haus." in einer Zeile
   (Flex-Spalte nur fuer die Variante mit Fortschrittsbalken; ohne Balken stand der Schlusspunkt allein in einer Zeile). */
body.na-checkout .na-options-body > .na-free-shipping:not(:has(.na-free-shipping-bar)){ display:block; }

/* FRONTEND-017 Paket 10 (B32, 12.11.2026): Adressformulare - Inhalts-H1 (h1.account-welcome) ausblenden, Titel steht seit Paket 9 im Seitenkopf. */
html body:not(#na-fe017) main.content-main:has(.na-phead-acc) .na-account-main .account-address-form > h1.account-welcome{ display:none !important; }

/* ===== FRONTEND-017 Paket 11 (2026-11-12): B33 Konto-Aktionen einheitlich als umrandete Buttons wie "Bearbeiten" (Persoenliche Daten) ===== */
/* Profil > Zugangsdaten: E-Mail-Zeile volle Breite, Buttons darunter links */
.account-profile-credentials .card-body > .row.align-items-center { --bs-gutter-x: 12px; row-gap: 16px; align-items: flex-start !important; }
.account-profile-credentials .card-body > .row.align-items-center > .col-md-6 { flex: 0 0 100%; max-width: 100%; width: 100%; }
.account-profile-credentials .card-body > .row.align-items-center > .col-md-3 { flex: 0 0 auto; width: auto; max-width: 100%; margin-top: 0 !important; }
/* Button-Optik wie .btn-outline-primary.na-profile-edit (40 px, bis 991 px 44 px ueber --na-btn-height) */
.account-profile-credentials a.account-profile-change,
body.na-account .account-content dd > a.small[href*="aendern="] { display: inline-flex; align-items: center; justify-content: center; min-height: var(--na-btn-height); padding: 0 12px; border: 1px solid var(--na-primary); border-radius: 10px; background: transparent; color: var(--na-primary); font-size: 1rem; font-weight: 600; line-height: 1; text-decoration: none; transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; }
.account-profile-credentials a.account-profile-change:hover,
.account-profile-credentials a.account-profile-change[aria-expanded="true"],
body.na-account .account-content dd > a.small[href*="aendern="]:hover { background: var(--na-primary); border-color: var(--na-primary); color: #fff; text-decoration: none; }
.account-profile-credentials a.account-profile-change:focus-visible,
body.na-account .account-content dd > a.small[href*="aendern="]:focus-visible { outline: 0; box-shadow: 0 0 0 .125rem #fff, 0 0 0 .25rem var(--na-primary); }
/* Konditionen: Button unter dem Wert */
body.na-account .account-content dd > a.small[href*="aendern="] { display: flex; width: fit-content; margin-top: 12px; }

/* ===== FRONTEND-017 Paket 12 (2026-11-12): B34 Meine Artikel - Hinweis "zzgl. MwSt. und Versand" unter dem Preis wie Artikelzeile (.na-row-taxlink) ===== */
body.na-account .na-can-buy .na-can-taxlink { display: block; padding: 0; margin: 2px 0 0; border: 0; background: none; font-size: 11px; font-weight: 400; line-height: 1.3; color: #6b7280; text-decoration: underline; text-underline-offset: 2px; text-align: right; white-space: nowrap; min-height: 0; }
body.na-account .na-can-buy .na-can-taxlink:hover,
body.na-account .na-can-buy .na-can-taxlink:focus-visible { color: var(--na-primary); }

/* ===== FRONTEND-017 Paket 13 (2026-11-12): Befunde aus der Selbstpruefung CW-FE017-P1/P2/P11/P12 (nur NA, nur CSS) =====
   a) B36 (P12) Meine Artikel bis 1199 px: Preis und Hinweis "zzgl. MwSt. und Versand" untereinander statt nebeneinander;
      Tablet rechts vor dem Warenkorb-Button, Handy links, Button rechts.
   b) B37 (P11) Konto-Aktionen bis 991 px 44 px hoch wie alle Buttons (Variable --na-btn-height wirkt nur an .btn).
   c) B35 Landingpages/Kontakt/Widerruf: kein weisser Streifen (60 px) zwischen farbigem Abschlussband und Footer.
      Nur wenn das Band der letzte Abschnitt ist (Startseite: vor dem leeren, ausgeblendeten Slider-Abschnitt, B1). */
@media (max-width: 1199.98px) {
  body.na-account .na-can-buy:has(> .na-can-taxlink) { display: grid; grid-template-columns: 1fr auto auto; column-gap: 16px; row-gap: 2px; align-items: center; }
  body.na-account .na-can-buy:has(> .na-can-taxlink) > .na-can-price { grid-column: 2; grid-row: 1; align-self: end; text-align: right; }
  body.na-account .na-can-buy:has(> .na-can-taxlink) > .na-can-taxlink { grid-column: 2; grid-row: 2; align-self: start; margin: 0; }
  body.na-account .na-can-buy:has(> .na-can-taxlink) > .na-can-form { grid-column: 3; grid-row: 1 / 3; }
}
@media (max-width: 767.98px) {
  body.na-account .na-can-buy:has(> .na-can-taxlink) { grid-template-columns: auto 1fr; }
  body.na-account .na-can-buy:has(> .na-can-taxlink) > .na-can-price { grid-column: 1; text-align: left; }
  body.na-account .na-can-buy:has(> .na-can-taxlink) > .na-can-taxlink { grid-column: 1; text-align: left; }
  body.na-account .na-can-buy:has(> .na-can-taxlink) > .na-can-form { grid-column: 2; justify-self: end; }
}
@media (max-width: 991.98px) {
  .account-profile-credentials a.account-profile-change,
  body.na-account .account-content dd > a.small[href*="aendern="] { min-height: 44px; }
}
body:is(:has(.cms-sections > .cms-section.na-home-contact-band:last-child), :has(.cms-sections > .cms-section.na-home-contact-band + .cms-section:last-child .cms-block-product-slider), :has(.cms-sections > .cms-section:last-child #cms-form-online-revocation-request)) main.content-main > .container-main { padding-bottom: 0 !important; }
body:is(:has(.cms-sections > .cms-section.na-home-contact-band:last-child), :has(.cms-sections > .cms-section.na-home-contact-band + .cms-section:last-child .cms-block-product-slider), :has(.cms-sections > .cms-section:last-child #cms-form-online-revocation-request)) footer.footer-main { margin-top: 0 !important; }

/* ===== FRONTEND-017 Paket 14 (2026-11-12): Befunde Gast-Selbstpruefung (nur NA, nur CSS) =====
   a) B38 Anmelden / Passwort vergessen (body.na-auth, Seiten-Hintergrund bg_2): Breadcrumb hell wie auf dem Hero der Landingpages
      (vorher dunkelgrau #4a545d/#5c6670 auf blaugrauem Verlauf, kaum lesbar).
   b) B40 Breadcrumb auf dunklem Grund (Hero und na-auth): Hover nicht mehr weisser Hintergrund mit weisser Schrift/Symbol
      (Home-Symbol verschwand), sondern leicht aufgehellter Hintergrund. */
html body:not(#na-fe017).na-auth main.content-main .na-bc :is(a, span){ color:rgba(255,255,255,.88) !important; }
html body:not(#na-fe017).na-auth main.content-main .na-bc [aria-current="page"]{ color:#fff !important; }
html body:not(#na-fe017).na-auth main.content-main .na-bc svg{ stroke:#fff !important; color:#fff !important; }
html body:not(#na-fe017) main.content-main .na-bc-onhero .na-bc a:is(:hover, :focus-visible),
html body:not(#na-fe017).na-auth main.content-main .na-bc a:is(:hover, :focus-visible){ background:rgba(255,255,255,.16) !important; color:#fff !important; }
html body:not(#na-fe017) main.content-main .na-bc-onhero .na-bc a:is(:hover, :focus-visible) svg,
html body:not(#na-fe017).na-auth main.content-main .na-bc a:is(:hover, :focus-visible) svg{ stroke:#fff !important; color:#fff !important; }

/* ===== FRONTEND-017 Paket 17 (2026-11-12): B42 Fehlermeldungen auf dunklen Formular-Karten lesbar (nur NA, nur CSS) =====
   Kontaktformular (Kontaktseite und Kontaktband aller Seiten, .na-home-contact-form) und Vertrag widerrufen (.cms-block-form):
   Meldung bisher #c20017 auf dunkler Karte (kaum lesbar), Feld ohne roten Rahmen (Band-Regel rgba(255,255,255,.45) !important).
   Jetzt wie Anmelden/Registrieren (body.na-auth): Rahmen #e5484d mit Schein, Meldung #ffb4b4. */
html body:not(#na-fe017) main.content-main :is(.cms-block-form, .na-home-contact-form) :is(.form-control, .form-select, .custom-select).is-invalid{ border-color:#e5484d !important; box-shadow:0 0 0 3px rgba(229,72,77,.45) !important; }
html body:not(#na-fe017) main.content-main :is(.cms-block-form, .na-home-contact-form) .form-check-input.is-invalid{ border-color:#e5484d !important; box-shadow:0 0 0 3px rgba(229,72,77,.45) !important; }
html body:not(#na-fe017) main.content-main :is(.cms-block-form, .na-home-contact-form) :is(.invalid-feedback, .form-field-feedback){ color:#ffb4b4 !important; }

/* ===== FRONTEND-017 Paket 18 (2026-11-12): B43 Cookie-Banner an der Inhaltskante (nur NA, nur CSS) =====
   Desktop: letzter Button endete 12 px ueber der rechten Inhaltskante (Bootstrap-Zeilenraender); mobil: Text mittig, Buttons
   mittig und schmal (88-314 bei 390 px), 40 statt 44 px. Jetzt: Text und Buttons exakt an der Kante (Suchfeld bis Tonerfinder),
   bis 991 px Buttons 44 px, bis 767 px Text linksbuendig und Buttons ueber die volle Breite untereinander. */
html body:not(#na-fe017) .cookie-permission-container{ padding-left:0 !important; padding-right:0 !important; }
html body:not(#na-fe017) .cookie-permission-container > .container > .row{ margin-left:0 !important; margin-right:0 !important; }
html body:not(#na-fe017) .cookie-permission-container > .container > .row > .cookie-permission-content{ padding-left:0 !important; }
html body:not(#na-fe017) .cookie-permission-container > .container > .row > .col-md-auto{ padding-right:0 !important; gap:8px; }
html body:not(#na-fe017) .cookie-permission-container > .container > .row > .col-md-auto .btn{ margin:0 !important; }
@media (max-width: 991.98px){ html body:not(#na-fe017) .cookie-permission-container .btn{ min-height:44px; } }
@media (max-width: 767.98px){
  html body:not(#na-fe017) .cookie-permission-container > .container{ padding-left:12px !important; padding-right:12px !important; }
  html body:not(#na-fe017) .cookie-permission-container > .container > .row > .cookie-permission-content{ text-align:left; padding-right:0 !important; }
  html body:not(#na-fe017) .cookie-permission-container > .container > .row > .col-md-auto{ flex-direction:column; align-items:stretch; padding-left:0 !important; }
  html body:not(#na-fe017) .cookie-permission-container > .container > .row > .col-md-auto .btn{ width:100%; }
}

/* ===== FRONTEND-017 Paket 19 (2026-11-12): Bereich 11 Einheitlichkeit (nur NA, nur CSS) =====
   B45 (Rabih 12.11.2026 "Ja"): "Anmelden fuer Preise" in Listen (14 px) und auf der Produktseite (15 px) auf 16 px wie alle
   Aktions-Buttons; Seitenkopf-Buttons (na-phead-btn, 13 px) bleiben als kleine Zusatzaktion.
   B46: Kontaktformular-Karte Radius 14 px wie alle Cards/Panels (Design-Standard 4), vorher 16 px. */
html body:not(#na-fe017) .btn.na-row-login, html body:not(#na-fe017) .btn.na-pdp-login{ font-size:16px !important; }
html body:not(#na-fe017) .card.na-contact-form-card{ border-radius:14px !important; }

/* ===== FRONTEND-017 Paket 20 (2026-11-12): B47 Konto-Seiten, Aktions-Buttons 16 px (nur NA, nur CSS) =====
   Nach Entscheidung B45 (Rabih 12.11.2026: Aktions-Buttons einheitlich 16 px, Seitenkopf-Buttons 13 px bleiben):
   "Erneut bestellen" in der Bestellliste (.btn-sm, 14 px) und "In den Warenkorb" auf dem Merkzettel (.btn-buy, 14 px; auf
   Meine Artikel 16 px) auf 16 px. Symbol-Buttons (Adressen-Menue, Warenkorb-Menge) bleiben unveraendert. */
html body:not(#na-fe017) main.content-main .btn.btn-sm.btn-outline-primary:not(.na-menu-btn),
html body:not(#na-fe017) main.content-main .na-wishlist-account .btn.btn-buy{ font-size:16px !important; }

/* ===== FRONTEND-017 Paket 21 (2026-11-12): Kontaktformular statt Telefon (nur NA) =====
   Buttons/Links "Kontaktformular" springen auf /page/cms/<Kontaktseite>#cms-form-contact; Abstand fuer die feste Kopfzeile. */
html body:not(#na-fe017) #cms-form-contact{ scroll-margin-top:170px; }
@media (max-width: 991.98px){ html body:not(#na-fe017) #cms-form-contact{ scroll-margin-top:130px; } }

/* ===== FRONTEND-017 Paket 23 (2026-11-12): B50 Kopfleiste, Konto-Symbol ganz rechts (nur NA, nur CSS) =====
   Wunsch Rabih 12.11.2026: Konto-Symbol (Mein Konto) in der Kopfleiste ganz rechts, also hinter dem Warenkorb.
   Nur Reihenfolge im Flex-Container .na-hdr-icons, Markup und Abstaende unveraendert; Konto-Menue klappt rechtsbuendig auf. */
html body:not(#na-fe017) .na-hdr-icons > .na-hdr-account{ order:1; }

/* ===== FRONTEND-017 Paket 25 (2026-11-12): B52 Startseite unter 1200 px, Karte Kundenkonto/Anmelden nach oben (nur NA, nur CSS) =====
   Wunsch Rabih 12.11.2026: Auf Tablet und Handy (dort, wo die Karte rechts nach unten rutscht) steht die Karte "Ihr Kundenkonto"
   bzw. "Anmelden" direkt unter der Karte "Aus vimprint.de wird newactive.de" (Gaeste) bzw. ganz oben (Kunden) und ist genau so
   breit (max. 760 px wie die vimprint-Karte). Ab 1200 px (Inhaltsbreite 1100/1280 px, zweispaltig) unveraendert.
   Umbruch tritt genau unter 1200 px auf (Inhaltsbreite dort 920 px und kleiner < 640 + 48 + 380 px). */
@media (max-width: 1199.98px){
  html body:not(#na-fe017) .cms-element-html > section:has(> div > div > .na-vimprint) > div{ flex-direction:column !important; flex-wrap:nowrap !important; gap:0 !important; align-items:stretch !important; }
  html body:not(#na-fe017) .cms-element-html > section:has(> div > div > .na-vimprint) > div > div:first-child{ display:contents !important; }
  html body:not(#na-fe017) .cms-element-html > section:has(> div > div > .na-vimprint) > div > div:first-child > *{ order:3; }
  html body:not(#na-fe017) .cms-element-html > section:has(> div > div > .na-vimprint) > div > div:first-child > .na-vimprint{ order:1; }
  html body:not(#na-fe017) .cms-element-html > section:has(> div > div > .na-vimprint) > div > div:first-child > [style*="inline-block"]{ align-self:flex-start; }
  html body:not(#na-fe017) .cms-element-html > section:has(> div > div > .na-vimprint) > div > div:nth-child(2){ order:2; flex:none !important; width:auto !important; max-width:760px !important; margin:0 0 32px 0 !important; }
}

/* ============================================================================================
   INFRA-035 A19b (14.11.2026) PayPal im Bestellabschluss
   1) all.css liefert .d-none ohne !important; die Knopf-Regeln oben (display:inline-flex) zeigten
      deshalb Knoepfe wieder an, die per d-none ausgeblendet sind (z. B. #confirmFormSubmit, wenn
      PayPal gewaehlt ist und der PayPal-Knopf ihn ersetzt).
   2) PayPal-Knopf mit derselben Rundung wie unsere Knoepfe (--na-btn-radius, 10px).
   ============================================================================================ */
.btn.d-none{ display:none !important; }
html body .swag-paypal-button.swag-paypal-button{
  --paypal-button-border-radius:var(--na-btn-radius, 10px);
  --venmo-button-border-radius:var(--na-btn-radius, 10px);
  --apple-pay-button-border-radius:var(--na-btn-radius, 10px);
  --google-pay-button-border-radius:10;
}

/* ===== FRONTEND-018 Feinheit 1 (2026-11-15): Kontoaktivierung fuer Bestandskunden verstaendlicher (nur NA) =====
   Anmeldeseite: Card "Schon Kunde ..." (Vorlage page/account/na-activate-card.html.twig in NewactiveDesignNA) mit drei Schritten,
   Rahmen in Primaerfarbe, Rueckmeldung "E-Mail ist unterwegs" und zwei Textlinks. Startseite: Karte .na-vimprint (CMS) mit denselben
   drei Schritten, Inline-Stile im CMS, hier nur mobile Ansicht und Fokus. Sprungziele: #na-aktivieren (Card), #na-anmelden (Kasten
   "Ich bin bereits Kunde", Vorlage component/account/login.html.twig). */
html body.na-auth .na-activate-card.na-activate-card--fe018{ border:2px solid var(--na-primary); }
html body.na-auth .na-activate-card.na-activate-card--fe018:not(.na-activate-card--hinweis){ box-shadow:0 0 0 3px rgba(110,168,255,.30), 0 16px 40px rgba(0,0,0,.16); }
html body.na-auth .na-activate-card--fe018 .na-activate-title{ margin-bottom:10px; }
html body.na-auth .na-activate-card .na-activate-steps{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
html body.na-auth .na-activate-card .na-activate-step{ display:flex; align-items:center; gap:10px; margin:0; padding:0; font-size:14px; line-height:1.4; color:rgba(255,255,255,.92); }
html body.na-auth .na-activate-card .na-activate-step-no{ flex:0 0 24px; width:24px; height:24px; border-radius:50%; background:var(--na-primary); color:#fff; font-size:13px; font-weight:700; line-height:1; display:flex; align-items:center; justify-content:center; }
html body.na-auth .na-activate-card .na-activate-step-ic{ flex:0 0 18px; width:18px; height:18px; display:flex; }
html body.na-auth .na-activate-card .na-activate-step-ic svg{ width:18px; height:18px; stroke:#9cc3ef; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
html body.na-auth .na-activate-card .na-activate-links{ display:flex; flex-wrap:wrap; gap:4px 18px; margin-top:12px; font-size:13px; line-height:1.45; color:rgba(255,255,255,.84); }
html body.na-auth .na-activate-card .na-activate-links a,
html body.na-auth .na-activate-card .na-activate-done a{ color:#fff !important; font-weight:600; text-decoration:underline; text-underline-offset:2px; }
html body.na-auth .na-activate-card .na-activate-links a:hover,
html body.na-auth .na-activate-card .na-activate-done a:hover{ text-decoration:none; }
html body.na-auth .na-activate-card .na-activate-links a:focus-visible,
html body.na-auth .na-activate-card .na-activate-done a:focus-visible{ outline:2px solid #9cc3ef; outline-offset:2px; border-radius:2px; }
html body.na-auth .na-activate-card .na-activate-done{ font-size:14px; line-height:1.5; }
html body.na-auth .na-activate-card .na-activate-done strong{ font-size:16px; }
html body.na-auth #na-anmelden{ display:block; height:0; scroll-margin-top:calc(var(--na-sticky-h, 117px) + 24px); }
@media (max-width:600px){
  html body.na-auth .na-activate-card.na-activate-card--hinweis .na-activate-title{ margin-bottom:6px; }
  html body.na-auth .na-activate-card.na-activate-card--hinweis .na-activate-steps{ gap:4px; }
  html body.na-auth .na-activate-card.na-activate-card--hinweis .na-activate-step{ gap:8px; font-size:13px; line-height:1.35; }
  html body.na-auth .na-activate-card.na-activate-card--hinweis .na-activate-step-ic{ display:none; }
  html body.na-auth .na-activate-card.na-activate-card--hinweis .na-activate-step-no{ flex-basis:20px; width:20px; height:20px; font-size:12px; }
  html body.na-auth .na-activate-card.na-activate-card--hinweis .na-activate-links{ margin-top:8px; }
}
.na-vimprint .na-vimprint-links a:hover{ text-decoration:none !important; }
.na-vimprint .na-vimprint-links a:focus-visible{ outline:2px solid #9cc3ef; outline-offset:2px; border-radius:2px; }
@media (max-width:767.98px){
  .na-vimprint .na-vimprint-steps{ flex-direction:column !important; gap:8px !important; }
  .na-vimprint .na-vimprint-step{ flex:0 0 auto !important; flex-direction:row !important; align-items:center !important; gap:10px !important; padding:8px 10px !important; }
  .na-vimprint .na-vimprint-cta{ flex-direction:column !important; align-items:stretch !important; flex-wrap:nowrap !important; }
  .na-vimprint .na-vimprint-links{ flex-direction:column !important; gap:6px !important; }
}

/* ===== FRONTEND-018 Feinheit 2 (2026-11-15): E-Mail-Feld der Kontoaktivierung direkt in der Karte der Startseite (nur NA) =====
   Karte .na-vimprint (CMS): Formular wie in der Card der Anmeldeseite (sendet an /account/aktivieren/link, Rueckmeldung dort).
   Inline-Stile im CMS, hier Fokus, Hover und mobile Ansicht. .na-hp: Fallenfeld gegen Bots, fuer Menschen unsichtbar. */
.na-hp{ position:absolute !important; left:-9999px !important; top:auto !important; width:1px !important; height:1px !important; overflow:hidden !important; }
html body .na-vimprint .na-vimprint-form input[type="email"]:focus{ outline:0; border-color:#ffffff !important; box-shadow:0 0 0 3px rgba(110,168,255,.55) !important; }
html body .na-vimprint .na-vimprint-form button.na-vimprint-btn:hover{ background:#05479a !important; }
html body .na-vimprint .na-vimprint-form button.na-vimprint-btn:focus-visible{ outline:2px solid #9cc3ef; outline-offset:2px; }
@media (max-width:479.98px){
  .na-vimprint .na-vimprint-fields{ flex-direction:column !important; }
  .na-vimprint .na-vimprint-form button.na-vimprint-btn{ width:100% !important; }
}

/* ===== FRONTEND-018 Feinheit 3 (2026-11-15): Info-Button "Was aendert sich?" in der Aktivierungs-Card (nur NA) =====
   Aufbau: .na-info (Zeile mit Ueberschrift) > .na-info-btn + .na-info-pop. Anmeldeseite (Vorlage na-activate-card.html.twig) und
   Startseite (Karte .na-vimprint, CMS). Infofeld dunkel wie die Cards, Radius 14 px. Sichtbar bei Hover und Tastatur-Fokus auf dem
   Button (CSS) sowie nach Klick/Antippen (Klasse is-open, Skript in base.html.twig). */
.na-info{ position:relative; display:flex; align-items:center; gap:8px; }
html body .na-info .na-info-btn{ flex:0 0 26px; width:26px; height:26px; min-height:0; margin:0; padding:0; border:1.5px solid rgba(255,255,255,.75); border-radius:50%; background:transparent; color:#fff; font-family:inherit; font-size:14px; font-weight:700; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background-color .15s, border-color .15s; }
html body .na-info .na-info-btn:hover,
html body .na-info.is-open .na-info-btn{ background:#0654b0; border-color:#0654b0; }
html body .na-info .na-info-btn:focus-visible{ outline:2px solid #9cc3ef; outline-offset:2px; }
html body .na-info .na-info-pop{ display:none; position:absolute; z-index:30; top:calc(100% + 8px); left:0; width:min(460px, 100%); padding:14px 16px; background:rgba(22,30,38,.97); border:1px solid rgba(255,255,255,.18); border-radius:14px; box-shadow:0 16px 40px rgba(0,0,0,.35); color:#e9f0f6; font-size:14px; font-weight:400; line-height:1.5; text-align:left; }
html body .na-info .na-info-pop .na-info-pop-title{ display:block; margin:0 0 4px; color:#fff; font-size:15px; font-weight:700; line-height:1.35; }
html body .na-info .na-info-btn:hover ~ .na-info-pop,
html body .na-info .na-info-btn:focus-visible ~ .na-info-pop,
html body .na-info.is-open .na-info-pop{ display:block !important; }
/* Anmeldeseite: Abstand der Ueberschrift wandert auf die Zeile */
html body.na-auth .na-activate-card .na-activate-titlerow{ margin-bottom:10px; }
html body.na-auth .na-activate-card .na-activate-titlerow .na-activate-title{ margin-bottom:0 !important; }
@media (max-width:600px){
  html body.na-auth .na-activate-card.na-activate-card--hinweis .na-activate-titlerow{ margin-bottom:6px; }
  html body .na-info .na-info-pop{ width:100%; font-size:13px; padding:12px 14px; }
}

/* ===== FRONTEND-018 Korrektur P4 (2026-11-15, aus Cowork CW-FE018-01): Info-Button der Aktivierungs-Card (nur NA) =====
   a) Escape schliesst das Infofeld auch bei Fokus oder Maus auf dem Button: Klasse is-dismissed (Skript in base.html.twig)
      uebersteuert die Regeln :hover und :focus-visible aus Feinheit 3, bis der Button den Fokus verliert, die Maus neu
      auf den Button kommt oder er geklickt wird.
   b) Anmeldeseite ab 992 px (Schritte links, Formular rechts): Infofeld oeffnet rechts ueber dem Formular, mittig in der Box,
      und bleibt innerhalb der Box (vorher ragte es unten heraus). Darunter und auf der Startseite unveraendert. */
html body .na-info.is-dismissed .na-info-btn.na-info-btn ~ .na-info-pop{ display:none !important; }
@media (min-width:992px){
  html body.na-auth .na-activate-card .card-body{ position:relative; }
  html body.na-auth .na-activate-card .na-activate-titlerow.na-info{ position:static; }
  html body.na-auth .na-activate-card .na-info .na-info-pop{ top:50%; bottom:auto; left:auto; right:12px; transform:translateY(-50%); width:484px; max-width:calc(100% - 24px); max-height:calc(100% - 12px); overflow:auto; padding:10px 16px; font-size:13px; }
}

/* ===== FRONTEND-018 Feinheit 5 (P6, 2026-11-15): Konto-Uebersicht /account mit drei Karten als Reiter (nur NA) =====
   Vorlage NewactiveDesignNA page/account/index.html.twig (Klickmodell Rabih). Cards weiss, Radius 14 px, Rand --na-border,
   Akzent --na-primary. Buttons nur Shop-Klassen (btn-primary, btn-outline-primary, btn-sm, na-icon-link, na-pill), in der
   Uebersicht einheitlich --na-btn-height (40 px, bis 991 px 44 px), 16 px, 600. Ohne Skript sind alle drei Inhalte sichtbar. */
body.na-account .na-ov{ --na-ov-warn:#C2410C; --na-ov-warn-text:#B45309; --na-ov-warn-bg:#FFF8EE; --na-ov-warn-border:#F5C98B; }
body.na-account .na-ov .na-ov-hint{ display:flex; align-items:center; justify-content:space-between; gap:12px 16px; flex-wrap:wrap; margin:0 0 16px; padding:14px 18px; background:#FFF4E5; border:1px solid var(--na-ov-warn-border); border-radius:12px; }
body.na-account .na-ov .na-ov-hint-text{ display:flex; align-items:center; gap:12px; margin:0; font-size:15px; line-height:1.45; color:#7C2D12; }
body.na-account .na-ov .na-ov-hint-dot{ flex:0 0 10px; width:10px; height:10px; border-radius:50%; background:var(--na-ov-warn); }
body.na-account .na-ov .na-ov-hint-btn{ background:#fff; }
body.na-account .na-ov .na-ov-tabs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:0 0 16px; }
body.na-account .na-ov .na-ov-tab{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-height:128px; padding:18px 10px; margin:0; font:inherit; color:var(--na-text); text-align:center; background:#fff; border:2px solid var(--na-border); border-radius:var(--na-radius-card); cursor:pointer; transition:border-color .15s, background-color .15s, box-shadow .15s; }
body.na-account .na-ov .na-ov-tab:hover{ border-color:var(--na-border-strong); }
body.na-account .na-ov .na-ov-tab.is-active{ background:#F3F7FC; border-color:var(--na-primary); box-shadow:0 4px 14px rgba(6,84,176,.12); }
body.na-account .na-ov .na-ov-tab:focus-visible{ outline:3px solid #9CC3EF; outline-offset:2px; }
body.na-account .na-ov .na-ov-ico{ display:flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:50%; background:#E8F0FA; color:var(--na-primary); }
body.na-account .na-ov .na-ov-tab.is-active .na-ov-ico{ background:var(--na-primary); color:#fff; }
body.na-account .na-ov .na-ov-tlabel{ font-size:16px; font-weight:700; line-height:1.25; }
body.na-account .na-ov .na-ov-tsub{ font-size:13px; line-height:1.35; color:#4A545D; }
body.na-account .na-ov .na-ov-badge{ position:absolute; top:10px; right:10px; display:flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 6px; border-radius:var(--na-radius-pill); background:var(--na-primary); color:#fff; font-size:12px; font-weight:700; line-height:1; }
body.na-account .na-ov .na-ov-badge.is-warn{ background:var(--na-ov-warn); }
body.na-account .na-ov .na-ov-panel{ background:#fff; border:1px solid var(--na-border); border-radius:var(--na-radius-card); padding:20px 24px; margin:0 0 16px; }
body.na-account .na-ov.is-ready .na-ov-panel:not(.is-active), body.na-account .na-ov .na-ov-panel[hidden]{ display:none; }
body.na-account .na-ov .na-ov-panel:focus-visible{ outline:3px solid #9CC3EF; outline-offset:2px; }
body.na-account .na-ov .na-ov-phead{ display:flex; justify-content:space-between; align-items:baseline; gap:8px 12px; flex-wrap:wrap; margin:0 0 12px; }
body.na-account .na-ov .na-ov-h2{ margin:0; font-size:20px; font-weight:700; line-height:1.3; }
body.na-account .na-ov .na-ov-psub{ margin:4px 0 0; font-size:14px; color:#4A545D; }
body.na-account .na-ov .na-ov-plink{ font-size:14px; font-weight:600; white-space:nowrap; }
body.na-account .na-ov .na-ov-empty{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; background:#F5F8FB; border-radius:12px; padding:24px; }
body.na-account .na-ov .na-ov-empty p{ margin:0; }
body.na-account .na-ov .na-ov-empty-title{ font-size:16px; font-weight:700; }
body.na-account .na-ov .na-ov-empty-text{ font-size:14px; color:#4A545D; }
body.na-account .na-ov .na-ov-empty-btns{ display:flex; gap:10px; flex-wrap:wrap; }
/* Buttons der Uebersicht: 40 px (bis 991 px 44 px), 16 px, 600 */
body.na-account .na-ov .btn:is(.btn-primary, .btn-outline-primary){ display:inline-flex; align-items:center; justify-content:center; min-height:var(--na-btn-height); height:auto; padding:0 16px; font-size:16px !important; font-weight:600; line-height:1.2; border-radius:var(--na-radius); white-space:nowrap; }
body.na-account .na-ov .na-ov-orders .btn.btn-sm{ padding:0 12px; }
/* Karte 1: Tabelle wie Bestellliste, Pos. immer neben der Nummer */
body.na-account .na-ov .na-ov-orders th:nth-child(4), body.na-account .na-ov .na-ov-orders td.na-c-pos{ display:none !important; }
body.na-account .na-ov .na-ov-orders .na-pos-inline{ display:inline !important; }
/* Karte 2: Top Produkte */
body.na-account .na-ov .na-ov-prod{ display:grid; grid-template-columns:minmax(0,1fr) 170px 120px auto; gap:12px 16px; align-items:center; padding:12px 0; border-top:1px solid #EEF2F6; }
body.na-account .na-ov .na-ov-prod-info{ display:flex; gap:14px; align-items:center; min-width:0; }
body.na-account .na-ov .na-ov-prod-img{ flex:0 0 52px; width:52px; height:52px; display:flex; align-items:center; justify-content:center; overflow:hidden; border:1px solid #E5EAEF; border-radius:10px; background:#fff; color:var(--na-faint); }
body.na-account .na-ov .na-ov-prod-img img{ max-width:100%; max-height:100%; object-fit:contain; }
body.na-account .na-ov .na-ov-prod-text{ min-width:0; }
body.na-account .na-ov .na-ov-prod-ref{ margin:0 0 2px; font-size:12px; font-weight:700; color:#00315E; }
body.na-account .na-ov .na-ov-prod-name{ display:block; font-size:15px; font-weight:600; line-height:1.3; color:var(--na-text); text-decoration:none; }
body.na-account .na-ov .na-ov-prod-name:hover{ color:var(--na-primary); text-decoration:underline; }
body.na-account .na-ov .na-ov-prod-meta{ margin-top:3px; font-size:12px; color:#4A545D; }
body.na-account .na-ov .na-ov-tag{ font-weight:600; }
body.na-account .na-ov .na-ov-tag.is-orig{ color:#00315E; }
body.na-account .na-ov .na-ov-tag.is-komp{ color:#1D6B3A; }
body.na-account .na-ov .na-ov-prod-stats{ font-size:13px; line-height:1.4; color:#4A545D; }
body.na-account .na-ov .na-ov-prod-price{ text-align:right; }
body.na-account .na-ov .na-ov-price{ font-size:16px; font-weight:700; white-space:nowrap; }
body.na-account .na-ov .na-ov-taxlink{ display:inline; padding:0; margin:2px 0 0; border:0; background:none; min-height:0; font-size:11px; font-weight:400; line-height:1.3; color:#6b7280; text-decoration:underline; text-underline-offset:2px; white-space:nowrap; }
body.na-account .na-ov .na-ov-taxlink:hover, body.na-account .na-ov .na-ov-taxlink:focus-visible{ color:var(--na-primary); }
body.na-account .na-ov .na-ov-prod-buy{ display:flex; align-items:center; justify-content:flex-end; gap:8px; margin:0; }
body.na-account .na-ov .na-ov-qty-label{ margin:0; font-size:14px; font-weight:600; color:var(--na-label, #3d454d); }
body.na-account .na-ov input.na-ov-qty{ width:72px !important; padding:0 8px !important; font-size:16px; text-align:center; }
/* Karte 3: Konto & Konditionen */
body.na-account .na-ov .na-ov-facts{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
body.na-account .na-ov .na-ov-fact{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:16px; background:#fff; border:1px solid var(--na-border); border-radius:12px; min-width:0; }
body.na-account .na-ov .na-ov-fact.is-missing{ background:var(--na-ov-warn-bg); border-color:var(--na-ov-warn-border); }
body.na-account .na-ov .na-ov-fact-body{ min-width:0; }
body.na-account .na-ov .na-ov-fact-title{ margin:0 0 4px; font-size:16px; font-weight:700; color:var(--na-text); }
body.na-account .na-ov .na-ov-dl{ margin:0; display:flex; flex-direction:column; gap:4px; }
body.na-account .na-ov .na-ov-dl dt{ font-size:14px; font-weight:600; color:var(--na-label, #3d454d); line-height:1.45; }
body.na-account .na-ov .na-ov-dl dd{ margin:0; font-size:14px; font-weight:600; color:var(--na-text); line-height:1.45; overflow-wrap:anywhere; }
body.na-account .na-ov .na-ov-dl dd.is-missing{ color:var(--na-ov-warn-text); font-weight:700; }
body.na-account .na-ov .na-ov-fact-btn{ flex:0 0 auto; padding:0 12px !important; }
body.na-account .na-ov .na-ov-fact-btn.btn-outline-primary{ background:#fff; }
@media (max-width:1199.98px){
  body.na-account .na-ov .na-ov-prod{ grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"info price" "stats buy"; }
  body.na-account .na-ov .na-ov-prod-info{ grid-area:info; }
  body.na-account .na-ov .na-ov-prod-price{ grid-area:price; }
  body.na-account .na-ov .na-ov-prod-stats{ grid-area:stats; padding-left:66px; }
  body.na-account .na-ov .na-ov-prod-buy{ grid-area:buy; }
}
@media (max-width:767.98px){
  body.na-account .na-ov .na-ov-tabs{ gap:8px; }
  body.na-account .na-ov .na-ov-tab{ min-height:104px; padding:14px 6px 12px; }
  body.na-account .na-ov .na-ov-ico{ width:40px; height:40px; }
  body.na-account .na-ov .na-ov-tlabel{ font-size:13px; }
  body.na-account .na-ov .na-ov-tsub{ display:none; }
  body.na-account .na-ov .na-ov-badge{ top:6px; right:6px; }
  body.na-account .na-ov .na-ov-panel{ padding:16px; }
  body.na-account .na-ov .na-ov-facts{ grid-template-columns:minmax(0,1fr); }
  body.na-account .na-ov .na-ov-prod{ grid-template-columns:minmax(0,1fr); grid-template-areas:"info" "stats" "price" "buy"; gap:8px; }
  body.na-account .na-ov .na-ov-prod-stats{ padding-left:0; }
  body.na-account .na-ov .na-ov-prod-price{ text-align:left; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
  body.na-account .na-ov .na-ov-prod-buy{ justify-content:flex-start; }
  body.na-account .na-ov .na-ov-add{ flex:1 1 auto; }
}

/* ===== FRONTEND-018 Feinheit 5 Nachtrag 1 und 2 (P7, 2026-11-15): Konto-Uebersicht /account (nur NA) =====
   Karte 2: Card wie Meine Artikel (na-can-card) mit Rang am Bild, Bestellhistorie, Referenz bzw. „Eigene Referenz anlegen“.
   Karte 1: Trennlinie je Zeile durchgehend (Aktionszelle bleibt Tabellenzelle), Auftragsnr. einzeilig gekuerzt,
   Aktionsspalte mit festen Plaetzen (LKW-Symbol, „Erneut bestellen“), Buttons genau untereinander. */
body.na-account .na-ov .na-ov-top{ gap:12px; }
body.na-account .na-ov .na-can-image{ position:relative; }
body.na-account .na-ov .na-ov-rank{ position:absolute; top:-6px; left:-6px; z-index:1; display:flex; align-items:center; justify-content:center; min-width:24px; height:24px; padding:0 6px; border-radius:var(--na-radius-pill); background:var(--na-primary); color:#fff; font-size:12px; font-weight:700; line-height:1; box-shadow:0 0 0 2px #fff; }
body.na-account .na-ov .na-ov-ref-new .na-can-edit{ display:inline-flex; align-items:center; gap:4px; font-size:13px; color:#6b7280; text-decoration:none; }
body.na-account .na-ov .na-ov-ref-new .na-can-edit:hover, body.na-account .na-ov .na-ov-ref-new .na-can-edit:focus-visible{ color:var(--na-primary); text-decoration:underline; }
body.na-account .na-ov .na-ov-hist{ display:flex; align-items:center; gap:6px; margin-top:2px; font-size:12.5px; line-height:18px; color:#6b7280; }
body.na-account .na-ov .na-ov-hist-ico{ flex:0 0 auto; }
body.na-account .na-ov .na-ov-acts{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
body.na-account .na-ov .na-ov-act-gap{ display:none; }
@media (min-width:1101px){
  body.na-account .na-ov .na-ov-orders td{ vertical-align:middle; }
  body.na-account .na-ov .na-ov-orders td.na-ov-actcell{ display:table-cell !important; width:1%; white-space:nowrap; }
  body.na-account .na-ov .na-ov-acts{ display:grid; grid-template-columns:32px auto; grid-auto-flow:column; grid-auto-columns:32px; justify-content:end; flex-wrap:nowrap; gap:8px; }
  body.na-account .na-ov .na-ov-act-gap{ display:block; width:32px; height:32px; }
  body.na-account .na-ov .na-ov-act-gap.is-btn{ width:auto; min-width:150px; }
  body.na-account .na-ov .na-ov-orders td.na-c-ref{ width:100%; max-width:0; }
  body.na-account .na-ov .na-ov-orders td.na-c-ref .na-ov-ref{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}

/* ===== FRONTEND-018 Feinheit 5 Korrektur P8 (2026-11-15, Befund CW-FE018-05 Schritt 5, nur NA) =====
   Konto-Uebersicht, Karte 1 „Ihre letzten Bestellungen“: zwischen 1101 und 1279 px passt die Tabelle nicht in die Box (748 px
   Inhalt in 578 px). Dort jetzt dieselbe Karten-Ansicht wie bis 1100 px. Nur in der Uebersicht (.na-ov), Seite Bestellungen
   unveraendert. Ab 1280 px Tabelle wie P7. */
@media (min-width:1101px) and (max-width:1279.98px){
  body.na-account .na-ov .na-table-wrap{ overflow:visible; }
  body.na-account .na-ov .na-ov-orders.na-table, body.na-account .na-ov .na-ov-orders tbody{ display:block; }
  body.na-account .na-ov .na-ov-orders thead{ display:none; }
  body.na-account .na-ov .na-ov-orders tr{ display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:12px; row-gap:2px; align-items:center; border:1px solid var(--na-border); border-radius:var(--na-radius); padding:10px 14px; margin-bottom:10px; }
  body.na-account .na-ov .na-ov-orders td{ display:block; padding:0; border:0; text-align:left; white-space:normal; background:none !important; }
  body.na-account .na-ov .na-ov-orders td.na-c-nr{ grid-column:1; grid-row:1; white-space:nowrap; }
  body.na-account .na-ov .na-ov-orders td.na-c-status{ grid-column:2; grid-row:1; text-align:right; }
  body.na-account .na-ov .na-ov-orders td.na-c-date{ grid-column:1; grid-row:2; font-size:14px; color:var(--na-muted); }
  body.na-account .na-ov .na-ov-orders td.na-c-ref{ grid-column:1; grid-row:3; width:auto; max-width:none; overflow:visible; font-size:14px; color:var(--na-muted); }
  body.na-account .na-ov .na-ov-orders 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-ov .na-ov-orders td.na-c-ref .na-ov-ref{ display:inline; white-space:normal; overflow:visible; }
  body.na-account .na-ov .na-ov-orders td.na-c-empty{ display:none; }
  body.na-account .na-ov .na-ov-orders 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-ov .na-ov-orders td.na-ov-actcell{ grid-column:1 / -1; grid-row:4; display:block !important; width:auto; margin-top:8px; }
  body.na-account .na-ov .na-ov-acts{ display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-start; }
  body.na-account .na-ov .na-ov-act-gap{ display:none; }
}

/* ===== FRONTEND-018 Bestellungen P9 (2026-11-15, Befund CW-FE018-05/-06, Rabih „ja“, nur NA) =====
   Seite Bestellungen /account/order (Liste .na-orders): zwischen 1101 und 1279 px passt die Tabelle nicht in die Box (770 px Inhalt
   in 586 px). Dort jetzt dieselbe Karten-Ansicht wie bis 1100 px (wie Konto-Uebersicht seit P8). Ab 1280 px Tabelle unveraendert. */
@media (min-width:1101px) and (max-width:1279.98px){
  body.na-account .na-orders .na-table-wrap{ overflow:visible; }
  body.na-account .na-orders .na-order-table.na-table, body.na-account .na-orders .na-order-table tbody{ display:block; }
  body.na-account .na-orders .na-order-table thead{ display:none; }
  body.na-account .na-orders .na-order-table tr{ display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:12px; row-gap:2px; align-items:center; border:1px solid var(--na-border); border-radius:var(--na-radius); padding:10px 14px; margin-bottom:10px; }
  body.na-account .na-orders .na-order-table td{ display:block; padding:0; border:0; text-align:left; white-space:normal; background:none !important; }
  body.na-account .na-orders .na-order-table td.na-c-nr{ grid-column:1; grid-row:1; white-space:nowrap; }
  body.na-account .na-orders .na-order-table .na-pos-inline{ display:inline; }
  body.na-account .na-orders .na-order-table td.na-c-pos{ display:none; }
  body.na-account .na-orders .na-order-table td.na-c-status{ grid-column:2; grid-row:1; text-align:right; }
  body.na-account .na-orders .na-order-table td.na-c-date{ grid-column:1; grid-row:2; font-size:14px; color:var(--na-muted); }
  body.na-account .na-orders .na-order-table td.na-c-ref{ grid-column:1; grid-row:3; max-width:none; overflow:visible; text-overflow:clip; font-size:14px; color:var(--na-muted); }
  body.na-account .na-orders .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-orders .na-order-table td.na-c-empty{ display:none; }
  body.na-account .na-orders .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-orders .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; }
  body.na-account .na-orders .na-order-table .na-actions .na-go-link{ display:inline-flex; }
}

/* ===== FRONTEND-018 Bestellungen P10 (2026-11-15, Befunde CW-FE018-07, Rabih „ja“, nur NA) =====
   a) Seite Bestellungen /account/order: Karten-Ansicht auch von 1280 bis 1299 px (bei 1280 px Tabelle 770 px in 766 px Box).
   b) Pfeil zum Bestelldetail in allen Kartenbreiten sichtbar (bisher blendete die Regel ab 1100 px ihn genau bei 1100 px aus):
      Bestellungen bis 1299 px, Konto-Uebersicht bis 1279 px (dort ab 1280 px Tabelle). */
@media (min-width:1280px) and (max-width:1299.98px){
  body.na-account .na-orders .na-table-wrap{ overflow:visible; }
  body.na-account .na-orders .na-order-table.na-table, body.na-account .na-orders .na-order-table tbody{ display:block; }
  body.na-account .na-orders .na-order-table thead{ display:none; }
  body.na-account .na-orders .na-order-table tr{ display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:12px; row-gap:2px; align-items:center; border:1px solid var(--na-border); border-radius:var(--na-radius); padding:10px 14px; margin-bottom:10px; }
  body.na-account .na-orders .na-order-table td{ display:block; padding:0; border:0; text-align:left; white-space:normal; background:none !important; }
  body.na-account .na-orders .na-order-table td.na-c-nr{ grid-column:1; grid-row:1; white-space:nowrap; }
  body.na-account .na-orders .na-order-table .na-pos-inline{ display:inline; }
  body.na-account .na-orders .na-order-table td.na-c-pos{ display:none; }
  body.na-account .na-orders .na-order-table td.na-c-status{ grid-column:2; grid-row:1; text-align:right; }
  body.na-account .na-orders .na-order-table td.na-c-date{ grid-column:1; grid-row:2; font-size:14px; color:var(--na-muted); }
  body.na-account .na-orders .na-order-table td.na-c-ref{ grid-column:1; grid-row:3; max-width:none; overflow:visible; text-overflow:clip; font-size:14px; color:var(--na-muted); }
  body.na-account .na-orders .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-orders .na-order-table td.na-c-empty{ display:none; }
  body.na-account .na-orders .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-orders .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; }
  body.na-account .na-orders .na-order-table .na-actions .na-go-link{ display:inline-flex; }
}
@media (max-width:1299.98px){
  body.na-account .na-orders .na-order-table .na-actions .na-go-link{ display:inline-flex; }
}
@media (max-width:1279.98px){
  body.na-account .na-ov .na-ov-orders .na-actions .na-go-link{ display:inline-flex; }
}

/* ===== FRONTEND-018 Bestellungen P11 (2026-11-15, Befund CW-FE018-08, nur NA) =====
   Seite Bestellungen /account/order ab 1300 px: Tabelle 770 px in 766 px Box (Box bleibt bis zur naechsten Containerbreite gleich,
   eine spaetere Grenze hilft nicht). Zellen-Innenabstand links/rechts 8 statt 10 px, die Tabelle wird damit 24 px schmaler
   (6 sichtbare Spalten) und passt an jeder Breite. Nur Tabellenansicht, Karten-Ansicht bis 1299 px unveraendert. */
@media (min-width:1300px){
  body.na-account .na-orders .na-order-table th,
  body.na-account .na-orders .na-order-table td{ padding-left:8px; padding-right:8px; }
}