/* ═══════════════════════════════════════════════════════
   MAYATI MODE – Design System
   ═══════════════════════════════════════════════════════ */

/* ── Tokens ─────────────────────────────────────────── */
:root {
  --clr-bg:        #1C1C1C;
  --clr-bg-2:      #242424;
  --clr-bg-3:      #2e2e2e;
  --clr-gold:      #C9A84C;
  --clr-gold-dim:  rgba(201,168,76,0.18);
  --clr-text:      #e8e0d5;
  --clr-text-dim:  #a09890;
  --clr-white:     #ffffff;
  --clr-border:    rgba(255,255,255,0.09);
  --clr-error:     #e07070;
  --clr-success:   #7aaa88;

  --ff-serif: 'Cormorant Garamond', Georgia, serif;
  --ff-sans:  'Inter', system-ui, sans-serif;

  --radius:   4px;
  --radius-lg: 8px;
  --shadow:   0 4px 24px rgba(0,0,0,0.45);
  --trans:    0.25s ease;
}

/* ── Barrierefreiheit: Kontrast-/Farbmodi ─────────────── */
html[data-contrast="high"] {
  --clr-bg:        #000000;
  --clr-bg-2:      #0a0a0a;
  --clr-bg-3:      #141414;
  --clr-gold:      #ffd54a;
  --clr-gold-dim:  rgba(255,213,74,0.22);
  --clr-text:      #ffffff;
  --clr-text-dim:  #d8d8d8;
  --clr-border:    rgba(255,255,255,0.35);
  --clr-error:     #ff6b6b;
  --clr-success:   #6bff9a;
}
/* Rot-Grün-sichere Palette (Okabe-Ito): Erfolg in Blau statt Grün,
   Fehler in Vermillion statt Rot – für Protanopie/Deuteranopie klar unterscheidbar. */
html[data-contrast="colorblind"] {
  --clr-gold:      #e8a33d;
  --clr-gold-dim:  rgba(232,163,61,0.22);
  --clr-error:     #d55e00;
  --clr-success:   #0072b2;
}

/* ── Barrierefreiheit: Schriftgröße ───────────────────── */
html[data-fontsize="lg"]  { font-size: 108%; }
html[data-fontsize="xl"]  { font-size: 118%; }
html[data-fontsize="xxl"] { font-size: 130%; }

/* ── Reset ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--clr-bg);
  color: var(--clr-text);
  font-family: var(--ff-sans);
  font-size: 15px;
  line-height: 1.65;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; font-family: inherit; }
/* 16px ist bei Eingabefeldern keine Geschmacksfrage, sondern die Untergrenze:
   Safari auf dem iPhone zoomt die ganze Seite heran, sobald ein Feld mit
   kleinerer Schrift den Fokus bekommt — und zoomt danach nicht von allein
   zurück. Bei der Kasse geschah das einmal je Adressfeld. Deshalb steht die
   Grösse hier zentral: Einzelne Felder dürfen grösser werden, nicht kleiner.
   Ohne diese Zeile nehmen Felder ohne eigene Angabe ausserdem die winzige
   Browser-Vorgabe von rund 13px statt der Schrift der Seite.

   max(16px, 1rem) und nicht bloss 16px: Eine feste Pixelangabe wüchse NICHT
   mehr mit der Schriftgrösse aus dem Barrierefreiheits-Menü (html[data-fontsize]
   skaliert rem, nicht px). Wer dort „sehr gross" wählt, hätte sonst grosse
   Schrift auf der Seite und kleine in genau den Feldern, die er ausfüllen
   muss. So gilt: 16px als Untergrenze fürs iPhone, darüber wächst es mit. */
input, select, textarea { font-family: inherit; font-size: max(16px, 1rem); }

/* ── Accessibility ───────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -50px;
  left: 0;
  background: var(--clr-gold);
  color: #000;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  z-index: 9999;
  transition: top var(--trans);
}
.skip-link:focus { top: 0; }

/* Nur für Screenreader: unsichtbar, aber vorgelesen.
   Gebraucht dort, wo mehrere gleich beschriftete Schaltflächen untereinander
   stehen – "Nach oben" allein sagt einem Screenreader-Nutzer nicht, welche
   Kategorie gemeint ist. display:none oder visibility:hidden gehen dafür
   NICHT: die nehmen den Text auch dem Screenreader weg. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Barrierefreiheit-Toolbar ──────────────────────────── */
.a11y-toolbar {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 300;
}
.a11y-toggle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--clr-bg-2);
  border: 1px solid var(--clr-border);
  color: var(--clr-text);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
}
.a11y-panel {
  position: absolute;
  bottom: 52px;
  right: 0;
  width: 220px;
  background: var(--clr-bg-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: 14px;
  box-shadow: var(--shadow);
}
.a11y-panel-title {
  font-size: 0.68rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--clr-text-dim);
  margin-bottom: 8px;
}
.a11y-panel-title:not(:first-child) { margin-top: 14px; }
.a11y-btn-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.a11y-btn-col { flex-direction: column; }
.a11y-btn-row [aria-pressed="true"] {
  color: var(--clr-white);
  background: var(--clr-gold-dim);
  border-color: var(--clr-gold);
}

/* Sichtbarer Fokus-Ring für Tastaturnutzung (Maus/Touch bleibt unberührt) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--clr-gold);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Bewegung reduzieren, wenn vom Betriebssystem gewünscht */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Typography ──────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--ff-serif);
  font-weight: 300;
  line-height: 1.2;
  color: var(--clr-white);
}
h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); letter-spacing: 4px; text-transform: uppercase; }
h2 { font-size: clamp(1.6rem, 3vw, 2.6rem); letter-spacing: 3px; text-transform: uppercase; }
h3 { font-size: 1.2rem; letter-spacing: 2px; text-transform: uppercase; }
h4 { font-size: 1rem; letter-spacing: 1px; }

.section-title {
  text-align: center;
  margin-bottom: 48px;
}
.section-title::after {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  background: var(--clr-gold);
  margin: 16px auto 0;
}

/* ── Layout ──────────────────────────────────────────── */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}
section { padding: 80px 0; }

/* ── Header ──────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(28,28,28,0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--clr-border);
}
.header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  height: 84px;
  display: flex;
  align-items: center;
  gap: 32px;
}

/* Logo */
.site-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  margin-right: auto;
}
.logo-img {
  height: 72px;
  width: auto;
}

/* Primary nav */
.primary-nav ul {
  display: flex;
  align-items: center;
  gap: 0;
}
.primary-nav > ul > li {
  position: relative;
}
.primary-nav > ul > li > a {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  font-size: 0.72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--clr-text-dim);
  transition: color var(--trans);
  white-space: nowrap;
}
.primary-nav > ul > li > a:hover,
.primary-nav > ul > li > a[aria-current="page"] {
  color: var(--clr-white);
}
.primary-nav > ul > li > a[aria-current="page"] {
  color: var(--clr-gold);
}
.dropdown-arrow {
  transition: transform var(--trans);
  opacity: 0.5;
}
.has-dropdown:hover .dropdown-arrow,
.has-dropdown:focus-within .dropdown-arrow,
.has-dropdown.is-touched .dropdown-arrow {
  transform: rotate(180deg);
  opacity: 1;
}

/* ── Dropdown ────────────────────────────────────────── */
.dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) scaleY(0);
  transform-origin: top center;
  background: rgba(16,16,16,0.99);
  border: 1px solid var(--clr-border);
  border-top: 2px solid var(--clr-gold);
  min-width: 200px;
  padding: 16px 0;
  opacity: 0;
  visibility: hidden;
  transition: transform 0.28s ease, opacity 0.28s ease, visibility 0.28s;
  z-index: 150;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown,
.has-dropdown.is-touched .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) scaleY(1);
}

/* Mega-dropdown (mehrere Gruppen) */
.mega-dropdown {
  display: flex;
  gap: 0;
  min-width: 520px;
  left: 0;
  transform: scaleY(0);
  transform-origin: top left;
}
.has-dropdown:hover .mega-dropdown,
.has-dropdown:focus-within .mega-dropdown,
.has-dropdown.is-touched .mega-dropdown {
  transform: scaleY(1);
}

.dropdown-group {
  flex: 1;
  padding: 4px 20px 12px;
  border-right: 1px solid var(--clr-border);
}
.dropdown-group:last-child { border-right: none; }

.dropdown-group-title {
  font-size: 0.6rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--clr-gold);
  padding: 4px 0 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--clr-border);
}

.dropdown a {
  display: block;
  padding: 7px 0;
  font-size: 0.75rem;
  letter-spacing: 1px;
  color: var(--clr-text-dim);
  transition: color var(--trans), padding-left var(--trans);
}
.dropdown a:hover {
  color: var(--clr-gold);
  padding-left: 6px;
}

/* ── Icon Buttons ────────────────────────────────────── */
.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  color: var(--clr-text-dim);
  border-radius: var(--radius);
  transition: color var(--trans);
  cursor: pointer;
  text-decoration: none;
}
.icon-btn:hover { color: var(--clr-white); }

/* ── Header Actions ──────────────────────────────────── */
.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
}

