/* Mobile-first Grundlayout. Bewusst ohne CSS-Framework, um schlank zu bleiben. */

.staging-banner {
  background: var(--color-danger);
  color: #ffffff;
  text-align: center;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
}

:root {
  /* Farbwelt: warmes Off-White/Anthrazit als Basis, Frankensteins-Gruen als
     primaerer Akzent (siehe UI-Redesign-Auftrag Abschnitt 2). Zentral hier
     definiert -- keine verstreuten Hex-Werte in Komponenten. Rot bleibt nur
     als semantische Fehler-/Danger-Farbe (--color-danger), nicht als
     Markenfarbe. */
  --color-bg: #fbfaf7;
  --color-bg-subtle: #f2efe8;
  --color-surface: #ffffff;
  --color-text: #211f1c;
  --color-muted: #6b675f;
  --color-accent: #1f6b3f;
  --color-accent-hover: #17542f;
  --color-accent-soft: #e6f2ea;
  --color-accent-contrast: #ffffff;
  --color-dark: #201f1c;
  --color-dark-contrast: #f5f3ee;
  --color-border: #e4e0d5;
  --color-danger: #b3261e;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;
  --space-7: 6.5rem;
  /* Art-Direction-Pass 2 (Abschnitt 2): deutlich breitere Desktop-
     Contentflaeche (vorher 72rem/1152px). Wirkt auf main/Header/Footer
     gleichermassen, da alle dieselbe Variable nutzen -- keine separate
     Breitenlogik pro Seite. */
  --max-width: 90rem;
  --max-width-narrow: 46rem;
  --radius: 8px;
  --radius-lg: 20px;
  --header-height: 7rem;
  --utility-bar-height: 2rem;

  /* Typografie-Tokens: bestehender System-Font-Stack (keine neue externe
     Abhaengigkeit, siehe Abschnitt 3), zentral fuer grosse Editorial-
     Headlines vs. Fliesstext. Skala in Pass 2 (Abschnitt 4) deutlich
     angehoben: Hero sehr gross, Editorial-Sections gross, Section-
     Headlines mittelgross, Produkt-UI bleibt kompakt (siehe .product-card). */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fs-eyebrow: 0.8125rem;
  --ls-eyebrow: 0.12em;
  --fs-h1: clamp(2.75rem, 6.2vw, 5rem);
  --fs-h2: clamp(2rem, 3.6vw, 3rem);
  --fs-h3: 1.3rem;
  --fs-section-heading: clamp(1.65rem, 2.2vw, 2.05rem);
  --lh-tight: 1.08;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.5;
}

a {
  color: var(--color-accent);
}

/* Sichtbarer Fokusring fuer Tastaturbedienung, ohne Maus-Klicks zu stoeren. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.product-card:focus-visible,
.category-tile:focus-visible,
.nav-toggle-label:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-header {
  border-bottom: 1px solid var(--color-border);
  padding: 0 var(--space-2);
  position: sticky;
  top: 0;
  background: var(--color-bg);
  z-index: 10;
}

@media (min-width: 90rem) {
  .site-header {
    padding: 0 var(--space-4);
  }
}

.site-header__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  min-height: var(--header-height);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 1.15rem;
  text-decoration: none;
  color: var(--color-text);
  flex-shrink: 0;
}

.brand__mark {
  display: block;
  /* Faktor 1,8 gegenueber der vorherigen Hoehe (3.25rem). Breite bleibt
     `auto`, damit das Seitenverhaeltnis des Logos unangetastet bleibt;
     min/max-width sind im selben Verhaeltnis mitgewachsen. */
  height: 5.85rem;
  width: auto;
  min-width: 270px;
  max-width: 25.2rem;
  object-fit: contain;
}

/* Schmale Displays: dort waere Faktor 1,8 breiter als der Viewport. Das
   Logo bleibt deutlich groesser als zuvor, ohne die Kopfzeile zu sprengen. */
@media (max-width: 40rem) {
  :root {
    --header-height: 5rem;
  }

  .brand__mark {
    height: 4rem;
    min-width: 0;
    max-width: 15rem;
  }
}

/* ---------- Utility-Bar (oberste, schmale Header-Ebene) ---------- */

.utility-bar {
  background: var(--color-dark);
  color: var(--color-dark-contrast);
}

.utility-bar__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-2);
  min-height: var(--utility-bar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: 0.75rem;
}

.utility-bar__inner span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.utility-bar__inner a {
  color: inherit;
  text-decoration: none;
  opacity: 0.85;
  flex-shrink: 0;
}

.utility-bar__inner a:hover,
.utility-bar__inner a:focus-visible {
  opacity: 1;
}

/* Mobile: Header-Panel (Nav + Suche) faltet sich per Checkbox auf, ohne JS. */
.nav-toggle-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.nav-toggle-label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 2.5rem;
  height: 2.5rem;
  margin-left: auto;
  cursor: pointer;
  border-radius: 4px;
}

.nav-toggle-label span {
  display: block;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
}

.site-header__panel {
  display: none;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) 0 var(--space-3);
  border-top: 1px solid var(--color-border);
}

.nav-toggle-input:checked ~ .site-header__panel {
  display: flex;
}

.main-nav {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav a {
  display: block;
  padding: 0.6rem 0.25rem;
  text-decoration: none;
  color: var(--color-text);
  font-size: 1.05rem;
  font-weight: 600;
  border-bottom: 1px solid var(--color-border);
  transition: color 0.15s ease;
}

.main-nav a:hover,
.main-nav a:focus-visible {
  color: var(--color-accent);
}

.cart-link {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: var(--space-1);
  text-decoration: none;
  color: var(--color-text);
  flex-shrink: 0;
}

.cart-link__count {
  font-weight: 700;
  font-size: 0.9rem;
}

.search-form {
  display: flex;
  gap: var(--space-1);
  width: 100%;
}

.search-form input[type='search'] {
  flex: 1;
  /* Ohne explizite min-width behaelt das Suchfeld die Browser-eigene
     Mindestbreite eines <input> (deutlich >0), auch mit flex:1 und
     flex-shrink. In Kombination mit min-width:0 auf .site-header__panel/
     .main-nav/.search-form (siehe 60rem-Breakpoint unten) sorgt genau das
     dafuer, dass bei mittleren Desktop-Breiten (~960-1050px) der gesamte
     Header-Inhalt breiter wird als .site-header__inner und ueberlaeuft --
     sichtbar als Suchsymbol, das in den Warenkorb-Link hineinlaeuft/ihn
     abschneidet, statt sauber zu schrumpfen. */
  min-width: 4rem;
  /* Bedienflaeche Faktor ~1,8 in der Hoehe (0.6rem -> 1.1rem Innenabstand). */
  padding: 1.1rem var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 1.15rem;
}

.search-form button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Klickflaeche waechst mit dem Eingabefeld mit (2.75rem -> 4rem). */
  width: 4rem;
  padding: 0;
}

