/* chrome.css — extracted 1:1 from Traumbetten mockups (no class renaming).
   Source-of-truth: HTML mockups in /Traumbetten Child/.
   Mockup-class diktatur: do not change class names here. */

.skip-link{
  position: absolute; left: -9999px; top: 0;
  background: var(--color-text); color: #fff;
  padding: var(--space-3) var(--space-4); z-index: 999;
  border-radius: 0 0 var(--radius) 0;
}

.skip-link:focus-visible { left: 0 }

.header-top {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 32px; align-items: center; padding: 16px 0;
}

.btn{
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  font-weight: 600; font-size: var(--text-md);
  border-radius: var(--radius);
  transition: all .2s var(--ease);
  white-space: nowrap;
  min-height: 48px;
  border: 1px solid transparent;
}

.btn svg{ width: 18px; height: 18px }

.btn-primary{ background: var(--color-btn-bg); color: var(--color-btn-text) }

.btn-primary:hover{
  background: var(--color-btn-bg-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.btn-ghost{
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-btn-ghost-border);
}

.btn-ghost:hover{
  background: var(--color-surface-2);
  border-color: var(--color-text);
}

.btn-text{
  background: transparent;
  color: var(--color-accent-hover);
  padding-inline: 0;
}

.btn-text:hover{ color: var(--color-accent-deep) }

.btn-lg{ padding: var(--space-5) var(--space-8); font-size: var(--text-lg); min-height: 56px }

.btn-sm{ padding: var(--space-2) var(--space-4); font-size: var(--text-sm); min-height: 38px }

.btn-ghost-inverse{
  background: transparent;
  color: #fff;
  border-color: rgb(255 255 255 / .3);
}

.btn-block{ width: 100% }

.btn-ghost-inverse:hover{
  background: rgb(255 255 255 / .1);
  border-color: rgb(255 255 255 / .5);
}

.child-topbar{
  background: var(--color-text);
  color: var(--color-text-on-dark);
  font-size: var(--text-xs);
}

.child-topbar-inner{
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); min-height: 40px; flex-wrap: wrap;
}

.child-topbar-items{
  display: flex; gap: var(--space-6);
  flex-wrap: wrap; align-items: center;
}

.child-topbar-item{
  display: inline-flex; align-items: center; gap: var(--space-2);
}

.child-topbar-item svg{
  width: 14px; height: 14px;
  color: var(--color-accent-on-dark);
  flex-shrink: 0;
}

/* Desktop-Default: Track ist ein transparenter Wrapper, Items sind normale
   Flex-Children von .child-topbar-items wie vorher. Duplikat-Track bleibt aus. */
.child-topbar-track{ display: contents; }
.child-topbar-track[aria-hidden="true"]{ display: none; }

.child-topbar-rating{
  display: inline-flex; align-items: center; gap: var(--space-2);
}

.child-topbar-rating strong{ color: #fff; font-weight: 600 }

.child-topbar-rating .stars{ color: var(--color-star); letter-spacing: 1px }

/* Mobile: kein Platz für Trust-Items + Bewertung nebeneinander — Zeilenumbruch
   sieht auf schmalen Viewports kaputt aus. Bewertung raus, dafür im
   Mobile-Drawer (siehe inc/nav-fallback.php, .mobile-nav-rating). Die 4
   Trust-Items bleiben alle sichtbar, laufen dafür als endloses Laufband
   einzeilig durch (Track + identisches Duplikat, siehe header.php). */
@media (max-width: 720px){
  .child-topbar-rating{ display: none }

  .child-topbar-items{
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    width: 100%;
    gap: 0;
  }

  .child-topbar-track{
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: var(--space-6);
    padding-right: var(--space-6);
    animation: tbb-topbar-marquee 20s linear infinite;
  }

  .child-topbar-track[aria-hidden="true"]{ display: flex; }

  @keyframes tbb-topbar-marquee{
    from{ transform: translateX(0); }
    to{ transform: translateX(-100%); }
  }
}

@media (prefers-reduced-motion: reduce){
  .child-topbar-track{ animation: none !important; }
}

.site-header{
  position: sticky; top: 0; z-index: 50;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  transition: box-shadow .2s var(--ease);
}

.site-header.is-scrolled{ box-shadow: var(--shadow) }

.header-inner{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-6);
  min-height: var(--header-h);
}

.site-header .logo{
  grid-column: 1;
  justify-self: start;
}

.site-header .nav-primary{
  grid-column: 2;
  justify-self: center;
}

.site-header .header-actions{
  grid-column: 3;
  justify-self: end;
}

.logo{
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-display);
  font-size: 1.4rem; font-weight: 600;
  color: var(--color-text);
  letter-spacing: -.02em;
}

