:root {
  --bg:       #0d0d0d;
  --bg2:      #141414;
  --bg3:      #1a1a1a;
  --card:     #1e1e1e;
  --border:   #2a2a2a;
  --gold:     #c9a84c;
  --gold2:    #e2c97e;
  --gold-dim: rgba(201,168,76,0.12);
  --text:     #f0ede8;
  --muted:    #888;
  --dim:      #8a8a8a; /* WCAG AA: 4.5:1 auf bg-Stack #0d0d0d/#141414/#1e1e1e */
  /* DSGVO: keine externen Fonts (F43). Inter + Playfair Display
     bleiben als bevorzugte Faces gelistet, falls lokal installiert
     oder spaeter selbst gehostet (assets/fonts/). Sonst System-Stack. */
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', Cambria, serif;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
html, body { max-width:100%; overflow-x:hidden; }
body { font-family:var(--font-sans); background:var(--bg); color:var(--text); line-height:1.6; }
img { display:block; width:100%; }
a { color:inherit; text-decoration:none; }

/* A11y: visuell versteckt, aber für Screenreader + Voice-Control da */
.visually-hidden {
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ── NAV ──
   body > nav: nur die Top-Navigation. Footer-Navs (Social Media,
   Rechtliches) sind seit Session 29 ebenfalls <nav>-Elemente und
   würden sonst denselben fixed-Top-Style erben. */
body > nav {
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 3rem; height:64px;
  background:rgba(13,13,13,0.92); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
}
.nav-logo { font-family:var(--font-serif); font-size:1.25rem; font-weight:700; letter-spacing:0.02em; }
.nav-links { display:flex; gap:2.5rem; list-style:none; margin:0; padding:0; }
.nav-links a { font-size:0.82rem; font-weight:500; color:var(--muted); letter-spacing:0.06em; text-transform:uppercase; transition:color 0.2s; }
.nav-links a:hover { color:var(--text); }
.nav-icons { display:flex; gap:1rem; align-items:center; }
/* ── Hamburger-Button (nur Mobile) ── */
.nav-toggle {
  display:none;
  flex-direction:column; justify-content:center; gap:5px;
  width:40px; height:40px; padding:0;
  background:transparent; border:1px solid var(--border); border-radius:8px;
  cursor:pointer; transition:border-color 0.2s;
}
.nav-toggle:hover { border-color:var(--gold); }
.nav-toggle span {
  display:block; width:18px; height:2px; margin:0 auto;
  background:var(--text); border-radius:2px; transition:transform 0.25s, opacity 0.2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
.nav-icon { width:36px; height:36px; border-radius:8px; border:1px solid var(--border); background:var(--bg3); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:0.9rem; transition:border-color 0.2s, background 0.2s; padding:0; color:inherit; font-family:inherit; }
.nav-icon:hover { border-color:var(--gold); }
.nav-icon.active { border-color:var(--gold); background:rgba(212,175,55,0.12); }
/* ── Sprach-Dropdown ── */
.lang-wrap { position:relative; }
.lang-btn {
  display:flex; align-items:center; gap:5px;
  height:32px; padding:0 10px; border-radius:8px;
  background:transparent; border:1px solid var(--border);
  color:var(--muted); font-size:0.72rem; font-weight:700;
  letter-spacing:0.04em; cursor:pointer;
  transition:all 0.2s; white-space:nowrap;
}
.lang-btn:hover, .lang-btn.open { border-color:var(--gold); color:var(--gold); background:var(--gold-dim); }
.lang-globe { font-size:0.95rem; line-height:1; }
.lang-flag  { display:flex; align-items:center; flex-shrink:0; width:20px; height:15px; border-radius:2px; overflow:hidden; }
.lang-flag svg { width:20px; height:15px; display:block; }
.lang-code  { font-size:0.72rem; font-weight:700; letter-spacing:0.06em; }
.lang-caret { font-size:0.55rem; opacity:0.6; transition:transform .2s; }
.lang-btn.open .lang-caret { transform:rotate(180deg); }

.lang-dropdown {
  position:absolute; top:calc(100% + 6px); right:0;
  background:#1a1a1a; border:1px solid var(--border);
  border-radius:10px; box-shadow:0 8px 32px rgba(0,0,0,0.55);
  min-width:170px; overflow:hidden;
  opacity:0; pointer-events:none; transform:translateY(-6px);
  transition:opacity .18s, transform .18s;
  z-index:300;
}
.lang-dropdown.open { opacity:1; pointer-events:all; transform:translateY(0); }
.lang-opt {
  display:flex; align-items:center; gap:10px;
  padding:9px 14px; cursor:pointer;
  font-size:0.8rem; color:var(--muted);
  transition:background .12s, color .12s;
  /* Button-Reset: lang-opt war frueher <div>, jetzt <button role="menuitem"> */
  width:100%; border:none; background:transparent; text-align:left;
  font-family:inherit;
}
.lang-opt:hover   { background:var(--gold-dim); color:var(--gold); }
.lang-opt:focus-visible { outline:2px solid var(--gold); outline-offset:-2px; }
.lang-opt.active  { color:var(--gold); background:rgba(212,168,67,0.08); }
.lang-opt-flag    { display:flex; align-items:center; flex-shrink:0; width:20px; height:15px; border-radius:2px; overflow:hidden; }
.lang-opt-flag svg { width:20px; height:15px; display:block; }
.lang-opt-label   { flex:1; }
.lang-opt-code    { font-size:0.65rem; font-weight:700; letter-spacing:0.06em; opacity:0.5; }
.lang-opt.active .lang-opt-code { opacity:1; }
.footer-soon { color:var(--dim); cursor:default; }
.soon-badge {
  display:inline-block; padding:1px 6px; border-radius:4px;
  font-size:0.62rem; font-weight:700; letter-spacing:1px;
  text-transform:uppercase; background:#1e1c12;
  border:1px solid #3a3020; color:var(--gold); margin-left:4px;
  vertical-align:middle;
}

/* ── HERO ── */
.hero {
  position:relative; min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.hero-bg {
  position:absolute; inset:0;
  background: linear-gradient(135deg, #0d0d0d 0%, #1a1208 50%, #0d0d0d 100%);
}
.hero-img-placeholder {
  position:absolute; inset:0;
  background: linear-gradient(160deg, #0d0d0d 30%, #1f1a0e 60%, #0d0d0d 100%);
  display:flex; align-items:center; justify-content:center;
}
.hero-designer-photo {
  /* Top-Offset gibt dem Kopf oben Luft, Container ist nicht mehr full-height.
     object-position:center top zeigt dann den oberen Bildrand komplett. */
  position:absolute; right:0; top:8%; bottom:0; width:55%;
  object-fit:cover; object-position:center top;
  mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,0.6) 20%, rgba(0,0,0,0.9) 50%, #000 100%);
  -webkit-mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,0.6) 20%, rgba(0,0,0,0.9) 50%, #000 100%);
  opacity:0.65;
}
.hero-model-silhouette {
  position:absolute; right:10%; top:0; bottom:0; width:45%;
  background: linear-gradient(180deg, transparent 0%, rgba(201,168,76,0.03) 40%, transparent 100%);
  display:flex; align-items:center; justify-content:center; font-size:8rem; opacity:0.08;
}
.hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(13,13,13,0.95) 0%, rgba(13,13,13,0.7) 50%, rgba(13,13,13,0.3) 100%);
}
.hero-content {
  position:relative; z-index:2;
  max-width:1200px; width:100%; padding:0 3rem;
  display:flex; align-items:center;
}
.hero-text { max-width:560px; }
.hero-eyebrow {
  display:inline-block; margin-bottom:1.5rem;
  font-size:0.72rem; font-weight:600; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--gold); border:1px solid rgba(201,168,76,0.3);
  padding:0.35rem 1rem; border-radius:100px;
  background:rgba(201,168,76,0.06);
}
.hero h1 {
  font-family:var(--font-serif);
  font-size:clamp(3rem,7vw,5.5rem); font-weight:900;
  line-height:1.0; letter-spacing:-0.02em;
  margin-bottom:1.2rem;
}
.hero h1 span { color:var(--gold); }
.hero-sub { font-size:1.05rem; color:var(--muted); margin-bottom:2.5rem; font-weight:300; letter-spacing:0.02em; }
.btn-primary {
  display:inline-flex; align-items:center; gap:0.6rem;
  background:var(--gold); color:#0d0d0d;
  font-size:0.78rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
  padding:0.9rem 2rem; border-radius:4px; cursor:pointer;
  transition:background 0.2s, transform 0.2s;
  border:none;
}
.btn-primary:hover { background:var(--gold2); transform:translateY(-1px); }
.btn-primary svg { transition:transform 0.2s; }
.btn-primary:hover svg { transform:translateX(4px); }
.hero-scroll {
  position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
  font-size:0.68rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--dim);
  display:flex; flex-direction:column; align-items:center; gap:0.5rem; z-index:2;
}
.scroll-line { width:1px; height:40px; background:linear-gradient(var(--gold),transparent); }