@media (min-width: 60rem) {
  .site-header__inner {
    flex-wrap: nowrap;
  }

  .nav-toggle-label {
    display: none;
  }

  .site-header__panel {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
    /* Ohne dies bleibt die automatische Flex-Mindestbreite dieses Panels
       gleich der Summe der Mindestbreiten von Nav und Suchformular -- bei
       mittleren Desktop-Breiten laeuft dann der gesamte Header ueber statt
       zu schrumpfen (siehe Kommentar bei .search-form input oben). */
    min-width: 0;
    width: auto;
    padding: 0;
    border-top: none;
    gap: var(--space-2);
  }

  .main-nav {
    flex-direction: row;
    /* flex-basis:max-content statt des Standards "auto": ein verschachtelter
       flex-wrap-Container wuerde ohne diese explizite Angabe schon dann
       schrumpfen/umbrechen, wenn eigentlich noch Platz da waere (Browser
       bevorzugen bei "auto" hier tendenziell die Minimalbreite statt der
       natuerlichen einzeiligen Breite als Ausgangsgroesse). Mit
       max-content behaelt die Navigation ihre volle einzeilige Breite,
       solange Platz reicht, und schrumpft/umbricht erst danach -- und zwar
       zuerst ueber ganze Links (white-space:nowrap unten), nicht mitten im
       Wort. */
    flex: 1 1 max-content;
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 0.25rem;
    gap: var(--space-2);
    min-width: 0;
  }

  .main-nav a {
    padding: 0;
    border-bottom: none;
    white-space: nowrap;
  }

  /* Suchfeld bewusst schmaler gedeckelt (11rem statt vormals 16rem):
     das breitere neue Logo beansprucht mehr Platz in der Kopfzeile, und
     die Kategorien-Navigation soll dafuer nicht auf eine zweite,
     unschoen abgerissene Zeile umbrechen (siehe Kommentar bei .main-nav
     oben) -- Vorrang fuer die Navigation, das Suchfeld bleibt weiterhin
     voll nutzbar. */
  .search-form {
    width: auto;
    /* Zwischenstufe: ab 60rem ist neben dem 1,8x groesseren Logo und der
       Kategorien-Navigation noch nicht der volle Zielwert unterzubringen,
       ohne die Navigation umbrechen zu lassen (siehe Kommentar oben --
       Vorrang fuer die Navigation). */
    max-width: 13rem;
    min-width: 0;
    flex-shrink: 1;
    flex-grow: 0;
  }
}

/* Ab hier ist Platz fuer den vollen Zielwert: 18rem = Faktor 1,8 gegenueber
   den bisherigen 10rem. */
@media (min-width: 90rem) {
  .search-form {
    max-width: 18rem;
  }
}

.search-form button,
.button,
button {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-accent);
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.95rem;
  text-decoration: none;
  text-align: center;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.search-form button:hover,
.button:hover:not(:disabled):not([aria-disabled='true']),
button:hover:not(:disabled):not([aria-disabled='true']) {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

.button:disabled,
.button[aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.button--secondary {
  background: transparent;
  color: var(--color-accent);
}

.button--secondary:hover:not(:disabled):not([aria-disabled='true']) {
  background: var(--color-accent-soft);
  color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

/* Fuer CTAs auf Bild-/Dunkelflaechen (Hero, Editorial-Banner, Originals,
   Erlebnis-Section): erbt die vom jeweiligen Section-Kontext gesetzte
   Textfarbe statt der festen Akzentfarbe, damit der Button auf beliebigen
   (austauschbaren) Hintergrundbildern lesbar bleibt. */
.button--on-media {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}

.button--on-media:hover:not(:disabled):not([aria-disabled='true']) {
  background: rgba(255, 255, 255, 0.14);
  border-color: currentColor;
  color: inherit;
}

main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-3) var(--space-2);
}

@media (min-width: 60rem) {
  main {
    padding: var(--space-4) var(--space-3);
  }
}

@media (min-width: 90rem) {
  main {
    padding: var(--space-4) var(--space-4);
  }
}

.category-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}

.category-nav a {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  text-decoration: none;
  color: var(--color-text);
  font-size: 0.9rem;
}