.logo-svg,
.logo img.logo-svg,
.logo .logo-img,
.footer-logo{
  display: block;
  height: 66px;
  width: auto;
  max-width: min(330px, 58vw);
  object-fit: contain;
  object-position: left center;
}
.logo-svg--mobile{
  height: 36px;
  max-width: min(180px, 60vw);
}
.logo-svg--footer,
.logo--footer .logo-svg{
  height: 66px;
  max-width: 360px;
}

.btn--primary { background: var(--color-brand); color: #fff; }

.btn--primary:hover { background: var(--color-brand-dark); transform: translateY(-1px); }

.logo-mark{
  display: inline-grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--color-accent);
  color: #fff;
  flex-shrink: 0;
}

.btn--ghost-dark { background: transparent; color: var(--color-brand); border: 1.5px solid var(--color-brand); }

.logo-mark svg{ width: 22px; height: 22px }

.btn--ghost-dark:hover { background: var(--color-brand); color: #fff; }

.logo-text{ line-height: 1 }

.btn--text {
  background: transparent; color: var(--color-brand); padding: 8px 0;
  font-weight: 600; text-transform: none; letter-spacing: 0;
}

.logo-text small{
  display: block;
  font-family: var(--font-sans);
  font-size: .6875rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.btn--text::after { content: " →"; transition: transform var(--duration) var(--ease-out); }

.nav-primary{ display: none }

@media (min-width: 1350px){
  .header-inner{ min-height: 88px; gap: var(--space-10) }
  .nav-primary{
    display: flex;
    gap: var(--space-8);
    justify-self: center;
  }
  .nav-toggle{ display: none }
  .header-phone{ display: inline-flex }
}

.nav-link{
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-weight: 500;
  font-size: var(--text-md);
  padding: var(--space-3) 0;
  color: var(--color-text);
  border-bottom: 2px solid transparent;
  transition: color .15s ease;
}

.nav-link svg{
  width: 14px;
  height: 14px;
  transition: transform .2s var(--ease);
}

.nav-link.is-sale{ color: var(--color-sale) }

.btn--text:hover::after { transform: translateX(4px); }

.btn--lg { padding: 18px 32px; font-size: var(--fs-body); }

.nav-item{ position: relative }

.btn--xl { padding: 22px 36px; font-size: var(--fs-lead); }

.btn--block { width: 100%; }

.nav-link:hover,
.nav-item:hover .nav-link{ color: var(--color-accent-hover) }

.nav-item:hover .nav-link svg{ transform: rotate(180deg) }

.megamenu{
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 520px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-3);
  padding: var(--space-6);
  opacity: 0; visibility: hidden;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}

.nav-item:hover .megamenu,
.nav-item:focus-within .megamenu{
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.megamenu-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1) var(--space-6);
}

.megamenu-link{
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  transition: background .15s ease;
}

.megamenu-link:hover{
  background: var(--color-surface-2);
  color: var(--color-accent-hover);
}

.megamenu-link::before{
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0; opacity: .5;
}

.megamenu-link:hover::before{ opacity: 1 }

.header-actions{ display: flex; align-items: center; gap: var(--space-2) }

.header-icon-btn{
  position: relative;
  display: inline-grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--radius);
  color: var(--color-text);
  transition: background .15s ease;
}

.header-icon-btn:hover{ background: var(--color-surface-2) }

.header-icon-btn svg{ width: 20px; height: 20px }

.header-icon-btn.is-desktop-only{ display: none }

/* Wunschlisten-Badge teilt sich die Regel mit dem Warenkorb — getrennte
   Regeln sind schon einmal auseinandergedriftet: .header-wishlist-count war
   nur innerhalb der mobilen Tab-Bar gestylt und rutschte im Desktop-Header als
   zweites Grid-Item unter das Herz. */
.header-cart-count,
.header-wishlist-count{
  position: absolute; top: 5px; right: 5px;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--color-accent);
  color: #fff;
  font-size: 11px; font-weight: 600;
  border-radius: 9px;
  display: grid; place-items: center;
  line-height: 1;
}

.header-phone{
  display: none;
  align-items: center; gap: var(--space-2);
  font-weight: 600;
  color: var(--color-accent-hover);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  font-size: var(--text-sm);
}

.header-phone:hover{ background: var(--color-accent-soft) }

.header-phone svg{ width: 16px; height: 16px }

.nav-toggle{
  display: inline-grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--radius);
}

.nav-toggle:hover{ background: var(--color-surface-2) }

.nav-toggle svg{ width: 24px; height: 24px }

