/* Tenant: 1 | Page: shop */
/* css/global/01_variables.css */
/* Der komplette Inhalt dieser Datei ist nach css/pages/test_session.css umgezogen -
   er war eigentlich nur für die interne Test-Session-Seite gedacht (siehe deren
   Datei-Kopf-Kommentar), stand aber fälschlich global und hat Textfarben (z.B. im
   Dark Mode) in alle Shop-Seiten durchsickern lassen. */

/* =============================================================================
    Globaler Shop-Rahmen
    ============================================================================= */

html, body {
   margin: 0;
   padding: 0;
   /* clip statt hidden: hidden auf html UND body macht body zum Scroll-Container, dann greift
      position: sticky am Header nicht mehr (er scrollte einfach mit weg). */
   overflow-x: clip;
}

/* Sticky-Footer: body als volle Viewport-Höhe, main wächst und schiebt den
   Footer immer an den unteren Rand, auch bei wenig Inhalt (z.B. leere Listen). */
body {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
}

body > main {
   flex: 1 0 auto;
}

:root {
   --lay-ink: #17324d;
   --lay-muted: #37505f;
   --lay-line: #dbe6ec;
   --lay-surface: #ffffff;
   --lay-accent: #2e8b78;
   --lay-accent-soft: #e7f4ef;

   /* Der Header ist bewusst IMMER dunkel, unabhängig vom Hell-/Dunkelmodus
      des restlichen Contents - eigene Token-Gruppe statt --lay-surface/--lay-ink. */
   --lay-header-bg: #17324d;
   --lay-header-ink: #f5f8fb;
   --lay-header-muted: #9db2c4;
   --lay-header-line: #2c4258;
   --lay-header-surface: #1f3b52;
   --lay-header-hover: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] {
   --lay-ink: #e7edf3;
   --lay-muted: #aebfcd;
   --lay-line: #2c3e50;
   --lay-surface: #17242f;
   --lay-accent: #46b393;
   --lay-accent-soft: #1e3a32;

   --lay-header-bg: #0f2130;
   --lay-header-ink: #e7edf3;
   --lay-header-muted: #8298ab;
   --lay-header-line: #22323f;
   --lay-header-surface: #17242f;
   --lay-header-hover: rgba(255, 255, 255, 0.06);
}

/* Sticky sitzt bewusst auf #lay_header (spannt die volle Body-Höhe), nicht auf
   .lay_main-header selbst: dessen eigener Wrapper ist exakt so hoch wie der Header,
   wodurch sticky sofort wieder "loslässt", sobald man über diese Mini-Höhe hinausscrollt. */
#lay_header {
   position: sticky;
   top: 0;
   z-index: 20;
}

/* Kompakter Header beim Scrollen (Klasse setzt js/global/03_layout.js) - bleibt oben stehen,
   nimmt aber nur noch etwa die halbe Höhe ein. */
.lay_main-header {
   transition: min-height 0.2s ease, padding 0.2s ease;
}
#lay_header.lay_header--compact .lay_main-header {
   min-height: 0;
   padding-block: 0.35rem;
}
#lay_header.lay_header--compact .lay_brand-logo {
   width: 36px;
   height: 36px;
}
#lay_header.lay_header--compact .lay_brand-copy small {
   display: none;
}
#lay_header.lay_header--compact .lay_page-title {
   font-size: 1.05rem;
}
#lay_header.lay_header--compact .lay_search-input {
   padding-block: 0.45rem;
}

.lay_main-header {
   display: flex;
   align-items: center;
   gap: 2rem;
   min-height: 86px;
   padding: 0.75rem clamp(1rem, 4vw, 4.5rem);
   background: var(--lay-header-bg);
   border-bottom: 1px solid var(--lay-header-line);
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
   font-family: Georgia, 'Times New Roman', serif;
}

.lay_logo {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
   flex: 0 0 auto;
}

.lay_brand-link {
   display: inline-flex;
   align-items: center;
   gap: 0.7rem;
   color: var(--lay-header-ink);
   text-decoration: none;
}

.lay_brand-logo {
   width: 52px;
   height: 52px;
   border-radius: 50%;
   object-fit: cover;
   box-shadow: 0 4px 12px rgba(23, 50, 77, 0.14);
}

.lay_brand-copy {
   display: grid;
   gap: 0.15rem;
}

.lay_brand-copy strong {
   font-size: 1.15rem;
   letter-spacing: 0.02em;
}

.lay_brand-copy small {
   color: var(--lay-header-muted);
   font-family: Arial, sans-serif;
   font-size: 0.68rem;
   letter-spacing: 0.08em;
   text-transform: uppercase;
}

/* ---- Produktsuche im Header (js/global/03_layout.js initHeaderSearch) ---- */
.lay_search {
   position: relative;
   flex: 1 1 auto;
   min-width: 0;
   max-width: 560px;
   margin: 0 auto;
}
.lay_search[hidden] {
   display: none;
}
.lay_search-icon {
   position: absolute;
   top: 50%;
   left: 0.85rem;
   color: var(--lay-header-muted);
   transform: translateY(-50%);
   pointer-events: none;
}
.lay_search-input {
   box-sizing: border-box;
   width: 100%;
   padding: 0.6rem 0.9rem 0.6rem 2.5rem;
   border: 1px solid transparent;
   border-radius: 8px;
   background: rgba(127, 140, 160, 0.12);
   color: var(--lay-header-ink);
   font: inherit;
   font-size: 0.92rem;
   transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.lay_search-input::placeholder {
   color: var(--lay-header-muted);
}
.lay_search-input:focus {
   border-color: var(--lay-accent);
   background: var(--lay-surface);
   color: var(--lay-ink);
   box-shadow: 0 0 0 3px rgba(37, 138, 232, 0.15);
   outline: none;
}
.lay_search-results {
   position: absolute;
   top: calc(100% + 6px);
   left: 0;
   right: 0;
   z-index: 30;
   overflow: hidden;
   border: 1px solid var(--lay-line);
   border-radius: 10px;
   background: var(--lay-surface);
   box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
}
.lay_search-results[hidden] {
   display: none;
}
.lay_search-item {
   display: flex;
   align-items: center;
   gap: 0.75rem;
   padding: 0.5rem 0.75rem;
   color: var(--lay-ink);
   text-decoration: none;
}
.lay_search-item:hover,
.lay_search-item--active {
   background: var(--lay-accent-soft);
}
.lay_search-item img {
   flex: 0 0 auto;
   width: 44px;
   height: 44px;
   border-radius: 6px;
   background: #ffffff;
   object-fit: contain;
}
.lay_search-item-title {
   flex: 1 1 auto;
   min-width: 0;
   overflow: hidden;
   font-size: 0.9rem;
   text-overflow: ellipsis;
   white-space: nowrap;
}
.lay_search-item-price {
   flex: 0 0 auto;
   font-size: 0.9rem;
   font-weight: 700;
}
.lay_search-all {
   display: block;
   padding: 0.65rem 0.75rem;
   border-top: 1px solid var(--lay-line);
   color: var(--lay-accent);
   font-size: 0.88rem;
   font-weight: 600;
   text-align: center;
   text-decoration: none;
}
.lay_search-all:hover {
   background: var(--lay-accent-soft);
}
.lay_search-empty {
   padding: 0.85rem;
   color: var(--lay-muted);
   font-size: 0.9rem;
   text-align: center;
}
/* Lupe zum Aufklappen der Suche - nur auf dem Handy (siehe @media unten) */
.lay_search-toggle {
   display: none;
   align-items: center;
   justify-content: center;
   padding: 0.45rem;
   border: none;
   border-radius: 8px;
   background: none;
   color: var(--lay-header-ink);
   cursor: pointer;
}

/* Seitentitel mittig im Header - auf allen Seiten außer Shop/Produkt (dort sitzt die Suche) */
.lay_page-title {
   flex: 1 1 auto;
   min-width: 0;
   overflow: hidden;
   color: var(--lay-header-ink);
   font-size: 1.2rem;
   font-weight: 600;
   letter-spacing: -0.01em;
   text-align: center;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.lay_nav-links {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 0.35rem;
}

.lay_nav-links[hidden] {
   display: none;
}

.lay_nav-links a {
   padding: 0.65rem 0.85rem;
   border-radius: 6px;
   color: var(--lay-header-ink);
   font-family: Arial, sans-serif;
   font-size: 0.78rem;
   font-weight: 700;
   letter-spacing: 0.04em;
   text-decoration: none;
   text-transform: uppercase;
   transition: background-color 0.18s ease, color 0.18s ease;
}

.lay_nav-links a:hover,
.lay_nav-links a:focus-visible,
.lay_nav-links .lay_active-nav {
   background: var(--lay-header-hover);
   color: var(--lay-accent);
   outline: none;
}

.lay_nav-links #nav_link_cart,
.lay_nav-links #nav_link_orders {
   display: inline-flex;
   align-items: center;
   gap: 0.4rem;
}

/* Die ID-Regel oben schlägt in der Spezifität das Browser-Standard-[hidden] (display:none) -
   ohne diese Regel bleiben Warenkorb/Bestellungen sichtbar, obwohl JS sie per .hidden = true
   ausblenden wollte (z.B. auf der Plattform-Domain für einen Gast). Gleiches Muster wie der
   .auth_form[hidden]-Fix in css/pages/login.css. */
.lay_nav-links #nav_link_cart[hidden],
.lay_nav-links #nav_link_orders[hidden] {
   display: none;
}

.lay_cart-badge {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 1.15rem;
   height: 1.15rem;
   padding: 0 0.3rem;
   border-radius: 999px;
   background: var(--lay-accent);
   color: #ffffff;
   font-size: 0.62rem;
   font-weight: 700;
}

.lay_cart-badge[hidden] {
   display: none;
}

.lay_login-link {
   padding: 0.65rem 0.85rem;
   border-radius: 6px;
   color: var(--lay-header-ink);
   font-family: Arial, sans-serif;
   font-size: 0.78rem;
   font-weight: 700;
   letter-spacing: 0.04em;
   text-decoration: none;
   text-transform: uppercase;
   transition: background-color 0.18s ease, color 0.18s ease;
}

.lay_login-link:hover,
.lay_login-link:focus-visible {
   background: var(--lay-header-hover);
   color: var(--lay-accent);
   outline: none;
}

.lay_login-link[hidden] {
   display: none;
}

.lay_account-menu {
   position: relative;
}

.lay_account-menu[hidden] {
   display: none;
}

.lay_account-menu-trigger {
   display: inline-flex;
   align-items: center;
   gap: 0.35rem;
   padding: 0.65rem 0.85rem;
   border: none;
   border-radius: 6px;
   background: none;
   color: var(--lay-header-ink);
   font-family: Arial, sans-serif;
   font-size: 0.78rem;
   font-weight: 700;
   letter-spacing: 0.04em;
   text-transform: uppercase;
   cursor: pointer;
   transition: background-color 0.18s ease;
}

.lay_account-menu-trigger:hover,
.lay_account-menu-trigger:focus-visible {
   background: var(--lay-header-hover);
   outline: none;
}

.lay_account-menu-caret {
   font-size: 0.65rem;
   opacity: 0.7;
}

.lay_account-menu-panel {
   position: absolute;
   top: calc(100% + 0.5rem);
   right: 0;
   z-index: 30;
   display: flex;
   flex-direction: column;
   gap: 0.6rem;
   min-width: 13rem;
   padding: 0.85rem;
   border: 1px solid var(--lay-header-line);
   border-radius: 10px;
   background: var(--lay-header-surface);
   box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
}

.lay_account-menu-panel[hidden] {
   display: none;
}

.lay_account-menu-panel .lay_language-control,
.lay_account-menu-panel .lay_theme-toggle,
.lay_account-menu-item {
   width: 100%;
}

.lay_account-menu-panel .lay_language-control select {
   flex: 1 1 auto;
}

.lay_account-menu-panel .lay_theme-toggle {
   justify-content: flex-start;
   gap: 0.5rem;
   border-radius: 6px;
   padding: 0.55rem 0.65rem;
}

