/* =========================================================================
   Designs
   -------------------------------------------------------------------------
   Ein Design ist ein Satz Variablen: Farben, Schriftgewichte, Radien,
   Formsprache. Am Aufbau der Seiten ändert sich nichts – deshalb kann im
   Admin jederzeit umgeschaltet werden, ohne dass etwas kaputtgeht.

   Ausgewählt wird über data-theme am <html>-Element.
   ========================================================================= */

/* --- KLAR: hell, ruhig, datenstark ---------------------------------------
   Der Auslieferungszustand. Viel Weißraum, weiche Kanten, ein gedämpftes
   Petrol als einzige Farbe. Preise und technische Daten stehen in einer
   Festbreitenschrift – Zahlen fluchten dadurch untereinander.            */

:root[data-theme="klar"] {
  --bg:          #ffffff;
  --bg-alt:      #f5f6f7;
  --surface:     #ffffff;
  --surface-2:   #f5f6f7;
  --border:      #e2e6e9;
  --border-soft: #edf0f2;
  --text:        #0f1418;
  --text-muted:  #5f6a75;
  --text-dim:    #8b95a0;
  --accent:      #0c6b60;
  --accent-soft: rgba(12,107,96,.09);
  --on-accent:   #ffffff;
  --success:     #1a6b3d;
  --danger:      #a5342a;
  --header-bg:   rgba(255,255,255,.94);
  --scrim-rgb:   8,10,12;
  --on-scrim:    #f7f9fa;
  --on-scrim-muted: #ccd3d9;
  --shadow:      0 14px 40px rgba(15,20,24,.10);

  --font-display: var(--font);
  --price-font:   var(--font-mono);
  --radius:       10px;
  --card-radius:  14px;
  --btn-radius:   999px;
  --input-radius: 10px;
  --btn-transform: none;
  --btn-tracking: .005em;
  --btn-weight:   600;
  --h-transform:  none;
  --h-weight:     700;
  --h-tracking:   -.022em;
  --card-border:  var(--border);
  --card-hover:   var(--border);
}

/* --- SIGNAL: hell, laut, typografisch ------------------------------------
   Große Überschriften in Versalien, harte Kanten, ein Signalorange.
   Farbe bleibt der Handlung vorbehalten.                                 */

:root[data-theme="signal"] {
  --bg:          #fbfbf9;
  --bg-alt:      #f0efe9;
  --surface:     #ffffff;
  --surface-2:   #f0efe9;
  --border:      #d8d8d3;
  --border-soft: #e6e5e0;
  --text:        #0a0a0a;
  --text-muted:  #666663;
  --text-dim:    #8d8d89;
  --accent:      #e33f0c;
  --accent-soft: rgba(227,63,12,.08);
  --on-accent:   #ffffff;
  --success:     #1f6b3f;
  --danger:      #c02a10;
  --header-bg:   rgba(251,251,249,.95);
  --scrim-rgb:   10,10,10;
  --on-scrim:    #ffffff;
  --on-scrim-muted: #d5d5d2;
  --shadow:      0 12px 34px rgba(10,10,10,.12);

  --font-display: var(--font);
  --price-font:   var(--font);
  --radius:       0px;
  --card-radius:  0px;
  --btn-radius:   0px;
  --input-radius: 0px;
  --btn-transform: uppercase;
  --btn-tracking: .14em;
  --btn-weight:   700;
  --h-transform:  uppercase;
  --h-weight:     700;
  --h-tracking:   -.035em;
  --card-border:  var(--text);
  --card-hover:   var(--accent);
}