/* ── Inline Suche ────────────────────────────────────── */
.search-wrap {
  display: flex;
  align-items: center;
  gap: 0;
}
.search-inline {
  width: 0;
  overflow: hidden;
  transition: width 0.35s ease;
}
.search-inline.is-open { width: 220px; }
.search-inline-input {
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid var(--clr-border);
  color: var(--clr-white);
  /* Inter statt Cormorant Garamond: Die Serifenschrift ist in
     Überschriftengrösse elegant, hier stand sie klein, dünn UND gesperrt —
     zusammen die unleserlichste Stelle im Shop. Ein Suchfeld ist kein
     Schmuck: Was man eintippt, muss man beim Tippen prüfen können.
     Die Sperrung fällt mit weg, sie macht kurze Eingaben nur zerfasert. */
  font-family: var(--ff-sans);
  /* Keine eigene Schriftgrösse: Es gelten die 16px von oben, siehe dort.
     Vorher 0.85rem, also 13.6px. Im 84px hohen Kopf ist dafür Platz. */
  padding: 4px 8px;
  outline: none;
  transition: border-color var(--trans);
}
.search-inline-input:focus { border-color: var(--clr-gold); }
.search-inline-input::placeholder { color: var(--clr-text-dim); }

/* ── Such-Rollo ──────────────────────────────────────── */
.search-rollo {
  position: fixed;
  top: 84px;
  left: 0; right: 0;
  background: rgba(14,14,14,0.98);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--clr-border);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1);
  z-index: 149;
}
.search-rollo.is-open {
  max-height: 440px;
  overflow-y: auto;
}
.search-rollo .container {
  padding-top: 24px;
  padding-bottom: 28px;
}
.search-hint {
  font-size: 0.78rem;
  color: var(--clr-text-dim);
  letter-spacing: 1px;
  text-align: center;
  padding: 16px 0;
}
.search-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
}
.search-product-card {
  display: block;
  background: var(--clr-bg-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  transition: border-color var(--trans), transform var(--trans);
}
.search-product-card:hover {
  border-color: var(--clr-gold);
  transform: translateY(-2px);
}
.search-product-card img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
}
.search-card-info { padding: 10px 12px; }
.search-card-cat {
  font-size: 0.6rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--clr-text-dim);
  margin-bottom: 3px;
}
.search-card-name {
  font-family: var(--ff-serif);
  font-size: 0.9rem;
  color: var(--clr-white);
  margin-bottom: 4px;
}
.search-card-price {
  font-size: 0.82rem;
  color: var(--clr-gold);
}
.search-no-results {
  text-align: center;
  color: var(--clr-text-dim);
  font-size: 0.88rem;
  padding: 20px 0;
  grid-column: 1/-1;
}
.cart-link {
  position: relative;
  display: flex;
  align-items: center;
  color: var(--clr-text);
  transition: color var(--trans);
}
.cart-link:hover { color: var(--clr-gold); }
.cart-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  background: var(--clr-gold);
  color: #000;
  font-size: 0.6rem;
  font-weight: 600;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  padding: 4px;
}
.nav-toggle span {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--clr-text);
  transition: transform var(--trans), opacity var(--trans);
}

/* ── Hero ────────────────────────────────────────────── */
.hero {
  position: relative;
  height: clamp(420px, 75vh, 700px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, #1a1a1a 0%, #2d2418 50%, #1a1410 100%);
}
.hero-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.38;
}
.hero-content {
  position: relative;
  z-index: 1;
  padding: 0 24px;
}
.hero-subtitle {
  font-size: 0.7rem;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--clr-gold);
  margin-bottom: 20px;
}
.hero h1 { margin-bottom: 24px; }
.hero p {
  max-width: 480px;
  margin: 0 auto 36px;
  color: var(--clr-text-dim);
  font-size: 0.95rem;
}

/* ── Buttons ─────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 32px;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--trans), color var(--trans), transform var(--trans);
  text-decoration: none;
}
.btn:hover { transform: translateY(-1px); }
.btn-gold {
  background: var(--clr-gold);
  color: #000;
}
.btn-gold:hover { background: #d9b85c; }
.btn-outline {
  background: transparent;
  color: var(--clr-white);
  border: 1px solid rgba(255,255,255,0.35);
}
.btn-outline:hover {
  border-color: var(--clr-gold);
  color: var(--clr-gold);
}
.btn-ghost {
  background: transparent;
  color: var(--clr-text-dim);
  padding: 8px 16px;
  letter-spacing: 2px;
}
.btn-ghost:hover { color: var(--clr-white); }

/* ── Category Grid ───────────────────────────────────── */
.cat-grid-section { padding: 0; }
.mayati-cat-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  /* Mittig statt links: Mit nur einer offenen Kategorie steht sie in der Mitte,
     bei zwei sind es zwei in der Mitte, und erst bei vollen vier füllt die
     Reihe die ganze Breite. */
  justify-content: center;
  width: 100%;
  height: 560px;
  gap: 3px;
  background: #1C1C1C;
}
.mayati-cat-item {
  display: block;
  flex: 0 0 calc(25% - 2.25px);
  width: calc(25% - 2.25px);
  max-width: calc(25% - 2.25px);
  height: 560px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.mayati-cat-item a {
  display: block;
  position: absolute;
  inset: 0;
}
.mayati-cat-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Hochformat-Bild in breiter Kachel: Die Mitte zu zeigen schnitt den Models
     die Köpfe ab. Köpfe sitzen oben, also von oben her ausschneiden. */
  object-position: center 12%;
  filter: brightness(0.72);
  transition: filter var(--trans), transform 0.6s ease;
}
.mayati-cat-item:hover img,
.mayati-cat-item.is-touched img {
  filter: brightness(0.55);
  transform: scale(1.04);
}
.mayati-cat-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 40px 28px 32px;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
}
.mayati-cat-label-title {
  font-family: var(--ff-serif);
  font-size: 32px;
  font-weight: 300;
  color: #fff;
  letter-spacing: 5px;
  text-transform: uppercase;
  transition: text-shadow var(--trans), letter-spacing var(--trans);
}
.mayati-cat-item:hover .mayati-cat-label-title,
.mayati-cat-item.is-touched .mayati-cat-label-title {
  text-shadow: 0 0 20px rgba(201,168,76,1), 0 0 45px rgba(201,168,76,0.55);
  letter-spacing: 9px;
}
.mayati-cat-label-sub {
  font-size: 0.65rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--clr-gold);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--trans), transform var(--trans);
}
.mayati-cat-item:hover .mayati-cat-label-sub,
.mayati-cat-item.is-touched .mayati-cat-label-sub {
  opacity: 1;
  transform: translateY(0);
}

/* ── Product Grid ────────────────────────────────────── */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 2px;
}
.product-card {
  background: var(--clr-bg-2);
  position: relative;
  overflow: hidden;
  transition: transform var(--trans);
}
.product-card:hover { transform: translateY(-2px); }
.product-card-img {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
}
.product-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.product-card:hover .product-card-img img { transform: scale(1.05); }
.product-card-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--clr-gold);
  color: #000;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--radius);
}
.product-card-body {
  padding: 16px 18px 20px;
}
.product-card-name {
  font-family: var(--ff-serif);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--clr-white);
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.product-card-cat {
  font-size: 0.65rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--clr-text-dim);
  margin-bottom: 12px;
}
.product-card-price {
  font-size: 1rem;
  color: var(--clr-gold);
  font-weight: 500;
}

/* ── Breadcrumb ──────────────────────────────────────── */
.breadcrumb {
  padding: 14px 0;
  border-bottom: 1px solid var(--clr-border);
  margin-bottom: 40px;
}
.breadcrumb ol {
  /* Nur ul hat oben list-style:none. Ohne diese Zeile erscheinen die Ziffern
     „1." und „2." vor den Stufen und überlagern den Schrägstrich. */
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--clr-text-dim);
}
.breadcrumb li + li::before {
  content: '/';
  opacity: 0.35;
}
.breadcrumb a:hover { color: var(--clr-gold); }

/* ── Shop Filter Bar ─────────────────────────────────── */
.shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--clr-border);
}
.shop-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.shop-cats a {
  padding: 5px 14px;
  font-size: 0.65rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  border: 1px solid var(--clr-border);
  border-radius: 50px;
  color: var(--clr-text-dim);
  transition: color var(--trans), border-color var(--trans);
}
.shop-cats a:hover,
.shop-cats a.active {
  color: var(--clr-gold);
  border-color: var(--clr-gold);
}
.shop-count {
  font-size: 0.72rem;
  color: var(--clr-text-dim);
  letter-spacing: 1px;
}

/* ── Single Product ──────────────────────────────────── */
.product-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.product-gallery { position: sticky; top: 88px; }
.product-main-img {
  aspect-ratio: 3/4;
  overflow: hidden;
  border-radius: var(--radius);
}
.product-main-img img { width: 100%; height: 100%; object-fit: cover; }
.product-info { padding-top: 8px; }
.product-info .product-cat {
  font-size: 0.65rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--clr-gold);
  margin-bottom: 12px;
}
.product-info h1 {
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  margin-bottom: 20px;
}
.product-price {
  font-size: 1.6rem;
  color: var(--clr-gold);
  font-weight: 500;
  margin-bottom: 28px;
}
.product-desc {
  color: var(--clr-text-dim);
  line-height: 1.8;
  margin-bottom: 32px;
  font-size: 0.9rem;
}
.qty-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.qty-control {
  display: flex;
  align-items: center;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.qty-btn {
  width: 38px;
  height: 44px;
  background: var(--clr-bg-2);
  border: none;
  color: var(--clr-text);
  font-size: 1.1rem;
  transition: background var(--trans), color var(--trans);
}
.qty-btn:hover { background: var(--clr-bg-3); color: var(--clr-white); }
.qty-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}
.qty-input {
  width: 52px;
  height: 44px;
  /* Native Zahlenfeld-Pfeile ausblenden – eigene Buttons sind präziser */
  -moz-appearance: textfield;
  appearance: textfield;
  background: var(--clr-bg-2);
  border: none;
  border-left: 1px solid var(--clr-border);
  border-right: 1px solid var(--clr-border);
  color: var(--clr-white);
  text-align: center;
}
.qty-input:focus { background: var(--clr-bg-3); }
.qty-input::-webkit-inner-spin-button,
.qty-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.add-to-cart-btn {
  flex: 1;
  justify-content: center;
  padding: 13px 28px;
}