.category-nav a.is-active {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  border-color: var(--color-accent);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

@media (min-width: 40rem) {
  .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 60rem) {
  .product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.product-card {
  background: #fff;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: var(--space-1);
  height: 100%;
}

.product-card__link {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.65rem;
  height: 100%;
  text-decoration: none;
  color: var(--color-text);
}

.product-card__media {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
}

.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.2s ease;
}

.product-card:hover .product-card__media img {
  transform: scale(1.03);
}

.product-card__body {
  display: grid;
  grid-template-rows: auto minmax(calc(1.3em * 3), auto) auto;
  gap: 0.3rem;
  height: 100%;
}

.product-card__manufacturer {
  font-size: 0.78rem;
  min-height: 1em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}

.product-card__name {
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.product-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 2rem;
  margin-top: var(--space-1);
}

.product-card__price {
  font-weight: 800;
  font-size: var(--fs-h3);
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.product-card__action {
  display: flex;
  min-height: 2.5rem;
}

.product-card__quick-add {
  display: flex;
  width: 100%;
  margin: 0;
}

/* Pass 3: solide statt outline -- staerkere, "commerce-praesentere"
   Warenkorb-Aktion auf der Karte (Auftrag Abschnitt 3/6). */
.product-card__quick-add-btn {
  width: 100%;
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  border: 1px solid var(--color-accent);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.55rem var(--space-1);
}

.product-card__quick-add-btn:hover {
  border-color: var(--color-accent-hover);
  background: var(--color-accent-hover);
  color: var(--color-accent-contrast);
}

/* ---------- Product Rail (wiederverwendbare Produkt-Karussells) ----------
   Mobile: horizontal swipebar (Scroll-Snap, kein JS). Ab 60rem: festes Grid
   mit allen Produkten sichtbar (kein Scrollen mehr noetig), siehe Auftrag
   Abschnitt 9/18. */

.product-rail {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  margin: 0 calc(var(--space-2) * -1);
  padding: 0 var(--space-2) var(--space-1);
  -webkit-overflow-scrolling: touch;
}

.product-rail__item {
  display: flex;
  flex: 0 0 11.5rem;
  scroll-snap-align: start;
}

.product-rail__item > .product-card {
  width: 100%;
}

@media (min-width: 40rem) {
  .product-rail__item {
    flex-basis: 13rem;
  }
}

@media (min-width: 60rem) {
  .product-rail {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
    overflow: visible;
    margin: 0;
    padding: 0;
  }

  .product-rail__item {
    flex-basis: auto;
  }
}

@media (min-width: 75rem) {
  .product-rail {
    /* Pass 2, Abschnitt 6: 5-6 Produkte gleichzeitig sichtbar auf breiten
       Desktops. Die Home-Route liefert dafuer bewusst bis zu 6 Artikel pro
       Rail (siehe public/index.php) -- eine reine Frontend-Konfiguration,
       keine SCC-Aenderung. */
    grid-template-columns: repeat(6, 1fr);
  }
}

.availability {
  font-size: 0.8rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  display: inline-block;
  width: fit-content;
}

.availability--in-stock {
  background: #e4f4e6;
  color: #1e6b30;
}

.availability--out-of-stock {
  background: #f6e4e4;
  color: var(--color-danger);
}

.availability--unknown {
  background: #f0f0f0;
  color: var(--color-muted);
}

/* Produktdetail-"Masterbox": oben Galerie|Kaufbereich nebeneinander
   (.product-detail__top), darunter Beschreibung und "Passende Artikel" ueber
   die volle Breite derselben Box -- siehe docs/architecture.md fuer die
   Zielstruktur. */
.product-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.product-detail__top {
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 48rem) {
  .product-detail__top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: var(--space-4);
  }
}

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

/* "Kaufbox": Preis, Verfuegbarkeit, Menge und Warenkorb-Button sauber als
   eigene, klar abgegrenzte Box statt lose im Textfluss. */
.buy-box {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-3);
  background: var(--color-bg-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.buy-box__price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
}

.buy-box form {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: 0.25rem;
}

.buy-box form label {
  display: block;
  font-size: 0.85rem;
  color: var(--color-muted);
  margin-bottom: 0.3rem;
}

.buy-box form input[type='number'] {
  width: 4.5rem;
  padding: 0.6rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 1rem;
}

.buy-box form button,
.buy-box > button {
  flex: 1;
  min-width: 10rem;
  padding: 0.85rem var(--space-2);
  font-size: 1.05rem;
  font-weight: 600;
}

/* "Zusaetzliche Informationen": Artikelnummer, Sicherheitshinweise, GPSR-
   Herstellerangaben (soweit von SCC geliefert -- siehe CatalogArticle),
   Gewaehrleistungslink. Eigene Box direkt unter der Kaufbox. */
.additional-info {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-3);
}

.additional-info h2 {
  font-size: 1rem;
  margin: 0 0 var(--space-2);
}

.additional-info dl {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.additional-info dt {
  font-size: 0.8rem;
  color: var(--color-muted);
  font-weight: 600;
  margin: 0 0 0.2rem;
}

.additional-info dd {
  margin: 0;
  font-size: 0.95rem;
}

.additional-info .external-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* Produktbeschreibung: volle Breite der Masterbox, Fliesstext selbst aber
   auf eine gut lesbare Zeilenlaenge begrenzt (siehe
   DescriptionHtmlRenderer fuer die Sanitisierung des SCC-WYSIWYG-HTML). */
.product-description {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
}

.product-description h2 {
  margin: 0 0 var(--space-2);
}

.product-description__content {
  max-width: 46rem;
  font-size: 1rem;
  line-height: 1.7;
}

.product-description__content p {
  margin: 0 0 var(--space-2);
}

.product-description__content h2,
.product-description__content h3,
.product-description__content h4 {
  margin: var(--space-3) 0 var(--space-1);
  line-height: 1.3;
}

.product-description__content ul,
.product-description__content ol {
  margin: 0 0 var(--space-2);
  padding-left: 1.4rem;
}

.product-description__content li {
  margin-bottom: 0.3rem;
}

.product-description__content a {
  color: var(--color-accent);
}

/* SCC bleibt die einzige Rechtstextquelle. Dieser Layer gestaltet nur das
   bereits serverseitig eingeschränkte HTML für lange, ruhige Lesestrecken. */
.legal-document {
  max-width: 48rem;
  margin: 0 auto;
  overflow-wrap: anywhere;
}

.legal-document > h1 {
  margin-bottom: var(--space-1);
}

.legal-document__version {
  margin: 0 0 var(--space-4);
  color: var(--color-muted);
  font-size: 0.9rem;
}

.legal-document__content {
  font-size: 1rem;
  line-height: 1.75;
  hyphens: auto;
}

.legal-document__content p {
  margin: 0 0 var(--space-2);
}

.legal-document__content h2,
.legal-document__content h3 {
  line-height: 1.3;
  margin: var(--space-4) 0 var(--space-1);
}

.legal-document__content h2 { font-size: 1.45rem; }
.legal-document__content h3 { font-size: 1.2rem; }

.legal-document__content ul,
.legal-document__content ol {
  margin: 0 0 var(--space-2);
  padding-left: 1.6rem;
}

.legal-document__content li {
  margin-bottom: 0.4rem;
}

.legal-document__content a {
  color: var(--color-accent);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.15em;
}

.related-products {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
}

.related-products h2 {
  margin: 0 0 var(--space-3);
}

/* Galeriefaehig gebaut: Hauptbild + Thumbnail-Leiste. Aktuell liefert die
   SCC-API nur ein aufgeloestes Bild pro Artikel, deshalb rendert
   catalog-detail.php die Thumbnail-Leiste nur, wenn tatsaechlich mehr als
   ein Bild vorhanden ist -- keine erfundenen Zusatzbilder. */
.product-gallery__main {
  aspect-ratio: 1 / 1;
  width: 100%;
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.product-gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-gallery__thumbs {
  display: flex;
  gap: var(--space-1);
  margin-top: var(--space-1);
  overflow-x: auto;
}

.product-gallery__thumbs[hidden] {
  display: none;
}

.product-gallery__thumbs button {
  flex-shrink: 0;
  width: 4rem;
  height: 4rem;
  padding: 2px;
  border: 2px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-bg-subtle);
  cursor: pointer;
}

.product-gallery__thumbs button.is-active {
  border-color: var(--color-accent);
}

.product-gallery__thumbs img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.order-number {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.variant-picker {
  margin: var(--space-2) 0;
}

.variant-picker__label {
  font-size: 0.85rem;
  color: var(--color-muted);
  margin: 0 0 0.4rem;
}

.variant-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.variant-option {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.35rem 0.65rem 0.35rem 0.4rem;
  border: 2px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
  touch-action: manipulation;
}

.variant-option:hover,
.variant-option:focus-visible {
  border-color: var(--color-accent);
}

.variant-option.is-active {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 30%, transparent);
}

.variant-option__text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.variant-option__text small {
  margin-top: 0.15rem;
  color: var(--color-danger);
  font-size: 0.72rem;
}

.variant-swatch {
  display: inline-block;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  background-color: var(--color-bg-subtle);
  position: relative;
}

.variant-option--unavailable .variant-swatch {
  opacity: 0.45;
}

.variant-option--unavailable .variant-swatch::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(to top right, transparent 46%, var(--color-border) 48%, var(--color-border) 52%, transparent 54%);
}