.lay_account-menu-item {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   padding: 0.55rem 0.65rem;
   border: none;
   border-radius: 6px;
   background: none;
   color: var(--lay-header-ink);
   font-size: 0.92rem;
   font-weight: 600;
   text-decoration: none;
   text-align: left;
   cursor: pointer;
   transition: background-color 0.18s ease, color 0.18s ease;
}

.lay_account-menu-item:hover,
.lay_account-menu-item:focus-visible {
   background: var(--lay-header-hover);
   color: var(--lay-accent);
   outline: none;
}

.lay_logout-button[hidden] {
   display: none;
}

.lay_header-actions {
   display: flex;
   align-items: center;
   gap: 0.75rem;
   flex: 0 0 auto;
   padding-left: 1rem;
   border-left: 1px solid var(--lay-header-line);
}

.lay_footer-qrcode {
   flex: 0 0 auto;
   margin-left: auto;
   width: 72px;
   height: 72px;
   padding: 5px;
   background: #ffffff;
   border-radius: 8px;
}
.lay_footer-qrcode[hidden] {
   display: none;
}
/* Am Handy sinnlos (man ist ja schon auf dem Gerät, das scannen würde). */
@media (max-width: 760px) {
   .lay_footer-qrcode {
      display: none;
   }
}

.lay_theme-toggle[hidden] {
   display: none !important;
}
.lay_theme-toggle {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 2.4rem;
   height: 2.4rem;
   padding: 0;
   border: 1px solid var(--lay-header-line);
   border-radius: 50%;
   background: var(--lay-header-surface);
   font-size: 1.05rem;
   line-height: 1;
   cursor: pointer;
   transition: background-color 0.18s ease, border-color 0.18s ease;
}

.lay_theme-toggle:hover,
.lay_theme-toggle:focus-visible {
   border-color: var(--lay-accent);
   outline: none;
}

.lay_language-control {
   display: flex;
   align-items: center;
   gap: 0.45rem;
   color: var(--lay-header-muted);
   font-family: Arial, sans-serif;
   font-size: 0.85rem;
   font-weight: 600;
}
/* Nur eine Sprache im Shop (Einstellungen -> Sprachen): Auswahl ausgeblendet (03_layout.js) */
.lay_language-control[hidden] {
   display: none;
}

.lay_language-control select {
   min-width: 6.5rem;
   padding: 0.55rem 1.8rem 0.55rem 0.65rem;
   border: 1px solid var(--lay-header-line);
   border-radius: 5px;
   background: var(--lay-header-surface);
   color: var(--lay-header-ink);
   font: inherit;
   letter-spacing: normal;
   text-transform: none;
}

.lay_language-control select:focus-visible {
   border-color: var(--lay-accent);
   outline: 2px solid rgba(46, 139, 120, 0.2);
   outline-offset: 1px;
}

.lay_main-footer {
   margin-top: 3rem;
   padding: 1.75rem clamp(1rem, 4vw, 4.5rem) 1.2rem;
   background: #17324d;
   color: #ffffff;
   font-family: Arial, sans-serif;
}

.lay_footer-main {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 1.5rem 3rem;
}

.lay_footer-note {
   flex: 1 1 220px;
   max-width: 380px;
   margin: 0;
   color: #b8cbd5;
   font-size: 0.82rem;
   line-height: 1.6;
}

.lay_footer-legal {
   display: flex;
   flex: 0 0 auto;
   flex-wrap: wrap;
   gap: 0.5rem 1.5rem;
}

.lay_footer-legal a {
   width: fit-content;
   color: #dce9ed;
   font-size: 0.8rem;
   text-decoration: none;
   transition: color 0.18s ease, transform 0.18s ease;
}

.lay_footer-legal a:hover,
.lay_footer-legal a:focus-visible {
   color: #8bd1bb;
   transform: translateX(3px);
   outline: none;
}

/* § 19-Hinweis im dunklen Footer gut lesbar (Grundfarbe aus 03_components.css ist für helle Flächen) */
.lay_main-footer .lay_footer-tax {
   color: #b8cbd5;
}

.lay_footer-bottom {
   display: flex;
   justify-content: space-between;
   gap: 1rem;
   margin: 1.5rem 0 0;
   padding-top: 1rem;
   border-top: 1px solid rgba(220, 233, 237, 0.18);
   color: #91aab8;
   font-size: 0.7rem;
}

@media (max-width: 760px) {
   /* Handy: Logo, Bestellungen/Warenkorb, Lupe und Login in EINER Zeile - Suche und Seitentitel
      klappen bei Bedarf als eigene volle Zeile darunter auf. */
   .lay_main-header {
      flex-wrap: wrap;
      gap: 0.5rem 0.6rem;
      min-height: 0;
      padding-block: 0.5rem;
   }

   .lay_account-menu-panel {
      max-width: calc(100vw - 1.5rem);
   }

   /* Basis 0: das Logo gibt zuerst Platz ab (Name wird mit … gekürzt), bevor die Zeile umbricht */
   .lay_logo {
      flex: 1 1 0;
      min-width: 0;
   }

   .lay_brand-link,
   .lay_brand-copy {
      min-width: 0;
   }

   .lay_brand-logo {
      width: 40px;
      height: 40px;
   }

   .lay_brand-copy strong,
   .lay_brand-copy small {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
   }

   .lay_page-title {
      flex: 1 1 100%;
      order: 4;
      font-size: 1.05rem;
   }

   /* Handy: Suche nur über die Lupe, dann als eigene volle Zeile unter Logo/Menü */
   .lay_search {
      display: none;
      order: 4;
      flex: 1 1 100%;
      max-width: none;
   }
   #lay_header.lay_header--search-open .lay_search:not([hidden]) {
      display: block;
   }
   .lay_search-toggle:not([hidden]) {
      display: inline-flex;
   }

   .lay_nav-links {
      flex: 0 0 auto;
      gap: 0;
      margin-left: 0;
   }

   .lay_nav-links a {
      padding: 0.5rem;
   }

   .lay_header-actions {
      gap: 0.25rem;
      padding-left: 0;
      border-left: none;
   }


   .lay_language-control span {
      display: none;
   }

   /* Nur optisch ausblenden (Symbol reicht), für Screenreader bleibt der Linktext lesbar */
   #nav_link_orders span[data-i18n],
   #nav_link_cart span[data-i18n] {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
   }

   /* Schlichte Symbole in Schriftfarbe statt Emojis (Maske, damit sie Hell/Dunkel und Farbschema folgen) */
   #nav_link_orders::before,
   #nav_link_cart::before {
      content: "";
      display: inline-block;
      width: 22px;
      height: 22px;
      background: currentColor;
      -webkit-mask: var(--lay-nav-icon) center / contain no-repeat;
      mask: var(--lay-nav-icon) center / contain no-repeat;
   }

   #nav_link_orders {
      --lay-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 2H4c-1 0-2 .9-2 2v3c0 .7.4 1.3 1 1.7V20c0 1.1 1.1 2 2 2h14c.9 0 2-.9 2-2V8.7c.6-.4 1-1 1-1.7V4c0-1.1-1-2-2-2Zm-5 12H9v-2h6v2Zm5-7H4V4h16v3Z'/%3E%3C/svg%3E");
   }

   #nav_link_cart {
      --lay-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 18c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Zm10 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2ZM7.2 14.8l.9-1.8h7.4c.8 0 1.4-.4 1.8-1l3.9-7L19.4 4l-3.8 7H8.5L4.3 2H1v2h2l3.6 7.6-1.4 2.4c-.1.3-.2.6-.2 1 0 1.1.9 2 2 2h12v-2H7.4c-.1 0-.2-.1-.2-.2Z'/%3E%3C/svg%3E");
   }

   /* Footer am Handy: Spruch mittig, Rechtstexte als Zweierraster, Schluss kompakt und mittig */
   .lay_main-footer {
      margin-top: 2rem;
      padding: 1.25rem 1rem 1rem;
   }

   .lay_footer-main {
      flex-direction: column;
      align-items: stretch;
      gap: 1rem;
   }

   .lay_footer-note {
      flex-basis: auto;
      max-width: none;
      text-align: center;
   }

   .lay_footer-legal {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.65rem 1rem;
   }

   .lay_footer-legal a {
      width: auto;
      font-size: 0.85rem;
      line-height: 1.3;
   }

   .lay_footer-bottom {
      flex-wrap: wrap;
      justify-content: center;
      gap: 0.2rem 0.5rem;
      margin-top: 1rem;
      text-align: center;
   }

   .lay_footer-bottom > span + span::before {
      content: "· ";
   }

   .lay_main-footer .lay_footer-tax {
      text-align: center;
   }
}

@media (max-width: 760px) {
   /* Handy kompakt: nur eine schmale Leiste mit Logo, Menü und Warenkorb. */
   #lay_header.lay_header--compact .lay_brand-copy,
   #lay_header.lay_header--compact .lay_page-title {
      display: none;
   }
   #lay_header.lay_header--compact .lay_logo {
      flex: 0 0 auto;
   }
   #lay_header.lay_header--compact .lay_nav-links {
      order: 0;
      width: auto;
   }
}

@media (max-width: 400px) {
   .lay_brand-logo {
      width: 40px;
      height: 40px;
   }

   .lay_brand-copy small {
      display: none;
   }
}

/* =============================================================================
   Alles, was eine visuelle Einheit bildet – Produkt-Cards, Info-Container, Modals und Popups.
   ============================================================================= */



/* ---- Hinweisleiste (Shop-Design, js/global/03_layout.js renderBanner) ----
   Schmal, Farben nach Farbschema: Klar = hellgrau/dunkle Schrift, Kräftiger Kopf = dunkler
   Streifen mit orangem Text, Dunkelmodus = Kopf-Fläche. Fest = Botschaften zentriert nebeneinander,
   Laufband = Spur läuft endlos nach links (zweite Kopie, Verschiebung um die halbe Spurbreite). */
:root {
  --lay-banner-bg: #eef1f5;
  --lay-banner-ink: #1e293b;
  --lay-banner-line: #dde3ea;
  --lay-banner-sep: #8a97a6;
}
:root[data-scheme="bold"]:not([data-theme="dark"]) {
  /* eine Stufe heller als der Kategorie-Streifen (#233244), damit sich die Leiste abhebt */
  --lay-banner-bg: #33485f;
  --lay-banner-ink: #f5a623;
  --lay-banner-line: #17212d;
  --lay-banner-sep: #8395a8;
}
:root[data-theme="dark"] {
  --lay-banner-bg: var(--lay-header-surface);
  --lay-banner-ink: var(--lay-header-ink);
  --lay-banner-line: var(--lay-header-line);
  --lay-banner-sep: var(--lay-header-muted);
}
.lay_demo-banner {
  display: flex;
  justify-content: center;
  overflow: hidden;
  padding: 0.35rem clamp(1rem, 4vw, 4.5rem);
  background: var(--lay-banner-bg);
  color: var(--lay-banner-ink);
  border-bottom: 1px solid var(--lay-banner-line);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.4;
}
/* Eigene [hidden]-Regel nötig, sonst gewinnt die obige .lay_demo-banner-Regel gegen das
   Browser-Standard-[hidden] (gleiche Spezifität, Autoren-Regel schlägt User-Agent-Regel) -
   gleicher Bug wie schon bei #nav_link_cart/#nav_link_orders. */