/* ── Cart ────────────────────────────────────────────── */
.cart-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 40px;
  align-items: start;
}
.cart-item {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--clr-border);
}
.cart-item-img {
  aspect-ratio: 3/4;
  overflow: hidden;
  border-radius: var(--radius);
}
.cart-item-img img { width: 100%; height: 100%; object-fit: cover; }
.cart-item-name {
  font-family: var(--ff-serif);
  font-size: 1.1rem;
  color: var(--clr-white);
  margin-bottom: 4px;
}
.cart-item-price { color: var(--clr-text-dim); font-size: 0.85rem; }
.cart-item-remove {
  background: none;
  border: none;
  color: var(--clr-text-dim);
  font-size: 0.7rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 10px;
  transition: color var(--trans);
}
.cart-item-remove:hover { color: var(--clr-error); }
.cart-summary {
  background: var(--clr-bg-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: 28px;
  position: sticky;
  top: 88px;
}
.cart-summary h3 { margin-bottom: 20px; }
.summary-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 0.88rem;
  color: var(--clr-text-dim);
  border-bottom: 1px solid var(--clr-border);
}
.summary-row:last-of-type { border: none; }
.summary-total {
  display: flex;
  justify-content: space-between;
  padding: 16px 0 0;
  font-size: 1.1rem;
  color: var(--clr-white);
  font-weight: 500;
}
.summary-total span:last-child { color: var(--clr-gold); }
.cart-empty {
  text-align: center;
  padding: 80px 24px;
  color: var(--clr-text-dim);
}
.cart-empty svg { margin: 0 auto 20px; opacity: 0.25; }
.cart-empty h2 { margin-bottom: 12px; color: var(--clr-text-dim); }

/* ── Checkout ────────────────────────────────────────── */
.checkout-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 48px;
  align-items: start;
}
.checkout-form-group {
  margin-bottom: 20px;
}
.checkout-form-group label {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--clr-text-dim);
  margin-bottom: 6px;
}
.form-input, .form-select {
  width: 100%;
  padding: 11px 14px;
  background: var(--clr-bg-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  color: var(--clr-white);
  /* Keine eigene Schriftgrösse mehr — die 16px von oben gelten. Vorher
     0.9rem (14.4px), und das sind die Felder der Kasse. */
  transition: border-color var(--trans);
}
.form-input:focus, .form-select:focus {
  outline: none;
  border-color: var(--clr-gold);
}
.form-input::placeholder { color: var(--clr-text-dim); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.checkout-section-title {
  font-family: var(--ff-serif);
  font-size: 1rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--clr-gold);
  margin: 32px 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--clr-border);
}

/* ── Notices ─────────────────────────────────────────── */
.notice {
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: 0.88rem;
  margin-bottom: 20px;
}
.notice-success { background: rgba(122,170,136,0.12); border: 1px solid rgba(122,170,136,0.3); color: var(--clr-success); }
.notice-error   { background: rgba(224,112,112,0.12); border: 1px solid rgba(224,112,112,0.3); color: var(--clr-error); }

/* ── Versand- und Vorteilszeile (Startseite, vor dem Footer) ──
   Bewusst eine Liste: Ein Screenreader kündigt "Liste mit 3 Einträgen" an und
   liest sie einzeln vor. Getrennt wird mit einem Rahmen statt mit einem
   Trennzeichen im Text – ein "·" zwischen den Punkten würde mitgelesen. */
.vorteilszeile {
  border-top: 1px solid var(--clr-border);
  padding: 22px 0;
}
.vorteilszeile ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 0;
  font-size: 0.9rem;
  color: var(--clr-text-dim);
}
.vorteilszeile li {
  padding: 0 18px;
}
/* Der Trenner entfällt am Zeilenanfang – sonst hinge auf dem Handy nach dem
   Umbruch ein Punkt im Nichts. */
.vorteilszeile li + li {
  border-left: 1px solid var(--clr-border);
}
@media (max-width: 640px) {
  .vorteilszeile ul { flex-direction: column; align-items: center; }
  .vorteilszeile li + li { border-left: 0; }
}

/* ── Brand Section ───────────────────────────────────── */
.brand-section {
  background: var(--clr-bg-2);
  padding: 80px 0;
}
.brand-inner {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
  padding: 0 24px;
}
.brand-inner .brand-quote {
  font-family: var(--ff-serif);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 300;
  font-style: italic;
  color: var(--clr-white);
  letter-spacing: 1px;
  margin-bottom: 20px;
  line-height: 1.4;
}
.brand-inner p {
  color: var(--clr-text-dim);
  font-size: 0.88rem;
  line-height: 1.9;
}

/* ── Newsletter ──────────────────────────────────────── */
.newsletter-section {
  background: linear-gradient(135deg, #1a160e 0%, var(--clr-bg) 100%);
  padding: 72px 0;
  text-align: center;
}
.newsletter-inner {
  max-width: 500px;
  margin: 0 auto;
  padding: 0 24px;
}
.newsletter-inner p {
  color: var(--clr-text-dim);
  font-size: 0.88rem;
  margin-bottom: 28px;
}
.newsletter-form {
  display: flex;
  gap: 0;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--trans);
}
.newsletter-form:focus-within { border-color: var(--clr-gold); }
.newsletter-input {
  flex: 1;
  padding: 13px 16px;
  background: var(--clr-bg-2);
  border: none;
  color: var(--clr-white);
}
.newsletter-input::placeholder { color: var(--clr-text-dim); }
.newsletter-btn {
  padding: 13px 22px;
  background: var(--clr-gold);
  border: none;
  color: #000;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: background var(--trans);
}
.newsletter-btn:hover { background: #d9b85c; }

/* ── Footer ──────────────────────────────────────────── */
.site-footer {
  background: #141414;
  border-top: 1px solid var(--clr-border);
  margin-top: auto;
}
.footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 64px 24px 40px;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 64px;
}
.footer-tagline {
  font-size: 0.75rem;
  letter-spacing: 2px;
  color: var(--clr-text-dim);
  margin-top: 12px;
  text-transform: uppercase;
}
.footer-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.footer-col h3 {
  font-size: 0.65rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--clr-gold);
  margin-bottom: 16px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 8px; }
.footer-col a {
  font-size: 0.82rem;
  color: var(--clr-text-dim);
  transition: color var(--trans);
}
.footer-col a:hover { color: var(--clr-white); }
.footer-bottom {
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 24px;
  border-top: 1px solid var(--clr-border);
  font-size: 0.72rem;
  color: var(--clr-text-dim);
}

/* ── Rechtsseiten ────────────────────────────────────── */
.legal-text h3 {
  font-size: 0.9rem;
  letter-spacing: 2px;
  color: var(--clr-gold);
  margin: 32px 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--clr-border);
}
.legal-text p, .legal-text li {
  color: var(--clr-text-dim);
  font-size: 0.88rem;
  line-height: 1.9;
}
.legal-text strong { color: var(--clr-text); font-weight: 600; }

/* Deutlich erkennbare Absätze, Aufzählungen und Links.
   Die Händlerbund-Prüfung (Punkte 1.4 und 3.2, Oktober 2026) bemängelte
   Rechtstexte als „Fließ- oder Blocktexte ohne erkennbare Struktur". Ursache:
   Der Reset oben setzt jeden Abstand auf 0 und nimmt Listen ihr Zeichen, in den
   Rechtstexten kam beides nie zurück — Absätze liefen ohne Leerzeile
   ineinander, Aufzählungspunkte sahen aus wie ein Block. Links waren nur
   golden, ohne Unterstrich. Die Händlerbund-Dateien trennen Absätze mit einer
   Leerzeile und führen Punkte mit einem Zeichen; hier genauso. */
.legal-text p { margin: 0 0 16px; }
.legal-text ul { list-style: disc; padding-left: 24px; margin: 12px 0 18px; }
.legal-text li { margin: 0 0 10px; }
.legal-text li::marker { color: var(--clr-gold); }
.legal-text a {
  color: var(--clr-gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Pagination ──────────────────────────────────────── */
.pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 48px 0 0;
}
.pagination a, .pagination span {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  font-size: 0.82rem;
  color: var(--clr-text-dim);
  transition: border-color var(--trans), color var(--trans);
}
.pagination a:hover { border-color: var(--clr-gold); color: var(--clr-gold); }
.pagination .current { border-color: var(--clr-gold); color: var(--clr-gold); }

/* ── Admin ───────────────────────────────────────────── */
.admin-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 100vh;
}
.admin-sidebar {
  background: #141414;
  border-right: 1px solid var(--clr-border);
  padding: 24px 0;
}
.admin-sidebar .site-logo { padding: 0 20px 20px; border-bottom: 1px solid var(--clr-border); }
.admin-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  padding: 4px;
}
.admin-nav-toggle span {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--clr-text);
}
.admin-nav { margin-top: 8px; }
.admin-nav-gruppe { padding: 8px 0; border-bottom: 1px solid var(--clr-border); }
.admin-nav-gruppe:last-child { border-bottom: 0; }
.admin-nav-titel {
  margin: 0;
  padding: 6px 20px 4px;
  font-size: 0.62rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--clr-gold);
  opacity: 0.8;
}
.admin-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 20px;
  font-size: 0.78rem;
  letter-spacing: 1px;
  color: var(--clr-text-dim);
  transition: color var(--trans), background var(--trans);
}
.admin-nav a:hover,
.admin-nav a.active {
  color: var(--clr-white);
  background: var(--clr-gold-dim);
}
.admin-nav a.active { border-left: 2px solid var(--clr-gold); }
/* min-width:0 ist der Grund, warum die Seite nicht mehr seitlich wegrutscht.
   .admin-layout ist ein Raster mit `220px 1fr`, und ein Rasterfeld darf von
   sich aus nicht kleiner werden als sein Inhalt. Ein einziges langes Wort in
   einer Überschrift hat deshalb die GANZE Seite breiter gemacht, Seitenleiste
   inbegriffen. Mit min-width:0 darf die Spalte schrumpfen; was dann wirklich
   zu breit ist (Tabellen), rollt in .table-scroll für sich. */