.variant-stock {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.9rem;
}

@media (max-width: 30rem) {
  .variant-swatches li,
  .variant-option {
    width: 100%;
  }
}

.product-info__short-description {
  color: var(--color-muted);
  font-size: 0.95rem;
  margin: 0 0 var(--space-2);
}

.product-info__brand {
  color: var(--color-muted);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 0.25rem;
}

.price {
  font-size: 1.5rem;
  font-weight: 700;
}

.vat-note {
  color: var(--color-muted);
  font-size: 0.85rem;
}

.cart-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.cart-table {
  width: 100%;
  min-width: 32rem;
  border-collapse: collapse;
}

.cart-table th,
.cart-table td {
  text-align: left;
  padding: var(--space-1);
  border-bottom: 1px solid var(--color-border);
}

.cart-table input[type='number'] {
  width: 4rem;
  padding: 0.25rem;
}

.cart-summary {
  margin-top: var(--space-3);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
}

.flash {
  padding: var(--space-2);
  border-radius: 4px;
  margin-bottom: var(--space-2);
}

.flash--error {
  background: #f6e4e4;
  color: var(--color-danger);
  border: 1px solid var(--color-danger);
}

.flash--info {
  background: #eef2fb;
  color: #24437a;
  border: 1px solid #24437a;
}

.empty-state {
  color: var(--color-muted);
  padding: var(--space-4) 0;
  text-align: center;
}

/* Footer/Newsletter-Politur: kompakter, markiger -- siehe Auftrag
   "Footer / Newsletter Polish" + "Footer-Assets exakt integrieren". Weniger
   vertikale Luft (space-3 statt space-5 vor dem Footer, engere Innenabstaende),
   Logo-/Community-Spalten ergaenzt, bestehende Link-Spalten unangetastet. */
.site-footer {
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
  margin-top: var(--space-3);
}

.site-footer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-3) var(--space-2);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

@media (min-width: 40rem) {
  .site-footer__inner {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 60rem) {
  .site-footer__inner {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2) var(--space-3);
  }
}

@media (min-width: 75rem) {
  .site-footer__inner {
    grid-template-columns: minmax(9rem, 1fr) repeat(3, minmax(0, 1fr)) minmax(11rem, 1.3fr);
  }
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-brand__link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  color: var(--color-text);
}

.footer-brand__mark {
  display: block;
  height: 3rem;
  width: auto;
  min-width: 150px;
  max-width: 13rem;
  object-fit: contain;
}

.footer-col h2 {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 0.6rem;
  color: var(--color-text);
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.footer-col a {
  color: var(--color-muted);
  text-decoration: none;
  font-size: 0.86rem;
}

.footer-col a:hover {
  color: var(--color-accent);
}

/* Service-Einstieg: kurze klar lesbare Zeilen; die Trennpunkte duerfen
   umbrechen, lange Woerter sprengen keine der schmalen Footer-Spalten. */
.footer-service-contact {
  min-width: 0;
}
.footer-service-contact__topics {
  display: block;
  max-width: 100%;
  margin-top: 0.2rem;
  color: var(--color-muted);
  font-size: 0.76rem;
  line-height: 1.45;
  overflow-wrap: break-word;
  hyphens: auto;
}

.footer-note {
  color: var(--color-muted);
  font-size: 0.86rem;
  margin: 0;
}

.footer-col--community {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

@media (min-width: 60rem) {
  .footer-col--community {
    align-items: flex-end;
    text-align: right;
  }
}

.footer-community-note {
  margin: 0;
  line-height: 0;
}

.footer-community-note img {
  height: 2.5rem;
  width: auto;
  opacity: 0.88;
}

.site-footer__bottom {
  border-top: 1px solid var(--color-border);
  padding: var(--space-2);
  color: var(--color-muted);
  font-size: 0.8rem;
  text-align: center;
}

.site-footer__bottom p {
  margin: 0;
}

@media (min-width: 40rem) {
  .site-footer__bottom {
    text-align: left;
  }
}

/* Skyline-Markendetail: jetzt Teil der Community-Spalte statt eigener
   Zeile darunter -- dadurch ruecken die Grafik in die Spalte hoch und
   fuellt den leeren Raum, der dort entsteht, weil die Community-Spalte
   (Ueberschrift + kurzes handgeschriebenes Detail) von Natur aus kuerzer
   ist als die Link-Spalten daneben (Sortiment/Rechtliches). margin-top:auto
   schiebt die Grafik an das untere Ende der (durch das Grid gleich hohen)
   Spalte, rechtsbuendig mit deren rechter Kante. */
.site-footer__skyline {
  margin: 0;
  margin-top: auto;
  line-height: 0;
}

.site-footer__skyline img {
  height: 4.25rem;
  width: auto;
  opacity: 0.85;
}

.error-page {
  text-align: center;
  padding: var(--space-4) 0;
}

.checkout-steps {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
  font-size: 0.9rem;
  color: var(--color-muted);
}

.checkout-steps .is-current {
  color: var(--color-text);
  font-weight: 700;
}

.form-fieldset {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: var(--space-2);
  margin-bottom: var(--space-3);
}

.form-fieldset legend {
  font-weight: 700;
  padding: 0 var(--space-1);
}

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

@media (min-width: 40rem) {
  .form-grid {
    grid-template-columns: 1fr 1fr;
  }
  .form-grid .form-group--full {
    grid-column: 1 / -1;
  }
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.form-group label {
  font-size: 0.9rem;
  font-weight: 600;
}

.form-group input[type='text'],
.form-group input[type='email'],
.form-group input[type='tel'] {
  padding: var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 1rem;
}

.form-group.has-error input {
  border-color: var(--color-danger);
}

.field-error {
  color: var(--color-danger);
  font-size: 0.8rem;
}

.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

.checkbox-row input[type='checkbox'] {
  margin-top: 0.25rem;
}

.checkbox-row.has-error {
  color: var(--color-danger);
}

.order-summary-section {
  margin-bottom: var(--space-3);
}

.order-summary-section h2 {
  font-size: 1.1rem;
  margin-bottom: var(--space-1);
}

.address-block {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: var(--space-2);
}

.disabled-note {
  color: var(--color-muted);
  font-size: 0.85rem;
}

/* ---------- Breadcrumb ---------- */

.breadcrumb {
  margin-bottom: var(--space-2);
  font-size: 0.85rem;
}

.breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  color: var(--color-muted);
}

.breadcrumb li:not(:last-child)::after {
  content: '/';
  margin-left: 0.35rem;
  color: var(--color-border);
}

.breadcrumb a {
  color: var(--color-muted);
  text-decoration: none;
}

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

.breadcrumb li[aria-current='page'] {
  color: var(--color-text);
  font-weight: 600;
}

/* ---------- Section heading ---------- */

.section {
  margin-bottom: var(--space-5);
}

/* Rhythmus-Utilities (Art-Direction-Pass 2, Abschnitt 15): grosse
   Editorial-/Markenflaechen bekommen bewusst mehr Luft, Commerce-Rails
   bleiben kompakter -- die Seite soll sich wie eine kuratierte Markenwelt
   anfuehlen, nicht wie eine gleichfoermige Komponentenliste. */
.section--loose {
  margin-bottom: var(--space-7);
}

.section--tight {
  margin-bottom: var(--space-3);
}

.section__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.section__header h2 {
  font-size: var(--fs-section-heading);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0;
}

.section__header .section__all-link {
  font-size: 0.9rem;
  text-decoration: none;
  white-space: nowrap;
}

/* ---------- Hero ----------
   Struktur bewusst: Hintergrundbild (austauschbar, per <picture> nach
   Breakpoint) + Gradient-Overlay + echter HTML-Text/Buttons obendrauf
   (siehe Auftrag Abschnitt 4/7) -- keine Texte im Bild. */

.hero {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-7);
  min-height: 26rem;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  margin: 0;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, rgba(20, 19, 17, 0.8) 0%, rgba(20, 19, 17, 0.38) 55%, rgba(20, 19, 17, 0.05) 100%);
}