.lay_demo-banner[hidden] {
  display: none;
}
.lay_banner-track {
  display: flex;
}
.lay_banner-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.25rem 0.9rem;
  text-align: center;
}
.lay_banner-sep {
  color: var(--lay-banner-sep);
}
/* Laufband */
.lay_demo-banner--marquee {
  justify-content: flex-start;
  padding-inline: 0;
}
.lay_demo-banner--marquee .lay_banner-track {
  width: max-content;
  animation: lay-banner-scroll var(--banner-duration, 30s) linear infinite;
}
.lay_demo-banner--marquee .lay_banner-group {
  flex-wrap: nowrap;
  padding-right: 0.9rem;
  white-space: nowrap;
}
/* Abstand + Trennpunkt auch zwischen Ende und nächstem Durchlauf */
.lay_demo-banner--marquee .lay_banner-group::after {
  content: "•";
  color: var(--lay-banner-sep);
}
.lay_demo-banner--marquee:hover .lay_banner-track {
  animation-play-state: paused;
}
/* Je Durchlauf um genau eine Gruppe (--banner-shift, setzt 03_layout.js) - nahtlose Schleife */
@keyframes lay-banner-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-1 * var(--banner-shift, 50%))); }
}
@media (prefers-reduced-motion: reduce) {
  .lay_demo-banner--marquee {
    justify-content: center;
    padding-inline: clamp(1rem, 4vw, 4.5rem);
  }
  .lay_demo-banner--marquee .lay_banner-track {
    width: auto;
    animation: none;
  }
  .lay_demo-banner--marquee .lay_banner-group {
    flex-wrap: wrap;
    padding-right: 0;
    white-space: normal;
  }
  .lay_demo-banner--marquee .lay_banner-group::after,
  .lay_banner-group--copy {
    display: none;
  }
}
/* Unter der Kategorie-Leiste, wenn diese im Inhalt sitzt: als Kasten in der Inhaltsbreite. Ist die
   Leiste ein Streifen unter dem Kopf, steht die Hinweisleiste direkt darunter über die volle Breite. */
.lay_demo-banner--inline {
  margin: 0 0 1rem;
  border-radius: 10px;
}

/* ---- Hinweis-Banner für Gäste mit unbestätigter Bestellung (js/global/03_layout.js) ---- */
.lay_notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1.25rem;
  padding: 0.75rem clamp(1rem, 4vw, 4.5rem);
  border-bottom: 1px solid #f0d78a;
  background: #fff3cd;
  color: #5c4400;
  font-family: Arial, sans-serif;
  font-size: 0.85rem;
}
:root[data-theme="dark"] .lay_notice {
  border-bottom-color: #6b5410;
  background: #3a2f0b;
  color: #f3e2a9;
}
.lay_notice-message {
  display: grid;
  gap: 0.2rem;
  flex: 1 1 320px;
}
.lay_notice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.lay_notice-button {
  padding: 0.5rem 0.85rem;
  border: 1px solid currentColor;
  border-radius: 5px;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
}
.lay_notice-button:hover:not(:disabled),
.lay_notice-button:focus-visible {
  background: rgba(0, 0, 0, 0.08);
  outline: none;
}
.lay_notice-button:disabled {
  opacity: 0.6;
  cursor: wait;
}
.lay_notice-status {
  flex-basis: 100%;
  font-weight: 700;
}
.lay_notice-status[hidden] {
  display: none;
}