.admin-main { padding: 32px; min-width: 0; }
.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}
/* ── Widerruf: Positionsauswahl ──────────────────────── */
.widerruf-positionen {
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 20px;
}
.widerruf-position {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  font-size: 0.88rem;
}
.widerruf-position + .widerruf-position { border-top: 1px solid var(--clr-border); }
.widerruf-menge {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.widerruf-menge span {
  font-size: 0.68rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--clr-text-dim);
}
.widerruf-menge input { width: 72px; text-align: center; }

/* ── Produkt teilen ──────────────────────────────────── */
.share-box { position: relative; margin-top: 18px; }
.share-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 4px 0;
  color: var(--clr-text-dim);
  font-size: 0.8rem;
  letter-spacing: 1px;
  cursor: pointer;
}
.share-toggle:hover,
.share-toggle:focus-visible { color: var(--clr-gold); }

.share-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  min-width: 180px;
  margin-top: 8px;
  padding: 6px;
  background: var(--clr-bg-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.share-item {
  display: block;
  width: 100%;
  padding: 9px 12px;
  background: none;
  border: none;
  border-radius: var(--radius);
  color: var(--clr-text);
  font-size: 0.85rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.share-item:hover,
.share-item:focus-visible { background: var(--clr-bg); color: var(--clr-gold); }

/* ── Social-Media-Symbole im Footer ──────────────────── */
.social-links {
  display: flex;
  gap: 14px;
  list-style: none;
  margin-top: 18px;
  padding: 0;
}
.social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--clr-border);
  border-radius: 50%;
  color: var(--clr-text-dim);
  transition: color 0.2s, border-color 0.2s;
}
.social-links a:hover,
.social-links a:focus-visible {
  color: var(--clr-gold);
  border-color: var(--clr-gold);
}

.newsletter-teaser {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.6rem;
  color: var(--clr-gold);
  margin-bottom: 6px;
}
.newsletter-teaser strong { font-weight: 600; }
.newsletter-kleingedruckt {
  font-size: 0.72rem;
  color: var(--clr-text-dim);
  margin-top: 12px;
  line-height: 1.6;
}

.punkte-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  margin-bottom: 24px;
  background: color-mix(in srgb, var(--clr-gold) 10%, var(--clr-bg-2));
  border: 1px solid var(--clr-gold);
  border-radius: var(--radius-lg);
  color: var(--clr-text);
  font-size: 0.88rem;
  text-decoration: none;
}
.punkte-banner strong { color: var(--clr-gold); }
.punkte-banner small { color: var(--clr-text-dim); font-size: 0.78rem; }
.punkte-banner-link { color: var(--clr-gold); font-size: 0.8rem; white-space: nowrap; }

/* ── Treuepunkte im Kundenkonto ──────────────────────── */
.punkte-uebersicht {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}
.punkte-karte {
  background: var(--clr-bg-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
}
.punkte-karte-gross {
  border-color: var(--clr-gold);
  background: color-mix(in srgb, var(--clr-gold) 8%, var(--clr-bg-2));
}
.punkte-label {
  font-size: 0.68rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--clr-text-dim);
  margin-bottom: 10px;
}
.punkte-wert {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2rem;
  line-height: 1;
  color: var(--clr-text);
}
.punkte-karte-gross .punkte-wert { color: var(--clr-gold); }
.punkte-euro { font-size: 0.82rem; color: var(--clr-text-dim); margin-top: 6px; }
.punkte-regeln {
  list-style: none;
  font-size: 0.85rem;
  color: var(--clr-text-dim);
  line-height: 1.9;
}
.punkte-regeln li { padding-left: 18px; position: relative; }
.punkte-regeln li::before { content: '·'; position: absolute; left: 4px; color: var(--clr-gold); }

/* ── Widerruf im Admin deutlich sichtbar machen ──────────
   Ein uebersehener Widerruf kostet Geld und Nerven: Die Erstattung ist
   gesetzlich innerhalb von 14 Tagen faellig. Deshalb faellt er in der
   Liste auf und nicht erst in der Detailansicht. */
.widerruf-alarm {
  /* aus der Themefarbe gemischt, damit es in allen drei Farbschemata passt */
  background: color-mix(in srgb, var(--clr-error) 12%, transparent);
  border: 1px solid var(--clr-error);
  border-left: 4px solid var(--clr-error);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 24px;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--clr-text);
}
.widerruf-alarm strong { color: var(--clr-error); }

.badge-widerruf {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 50px;
  background: var(--clr-error);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  vertical-align: middle;
  animation: widerruf-puls 1.6s ease-in-out infinite;
}
.admin-table tr.row-widerruf td {
  background: color-mix(in srgb, var(--clr-error) 8%, transparent);
}

@keyframes widerruf-puls {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}
/* Wer Bewegung im Betriebssystem abgeschaltet hat, bekommt sie nicht */
@media (prefers-reduced-motion: reduce) {
  .badge-widerruf { animation: none; }
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.admin-table th {
  text-align: left;
  padding: 10px 14px;
  font-size: 0.65rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--clr-text-dim);
  border-bottom: 1px solid var(--clr-border);
}
.admin-table td {
  padding: 14px;
  border-bottom: 1px solid var(--clr-border);
  color: var(--clr-text);
}
.admin-table tr:hover td { background: var(--clr-bg-2); }
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}
.stat-card {
  background: var(--clr-bg-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: 20px;
}
.stat-card-label {
  font-size: 0.65rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--clr-text-dim);
  margin-bottom: 8px;
}
.stat-card-value {
  font-family: var(--ff-serif);
  font-size: 1.8rem;
  color: var(--clr-gold);
}

/* ── Statistik: Mini-Balkendiagramme ─────────────────── */
.mini-chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 120px;
  background: var(--clr-bg-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: 12px;
}
.mini-bar {
  flex: 1;
  min-width: 4px;
  background: var(--clr-text-dim);
  border-radius: 2px 2px 0 0;
  transition: background var(--trans);
}
.mini-bar:hover { background: var(--clr-white); }
.mini-bar-gold { background: var(--clr-gold-dim); }
.mini-bar-gold:hover { background: var(--clr-gold); }
.mini-chart-months {
  align-items: flex-end;
  gap: 10px;
  padding-bottom: 24px;
  position: relative;
}
.mini-bar-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
  position: relative;
}
.mini-bar-wrap .mini-bar { width: 100%; }
.mini-bar-label {
  position: absolute;
  bottom: -22px;
  font-size: 0.65rem;
  color: var(--clr-text-dim);
  text-transform: uppercase;
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 1024px) {
  .product-detail { grid-template-columns: 1fr; gap: 40px; }
  .product-gallery { position: static; }
  .cart-layout, .checkout-layout { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 768px) {
  .nav-toggle { display: flex; order: -1; }
  .site-logo { margin-right: auto; }
  .primary-nav {
    display: none;
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    background: rgba(20,20,20,0.98);
    border-bottom: 1px solid var(--clr-border);
    padding: 16px 0;
  }
  .primary-nav.is-open { display: block; }
  .primary-nav ul { flex-direction: column; gap: 0; }
  .primary-nav a {
    display: block;
    padding: 12px 24px;
    border-radius: 0;
  }
  .primary-nav .dropdown {
    position: static;
    display: none;
    transform: none;
    opacity: 1;
    visibility: visible;
    border: none;
    box-shadow: none;
    background: rgba(0,0,0,0.2);
    min-width: 0;
    padding: 4px 0 8px 16px;
  }
  .primary-nav .has-dropdown.is-touched .dropdown,
  .primary-nav .has-dropdown:focus-within .dropdown {
    display: block;
  }
  .primary-nav .mega-dropdown { flex-direction: column; min-width: 0; }
  .primary-nav .dropdown-group { border-right: none; padding: 4px 0; }
  .mayati-cat-grid {
    flex-wrap: wrap;
    height: auto;
  }
  .mayati-cat-item {
    flex: 0 0 calc(50% - 1.5px);
    width: calc(50% - 1.5px);
    max-width: calc(50% - 1.5px);
    height: 280px;
  }
  .footer-nav { grid-template-columns: 1fr 1fr; }
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .form-row { grid-template-columns: 1fr; }
  .admin-layout { grid-template-columns: 1fr; }
  .admin-nav-toggle {
    display: flex;
    position: fixed;
    top: 14px;
    left: 14px;
    z-index: 210;
    background: var(--clr-bg-2);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius);
  }
  .admin-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 240px;
    transform: translateX(-100%);
    transition: transform var(--trans);
    z-index: 200;
    overflow-y: auto;
  }
  .admin-sidebar.is-open { transform: translateX(0); box-shadow: var(--shadow); }
  .admin-main { padding: 72px 20px 32px; }
}