.hero--light .hero__scrim {
  background: linear-gradient(0deg, rgba(251, 250, 247, 0.92) 0%, rgba(251, 250, 247, 0.55) 55%, rgba(251, 250, 247, 0.05) 100%);
}

.hero__content {
  position: relative;
  padding: var(--space-4) var(--space-2);
  max-width: 40rem;
  color: var(--color-dark-contrast);
}

.hero--light .hero__content {
  color: var(--color-text);
}

.badge {
  display: inline-block;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-1);
}

.hero__eyebrow {
  font-weight: 700;
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  margin: 0 0 var(--space-1);
  opacity: 0.92;
}

.hero h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-2);
}

.hero__subline {
  font-size: 1.15rem;
  line-height: 1.55;
  max-width: 34rem;
  margin: 0 0 var(--space-3);
  opacity: 0.95;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

@media (min-width: 40rem) {
  .hero {
    min-height: 32rem;
  }
}

@media (min-width: 60rem) {
  .hero {
    min-height: 38rem;
  }

  .hero__content {
    padding: var(--space-5) var(--space-4);
  }
}

@media (min-width: 75rem) {
  .hero {
    min-height: 44rem;
  }

  .hero__content {
    padding: var(--space-6) var(--space-5);
    max-width: 44rem;
  }
}

/* ---------- Kategorien-Showcase ----------
   "Sortiment" (Variante --label, Bild oben + Titel darunter) und
   "Entdecke deine Welt" (Variante --overlay, Text auf dunklem Verlauf ueber
   dem Bild) teilen sich Grid + Tile-Komponente (siehe Auftrag Pass 2,
   Abschnitt 5/10) -- keine zwei separaten Komponenten. */

/* auto-fit statt fester Spaltenzahl: die tatsaechliche Anzahl an echten
   SCC-Top-Level-Kategorien ist nicht vorhersehbar (aktuell 4 im Fixture-
   Katalog, produktiv ggf. mehr/weniger). Mit einer festen 6er-Spalte
   wuerden bei z. B. 4 Kategorien zwei Spalten leer bleiben (sichtbare
   Luecke statt groesserer Kacheln). auto-fit lässt bis zu 6 Kacheln in
   einer Reihe zu (Auftrag Abschnitt 5), foegt bei weniger Kategorien
   aber die vorhandenen Kacheln gleichmaessig auf die volle Breite. */
.category-showcase {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: var(--space-2);
}

@media (min-width: 60rem) {
  .category-showcase {
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--space-3);
  }
}

.category-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-bg-subtle);
  text-decoration: none;
  color: var(--color-text);
  transition: box-shadow 0.15s ease;
}

.category-tile:hover {
  box-shadow: 0 10px 26px rgba(32, 31, 28, 0.16);
}

/* Pass 3: kompakter und staerker bildorientiert als in Pass 2 (dort recht
   hohe Portraet-Kacheln) -- ein festes, knapperes Seitenverhaeltnis statt
   einer zusaetzlichen Breakpoint-Stufe. */
.category-tile__media {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--color-bg-subtle);
}

.category-showcase--assortment .category-tile__media {
  aspect-ratio: 3 / 2;
}

.category-tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}

.category-tile:hover .category-tile__media img {
  transform: scale(1.04);
}

.category-tile__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  padding: var(--space-1) var(--space-2);
  font-weight: 700;
  font-size: 0.95rem;
}

.category-tile__arrow {
  color: var(--color-accent);
  flex-shrink: 0;
}

/* ---------- Themenwelten-Variante: Text-Overlay auf dunklem Verlauf ---------- */

.category-showcase--themes {
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 40rem) {
  .category-showcase--themes {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 60rem) {
  .category-showcase--themes {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 15rem;
  }

  /* Ein leicht groesseres, "featured" erstes Kachel-Feld sorgt fuer
     dezente Editorial-Dynamik, ohne in ein unruhiges Pinterest-Layout zu
     kippen (siehe Auftrag Abschnitt 10). */
  .category-showcase--themes .category-tile:first-child {
    grid-column: span 2;
    grid-row: span 2;
  }
}

.category-tile--overlay {
  color: var(--color-dark-contrast);
}

.category-showcase--themes .category-tile--overlay {
  height: 100%;
}

@media (min-width: 60rem) {
  .category-tile--overlay .category-tile__media {
    height: 100%;
    aspect-ratio: auto;
  }
}

.category-tile--overlay .category-tile__media {
  position: relative;
}

.category-tile--overlay .category-tile__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(20, 19, 17, 0.85) 0%, rgba(20, 19, 17, 0.15) 60%, rgba(20, 19, 17, 0) 100%);
}

