/* ── Reset body background ───────────────────────────────── */
body {
  background-color: #fff;
  margin: 0;
  font-family: 'Roboto Condensed', Arial, sans-serif;
}

/* ── Fonts ───────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  color: #416681;
}

/* ── Fließtext seitenweit einheitlich (Testbericht Denis 28.10.2026):
   Produkt-Tabs (Beschreibung, Herstellung …), Inhaltsseiten, Magazin.
   Absätze und Listen 16 px Abstand nach unten, Listenpunkte 4 px,
   Zwischenüberschriften 28 px Luft nach oben und 10 px nach unten. ── */
.produkt-tab__body p,
.seite__content p,
.magazin-content p { margin: 0 0 16px; }
.produkt-tab__body ul, .produkt-tab__body ol,
.seite__content ul, .seite__content ol,
.magazin-content ul, .magazin-content ol { margin: 0 0 16px; padding-left: 26px; }
.produkt-tab__body li + li,
.seite__content li + li,
.magazin-content li + li { margin-top: 4px; }
.produkt-tab__body li > ul, .produkt-tab__body li > ol,
.seite__content li > ul, .seite__content li > ol,
.magazin-content li > ul, .magazin-content li > ol { margin: 4px 0 0; }
.produkt-tab__body :is(h2, h3, h4, h5),
.seite__content :is(h2, h3, h4, h5),
.magazin-content :is(h2, h3, h4, h5) { margin: 28px 0 10px; }
.produkt-tab__body > :first-child,
.seite__content > :first-child,
.magazin-content > :first-child { margin-top: 0; }
.produkt-tab__body > :last-child,
.seite__content > :last-child,
.magazin-content > :last-child { margin-bottom: 0; }

/* ══ Header – Vorlage "Layouts 2026 / 2-Header" (Werte aus den PSDs) ══════
   Desktop 1400: Inhalt 1170 px (x 115–1285), Topbar 53 px + 5 px Rot,
   Logo-Leiste 120 px + 5 px Rot, Infobalken 41 px. Schrift überall
   Roboto Condensed 18 px, Panel-Titel 24 px fett in Versalien.
   Tablet (≤ 991 px) und Mobil (≤ 767 px) siehe Media-Queries unten. */