/* Signal lebt von Kontrast: kräftige Rahmen, keine weichen Übergänge. */
:root[data-theme="signal"] h1 { line-height: .98; }
:root[data-theme="signal"] h2 { line-height: 1.02; }
:root[data-theme="signal"] .header { border-bottom: 2px solid var(--text); }
:root[data-theme="signal"] .card { border-width: 2px; }
:root[data-theme="signal"] .card:hover { transform: none; box-shadow: 6px 6px 0 var(--text); }
:root[data-theme="signal"] .header__logo { text-transform: uppercase; font-weight: 700; letter-spacing: -.03em; }
:root[data-theme="signal"] .chip--on { background: var(--accent); border-color: var(--accent); color: #fff; }
:root[data-theme="signal"] .price { font-size: 2.4rem; }

/* --- STUDIO: dunkel, technisch -------------------------------------------
   Fast schwarzer Grund, Weiß als Akzent statt einer Buntfarbe, Zahlen in
   Festbreitenschrift. Für Technik, Uhren, Werkzeug.                      */

:root[data-theme="studio"] {
  --bg:          #0a0c0f;
  --bg-alt:      #101318;
  --surface:     #12151a;
  --surface-2:   #181c22;
  --border:      #262c35;
  --border-soft: #1d222a;
  --text:        #eef1f5;
  --text-muted:  #8d97a5;
  --text-dim:    #6b7583;
  --accent:      #ffffff;
  --accent-soft: rgba(255,255,255,.07);
  --on-accent:   #0a0c0f;
  --success:     #4ade9b;
  --danger:      #ef7b6b;
  --header-bg:   rgba(10,12,15,.86);
  --scrim-rgb:   4,6,8;
  --on-scrim:    #ffffff;
  --on-scrim-muted: #c3cbd6;
  --shadow:      0 16px 46px rgba(0,0,0,.6);

  --font-display: var(--font);
  --price-font:   var(--font-mono);
  --radius:       8px;
  --card-radius:  10px;
  --btn-radius:   999px;
  --input-radius: 8px;
  --btn-transform: none;
  --btn-tracking: .005em;
  --btn-weight:   600;
  --h-transform:  none;
  --h-weight:     600;
  --h-tracking:   -.028em;
  --card-border:  var(--border);
  --card-hover:   var(--border);
}

/* Kleinteilige Auszeichnungen laufen bei Studio in Festbreitenschrift. */
:root[data-theme="studio"] .eyebrow,
:root[data-theme="studio"] .card__brand,
:root[data-theme="studio"] .header__topbar,
:root[data-theme="studio"] .spec__cap,
:root[data-theme="studio"] .badge {
  font-family: var(--font-mono); letter-spacing: .1em;
}
:root[data-theme="studio"] .eyebrow { color: var(--text-dim); }
:root[data-theme="studio"] .card:hover { box-shadow: var(--shadow); }
:root[data-theme="studio"] .stock { color: var(--success); }

/* --- NOIR: dunkel mit Gold, Serifen --------------------------------------
   Die klassische Variante: gedämpftes Licht, Goldakzent, Serifenschrift.
   Zurückhaltender als Studio, wärmer.                                    */

:root[data-theme="noir"] {
  --bg:          #0d0d0f;
  --bg-alt:      #141417;
  --surface:     #18181c;
  --surface-2:   #1f1f24;
  --border:      #2b2b32;
  --border-soft: #232329;
  --text:        #ece9e4;
  --text-muted:  #9d9a95;
  --text-dim:    #6f6d69;
  --accent:      #c9a227;
  --accent-soft: rgba(201,162,39,.12);
  --on-accent:   #14120b;
  --success:     #4a9d6a;
  --danger:      #cf5a5a;
  --header-bg:   rgba(13,13,15,.92);
  --scrim-rgb:   8,10,12;
  --on-scrim:    #f2efe9;
  --on-scrim-muted: #b8b4ad;
  --shadow:      0 10px 40px rgba(0,0,0,.5);

  --font-display: "Georgia", "Times New Roman", serif;
  --price-font:   var(--font);
  --radius:       3px;
  --card-radius:  3px;
  --btn-radius:   3px;
  --input-radius: 3px;
  --btn-transform: uppercase;
  --btn-tracking: .12em;
  --btn-weight:   600;
  --h-transform:  none;
  --h-weight:     400;
  --h-tracking:   .01em;
  --card-border:  var(--border-soft);
  --card-hover:   var(--accent);
}

/* --- Feinheiten für die hellen Designs -----------------------------------
   Auf hellem Grund braucht der Kopfbereich eine sichtbare Kante, und die
   Bildflächen einen ruhigen Untergrund statt eines dunklen Farbverlaufs. */

:root[data-theme="klar"] .header,
:root[data-theme="signal"] .header { border-bottom-color: var(--border); }

:root[data-theme="klar"] .card__media,
:root[data-theme="signal"] .card__media,
:root[data-theme="klar"] .cat-tile,
:root[data-theme="signal"] .cat-tile,
:root[data-theme="klar"] .gallery__main,
:root[data-theme="signal"] .gallery__main { background: var(--bg-alt); }

:root[data-theme="klar"] .badge--sold,
:root[data-theme="signal"] .badge--sold,
:root[data-theme="klar"] .badge--cond,
:root[data-theme="signal"] .badge--cond { background: var(--surface); color: var(--text-muted); }

:root[data-theme="klar"] .img-ph,
:root[data-theme="signal"] .img-ph { background: linear-gradient(135deg, var(--bg-alt), var(--surface-2)); }

/* Karten auf hellem Grund heben sich besser über Schatten als über Farbe ab. */
:root[data-theme="klar"] .card:hover { box-shadow: var(--shadow); }

/* Verfügbarkeitsanzeige als ruhige Pille statt als nackter Punkt. */
:root[data-theme="klar"] .stock,
:root[data-theme="studio"] .stock {
  background: var(--accent-soft); border-radius: 999px; padding: 7px 14px;
}
:root[data-theme="klar"] .stock { color: var(--success); background: rgba(26,107,61,.08); }
:root[data-theme="klar"] .stock--out,
:root[data-theme="studio"] .stock--out { color: var(--text-muted); background: var(--surface-2); }