@media (max-width: 480px) {
  .mayati-cat-item { flex: 0 0 100%; width: 100%; max-width: 100%; height: 260px; }
  .footer-nav { grid-template-columns: 1fr; }
  .cart-item { grid-template-columns: 80px 1fr; }
  .cart-item .qty-control { display: none; }
}

/* ── Produktvarianten (Größe/Farbe) ─────────────────── */
.variant-title {
  font-size: 0.7rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--clr-text-dim);
  margin-bottom: 10px;
}
.variant-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}
.variant-option {
  position: relative;
  cursor: pointer;
}
.variant-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.variant-option span {
  display: inline-block;
  padding: 10px 18px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  font-size: 0.82rem;
  color: var(--clr-text);
  transition: border-color var(--trans), color var(--trans), background var(--trans);
}
.variant-option:hover span { border-color: var(--clr-gold); }
.variant-option input:checked + span {
  border-color: var(--clr-gold);
  background: var(--clr-gold-dim);
  color: var(--clr-gold);
}
.variant-option input:focus-visible + span { outline: 2px solid var(--clr-gold); }
.variant-option.is-out span {
  opacity: 0.35;
  text-decoration: line-through;
  cursor: not-allowed;
}

/* Farbe und Größe als getrennte Reihen (product.php). */
.variant-group { margin-bottom: 4px; }
.variant-title .variant-gewaehlt {
  margin-left: 6px;
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.82rem;
  color: var(--clr-text);
}
.variant-chip {
  padding: 10px 18px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  background: none;
  font: inherit;
  font-size: 0.82rem;
  color: var(--clr-text);
  cursor: pointer;
  transition: border-color var(--trans), color var(--trans), background var(--trans);
}
.variant-chip:hover:not(:disabled) { border-color: var(--clr-gold); }
.variant-chip[aria-pressed="true"] {
  border-color: var(--clr-gold);
  background: var(--clr-gold-dim);
  color: var(--clr-gold);
}
.variant-chip:focus-visible { outline: 2px solid var(--clr-gold); outline-offset: 2px; }
.variant-chip.is-out {
  opacity: 0.35;
  text-decoration: line-through;
  cursor: not-allowed;
}
.card-box {
  padding: 14px;
  background: #fff;
  border-radius: var(--radius);
}
.variant-ausverkauft {
  margin: 0 0 14px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--clr-error, #e07a7a);
}
.add-to-cart-btn:disabled { opacity: 0.45; cursor: not-allowed; }
/* Passt nicht zur aktuellen Wahl der anderen Reihe, ist aber anklickbar. */
.variant-chip.is-ausweich {
  opacity: 0.5;
  border-style: dashed;
}
.model-angabe {
  margin: -6px 0 18px;
  font-size: 0.82rem;
  color: var(--clr-text-dim);
}
.variant-fehler {
  margin: -8px 0 16px;
  font-size: 0.82rem;
  color: var(--clr-error, #e07a7a);
}

/* ── Produktgalerie ─────────────────────────────────── */
.gallery-thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.gallery-thumb {
  width: 64px;
  height: 80px;
  padding: 0;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  background: none;
  opacity: 0.6;
  transition: opacity var(--trans), border-color var(--trans);
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-thumb:hover { opacity: 1; }
.gallery-thumb.is-active { opacity: 1; border-color: var(--clr-gold); }

/* ── Sterne-Bewertung ───────────────────────────────── */
.stars {
  position: relative;
  display: inline-block;
  font-size: 0.95rem;
  line-height: 1;
}
.stars::before {
  content: '★★★★★';
  color: var(--clr-border);
}
.stars::after {
  content: '★★★★★';
  position: absolute;
  top: 0;
  left: 0;
  color: var(--clr-gold);
  overflow: hidden;
  white-space: nowrap;
  width: calc(var(--rating, 0) / 5 * 100%);
}
.rating-summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--clr-text-dim);
  margin-bottom: 12px;
}
.rating-summary:hover { color: var(--clr-gold); }

/* ── Bewertungen ────────────────────────────────────── */
.review-section { margin: 70px 0; }
.review-empty {
  color: var(--clr-text-dim);
  font-size: 0.88rem;
}
.review-list {
  display: grid;
  gap: 16px;
  margin-bottom: 24px;
}
.review-card {
  background: var(--clr-bg-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
}
.review-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.review-meta {
  font-size: 0.78rem;
  color: var(--clr-text-dim);
}
.review-text {
  font-size: 0.88rem;
  color: var(--clr-text);
  line-height: 1.7;
}
.review-form-wrap { margin-top: 20px; }
.review-form-wrap summary {
  list-style: none;
  display: inline-flex;
  cursor: pointer;
}
.review-form-wrap summary::-webkit-details-marker { display: none; }
.review-form {
  margin-top: 20px;
  max-width: 520px;
  background: var(--clr-bg-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: 24px;
}

/* ── Ähnliche Produkte ──────────────────────────────── */
.related-section { margin: 70px 0 40px; }

/* ── Gutschein (Checkout) ───────────────────────────── */
.coupon-box { margin-bottom: 28px; }
.coupon-form {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.coupon-active {
  font-size: 0.85rem;
  color: var(--clr-gold);
}

/* ── Warenkorb: Variantenzeile ──────────────────────── */
.cart-item-variant {
  font-size: 0.75rem;
  color: var(--clr-text-dim);
  margin-top: 2px;
}

/* ── Wunschliste: Herz-Button ───────────────────────── */
.wishlist-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--clr-text-dim);
  transition: color var(--trans), transform var(--trans);
}
.wishlist-btn svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}
.wishlist-btn:hover { color: var(--clr-gold); transform: scale(1.12); }
.wishlist-btn.is-active { color: var(--clr-gold); }
.wishlist-btn.is-active svg { fill: var(--clr-gold); stroke: var(--clr-gold); }
.wishlist-btn:disabled { opacity: 0.5; cursor: default; }

/* Herz auf Produktkarten (oben rechts über dem Bild) */
.wishlist-btn-card {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(20, 20, 20, 0.55);
  backdrop-filter: blur(4px);
  color: #fff;
  z-index: 2;
}
.wishlist-btn-card:hover { background: rgba(20, 20, 20, 0.8); }
.wishlist-btn-card.is-active { color: var(--clr-gold); }

/* Herz auf der Produktdetailseite (neben dem Warenkorb-Button) */
.wishlist-btn-detail {
  width: 52px;
  height: 52px;
  min-width: 52px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  color: var(--clr-text);
}
.wishlist-btn-detail:hover { border-color: var(--clr-gold); }

/* ── Kundenkonto: Login / Registrierung ─────────────── */
.auth-wrap {
  display: flex;
  justify-content: center;
  padding: 70px 24px;
}
.auth-card {
  width: 100%;
  max-width: 560px;
  background: var(--clr-bg-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: 40px 36px;
}
.auth-card h1 { margin-bottom: 8px; }
.auth-sub {
  color: var(--clr-text-dim);
  font-size: 0.88rem;
  margin-bottom: 28px;
}
.auth-btn { width: 100%; justify-content: center; margin-top: 20px; }
.auth-switch {
  margin-top: 24px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--clr-text-dim);
}
.auth-switch a { color: var(--clr-gold); }
.auth-forgot {
  text-align: right;
  margin-top: -6px;
}
.auth-forgot a {
  font-size: 0.78rem;
  color: var(--clr-text-dim);
  transition: color var(--trans);
}
.auth-forgot a:hover { color: var(--clr-gold); }
.field-error { font-size: 0.75rem; color: var(--clr-error); }
.label-hint {
  font-size: 0.7rem;
  color: var(--clr-text-dim);
  text-transform: none;
  letter-spacing: 0;
}
/* Kein Flex: Sonst wird jedes Inline-Element im Text (Links, <strong>) zu
   einem eigenen Flex-Element und der Satz bricht in Spalten auseinander.
   Als Block fliesst der Text normal, die Box haengt absolut davor. */
.check-label {
  display: block;
  position: relative;
  padding-left: 28px;
  font-size: 0.82rem;
  color: var(--clr-text-dim);
  cursor: pointer;
  margin: 14px 0;
  line-height: 1.6;
}
.check-label input {
  position: absolute;
  left: 0;
  top: 2px;
  accent-color: var(--clr-gold);
}
.check-label a { color: var(--clr-gold); }
.check-error { color: var(--clr-error); }

/* ── Kundenkonto: Layout ────────────────────────────── */
.account-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 48px;
  padding-top: 60px;
  padding-bottom: 80px;
  align-items: start;
}
.account-nav {
  position: sticky;
  top: 108px;
  background: var(--clr-bg-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: 20px 0;
}
.account-nav-title {
  font-size: 0.65rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--clr-text-dim);
  padding: 0 20px 12px;
  border-bottom: 1px solid var(--clr-border);
  margin-bottom: 8px;
}
.account-nav ul { list-style: none; }
.account-nav a {
  display: block;
  padding: 10px 20px;
  font-size: 0.85rem;
  color: var(--clr-text-dim);
  transition: color var(--trans), background var(--trans);
}
.account-nav a:hover { color: var(--clr-white); background: var(--clr-gold-dim); }
.account-nav a.active {
  color: var(--clr-gold);
  border-left: 2px solid var(--clr-gold);
  padding-left: 18px;
}
.account-logout { color: var(--clr-error) !important; opacity: 0.75; }
.account-logout:hover { opacity: 1; background: transparent !important; }