/* ---- Bankverbindung (Checkout-Erfolg, Bestätigungsseite) ---- */
.lay_bank {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 1rem;
  margin: 0 0 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--lay-line, #dbe6ec);
  border-radius: 10px;
  text-align: left;
  font-family: Arial, sans-serif;
  font-size: 0.9rem;
}
.lay_bank[hidden] {
  display: none;
}
.lay_bank dt {
  color: var(--lay-muted, #37505f);
  font-weight: 700;
}
.lay_bank dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* Eigene Rückfrage-/Hinweis-Dialoge (js/global/08_dialog.js window.appConfirm/appAlert):
   mittig über abgedunkeltem Hintergrund, Abbrechen links, Bestätigen rechts. */
.lay_dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(15, 23, 42, 0.5);
}
.lay_dialog {
  box-sizing: border-box;
  width: min(440px, 100%);
  padding: 1.4rem 1.5rem 1.2rem;
  border: 1px solid var(--lay-line, #e2e8f0);
  border-radius: 14px;
  background: var(--lay-surface, #ffffff);
  color: var(--lay-ink, #1e293b);
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
}
.lay_dialog-title {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  font-weight: 700;
}
.lay_dialog-message {
  margin: 0;
  white-space: pre-line; /* Zeilenumbrüche in Aufzählungen (z.B. gesperrte Artikel) */
  color: var(--lay-muted, #55657a);
  font-size: 0.95rem;
  line-height: 1.5;
}
.lay_dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1.3rem;
}
.lay_dialog-button {
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--lay-accent, #1668b8);
  border-radius: 8px;
  background: var(--lay-accent, #1668b8);
  color: #ffffff;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
}
.lay_dialog-button:hover,
.lay_dialog-button:focus-visible {
  filter: brightness(0.92);
}
.lay_dialog-button:focus-visible {
  outline: 2px solid var(--lay-accent, #1668b8);
  outline-offset: 2px;
}
.lay_dialog-button--secondary {
  border-color: var(--lay-line, #e2e8f0);
  background: transparent;
  color: var(--lay-ink, #1e293b);
}
.lay_dialog-button--danger {
  border-color: #c0392b;
  background: #c0392b;
}

/* "Endpreis zzgl. Versandkosten" unter Preisen (js/global/01_core.js createPriceNote) */
.lay_price-note {
  display: block;
  margin-top: 0.2rem;
  color: var(--lay-muted, #55657a);
  font-size: 0.78rem;
  font-weight: 400;
}
.lay_price-note a {
  color: inherit;
  text-decoration: underline;
}
.lay_price-note a:hover {
  color: var(--lay-accent, #1668b8);
}
/* Kachelansicht: kein Warenkorb-Knopf, daher kein Preis-Hinweis (nur Listenansicht/Produktseite) */
#product-list:not(.shop_view--list) .lay_price-note {
  display: none;
}
/* § 19 UStG (Kleinunternehmer) unter Summen und im Footer */
.lay_tax-note,
.lay_footer-tax {
  margin: 0.6rem 0 0;
  color: var(--lay-muted, #55657a);
  font-size: 0.78rem;
}

/* "Kundenkonto anlegen?" nach einer Gast-Bestellung (js/global/06_account_offer.js) */
.lay_account-offer {
  margin: 1.5rem 0 0;
  padding: 1rem 1.25rem;
  border: 1px solid var(--lay-line, #dbe6ec);
  border-radius: 10px;
  text-align: left;
}
.lay_account-offer[hidden],
.lay_account-offer [hidden] {
  display: none !important;
}
.lay_account-offer-text {
  margin: 0 0 0.75rem;
}
.lay_account-offer-result {
  margin: 0.75rem 0 0;
  font-weight: 600;
}

/* =============================================================================
    Vorgefertigte Seiten-Hintergründe (Admin-Tab Shop-Design, "Hintergrund" -> Preset).
    Für jeden Mandanten gleich verfügbar, ausgewählt über body[data-bg-preset="..."]
    (von js/global/03_layout.js gesetzt). Attribut-Selektoren sind spezifischer als ein
    einfaches body { ... }, überschreiben also sicher den Standard-Hintergrund des Themes
    (Marken-Verlauf in css/global/99_theme.css), sobald ein Preset aktiv gewählt ist.
    ============================================================================= */

body[data-bg-preset="soft_gradient"] {
   background-image: linear-gradient(160deg, var(--lay-accent-soft) 0%, var(--lay-surface) 65%);
   background-attachment: fixed;
}

body[data-bg-preset="dotted"] {
   background-color: var(--lay-surface);
   background-image: radial-gradient(var(--lay-line) 1px, transparent 1px);
   background-size: 22px 22px;
}

/* =============================================================================
   Alle interaktiven Schaltflächen, Klick-Effekte und die farbigen Status-Badges.
   ============================================================================= */

/* =============================================================================
    Rechts-/Infoseiten (Impressum, AGB, Widerruf, Datenschutz, Über uns).
    Angelehnt an products/_main/public/imprint.html, aber mit den Shop-eigenen
    --lay-*-Variablen statt fixer Farben, damit Dark Mode funktioniert.
    ============================================================================= */

/* Einziges zentriertes Element (max-width + margin:auto) - Link und Box liegen als normale,
   nicht selbst zentrierte Kinder darin und fluchten dadurch garantiert an derselben linken
   Kante, genau wie auf der Produktseite der Zurück-Link mit der Bildergalerie fluchtet. */
.legal_page-wrapper {
   max-width: 800px;
   margin: 2rem auto;
}

.legal_back-link {
   display: block;
   margin: 0 0 1rem;
   color: var(--lay-accent, #2e8b78);
   font-family: Arial, sans-serif;
   font-size: 0.8rem;
   font-weight: 700;
   text-decoration: none;
   text-transform: uppercase;
}
.legal_back-link:hover,
.legal_back-link:focus-visible {
   text-decoration: underline;
}

.legal_content {
   padding: 2rem clamp(1rem, 4vw, 2.5rem);
   background: var(--lay-surface, #ffffff);
   border: 1px solid var(--lay-line, #dbe6ec);
   border-radius: 8px;
}

.legal_content h1 {
   font-size: 1.75rem;
   margin: 0 0 1.5rem;
   padding-bottom: 0.5rem;
   border-bottom: 2px solid var(--lay-line, #dbe6ec);
   color: var(--lay-ink, #17324d);
}

.legal_body h2 {
   font-size: 1.1rem;
   margin: 1.5rem 0 0.5rem;
   color: var(--lay-ink, #17324d);
}

.legal_body h3 {
   font-size: 1rem;
   margin: 1.25rem 0 0.4rem;
   color: var(--lay-ink, #17324d);
}

.legal_body p {
   font-size: 0.95rem;
   line-height: 1.6;
   color: var(--lay-muted, #37505f);
   margin: 0 0 0.75rem;
}

.legal_body ul,
.legal_body ol {
   margin: 0 0 0.75rem 1.25rem;
   padding: 0;
   color: var(--lay-muted, #37505f);
   font-size: 0.95rem;
   line-height: 1.6;
}

.legal_body a {
   color: var(--lay-accent, #2e8b78);
}

.legal_unavailable {
   color: var(--lay-muted, #37505f);
   font-style: italic;
}


/* ---- GiroCode neben der Bankverbindung (js/global/06_bank_details.js renderGirocode) ---- */
.lay_bank-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 1.25rem;
  margin: 0 0 1rem;
}
.lay_bank-box > .lay_bank {
  flex: 1 1 18rem;
  margin: 0;
}
.lay_girocode {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  margin: 0.5rem 0;
  max-width: 11rem;
}
.lay_girocode img {
  display: block;
  width: 160px;
  height: 160px;
  border: 1px solid var(--lay-line, #dbe6ec);
  border-radius: 8px;
  background: #ffffff;
}
.lay_girocode figcaption {
  color: var(--lay-muted, #37505f);
  font-size: 0.8rem;
  text-align: center;
}

/* =============================================================================
   STANDARD-THEME FÜR ALLE SHOPS: modern, hell (2026-09-29, zuerst für Shop 1 entwickelt)
   Läuft nach den übrigen Global-Dateien (alphabetisch), überschreibt also ältere Standard-
   Regeln. Bringt den Standard-Hintergrund (Marken-Verlauf wie appandor.de). Ein Shop kann es mit
   einer gleichnamigen Datei in seinem eigenen Ordner (css/global/{id}/99_theme.css) ersetzen.
   Vom Betreiber im Shop-Design gewählte Hintergründe (body[data-bg-preset] u. a.) haben Vorrang.
   ============================================================================= */

:root {
   --lay-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   --theme-brand-blue: #258ae8;
   --theme-brand-green: #73b32a;
}

/* Heller Modus: ruhiger heller Grund, heller schlanker Header, Markenblau als Akzent. */
:root:not([data-theme="dark"]) {
   --lay-ink: #1e293b;
   --lay-muted: #55657a;
   --lay-line: #e2e8f0;
   --lay-surface: #ffffff;
   /* Kontrast >= 4.5:1 auch für kleine Schrift und weiße Schrift auf Buttons (WCAG AA) */
   --lay-accent: #1668b8;
   --lay-accent-soft: #e8f2fd;

   --lay-header-bg: rgba(255, 255, 255, 0.92);
   --lay-header-ink: #1e293b;
   --lay-header-muted: #55657a;
   --lay-header-line: #e2e8f0;
   --lay-header-surface: #ffffff;
   --lay-header-hover: rgba(15, 23, 42, 0.05);
}

/* Systemschrift statt Georgia/Arial-Mix. !important nur hier: viele Seiten-CSS-Dateien setzen
   ihre Schrift je Element selbst und laden NACH den Global-Dateien - ohne !important müsste
   jede davon einzeln überschrieben werden. Keine Web-Fonts von Google (Datenschutz). */
body,
body *:not(code):not(pre) {
   font-family: var(--lay-font) !important;
}

/* Standard-Hintergrund aller Shops: Marken-Verlauf wie auf appandor.de (blau oben links, grün
   unten rechts). Gilt, solange der Betreiber im Shop-Design keinen eigenen Hintergrund wählt -
   dessen Regeln (body[data-bg-preset], Inline-Farbe/-Bild) sind spezifischer und gewinnen.
   Im Dunkelmodus gedämpft, auf dunkler Basisfarbe. */
:root {
   --theme-bg-blue: rgba(37, 138, 232, 0.80);
   --theme-bg-green: rgba(115, 179, 42, 0.80);
}
:root[data-theme="dark"] {
   --theme-bg-blue: rgba(37, 138, 232, 0.35);
   --theme-bg-green: rgba(115, 179, 42, 0.35);
}
body {
   color: var(--lay-ink);
   background-color: var(--lay-surface, #ffffff);
   background-image:
      radial-gradient(circle at -20% -20%, var(--theme-bg-blue) 0%, transparent 70%),
      radial-gradient(circle at 80% 80%, var(--theme-bg-green) 0%, transparent 70%);
   background-attachment: fixed;
   background-size: 100% 100%;
   animation: none;
}

/* ---- Header: hell, schlank, dezenter Schatten ---- */
.lay_main-header {
   min-height: 72px;
   border-bottom: 1px solid var(--lay-header-line);
   box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
   backdrop-filter: saturate(180%) blur(10px);
   -webkit-backdrop-filter: saturate(180%) blur(10px);
}

.lay_brand-logo {
   width: 44px;
   height: 44px;
   box-shadow: none;
}

.lay_brand-copy strong {
   font-size: 1.05rem;
   font-weight: 700;
   letter-spacing: -0.01em;
}

.lay_brand-copy small {
   letter-spacing: 0.04em;
}

.lay_nav-links a,
.lay_login-link,
.lay_account-menu-trigger {
   border-radius: 999px;
   font-size: 0.88rem;
   font-weight: 600;
   letter-spacing: 0;
   text-transform: none;
}

/* ---- Überschriften klarer statt großer Serifen-Titel ---- */
html body h1,
html body h2,
html body h3 {
   font-weight: 700;
   letter-spacing: -0.015em;
   color: var(--lay-ink);
}

/* ---- Shop: Produktkarten runder, luftiger. Beim Überfahren bleibt die Karte ruhig stehen,
   nur das Produktbild wird innerhalb seines Rahmens leicht größer (siehe unten). ---- */
html body .shop_product {
   border: 1px solid var(--lay-line);
   border-radius: 16px;
   background: var(--lay-surface);
   box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 20px rgba(15, 23, 42, 0.05);
}

html body .shop_product h2 {
   font-size: 1rem;
   font-weight: 600;
   line-height: 1.35;
}

html body .shop_product-title-link:focus-visible h2 {
   color: var(--lay-accent);
}

html body .shop_product-category {
   color: var(--lay-accent);
   letter-spacing: 0.06em;
}

html body .shop_product-price {
   color: var(--lay-ink);
}

html body .shop_product-cta,
html body .shop_product-cart-link,
html body .product_cta {
   border-radius: 8px;
}

/* Inhalt nicht über die volle Bildschirmbreite ziehen - lange Textzeilen wirken unruhig. */
html body .shop_content-wrapper {
   box-sizing: border-box;
   width: 100%;
   max-width: 1240px;
   margin: 0 auto;
}
/* Inhaltsbreite (Shop-Design, <html data-content-width>): breit 1600 px, voll = ganze Fensterbreite
   mit denselben Seitenrändern wie Kopf und Kategorie-Streifen. */
:root[data-content-width="wide"] body .shop_content-wrapper {
   max-width: 1600px;
}
:root[data-content-width="full"] body .shop_content-wrapper {
   max-width: none;
   padding-inline: clamp(1rem, 4vw, 4.5rem);
}

/* Produktbilder vollständig zeigen (Verpackungen nicht anschneiden), auf weißem Grund. */
html body .shop_product-image-link {
   background: #ffffff;
   overflow: hidden;
}
html body .shop_product-image {
   object-fit: contain;
   padding: 8px;
   box-sizing: border-box;
   transition: transform 0.35s ease;
}
html body .shop_product:hover .shop_product-image {
   transform: scale(1.04);
}
@media (prefers-reduced-motion: reduce) {
   html body .shop_product-image {
      transition: none;
   }
}

/* Liste: kompaktere Zeilen mit kleinerem, quadratischem Bild */
html body .shop_view--list .shop_product-image-link {
   flex: 0 0 160px;
   align-self: center;
}
html body .shop_view--list .shop_product-image {
   height: 160px;
   aspect-ratio: 1 / 1;
}

html body .shop_controls-row,
html body .shop_nav-bar {
   border: 1px solid var(--lay-line);
   border-radius: 14px;
   box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

html body .shop_category-link--active {
   border-bottom-color: var(--lay-accent);
   color: var(--lay-accent);
}

/* ---- Produktseite ---- */
html body #product-title {
   font-weight: 700;
   letter-spacing: -0.02em;
}

/* ---- Kachelansicht: kompakte, gleich hohe Karten ---- */
/* Kategorie steht schon in der Leiste darüber - in der Kachel nur doppelt (Liste behält sie). */
html body #product-list:not(.shop_view--list) .shop_product-category {
   display: none;
}

/* Titel max. 2 Zeilen, damit alle Karten einer Reihe gleich aufgebaut sind. */
html body #product-list:not(.shop_view--list) .shop_product h2 {
   display: -webkit-box;
   -webkit-line-clamp: 2;
   line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   margin-top: 0;
}

/* Weniger Leerraum um die (meist querformatigen) Verpackungsbilder. */
html body #product-list:not(.shop_view--list) .shop_product-image {
   aspect-ratio: 4 / 3;
   padding: 6px;
}

/* Kachelreihe so breit wie die Kategorie-Leiste und bündig darunter. */
html body .shop_product-list-wrapper {
   box-sizing: border-box;
   width: 100%;
   padding-inline: 0;
}
html body #product-list:not(.shop_view--list) .shop_product {
   min-width: 0;
   max-width: none;
}

/* ---- Kachelansicht straffen: niedrigere Karten ---- */
/* Bildbereich flacher (3:2 statt 4:3) */
html body #product-list:not(.shop_view--list) .shop_product-image {
   aspect-ratio: 3 / 2;
   padding: 4px;
}
html body #product-list:not(.shop_view--list) .shop_product-content {
   padding: 0.75rem 1rem 0.9rem;
}
/* Bild in einer Flucht mit dem Text (gleicher Seitenabstand 1rem) und mit gerundeten Ecken
   passend zur Karte - wirkt aus einem Guss statt hineingeklebt, weicher Übergang bei Fotos mit
   eigenem Hintergrund. isolation: damit die Rundung auch beim Hover-Zoom sauber abschneidet. */
html body #product-list:not(.shop_view--list) .shop_product-image-link {
   margin: 1rem 1rem 0;
   border-radius: 10px;
   isolation: isolate;
}
html body #product-list:not(.shop_view--list) .shop_product-image {
   padding: 0;
}
/* Runde Ecken am Bild selbst (shop.js image_corners: 'rounded'): Das Bild ist nur so groß wie
   das Foto und liegt mittig im Rahmen - so sind auch Hochformate rund. Der Rahmen behält sein
   festes 3:2-Format, damit beim Laden nichts springt. */
html body #product-list.shop_images--rounded:not(.shop_view--list) .shop_product-image-link {
   aspect-ratio: 3 / 2;
}
html body #product-list.shop_images--rounded:not(.shop_view--list) .shop_product-image {
   position: absolute;
   inset: 0;
   width: auto;
   height: auto;
   max-width: 100%;
   max-height: 100%;
   margin: auto;
   aspect-ratio: auto;
   border-radius: 8px;
}
html body #product-list:not(.shop_view--list) .shop_product h2 {
   margin: 0 0 0.4rem;
   font-size: 0.98rem;
}
html body #product-list:not(.shop_view--list) .shop_product-badges {
   margin-bottom: 0.2rem;
}
/* Preis links, Lagerhinweis rechts in EINER Zeile statt untereinander */
html body #product-list:not(.shop_view--list) .shop_product-footer {
   flex-direction: row;
   /* Lagerhinweis auf derselben Grundlinie wie der (größere) Preis, nicht mittig daneben - an der LETZTEN Zeile,
      sonst rutscht der Preis bei zweizeiligem Hinweis ("Nur noch 3 auf / Lager") über die Nachbarpreise */
   align-items: baseline;
   align-items: last baseline;
   justify-content: space-between;
   gap: 0.5rem;
   padding-top: 0.4rem;
}
html body #product-list:not(.shop_view--list) .shop_product-footer-bottom {
   align-items: flex-end;
}
html body #product-list:not(.shop_view--list) .shop_product-status {
   font-size: 0.72rem;
   text-align: right;
}

/* =============================================================================
   KUNDENSEITEN EINHEITLICH (Produkt, Warenkorb, Kasse, Bestellungen, Konto, Bestätigung)
   ============================================================================= */

/* 1) Eine Inhaltsbreite wie im Shop */
html body .product_content-wrapper,
html body .cart_content-wrapper,
html body .checkout_content-wrapper,
html body .orders_content-wrapper,
html body .account_content-wrapper,
html body .orderconfirm_content-wrapper {
   box-sizing: border-box;
   width: 100%;
   max-width: 1240px;
}

/* 2) Inhalte in weißen Karten statt frei auf dem Hintergrund */
html body #cart-items-wrapper,
html body .cart_empty-state,
html body .orders_empty-state,
html body .checkout_form-column,
html body .account_section,
html body .orderconfirm_card {
   box-sizing: border-box;
   padding: 1.5rem;
   border: 1px solid var(--lay-line);
   border-radius: 14px;
   background: var(--lay-surface);
   box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 20px rgba(15, 23, 42, 0.05);
}

/* Mein Konto: Passwort und Adresse als zwei Karten nebeneinander statt schmaler Spalte */
html body .account_content-wrapper {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
   align-items: start;
   gap: 1.5rem;
}
html body .account_content-wrapper > :not(.account_section) {
   grid-column: 1 / -1;
}
html body .account_section {
   margin: 0;
}

/* 3) Ein Button-Stil für alle Hauptaktionen: Markenblau, weiße Schrift, normale Schreibweise */
html body .product_cta,
html body .shop_product-cta,
html body .cart_checkout-button,
html body #checkout-submit,
html body .account_form button[type="submit"],
html body .cart_continue-link,
html body .orders_link-button,
html body .checkout_link-button,
html body .orderconfirm_link-button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 0.75rem 1.4rem;
   border: none;
   border-radius: 8px;
   background: var(--lay-accent);
   color: #ffffff;
   font-size: 0.95rem;
   font-weight: 600;
   letter-spacing: 0;
   text-decoration: none;
   text-transform: none;
   cursor: pointer;
   transition: filter 0.15s ease;
}
/* Ausgeblendete Hauptaktion (z. B. Bestellbutton bei PayPal) bleibt ausgeblendet - display oben würde
   [hidden] sonst überstimmen. */
html body #checkout-submit[hidden] {
   display: none !important;
}
html body .product_cta:hover,
html body .shop_product-cta:hover,
html body .cart_checkout-button:hover,
html body #checkout-submit:hover,
html body .account_form button[type="submit"]:hover,
html body .cart_continue-link:hover,
html body .orders_link-button:hover,
html body .checkout_link-button:hover,
html body .orderconfirm_link-button:hover {
   filter: brightness(0.9);
}
/* Die ausgeblendete Kachel-Variante des Shop-Buttons bleibt ausgeblendet */
html body #product-list:not(.shop_view--list) .shop_product-cta {
   display: none;
}
/* Listenansicht: Warenkorb-Knopf dezent - umrandet statt vollflächig, kleiner, mit Warenkorb-
   Symbol (per CSS-Maske, damit es beim Textwechsel "Hinzugefügt" nicht verloren geht). Füllt
   sich erst beim Überfahren. Produktbild, Titel und Preis bleiben die Blickfänger. */
html body #product-list.shop_view--list .shop_product-cta,
html body #product-list.shop_view--list .shop_product-cart-link {
   display: inline-flex;
   align-items: center;
   gap: 0.45rem;
   padding: 0.45rem 0.9rem;
   border: 1.5px solid var(--lay-accent);
   border-radius: 8px;
   background: #ffffff;
   color: var(--lay-accent);
   font-size: 0.88rem;
   font-weight: 600;
   text-transform: none;
   letter-spacing: 0;
   box-shadow: none;
   transition: background-color 0.15s ease, color 0.15s ease;
}
html body #product-list.shop_view--list .shop_product-cta::before {
   content: "";
   flex: 0 0 auto;
   width: 1.05em;
   height: 1.05em;
   background: currentColor;
   -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.5'/%3E%3Ccircle cx='18' cy='20' r='1.5'/%3E%3Cpath d='M2 3h3l2.7 11.2a1.5 1.5 0 0 0 1.5 1.1h8.6a1.5 1.5 0 0 0 1.5-1.1L21 7H6.2'/%3E%3C/svg%3E") center / contain no-repeat;
   mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.5'/%3E%3Ccircle cx='18' cy='20' r='1.5'/%3E%3Cpath d='M2 3h3l2.7 11.2a1.5 1.5 0 0 0 1.5 1.1h8.6a1.5 1.5 0 0 0 1.5-1.1L21 7H6.2'/%3E%3C/svg%3E") center / contain no-repeat;
}
html body #product-list.shop_view--list .shop_product-cta:hover,
html body #product-list.shop_view--list .shop_product-cta:focus-visible,
html body #product-list.shop_view--list .shop_product-cart-link:hover,
html body #product-list.shop_view--list .shop_product-cart-link:focus-visible {
   background: var(--lay-accent);
   color: #ffffff;
   filter: none;
}
html body #product-list.shop_view--list .shop_product-cart-link[hidden] {
   display: none;
}

/* 4) Beschriftungen in normaler Schreibweise statt GROSSBUCHSTABEN */
html body .checkout_form-column label,
html body .account_form label,
html body .cart_items-table th,
html body .orders_order-label {
   color: var(--lay-muted);
   font-size: 0.85rem;
   font-weight: 600;
   letter-spacing: 0;
   text-transform: none;
}

/* 5) "Zurück zum Shop" dezent als Textlink mit Pfeil */
html body .product_back-link,
html body .cart_back-link,
html body .checkout_back-link,
html body .orders_back-link,
html body .account_back-link,
html body .legal_back-link {
   color: var(--lay-muted);
   font-size: 0.9rem;
   font-weight: 500;
   letter-spacing: 0;
   text-decoration: none;
   text-transform: none;
}
html body .product_back-link::before,
html body .cart_back-link::before,
html body .checkout_back-link::before,
html body .orders_back-link::before,
html body .account_back-link::before,
html body .legal_back-link::before {
   content: "← ";
}
html body .product_back-link:hover,
html body .cart_back-link:hover,
html body .checkout_back-link:hover,
html body .orders_back-link:hover,
html body .account_back-link:hover,
html body .legal_back-link:hover {
   color: var(--lay-accent);
}
/* Zahlarten und Checkbox-Zeilen der Kasse sind auch <label>, sollen aber normal lesbar bleiben */
html body .checkout_form-column label.checkout_payment-option,
html body .checkout_form-column label.checkout_checkbox-option {
   color: var(--lay-ink);
   font-size: 0.95rem;
   font-weight: 500;
}

/* ---- Kategorie-Leiste als Chips (Shop-Design category_style 'chips', Standard) ----
   Kein Kasten, Chips linksbündig, gewählter Chip gefüllt; rechts Trefferzahl + Ansicht-Umschalter.
   'tabs' = frühere Reiter-Optik im Kasten (dann ohne Trefferzahl). */
html body .shop_result-count {
   display: none;
}
html body .shop_nav-bar--chips {
   padding: 0;
   border: none;
   background: none;
   box-shadow: none;
}
html body .shop_nav-bar--chips .shop_category-row {
   justify-content: flex-start;
   gap: 0.5rem;
}
html body .shop_nav-bar--chips .shop_category-link {
   padding: 0.4rem 0.95rem;
   border: 1px solid var(--lay-line);
   border-radius: 999px;
   background: var(--lay-surface);
   color: var(--lay-ink);
   font-size: 0.9rem;
   font-weight: 500;
   white-space: nowrap;
   cursor: pointer;
   transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
html body .shop_nav-bar--chips .shop_category-link:hover {
   border-color: var(--lay-accent);
   color: var(--lay-accent);
}
html body .shop_nav-bar--chips .shop_category-link--active,
html body .shop_nav-bar--chips .shop_category-link--active:hover {
   border-color: var(--lay-accent);
   background: var(--lay-accent);
   color: #ffffff;
}
html body .shop_nav-bar--chips .shop_result-count {
   display: inline;
   flex: 0 0 auto;
   margin-left: auto;
   color: var(--lay-muted);
   font-size: 0.85rem;
   white-space: nowrap;
}
html body .shop_nav-bar--chips .shop_view-toggle {
   margin-left: 0.5rem;
}
@media (max-width: 600px) {
   html body .shop_nav-bar--chips .shop_category-row {
      flex-wrap: nowrap;
      overflow-x: auto;
      scrollbar-width: none;
   }
}

/* =============================================================================
   KACHEL-STIL "FLACH" (Shop-Design -> Kachel-Stil, #product-list.shop_cards--flat): keine Karte,
   das Bild liegt auf einer hellgrauen, abgerundeten Fläche, Titel und Preis direkt darunter
   (wie große Marktplätze). mix-blend-mode lässt den weißen Fotohintergrund in der Fläche
   aufgehen - nur Darstellung, die Bilddateien bleiben unverändert. Nur Kachelansicht.
   ============================================================================= */
html body #product-list.shop_cards--flat:not(.shop_view--list) .shop_product {
   border: 0;
   border-radius: 0;
   background: transparent;
   box-shadow: none;
   overflow: visible;
}
html body #product-list.shop_cards--flat:not(.shop_view--list) .shop_product-image-link {
   margin: 0;
   aspect-ratio: 1 / 1;
   border-radius: 12px;
   background: #ecedeb;
   transition: background-color 0.2s ease;
}
html body #product-list.shop_cards--flat:not(.shop_view--list) .shop_product:hover .shop_product-image-link {
   background: #e4e5e3;
}
html body #product-list.shop_cards--flat:not(.shop_view--list) .shop_product-image {
   mix-blend-mode: multiply;
   border-radius: 0;
}
html body #product-list.shop_cards--flat.shop_images--rounded:not(.shop_view--list) .shop_product-image {
   inset: 9%;
   max-width: 82%;
   max-height: 82%;
}
html body #product-list.shop_cards--flat:not(.shop_view--list) .shop_product-content {
   padding: 0.6rem 0.15rem 0;
}