.category-tile--overlay .category-tile__overlay-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  padding: var(--space-2);
  font-weight: 700;
  font-size: 1.05rem;
}

.category-showcase--themes .category-tile:first-child .category-tile__overlay-label {
  font-size: 1.3rem;
}

.category-tile--overlay .category-tile__arrow {
  color: var(--color-dark-contrast);
}

/* ---------- Unterkategorien (Kategorieseite) ---------- */

.subcategory-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}

@media (min-width: 40rem) {
  .subcategory-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.subcategory-tile {
  display: block;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--color-text);
  font-weight: 600;
  font-size: 0.9rem;
  text-align: center;
}

.subcategory-tile__media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  margin-bottom: var(--space-1);
}

.subcategory-tile__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.subcategory-tile__label {
  display: block;
}

.subcategory-tile:hover {
  border-color: var(--color-accent);
}

.category-hero {
  width: 100%;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-3);
}

.category-hero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

.category-heading h1 {
  margin: 0;
}

.category-count {
  color: var(--color-muted);
  font-size: 0.9rem;
}

/* Widerruf (§ 355/356 BGB). Nutzt durchgaengig die vorhandenen Tokens/Bausteine
   (.button, .flash, .form-group, .checkout-steps); ergaenzt nur, was im
   Designsystem bisher fehlt. Kein Shopware-CSS uebernommen -- der bestehende
   Shop diente ausschliesslich als gestalterische Referenz. */
.withdrawal-footer-action {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-2);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  align-items: flex-start;
}

@media (min-width: 40rem) {
  .withdrawal-footer-action {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.withdrawal-footer-action__text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.withdrawal-footer-action__text strong {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.withdrawal-footer-action__text span {
  color: var(--color-muted);
  font-size: 0.9rem;
}

.withdrawal-footer-action__button {
  flex-shrink: 0;
}

.withdrawal-intro {
  max-width: 44rem;
  color: var(--color-muted);
}

.withdrawal-summary {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.25rem var(--space-2);
  max-width: 44rem;
  margin: 0 0 var(--space-3);
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg-subtle);
}

@media (min-width: 40rem) {
  .withdrawal-summary {
    grid-template-columns: 12rem 1fr;
  }
}

.withdrawal-summary dt {
  font-weight: 600;
  font-size: 0.9rem;
}

.withdrawal-summary dd {
  margin: 0 0 var(--space-1);
  overflow-wrap: anywhere;
}

/* Beide Schritte sind gleichwertig erreichbar -- kein Dark Pattern, das den
   Rueckweg optisch abwertet oder versteckt. */
.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin-top: var(--space-3);
}

.field-hint {
  color: var(--color-muted);
  font-size: 0.8rem;
}

.form-group textarea {
  padding: var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 1rem;
  font-family: inherit;
  resize: vertical;
}

.form-group.has-error textarea {
  border-color: var(--color-danger);
}

.flash--success {
  background: #e9f5ec;
  color: #17663b;
  border: 1px solid #17663b;
}

/* ==================================================================
   Homepage-Redesign: zusaetzliche wiederverwendbare Sections
   (Editorial-Banner, Originals, Erlebnis, Service/Trust, Newsletter).
   Nutzt ausschliesslich die Tokens oben, siehe UI-Redesign-Auftrag.
   ================================================================== */

/* ---------- Editorial / Campaign Banner ---------- */

.editorial-banner {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 22rem;
  display: flex;
  align-items: center;
  isolation: isolate;
  margin-bottom: var(--space-6);
}

/* xl-Variante: fuer die grossen bildstarken Momente (Erlebnis-Section,
   Abschnitt 12) -- noch etwas dominanter als der Standard-Editorial-Banner
   (BOS-Themenblock, Abschnitt 7). */
.editorial-banner--xl {
  min-height: 26rem;
}

.editorial-banner__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.editorial-banner__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(20, 19, 17, 0.78) 0%, rgba(20, 19, 17, 0.3) 65%, rgba(20, 19, 17, 0.05) 100%);
}

.editorial-banner--light .editorial-banner__scrim {
  background: linear-gradient(90deg, rgba(251, 250, 247, 0.9) 0%, rgba(251, 250, 247, 0.45) 65%, rgba(251, 250, 247, 0.05) 100%);
}

.editorial-banner__content {
  position: relative;
  padding: var(--space-4) var(--space-2);
  color: var(--color-dark-contrast);
  max-width: 30rem;
}

.editorial-banner--light .editorial-banner__content {
  color: var(--color-text);
}

.editorial-banner__eyebrow {
  font-weight: 700;
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  margin: 0 0 var(--space-1);
  opacity: 0.9;
}

.editorial-banner__content h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  font-weight: 800;
  margin: 0 0 var(--space-1);
}

.editorial-banner__content p {
  margin: 0 0 var(--space-2);
  opacity: 0.95;
}

@media (min-width: 60rem) {
  .editorial-banner {
    min-height: 26rem;
  }

  .editorial-banner--xl {
    min-height: 32rem;
  }

  .editorial-banner__content {
    padding: var(--space-5) var(--space-4);
  }
}

@media (min-width: 75rem) {
  .editorial-banner {
    min-height: 30rem;
  }

  .editorial-banner--xl {
    min-height: 36rem;
  }
}

/* ---------- Frankensteins Originals (dunkle, zweigeteilte Premium-
   Section: Content + grosse Bildflaeche, siehe Auftrag Pass 2, Abschnitt
   9) ---------- */

.originals {
  background: var(--color-dark);
  color: var(--color-dark-contrast);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
}

.originals__content {
  padding: var(--space-5) var(--space-2);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.originals__media {
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--color-dark);
}

.originals__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.92;
}

.originals__lab-tag {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: var(--space-2);
  padding: 0.2rem 0.6rem;
  border: 1px solid rgba(245, 243, 238, 0.35);
  border-radius: 999px;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #cfcdc6;
}

.originals__eyebrow {
  font-weight: 700;
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: #8fd3a8;
  margin: 0 0 var(--space-1);
}

.originals h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  font-weight: 800;
  margin: 0 0 var(--space-2);
}