.account-content h1 { margin-bottom: 8px; }
.account-sub {
  color: var(--clr-text-dim);
  font-size: 0.88rem;
  margin-bottom: 32px;
}
.account-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.account-card {
  background: var(--clr-bg-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: 26px 28px;
  margin-bottom: 20px;
}
.account-grid .account-card { margin-bottom: 0; }
.account-card h3 {
  font-size: 0.72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--clr-gold);
  margin-bottom: 16px;
}
.account-empty {
  color: var(--clr-text-dim);
  font-size: 0.85rem;
  line-height: 1.6;
  margin-bottom: 14px;
}
.account-address {
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--clr-text);
  margin-bottom: 14px;
}
.account-card-link {
  font-size: 0.8rem;
  color: var(--clr-gold);
  letter-spacing: 0.5px;
}
.account-order-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 0.85rem;
  color: var(--clr-text-dim);
  padding: 9px 0;
  border-bottom: 1px solid var(--clr-border);
}
.account-order-row:last-of-type { border-bottom: none; }

/* ── Bestellstatus ──────────────────────────────────── */
.order-status {
  font-size: 0.68rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
}
.status-offen         { background: rgba(201,168,76,0.15);  color: var(--clr-gold); }
.status-bearbeitung   { background: rgba(120,160,220,0.15); color: #8ab0e0; }
.status-versendet     { background: rgba(122,170,136,0.15); color: var(--clr-success); }
.status-abgeschlossen { background: rgba(122,170,136,0.15); color: var(--clr-success); }
.status-storniert     { background: rgba(224,112,112,0.15); color: var(--clr-error); }

.order-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--clr-border);
  margin-bottom: 10px;
}
.order-date {
  display: block;
  font-size: 0.75rem;
  color: var(--clr-text-dim);
  margin-top: 3px;
}
.order-card-total {
  display: flex;
  justify-content: space-between;
  font-weight: 500;
  color: var(--clr-gold);
  padding-top: 14px;
  border-top: 1px solid var(--clr-border);
  margin-top: 10px;
}
.order-tracking {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  font-size: 0.82rem;
  color: var(--clr-text-dim);
  background: var(--clr-bg);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-top: 12px;
}
.order-tracking strong { color: var(--clr-text); }
.order-track-link { color: var(--clr-gold); white-space: nowrap; }

/* ── Konto löschen (Gefahrenbereich) ─────────────────── */
.danger-card { border-color: rgba(224, 112, 112, 0.35); }
.danger-title { color: var(--clr-error) !important; }
.btn-danger {
  border-color: rgba(224, 112, 112, 0.5);
  color: var(--clr-error);
}
.btn-danger:hover {
  background: rgba(224, 112, 112, 0.12);
  border-color: var(--clr-error);
  color: var(--clr-error);
}
.delete-account-wrap summary {
  list-style: none;
  display: inline-flex;
  cursor: pointer;
}
.delete-account-wrap summary::-webkit-details-marker { display: none; }

/* Storno- / Rücksende-Aktionen */
.order-actions-row {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--clr-border);
}
.btn-sm {
  font-size: 0.72rem;
  padding: 8px 16px;
}
.btn:disabled,
.btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.order-action-note {
  font-size: 0.8rem;
  color: var(--clr-text-dim);
  line-height: 1.6;
}

/* ── Adressen ───────────────────────────────────────── */
.addr-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}
.addr-grid .account-card { margin-bottom: 0; }
.addr-default { border-color: var(--clr-gold-dim); }
.addr-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.addr-typ {
  font-size: 0.68rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--clr-text-dim);
}
.addr-badge {
  font-size: 0.65rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--clr-gold);
  border: 1px solid var(--clr-gold-dim);
  padding: 2px 10px;
  border-radius: 20px;
}
.addr-actions {
  display: flex;
  gap: 16px;
  align-items: center;
  font-size: 0.8rem;
}
.addr-actions a { color: var(--clr-gold); }
.inline-form { display: inline; }
.inline-form button {
  background: none;
  border: none;
  color: var(--clr-text-dim);
  font-size: 0.8rem;
  font-family: inherit;
  cursor: pointer;
  padding: 0;
  transition: color var(--trans);
}
.inline-form button:hover { color: var(--clr-white); }
.addr-delete { color: var(--clr-error) !important; opacity: 0.7; }
.addr-delete:hover { opacity: 1; }
.addr-form-actions { display: flex; gap: 14px; margin-top: 8px; }

/* ── Konto-Icon im Header ───────────────────────────── */
.account-btn { position: relative; }
.account-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--clr-gold);
}

/* ── Kundenkonto: Responsive ────────────────────────── */
@media (max-width: 900px) {
  .account-layout { grid-template-columns: 1fr; gap: 24px; }
  .account-nav { position: static; }
  .account-nav ul { display: flex; flex-wrap: wrap; }
  .account-nav a.active { border-left: none; padding-left: 20px; }
  .account-grid, .addr-grid { grid-template-columns: 1fr; }
}


/* ── Hersteller und Produktsicherheit auf der Produktseite ──────────────
   Eingeklappt, damit die Pflichtangaben die Seite nicht überladen. Der
   Marker bleibt sichtbar: Ein Aufklapper ohne erkennbaren Auslöser wird
   übersehen. */
.produkt-sicherheit {
  margin-top: 20px;
  border-top: 1px solid var(--clr-border);
  padding-top: 16px;
}
.produkt-sicherheit summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--clr-text);
  padding: 6px 0;
}
/* Sichtbarer Tastaturfokus – ohne ihn weiß niemand, wo er beim Tabben ist. */
.produkt-sicherheit summary:focus-visible {
  outline: 2px solid var(--clr-gold);
  outline-offset: 2px;
}
.produkt-sicherheit dl {
  margin: 12px 0 0;
  font-size: 0.85rem;
  line-height: 1.6;
}
.produkt-sicherheit dt {
  color: var(--clr-text-dim);
  margin-top: 10px;
}
.produkt-sicherheit dd {
  margin: 2px 0 0;
  color: var(--clr-text);
}

/* ── Datenauskunft (Art. 15 DSGVO) ─────────────────────────────────────
   Zwei Spalten am Bildschirm, untereinander auf dem Handy. Bewusst kein
   Tabellenlayout: Die Abschnitte haben je nach Bereich unterschiedlich
   viele Felder, und eine Tabelle mit zwanzig Spalten ist am Screenreader
   wie am Telefon unbrauchbar. */
.datenauskunft-liste {
  display: grid;
  grid-template-columns: minmax(140px, 220px) 1fr;
  gap: 4px 16px;
  margin: 8px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--clr-border);
  font-size: 0.88rem;
  line-height: 1.6;
}
.datenauskunft-liste dt { color: var(--clr-text-dim); }
.datenauskunft-liste dd { margin: 0; color: var(--clr-text); overflow-wrap: anywhere; }

@media (max-width: 600px) {
  .datenauskunft-liste { grid-template-columns: 1fr; gap: 0; }
  .datenauskunft-liste dt { margin-top: 10px; }
}

/* ── Mitlaufende Speicherleiste (Produktformular) ──────────────────────
   Das Produktformular ist mehrere Bildschirme lang. Vorher musste man bis
   ganz nach unten blaettern, um ueberhaupt einen Speichern-Knopf zu sehen.
   Die Leiste bleibt am unteren Rand stehen, steht aber im Textfluss ganz am
   Ende: Optisch immer da, in der Tastaturreihenfolge am richtigen Platz. */
.admin-speicherleiste {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 0;
  margin-top: 8px;
  background: var(--clr-bg);
  border-top: 1px solid var(--clr-border);
  /* Ohne den Stapelwert schoebe sich die Leiste unter nachfolgende
     Abschnitte (Dokumente, Bestandsbewegungen). */
  z-index: 5;
}

/* Auf einem niedrigen Fenster - oder bei stark vergroesserter Schrift, was
   auf dasselbe hinauslaeuft - frisst eine feststehende Leiste zu viel vom
   ohnehin knappen Platz. Dann laeuft sie einfach mit. */
@media (max-height: 480px) {
  .admin-speicherleiste { position: static; }
}

/* ── Produktliste im Admin: Suche, Filter, Sortierung ─────────────────
   Eine Zeile aus Feldern, die bei wenig Platz umbricht. Die Beschriftungen
   stehen ueber den Feldern und bleiben sichtbar - ein Platzhaltertext allein
   verschwindet beim Tippen und ist fuer Screenreader keine Beschriftung. */
.produkt-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  margin-bottom: 18px;
  padding: 16px;
  background: var(--clr-bg-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
}
.produkt-filter label {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--clr-text-dim);
  margin-bottom: 4px;
}
.produkt-filter .form-input,
.produkt-filter .form-select { min-width: 165px; }
.produkt-filter > div:first-child { flex: 1 1 240px; }
.produkt-filter-knoepfe { display: flex; gap: 8px; }

@media (max-width: 760px) {
  .produkt-filter > div { flex: 1 1 100%; }
  .produkt-filter .form-input,
  .produkt-filter .form-select { width: 100%; }
}

/* Im Admin steht die Seitenleiste dichter am Inhalt als im Shop, und bei
   vielen Seiten muss sie umbrechen duerfen. */
.admin-main .pagination {
  flex-wrap: wrap;
  padding-top: 28px;
}

/* ── Erinnerungskasten im Dashboard ──────────────────────────────────
   Wie .widerruf-alarm aufgebaut, aber in Gold statt Rot: Eine Vorkasse, die
   noch nicht bezahlt ist, ist eine Erinnerung und kein Notfall. Rot daneben
   bliebe sonst nichts uebrig, was wirklich dringend ist. */