/* Preis rechts als Abschluss der Kachel (Shop-Design -> Preis-Position), Lagerhinweis links und
   unten bündig. Nur Kachelansicht. */
html body #product-list.shop_price--right:not(.shop_view--list) .shop_product-footer {
   flex-direction: row-reverse;
   /* Lagerhinweis auf derselben Grundlinie wie der (größere) Preis, nicht mittig daneben - an der LETZTEN Zeile,
      sonst rutscht der Preis bei zweizeiligem Hinweis ("Nur noch 3 auf / Lager") über die Nachbarpreise */
   align-items: baseline;
   align-items: last baseline;
}
html body #product-list.shop_price--right:not(.shop_view--list) .shop_product-footer-bottom {
   align-items: flex-start;
   margin-right: auto;
   text-align: left;
}
html body #product-list.shop_price--right:not(.shop_view--list) .shop_product-status {
   text-align: left;
}

/* =============================================================================
   SCHRIFT DES SHOPS (Shop-Design -> Schrift, shop_tenant_settings.shop_font). js/global/02_session.js
   setzt <html data-font>, hier wird daraus --lay-font (99_theme.css wendet sie überall an).
   Schriften liegen lokal unter public/fonts (SIL Open Font License) - bewusst NICHT von Google
   geladen (Datenschutz). Der Browser lädt nur die Datei der gewählten Schrift.
   ============================================================================= */