.originals__text {
  color: #cfcdc6;
  margin: 0 0 var(--space-3);
  max-width: 30rem;
}

.originals__features {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  font-size: 0.85rem;
  color: #cfcdc6;
}

.originals__features li {
  padding-left: 1.1rem;
  position: relative;
}

.originals__features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--color-accent);
}

@media (min-width: 60rem) {
  .originals {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: stretch;
  }

  .originals__media {
    aspect-ratio: auto;
  }

  .originals__content {
    padding: var(--space-6) var(--space-5);
  }
}

/* ---------- Service / Trust ---------- */

.service-trust__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  text-align: center;
}

.service-trust__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-muted);
  font-size: 0.9rem;
}

.service-trust__item svg {
  color: var(--color-accent);
}

.service-trust__item img {
  max-height: 2rem;
  width: auto;
}

.service-trust__item p {
  margin: 0;
  color: var(--color-text);
  font-weight: 600;
}

.service-trust__subline {
  display: block;
  margin-top: 0.15rem;
  color: var(--color-muted);
  font-weight: 400;
  font-size: 0.8rem;
}

@media (min-width: 40rem) {
  .service-trust__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 60rem) {
  .service-trust__grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* ---------- Newsletter ---------- */

.newsletter {
  background: var(--color-bg-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-2) var(--space-2);
}

.newsletter__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.newsletter__text h2 {
  margin: 0 0 0.3rem;
  font-size: var(--fs-h3);
}

.newsletter__text p {
  margin: 0;
  color: var(--color-muted);
}

.newsletter__form {
  display: flex;
  gap: var(--space-1);
  max-width: 26rem;
}

.newsletter__form input {
  flex: 1;
  padding: 0.55rem var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-surface);
  font-size: 1rem;
}

.newsletter__hint {
  margin: var(--space-1) 0 0;
  font-size: 0.8rem;
  color: var(--color-muted);
}

.newsletter__hint a {
  color: inherit;
  text-decoration: underline;
}