.tbb-header-quick-actions{
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Mobile: Quick-Actions aus Header → sticky Tab-Leiste unten (≤720px) */
.tbb-mobile-tab-bar{ display: none }

@media (max-width: 720px){
  .tbb-header-quick-actions{ display: none !important }

  .tbb-mobile-tab-bar{
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    gap: var(--space-1);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    min-height: var(--tbb-tab-bar-h, 4rem);
    padding: var(--space-2) var(--space-3) calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -4px 24px rgb(11 13 18 / .08);
  }

  body.tbb-chrome:has(.tbb-mobile-tab-bar){
    padding-bottom: calc(var(--tbb-tab-bar-h, 4rem) + env(safe-area-inset-bottom, 0px));
  }

  html.tbb-drawer-open .tbb-mobile-tab-bar{
    z-index: 80;
  }
}

.tbb-tab-bar-item{
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font: inherit;
  text-align: center;
  transition: color .15s ease, background .15s ease;
}

.tbb-tab-bar-item:hover,
.tbb-tab-bar-item:focus-visible{
  color: var(--color-accent-hover);
  background: var(--color-surface-2);
}

.tbb-tab-bar-icon{
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
}

.tbb-tab-bar-icon svg{
  width: 22px;
  height: 22px;
}

.tbb-tab-bar-label{
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.tbb-mobile-tab-bar .header-cart-count,
.tbb-mobile-tab-bar .header-wishlist-count{
  top: 0;
  right: 50%;
  transform: translateX(calc(50% + 10px));
}

.mobile-nav-backdrop{
  position: fixed; inset: 0;
  background: rgb(11 13 18 / .5);
  z-index: 99;
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}

.mobile-nav-backdrop.is-visible{ opacity: 1; visibility: visible }

.mobile-nav-panel{
  position: fixed; inset: 0 0 0 auto;
  width: min(380px, 100%);
  background: var(--color-surface);
  z-index: 100;
  transform: translateX(100%);
  transition: transform .3s var(--ease);
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-3);
}

.mobile-nav-panel.is-open{ transform: translateX(0) }

.mobile-nav-header{
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.product-hero__cta-row .btn--xl { min-width: 240px; }

.mobile-nav-body{
  padding: var(--space-5);
  overflow-y: auto;
  flex: 1;
}

.mobile-nav-group{ margin-bottom: var(--space-6) }

.mobile-nav-label{
  font-size: var(--text-xs); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.mobile-nav-link{
  display: block;
  padding: var(--space-3) 0;
  font-size: var(--text-md);
  border-bottom: 1px solid var(--color-border-soft);
}

.mobile-nav-link:last-child{ border: 0 }

.mobile-nav-cta{ display: block }

.mobile-nav-group--footer{
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.mobile-nav-phone{
  font-weight: 600;
  color: var(--color-accent-hover);
}

.mobile-nav-phone-hint{
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

.mobile-nav-rating{
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-3);
}

.mobile-nav-rating-stars{ color: var(--color-star); letter-spacing: 1px }

.mobile-nav-panel .btn-block{ width: 100%; }

.mobile-nav-header .logo{
  font-size: 1.1rem;
  gap: var(--space-3);
}

.mobile-nav-header .logo-mark{
  width: 32px;
  height: 32px;
}

html.tbb-drawer-open{
  overflow: hidden;
}

/* Trust-Siegel — Breakpoints:
 * ≥1600px: sticky rechts (Stack)
 * 901–1599px: kompakte Leiste unten links
 * ≤900px: Chip unten rechts (oberhalb Sticky-Leisten via --tbb-bottom-bar-h)
 *
 * Desktop-Offsets (nur ≥1600):
 * --tbb-seal-top-offset-x, --tbb-seal-bottom-offset-x, --tbb-seal-anchor-offset-x
 */
:root{
  --tbb-bottom-bar-h: 0px;
  --tbb-trust-chip-gap: var(--space-4);
}

html.tbb-has-bottom-bar{
  --tbb-trust-chip-gap: 16px;
}

.tbb-trust-seal-sticky{
  display: none;
  position: fixed;
  z-index: 45;
  pointer-events: none;
}

.tbb-trust-seal-sticky-stack,
.tbb-trust-seal-compact,
.tbb-trust-seal-chip{
  display: none;
}

/* Chip — ≤900px, oberhalb product-sticky / Tab-Leiste / Konfigurator-Bar */
@media (max-width: 900px){
  .tbb-trust-seal-sticky{
    display: block;
    top: auto;
    right: var(--space-4);
    bottom: calc(var(--tbb-bottom-bar-h) + var(--tbb-trust-chip-gap));
    left: auto;
    transform: none;
    z-index: 95;
  }

  .tbb-trust-seal-chip{
    display: block;
    position: relative;
    pointer-events: auto;
  }
}

/* Mobile-Tab-Leiste: Chip oberhalb Tab-Leiste (CSS-Fallback + safe-area) */
@media (max-width: 720px){
  :root{
    --tbb-bottom-bar-h: calc(var(--tbb-tab-bar-h, 4rem) + env(safe-area-inset-bottom, 0px));
    --tbb-trust-chip-gap: 16px;
  }
}

@media (min-width: 901px){
  .tbb-trust-seal-sticky{
    display: block;
  }
}

/* Kompakt-Leiste — 901–1599px, unten links */
@media (min-width: 901px) and (max-width: 1599px){
  .tbb-trust-seal-sticky{
    top: auto;
    right: auto;
    bottom: var(--space-5);
    left: var(--space-5);
    transform: none;
  }

  .tbb-trust-seal-compact{
    display: flex;
    align-items: center;
    gap: var(--space-3);
    pointer-events: auto;
    padding: var(--space-2) var(--space-3);
    background: rgb(255 255 255 / .92);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    opacity: .92;
    transition: opacity .2s ease, box-shadow .2s ease;
  }

  .tbb-trust-seal-compact:hover{
    opacity: 1;
    box-shadow: var(--shadow-3);
  }
}

/* Desktop sticky — ≥1600px */
@media (min-width: 1600px){
  .tbb-trust-seal-sticky{
    top: 50%;
    right: var(--space-5);
    bottom: auto;
    left: auto;
    transform: translateY(-50%) translateX(var(--tbb-seal-anchor-offset-x, 20px));
  }

  .tbb-trust-seal-sticky-stack{
    --tbb-seal-top-offset-x: 15px;
    --tbb-seal-bottom-offset-x: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
    pointer-events: none;
  }
}

@media (min-width: 1600px){
  .tbb-trust-seal-sticky{
    right: calc(50% - 700px - 7.5rem);
  }
}

.tbb-trust-seal-sticky-link{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  pointer-events: auto;
  padding: var(--space-4) var(--space-3);
  text-align: center;
  text-decoration: none;
  color: inherit;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s ease;
}

.tbb-trust-seal-sticky-link:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-3);
  border-color: var(--color-border-soft);
  color: inherit;
}

.tbb-trust-seal-sticky-link--ausgezeichnet,
.tbb-trust-seal-sticky-link--internet{
  position: relative;
}

.tbb-trust-seal-sticky-link:focus-visible{
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.tbb-trust-seal-sticky-badge{
  display: block;
  width: 88px;
  height: 88px;
  object-fit: contain;
}

.tbb-trust-seal-sticky-meta{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  line-height: 1.3;
}

.tbb-trust-seal-sticky-stars{
  color: var(--color-star);
  font-size: 14px;
  letter-spacing: 1px;
  line-height: 1;
}

.tbb-trust-seal-sticky-score{
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--color-text);
}

.tbb-trust-seal-sticky-count{
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  line-height: 1.35;
}

.tbb-trust-seal-sticky-link--ausgezeichnet{
  left: var(--tbb-seal-top-offset-x);
}

.tbb-trust-seal-sticky-link--internet{
  padding: var(--space-3);
  max-width: 168px;
  left: var(--tbb-seal-bottom-offset-x);
}

.tbb-trust-seal-sticky-internet{
  display: block;
  width: auto;
  max-width: 152px;
  height: auto;
  object-fit: contain;
}

/* —— Kompakt-Leiste (Inhalt) —— */
.tbb-trust-seal-compact-link{
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-sm);
  transition: opacity .15s ease;
}

.tbb-trust-seal-compact-link:hover{
  color: inherit;
  opacity: .85;
}

.tbb-trust-seal-compact-badge{
  display: block;
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
}

.tbb-trust-seal-compact-meta{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.tbb-trust-seal-compact-stars{
  color: var(--color-star);
  font-size: 11px;
  letter-spacing: .5px;
}

.tbb-trust-seal-compact-score{
  font-weight: 700;
  color: var(--color-text);
}

.tbb-trust-seal-compact-sep{
  color: var(--color-text-muted);
  font-weight: 400;
}

.tbb-trust-seal-compact-count{
  color: var(--color-text-muted);
}

.tbb-trust-seal-compact-divider{
  width: 1px;
  align-self: stretch;
  min-height: 28px;
  background: var(--color-border);
  flex-shrink: 0;
}

.tbb-trust-seal-compact-internet{
  display: block;
  width: auto;
  height: 32px;
  max-width: 96px;
  object-fit: contain;
}

/* —— Chip (≤900px) —— */
.tbb-trust-seal-chip-toggle{
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: min(13.5rem, calc(100vw - var(--space-8)));
  padding: 5px 10px 5px 5px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: rgb(255 255 255 / .9);
  color: var(--color-text-muted);
  box-shadow: 0 2px 10px rgb(11 13 18 / .08);
  cursor: pointer;
  font: inherit;
  text-align: left;
  opacity: .94;
  transition: opacity .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}

.tbb-trust-seal-chip-toggle:hover{
  opacity: 1;
  background: var(--color-surface);
  border-color: var(--color-border-soft);
  box-shadow: 0 3px 14px rgb(11 13 18 / .1);
  color: var(--color-text-muted);
}

.tbb-trust-seal-chip-toggle:focus-visible{
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  opacity: 1;
}

.tbb-trust-seal-chip.is-open .tbb-trust-seal-chip-toggle{
  opacity: 1;
  border-color: var(--color-border-soft);
  box-shadow: 0 3px 14px rgb(11 13 18 / .12);
}

.tbb-trust-seal-chip-preview{
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  padding: 2px 4px;
  background: var(--color-bg-alt);
  border-radius: 6px;
}

.tbb-trust-seal-chip-preview-badge{
  display: block;
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.tbb-trust-seal-chip-preview-internet{
  display: block;
  width: auto;
  height: 15px;
  max-width: 32px;
  object-fit: contain;
}

.tbb-trust-seal-chip-copy{
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  line-height: 1.2;
}

.tbb-trust-seal-chip-title{
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.tbb-trust-seal-chip-hint{
  font-size: 9px;
  font-weight: 600;
  color: var(--color-text-muted);
  opacity: .85;
}

.tbb-trust-seal-chip-chevron{
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: var(--color-text-muted);
  opacity: .7;
  transition: transform .2s var(--ease), opacity .2s ease;
}

.tbb-trust-seal-chip-toggle:hover .tbb-trust-seal-chip-chevron{
  opacity: 1;
}

.tbb-trust-seal-chip.is-open .tbb-trust-seal-chip-chevron{
  transform: rotate(180deg);
}

.tbb-trust-seal-chip-panel{
  position: absolute;
  right: 0;
  bottom: calc(100% + var(--space-3));
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: min(15.5rem, calc(100vw - var(--space-8)));
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-3);
}

.tbb-trust-seal-chip-panel-head{
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
}

.tbb-trust-seal-chip-panel-sub{
  margin: 0 0 var(--space-1);
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-muted);
  line-height: 1.35;
}

.tbb-trust-seal-chip-panel[hidden]{
  display: none !important;
}

.tbb-trust-seal-chip-link{
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-sm);
  transition: background .15s ease;
}

.tbb-trust-seal-chip-link:hover{
  background: var(--color-surface-2);
  color: inherit;
}

.tbb-trust-seal-chip-link img{
  flex-shrink: 0;
  object-fit: contain;
}

.tbb-trust-seal-chip-link-meta{
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.3;
}

.tbb-trust-seal-chip-link-meta strong{
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
}

.tbb-trust-seal-chip-link--internet{
  justify-content: center;
  padding-block: var(--space-3);
}

.tbb-trust-seal-chip-link--internet img,
.tbb-trust-seal-chip-link-internet{
  width: auto;
  height: 53px;
  max-width: 168px;
  object-fit: contain;
}

@media (min-width: 901px){
  html.tbb-drawer-open .tbb-trust-seal-sticky{
    z-index: 35;
  }
}

.child-breadcrumb{
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border-soft);
  padding-block: var(--space-3);
  font-size: var(--text-xs);
}