@font-face {
   font-family: 'Nunito';
   font-style: normal;
   font-weight: 400 800;
   font-display: swap;
   src: url('/fonts/nunito-latin.woff2') format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
   font-family: 'Nunito';
   font-style: normal;
   font-weight: 400 800;
   font-display: swap;
   src: url('/fonts/nunito-latin-ext.woff2') format('woff2');
   unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
   font-family: 'Manrope';
   font-style: normal;
   font-weight: 400 800;
   font-display: swap;
   src: url('/fonts/manrope-latin.woff2') format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
   font-family: 'Manrope';
   font-style: normal;
   font-weight: 400 800;
   font-display: swap;
   src: url('/fonts/manrope-latin-ext.woff2') format('woff2');
   unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
   font-family: 'Inter';
   font-style: normal;
   font-weight: 400 800;
   font-display: swap;
   src: url('/fonts/inter-latin.woff2') format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
   font-family: 'Inter';
   font-style: normal;
   font-weight: 400 800;
   font-display: swap;
   src: url('/fonts/inter-latin-ext.woff2') format('woff2');
   unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* html[data-font] ist spezifischer als :root in 99_theme.css und gewinnt damit. 'system' =
   Systemschrift aus 99_theme.css (kein eigener Eintrag nötig). */
html[data-font="nunito"] {
   --lay-font: 'Nunito', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
html[data-font="manrope"] {
   --lay-font: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
html[data-font="inter"] {
   --lay-font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* =============================================================================
   LOGO MIT SCHRIFTZUG IM KOPF (Shop-Design -> Logo im Kopf, shop_tenant_settings.shop_header_logo)
   js/global/03_layout.js setzt .lay_brand-link--wordmark und legt zwei Bilder an: --light für den hellen Kopf,
   --dark für den dunklen (Farbschema "Kräftiger Kopf" oder Dunkelmodus). Name und Slogan bleiben als Text im
   Link, nur unsichtbar (Vorleseprogramme). Am Handy zeigt der schmale Kopf beim Scrollen nur das runde Logo.
   ============================================================================= */

.lay_brand-wordmark {
   display: none;
   flex: 0 0 auto;
   width: auto;
   height: 46px;
}

:root:not([data-theme="dark"]):not([data-scheme="bold"]) .lay_brand-wordmark--light,
:root[data-theme="dark"] .lay_brand-wordmark--dark,
:root[data-scheme="bold"] .lay_brand-wordmark--dark {
   display: block;
}

.lay_brand-link--wordmark .lay_brand-logo {
   display: none;
}

.lay_brand-link--wordmark .lay_brand-copy {
   position: absolute;
   width: 1px;
   height: 1px;
   overflow: hidden;
   clip: rect(0 0 0 0);
   white-space: nowrap;
}

#lay_header.lay_header--compact .lay_brand-wordmark {
   height: 34px;
}

@media (max-width: 760px) {
   /* Schriftzug schrumpft mit, wenn die Zeile knapp wird (Kopf bleibt einzeilig), statt umzubrechen. */
   .lay_brand-wordmark {
      flex: 0 1 auto;
      min-width: 0;
      max-width: 100%;
      height: 32px;
      object-fit: contain;
      object-position: left center;
   }

   #lay_header.lay_header--compact .lay_brand-link--wordmark .lay_brand-wordmark {
      display: none;
   }

   #lay_header.lay_header--compact .lay_brand-link--wordmark .lay_brand-logo {
      display: block;
   }
}

@media (max-width: 400px) {
   .lay_brand-wordmark {
      height: 28px;
   }
}

/* =============================================================================
   FARBSCHEMA "KRÄFTIGER KOPF" (Shop-Design -> Farbschema, shop_tenant_settings.shop_color_scheme)
   Nur Farben, kein Umbau: dunkler Kopf rahmt die Seite (Hintergrund = Standard-Marken-Verlauf), Aktionen
   (Warenkorb, Kasse, Bestellen, Zähler, aktive Kategorie) orange mit dunkler Schrift.
   <html data-scheme="bold"> setzt js/global/02_session.js aus dem Session-Check. Gilt nur im
   Hellmodus - der Dunkelmodus hat ohnehin einen dunklen Kopf. Läuft nach 99_theme.css.
   Ein vom Betreiber gewählter Hintergrund (Shop-Design -> Hintergrund) hat weiter Vorrang.
   ============================================================================= */

:root[data-scheme="bold"]:not([data-theme="dark"]) {
   --lay-action: #f59f0b;
   --lay-action-hover: #e08e00;
   --lay-action-ink: #1d1406;

   --lay-header-bg: #17212d;
   --lay-header-ink: #f3f6f9;
   --lay-header-muted: #a9b6c3;
   --lay-header-line: #17212d;
   --lay-header-surface: #233244;
   --lay-header-hover: rgba(255, 255, 255, 0.08);
}

/* ---- Kopf ---- */
:root[data-scheme="bold"]:not([data-theme="dark"]) .lay_main-header {
   box-shadow: 0 4px 18px rgba(15, 23, 42, 0.18);
   backdrop-filter: none;
   -webkit-backdrop-filter: none;
}
:root[data-scheme="bold"]:not([data-theme="dark"]) .lay_search-input {
   background: #ffffff;
   color: #1d2530;
}
:root[data-scheme="bold"]:not([data-theme="dark"]) .lay_search-input::placeholder,
:root[data-scheme="bold"]:not([data-theme="dark"]) .lay_search-icon {
   color: #5b6673;
}
:root[data-scheme="bold"]:not([data-theme="dark"]) .lay_search-input:focus {
   border-color: var(--lay-action);
   box-shadow: 0 0 0 3px rgba(245, 159, 11, 0.3);
}
/* Navigation im dunklen Kopf: Hervorhebung orange statt Blau (Blau wäre auf Dunkel kaum lesbar) */
:root[data-scheme="bold"]:not([data-theme="dark"]) .lay_nav-links a:hover,
:root[data-scheme="bold"]:not([data-theme="dark"]) .lay_nav-links a:focus-visible,
:root[data-scheme="bold"]:not([data-theme="dark"]) .lay_nav-links .lay_active-nav {
   color: var(--lay-action);
}
:root[data-scheme="bold"]:not([data-theme="dark"]) .lay_cart-badge {
   background: var(--lay-action);
   color: var(--lay-action-ink);
}

/* ---- Aktive Kategorie (Chips) ---- */
:root[data-scheme="bold"]:not([data-theme="dark"]) body .shop_nav-bar--chips .shop_category-link--active,
:root[data-scheme="bold"]:not([data-theme="dark"]) body .shop_nav-bar--chips .shop_category-link--active:hover {
   border-color: var(--lay-action);
   background: var(--lay-action);
   color: var(--lay-action-ink);
}

/* ---- Aktionsknöpfe: In den Warenkorb, Zur Kasse, Bestellen ---- */
:root[data-scheme="bold"]:not([data-theme="dark"]) body .product_cta:not(:disabled),
:root[data-scheme="bold"]:not([data-theme="dark"]) body .shop_product-cta:not(:disabled),
:root[data-scheme="bold"]:not([data-theme="dark"]) body .cart_checkout-button,
:root[data-scheme="bold"]:not([data-theme="dark"]) body #checkout-submit:not(:disabled) {
   background: var(--lay-action);
   color: var(--lay-action-ink);
}
:root[data-scheme="bold"]:not([data-theme="dark"]) body .product_cta:not(:disabled):hover,
:root[data-scheme="bold"]:not([data-theme="dark"]) body .shop_product-cta:not(:disabled):hover,
:root[data-scheme="bold"]:not([data-theme="dark"]) body .cart_checkout-button:hover,
:root[data-scheme="bold"]:not([data-theme="dark"]) body #checkout-submit:not(:disabled):hover {
   background: var(--lay-action-hover);
   filter: none;
}
/* Listenansicht: dezenter Warenkorb-Knopf (umrandet) - Rand orange, füllt sich beim Überfahren */
:root[data-scheme="bold"]:not([data-theme="dark"]) body #product-list.shop_view--list .shop_product-cta:not(:disabled),
:root[data-scheme="bold"]:not([data-theme="dark"]) body #product-list.shop_view--list .shop_product-cart-link {
   border-color: var(--lay-action);
   background: #ffffff;
   color: var(--lay-action-ink);
}
:root[data-scheme="bold"]:not([data-theme="dark"]) body #product-list.shop_view--list .shop_product-cta:not(:disabled):hover,
:root[data-scheme="bold"]:not([data-theme="dark"]) body #product-list.shop_view--list .shop_product-cta:not(:disabled):focus-visible,
:root[data-scheme="bold"]:not([data-theme="dark"]) body #product-list.shop_view--list .shop_product-cart-link:hover,
:root[data-scheme="bold"]:not([data-theme="dark"]) body #product-list.shop_view--list .shop_product-cart-link:focus-visible {
   border-color: var(--lay-action);
   background: var(--lay-action);
   color: var(--lay-action-ink);
}

/* =============================================================================
   KATEGORIE-LEISTE ALS STREIFEN UNTER DEM KOPF (Shop-Design -> Kategorie-Leiste, Position,
   shop_tenant_settings.shop_category_bar = 'header'). js/global/03_layout.js mountCategoryStrip
   verschiebt die Leiste der Shopseite in #lay_category-strip direkt nach dem Kopf: volle Breite,
   Kategorien mittig, Trefferzahl + Ansicht-Umschalter (.shop_nav-tools) ganz rechts.
   Farben folgen dem Kopf: hell beim Farbschema "Klar", dunkel bei "Kräftiger Kopf" und im
   Dunkelmodus.
   ============================================================================= */

:root {
   --lay-strip-bg: #ffffff;
   --lay-strip-ink: var(--lay-ink);
   --lay-strip-muted: var(--lay-muted);
   --lay-strip-line: var(--lay-line);
   --lay-strip-hover: var(--lay-accent);
   --lay-strip-active: var(--lay-accent);
   --lay-strip-active-ink: #ffffff;
}
:root[data-scheme="bold"]:not([data-theme="dark"]) {
   --lay-strip-bg: #233244;
   --lay-strip-ink: #e6ebf0;
   --lay-strip-muted: #b9c4d0;
   --lay-strip-line: #3a4b60;
   --lay-strip-hover: #ffffff;
   /* Aktive Kategorie hell auf dunklem Streifen statt Signalfarbe (2026-10-04) - ruhiger, die
      Akzentfarbe bleibt Kaufen-Knöpfen vorbehalten. */
   --lay-strip-active: #ffffff;
   --lay-strip-active-ink: #1e293b;
}
:root[data-theme="dark"] {
   --lay-strip-bg: var(--lay-header-surface);
   --lay-strip-ink: var(--lay-header-ink);
   --lay-strip-muted: var(--lay-header-muted);
   --lay-strip-line: var(--lay-header-line);
}

.lay_category-strip {
   padding: 0.55rem clamp(1rem, 4vw, 4.5rem);
   background: var(--lay-strip-bg);
}
/* Heller Streifen (Farbschema "Klar"): feine Linie unten, damit er sich vom Grund absetzt */
:root:not([data-scheme="bold"]):not([data-theme="dark"]) .lay_category-strip {
   border-bottom: 1px solid var(--lay-strip-line);
}

/* Drei Spalten: links leer, Mitte Kategorien, rechts Trefferzahl + Umschalter. Die äußeren
   Spalten sind gleich breit, solange Platz ist - so stehen die Kategorien wirklich mittig. */
html body .lay_category-strip .shop_nav-bar {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto minmax(max-content, 1fr);
   align-items: center;
   gap: 1rem;
   margin: 0;
   padding: 0;
   border: none;
   border-radius: 0;
   background: none;
   box-shadow: none;
}
html body .lay_category-strip .shop_category-row {
   grid-column: 2;
   justify-content: center;
}
html body .lay_category-strip .shop_nav-tools {
   grid-column: 3;
   justify-self: end;
   display: flex;
   align-items: center;
   gap: 0.6rem;
}
html body .lay_category-strip .shop_view-toggle {
   margin-left: 0;
}

/* Chips, Trefferzahl und Umschalter in den Farben des Streifens */
html body .lay_category-strip .shop_nav-bar--chips .shop_category-link {
   border-color: var(--lay-strip-line);
   background: transparent;
   color: var(--lay-strip-ink);
}
html body .lay_category-strip .shop_nav-bar--chips .shop_category-link:hover {
   border-color: var(--lay-strip-hover);
   color: var(--lay-strip-hover);
}
html body .lay_category-strip .shop_nav-bar--chips .shop_category-link--active,
html body .lay_category-strip .shop_nav-bar--chips .shop_category-link--active:hover {
   border-color: var(--lay-strip-active);
   background: var(--lay-strip-active);
   color: var(--lay-strip-active-ink);
}
/* Dunkler Streifen: Chips ohne Rahmen, Hover als leichte Aufhellung (wie bei großen Shops) */
:root[data-scheme="bold"]:not([data-theme="dark"]) body .lay_category-strip .shop_nav-bar--chips .shop_category-link {
   border-color: transparent;
}
:root[data-scheme="bold"]:not([data-theme="dark"]) body .lay_category-strip .shop_nav-bar--chips .shop_category-link:hover {
   border-color: transparent;
   background: rgba(255, 255, 255, 0.1);
}
:root[data-scheme="bold"]:not([data-theme="dark"]) body .lay_category-strip .shop_nav-bar--chips .shop_category-link--active,
:root[data-scheme="bold"]:not([data-theme="dark"]) body .lay_category-strip .shop_nav-bar--chips .shop_category-link--active:hover {
   border-color: var(--lay-strip-active);
   background: var(--lay-strip-active);
   color: var(--lay-strip-active-ink);
}
html body .lay_category-strip .shop_result-count {
   display: inline;
   margin-left: 0;
   color: var(--lay-strip-muted);
   font-size: 0.85rem;
   white-space: nowrap;
}
html body .lay_category-strip .shop_view-toggle-btn {
   border-color: var(--lay-strip-line);
   background: transparent;
   color: var(--lay-strip-muted);
}
html body .lay_category-strip .shop_view-toggle-btn--active {
   border-color: var(--lay-strip-active);
   color: var(--lay-strip-active);
}
/* Reiter-Darstellung (category_style 'tabs') im Streifen lesbar halten */
html body .lay_category-strip .shop_nav-bar:not(.shop_nav-bar--chips) .shop_category-link {
   color: var(--lay-strip-ink);
}
html body .lay_category-strip .shop_nav-bar:not(.shop_nav-bar--chips) .shop_category-link--active {
   border-bottom-color: var(--lay-strip-active);
   color: var(--lay-strip-active);
}