.hinweis-kasten {
  background: color-mix(in srgb, var(--clr-gold) 10%, transparent);
  border: 1px solid var(--clr-gold-dim);
  border-left: 4px solid var(--clr-gold);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 24px;
  font-size: 0.85rem;
}
.hinweis-kasten strong { color: var(--clr-gold); }
.hinweis-kasten a      { color: var(--clr-gold); font-weight: 600; }

/* ── Sprachwahl im Kopf (nur sichtbar, wenn SPRACHEN_AKTIV an ist oder ein Admin angemeldet ist) ── */
.sprachwahl { position: relative; }
.sprachwahl summary {
  list-style: none;
  cursor: pointer;
  padding: 8px 10px;
  font-size: 0.72rem;
  letter-spacing: 2px;
  color: var(--clr-text-dim);
}
.sprachwahl summary::-webkit-details-marker { display: none; }
.sprachwahl summary:hover,
.sprachwahl[open] summary { color: var(--clr-white); }
.sprachwahl ul {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 300;
  min-width: 160px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: var(--clr-bg-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
}
.sprachwahl li a {
  display: block;
  padding: 9px 18px;
  font-size: 0.85rem;
  color: var(--clr-text-dim);
}
.sprachwahl li a:hover { color: var(--clr-white); }
.sprachwahl li a[aria-current="true"] { color: var(--clr-gold); }

/* ══════════════════════════════════════════════════════
   Jobcenter / EKS
   ══════════════════════════════════════════════════════

   Nur auf diesen Bereich beschränkt (alles unter `.eks`). Das Aussehen des
   Shops bleibt, wie es ist — geändert wird, was in einem Arbeitsbereich
   stört, in dem lange gelesen und viel getippt wird.

   Die drei Entscheidungen, aus denen das Übrige folgt:

   1. ALLES IN rem. Wer die Schrift im Browser auf 200 Prozent stellt, soll
      ein größeres Formular bekommen und nicht ein abgeschnittenes. Deshalb
      keine festen Pixelbreiten für Spalten, Felder und Knöpfe.

   2. KEINE WAAGERECHTE ROLLLEISTE AN DER SEITE. Tabellen stecken in
      `.table-scroll` und rollen für sich; unter 760 Pixeln werden sie zu
      untereinander stehenden Blöcken, bei denen jede Angabe ihre
      Beschriftung mitbringt. Die Kopfzeile ist dort auf `display:none` —
      nicht nur unsichtbar, sondern wirklich weg, sonst läse ein
      Screenreader die Spaltennamen und die Beschriftungen doppelt vor.

   3. WENIGER LEERE FLÄCHE. Die Abstände sind kleiner als im Shop. Eine
      Seite, auf der zehn Aufgaben stehen, ist mit Vorleseprogramm leichter
      zu benutzen als drei Seiten mit je drei Aufgaben und viel Luft.
   ══════════════════════════════════════════════════════ */

.eks {
  /* 62rem statt einer Pixelbreite: wächst mit der Schriftgröße mit. */
  max-width: 62rem;
  /* Eine lange Bestellnummer oder ein langer Dateiname darf die Seite nicht
     breiter machen als das Fenster. */
  overflow-wrap: break-word;
}
/* Überschriften im Klartext. Der Shop setzt h1 bis h3 in Großbuchstaben mit
   3 bis 4 Pixeln Sperrung — in einer Zeile wie „DER GANZE BEWILLIGUNGSZEITRAUM"
   ergibt das ein Wort von 300 Pixeln Breite, das nirgends umbricht. Genau das
   hat die Seite waagerecht aufgeschoben, und zu lesen ist es ausserdem
   schlechter. */
/* Die Kopfzeile ist im Shop ein flex mit space-between. Ein Rasterfeld bzw.
   Flex-Element darf von sich aus nicht kleiner werden als sein Inhalt —
   deshalb schob „Auswertungen" bei 200 Prozent Schrift die Seite um 13 Pixel
   auf. min-width:0 erlaubt das Schrumpfen, und dann greift der Umbruch. */
.eks .admin-header { flex-wrap: wrap; margin-bottom: 0.9rem; }
.eks .admin-header h1 { min-width: 0; }
.eks h1, .eks h2, .eks h3 {
  text-transform: none;
  letter-spacing: 0.01em;
  font-weight: 500;
  overflow-wrap: break-word;
}
.eks h1 { font-size: 1.5rem; }
.eks h2 { font-size: 1.15rem; margin: 0 0 0.5rem; }
.eks h3 { font-size: 1rem; margin: 1.1rem 0 0.4rem; }
.eks p  { margin: 0 0 0.6rem; max-width: min(46rem, 100%); }
.eks ul, .eks ol { margin: 0 0 0.6rem; padding-left: 1.2rem; }
.eks li { margin-bottom: 0.3rem; }

/* Ein Abschnitt. Deutlich enger als im Shop — das ist der Hauptgrund, warum
   die Seite von sieben Bildschirmhöhen auf eine überschaubare schrumpft. */
.eks-block {
  margin: 0 0 1.4rem;
  padding: 0 0 1.2rem;
  border-bottom: 1px solid var(--clr-border);
}
.eks-block:last-child { border-bottom: 0; padding-bottom: 0; }

/* ── Navigation des Bereichs ─────────────────────────── */
.eks-nav { margin: 0 0 0.9rem; }
.eks-nav ul, .eks-schnell ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
}
.eks-nav li, .eks-schnell li { margin: 0; }
.eks-nav a, .eks-schnell a, .eks-seiten a, .eks-seite-hier {
  display: inline-block;
  padding: 0.6rem 0.9rem;
  /* 2.75rem ist bei Standardschrift rund 44 Pixel: die Fläche, die man mit
     dem Finger trifft, ohne den Nachbarn zu erwischen. */
  min-height: 2.75rem;
  line-height: 1.5;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--clr-text);
  background: var(--clr-bg-2);
}
.eks-nav a:hover, .eks-schnell a:hover, .eks-seiten a:hover {
  border-color: var(--clr-gold);
  color: var(--clr-gold);
}
/* Die aktuelle Stelle. Nicht nur über die Farbe: fetter, mit Goldrahmen UND
   einem Haken davor. Wer Farben nicht unterscheidet, sieht trotzdem, wo er
   ist; wer vorlesen lässt, hört zusätzlich aria-current. */
.eks-nav-hier, .eks-seite-hier {
  font-weight: 700;
  border-color: var(--clr-gold) !important;
  border-width: 2px !important;
  color: var(--clr-gold) !important;
  background: var(--clr-gold-dim) !important;
}
.eks-nav-hier::before, .eks-seite-hier::before { content: "\2713\00a0"; }
.eks-schnell { margin: 0 0 0.9rem; }

.eks-bezug {
  margin: 0 0 1rem;
  padding: 0.6rem 0.8rem;
  background: var(--clr-bg-2);
  border-left: 3px solid var(--clr-gold);
  border-radius: var(--radius);
  max-width: min(46rem, 100%);
}

/* ── Formulare ───────────────────────────────────────── */
/* Beschriftung ÜBER dem Feld, nicht daneben. Bei 200 Prozent Schrift oder auf
   320 Pixeln Breite reicht es nicht für zwei Spalten, und ein Feld, das vor
   seiner Beschriftung wegläuft, ist unbenutzbar. */
.eks .eks-feld {
  display: block;
  margin: 0 0 0.9rem;
  /* min() statt einer festen Obergrenze: Bei 200 Prozent Schrift sind 34rem
     breiter als das Fenster, und dann wäre die Grenze keine. */
  max-width: min(34rem, 100%);
}
.eks .eks-feld > label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 600;
  color: var(--clr-white);
}
.eks .eks-feld .form-input,
.eks .eks-feld .form-select,
.eks .eks-feld textarea {
  width: 100%;
  min-width: 0;
  min-height: 2.75rem;
}
.eks .eks-feld input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  margin-right: 0.5rem;
  vertical-align: middle;
}
.eks .eks-feld > label:has(input[type="checkbox"]) { font-weight: 400; }

/* Der zugeordnete Hilfetext. Er ist über aria-describedby mit dem Feld
   verbunden, steht also beim Hineinspringen mit. */
.eks-hilfe {
  display: block;
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--clr-text-dim);
  max-width: min(44rem, 100%);
}
.eks-warnung {
  margin: 0.6rem 0;
  padding: 0.6rem 0.8rem;
  border: 1px solid rgba(224, 112, 112, 0.45);
  border-radius: var(--radius);
  max-width: min(46rem, 100%);
}

.eks fieldset {
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  padding: 0.9rem 1rem 0.3rem;
  margin: 0 0 1.1rem;
  min-width: 0;
}
.eks legend {
  padding: 0 0.4rem;
  font-size: 0.85rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--clr-gold);
}

.eks-knopfreihe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin: 0.8rem 0 0;
}
/* Formular in einer Tabellenzelle: Feld und Knopf nebeneinander, mit Abstand,
   und beides darf umbrechen. */
.eks-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 0;
}
.eks-inline .form-input { width: auto; flex: 1 1 8rem; min-width: 0; min-height: 2.75rem; }

/* Ankreuzfelder. Die Browservorgabe ist 13 Pixel breit — mit dem Finger kaum
   und mit zitternder Hand gar nicht zu treffen. Nur im EKS-Bereich, damit die
   Formulare des Shops unverändert bleiben. */