/* ── Topbar ──────────────────────────────────────────────── */
.dw-topbar {
  background-color: #416681;
  border-bottom: 5px solid #b32d2f;
  height: 58px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  font-size: 18px;
  line-height: 1;
}
.dw-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}
.dw-topbar__left {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 18px;
  white-space: nowrap;
}
.dw-topbar__strip {
  display: block;
  width: 49px;
  height: 14px;
  color: #fff;
  flex-shrink: 0;
}
.dw-topbar__right {
  display: flex;
  align-items: center;
  gap: 18px;
}
/* Lieferland: Flagge + Text weiß direkt auf der Topbar */
.dw-topbar__lieferland {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.03em;   /* Versalien wie in der PSD gesetzt */
  white-space: nowrap;
  cursor: pointer;
}
.dw-topbar__lieferland .dw-chev { margin-left: -5px; }
.dw-topbar__flag {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.dw-lieferland-item img { flex-shrink: 0; }
/* Weiße Box: KONTO ⌄ | WARENKORB (3) / 104,25 € */
.dw-topbar__box {
  display: flex;
  align-items: center;
  gap: 17px;
  height: 42px;
  padding: 0 15px 0 17px;
  background: #fff;
  border-radius: 3px;
}
.dw-topbar__account,
.dw-topbar__cart {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  color: #212529;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.dw-topbar__account { gap: 6px; }
.dw-topbar__cart:hover,
.dw-topbar__account:hover { color: #b32d2f; text-decoration: none; }
.dw-topbar__label--cart { margin-right: 0.25em; }
.dw-topbar__carticon,
.dw-topbar__personicon { display: none; }
.dw-chev { display: block; flex-shrink: 0; }

/* ── Logo-Leiste ─────────────────────────────────────────── */
.dw-logobar {
  background-color: #fff;
  border-bottom: 5px solid #b32d2f;
}
.dw-logobar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 120px;
  box-sizing: border-box;
  padding-bottom: 2px;      /* Logo/Buttons 1 px über der Mitte wie PSD */
}
.dw-logobar__link { display: block; }
.dw-logobar__logo {
  display: block;
  height: 70px;
  width: auto;
}
/* Suche (42×42) | Unser Sortiment (236×42) | Menü (42×42), je 1 px Abstand */
.dw-logobar__actions {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1px;
}
.dw-iconbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  background-color: #f2f3f6;
  border: none;
  border-radius: 3px;
  color: #416681;
  cursor: pointer;
}
.dw-iconbtn:hover { background-color: #e4e8ee; }
.dw-iconbtn--burger {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding-left: 5px;
}
.dw-iconbtn--burger span {
  display: block;
  height: 6px;
  border-radius: 3px;
  background-color: #416681;
}
.dw-iconbtn--burger span:nth-child(1) { width: 32px; }
.dw-iconbtn--burger span:nth-child(2) { width: 28px; }
.dw-iconbtn--burger span:nth-child(3) { width: 22px; }
.dw-topbar__sortiment--main {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 236px;
  height: 42px;
  padding: 0 0 0 36px;
  background-color: #416681;
  color: #fff;
  border: none;
  border-radius: 3px;
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
  cursor: pointer;
}
.dw-topbar__sortiment--main:hover { background-color: #365670; }

/* ── Infobalken unter dem Header ─────────────────────────── */
.dw-infobar {
  background-color: #e9eef3;
  color: #212529;
  font-size: 18px;
  line-height: 21px;
  padding: 10px 0;
  text-align: center;
}
.dw-infobar a { color: #b32d2f; text-decoration: underline; }

/* ── Slide-in-Panels: Sortiment, Service-Navigation, Lieferland ── */
.dw-sortiment-panel-overlay,
.dw-servicenav-overlay,
.dw-lieferland-panel-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1200;
}
.dw-sortiment-panel-overlay.dw-open,
.dw-servicenav-overlay.dw-open,
.dw-lieferland-panel-overlay.dw-open { display: block; }
.dw-sortiment-panel,
.dw-servicenav-panel,
.dw-lieferland-panel {
  display: none;
  flex-direction: column;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 442px;
  max-width: 100vw;
  box-sizing: border-box;
  padding: 21px 22px 24px 21px;
  overflow-y: auto;
  background: #fff;
  z-index: 1201;
}
.dw-sortiment-panel.dw-open,
.dw-servicenav-panel.dw-open,
.dw-lieferland-panel.dw-open { display: flex; }
.dw-sortiment-panel__header,
.dw-servicenav-panel__header,
.dw-lieferland-panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin: 0;
  padding: 0;
}
.dw-sortiment-panel__title,
.dw-servicenav-panel__title,
.dw-lieferland-panel__title,
.dw-sortiment-panel__heading {
  display: block;
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #212529;
}
/* X: 26×26, 18 px von oben, 22 px von rechts */
.dw-sortiment-panel__close,
.dw-servicenav-panel__close,
.dw-lieferland-panel__close {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 26px;
  height: 26px;
  padding: 0;
  background: none;
  border: none;
  color: #212529;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dw-sortiment-panel__close svg,
.dw-servicenav-panel__close svg,
.dw-lieferland-panel__close svg { width: 26px; height: 26px; stroke-width: 1.6; }
.dw-sortiment-panel__close:hover,
.dw-servicenav-panel__close:hover,
.dw-lieferland-panel__close:hover { color: #b32d2f; }
.dw-sortiment-panel__body {
  flex: 1 0 auto;
  padding: 0;
}
.dw-sortiment-panel__list,
.dw-servicenav-panel__list,
.dw-lieferland-panel__list {
  list-style: none;
  margin: 19px 0 0;
  padding: 0;
  display: block;
}
.dw-sortiment-panel__list li,
.dw-servicenav-panel__list li,
.dw-lieferland-panel__list li {
  margin: 0;
  padding: 0;
  font-size: 18px;
  line-height: 28px;
}
.dw-sortiment-panel__list a,
.dw-servicenav-panel__list a,
.dw-lieferland-panel__item {
  display: inline-block;
  vertical-align: top;
  padding: 0;
  color: #b32d2f;
  font-size: 18px;
  line-height: 28px;
  text-decoration: none;
}
.dw-sortiment-panel__group { margin-top: 19px; }
.dw-sortiment-panel__heading { margin: 0; }
.dw-sortiment-panel__leer { color: #6b7680; font-size: 18px; margin-top: 19px; }
/* Lieferland: Titel + Untertitel, aktives Land fett */
.dw-lieferland-panel { padding-top: 24px; }
.dw-lieferland-panel__close { top: 20px; }
.dw-lieferland-panel__subtitle {
  margin: 0;
  font-size: 18px;
  line-height: 24px;
  color: #212529;
}
.dw-lieferland-panel__item--active {
  font-weight: 700;
  cursor: default;
  pointer-events: none;
}
/* Suchfeld unten im Sortiment-Panel (404×54, Rahmen #c4c7d2) */
.dw-panelsuche {
  display: flex;
  align-items: center;
  gap: 15px;
  height: 54px;
  margin: 24px -3px 0 -2px;
  padding: 0 14px;
  border: 1px solid #c4c7d2;
  border-radius: 6px;
  color: #416681;
  box-sizing: border-box;
}
.dw-panelsuche svg { flex-shrink: 0; }
.dw-panelsuche input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 18px;
  color: #212529;
}
.dw-panelsuche input::placeholder { color: #416681; opacity: 1; }
.dw-panelsuche:focus-within { border-color: #416681; }

/* ── Tablet (Vorlage 768): Logo 55 px hoch, Logo-Leiste 109 px ── */
@media (max-width: 991px) {
  .dw-logobar__inner { height: 109px; padding-bottom: 0; padding-top: 2px; }
  .dw-logobar__logo { height: 55px; }
}

/* ── Mobil (Vorlage 375): Logo volle Breite, Buttons darunter ── */
@media (max-width: 767px) {
  .dw-topbar__claim,
  .dw-lieferland-label,
  .dw-topbar__account .dw-topbar__label,
  .dw-topbar__label--cart { display: none; }
  .dw-topbar__carticon,
  .dw-topbar__personicon { display: block; font-size: 20px; line-height: 1; }
  /* Striche gehören zum Slogan: am Handy weg, der Platz geht an den Warenkorb. */
  .dw-topbar__left { display: none; }
  .dw-topbar__right { flex: 1; gap: 12px; }
  .dw-topbar__lieferland { gap: 10px; }
  .dw-topbar__lieferland .dw-chev { margin-left: 0; }
  .dw-topbar__box { flex: 1; justify-content: space-between; gap: 14px; padding: 0 12px; }
  .dw-topbar__cart { gap: 6px; font-size: 16px; }
  .dw-logobar__inner {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    gap: 16px;
    padding-top: 16px;
    padding-bottom: 16px;
  }
  .dw-logobar__logo { width: 100%; max-width: 345px; height: auto; margin: 0 auto; }
  .dw-logobar__actions { width: 100%; }
  .dw-topbar__sortiment--main { flex: 1; width: auto; justify-content: center; padding: 0 12px; }
  .dw-sortiment-panel,
  .dw-servicenav-panel,
  .dw-lieferland-panel { width: calc(100vw - 44px); }
  .dw-panelsuche { margin-left: 0; margin-right: 0; }
}

/* ── Nav-Bar ─────────────────────────────────────────────── */
.dw-navbar {
  background-color: #fff;
  border-bottom: 1px solid #e0e0e0;
  padding: 0;
  margin-bottom: 0;
}
.dw-navbar__inner {
  padding-top: 8px;
  padding-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.dw-navbar__sortiment {
  background-color: #416681;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 8px 18px;
  cursor: pointer;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.dw-navbar__sortiment:hover {
  background-color: #365670;
}
.dw-navbar__arrow {
  font-size: 18px;
  line-height: 1;
}
.dw-navbar__toggler {
  background: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 5px 8px;
  cursor: pointer;
}
.dw-navbar__hamburger {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
  margin-left: auto;
}
.dw-navbar__hamburger span {
  display: block;
  width: 24px;
  height: 3px;
  background-color: #333;
  border-radius: 2px;
}

/* Nav menu links */
.dw-navbar .navbar-collapse ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 4px;
}
.dw-navbar .navbar-collapse ul li a {
  font-size: 13px;
  color: #333;
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 3px;
}
.dw-navbar .navbar-collapse ul li a:hover {
  background-color: #f0f0f0;
}

/* ── Shared inner wrapper (matches header width) ────────── */
.dw-inner {
  /* Inhaltsbreite 1171 px wie Vorlage (bei 1400 px: x 115–1286) */
  max-width: 1201px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}

/* ── Highlighted bar ────────────────────────────────────── */
/* Statusmeldungen: nur sichtbar, wenn wirklich eine Meldung da ist –
   sonst stünde ein leerer grauer Streifen unter dem Infobalken. */
.dw-highlighted:not(:has([role="alert"], [role="status"], .messages, .messages__item)) {
  display: none;
}
.dw-highlighted {
  padding: 18px 0;
  background-color: #f4f4f4;
  color: #323232;
  font-size: 13px;
  text-align: center;
}
.dw-highlighted a {
  color: #416681;
  text-decoration: none;
}

/* ── Main content ───────────────────────────────────────── */
.dw-main {
  padding-top: 24px;
  padding-bottom: 24px;
}
/* Startseite: Slideshow direkt unter dem Infobalken (Denis 23.10.2026). */
.path-frontpage .dw-main {
  padding-top: 0;
}

/* ── Pre-Footer Bar ─────────────────────────────────────── */
/* ── Social-Bar + Footer-Logo (Footer-Layout v2) ─────────── */
.dw-socialbar {
  background-color: #f4f4f4;
  display: flex;
  justify-content: center;
  gap: 22px;
  padding: 26px 0;
}
.dw-socialbar a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.dw-socialbar img {
  width: 21px;
  height: 21px;
}
.dw-footerlogo {
  background-color: #fff;
  text-align: center;
  padding: 26px 0;
}
.dw-footerlogo img {
  height: 52px;
  width: auto;
}

.dw-prefooter {
  background-color: #333;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 14px;
  padding: 26px 16px;
  text-align: center;
}
.dw-prefooter__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  font-size: 13px;
  font-weight: 700;
}
.dw-prefooter__links a {
  color: #fff;
  text-decoration: none;
}
.dw-prefooter__copy {
  color: #fff;
  font-size: 13px;
}
.dw-prefooter__btn {
  display: inline-block;
  background-color: #c9a86a;
  color: #2b2b2b;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  padding: 12px 34px;
  border: none;
  border-radius: 24px;
  white-space: nowrap;
}
.dw-prefooter__btn:hover {
  background-color: #bd9a55;
  color: #2b2b2b;
}

/* ── Footer ─────────────────────────────────────────────── */
.dw-footer {
  background-color: #416681;
  border-top: none;
  padding: 24px 0 40px 0;
  margin-top: 0;
}
.dw-footer__inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  font-size: 13px;
  color: #fff;
}
.dw-footer__nav .menu {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  align-items: flex-start;
}
/* Toggle-Button immer versteckt — wird nur per Media Query eingeblendet */
.dw-footer__toggle {
  display: none;
}

/* Menü-Blöcke nebeneinander */
.dw-footer__nav,
.dw-footer__nav .region {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  align-items: flex-start;
}
.dw-footer__nav .block {
  flex: none;
  width: fit-content;
  min-width: 0;
}
/* Top-level items nebeneinander */
.dw-footer__nav .menu > li {
  display: flex;
  flex-direction: column;
  margin-right: 16px;
}
.dw-footer__nav .menu > li > a {
  padding-left: 20px;
  display: inline-block;
}
.dw-footer__nav .menu__link--level-1.menu__link--has-children {
  text-transform: uppercase;
  font-weight: 700;
}
/* Sub-items untereinander */
.dw-footer__nav .menu > li .menu {
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 6px 0 0 0;
}
/* Menü 1: 2 Spalten, ab Item 6 → Spalte 2 */
.dw-footer__nav .block:nth-child(1) .menu > li .menu {
  display: grid;
  grid-template-columns: max-content max-content;
  grid-auto-flow: dense;
  gap: 0 8px;
}
/* Items 1-5 → Spalte 1 */
.dw-footer__nav .block:nth-child(1) .menu > li .menu li:nth-child(-n+5) {
  grid-column: 1;
}
/* Items 6+ → Spalte 2 */
.dw-footer__nav .block:nth-child(1) .menu > li .menu li:nth-child(n+6) {
  grid-column: 2;
}

/* Menü 2: 2 Spalten, ab Item 5 → Spalte 2 */
.dw-footer__nav .block:nth-child(2) .menu > li .menu {
  display: block;
  column-count: 2;
}
.dw-footer__nav .block:nth-child(2) .menu > li .menu li:nth-child(5) {
  break-before: column;
}
.dw-footer__nav .menu > li .menu li {
  white-space: nowrap;
  margin-bottom: 6px;
}
.dw-footer__nav .menu > li .menu li a,
.dw-footer__nav .menu > li .menu li span {
  padding-left: 0;
  display: inline-block;
  color: #fff;
  white-space: nowrap;
}
.dw-footer__nav .menu > li > a {
  color: #fff;
}
.dw-footer__copy {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  border-top: 1px solid rgba(255,255,255,0.25);
  margin-top: 16px;
  padding: 24px 0 0;
  box-sizing: border-box;
}
.dw-footer__copy-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  font-size: 13px;
}
.dw-footer__copy-links a,
.dw-footer__copy-right {
  color: #fff;
  text-decoration: none;
}
.dw-footer__copy-right {
  white-space: nowrap;
  font-size: 13px;
}

@media (max-width: 768px) {
  .dw-footer {
    padding: 0 0 20px;
  }
  .dw-footer__copy {
    margin-top: 0;
  }
  .dw-footer__inner {
    padding-top: 0;
    margin-top: 0;
  }
  .dw-footer__nav {
    display: block;
    width: 100%;
    padding-top: 0;
    margin-top: 0;
  }
  .dw-footer__nav .region {
    display: block;
    width: 100%;
    padding-top: 0;
    margin-top: 0;
  }

  /* Menu-Items über volle Breite */
  .dw-footer__nav .menu > li {
    display: block;
    border-bottom: none;
    margin: 0 -16px;
    padding: 0;
    width: calc(100% + 32px);
  }

  .dw-footer__nav .block {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.25);
  }
  .dw-footer__nav .block:last-child {
    border-bottom: none;
  }
  .dw-footer__nav .block__content,
  .dw-footer__nav .block__title {
    margin: 0 !important;
    padding: 0 !important;
  }
  .dw-footer__nav .menu {
    display: block;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Header: Dunkelblau wie Footer */
  .dw-footer__nav .menu > li > span.menu__link--has-children {
    display: block;
    width: 100%;
    padding: 0 32px;
    height: 48px;
    line-height: 48px;
    cursor: pointer;
    font-weight: 700;
    text-transform: uppercase;
    background-color: #416681;
    color: #fff;
    position: relative;
    z-index: 1;
  }

  .dw-footer__nav .menu > li > span.menu__link--has-children::after {
    content: '+';
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    font-weight: 300;
    color: #fff;
  }

  .dw-footer__nav .menu > li.active > span.menu__link--has-children::after {
    content: '\2212';
  }

  /* Verstecken: alle Sub-Menüs */
  .dw-footer__nav .menu > li > ul {
    display: none !important;
    margin: 0;
    padding: 0;
  }

  /* Block 1: 2 Spalten Grid */
  .dw-footer__nav .block:nth-child(1) .menu > li.active > ul {
    display: grid !important;
    grid-template-columns: max-content max-content;
    gap: 0 80px;
    align-items: start;
    background-color: #f5f5f5;
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
    padding: 15px 32px !important;
  }

  /* Block 1: Items 1-5 linke Spalte, 6+ rechte Spalte */
  .dw-footer__nav .block:nth-child(1) .menu > li.active > ul li:nth-child(-n+5) {
    grid-column: 1;
  }
  .dw-footer__nav .block:nth-child(1) .menu > li.active > ul li:nth-child(n+6) {
    grid-column: 2;
  }

  /* Block 2: 2 Spalten Grid */
  .dw-footer__nav .block:nth-child(2) .menu > li.active > ul {
    display: grid !important;
    grid-template-columns: max-content max-content;
    grid-template-rows: repeat(4, auto);
    grid-auto-flow: column;
    gap: 0 55px;
    align-items: start;
    background-color: #f5f5f5;
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
    padding: 15px 32px !important;
  }

  /* Block 3+: Single Column */
  .dw-footer__nav .block:nth-child(n+3) .menu > li.active > ul {
    display: block !important;
    background-color: #f5f5f5;
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
    padding: 15px 32px 15px 72px !important;
  }

  /* Sub-Item Links */
  .dw-footer__nav .menu > li.active > span.menu__link--has-children::before {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 64px;
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 4px solid transparent;
    border-top: 12px solid #416681;
    transform: rotate(26deg);
    z-index: 2;
  }

  .dw-footer__nav .menu > li.active > ul li {
    margin-bottom: 0;
  }
  .dw-footer__nav .menu > li.active > ul li a,
  .dw-footer__nav .menu > li.active > ul li span {
    display: block !important;
    padding: 1px 0;
    color: #333 !important;
    font-weight: 400;
    text-transform: none;
  }

  /* Erste Spalte: linker Abstand (nur Block 1+2, 2-Spalten-Layout) */
  .dw-footer__nav .block:nth-child(1) .menu > li.active > ul li:nth-child(-n+5) a,
  .dw-footer__nav .block:nth-child(1) .menu > li.active > ul li:nth-child(-n+5) span,
  .dw-footer__nav .block:nth-child(2) .menu > li.active > ul li:nth-child(-n+4) a,
  .dw-footer__nav .block:nth-child(2) .menu > li.active > ul li:nth-child(-n+4) span {
    padding-left: 40px;
  }
}

@media (max-width: 540px) {
  .dw-footer__copy {
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 375px) {
  .dw-footer__copy {
    gap: 16px;
    flex-direction: column;
  }
  .dw-footer__nav .block:nth-child(1) .menu > li.active > ul,
  .dw-footer__nav .block:nth-child(2) .menu > li.active > ul {
    display: grid !important;
    grid-template-columns: unset !important;
    grid-template-rows: unset !important;
    grid-auto-flow: unset !important;
  }
  .dw-footer__nav .block:nth-child(1) .menu > li.active > ul li,
  .dw-footer__nav .block:nth-child(2) .menu > li.active > ul li {
    grid-column: unset !important;
  }
  .dw-footer__nav .block:nth-child(n+3) .menu > li.active > ul {
    padding: 15px 32px !important;
  }
  .dw-footer__nav .block:nth-child(1) .menu > li.active > ul li a,
  .dw-footer__nav .block:nth-child(1) .menu > li.active > ul li span,
  .dw-footer__nav .block:nth-child(2) .menu > li.active > ul li a,
  .dw-footer__nav .block:nth-child(2) .menu > li.active > ul li span,
  .dw-footer__nav .block:nth-child(n+3) .menu > li.active > ul li a,
  .dw-footer__nav .block:nth-child(n+3) .menu > li.active > ul li span {
    padding-left: 0 !important;
  }
}

/* ── Menu Level 2 links ───────────────────────────────── */
.menu.menu--level-2 a {
  margin-right: 15px;
}


/***********************************************************************
 * Olivero overrides for /pay checkout page
 * These MUST live here (theme CSS, loaded AFTER Olivero) so they win
 * the cascade. Scoped under .path-pay / body.path-pay.
 ***********************************************************************/

/* ── Font ─────────────────────────────────────────────── */
.path-pay {
    font-family: 'Roboto Condensed', 'Roboto', Arial, Helvetica, sans-serif;
}

/* ══════════════════════════════════════════════════════════
   LAYOUT: Kill entire Olivero grid/layout system for /pay
   ══════════════════════════════════════════════════════════ */
.path-pay .dialog-off-canvas-main-canvas {
    max-width: none !important;
    display: block !important;
}

.path-pay main.dw-main {
    display: block !important;
}

/* Olivero puts content in a 14-col CSS grid via .grid-full and constrains
   children to columns 3–13 via .layout--pass--content-medium.
   We flatten everything to display:block so the .dw-inner wrapper
   (max-width:1170px) is the only width constraint. */
.path-pay .grid-full,
.path-pay .region--content,
.path-pay .region--highlighted,
.path-pay .layout--pass--content-medium,
.path-pay #content,
.path-dein-konto .grid-full,
.path-dein-konto .region--content,
.path-dein-konto .region--highlighted,
.path-dein-konto .layout--pass--content-medium,
.path-dein-konto #content {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    grid-template-columns: none !important;
}

.path-pay .layout--pass--content-medium > *,
.path-pay .layout--content-medium,
.path-dein-konto .layout--pass--content-medium > *,
.path-dein-konto .layout--content-medium {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
}

.path-pay .main-content,
.path-dein-konto .main-content {
    width: 100% !important;
}

.path-pay .main-content__container,
.path-dein-konto .main-content__container {
    padding-block-start: 0 !important;
}

/* Bootstrap col-12 inside the row */
.path-pay .col-12 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}

/* Olivero region spacing — tighten for checkout */
.path-pay .region--content > * {
    margin-block-end: 0 !important;
}

/* Cart table full width */
.path-pay table.cart {
    width: 100% !important;
}

/* ══════════════════════════════════════════════════════════
   PAGE TITLE  (override Olivero display:inline + serif font)
   ══════════════════════════════════════════════════════════ */
.path-pay h1.page-title,
.path-pay h1 {
    display: block !important;
    text-align: center;
    font-size: clamp(22px, 3.5vw, 40px) !important;
    text-transform: none;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    font-family: 'Anton', sans-serif !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
    color: #416681 !important;
    line-height: 1.3;
}

.path-pay .block-page-title-block {
    margin-bottom: 0 !important;
}

/* ══════════════════════════════════════════════════════════
   H2 HEADINGS — base style (Layout Checkout v8: Anton, blau)
   ══════════════════════════════════════════════════════════ */
.path-pay h2 {
    display: block !important;
    font-family: 'Anton', sans-serif !important;
    font-weight: 400;
    font-style: normal;
    letter-spacing: normal !important;
    color: #416681;
    font-size: 26px;
    line-height: 1.3;
    text-align: center;
    text-transform: none;
    padding-top: 10px;
    margin-bottom: 10px;
}

/* Zahlungsarten heading — gleiches Anton wie alle Checkout-Titel (v8) */
.path-pay .expressbox h2 {
    font-family: 'Anton', sans-serif !important;
    text-transform: none !important;
    font-style: normal;
    font-weight: 400;
    font-size: 26px;
    color: #416681;
}

/* ══════════════════════════════════════════════════════════
   TEXT INPUTS (override Olivero form-text.css)
   ══════════════════════════════════════════════════════════ */
body.path-pay [type="text"],
body.path-pay [type="email"],
body.path-pay [type="tel"],
body.path-pay [type="number"],
body.path-pay [type="password"],
body.path-pay textarea,
body.path-dein-konto [type="text"],
body.path-dein-konto [type="email"],
body.path-dein-konto [type="tel"],
body.path-dein-konto [type="number"],
body.path-dein-konto [type="password"],
body.path-dein-konto textarea {
    /* Feldstil wie in der Registrierung (doanmeldung), Wunsch Denis 15.10.2026 */
    border-radius: 3px !important;
    border: 2px solid #c9d1d9 !important;
    padding: 0 13px !important;
    /* !important: dokundenkonto.css setzt height:auto !important */
    height: 50px !important;
    min-height: auto !important;
    box-sizing: border-box;
    width: 100% !important;
    max-width: 340px;
    font-family: inherit !important;
    font-size: 17px !important;
    appearance: none !important;
    box-shadow: none !important;
    outline: none !important;
    background-color: #fff !important;
    color: #222;
    line-height: normal !important;
}
body.path-pay textarea,
body.path-dein-konto textarea {
    height: auto !important;
    min-height: 58px !important;
    padding: 10px 13px !important;
}
body.path-pay ::placeholder,
body.path-dein-konto ::placeholder {
    color: #5f6a75;
    opacity: 1;
}

body.path-pay [type="text"]:focus,
body.path-pay [type="email"]:focus,
body.path-pay [type="tel"]:focus,
body.path-pay [type="number"]:focus,
body.path-pay [type="password"]:focus,
body.path-pay textarea:focus,
body.path-dein-konto [type="text"]:focus,
body.path-dein-konto [type="email"]:focus,
body.path-dein-konto [type="tel"]:focus,
body.path-dein-konto [type="number"]:focus,
body.path-dein-konto [type="password"]:focus,
body.path-dein-konto textarea:focus {
    border-color: #416681 !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Email field — wider, centered */
.path-pay .mygrowthpureform #email {
    max-width: none;
    width: auto !important;
    height: 50px;
    font-size: 17px !important;
}

/* ══════════════════════════════════════════════════════════
   SELECT (override Olivero form-select.css)
   ══════════════════════════════════════════════════════════ */
body.path-pay select,
body.path-dein-konto select {
    border-radius: 3px !important;
    border: 2px solid #c9d1d9 !important;
    padding: 0 40px 0 13px !important;
    height: 50px !important;
    min-height: auto !important;
    box-sizing: border-box;
    font-family: inherit !important;
    font-size: 17px !important;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10' viewBox='0 0 18 10' fill='none' stroke='%23416681' stroke-width='1.8'%3E%3Cpolyline points='1,1 9,9 17,1'/%3E%3C/svg%3E") no-repeat right 14px center !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    color: #222;
    max-width: 340px;
}

body.path-pay select:focus,
body.path-dein-konto select:focus {
    border-color: #416681 !important;
    outline: none !important;
    box-shadow: none !important;
}

/* ══════════════════════════════════════════════════════════
   CHECKBOXES (override Olivero form-boolean.css)
   ══════════════════════════════════════════════════════════ */
body.path-pay input[type="checkbox"],
body.path-pay input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    border: none !important;
    background: none !important;
    background-image: none !important;
    background-color: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: -1;
    cursor: pointer;
}

body.path-pay input[type="checkbox"]:focus,
body.path-pay input[type="radio"]:focus {
    border: none !important;
    outline: none !important;
}

body.path-pay input[type="checkbox"]:checked,
body.path-pay input[type="radio"]:checked {
    border: none !important;
    border-width: 0 !important;
    background-image: none !important;
    background-color: transparent !important;
}

/* ══════════════════════════════════════════════════════════
   LINKS (scoped to .dw-main only — NOT admin toolbar)
   ══════════════════════════════════════════════════════════ */
.path-pay .dw-main a {
    color: #b32d2f;
}


/* Cart product links — dark, not red */
.path-pay .cart a {
    color: #333;
}

/* Versandkosten-Link in der Summenzeile — wie normaler Text, nicht rot */
.path-pay .versandinlinebox a {
    color: inherit;
}

/* ══════════════════════════════════════════════════════════
   CART TABLE
   ══════════════════════════════════════════════════════════ */
/* Quantity input */
.path-pay .cart .menge {
    border-radius: 0 !important;
    border-color: #416681 !important;
    text-align: right;
    max-width: 66px;
}

/* Table normalise */
.path-pay table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* ══════════════════════════════════════════════════════════
   EXPRESSBOX (Zahlungsarten bordered section)
   ══════════════════════════════════════════════════════════ */
.path-pay .expressbox {
    border: 2px solid #f2f3f6;
    margin-bottom: 20px;
}

/* ══════════════════════════════════════════════════════════
   LIEFERADRESSE bordered section
   ══════════════════════════════════════════════════════════ */
.path-pay .payadress-inner {
    border: 1px solid #c9d2d9;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}

/* Eingabefelder in der Lieferadresse: gleicher Feldstil wie überall
   (3 px Radius wie in der Registrierung, Wunsch Denis 15.10.2026). */
body.path-pay .payadress-inner [type="text"],
body.path-pay .payadress-inner select {
    border-radius: 3px !important;
}

/* ══════════════════════════════════════════════════════════
   KAUFEN button area
   ══════════════════════════════════════════════════════════ */
.path-pay .upperpaybuttonwrapper {
    border: 2px solid #f2f3f6;
    padding: 10px;
    margin-bottom: 20px;
}

.path-pay .paybuttonwrapper .info {
    text-align: center;
    color: #b32d2f;
    margin-bottom: 10px;
}

.path-pay .paybuttonwrapper {
    text-align: center;
}

/* ══════════════════════════════════════════════════════════
   VERSAND select (Lieferland dropdown in summary)
   ══════════════════════════════════════════════════════════ */
.path-pay .versandinlinebox select {
    max-width: 180px;
}


/* ══════════════════════════════════════════════════════════
   ZAHLUNGSART labels (Vorkasse, Rechnung, Nachnahme)
   ══════════════════════════════════════════════════════════ */
.path-pay .paymentbox .label {
    font-size: inherit;
    color: #416681;
}

/* ══════════════════════════════════════════════════════════
   Olivero base.css resets — undo serif fonts, spacing, etc.
   ══════════════════════════════════════════════════════════ */

/* Olivero sets h1/h3 to font-family:var(--font-sans) which is Metropolis.
   Also letter-spacing:-0.01em. Override both.
   h2 is handled separately above (Lora italic + expressbox override). */
body.path-pay h1 {
    font-family: 'Anton', sans-serif !important;
    letter-spacing: normal !important;
}
body.path-pay h3 {
    font-family: 'Roboto Condensed', 'Roboto', Arial, sans-serif !important;
    letter-spacing: normal !important;
}

/* Olivero block.css adds margin/padding to blocks */
.path-pay .block {
    margin-block-end: 0 !important;
}

/* Olivero links.css styles a tags */
body.path-pay .dw-main a:not(.button) {
    text-decoration: none;
}

/* ══════════════════════════════════════════════════════════
   KLARNA buttons — production-matching layout
   Buttons are full-width pink bars, stacked vertically.
   Main styling comes from mygrowthpureform.css (.klarna-direct-btn).
   ══════════════════════════════════════════════════════════ */
.path-pay #KlarnaPayButtonContainer {
    padding: 0;
    margin: 10px auto 13px auto;
    max-width: 750px;
    overflow: hidden;
}

.path-pay #KlarnaPayButtonOutter {
    max-width: 789px;
    margin: 0 auto;
    overflow: hidden;
}

/* Override Olivero button base styles for Klarna direct buttons */
body.path-pay .klarna-direct-btn {
    background: #ffb3c7 !important;
    border: none !important;
    border-radius: 6px !important;
    color: #111 !important;
    font-family: 'Roboto', Arial, sans-serif !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

/* ══════════════════════════════════════════════════════════
   AMAZON PAY button — wie die Klarna-Buttons (volle Breite,
   gleiche Höhe/Rundung), Gold + offizielles Logo.
   Main styling comes from mygrowthpureform.css (.amazon-direct-btn).
   ══════════════════════════════════════════════════════════ */
.path-pay #AmazonPayButtonContainer {
    padding: 0;
    margin: 10px auto 13px auto;
    max-width: 750px;
    overflow: hidden;
}

.path-pay #AmazonPayButtonOutter {
    max-width: 789px;
    margin: 0 auto;
    overflow: hidden;
}