.child-breadcrumb-list{
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  color: var(--color-text-muted);
}

.child-breadcrumb-list a{ color: var(--color-text-muted); transition: color .15s ease }

.child-breadcrumb-list a:hover{ color: var(--color-accent-hover) }

.child-breadcrumb-sep{ color: var(--color-text-muted); opacity: .5 }

.child-breadcrumb-current{ color: var(--color-text); font-weight: 500 }

.price-card__sub-actions .btn { flex: 1; padding: 12px; font-size: 12px; }

.site-footer{
  background: var(--color-text);
  color: var(--color-text-on-dark-soft);
  padding-block: var(--space-16) var(--space-8);
}

.footer-grid{
  display: grid; gap: var(--space-10);
  grid-template-columns: 1fr;
}

@media (min-width: 768px){
  .footer-grid{ grid-template-columns: 1.5fr 1fr 1fr 1fr }
}

.footer-brand .logo{ color: #fff }

.footer-brand .logo-text small{ color: var(--color-text-on-dark-muted) }

.footer-about{
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  max-width: 340px;
  line-height: 1.7;
}

.footer-contact{
  margin-top: var(--space-5);
  display: flex; flex-direction: column;
  gap: var(--space-3);
}

.footer-contact-item{
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm);
}

.footer-contact-item svg{
  width: 16px; height: 16px;
  color: var(--color-accent-on-dark);
}