/* Handy: Kategorien seitlich wischbar, Werkzeuge rechts daneben */
@media (max-width: 600px) {
   html body .lay_category-strip .shop_nav-bar {
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 0.6rem;
   }
   html body .lay_category-strip .shop_category-row {
      grid-column: 1;
      justify-content: flex-start;
      /* Rechts ausblenden statt hart abschneiden: zeigt, dass man weiterwischen kann */
      -webkit-mask-image: linear-gradient(to right, #000 85%, transparent);
      mask-image: linear-gradient(to right, #000 85%, transparent);
   }
   html body .lay_category-strip .shop_nav-tools {
      grid-column: 2;
   }
   /* Trefferzahl braucht am Handy den Platz der Kategorien */
   html body .lay_category-strip .shop_result-count {
      display: none;
   }
}


/* css/pages/shop.css */

.shop_controls-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin: 1rem 0 0.75rem;
  padding: 0.75rem 1.25rem;
  border-radius: 10px;
  background: var(--lay-surface, #ffffff);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.shop_controls-row[hidden] {
  display: none;
}

/* Gemeinsame Leiste: Kategorien (mittig) + Listen-/Kachel-Umschalter (rechts). Beide Teile
   blenden sich unabhängig voneinander aus; ist beides aus, verschwindet die ganze Leiste. */
.shop_nav-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1rem 0;
  padding: 0.5rem 1.25rem;
  border-radius: 10px;
  background: var(--lay-surface, #ffffff);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
.shop_nav-bar:not(:has(> :not([hidden]))) {
  display: none;
}

/* Listen-/Kachelansicht-Umschalter (nur sichtbar, wenn der Betreiber das im Shop-Design erlaubt hat) */
.shop_view-toggle {
  display: flex;
  flex: 0 0 auto;
  justify-content: flex-end;
  gap: 0.4rem;
  margin-left: auto;
}
.shop_view-toggle[hidden] {
  display: none;
}
.shop_view-toggle-btn {
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid var(--lay-line, #dbe6ec);
  border-radius: 6px;
  background: var(--lay-surface, #ffffff);
  color: var(--lay-muted, #688096);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.shop_view-toggle-btn--active {
  border-color: var(--lay-accent, #2e8b78);
  color: var(--lay-accent, #2e8b78);
  background: rgba(46, 139, 120, 0.08);
}

.shop_content-wrapper {
  padding: 1rem 1rem 0;
}

.shop_category-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.shop_category-controls label {
  color: var(--lay-muted, #688096);
  font-family: Arial, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
}

.shop_category-controls select {
  padding: 0.5rem 2rem 0.5rem 0.65rem;
  border: 1px solid var(--lay-line, #dbe6ec);
  border-radius: 5px;
  background: var(--lay-surface, #ffffff);
  color: var(--lay-ink, #17324d);
}

.shop_category-controls[hidden] {
  display: none;
}

.shop_category-row {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1.5rem;
  padding: 0.25rem 0;
}

.shop_category-row[hidden] {
  display: none;
}

.shop_pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1rem;
}

.shop_pagination[hidden] {
  display: none;
}

.shop_pagination-prev,
.shop_pagination-next {
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--lay-line, #dbe6ec);
  border-radius: 5px;
  background: var(--lay-surface, #ffffff);
  color: var(--lay-ink, #17324d);
  font-family: Arial, sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease;
}

.shop_pagination-prev:hover:not(:disabled),
.shop_pagination-next:hover:not(:disabled) {
  border-color: var(--lay-accent, #2e8b78);
  color: var(--lay-accent, #2e8b78);
}

.shop_pagination-prev:disabled,
.shop_pagination-next:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.shop_pagination-pages {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.shop_pagination-page {
  min-width: 2.1rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid transparent;
  border-radius: 5px;
  background: none;
  color: var(--lay-muted, #688096);
  font-family: Arial, sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease;
}

.shop_pagination-page:hover:not(:disabled) {
  border-color: var(--lay-line, #dbe6ec);
  color: var(--lay-ink, #17324d);
}

.shop_pagination-page--active {
  border-color: var(--lay-accent, #2e8b78);
  color: var(--lay-accent, #2e8b78);
  cursor: default;
}

.shop_pagination-ellipsis {
  color: var(--lay-muted, #688096);
  font-family: Arial, sans-serif;
  font-size: 0.8rem;
  padding: 0 0.2rem;
}

.shop_category-link {
  padding: 0.3rem 0;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--lay-muted, #688096);
  font-family: Arial, sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.shop_category-link:hover,
.shop_category-link:focus-visible {
  color: var(--lay-ink, #17324d);
  outline: none;
}

.shop_category-link--active {
  border-bottom-color: var(--lay-accent, #2e8b78);
  color: var(--lay-accent, #2e8b78);
}

.shop_product-list-wrapper {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 1.5rem 1rem;
  border-radius: 12px;
  background: rgba(var(--shop-list-bg-rgb, 255, 255, 255), var(--shop-list-bg-alpha, 0));
}

#product-list {
  display: grid;
  grid-template-columns: repeat(var(--shop-columns, 3), 1fr);
  gap: 1rem;
}

.shop_product {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
  min-width: var(--shop-product-min-width, 220px);
  max-width: var(--shop-product-max-width, 280px);
  min-height: var(--shop-product-min-height, 280px);
}

.shop_product-image-link {
  display: block;
}

.shop_product-image {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.shop_product-title-link {
  color: inherit;
  text-decoration: none;
}

/* Kein Farbwechsel beim Überfahren (die ganze Karte ist klickbar), nur bei Tastatur-Fokus. */
.shop_product-title-link:focus-visible h2 {
  color: var(--lay-accent, #2e8b78);
}

.shop_product-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1rem;
}

.shop_product-info {
  display: flex;
  flex-direction: column;
}

.shop_product-description {
  display: none;
}

.shop_product-footer {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.6rem;
  margin-top: auto;
  padding-top: 0.75rem;
}

.shop_product-footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
  text-align: right;
}

.shop_product-cta-group {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.6rem;
}

.shop_product-price {
  color: #17324d;
  font-family: Arial, sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  white-space: nowrap;
}

.shop_product-status {
  font-family: Arial, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
}

.shop_product-status--low {
  color: #b45309;
}

.shop_product-status--preorder {
  color: #c2410c;
}

.shop_product-status--announced {
  color: #2563eb;
}

.shop_product-cta {
  display: none;
  padding: 0.6rem 1.25rem;
  border: none;
  border-radius: 5px;
  /* Gleicher Stil wie der Warenkorb-Button auf der Produktseite (css/pages/product.css .product_cta) */
  background: var(--lay-accent, #2e8b78);
  color: #ffffff;
  text-transform: uppercase;
  font-family: Arial, sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.shop_product-cta:hover {
  filter: brightness(0.9);
}

.shop_product-cta[disabled] {
  cursor: not-allowed;
  opacity: 0.7;
}

.shop_product-cart-link {
  display: none;
  padding: 0.6rem 1.25rem;
  border-radius: 5px;
  background: var(--lay-accent, #2e8b78);
  color: #ffffff;
  font-family: Arial, sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
}

.shop_product-cart-link:hover,
.shop_product-cart-link:focus-visible {
  filter: brightness(0.9);
}

/* ===== Listenansicht ===== */

#product-list.shop_view--list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.shop_view--list .shop_product {
  flex-direction: row;
  width: 100%;
  max-width: none;
  min-height: auto;
}

.shop_view--list .shop_product-image-link {
  flex: 0 0 200px;
}

.shop_view--list .shop_product-image {
  height: 100%;
}

.shop_view--list .shop_product-content {
  flex-direction: row;
  align-items: stretch;
  gap: 1rem;
}

.shop_view--list .shop_product-info {
  flex: 1 1 320px;
}

.shop_view--list .shop_product-badges {
  margin-top: 0.5rem;
  margin-bottom: 0;
}

.shop_view--list .shop_product-description {
  /* Nur ein Anriss (2 Zeilen) - der volle Text steht auf der Produktseite. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0.5rem 0 0;
  color: var(--lay-muted, #4d6478);
  font-family: Arial, sans-serif;
  font-size: 0.85rem;
  line-height: 1.5;
}

/* Preis oben, Bestandshinweis + Button unten - Fußzeile nimmt die volle Zeilenhöhe ein
   (align-items: stretch am Elternelement) und verteilt Preis/unteren Block per space-between
   an die Ränder. */
.shop_view--list .shop_product-footer {
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  gap: 0.6rem;
  margin-top: 0;
  padding-top: 0;
}


.shop_view--list .shop_product-cta {
  display: inline-block;
}

.shop_view--list .shop_product-cart-link {
  display: inline-block;
}

.shop_product-cart-link[hidden] {
  display: none;
}

.shop_product-category {
  display: inline-block;
  margin-bottom: 0.55rem;
  color: var(--lay-accent, #2e8b78);
  font-family: Arial, sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.shop_product-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.55rem;
}

.shop_product-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border: 1px solid rgba(46, 139, 120, 0.3);
  border-radius: 999px;
  background: rgba(46, 139, 120, 0.08);
  color: var(--lay-accent, #2e8b78);
  font-family: Arial, sans-serif;
  font-size: 0.68rem;
}

@media (max-width: 600px) {
  /* Am Handy nur Kacheln (js/pages/shop.js isListView) - Umschalter ausblenden. */
  .shop_view-toggle {
    display: none;
  }

  .shop_controls-row {
    justify-content: flex-start;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .shop_category-controls {
    justify-content: space-between;
  }

  .shop_category-controls select {
    flex: 1;
    max-width: 60%;
  }

  .shop_category-row {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .shop_category-row::-webkit-scrollbar {
    display: none;
  }

  .shop_category-link {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .shop_product-list-wrapper {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0.5rem;
    box-sizing: border-box;
  }

  /* Zwei Kacheln nebeneinander: auf dem ersten Bildschirm stehen so mehrere Produkte mit Preis */
  #product-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }

  /* Startseite: je Kategorie nur zwei Reihen à 2 Kacheln (js/pages/shop.js renderHomeSections) */
  .shop_product--desktop-only {
    display: none;
  }

  .shop_product {
    min-width: 0;
    max-width: none;
    width: 100%;
  }

  .shop_view--list .shop_product {
    flex-direction: column;
  }

  .shop_view--list .shop_product-image-link {
    flex: none;
    width: 100%;
  }

  .shop_view--list .shop_product-content {
    flex-direction: column;
  }

  .shop_view--list .shop_product-footer {
    align-items: flex-start;
  }

  .shop_view--list .shop_product-image {
    height: auto;
  }
}

/* Große Bildvorschau (js/pages/shop.js, nur mit Maus): öffnet per Lupe im Kartenbild, mittig
   über abgedunkeltem Hintergrund, schließt über X, Esc oder Klick auf den Hintergrund. */
.shop_image-preview-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(15, 23, 42, 0.55);
}
.shop_image-preview-backdrop[hidden] {
  display: none;
}
.shop_image-preview {
  position: relative;
  width: min(680px, 92vw, 82vh);
  height: min(680px, 92vw, 82vh);
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
  padding: 16px;
  border: 1px solid var(--lay-line, #dbe6ec);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.2);
}
.shop_image-preview-img {
  cursor: pointer;
}
/* Pfeile ‹ › links/rechts mittig im Vorschaubild */
.shop_image-preview-nav {
  position: absolute;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0 0 4px;
  border: 1px solid var(--lay-line, #dbe6ec);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--lay-ink, #1e293b);
  font-size: 1.9rem;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.shop_image-preview-nav:hover,
.shop_image-preview-nav:focus-visible {
  background: var(--lay-accent, #2e8b78);
  color: #ffffff;
  outline: none;
}
.shop_image-preview-nav--prev {
  left: 12px;
}
.shop_image-preview-nav--next {
  right: 12px;
}
.shop_image-preview-nav[hidden] {
  display: none;
}
/* X oben rechts in der Vorschau */
.shop_image-preview-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0 0 2px;
  border: 1px solid var(--lay-line, #dbe6ec);
  border-radius: 50%;
  background: #ffffff;
  color: var(--lay-ink, #1e293b);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.shop_image-preview-close:hover,
.shop_image-preview-close:focus-visible {
  background: var(--lay-accent, #2e8b78);
  border-color: var(--lay-accent, #2e8b78);
  color: #ffffff;
  outline: none;
}

/* Lupe unten rechts im Kartenbild: erscheint beim Überfahren der Karte (und bei Tastatur-Fokus). */
.shop_image-zoom {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--lay-line, #dbe6ec);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: var(--lay-ink, #1e293b);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.15);
  cursor: zoom-in;
  opacity: 0;
  transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.shop_product:hover .shop_image-zoom,
.shop_image-zoom:focus-visible {
  opacity: 1;
}
.shop_image-zoom:hover,
.shop_image-zoom:focus-visible {
  background: var(--lay-accent, #2e8b78);
  border-color: var(--lay-accent, #2e8b78);
  color: #ffffff;
  outline: none;
}
.shop_image-preview-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}
.shop_image-preview-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* Miniaturen aller Bilder unten, aktuelles markiert, per Klick auswählbar */
.shop_image-preview-thumbs {
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  gap: 8px;
  overflow-x: auto;
  padding-top: 10px;
  border-top: 1px solid var(--lay-line, #dbe6ec);
}
.shop_image-preview-thumbs[hidden] {
  display: none;
}
.shop_image-preview-thumb {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  padding: 3px;
  border: 2px solid var(--lay-line, #dbe6ec);
  border-radius: 8px;
  background: #ffffff;
  cursor: pointer;
  opacity: 0.7;
  transition: border-color 0.15s ease, opacity 0.15s ease;
}
.shop_image-preview-thumb:hover {
  opacity: 1;
}
.shop_image-preview-thumb--active {
  border-color: var(--lay-accent, #2e8b78);
  opacity: 1;
}
.shop_image-preview-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Die ganze Karte führt zur Produktseite (js/pages/shop.js), nicht nur Bild und Titel. */
.shop_product {
  cursor: pointer;
}

/* Bilder auf der Karte durchblättern (js/pages/shop.js attachImageBrowsing): Punkte unten im Bild.
   touch-action: pan-y - senkrechtes Scrollen macht der Browser, seitliches Wischen blättert. */
.shop_product-image-link {
  position: relative;
  touch-action: pan-y;
}
.shop_image-dots {
  position: absolute;
  left: 50%;
  bottom: 8px;
  display: flex;
  gap: 5px;
  padding: 4px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  transform: translateX(-50%);
  pointer-events: none;
}
.shop_image-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.25);
}
.shop_image-dot--active {
  background: var(--lay-accent, #2e8b78);
}
.shop_image-dots[hidden] {
  display: none;
}

/* Aktive Suche aus dem Header (shop.html?q=...) */
.shop_search-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1rem 0 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--lay-ink, #17324d);
}
.shop_search-info[hidden] {
  display: none;
}
.shop_search-reset {
  color: var(--lay-accent, #2e8b78);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.shop_search-reset:hover {
  text-decoration: underline;
}

/* Komplett in fremden Warenkörben reserviert - zurückhaltend, kein Alarm */
.shop_product-status--reserved,
.shop_product-status--soldout {
  color: var(--lay-muted, #55657a);
}

/* "Weitere Produkte anzeigen" (Shop-Design -> Blättern 'more'): ruhiger Knopf unter der Liste */
.shop_more {
  display: flex;
  justify-content: center;
  margin: 1.5rem 0 0.5rem;
}
.shop_more[hidden] {
  display: none;
}
.shop_more-button {
  padding: 0.7rem 1.6rem;
  border: 1px solid var(--lay-line, #dbe6ec);
  border-radius: 999px;
  background: var(--lay-surface, #ffffff);
  color: var(--lay-ink, #1e293b);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.shop_more-button:hover,
.shop_more-button:focus-visible {
  border-color: var(--lay-accent, #1668b8);
  color: var(--lay-accent, #1668b8);
}
:root[data-scheme="bold"]:not([data-theme="dark"]) .shop_more-button:hover,
:root[data-scheme="bold"]:not([data-theme="dark"]) .shop_more-button:focus-visible {
  border-color: var(--lay-action, #f59f0b);
  color: var(--lay-ink, #1e293b);
}

/* Ausverkaufte Dropshipping-Ware (Shop-Design "Ausverkaufte Produkte: Anzeigen, abgedunkelt"):
   blasser, Bild grau, Hinweis mittig auf dem Bild, kein Warenkorb-Knopf. Steht per Server-
   Sortierung ohnehin am Ende der Liste. */
.shop_product--soldout .shop_product-image-link {
  position: relative;
}
.shop_product--soldout .shop_product-image {
  filter: grayscale(0.85);
  opacity: 0.55;
}
.shop_product--soldout .shop_product-content {
  opacity: 0.6;
}
.shop_product-soldout-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  background: rgba(23, 33, 45, 0.82);
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
}
.shop_product-cta-group[hidden] {
  display: none;
}

/* Stern "Hervorheben" oben links im Kartenbild - nur für Betreiber/freigegebene Mitarbeiter.
   Gesetzt (★) immer sichtbar, leer (☆) erst beim Überfahren der Karte. */
.shop_featured-star {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--lay-line, #dbe6ec);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: #8a9aab;
  font-size: 1.3rem;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.15);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.shop_featured-star[aria-pressed="true"] {
  color: #e8a400;
  opacity: 1;
}
.shop_product:hover .shop_featured-star,
.shop_featured-star:focus-visible {
  opacity: 1;
}
.shop_featured-star:disabled {
  cursor: wait;
}
@media (hover: none) {
  .shop_featured-star {
    opacity: 1;
  }
}

/* =============================================================================
   STARTSEITE: Schaufenster-Kacheln und Bereiche mit Überschrift (Shop-Design ->
   Schaufenster / Startseite). Beide liegen als volle Zeile im Produktraster.
   ============================================================================= */
.shop_showcase {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 170px;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
/* Anordnung je nach Anzahl: 1 = volle Breite, 2 = halb/halb, ab 3 = große Kachel links (2x2) */
.shop_showcase[data-count="1"] .shop_showcase-tile { grid-column: span 4; }
.shop_showcase[data-count="2"] .shop_showcase-tile { grid-column: span 2; }
.shop_showcase[data-count="3"] .shop_showcase-tile,
.shop_showcase[data-count="4"] .shop_showcase-tile:nth-child(4) { grid-column: span 2; }
.shop_showcase[data-count="3"] .shop_showcase-tile:first-child,
.shop_showcase[data-count="4"] .shop_showcase-tile:first-child,
.shop_showcase[data-count="5"] .shop_showcase-tile:first-child {
  grid-column: span 2;
  grid-row: span 2;
}
.shop_showcase-tile {
  --tile-bg: #1668b8;
  --tile-ink: #ffffff;
  position: relative;
  display: flex;
  overflow: hidden;
  padding: 1.1rem 1.25rem;
  border: 0;
  border-radius: 14px;
  background: var(--tile-bg);
  color: var(--tile-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.shop_showcase-tile:hover,
.shop_showcase-tile:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
  outline: none;
}
.shop_showcase-tile--blue { --tile-bg: #1668b8; --tile-ink: #ffffff; }
.shop_showcase-tile--green { --tile-bg: #2f8f46; --tile-ink: #ffffff; }
.shop_showcase-tile--orange { --tile-bg: #f5a623; --tile-ink: #1e293b; }
.shop_showcase-tile--red { --tile-bg: #c0392b; --tile-ink: #ffffff; }
.shop_showcase-tile--dark { --tile-bg: #1e293b; --tile-ink: #ffffff; }
.shop_showcase-tile--light { --tile-bg: #eef2f7; --tile-ink: #1e293b; }
.shop_showcase-text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-width: 58%;
}
.shop_showcase-text h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.15;
}
.shop_showcase-text p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.35;
  opacity: 0.9;
}
.shop_showcase-cta {
  margin-top: auto;
  font-size: 0.9rem;
  font-weight: 700;
}
/* Bild rechts, senkrecht mittig in der Kachel */
.shop_showcase-image {
  position: absolute;
  top: 50%;
  right: 0.75rem;
  transform: translateY(-50%);
  width: 40%;
  height: 75%;
  box-sizing: border-box;
  padding: 0.4rem;
  object-fit: contain;
  /* Weiße, abgerundete "Karte" in fester Größe - Produktfotos haben meist weißen Hintergrund und sähen sonst
     wie aufgeklebt aus */
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18);
}
/* Schrift in der Farbe der Kachel - allgemeinere Überschriften-Regeln des Themes färben h2 sonst dunkel
   (auf "Dunkel" unsichtbar) */
html body #product-list .shop_showcase-tile .shop_showcase-text h2,
html body #product-list .shop_showcase-tile .shop_showcase-text p,
html body #product-list .shop_showcase-tile .shop_showcase-cta {
  color: var(--tile-ink);
}
/* Große Kachel: größere Schrift und größeres Bild */
.shop_showcase[data-count="1"] .shop_showcase-text h2,
.shop_showcase:not([data-count="1"]):not([data-count="2"]) .shop_showcase-tile:first-child .shop_showcase-text h2 {
  font-size: 2rem;
}
.shop_showcase:not([data-count="1"]):not([data-count="2"]) .shop_showcase-tile:first-child .shop_showcase-image {
  right: 1.25rem;
  width: 42%;
  height: 72%;
}

/* Bereiche: Überschrift über einer Reihe, "Alle ansehen" rechts */
.shop_section-heading {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.25rem 0 0.1rem;
}
.shop_showcase + .shop_section-heading,
#product-list > .shop_section-heading:first-of-type {
  margin-top: 0.5rem;
}
.shop_section-heading h2 {
  margin: 0;
  color: var(--lay-ink, #1e293b);
  font-size: 1.35rem;
  font-weight: 800;
}
.shop_section-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--lay-accent, #1668b8);
  font: inherit;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.shop_section-link:hover,
.shop_section-link:focus-visible {
  text-decoration: underline;
  outline: none;
}
.shop_price-info[hidden] {
  display: none;
}

@media (max-width: 600px) {
  .shop_showcase {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 140px;
  }
  .shop_showcase .shop_showcase-tile,
  .shop_showcase[data-count] .shop_showcase-tile {
    grid-column: span 1;
    grid-row: span 1;
  }
  .shop_showcase .shop_showcase-tile:first-child,
  .shop_showcase[data-count] .shop_showcase-tile:first-child {
    grid-column: span 2;
    grid-row: span 1;
  }
  /* Handy kompakt: alle Kacheln gleich flach, nur Titel + "Entdecken", Bild klein rechts daneben - darunter
     bleiben Produkte mit Preis auf dem ersten Bildschirm sichtbar */
  .shop_showcase {
    grid-auto-rows: 92px;
    gap: 0.5rem;
  }
  .shop_showcase .shop_showcase-tile {
    padding: 0.7rem 0.8rem;
  }
  html body #product-list .shop_showcase .shop_showcase-tile .shop_showcase-text h2 {
    font-size: 1rem;
  }
  .shop_showcase-text {
    max-width: 62%;
  }
  .shop_showcase-text p {
    display: none;
  }
  .shop_showcase-cta {
    font-size: 0.8rem;
  }
  .shop_showcase .shop_showcase-tile .shop_showcase-image,
  .shop_showcase:not([data-count="1"]):not([data-count="2"]) .shop_showcase-tile:first-child .shop_showcase-image {
    top: 50%;
    right: 0.6rem;
    bottom: auto;
    width: 34%;
    height: 76px;
    padding: 0.25rem;
    transform: translateY(-50%);
  }
  .shop_showcase:not([data-count="1"]):not([data-count="2"]) .shop_showcase-tile:first-child .shop_showcase-image,
  .shop_showcase .shop_showcase-tile:first-child .shop_showcase-image {
    width: 26%;
  }
}