/* Override Olivero button base styles for the Amazon Pay button */
body.path-pay .amazon-direct-btn {
    background: #ffd814 !important;
    border: none !important;
    border-radius: 6px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

body.path-pay .amazon-direct-btn:hover {
    background: #f7ca00 !important;
}

body.path-pay .amazon-direct-btn.selected {
    border: 3px solid var(--green) !important;
}

/* PayPal loading text */
.path-pay .ppjsloading {
    text-align: center;
    color: #999;
    font-size: 14px;
    padding: 10px 0;
}

/* ══════════════════════════════════════════════════════════
   CHECKMARK spans (custom checkbox indicators)
   ══════════════════════════════════════════════════════════ */
.path-pay .checkmark {
    width: 18px;
    height: 18px;
    border: 1px solid #ccc;
    border-radius: 2px;
    cursor: pointer;
    background-color: #fff;
}

.path-pay .checkmark.required {
    border-color: #b32d2f;
}

/* ── Checkout: Titel + Kaufen-Button (Layout Checkout v8) ── */
.dw-checkout-title {
  text-align: center;
  margin: 4px 0 24px;
}
#button-pay-general,
#button-pay-general2 {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Mengen-Stepper im Warenkorb (Layout v8: [−] [Zahl] [+], X darunter) */
.path-pay .qty-stepper {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.path-pay .qty-btn {
  width: 36px;
  height: 36px;
  background: #fff;
  border: 1px solid #c9d2d9;
  border-radius: 3px;
  color: #416681;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.path-pay .qty-btn:hover {
  background: #eef2f5;
}
/* Zahl OHNE Rahmen zwischen den -/+-Kaesten (Vorlage v8) */
.path-pay .qty-stepper input.menge {
  width: 36px !important;
  height: 47px !important;
  padding: 0 !important;
  text-align: center;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none;
  color: #323232;
  font-size: 15px !important;
  font-weight: 600;
  line-height: 47px;
}
/* -/+-Kaesten: weiss mit dezenter Border, ~30% groesser (Vorlage) */
.path-pay .qty-btn {
  width: 47px;
  height: 47px;
  background: #fff;
  border: 1px solid #dde3e8;
  border-radius: 4px;
  font-weight: 700;
  font-size: 20px;
}
/* Loeschen-X: rechtsbuendig zum Plus-Button (Vorlage v8) */
.path-pay table.cart .cartdelete {
  position: static;
  width: 26px;
  height: 26px;
  background-size: contain;
  background-repeat: no-repeat;
  margin: 8px 10px 0 auto;
  display: block;
  opacity: 0.85;
}
.path-pay table.cart .mengen-wrapper {
  display: inline-block;
  text-align: center !important;
}
/* Update laeuft ueber die Stepper/Change-Events – Reload-Icon entfaellt */
.path-pay .cartreload {
  display: none !important;
}

/* Warenkorb-Tabelle (Layout v8): Titel + Preise blau, kg-Preis klein grau */
.path-pay table.cart .column-2 a {
  color: #416681;
  font-weight: 700;
  text-decoration: none;
}
/* Alle Zellen oben ausrichten (Vorlage: Preise auf Titelhoehe) */
.path-pay table.cart td {
  vertical-align: top;
}
.path-pay table.cart td.price {
  color: #416681 !important;
  font-weight: 400 !important;
}
.path-pay table.cart .kgpreis {
  color: #8a9199;
  font-size: 12px;
  font-weight: 400;
  margin-top: 0;
  line-height: 1.2;
}
.path-pay table.cart .column-1 img {
  width: 95px;
  height: auto;
}

/* ═══════════════════════════════════════════════════════════════════
   SCHRIFTGRÖSSEN – zentraler Block (Referenz Denis / wassmann.biz)
   Body-Text 17,6px (1,1rem), H1 40px; Footer-Spalten + Topbar größer.
   ▸ NICHT verstreut überschreiben – Anpassungen bitte HIER pflegen,
     damit sie nicht wieder verloren gehen.
   ═══════════════════════════════════════════════════════════════════ */
body {
  font-size: 1.1rem;          /* 17,6px – Basis wie Referenz */
  line-height: 1.6;
}
/* Fließtext im Inhaltsbereich */
.dw-main,
.dw-main p,
.dw-main li,
.region-content,
.magazin__content,
.seite__content {
  font-size: 1.1rem;
  line-height: 1.6;
}
/* Überschrift H1 wie Referenz (40px) */
.dw-main h1,
.magazin__content h1,
.seite__content h1 {
  font-size: 2.5rem;          /* 40px */
  line-height: 1.15;
}
/* Footer-Spalten (Überschriften + Links) – vorher 13px */
.dw-footer__nav .menu__link--level-1,
.dw-footer__nav .menu > li > a,
.dw-footer__nav .menu > li .menu li a,
.dw-footer__nav .menu > li .menu li span {
  font-size: 15px;
}
/* Footer-Rechtstexte/Copyright – vorher 13px */
.dw-prefooter__links,
.dw-prefooter__copy {
  font-size: 14px;
}

/* ── Account-Dropdown (Männchen oben rechts) ──────────────── */
.dw-topbar__account { position: relative; }
.dw-account-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: #fff;
  border: 1px solid #dde3e8;
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0,0,0,.14);
  z-index: 300;
  padding: 6px 0;
}
.dw-account-dropdown.dw-open { display: block; }
/* Am Handy sitzt das Männchen links in der Box – Menü nach rechts
   aufklappen, sonst ragt es über den linken Bildschirmrand (Denis 04.11.2026). */