.footer-title{
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: var(--space-5);
  font-family: var(--font-sans);
}

.footer-list{
  display: flex; flex-direction: column;
  gap: var(--space-3);
}

.footer-list a{
  font-size: var(--text-sm);
  color: var(--color-text-on-dark-soft);
  transition: color .15s ease;
}

.footer-list a:hover{ color: #fff }

/* Social-Icons unter der "Über uns"-Liste. Eigene Reihe statt Listenpunkte,
   damit externe Profile optisch nicht wie Shop-Seiten wirken.

   Kein Kreis-Rahmen: Beide Marken sind selbst ein gerahmtes Quadrat — ein Ring
   darum ergaebe zwei ineinanderliegende Konturen und traegt viel zu dick auf.

   Der Link ist groesser als das Icon (32px Kasten, 18px Glyphe). Sichtbar
   klein, Zielflaeche trotzdem deutlich ueber dem WCAG-2.5.8-Minimum von 24px.
   Das negative margin-left gleicht das Innenpolster des ersten Kastens aus,
   damit die Glyphe buendig unter dem Listentext steht. */
/* Kundenwunsch: Social-Icons waren zu unauffaellig ("sehe ich noch nicht").
   Jetzt mit sichtbarem Label, hellerem Icon-Ton und klarer Klick-Flaeche
   (gerahmte Chips), damit Facebook und Instagram eindeutig auffindbar sind. */
.footer-social-label{
  margin: var(--space-6, 24px) 0 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm, .9375rem);
  font-weight: 600;
  color: var(--color-text-on-dark, #dfe2e8);
}

.footer-social{
  display: flex;
  /* Fallback-Werte, weil der Footer auch auf den WC-Transaktionsseiten laeuft,
     wo base.css bewusst nicht geladen wird (siehe inc/asset-registry.php). */
  gap: var(--space-2, 8px);
  margin-top: var(--space-3, 12px);
}

.footer-social-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  color: var(--color-text-on-dark, #dfe2e8);
  background: rgb(255 255 255 / .08);
  border: 1px solid rgb(255 255 255 / .16);
  border-radius: 10px;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}

.footer-social-link:hover{
  color: #fff;
  background: var(--color-accent, #1e5baa);
  border-color: var(--color-accent, #1e5baa);
}

.footer-social-link svg{
  width: 20px; height: 20px;
  display: block;
}

.form-submit-row .btn-primary{
  background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
  box-shadow: 0 4px 12px rgb(37 99 235 / .25), inset 0 1px 0 rgb(255 255 255 / .15);
  position: relative;
}

.footer-bottom{
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-dark-border);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: var(--text-xs);
}

.form-submit-row .btn-primary:hover{
  background: linear-gradient(180deg, var(--color-accent-hover) 0%, var(--color-accent-deep) 100%);
  box-shadow: 0 6px 20px rgb(37 99 235 / .35), inset 0 1px 0 rgb(255 255 255 / .15);
  transform: translateY(-1px);
}

.footer-legal{
  display: flex; gap: var(--space-5); flex-wrap: wrap;
}

.footer-payments{
  display: flex; gap: var(--space-2);
  flex-wrap: wrap; align-items: center;
}

.footer-payment{
  background: #fff;
  color: var(--color-text);
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 11px; font-weight: 600;
  letter-spacing: .02em;
}

.footer-col h4 { color: #fff; font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 16px; }

.footer-col ul { list-style: none; }

.footer-col ul li { margin-bottom: 8px; }

.footer-col a { transition: color var(--duration) var(--ease-out); }

.footer-col a:hover { color: #fff; }

/* ── WooCommerce SVG-Icons: base.css-Override rückgängig ────────────── */
/* base.css lädt nach chrome.css → höhere Spezifität in cart-checkout.css  */
/* und account.css (laden nach base.css) ist der richtige Ort für diesen Fix */

/* Screen-reader only — muss in chrome.css stehen (nicht jede Seite lädt base.css). */
.visually-hidden,
.screen-reader-text{
  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;
  clip-path: inset(50%) !important;
}

/* ── Search Overlay ──────────────────────────────────────────────────── */
.tbb-search-overlay{
  position: fixed;
  inset: 0;
  /* Über Admin-Bar (z-index 99999) */
  z-index: 100000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  /* Admin-Bar ist 32px auf Desktop, 46px auf Mobile */
  padding-top: 80px;
}
.admin-bar .tbb-search-overlay{ padding-top: 112px }
@media (max-width: 782px){
  .admin-bar .tbb-search-overlay{ padding-top: 126px }
}

.tbb-search-overlay[hidden]{ display: none }

.tbb-search-overlay-backdrop{
  position: absolute; inset: 0;
  background: rgb(11 13 18 / .6);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  cursor: pointer;
}

.tbb-search-overlay-panel{
  position: relative;
  z-index: 1;
  width: min(640px, 90vw);
  margin-top: var(--space-4, 1rem);
  background: var(--color-surface, #fff);
  border-radius: var(--radius-lg, 16px);
  box-shadow: 0 20px 60px rgb(11 13 18 / .2), 0 4px 12px rgb(11 13 18 / .1);
  padding: var(--space-6, 1.5rem);
  animation: tbb-search-in .2s cubic-bezier(.16,1,.3,1) both;
}

@keyframes tbb-search-in{
  from{ opacity:0; transform:translateY(-16px) scale(.98) }
  to  { opacity:1; transform:none }
}

.tbb-search-overlay-panel p{
  font-family: var(--font-sans, sans-serif);
  font-size: var(--text-xs, .8125rem);
  color: var(--color-text-muted, #6b7280);
  margin-top: var(--space-3, .75rem);
}

.tbb-search-form{
  display: flex;
  align-items: stretch;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--color-border, #e1e4ea);
  border-radius: var(--radius, 10px);
  padding: 0;
  background: var(--color-surface, #fff);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.tbb-search-form:focus-within{
  border-color: var(--color-accent, #1e5baa);
  box-shadow: 0 0 0 3px var(--color-accent-soft, #e8efff);
}

.tbb-search-input{
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
  border: 0;
  outline: none;
  box-shadow: none;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  font-size: var(--text-lg, 1.125rem);
  color: var(--color-text, #0b0d12);
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  line-height: 1.4;
}

.tbb-search-input:focus,
.tbb-search-input:focus-visible{
  outline: none;
  box-shadow: none;
  border: 0;
}

.tbb-search-input::-webkit-search-decoration,
.tbb-search-input::-webkit-search-cancel-button{
  -webkit-appearance: none;
  appearance: none;
}

.tbb-search-input::placeholder{
  color: var(--color-text-muted, #6b7280);
  font-weight: 400;
}

.tbb-search-submit{
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  background: var(--color-accent, #1e5baa);
  color: #fff;
  border: 0;
  outline: none;
  box-shadow: none;
  border-radius: 0;
  width: 52px;
  min-height: 52px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .15s ease;
}

.tbb-search-submit:focus,
.tbb-search-submit:focus-visible{
  outline: none;
  box-shadow: none;
}

.tbb-search-overlay :focus-visible{
  outline: none;
}

.tbb-search-form:focus-within .tbb-search-submit:focus-visible{
  outline: 2px solid var(--color-accent-text, #fff);
  outline-offset: -4px;
}

.tbb-search-submit svg{
  width: 18px; height: 18px;
  display: block;
}
.tbb-search-submit:hover{ background: var(--color-accent-hover, #1d4ed8) }
.tbb-search-submit:active{ transform: scale(.95) }

.tbb-search-close{
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e1e4ea);
  box-shadow: var(--shadow, 0 4px 12px rgb(11 13 18 / .12));
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--color-text-soft, #3d4350);
  transform: translate(40%, -40%);
  transition: background .15s ease, border-color .15s ease;
}

.tbb-search-close svg{
  width: 16px; height: 16px;
  display: block;
}
.tbb-search-close:hover{ background: var(--color-border, #e1e4ea) }

/* WooCommerce-Seiten (Warenkorb, Kasse, Mein Konto) */
.tbb-wc-page .woocommerce,
.tbb-wc-page .woocommerce-page{ max-width: 100% }
.tbb-wc-page .woocommerce-notices-wrapper{ margin-bottom: var(--space-6) }
.tbb-wc-page form.woocommerce-cart-form,
.tbb-wc-page div.woocommerce{ max-width: 100% }

/* Jenva-Core + style.css: img/svg global block + max-width:100% — nur Chrome-Bereiche neutralisieren.
   NICHT .cart-page / .checkout-page: width:auto überschreibt sonst jenva-cart/checkout Icon-Größen. */
.site-header svg,
.site-header img,
.site-footer svg,
.site-footer img,
.child-topbar svg,
.cart-drawer svg{
  display: inline-block;
  max-width: none;
  width: auto;
  height: auto;
}

.site-header .logo-mark svg{ width: 22px; height: 22px }
.header-icon-btn svg,
.header-phone svg{ width: 20px; height: 20px }
.footer-contact-item svg{ width: 16px; height: 16px }

/* Warenkorb/Kasse: SVGs in Flex-Zeilen — feste Größen aus Parent-CSS, kein 100%-Strecken */
.cart-page .cart-page-item-action svg,
.cart-page .qty-selector .qty-btn svg,
.cart-page .cart-trust-item svg,
.cart-page .cart-page-empty-icon svg,
.cart-page .empty-cart-icon svg,
.cart-page .product-card-quickadd-mini svg,
.checkout-page .checkout-summary-trust-item svg,
.checkout-page .checkout-stepper-arrow svg{
  display: inline-block;
  flex-shrink: 0;
  max-width: none;
  box-sizing: content-box;
}

/* Vertrauenszeile: Desktop in einer Zeile mit gleichmäßigem Abstand */
.cart-trust,
.checkout-summary-trust{
  flex-wrap: nowrap;
  justify-content: center;
  gap: clamp(0.75rem, 2vw, 1.25rem);
}

.cart-trust-item,
.checkout-summary-trust-item{
  white-space: nowrap;
  flex-shrink: 0;
}

@media (max-width: 480px){
  .cart-trust,
  .checkout-summary-trust{ flex-wrap: wrap }
}

body.woocommerce-cart #main,
body.woocommerce-checkout #main,
body.woocommerce-account #main{
  width: 100%;
  max-width: none;
}

body.woocommerce-cart .cart-page,
body.woocommerce-checkout .checkout-page{
  width: 100%;
}

/* Einheitliche Content-Breite (Startseite, Listing, PDP, …) */
html:root,
body.tbb-chrome{
  --container: 1400px;
}
body.tbb-chrome .container{
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
}
body.page-pdp #main,
body.page-pdp-konfigurator #main{
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}
/* Zahlungs-Badges im Footer: Icons statt Text-Pills, klickbar zur
   Zahlungsarten-Seite. .footer-payments ist jetzt ein <a> — Flex bleibt. */
a.footer-payments{
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: opacity .15s ease;
}
a.footer-payments:hover{ opacity: .8 }
a.footer-payments:focus-visible{
  outline: 2px solid var(--color-accent-on-dark, #7aa2ff);
  outline-offset: 4px;
}
.footer-payments .tbb-pay-icon{
  display: block;
  width: 42px; height: 28px;
  flex: none;
  border-radius: 4px;
}

/* Breadcrumb-Liste: base.css resettet nur ul, nicht ol. Die Archiv-Templates
   nutzen aber <ol> — ohne diesen Reset behalten sie Browser-Marker (1. 2. 3.)
   plus 40px Padding, die im Flex-Container über den Einträgen liegen. */
.child-breadcrumb-list{
  list-style: none;
  margin: 0;
  padding: 0;
}
.child-breadcrumb-list > li{ margin: 0; padding: 0 }
.child-breadcrumb-list > li::marker{ content: none }

/* Author-display schlägt das UA-Default von [hidden] — ohne diese Regel bliebe
   ein leerer Badge-Kreis stehen, sobald die Wunschliste geleert wird. */
.header-cart-count[hidden],
.header-wishlist-count[hidden]{ display: none }

/* Mobile-Drawer: Drill-Down-Slides (Root → Unterkategorie, mit Zurück) */
.mobile-nav-body--drill{
  position: relative;
  overflow: hidden;
  padding: 0;
}
.mobile-nav-view{
  position: absolute;
  inset: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-5);
  background: var(--color-surface);
  transform: translateX(100%);
  transition: transform .28s var(--ease);
}
.mobile-nav-view--root{ transform: translateX(0); }
.mobile-nav-view.is-active{ transform: translateX(0); }

/* Root-Kategorie: Zeile mit Pfeil nach rechts */
.mobile-nav-drill{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) 0;
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-text);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--color-border-soft);
  cursor: pointer;
  text-align: left;
}
.mobile-nav-drill-chevron{
  width: 20px; height: 20px;
  flex: 0 0 auto;
  color: var(--color-text-muted);
}

/* Unterebene: Zurück-Button */
.mobile-nav-back{
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3) 0;
  margin-bottom: var(--space-2);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-accent);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  text-align: left;
}
.mobile-nav-back-chevron{
  width: 20px; height: 20px;
  flex: 0 0 auto;
}
.mobile-nav-view .mobile-nav-link--all{
  font-weight: 600;
  color: var(--color-accent);
}

/* Mobile-Drill-Down: schmale Kategoriebilder unter den Unterkategorien */
.mobile-nav-link--cat{
  display: block;
  padding: var(--space-3) 0;
}
.mobile-nav-cat-label{ display: block; }
.mobile-nav-cat-img{
  display: block;
  width: 100%;
  height: 110px;             /* Banner-Höhe */
  object-fit: cover;
  border-radius: 8px;
  margin-top: 6px;
  background: var(--color-surface-2, #f3f4f6);
}

/* Mobile-Drawer: Abstand der Shop-Gruppe zur Kategorie-Liste */
.mobile-nav-group--shop{ margin-top: 20px; }