/* ── PROCESS BAR ── */
.process-bar {
  background:var(--bg2); border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  padding:1.2rem 3rem;
}
.process-inner { max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:center; gap:0; }
.process-step {
  display:flex; align-items:center; gap:0.7rem;
  padding:0 2.5rem; font-size:0.75rem; font-weight:600;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--muted);
}
.process-step .step-icon { font-size:1rem; color:var(--gold); }
.process-sep { width:60px; height:1px; background:var(--border); flex-shrink:0; }

/* ── SECTION WRAPPER ── */
.section { max-width:1200px; margin:0 auto; padding:5rem 3rem; }
.section-label { font-size:0.7rem; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); margin-bottom:0.6rem; }
.section-title { font-family:var(--font-serif); font-size:clamp(1.8rem,4vw,2.8rem); font-weight:700; margin-bottom:0.5rem; }
.section-sub { color:var(--muted); font-size:0.92rem; }

/* ── FILTER TABS ── */
.filter-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:2.5rem; flex-wrap:wrap; gap:1rem; }
.filter-section { display:flex; flex-direction:column; gap:0.55rem; margin-bottom:2rem; }
.filter-group { display:flex; align-items:center; gap:0.75rem; flex-wrap:wrap; }
.filter-group-label { font-size:0.65rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); min-width:3rem; flex-shrink:0; }
.filter-tabs { display:flex; gap:0.4rem; flex-wrap:wrap; }
.filter-tab {
  padding:0.4rem 1rem; border-radius:100px; cursor:pointer;
  font-size:0.75rem; font-weight:600; letter-spacing:0.06em;
  background:transparent; border:1px solid var(--border); color:var(--muted);
  transition:all 0.2s;
  /* Button-Reset: simple Tabs sind jetzt <button>, Split-Tabs <div role="button"> */
  font-family:inherit; line-height:normal;
}
.filter-tab:hover { border-color:var(--gold); color:var(--text); }
.filter-tab:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.filter-tab.active { background:var(--gold); border-color:var(--gold); color:#0d0d0d; }
.filter-count { font-size:0.75rem; color:var(--muted); white-space:nowrap; }

/* ── Kategorie-Tab mit Subtoggle (Split-Button) ── */
.filter-tab.has-subfilter {
  display:inline-flex; align-items:center; gap:0; padding:0;
  overflow:hidden;
}
.filter-tab.has-subfilter .tab-label {
  padding:0.4rem 0.9rem; display:inline-block;
}
.filter-tab.has-subfilter .tab-subtoggle {
  background:transparent; border:none; border-left:1px solid var(--border);
  color:inherit; font:inherit; font-size:0.9rem; font-weight:700; line-height:1;
  padding:0.4rem 0.6rem; cursor:pointer; min-width:2rem;
  transition:background 0.15s, border-color 0.15s;
}
.filter-tab.has-subfilter.active .tab-subtoggle { border-left-color:rgba(13,13,13,0.4); }
.filter-tab.has-subfilter:hover .tab-subtoggle,
.filter-tab.has-subfilter .tab-subtoggle:hover { background:rgba(255,255,255,0.06); }
.filter-tab.has-subfilter.active:hover .tab-subtoggle,
.filter-tab.has-subfilter.active .tab-subtoggle:hover { background:rgba(0,0,0,0.12); }

/* ── Flyout (Desktop Sub-Panel unter Kategorie) ── */
.filter-flyout {
  background:var(--bg2, #141414); border:1px solid var(--border);
  border-radius:10px; padding:0.5rem; margin-top:0.4rem;
  display:flex; gap:0.35rem; flex-wrap:wrap;
  animation:flyout-in 180ms ease-out;
}
@keyframes flyout-in { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
.flyout-item {
  background:transparent; border:1px solid var(--border); color:var(--muted);
  padding:0.32rem 0.75rem; border-radius:100px; font-size:0.72rem; font-weight:600;
  letter-spacing:0.05em; cursor:pointer; transition:all 0.15s;
}
.flyout-item:hover { border-color:var(--gold); color:var(--text); }
.flyout-item.active { background:var(--gold); border-color:var(--gold); color:#0d0d0d; }

/* ── Active-Subfilter-Chip + Reset-Button ── */
.filter-active-chip { margin-top:0.25rem; }
.active-chip-btn {
  background:var(--gold); border:none; color:#0d0d0d;
  padding:0.3rem 0.75rem; border-radius:100px;
  font-size:0.72rem; font-weight:700; letter-spacing:0.05em;
  cursor:pointer;
}
.active-chip-btn:hover { background:#d4b466; }
.filter-reset {
  margin-left:auto; background:transparent; border:1px solid var(--border);
  color:var(--muted); padding:0.35rem 0.8rem; border-radius:100px;
  font-size:0.7rem; font-weight:600; letter-spacing:0.05em; cursor:pointer;
  transition:all 0.15s;
}
.filter-reset:hover { border-color:var(--gold); color:var(--text); }

/* ── Mobile / Touch-only: Subtoggle als groesseres Tap-Target ── */
@media (hover: none), (max-width: 768px) {
  .filter-tab.has-subfilter .tab-subtoggle {
    padding:0.5rem 0.85rem; min-width:2.5rem;
  }
  /* Flyout mobile als Bottom-Sheet-artiger Rahmen — volle Breite */
  .filter-flyout { padding:0.75rem; }
}

/* Body-Klasse fuer Dev-Viewport-Toggle (erzwingt Mobile-Layout) */
body.dev-view-mobile .filter-tab.has-subfilter .tab-subtoggle {
  padding:0.5rem 0.85rem; min-width:2.5rem;
}

/* ── ADMIN PANEL ── */
.admin-bar { display:none; align-items:center; gap:1rem; background:#1a0a00; border:1px solid #c8922a55; border-radius:8px; padding:0.6rem 1rem; margin-bottom:1.5rem; font-size:0.78rem; color:#c8922a; }
.admin-bar.visible { display:flex; }
.admin-bar-icon { font-size:1rem; }
.admin-bar-btn { margin-left:auto; background:#c8922a; color:#0d0d0d; border:none; border-radius:6px; padding:0.35rem 0.9rem; font-size:0.72rem; font-weight:700; letter-spacing:0.06em; cursor:pointer; }
#adminPanel { display:none; position:fixed; inset:0; z-index:2000; background:rgba(0,0,0,0.88); backdrop-filter:blur(12px); overflow-y:auto; padding:2rem 1rem; }
#adminPanel.open { display:block; }
.admin-panel-box { max-width:860px; margin:0 auto; background:var(--bg2); border:1px solid #c8922a44; border-radius:14px; overflow:hidden; }
.admin-panel-head { display:flex; align-items:center; gap:1rem; padding:1.2rem 1.5rem; border-bottom:1px solid var(--border); background:#12060088; }
.admin-panel-head h2 { font-size:1rem; font-weight:700; color:#c8922a; margin:0; flex:1; }
.admin-panel-close { background:none; border:1px solid var(--border); color:var(--muted); border-radius:6px; padding:0.3rem 0.7rem; cursor:pointer; font-size:0.85rem; }
.admin-panel-body { padding:1.2rem 1.5rem; display:flex; flex-direction:column; gap:0.5rem; }
.admin-design-block { border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.admin-design-header { display:flex; align-items:center; gap:0.75rem; padding:0.7rem 1rem; background:var(--bg3); cursor:pointer; }
.admin-design-name { font-size:0.82rem; font-weight:700; flex:1; }
.admin-design-count { font-size:0.7rem; color:var(--dim); }
.admin-toggle { position:relative; width:36px; height:20px; flex-shrink:0; }
.admin-toggle input { opacity:0; width:0; height:0; position:absolute; }
.admin-toggle-slider { position:absolute; inset:0; border-radius:20px; background:var(--border); transition:background 0.2s; cursor:pointer; }
.admin-toggle-slider:before { content:''; position:absolute; width:14px; height:14px; left:3px; top:3px; border-radius:50%; background:#fff; transition:transform 0.2s; }
.admin-toggle input:checked + .admin-toggle-slider { background:#c8922a; }
.admin-toggle input:checked + .admin-toggle-slider:before { transform:translateX(16px); }
/* admin-product-row redefined below */
.admin-product-info { display:flex; flex-direction:column; gap:0.15rem; }
.admin-product-type { font-size:0.78rem; font-weight:600; }
.admin-product-markets { font-size:0.65rem; color:var(--dim); }
.admin-img-input { font-size:0.65rem; color:var(--dim); background:transparent; border:none; border-bottom:1px dashed var(--border); width:100%; outline:none; padding:0.1rem 0; color:var(--muted); font-family:monospace; margin-top:0.2rem; }
.admin-img-input:focus { border-bottom-color:#c8922a; color:var(--text); }
.admin-save-row { padding:1rem 1.5rem; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:0.75rem; }
.admin-save-btn { background:#c8922a; color:#0d0d0d; border:none; border-radius:8px; padding:0.55rem 1.5rem; font-size:0.8rem; font-weight:700; cursor:pointer; }
.admin-reset-btn { background:transparent; color:var(--muted); border:1px solid var(--border); border-radius:8px; padding:0.55rem 1.2rem; font-size:0.8rem; cursor:pointer; }


/* ── ADMIN PASSWORD MODAL ── */
#adminAuth { display:none; position:fixed; inset:0; z-index:3000; background:rgba(0,0,0,0.96); backdrop-filter:blur(16px); align-items:center; justify-content:center; }
#adminAuth.open { display:flex; }
.admin-auth-box { background:var(--bg2); border:1px solid #c8922a66; border-radius:16px; padding:2.5rem 2rem; width:320px; text-align:center; }
.admin-auth-box h3 { color:#c8922a; margin:0 0 0.4rem; font-size:1.1rem; letter-spacing:0.05em; }
.admin-auth-box p { color:var(--dim); font-size:0.78rem; margin:0 0 1.4rem; }
.admin-auth-input { width:100%; background:var(--bg3); border:1px solid var(--border); border-radius:8px; padding:0.75rem 1rem; color:var(--text); font-size:1rem; outline:none; text-align:center; letter-spacing:0.15em; box-sizing:border-box; }
.admin-auth-input:focus { border-color:#c8922a; }
.admin-auth-btn { margin-top:0.9rem; width:100%; background:#c8922a; color:#0d0d0d; border:none; border-radius:8px; padding:0.75rem; font-size:0.85rem; font-weight:700; cursor:pointer; }
.admin-auth-err { color:#e44; font-size:0.75rem; margin-top:0.5rem; min-height:1.1em; }

/* ── ADMIN SORT BUTTONS ── */
.admin-sort-btns { display:flex; flex-direction:column; gap:2px; margin-right:4px; }
.admin-sort-btn { background:none; border:1px solid var(--border); border-radius:4px; color:var(--dim); cursor:pointer; padding:0 5px; font-size:0.7rem; line-height:1.6; }
.admin-sort-btn:hover { background:var(--bg3); color:#c8922a; border-color:#c8922a44; }

/* ── ADMIN TEXT EDIT FIELDS ── */
.admin-text-fields { padding:0.6rem 1rem 0.8rem; border-top:1px solid var(--border); background:#0d0d0d44; display:flex; flex-direction:column; gap:0.5rem; }
.admin-text-label { font-size:0.62rem; color:var(--dim); text-transform:uppercase; letter-spacing:0.07em; margin-bottom:1px; }
.admin-text-input { background:transparent; border:none; border-bottom:1px dashed var(--border); width:100%; outline:none; padding:0.15rem 0; color:var(--muted); font-size:0.8rem; font-family:inherit; }
.admin-text-input:focus { border-bottom-color:#c8922a; color:var(--text); }
textarea.admin-text-input { resize:vertical; min-height:3.5em; line-height:1.5; }

/* ── ADMIN NEW DESIGN MODAL ── */
#adminNewDesign { display:none; position:fixed; inset:0; z-index:2500; background:rgba(0,0,0,0.92); backdrop-filter:blur(10px); align-items:center; justify-content:center; }
#adminNewDesign.open { display:flex; }
.admin-new-box { background:var(--bg2); border:1px solid #c8922a44; border-radius:14px; padding:1.5rem; width:500px; max-width:95vw; max-height:88vh; overflow-y:auto; }
.admin-new-box h3 { color:#c8922a; margin:0 0 1.2rem; font-size:1rem; display:flex; align-items:center; gap:0.5rem; }
.admin-new-field { margin-bottom:0.9rem; }
.admin-new-field label { display:block; font-size:0.68rem; color:var(--dim); text-transform:uppercase; letter-spacing:0.07em; margin-bottom:0.3rem; }
.admin-new-field input, .admin-new-field textarea, .admin-new-field select { width:100%; background:var(--bg3); border:1px solid var(--border); border-radius:6px; padding:0.55rem 0.8rem; color:var(--text); font-size:0.82rem; outline:none; box-sizing:border-box; font-family:inherit; }
.admin-new-field input:focus, .admin-new-field textarea:focus, .admin-new-field select:focus { border-color:#c8922a; }
.admin-new-field textarea { resize:vertical; min-height:4em; }
.admin-new-row { display:grid; grid-template-columns:1fr 1fr; gap:0.75rem; }
.admin-new-actions { display:flex; gap:0.75rem; justify-content:flex-end; margin-top:1.2rem; padding-top:1rem; border-top:1px solid var(--border); }
.admin-new-cancel { background:transparent; color:var(--muted); border:1px solid var(--border); border-radius:8px; padding:0.5rem 1rem; font-size:0.8rem; cursor:pointer; }
.admin-new-save { background:#c8922a; color:#0d0d0d; border:none; border-radius:8px; padding:0.5rem 1.4rem; font-size:0.8rem; font-weight:700; cursor:pointer; }


/* ── ADMIN IMAGE MANAGEMENT ── */
.admin-product-row { display:grid; grid-template-columns:52px 1fr auto; align-items:start; gap:0.75rem; padding:0.6rem 1rem; border-top:1px solid var(--border); background:var(--bg2); }
.admin-img-thumb { width:48px; height:60px; object-fit:cover; border-radius:4px; border:1px solid var(--border); background:var(--bg3); cursor:pointer; flex-shrink:0; }
.admin-img-thumb:hover { border-color:#c8922a; }
.admin-extra-images { display:flex; flex-direction:column; gap:0.25rem; margin-top:0.3rem; }
.admin-extra-row { display:flex; align-items:center; gap:0.3rem; }
.admin-extra-row .admin-img-input { flex:1; }
.admin-extra-thumb { width:28px; height:34px; object-fit:cover; border-radius:3px; border:1px solid var(--border); background:var(--bg3); flex-shrink:0; }
.admin-add-img-btn { font-size:0.7rem; color:#c8922a; background:none; border:1px dashed #c8922a55; border-radius:4px; padding:0.15rem 0.5rem; cursor:pointer; margin-top:0.25rem; }
.admin-add-img-btn:hover { border-color:#c8922a; background:#c8922a11; }
.admin-remove-img-btn { background:none; border:none; color:var(--dim); cursor:pointer; font-size:0.8rem; padding:0 2px; line-height:1; flex-shrink:0; }
.admin-remove-img-btn:hover { color:#e44; }

/* ── MODAL CAROUSEL + GALLERY ── */
.modal-img-col { position:relative; background:var(--bg3); border-right:1px solid var(--border); border-radius:12px 0 0 12px; overflow:hidden; min-height:260px; display:flex; flex-direction:column; }
.modal-carousel { position:relative; width:100%; flex:1 1 auto; min-height:0; }
.modal-carousel-slide { position:absolute; inset:0; opacity:0; transition:opacity 0.35s ease; pointer-events:none; }
.modal-carousel-slide.active { opacity:1; pointer-events:auto; }
.modal-carousel-slide img { width:100%; height:100%; object-fit:contain; display:block; }

/* Thumb-Strip unter dem Hauptbild */
.modal-gallery-thumbs {
  display:flex; gap:8px; padding:10px 12px;
  overflow-x:auto; background:var(--bg3);
  border-top:1px solid var(--border);
  scrollbar-width:thin; flex:0 0 auto;
}
.modal-gallery-thumbs.hidden { display:none; }
/* .hidden wird in renderGallery() gesetzt wenn _galleryImages.length < 2 */
.modal-gallery-thumb {
  flex:0 0 60px; width:60px; height:60px; padding:0;
  border:2px solid transparent; border-radius:6px;
  overflow:hidden; background:var(--bg2); cursor:pointer;
  transition:border-color 0.2s, opacity 0.2s; opacity:0.6;
}
.modal-gallery-thumb:hover,
.modal-gallery-thumb:focus-visible { opacity:1; outline:none; }
.modal-gallery-thumb.active {
  border-color:var(--gold); opacity:1;
}
.modal-gallery-thumb img {
  width:100%; height:100%; object-fit:cover; display:block;
}
@media (prefers-reduced-motion: reduce) {
  .modal-carousel-slide { transition:none; }
}

/* ── DESIGN GRID (Artwork-First) ── */
.product-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
  padding:0;
}
.product-grid.cols-4 { grid-template-columns:repeat(4, 1fr); }
@media (max-width:900px) { .product-grid { grid-template-columns:repeat(2, 1fr); gap:16px; } }
@media (max-width:600px) { .product-grid { grid-template-columns:repeat(2, 1fr); gap:12px; } }
@media (max-width:380px) { .product-grid { grid-template-columns:1fr; gap:14px; } }

/* Mobile: Titel darf 2 Zeilen haben statt abgeschnitten zu werden,
   "N Typen"-Badge kompakter, Fav-Button kleiner. */
@media (max-width:600px) {
  .card-title {
    white-space:normal; overflow:visible; text-overflow:clip;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    line-height:1.25; min-height:2.5em;
    font-size:14px;
  }
  .card-info { padding:10px 12px; }
  .card-types-badge { bottom:6px; right:6px; font-size:10px; padding:2px 6px; }
  .card-variant-badge { top:6px; left:6px; right:auto; }
  .fav-btn { top:6px; right:6px; width:28px; height:28px; font-size:14px; }
}

.design-card {
  background:var(--card); border:1px solid var(--border); border-radius:12px;
  overflow:hidden; cursor:pointer;
  margin:0; /* figure default reset */
  transition:transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.design-card:hover,
.design-card:focus-visible {
  transform:translateY(-4px);
  box-shadow:0 8px 24px rgba(0,0,0,0.3);
  border-color:var(--gold);
}
.design-card:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.modal-similar-card:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.card-image-wrap {
  position:relative; aspect-ratio:1/1; overflow:hidden;
  background:var(--bg3);
}
.card-image-wrap img {
  width:100%; height:100%; object-fit:cover;
  transition:transform 0.4s ease;
}
.design-card:hover .card-image-wrap img { transform:scale(1.06); }
/* Hover-Slideshow: sanfter Crossfade (nur bei aktivem Produkt-Filter,
   siehe bindCardSlideshows in products.js). prefers-reduced-motion wird
   im JS beachtet — hier nur die dezente Opacity-Transition. */
.card-image-wrap img[data-slideshow] { transition:transform .4s ease, opacity .2s ease; }
@media (prefers-reduced-motion: reduce) {
  .card-image-wrap img[data-slideshow] { transition:opacity .2s ease; }
}
.card-badge-new {
  position:absolute; top:10px; left:10px;
  background:var(--gold); color:#0d0d0d;
  font-size:11px; font-weight:700;
  padding:3px 8px; border-radius:4px;
  text-transform:uppercase; letter-spacing:0.5px;
}
.card-types-badge {
  position:absolute; bottom:10px; right:10px;
  background:rgba(13,13,13,0.75); color:var(--text);
  font-size:11px; padding:3px 8px; border-radius:4px;
  backdrop-filter:blur(4px);
}
.card-variant-badge {
  position:absolute; top:10px; right:10px; z-index:4;
  background:rgba(13,13,13,0.85); color:var(--gold);
  border:1px solid var(--gold);
  font-size:10px; font-weight:700; letter-spacing:0.5px;
  padding:2px 6px; border-radius:3px;
  backdrop-filter:blur(4px);
}
.modal-similar-card { position:relative; }
.similar-variant-badge {
  top:6px; right:6px;
  font-size:9px; padding:1px 5px;
}
.card-flip-indicator {
  position:absolute; top:10px; right:10px; z-index:5;
  background:rgba(13,13,13,0.82); border:1px solid var(--gold);
  color:var(--gold); font-size:0.6rem; font-weight:700;
  letter-spacing:0.08em; padding:0.2rem 0.55rem; border-radius:3px;
  pointer-events:none;
}
.card-hover-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(13,13,13,0.92) 0%, rgba(13,13,13,0.45) 52%, transparent 100%);
  display:flex; align-items:flex-end; justify-content:center;
  padding:1rem;
  opacity:0; transition:opacity 0.3s;
}
.design-card:hover .card-hover-overlay { opacity:1; }
/* Touch-Geräte: Overlay deaktivieren — ganze Karte ist bereits klickbar,
   und Hover bleibt auf Touch nach erstem Tap sticky (überdeckt Inhalt). */
@media (hover: none) {
  .card-hover-overlay { display:none; }
}
.hover-btn {
  display:flex; align-items:center; justify-content:center; gap:0.5rem; width:100%;
  background:var(--gold); color:#0d0d0d;
  font-size:0.7rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
  padding:0.65rem 1rem; border-radius:4px; border:none; cursor:pointer;
}
.card-info { padding:12px 16px; }
.card-title {
  margin:0 0 4px; font-size:15px; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.card-theme { margin:0; font-size:12px; color:var(--muted); }

/* ── Grid Toggle Button ── */
.grid-toggle {
  display:flex; gap:6px; align-items:center;
}
.grid-toggle-btn {
  background:var(--bg3); border:1px solid var(--border); border-radius:6px;
  color:var(--muted); font-size:14px; width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:border-color 0.2s, color 0.2s;
}
.grid-toggle-btn.active, .grid-toggle-btn:hover {
  border-color:var(--gold); color:var(--gold);
}

/* Legacy card classes (backward compat) */
.product-card { display:none; }
.card-image { display:none; }

/* ── LOAD MORE ── */
.load-more-row { display:flex; justify-content:center; margin-top:3rem; }
.btn-outline {
  padding:0.8rem 2.5rem; border:1px solid var(--border); border-radius:4px;
  font-size:0.75rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--muted); background:transparent; cursor:pointer; transition:all 0.2s;
}
.btn-outline:hover { border-color:var(--gold); color:var(--gold); }

/* ── FAVORITES ── */
.fav-btn {
  position:absolute; top:10px; right:10px; z-index:5;
  background:rgba(13,13,13,0.65); border:none; border-radius:50%;
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:16px; transition:transform 0.2s;
  backdrop-filter:blur(4px);
}
.fav-btn:hover { transform:scale(1.15); }
.fav-btn.active { color:#e63946; }

/* ── SURPRISE BUTTON ── */
.surprise-btn {
  display:flex; align-items:center; gap:6px;
  background:var(--bg3); border:1px solid var(--border); border-radius:8px;
  color:var(--muted); font-size:12px; font-weight:600;
  padding:8px 14px; cursor:pointer; transition:border-color 0.2s, color 0.2s;
  white-space:nowrap;
}
.surprise-btn:hover { border-color:var(--gold); color:var(--gold); }

/* ── SEARCH BAR ── */
.search-wrap {
  position:relative; max-width:400px; width:100%;
}
.search-wrap input {
  width:100%; padding:10px 40px 10px 16px;
  background:var(--bg3); border:1px solid var(--border); border-radius:8px;
  color:var(--text); font-size:14px; font-family:inherit;
  outline:none; transition:border-color 0.2s;
}
.search-wrap input:focus { border-color:var(--gold); }
.search-wrap input::placeholder { color:var(--dim); }
.search-clear {
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  background:none; border:none; color:var(--muted); font-size:16px;
  cursor:pointer; padding:4px; line-height:1;
}
.search-clear:hover { color:var(--text); }
.search-result-info {
  font-size:12px; color:var(--muted); margin-top:8px;
}

/* ── TRUST BADGES ── */
.badges-section { background:var(--bg2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.badges-inner { max-width:1200px; margin:0 auto; padding:3rem; display:flex; justify-content:space-around; flex-wrap:wrap; gap:2rem; }
.badge-item { display:flex; flex-direction:column; align-items:center; gap:0.6rem; text-align:center; }
.badge-icon { font-size:1.5rem; color:var(--gold); }
.badge-title { font-size:0.78rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; }
.badge-sub { font-size:0.68rem; color:var(--muted); letter-spacing:0.06em; text-transform:uppercase; }

/* ── ABOUT / CREATOR ── */
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
.about-image {
  aspect-ratio:3/4; background:var(--bg3); border-radius:8px; overflow:hidden;
  position:relative; border:1px solid var(--border);
}
/* ── ABOUT SLIDER ── */
.about-slider { position:absolute; inset:0; }
.about-slide {
  position:absolute; inset:0;
  opacity:0; transition:opacity 0.5s ease;
  pointer-events:none;
}
.about-slide.active { opacity:1; pointer-events:auto; }
.about-slide img { width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
.about-dots {
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  display:flex; gap:7px; z-index:10;
}
.about-dot {
  width:8px; height:8px; border-radius:50%;
  background:rgba(255,255,255,0.35); border:1px solid rgba(255,255,255,0.5);
  cursor:pointer; transition:background 0.2s, transform 0.2s;
}
.about-dot.active { background:var(--gold); border-color:var(--gold); transform:scale(1.2); }
.about-tag {
  position:absolute; bottom:1.5rem; right:-1rem;
  background:var(--gold); color:#0d0d0d;
  font-size:0.75rem; font-weight:800; letter-spacing:0.1em;
  padding:0.5rem 1rem; border-radius:4px;
}
.about-text { display:flex; flex-direction:column; gap:1.2rem; }
.about-text p { color:var(--muted); font-size:0.92rem; line-height:1.8; }
.about-stats { display:flex; gap:2rem; margin-top:1rem; }
.stat { display:flex; flex-direction:column; }
.stat-num { font-size:1.8rem; font-weight:800; color:var(--gold); line-height:1; }
.stat-label { font-size:0.68rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); margin-top:0.3rem; }

/* ── REVIEWS ── */
.reviews-section { background:var(--bg2); }
.reviews-section .section { padding-bottom:5rem; }
.reviews-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.5rem; margin-top:3rem; }
.review-card { background:var(--card); border:1px solid var(--border); border-radius:8px; padding:1.5rem; }
.review-stars { color:var(--gold); font-size:0.8rem; margin-bottom:0.8rem; letter-spacing:0.1em; }
.review-text { font-size:0.85rem; color:var(--muted); line-height:1.7; font-style:italic; margin-bottom:1.2rem; }
.review-footer { display:flex; align-items:center; gap:0.8rem; }
.review-avatar { width:32px; height:32px; border-radius:50%; background:var(--bg3); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:0.75rem; color:var(--muted); flex-shrink:0; }
.review-date { color:var(--muted) !important; }
.reviews-all-meta { color:var(--muted) !important; }
.review-name { font-size:0.78rem; font-weight:600; }
.review-source { font-size:0.68rem; color:var(--muted); }
.review-date { font-size:0.68rem; color:var(--dim); margin-top:0.8rem; }
.review-amazon-badge { margin-left:auto; font-size:0.68rem; color:var(--gold); opacity:0.85; white-space:nowrap; transition:opacity .2s; }
.review-card-linked { display:block; text-decoration:none; color:inherit; transition:border-color .2s, transform .2s; }
.review-card-linked:hover { border-color:var(--gold); transform:translateY(-2px); }
.review-card-linked:hover .review-amazon-badge { opacity:1; }
/* ── Reviews CTA Button ── */
.reviews-cta-wrap {
  margin-top:2.5rem; display:flex; flex-direction:column; align-items:center; gap:0.75rem;
}
.reviews-all-btn {
  display:inline-flex; align-items:center; gap:0.7rem;
  background:rgba(212,168,67,0.1); border:1px solid var(--gold);
  color:var(--gold); font-size:0.88rem; font-weight:700;
  padding:0.75rem 2rem; border-radius:40px;
  text-decoration:none; letter-spacing:0.04em;
  transition:background .2s, transform .2s, box-shadow .2s;
}
.reviews-all-btn:hover {
  background:rgba(212,168,67,0.2); transform:translateY(-2px);
  box-shadow:0 6px 24px rgba(212,168,67,0.18);
}
.reviews-all-btn-stars { font-size:0.9rem; letter-spacing:0.08em; }
.reviews-all-meta {
  font-size:0.72rem; color:var(--dim); letter-spacing:0.04em;
}

/* ── DESIGN-WÜNSCHE ── */
.wishes-section { padding:6rem 3rem; }
.wishes-inner   { max-width:1000px; margin:0 auto; }
.wishes-header  { text-align:center; margin-bottom:3rem; }
.wishes-grid    { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; margin-bottom:2.5rem; }
.wish-card {
  background:var(--bg2); border:1px solid var(--border); border-radius:8px;
  padding:20px; display:flex; flex-direction:column; gap:10px;
  transition:border-color .2s;
}
.wish-card:hover { border-color:#3a3020; }
.wish-card.status-in_production { border-color:#2a3060; }
.wish-card .wish-badge {
  display:inline-block; padding:2px 8px; border-radius:3px;
  font-size:9px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
  width:fit-content;
}
.wish-badge-production { background:#1a1e30; color:#aaf; border:1px solid #2a3060; }
.wish-badge-new        { background:#1e2e1e; color:#8e8; border:1px solid #2e4e2e; }
.wish-card .wish-title { font-family:var(--font-serif); font-size:1.05rem; color:var(--text); line-height:1.4; }
.wish-card .wish-desc  { font-size:0.78rem; color:var(--dim); line-height:1.6; flex:1; }
.wish-card .wish-image { width:100%; aspect-ratio:4/3; object-fit:contain; border-radius:4px; border:1px solid var(--border); background:#111; }
.vote-bar-wrap  { margin-top:4px; }
.vote-bar-track { height:5px; background:var(--border); border-radius:3px; overflow:hidden; }
.vote-bar-fill  { height:100%; background:linear-gradient(to right,var(--gold),var(--gold2)); border-radius:3px; transition:width .5s ease; }
.vote-numbers   { font-size:0.7rem; color:var(--dim); margin-top:4px; }
.vote-btn {
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:8px 16px; border-radius:4px; font-size:0.75rem; font-weight:700;
  letter-spacing:1px; text-transform:uppercase; cursor:pointer; border:1px solid var(--border);
  background:var(--bg3); color:var(--dim); transition:all .2s; width:100%;
}
.vote-btn:hover          { border-color:var(--gold); color:var(--gold); }
.vote-btn.voted          { background:#1e1c10; border-color:var(--gold); color:var(--gold); }
.vote-btn:disabled       { opacity:.4; cursor:default; }
.wish-submit-wrap { background:var(--bg2); border:1px solid var(--border); border-radius:8px; padding:28px; }
.wish-submit-wrap h3 { font-family:var(--font-serif); font-size:1.2rem; margin-bottom:4px; }
.wish-submit-wrap p  { font-size:0.8rem; color:var(--dim); margin-bottom:20px; line-height:1.6; }
.wish-form { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.wish-form .span2 { grid-column:1/-1; }
.wish-field label { display:block; font-size:0.65rem; color:var(--dim); letter-spacing:2px; text-transform:uppercase; margin-bottom:6px; }
.wish-field input, .wish-field textarea {
  width:100%; background:#111; border:1px solid var(--border); border-radius:4px;
  padding:9px 12px; color:var(--text); font-size:0.85rem; outline:none;
  font-family:'Inter',sans-serif; transition:border-color .2s;
}
.wish-field input:focus, .wish-field textarea:focus { border-color:var(--gold); }
.wish-field textarea { min-height:80px; resize:vertical; }
.wish-field label.wish-file-btn,
.wish-file-btn {
  display:inline-block; padding:7px 14px; background:var(--gold); color:#0d0d0d;
  font-size:0.72rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  border-radius:4px; cursor:pointer; white-space:nowrap; transition:opacity .2s;
}
.wish-file-btn:hover { opacity:0.85; }
.wish-file-name { font-size:0.78rem; color:var(--dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:180px; flex:1 1 auto; min-width:0; }
.wish-file-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.wish-submit-row { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.wish-submit-row > span { flex:1 1 200px; }
.wish-submit-btn {
  padding:11px 24px; background:var(--gold); color:#0d0d0d; border:none;
  border-radius:4px; font-size:0.72rem; font-weight:700; letter-spacing:2px;
  text-transform:uppercase; cursor:pointer; transition:background .2s;
}
.wish-submit-btn:hover { background:var(--gold2); }
.wish-msg { font-size:0.82rem; padding:10px 14px; border-radius:4px; margin-top:12px; display:none; }
/* File-Input: native Button ins Gold-Design integrieren */
.wish-field input[type="file"] { padding:0; cursor:pointer; }
.wish-field input[type="file"]::file-selector-button {
  padding:9px 14px; background:var(--gold); color:#0d0d0d;
  border:none; border-right:1px solid rgba(0,0,0,.25);
  font-family:'Inter',sans-serif; font-size:.72rem; font-weight:700;
  letter-spacing:2px; text-transform:uppercase; cursor:pointer;
  transition:background .2s; margin-right:10px;
  border-radius:3px 0 0 3px;
}
.wish-field input[type="file"]::file-selector-button:hover { background:var(--gold2); }
.wish-msg.success { background:#1a2d1a; color:#8e8; border:1px solid #2f6b2f; }
.wish-msg.error   { background:#2d1a1a; color:#e88; border:1px solid #6b2f2f; }
.wishes-empty     { text-align:center; color:var(--dim); padding:2rem; font-size:0.85rem; grid-column:1/-1; }

/* ── NEWSLETTER ── */
.newsletter-section { text-align:center; padding:6rem 3rem; }
.newsletter-inner { max-width:520px; margin:0 auto; }
.newsletter-section .section-title { margin-bottom:0.8rem; }
.newsletter-section .section-sub { margin-bottom:2rem; }
.newsletter-form { display:flex; gap:0; border:1px solid var(--border); border-radius:4px; overflow:hidden; background:var(--bg2); }
.newsletter-form input {
  flex:1; background:transparent; border:none; outline:none;
  padding:0.9rem 1.2rem; color:var(--text); font-size:0.85rem;
  font-family:'Inter',sans-serif;
}
.newsletter-form input::placeholder { color:var(--dim); }
.newsletter-form button {
  background:var(--gold); color:#0d0d0d; border:none; cursor:pointer;
  padding:0.9rem 1.5rem; font-size:0.72rem; font-weight:700;
  letter-spacing:0.12em; text-transform:uppercase; transition:background 0.2s;
  font-family:'Inter',sans-serif; white-space:nowrap;
}
.newsletter-form button:hover { background:var(--gold2); }
.newsletter-note { font-size:0.7rem; color:var(--dim); margin-top:0.8rem; }

/* ── FOOTER ── */
footer {
  background:var(--bg2); border-top:1px solid var(--border);
  padding:2.5rem 3rem;
}
.footer-inner { max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1.5rem; }
.footer-logo { font-family:var(--font-serif); font-size:1.1rem; font-weight:700; }
.footer-links { display:flex; flex-wrap:wrap; gap:1rem 2rem; list-style:none; padding:0; margin:0; }
.footer-links a { font-size:0.75rem; color:var(--dim); letter-spacing:0.08em; text-transform:uppercase; transition:color 0.2s; }
.footer-links a:hover { color:var(--gold); }
.footer-copy { font-size:0.72rem; color:var(--dim); }
.footer-legal {
  font-size:0.72rem;
  display:inline-flex; align-items:center; gap:8px;
}
.footer-legal a {
  color:var(--muted); letter-spacing:0.06em; text-transform:uppercase;
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 10px; min-height:44px; min-width:44px;
  line-height:1.2;
  transition:color 0.2s;
}
.footer-legal a:hover { color:var(--gold); }

/* ── HIDDEN / FILTER ── */
.product-card.hidden { display:none; }

/* ── PRODUKT-MODAL ── */
/* Wichtig: pointer-events:none wird NICHT von Children geerbt. Ohne diese
   Regel wuerden die Gallery-Slides (IMG innerhalb #modalGallery) nach dem
   ersten Modal-Open dauerhaft ueber dem Viewport liegen und Main-Grid-
   Interaktionen blockieren. */
.modal-backdrop:not(.open) * { pointer-events: none; }
.modal-backdrop {
  position:fixed; inset:0; z-index:1000;
  background:rgba(0,0,0,0.82); backdrop-filter:blur(10px);
  display:flex; align-items:center; justify-content:center; padding:1rem;
  opacity:0; pointer-events:none; transition:opacity 0.25s;
}
.modal-backdrop.open { opacity:1; pointer-events:all; }
.modal-box {
  background:var(--bg2); border:1px solid var(--border); border-radius:12px;
  width:100%; max-width:800px; max-height:90vh; overflow:hidden;
  position:relative;
  transform:translateY(24px) scale(0.97); transition:transform 0.25s;
  display:flex; flex-direction:column;
}
.modal-backdrop.open .modal-box { transform:none; }
.modal-close {
  position:absolute; top:1rem; right:1rem; z-index:10;
  background:var(--bg3); border:1px solid var(--border);
  color:var(--muted); width:36px; height:36px; border-radius:50%;
  font-size:1rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:border-color 0.2s, color 0.2s;
}
.modal-close:hover { border-color:var(--gold); color:var(--text); }
.modal-inner {
  display:grid; grid-template-columns:1.2fr 1fr;
  min-height:0; flex:1; overflow:hidden;
}
/* .modal-img-col: siehe CSS-Block oben (MODAL CAROUSEL + GALLERY) */
/* .modal-main-image: entfernt — ersetzt durch .modal-carousel */
.modal-zoom-btn {
  position:absolute; top:12px; left:12px; z-index:5;
  background:rgba(13,13,13,0.75); border:1px solid var(--border); border-radius:8px;
  color:var(--text); font-size:16px; width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:border-color 0.2s;
  backdrop-filter:blur(4px);
}
.modal-zoom-btn:hover { border-color:var(--gold); }
.modal-info-col { padding:2rem; display:flex; flex-direction:column; gap:1.1rem; overflow-y:auto; }
.modal-desc { font-size:0.82rem; color:var(--muted); line-height:1.6; }
.modal-bullets {
  margin:0.6rem 0 0 0; padding-left:1.1rem;
  font-size:0.78rem; color:var(--muted); line-height:1.5;
  list-style:disc;
}
.modal-bullets:empty { display:none; }
.modal-bullets li { margin-bottom:0.3rem; }
.modal-type-label {
  font-size:0.64rem; font-weight:700; letter-spacing:0.15em;
  text-transform:uppercase; color:var(--dim);
}
.modal-type-selector { display:flex; flex-wrap:wrap; gap:0.5rem; }
.modal-type-btn {
  display:inline-flex; align-items:center; gap:0.35rem;
  padding:0.45rem 0.85rem; border-radius:4px;
  border:1px solid var(--border); color:var(--muted);
  font-size:0.74rem; font-weight:600; background:var(--bg3);
  cursor:pointer; transition:border-color 0.2s, color 0.2s, background 0.2s;
}
.modal-type-btn:hover { border-color:var(--gold); color:var(--gold); background:var(--gold-dim); }
.modal-type-btn.active { border-color:var(--gold); color:var(--gold); background:var(--gold-dim); }
.modal-similar {
  border-top:1px solid var(--border); padding:1.5rem 2rem;
}
.modal-similar-title {
  font-size:0.68rem; font-weight:700; letter-spacing:0.15em;
  text-transform:uppercase; color:var(--dim); margin-bottom:12px;
}
.modal-similar-grid {
  display:grid; grid-template-columns:repeat(4, 1fr); gap:12px;
}
.modal-similar-card {
  background:var(--bg3); border:1px solid var(--border); border-radius:8px;
  overflow:hidden; cursor:pointer; transition:border-color 0.2s;
}
.modal-similar-card:hover { border-color:var(--gold); }
.modal-similar-card img { width:100%; aspect-ratio:1/1; object-fit:cover; }
.modal-similar-card .similar-name {
  padding:6px 8px; font-size:11px; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* Lightbox */
.lightbox-backdrop {
  position:fixed; inset:0; z-index:2000;
  background:rgba(0,0,0,0.95); backdrop-filter:blur(12px);
  display:flex; align-items:center; justify-content:center; padding:2rem;
}
.lightbox-backdrop img {
  max-width:90vw; max-height:90vh; object-fit:contain; border-radius:8px;
}
.lightbox-close {
  position:absolute; top:1.5rem; right:1.5rem;
  background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2);
  color:#fff; width:40px; height:40px; border-radius:50%;
  font-size:1.2rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.lightbox-nav {
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2);
  color:#fff; width:48px; height:48px; border-radius:50%;
  font-size:2rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background 0.2s;
}
.lightbox-nav:hover { background:rgba(255,255,255,0.25); }
.lightbox-prev { left:1.5rem; }
.lightbox-next { right:1.5rem; }
.modal-badges { display:flex; gap:0.5rem; flex-wrap:wrap; }
.modal-badge-new {
  font-size:0.6rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
  padding:0.3rem 0.7rem; border-radius:4px; border:1px solid var(--gold); color:var(--gold);
}
.modal-badge-type {
  font-size:0.6rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
  padding:0.3rem 0.7rem; border-radius:4px; border:1px solid var(--border); color:var(--muted);
}
.modal-title {
  font-family:var(--font-serif); font-size:1.45rem; font-weight:700; line-height:1.25;
}
.modal-theme { font-size:0.82rem; color:var(--muted); }
.modal-divider { height:1px; background:var(--border); }
.modal-markets-label {
  font-size:0.64rem; font-weight:700; letter-spacing:0.15em;
  text-transform:uppercase; color:var(--dim);
}
.modal-markets { display:flex; flex-wrap:wrap; gap:0.5rem; }
.modal-market-btn {
  display:inline-flex; align-items:center; gap:0.35rem;
  padding:0.45rem 0.85rem; border-radius:4px;
  border:1px solid var(--border); color:var(--muted);
  font-size:0.74rem; font-weight:600; background:var(--bg3);
  text-decoration:none; transition:border-color 0.2s, color 0.2s, background 0.2s;
}
.modal-market-btn:hover { border-color:var(--gold); color:var(--gold); background:var(--gold-dim); }
.modal-market-btn.active { border-color:var(--gold); color:var(--gold); background:var(--gold-dim); font-weight:600; }
.modal-primary {
  margin-top:auto; display:flex; align-items:center; justify-content:center; gap:0.6rem;
  background:var(--gold); color:#0d0d0d;
  font-size:0.78rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
  padding:0.95rem 1.5rem; border-radius:4px; text-decoration:none; transition:background 0.2s;
}
.modal-primary:hover { background:var(--gold2); }
@media(max-width:700px) {
  .modal-backdrop { padding:0.5rem; }
  .modal-box { overflow:auto; display:block; max-height:95vh; border-radius:10px; }
  .modal-inner { grid-template-columns:1fr; overflow:visible; min-height:auto; }
  .modal-img-col {
    border-right:none; border-bottom:1px solid var(--border);
    border-radius:10px 10px 0 0; aspect-ratio:auto; min-height:0;
  }
  .modal-carousel { aspect-ratio:4/3; flex:0 0 auto; }
  .modal-carousel-slide img { aspect-ratio:auto; }
  .modal-info-col { overflow-y:visible; padding:1.25rem; gap:0.85rem; }
  .modal-title { font-size:1.2rem; padding-right:2.5rem; }
  .modal-close { top:0.6rem; right:0.6rem; width:32px; height:32px; font-size:0.9rem; }
  .modal-zoom-btn { top:8px; left:8px; width:32px; height:32px; font-size:14px; }
  .modal-similar { padding:1.25rem; }
  .modal-similar-grid { grid-template-columns:repeat(3, 1fr); gap:8px; }
  .modal-gallery-thumbs { padding:8px; gap:6px; }
  .modal-gallery-thumb { flex:0 0 48px; width:48px; height:48px; }
  .modal-type-btn, .modal-market-btn { padding:0.5rem 0.75rem; font-size:0.78rem; }
  .modal-primary { padding:0.9rem 1.25rem; font-size:0.78rem; }
}
@media(max-width:420px) {
  .modal-similar-grid { grid-template-columns:repeat(2, 1fr); }
}

/* ── RESPONSIVE ── */
/* Tablet-Range: Nav-Links aus, Hero enger, Process-Bar stacken. */
@media (max-width: 1100px) {
  body > nav { padding:0 1rem; gap:0.5rem; }
  .nav-toggle { display:flex; order:3; }
  /* Header-Icons ausblenden — Funktionen sind auf der Seite selbst erreichbar
     (Suche im Filter-Bar, Favoriten ueber Card-Sterne), Nav-Bar braucht Platz
     fuer Markt + Sprache + Hamburger. */
  .nav-icon-search, .nav-icon-fav { display:none; }
  .nav-icons { gap:0.4rem; }
  .nav-logo { font-size:1.05rem; }
  /* Markt/Sprache-Buttons kompakter */
  .lang-btn { height:30px; padding:0 8px; gap:3px; }
  .lang-btn .lang-caret { display:none; }
  /* Nav-Links als Dropdown-Overlay unter dem Nav-Bar. */
  .nav-links {
    position:fixed; top:64px; left:0; right:0;
    flex-direction:column; gap:0; padding:0.5rem 0;
    background:rgba(13,13,13,0.98); backdrop-filter:blur(16px);
    border-bottom:1px solid var(--border);
    transform:translateY(-120%); transition:transform 0.3s ease;
    z-index:199;
  }
  .nav-links.open { transform:translateY(0); }
  .nav-links li { border-bottom:1px solid var(--border); }
  .nav-links li:last-child { border-bottom:none; }
  .nav-links a {
    display:block; padding:1rem 1.5rem; font-size:0.95rem;
    color:var(--text); letter-spacing:0.08em;
  }
  .nav-links a:hover { background:var(--bg3); color:var(--gold); }
  .section { padding:4rem 1.5rem; }
  .hero-content { padding:0 1.5rem 3rem; align-items:flex-end; }
  .hero-text { max-width:100%; position:relative; z-index:2; }
  .hero h1 { font-size:clamp(2.2rem, 7vw, 3.6rem); word-break:break-word; overflow-wrap:break-word; }
  .hero h1 span { display:block; }
  /* Mobile: Hochformat-Portrait (og-default-9x16) als Full-Width-Background
     oben im Hero, Text rueckt nach unten mit Gradient-Dimmung. */
  .hero-designer-photo {
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; object-position:center top;
    mask-image:linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.35) 40%, transparent 70%);
    -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.35) 40%, transparent 70%);
    opacity:0.55;
  }
  .hero-overlay {
    background:linear-gradient(180deg, rgba(13,13,13,0.1) 0%, rgba(13,13,13,0.5) 45%, rgba(13,13,13,0.95) 78%, #0d0d0d 100%);
  }
  .hero-model-silhouette { display:none; }
  .process-bar { padding:1rem 1.5rem; }
  .process-inner { flex-direction:column; gap:0.6rem; }
  .process-step { padding:0; font-size:0.72rem; }
  .process-sep { display:none; }
  .footer-inner { flex-direction:column; text-align:center; }
  .footer-links { justify-content:center; }
}

/* Kleine Phones: Hero noch kompakter. */
@media (max-width: 700px) {
  .section { padding:3rem 1.25rem; }
  .hero-content { padding:0 1.25rem; }
  .hero h1 { font-size:clamp(2rem, 10vw, 2.8rem); }
  .hero-sub { font-size:0.92rem; }
  .about-grid { grid-template-columns:1fr; gap:2rem; }
  .about-image { aspect-ratio:16/9; }
  .badges-inner { padding:2rem 1.5rem; }
  .newsletter-section { padding:4rem 1.5rem; }
  footer { padding:2rem 1.5rem; }
}

/* Wishes-Form: auf schmalen Screens alle Felder full-width,
   sonst klemmt "Datei auswählen + Dateiname + Dein Name" ineinander. */
@media (max-width: 700px) {
  .wishes-section { padding:4rem 1.5rem; }
  .wish-form { grid-template-columns:1fr; gap:16px; }
  .wish-form .wish-field { grid-column:1; }
  .wish-submit-wrap { padding:20px; }
}