@media (max-width: 767px) {
  .dw-account-dropdown { left: 0; right: auto; }
}
/* Schrift wie der übrige Seitentext (vorher 14 px – zu klein) */
.dw-account-dropdown__item {
  display: block;
  text-transform: none;
  letter-spacing: 0;
  padding: 11px 18px;
  color: #2b2b2b;
  font-size: 17.6px;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
}
.dw-account-dropdown__item:hover { background: #f0f5f8; color: #b32d2f; }

/* ── Videos WYSIWYG volle Weite ──────────────── */

.field--name-field-media-oembed-video {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%;
}

.media-oembed-content {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

/* ── WYSIWYG Text-Styles ──────────────────────── */

.redtext {
  color: #b32d2f;
}

.redtext a {
  text-decoration: underline;
}
/* ==========================================================================
   Reiter (lokale Aufgaben, z. B. "Anmelden" / "Passwort zurücksetzen")
   Gilt für alle Tab-Leisten (tabs--primary) der Seite.
   ========================================================================== */
.tabs-wrapper {
  margin: 0 0 24px;
}
.tabs-wrapper .tabs.tabs--primary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
  box-shadow: none;
}
.tabs-wrapper .tabs--primary .tabs__tab {
  display: block !important;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
.tabs-wrapper .tabs--primary .tabs__tab::before,
.tabs-wrapper .tabs--primary .tabs__tab::after,
.tabs-wrapper .tabs--primary .tabs__link::before,
.tabs-wrapper .tabs--primary .tabs__link::after {
  display: none;
}
.tabs-wrapper .tabs--primary .tabs__link {
  display: inline-block;
  min-height: 0;
  padding: 8px 18px;
  background: #f1f3f5;
  border: 1px solid #d5dbe1;
  border-radius: 4px;
  box-shadow: none;
  color: #3a4550;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  text-decoration: none;
}
.tabs-wrapper .tabs--primary .tabs__link:hover,
.tabs-wrapper .tabs--primary .tabs__link:focus {
  background: #e6eaee;
  border-color: #c3cbd3;
  color: #416681;
}
.tabs-wrapper .tabs--primary .tabs__link.is-active {
  background: #fff;
  border-color: #416681;
  color: #416681;
  font-weight: 700;
}
/* Olivero-Umschalter für Mobil-Tabs nicht nötig: alle Reiter sind sichtbar. */
.tabs-wrapper .tabs__trigger {
  display: none;
}

/* ==========================================================================
   Benutzerformulare (Anmelden, Passwort vergessen/zurücksetzen, Registrieren)
   Label über dem Feld -> alle Felder beginnen gleich und sind gleich breit.
   ========================================================================== */
form.user-login-form,
form.user-pass,
form.user-pass-reset,
form.user-register-form {
  max-width: 440px;
}
:is(form.user-login-form, form.user-pass, form.user-pass-reset, form.user-register-form) .form-item {
  margin: 0 0 16px;
}
:is(form.user-login-form, form.user-pass, form.user-pass-reset, form.user-register-form) .form-item__label {
  display: block;
  margin: 0 0 6px;
  font-weight: 600;
}
:is(form.user-login-form, form.user-pass, form.user-pass-reset, form.user-register-form) :is(input[type="text"], input[type="password"], input[type="email"]) {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #c9d0d7;
  border-radius: 4px;
  font-size: 16px;
}
:is(form.user-login-form, form.user-pass, form.user-pass-reset, form.user-register-form) :is(input[type="text"], input[type="password"], input[type="email"]):focus {
  border-color: #416681;
  outline: 2px solid rgba(65, 102, 129, 0.25);
  outline-offset: 0;
}
:is(form.user-login-form, form.user-pass, form.user-pass-reset, form.user-register-form) :is(.form-item__description, .description) {
  margin-top: 4px;
  color: #6b7580;
  font-size: 13px;
}
:is(form.user-login-form, form.user-pass, form.user-pass-reset, form.user-register-form) .form-actions {
  margin-top: 24px;
}

/* ═══ Barrierefreiheit (Grundlagen, WCAG 2.1 AA) ═══════════════════════
   Sichtbarer Fokus nur bei Tastaturbedienung (:focus-visible) – überstimmt
   ältere "outline: none"-Regeln. Farbe/Stil kann im Design angepasst werden. */
:focus-visible,
.dw-suchleiste__input:focus-visible,
.dw-suche__feld input:focus-visible,
.produkt-teaser:focus-visible,
.mygrowthpureform input:focus-visible,
.mygrowthpureform select:focus-visible,
.mygrowthpureform textarea:focus-visible,
.mygrowthpureform button:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
  outline: 3px solid #b32d2f !important;
  outline-offset: 2px !important;
}
/* Suchfelder mit eigenem Rahmen (Sortiment-Menü, Suchseite): Fokus um die
   ganze Box in Blau statt rot nur um das innere Eingabefeld. */
.dw-panelsuche input:focus-visible,
.dw-suche__feld input:focus-visible {
  outline: none !important;
}
.dw-panelsuche:focus-within,
.dw-suche__feld:focus-within {
  border-color: #416681;
  box-shadow: 0 0 0 2px #416681;
}
/* Ziel des Sprunglinks: kein Rahmen um den ganzen Inhaltsbereich. */
#main-content:focus { outline: none; }
/* Links im Fließtext nicht nur über die Farbe erkennbar machen. */
.dw-main p a:not([class]),
.dw-home-seo__text a,
.nlbox-privacy a,
.dw-suche__crumb a,
.produkt-tab__body a,
.magazin__content a,
.seite__content a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ------------------------------------------------------------------
   Inhaltstabellen (Nährwerte, Aminosäuren …) wie im D7-Shop.
   Die Klassen kommen aus dem Inhalt (bbtable, tablehead, nutrirow …);
   Bootstrap (.table) wird dabei überschrieben.
   ------------------------------------------------------------------ */
.bbtable {
  width: 100%;
  /* Keine Maximalbreite: Tabellen nutzen die volle Breite des Inhalts
     (Magazin, Produkt-Reiter; Wunsch Denis 22.10.2026). */
  margin: 0 auto 20px;
  border-collapse: collapse;
  caption-side: top;
  font-size: 14px;
  line-height: 1.4;
}
.bbtable caption {
  caption-side: top;
  text-align: center;
  font-weight: bold;
  color: #323232;
  padding: 0;
  margin: 10px 0;
  font-size: 14px;
}
.bbtable > :not(caption) > * > * {
  padding: 10px;
  background-color: transparent;
  box-shadow: none;
  border-bottom: 1px solid #C1C3D1;
  color: #416681;
  hyphens: auto;
}
/* Handy: lange Wörter (z. B. "Mehrkomponentenprotein") dürfen notfalls
   umbrechen, falls der Browser nicht deutsch trennt; etwas weniger Abstand –
   sonst ragt die Tabelle über den Rand. */
@media (max-width: 600px) {
  .bbtable > :not(caption) > * > * {
    padding: 8px 6px;
    overflow-wrap: anywhere;
  }
}
.bbtable th.tablehead,
.bbtable th.tablehead-2 {
  background-color: #416681;
  color: #fff;
  font-weight: normal;
  border-bottom: 0;
}
.bbtable th.tablehead { text-align: left; }
.bbtable th.tablehead-2 { text-align: right; }
.bbtable td.nutrirow { text-align: left; border-right: 0; }
.bbtable td.nutrirow-2 { text-align: right; min-width: 25%; }
.bbtable td.nutrirow-3 { text-align: left; }
.bbtable tbody tr:nth-child(odd) > td { background-color: #fff; }
.bbtable tbody tr:nth-child(even) > td { background-color: #f2f3f6; }
.shoptable { margin-bottom: 20px; font-size: 14px; }
.shoptable table { margin-bottom: 0; }

/* Teaser/Kacheln: beim Überfahren keinen Text-Hover (keine Unterstreichung
   durch die allgemeine a:hover-Regel) – Startseite, Kategorien, Magazin,
   Produktseiten (Vorgabe Pero 20.10.2026). Anheben/Schatten bleibt. */
a.produkt-teaser:hover,
a.dw-fave:hover,
a.dw-hl:hover,
a.dw-banner-kachel__link:hover,
a.magazin-card__image-link:hover,
a.magazin-latest-card__image-link:hover,
a.magazin-hero__image-link:hover {
  text-decoration: none;
}

/* ── Links wie Vorlage (wassmann.biz/node/7): rot statt Bootstrap-Blau,
   beim Hover keine Farb- oder Unterstreichungsänderung, nur der
   Mauszeiger (Vorgabe Pero 20.10.2026). ── */
:root {
  --bs-link-color: #b32d2f;
  --bs-link-color-rgb: 179, 45, 47;
  --bs-link-hover-color: #b32d2f;
  --bs-link-hover-color-rgb: 179, 45, 47;
}
/* Textlinks im redaktionellen Inhalt (auch in Listen/Tabellen) unterstrichen –
   das Theme setzt sonst a { text-decoration: none }. */
.text-content a:not([class]) { text-decoration: underline; }

/* ── Einheitliche Breadcrumb (page.html.twig) – wie Vorlage node/7. ── */
.dw-crumb {
  margin: 0 0 30px;
  font-size: 0.9rem;
  line-height: 100%;
  color: #212529;
}
.dw-crumb a { color: #b32d2f; text-decoration: none; }

/* ── Proteinvergleich (/proteinvergleich, Inhalt aus D7): Gestaltung wie im
   Live-Shop (Schrift 16,8 px, graue Zeilen td-grey, rote Abschnitte, keine
   Rahmen außer tr-underline). Zusätzlich: am PC volle Inhaltsbreite, erste
   Spalte bleibt beim seitlichen Scrollen/Wischen stehen. ── */
/* Seite mit Vergleichstabelle: Inhalt über die volle Fensterbreite,
   Breadcrumb, Titel, Text und Tabelle bündig links. */
body:has(.provtable) .dw-main > .dw-inner { max-width: none; }
.seite:has(.provtable) .seite__box { max-width: none; margin-left: 0; margin-right: 0; }
.provtext {
  max-width: 820px;
  margin: 0 0 20px;
  font-size: 16.8px;
  line-height: 25.2px;
  color: #323232;
}
.provtable {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 30px;
  width: 100%;
  font-size: 16.8px;
  line-height: 25.2px;
  color: #323232;
}
.provtable table {
  border-collapse: collapse;
  border-spacing: 0;
  width: auto;
  margin: 0;
  color: #416681;
}
.provtable th,
.provtable td {
  padding: 6px;
  min-width: 140px;
  max-width: 140px;
  vertical-align: middle;
  background-color: #fff;
  border: 0;
  font-size: 16.8px;
  /* Breite ohne Innenabstand wie in D7 (Bootstrap rechnet ihn sonst ein). */
  box-sizing: content-box;
}
.provtable th {
  font-weight: 700;
  color: #333;
  line-height: normal;
}
.provtable td {
  color: #323232;
  line-height: 25.2px;
}
.provtable th[scope="row"] {
  position: sticky;
  left: 0;
  z-index: 1;
}
.provtable .tr-underline { border-bottom: 1px solid #000; }
.provtable .td-center { text-align: center; }
.provtable .td-bold { font-weight: 700; }
.provtable .th-right { text-align: right !important; }
.provtable .td-right { text-align: right; }
.provtable .td-grey { background-color: #f8f8f8 !important; }
.provtable .th-wide { min-width: 200px !important; max-width: 200px !important; }
.provtable .th-red,
.provtable .td-red { color: #b32d2f !important; }
.provtable img {
  max-width: 100%;
  height: auto;
}
/* Knöpfe "zum Produkt" wie in D7 (blau, weiße Schrift). */
.provtable a.pvbutton,
.provtable a.pvbutton:hover {
  display: inline-block;
  background-color: #416681;
  color: #fff;
  padding: 14px 24px;
  border-radius: 4px;
  line-height: 20px;
  text-decoration: none;
}
@media (max-width: 600px) {
  .provtable .th-wide { min-width: 130px !important; max-width: 130px !important; }
}