.newsletter__notice {
  margin: var(--space-1) 0 0;
  max-width: 34rem;
  color: var(--color-success, #176b45);
  font-size: 0.9rem;
  font-weight: 600;
}

.newsletter__notice--error {
  color: var(--color-error, #a12622);
}

.newsletter-confirmation {
  max-width: 42rem;
  margin: var(--space-4) auto;
}

.newsletter-confirmation form,
.newsletter-confirmation .button {
  margin-top: var(--space-2);
}

/* Handschriftliches Community-Detail (Auftrag "Footer-Assets exakt
   integrieren", Abschnitt 5): dezentes, kleines Markendetail rechts im
   Newsletter -- kein Banner, daher bewusst klein/luftig und auf schmalen
   Screens unter dem Formular statt daneben. */
.newsletter__community-note {
  margin: 0;
  line-height: 0;
  align-self: center;
}

.newsletter__community-note img {
  height: 2.75rem;
  width: auto;
  opacity: 0.85;
}

/* ---------- Letzte-Chance-Badge (Auslaufartikel) ---------- */

.last-chance-badge {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  z-index: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.last-chance-badge--detail {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  z-index: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

@media (max-width: 40rem) {
  .last-chance-badge {
    top: var(--space-1);
    right: var(--space-1);
    padding: 0.25rem 0.5rem;
    font-size: 0.68rem;
  }

  .last-chance-badge--detail {
    top: var(--space-1);
    right: var(--space-1);
    padding: 0.3rem 0.6rem;
    font-size: 0.72rem;
  }
}

@media (min-width: 60rem) {
  .last-chance-badge {
    top: var(--space-3);
    right: var(--space-3);
    padding: 0.45rem 0.95rem;
    font-size: 0.8rem;
  }

  .last-chance-badge--detail {
    top: var(--space-3);
    right: var(--space-3);
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
  }
}

@media (min-width: 90rem) {
  .last-chance-badge {
    top: var(--space-4);
    right: var(--space-4);
    padding: 0.5rem 1.05rem;
    font-size: 0.85rem;
  }

  .last-chance-badge--detail {
    top: var(--space-4);
    right: var(--space-4);
    padding: 0.55rem 1.15rem;
    font-size: 0.9rem;
  }
}

@media (min-width: 60rem) {
  .newsletter__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
  }

  .newsletter__text {
    max-width: 20rem;
  }

  .newsletter__form-wrap {
    flex-shrink: 0;
  }

  .newsletter__community-note {
    flex-shrink: 0;
    margin-left: auto;
  }
}

/* Compact, mobile-first checkout. No changes to unrelated storefront sections. */
.checkout-shell { max-width: 68rem; margin: 0 auto; }
.checkout-shell--address { max-width: 48rem; }
.checkout-shell .cart-table-wrapper { background: #fff; border: 1px solid var(--color-border); border-radius: 14px; }
.checkout-shell .cart-table { min-width: 0; }
.checkout-shell .cart-table td, .checkout-shell .cart-table th { padding: .85rem .75rem; vertical-align: middle; }
.checkout-shell .cart-table tr:last-child td { border-bottom: 0; }
.checkout-product { display: flex; align-items: center; gap: .85rem; min-width: 0; }
.checkout-product > div { min-width: 0; }
.checkout-product__image { width: 4.5rem; height: 4.5rem; flex: 0 0 4.5rem; border-radius: 9px; background: #f5f6f7; display: grid; place-items: center; overflow: hidden; text-decoration: none; color: var(--color-muted); }
.checkout-product__image img { width: 100%; height: 100%; object-fit: contain; }
.checkout-product small { display: block; color: var(--color-muted); font-size: .8rem; margin-top: .3rem; }
.checkout-shell .cart-summary { margin-left: auto; max-width: 26rem; background: #fff; border: 1px solid var(--color-border); border-radius: 14px; padding: 1.25rem; align-items: stretch; }
.checkout-shell .cart-summary p { margin: .15rem 0; }
.checkout-shell .cart-summary a.button { text-align: center; }
.low-order-hint { border-radius: 8px; padding: .8rem; background: #fff3df; color: #704600; font-size: .9rem; line-height: 1.5; }
.low-order-hint a { color: inherit; font-weight: 700; text-decoration: underline; }
.low-order-surcharge { color: #9a4e00; }
.checkout-shell--address .form-fieldset { background: #fff; padding: 1.15rem; margin-bottom: 1rem; border-radius: 12px; }
.checkout-shell--address .form-grid { gap: .85rem; }
.checkout-shell--address .form-group input { width: 100%; box-sizing: border-box; }
.checkout-shell--address .form-group label { font-size: .85rem; }
.checkout-delivery-toggle { padding: .65rem 0; font-weight: 650; cursor: pointer; }
.checkout-next-button { width: 100%; min-height: 3rem; }
#shipping-address-fields[hidden] { display: none; }
@media (max-width: 45rem) {
  .checkout-shell .cart-table-wrapper { overflow: visible; background: transparent; border: 0; }
  .checkout-shell .cart-table { width: 100%; min-width: 0; }
  .checkout-shell .cart-table thead { display: none; }
  .checkout-shell .cart-table tbody { display: grid; gap: .75rem; }
  .checkout-shell .cart-table tr { display: grid; grid-template-columns: 1fr 1fr; padding: .7rem; border: 1px solid var(--color-border); border-radius: 12px; background: #fff; gap: .4rem; }
  .checkout-shell .cart-table td { display: block; border: 0; padding: .25rem; }
  .checkout-shell .cart-table td:first-child { grid-column: 1 / -1; }
  .checkout-shell .cart-table td:last-child { grid-column: 1 / -1; }
  .checkout-shell .cart-table input[type='number'] { max-width: 4.5rem; }
  .checkout-shell .cart-summary { max-width: none; }
}

/* Short final checkout: product list, addresses, payment, costs, consent and CTA. */
.checkout-final { max-width: 67rem; }
.checkout-final h1 { margin: 0 0 .8rem; font-size: clamp(1.4rem,2.5vw,2rem); }
.checkout-final .checkout-steps { margin-bottom: .55rem; font-size: .8rem; }
.checkout-final__grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: start; gap: 1rem; }
.checkout-final__details { display: grid; gap: .85rem; min-width: 0; }
.checkout-final__panel { background: #fff; border: 1px solid var(--color-border); border-radius: 13px; padding: 1rem; min-width: 0; }
.checkout-final__panel h2 { font-size: 1.08rem; margin: 0 0 .75rem; }
.checkout-final__heading { display: flex; align-items: baseline; gap: 1rem; justify-content: space-between; }
.checkout-final__heading > a { font-size: .83rem; flex-shrink: 0; }
.checkout-final__address-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.checkout-final__address-grid h3 { color: var(--color-muted); font-size: .8rem; margin: 0 0 .35rem; }
.checkout-final__address-grid p { margin: .07rem 0; font-size: .87rem; line-height: 1.4; overflow-wrap: anywhere; }
.checkout-final__contact { border-top: 1px solid var(--color-border); padding-top: .6rem; margin: .65rem 0 0; font-size: .83rem; overflow-wrap: anywhere; color: var(--color-muted); }
.checkout-final__payment-options { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: .5rem; }
.checkout-final__payment-choice { display: flex; align-items: center; gap: .7rem; padding: .65rem .8rem; border: 1px solid var(--color-border); border-radius: 8px; cursor: pointer; }
.checkout-final__payment-choice:has(input:checked) { background: var(--color-accent-soft); border-color: var(--color-accent); }
.checkout-final__payment-choice strong { display: block; }
.checkout-final__payment-choice small { display: block; margin-top: .12rem; font-size: .8rem; color: var(--color-muted); }
.checkout-final__payment-unavailable { font-size: .82rem; color: var(--color-muted); margin: .25rem 0 0; }
.checkout-final__summary { position: sticky; top: 1rem; }
.checkout-final__items { list-style: none; margin: .3rem 0 .8rem; padding: 0; max-height: 15rem; overflow-y: auto; }
.checkout-final__item { display: grid; grid-template-columns: 3.35rem minmax(0,1fr) auto; align-items: center; gap: .55rem; padding: .4rem 0; border-bottom: 1px solid var(--color-border); }
.checkout-final__item .checkout-product__image { width: 3.35rem; height: 3.35rem; flex-basis: 3.35rem; }
.checkout-final__item-name { min-width: 0; font-size: .83rem; line-height: 1.35; overflow-wrap: anywhere; }
.checkout-final__item-name strong { font-weight: 600; display: block; }
.checkout-final__item-name small { font-size: .76rem; color: var(--color-muted); display: block; margin-top: .2rem; }
.checkout-final__item-total { font-size: .87rem; white-space: nowrap; }
.checkout-final__totals { display: grid; gap: .38rem; font-size: .9rem; }
.checkout-final__totals > div { display: flex; justify-content: space-between; gap: .7rem; }
.checkout-final__totals > div > span:last-child { white-space: nowrap; }
.checkout-final__totals small { color: var(--color-muted); font-size: .76rem; }
.checkout-final__grand-total { border-top: 1px solid var(--color-border); padding-top: .65rem; margin-top: .28rem; font-size: 1.08rem; }
.checkout-final__consent { border-top: 1px solid var(--color-border); margin: .85rem 0 .7rem; padding-top: .8rem; font-size: .78rem; line-height: 1.55; }
.checkout-final__consent input { flex-shrink: 0; margin-top: .22rem; }
.checkout-final__consent a { font-weight: 650; }
.checkout-final__submit { width: 100%; min-height: 2.9rem; font-weight: 700; }
.checkout-final #paypal-button-container { margin-top: .25rem; }
@media (max-width: 46rem) {
  .checkout-final__grid { grid-template-columns: 1fr; }
  .checkout-final__summary { position: static; }
  .checkout-final__panel { padding: .85rem; }
  .checkout-final__address-grid { gap: .6rem; }
  .checkout-final__items { max-height: none; }
}

/* Rueckgabe-Service: klarer Einstieg in Widerruf oder Kontakt, ohne neue Rechtsversprechen. */
.returns-overview { max-width: 66rem; margin: 0 auto; }
.returns-overview > h1 { margin-bottom: .6rem; }
.returns-overview__intro { max-width: 44rem; color: var(--color-muted); margin: 0 0 1.5rem; }
.returns-overview__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }
.returns-overview__card { display: flex; flex-direction: column; align-items: flex-start; gap: .8rem; background: #fff; border: 1px solid var(--color-border); border-radius: 14px; padding: 1.5rem; }
.returns-overview__card h2 { font-size: 1.2rem; margin: 0; }
.returns-overview__card p { margin: 0; line-height: 1.6; }
.returns-overview__card .button { margin-top: auto; }
.returns-overview__note { font-size: .88rem; color: var(--color-muted); }
.returns-overview__legal-note { font-size: .85rem; color: var(--color-muted); margin-top: 1.25rem; }
@media (max-width: 44rem) { .returns-overview__grid { grid-template-columns: 1fr; } .returns-overview__card { padding: 1rem; } }