.eks input[type="checkbox"] {
  /* In `em`, damit es mit vergrößerter Schrift mitwächst, und mit einer
     Untergrenze in Pixeln, weil `1rem` in diesem Stylesheet nicht 16 Pixel
     sind und 1,4rem wieder bei 18 Pixeln landen würde. */
  width: 1.5em;
  height: 1.5em;
  min-width: 24px;
  min-height: 24px;
  margin-right: 0.4rem;
  vertical-align: middle;
  accent-color: var(--clr-gold);
}

/* Knöpfe im Klartext. Der Shop schreibt Knöpfe in gesperrten Großbuchstaben —
   das passt zu „IN DEN WARENKORB" und wird bei „Prüfmarkierung zurücknehmen"
   zu einer Zeile, die man buchstabiert statt sie zu lesen. Hier also normale
   Schreibweise, enger gesetzt, und eine Fläche, die man trifft. */
.eks .btn-klartext {
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.65rem 1.1rem;
  min-height: 2.75rem;
  line-height: 1.4;
  /* Kein Anheben beim Überfahren: In einer Liste mit zwanzig Knöpfen wackelt
     sonst die halbe Seite. */
  transition: background var(--trans), color var(--trans), border-color var(--trans);
}
.eks .btn-klartext:hover { transform: none; }
.eks .btn-sm.btn-klartext { font-size: 0.9rem; padding: 0.55rem 0.9rem; }

/* ── Zahlen und Angaben ──────────────────────────────── */
.eks-zahlen { margin: 0 0 0.8rem; max-width: min(34rem, 100%); }
.eks-zahlen > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--clr-border);
}
.eks-zahlen dt { margin: 0; color: var(--clr-text-dim); }
.eks-zahlen dd { margin: 0; font-weight: 700; color: var(--clr-white); }
/* Die Zahl, auf die es ankommt: größer und mit Rahmen, damit sie nicht in
   einer Reihe gleich aussehender Zeilen untergeht. */
.eks-zahlen-wichtig {
  border: 2px solid var(--clr-gold);
  border-radius: var(--radius);
  padding: 0.3rem 0.8rem;
  margin-bottom: 0.9rem;
}
.eks-zahlen-wichtig > div { border-bottom: 0; }
.eks-zahlen-wichtig dd { font-size: 1.15rem; color: var(--clr-gold); }

.eks-daten { margin: 0 0 0.8rem; max-width: min(46rem, 100%); }
.eks-daten > div {
  display: grid;
  /* minmax(0, …) in BEIDEN Spalten: Sonst erzwingt die längste Beschriftung
     eine Mindestbreite, die bei großer Schrift nicht mehr hineinpasst. */
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: 0.3rem 1rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--clr-border);
}
.eks-daten dt { margin: 0; color: var(--clr-text-dim); }
.eks-daten dd { margin: 0; }

.eks-aufgaben { list-style: none; padding: 0; margin: 0 0 0.6rem; }
.eks-aufgaben > li {
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--clr-border);
}
.eks-aufgaben > li > a { font-weight: 600; }

.eks-wege { list-style: none; padding: 0; margin: 0; }
.eks-wege > li { margin: 0 0 0.75rem; }
.eks-wege .eks-hilfe { margin-top: 0.3rem; }

/* ── Aufklappbare Hilfe ──────────────────────────────── */
/* <details> sagt den Zustand von sich aus an. Hier bekommt es nur eine
   anfassbare Fläche und einen sichtbaren Fokusrahmen. */
.eks-klappe {
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  margin: 0 0 0.7rem;
  background: var(--clr-bg-2);
  max-width: min(46rem, 100%);
}
.eks-klappe > summary {
  padding: 0.7rem 0.9rem;
  min-height: 2.75rem;
  cursor: pointer;
  font-weight: 600;
  color: var(--clr-white);
}
.eks-klappe > summary:hover { color: var(--clr-gold); }
.eks-klappe > div { padding: 0 0.9rem 0.6rem; }
.eks-klappe[open] > summary { border-bottom: 1px solid var(--clr-border); }

/* ── Tabellen ────────────────────────────────────────── */
.eks .table-scroll { margin: 0 0 0.8rem; }
/* Ein Zeilenkopf ist im Shop-Stylesheet eine Spaltenbeschriftung: klein,
   grau, in Großbuchstaben und gesperrt. Als ZEILENkopf steht dort aber eine
   Beschreibung oder ein Monatsname — und der soll aussehen und sich lesen
   lassen wie die Angabe, die er ist. Der Grund für th scope="row": JAWS sagt
   beim Wandern durch die Tabelle die Zeile mit an, sonst hört man nur
   „29,99 Euro" ohne zu wissen, wovon. */
.eks-liste tbody th[scope="row"],
.eks-liste tfoot th[scope="row"] {
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--clr-text);
}
.eks-liste { min-width: 0; }
.eks-liste th, .eks-liste td { padding: 0.6rem 0.7rem; }
.eks-liste td[data-label="Aktionen"],
.eks-liste td[data-label="Auswertung"],
.eks-liste td[data-label="Zahlungstag eintragen"],
.eks-liste td[data-label="Übernehmen"] {
  white-space: normal;
}
/* Mehrere Aktionen in einer Zelle: Abstand dazwischen, damit auf dem Handy
   nicht der falsche getroffen wird. */
.eks-liste td > .btn + .btn,
.eks-liste td > .btn + form,
.eks-liste td > form + form { margin-top: 0.4rem; }
.eks-liste td > .btn, .eks-liste td > form { display: block; }
.eks-liste td > .btn { width: fit-content; }

/* In der Aktionsspalte stehen bis zu fünf Wege. Gestapelt wäre jede Zeile der
   Liste fünf Knöpfe hoch; am Rechner fließen sie deshalb nebeneinander und
   brechen um. `display: flex` auf dem `td` selbst ginge nicht — die Zelle wäre
   dann keine Tabellenzelle mehr und die Spalten liefen auseinander. Auf dem
   Handy bleibt es beim Stapel, dort ist jeder Knopf volle Breite. */
@media (min-width: 761px) {
  .eks-liste td[data-label="Aktionen"],
  .eks-liste td[data-label="Auswertung"] { min-width: 13rem; }
  .eks-liste td[data-label="Aktionen"] > .btn,
  .eks-liste td[data-label="Aktionen"] > form,
  .eks-liste td[data-label="Auswertung"] > .btn {
    display: inline-block;
    vertical-align: middle;
    width: auto;
    margin: 0 0.4rem 0.4rem 0;
  }
  .eks-liste td[data-label="Aktionen"] > .btn + .btn,
  .eks-liste td[data-label="Aktionen"] > .btn + form,
  .eks-liste td[data-label="Aktionen"] > form + form,
  .eks-liste td[data-label="Auswertung"] > .btn + .btn { margin-top: 0; }
}

.eks-seiten { margin: 0.6rem 0 0; }
.eks-seiten ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0;
  margin: 0;
}
.eks-seiten li { margin: 0; }

.eks-wahl {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  align-items: flex-end;
  margin: 0 0 1.2rem;
}
.eks-wahl .eks-feld { margin: 0; flex: 1 1 12rem; min-width: 0; max-width: min(24rem, 100%); }

/* ── Schmal: Tabellen werden zu Blöcken ──────────────── */
@media (max-width: 760px) {
  .eks .table-scroll { overflow-x: visible; }
  /* display:none, nicht „unsichtbar": Sonst läse ein Screenreader erst die
     sechs Spaltennamen und danach noch einmal dieselben als Beschriftung
     jeder Angabe. */
  .eks-liste thead { display: none; }
  .eks-liste,
  .eks-liste tbody,
  .eks-liste tfoot,
  .eks-liste tr,
  .eks-liste th,
  .eks-liste td { display: block; width: auto; }
  .eks-liste tr {
    border: 1px solid var(--clr-border);
    border-radius: var(--radius);
    background: var(--clr-bg-2);
    margin: 0 0 0.9rem;
    padding: 0.5rem 0.8rem;
  }
  .eks-liste tr:hover td { background: transparent; }
  .eks-liste th, .eks-liste td {
    border: 0;
    border-bottom: 1px solid var(--clr-border);
    padding: 0.5rem 0;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    font-size: 1rem;
    color: var(--clr-text);
  }
  .eks-liste tr > *:last-child { border-bottom: 0; }
  /* Die Beschriftung kommt aus data-label am Feld selbst. Ein Screenreader
     liest erzeugten Inhalt mit, und so trägt jede Angabe ihren Namen, ohne
     dass die Liste ein zweites Mal im Quelltext steht. */
  .eks-liste th[data-label]::before,
  .eks-liste td[data-label]::before {
    content: attr(data-label) ":";
    display: block;
    margin-bottom: 0.15rem;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--clr-text-dim);
  }
  .eks-inline .form-input { width: 100%; }
  /* Auch der Knopf IN einem Formular in der Zelle, nicht nur der direkt
     darin stehende: „Prüfung zurücknehmen" ist sonst breiter als 320 Pixel
     und schiebt die ganze Seite auf. */
  .eks-liste td > .btn,
  .eks-liste td > form .btn { width: 100%; text-align: center; justify-content: center; }
}

/* ── Sehr schmal (ab 320 Pixel) ──────────────────────── */
@media (max-width: 420px) {
  .eks-daten > div { grid-template-columns: 1fr; }
  .eks-zahlen > div { flex-direction: column; align-items: flex-start; gap: 0.1rem; }
  .eks-knopfreihe .btn, .eks-wege .btn { width: 100%; justify-content: center; }
  .eks-nav ul, .eks-schnell ul { flex-direction: column; }
  .eks-nav a, .eks-schnell a { display: block; }
}