/* =====================================================================
   Vorschau-Fassung: heller Shop-Bereich
   =====================================================================
   Wird NUR geladen, wenn die Adresse ?stil=hell enthaelt. Dient dazu,
   Igor die Entscheidung abzunehmen, indem er beides nebeneinander
   sieht statt es sich vorstellen zu muessen.

   Die Startseite bleibt in beiden Faellen dunkel — dort traegt das
   Video, und Igor hat diese Fassung abgenommen.

   Wird die Fassung nicht gewaehlt, faellt diese Datei ersatzlos weg.
   ===================================================================== */

body.stil-hell {
    /* Warmer Cremeton statt reinem Weiss: Glas wirkt darauf ruhig,
       reines Weiss wuerde bei den freigestellten Fotos ausbleichen. */
    --nacht:   #F6F2EA;
    --tiefe:   #EFE9DE;
    --vitrine: #FFFFFF;

    --schrift:  #2A2621;
    --schrift2: #6B6155;
    --schrift3: #938A7C;

    --linie: #E0D8CA;

    /* Messing dunkler, sonst reicht der Kontrast auf hellem Grund nicht
       fuer gute Lesbarkeit. */
    --messing:      #8A6A2F;
    --messing-hell: #A98844;

    background: var(--nacht);
    color: var(--schrift);
}

/* Kopfzeile: auf hellem Grund braucht sie eine Trennlinie, sonst
   schwebt sie ohne Halt ueber dem Inhalt. */
body.stil-hell.unterseite > header {
    background: var(--nacht);
    border-bottom: 1px solid var(--linie);
}

body.stil-hell .stuecke,
body.stil-hell .maerkte {
    background: var(--tiefe);
    border-color: var(--linie);
}

/* Die Bogenflaeche wird reinweiss — so hebt sie sich vom cremefarbenen
   Grund ab, ohne dass ein Rahmen noetig waere. */
body.stil-hell .rahmen,
body.stil-hell .product-card__media {
    background: #FFFFFF;
}

body.stil-hell .product-card__title,
body.stil-hell .stueck h3 { color: var(--schrift); }

body.stil-hell .btn--primary { color: var(--schrift); }
body.stil-hell .btn--primary:hover { color: #FFFFFF; }

body.stil-hell .knopf:hover { color: #FFFFFF; }

body.stil-hell .cart-drawer__panel {
    background: var(--nacht);
    color: var(--schrift);
}

/* Formularfelder waren auf dunklen Grund gerechnet. */
body.stil-hell input,
body.stil-hell textarea,
body.stil-hell select {
    background: #FFFFFF !important;
    color: var(--schrift) !important;
    border-color: var(--linie) !important;
}

body.stil-hell .fuss,
body.stil-hell footer { border-color: var(--linie); }

/* =====================================================================
   Igors Vorschlag (19.08.): Bordeaux und Dunkelblau
   =====================================================================
   Sein Einwand trifft zu: Auf Weiss verschwindet klares Glas genauso
   wie auf Dunkelbraun. Glas hat kaum Eigenfarbe — es zeigt sich ueber
   Kanten und Lichtbrechung, und die brauchen einen Grund mit Tiefe.
   Ein satter, dunkler Farbton gibt beides und wirkt zugleich waermer
   als reines Braun.
   ===================================================================== */

body.stil-bordeaux {
    --nacht:   #3A1721;   /* tiefes Bordeaux, leicht braunstichig */
    --tiefe:   #2C1019;
    --vitrine: #F7F4ED;

    --schrift:  #F4EBE6;
    --schrift2: #C4A9A9;
    --schrift3: #9A7F80;

    --linie: #552B36;

    --messing:      #C9A227;   /* Gold wirkt auf Bordeaux edler als Messing */
    --messing-hell: #E3C465;

    background: var(--nacht);
    color: var(--schrift);
}

body.stil-blau {
    --nacht:   #16202E;   /* Tiefblau, entfernt an Kobaltglas erinnernd */
    --tiefe:   #0F1823;
    --vitrine: #F7F4ED;

    --schrift:  #E9EEF4;
    --schrift2: #9FB0C2;
    --schrift3: #74879B;

    --linie: #2A3A4E;

    --messing:      #C2A063;
    --messing-hell: #DCC28E;

    background: var(--nacht);
    color: var(--schrift);
}

/* =====================================================================
   Fassung "Schwarz" — Katjas Wahl, 31.08.2026
   =====================================================================
   Von Katja aus fuenf dunklen Entwuerfen ausgesucht (via Igor). Die
   Vorlage entstand als Bildentwurf; hier ist sie durchgearbeitet wie die
   anderen Fassungen, sonst faellt sie bei Karten, Knoepfen und Warenkorb
   auseinander.

   Warum so dunkel funktioniert: Glas hat keine Eigenfarbe, es lebt von
   Kante und Lichtbrechung. Je weniger Farbe der Grund beisteuert, desto
   staerker treten die Stuecke hervor. Messing bleibt als einziger warmer
   Ton — er ordnet sich dem Glas unter, statt mit ihm zu konkurrieren.

   Nicht ganz schwarz (#000): Ein absolutes Schwarz laesst die
   Produktflaechen wie ausgeschnittene Rechtecke wirken und macht die
   Trennlinien unsichtbar. #0B0B0C behaelt minimale Tiefe.

   Kontrast gegen den Grund #0B0B0C nachgerechnet (WCAG, Mindestwert 4,5:1
   fuer Text) — am 24.08. war in der Grundfassung schon einmal ein Wert zu
   niedrig, deshalb hier gemessen statt geschaetzt:

       --schrift   #F2F0EC   17,29:1
       --schrift2  #A3A09A    7,54:1
       --schrift3  #8C8983    5,64:1
       --messing   #C2A063    7,97:1

   Alle deutlich ueber der Schwelle. Auf hellem Grund saehe das anders aus —
   #C2A063 traegt dort nicht, deshalb hat die Fassung "hell" ein eigenes,
   dunkleres Messing (#8A6A2F).
   ===================================================================== */

body.stil-schwarz {
    --nacht:   #0B0B0C;
    --tiefe:   #000000;
    --vitrine: #F7F4ED;

    /* 01.09.2026 — Schrift durchgehend heller. Auf dem grauen Shop-Grund
       (#302B24) fiel --schrift3 auf 4,02:1 und lag damit unter der Grenze
       fuer Fliesstext. Gemessen statt geschaetzt; die neuen Werte liegen
       auch dort ueber 7:1, also auch bei Sonnenlicht am Marktstand lesbar. */
    --schrift:  #F2F0EC;   /* 17,3:1 auf schwarz · 12,3:1 auf grau */
    --schrift2: #DCD9D2;   /* 14,0:1 · 10,0:1  (war #A3A09A) */
    --schrift3: #C2BFB8;   /*  10,7:1 ·  7,6:1  (war #8C8983) */

    --linie: #26262A;

    --messing:      #C2A063;
    --messing-hell: #DCC28E;

    background: var(--nacht);
    color: var(--schrift);
}

/* Fuer beide Farbfassungen: Abschnitte und Kopfzeile mitziehen */
body.stil-bordeaux .stuecke, body.stil-bordeaux .maerkte,
body.stil-blau .stuecke,     body.stil-blau .maerkte,
body.stil-schwarz .stuecke,  body.stil-schwarz .maerkte {
    background: var(--tiefe);
    border-color: var(--linie);
}

body.stil-bordeaux.unterseite > header,
body.stil-blau.unterseite > header,
body.stil-schwarz.unterseite > header { background: var(--nacht); }

body.stil-bordeaux .cart-drawer__panel,
body.stil-blau .cart-drawer__panel,
body.stil-schwarz .cart-drawer__panel {
    background: var(--nacht);
    color: var(--schrift);
}

/* =====================================================================
   Fassung "Farben": eigene Flaeche je Warengruppe (Igors Option 3)
   =====================================================================
   ⚠️ WICHTIG fuer die Beurteilung: Die Farbe wird nur sichtbar, wenn das
   Foto die Flaeche NICHT ausfuellt. Deshalb stehen die Motive hier
   eingepasst statt formatfuellend. Bei Fotos mit eigenem Hintergrund
   (Teelicht auf Stoff, Engel im Garten) bleibt ein sichtbares Rechteck
   im Bogen — dort wirkt die Farbe erst, wenn die Produkte freigestellt
   fotografiert sind. Genau der Punkt, der im Plan als "Produktfotos:
   der groesste Hebel" steht.
   ===================================================================== */

body.stil-farben .rahmen,
body.stil-farben .product-card__media {
    padding: clamp(22px, 3.5vw, 40px);
}

body.stil-farben .rahmen img,
body.stil-farben .product-card__media img {
    object-fit: contain;
}

/* Ruhige, tiefe Toene — nicht bunt, sondern wie farbiges Glas. */
body.stil-farben .rahmen[data-kategorie="schreibfedern"]     { background: #3A1721; }
body.stil-farben .rahmen[data-kategorie="teelichter"]        { background: #16202E; }
body.stil-farben .rahmen[data-kategorie="raeuchergefaesse"]  { background: #2C3327; }
body.stil-farben .rahmen[data-kategorie="trinkglaeser"]      { background: #1F3238; }
body.stil-farben .rahmen[data-kategorie="kugeln"]            { background: #332A3D; }
body.stil-farben .rahmen[data-kategorie="figuren"]           { background: #3D2E20; }
body.stil-farben .rahmen[data-kategorie="matterhorn"]        { background: #253044; }

/* =====================================================================
   Produktabschnitt in Marineblau — Igor am 25.08.2026:
   „Bordeaux rot als Main Farbe und der schmale Shop Streifen in Marine blau."
   =====================================================================
   Der Blauton stammt aus body.stil-blau oben (an Kobaltglas angelehnt) und
   ist deshalb kein neuer Farbwert im Projekt.

   Bewusst NUR .stuecke, nicht .maerkte, nicht der Fuss: zwei satte dunkle
   Farben auf einer Seite konkurrieren, sobald die zweite zu viel Flaeche
   bekommt. Als schmaler Streifen liest es sich als Absicht, grossflaechig
   als Zufall.

   ⚠️ Muss NACH der Regel „body.stil-bordeaux .stuecke, ... { background:
   var(--tiefe) }" oben stehen — gleiche Spezifitaet, es gewinnt die
   spaetere. Nicht nach oben verschieben.

   Nebenwirkung, die gewollt ist: die hellen Produktkacheln (--vitrine)
   stehen auf Marine kontrastreicher als auf dunklem Bordeaux. Die Ware
   tritt vor. */
body.stil-bordeaux .stuecke {
    background: #16202E;
    border-color: #2A3A4E;
}

/* Vitrinen-Flaeche im Hero („Aus der Vitrine") — Stefan 25.08.2026, 16:39.
   .hero__vitrine nutzt var(--flaeche, #3A342A). Die Variable ist im Projekt
   NIRGENDS definiert, es greift also immer der braune Fallback — auf der
   Bordeaux-Seite war das die letzte braune Flaeche und wirkte wie ein
   Fremdkoerper. Hier bekommt sie den Marineton des Produktstreifens.

   Ueber die Variable statt ueber .hero__vitrine direkt: dafuer ist sie da,
   und sollte spaeter eine zweite Flaeche denselben Ton brauchen, greift es
   dort automatisch. */
body.stil-bordeaux {
    --flaeche: #16202E;
}

/* ══════════════════════════════════════════════════════════════════
   01.09.2026 — Shop-Seite in Grau (Katja über Igor)

   "Nur die Shop Seite grau." Igor hat aus drei Abstufungen gewählt:
   die dritte, also die warme Grundfarbe, welche die Website vor dem
   Wechsel auf Schwarz hatte (#302B24).

   Gilt nur für body.shopseite — also unter /shop. Die übrige Website
   bleibt schwarz (#0B0B0C), diesen Ton hat Katja am 31.08. selbst aus
   fünf dunklen Entwürfen ausgesucht.

   Warm getönt, nicht neutral: Ein kaltes Grau lässt das Messing
   (#C2A063) und die Produktfotos stumpf wirken.
   ══════════════════════════════════════════════════════════════════ */

body.shopseite { --nacht: #302B24; --tiefe: #221F1B; --linie: #403A31; }

/* Die Kopfzeile sitzt auf derselben Fläche und muss mitgehen, sonst
   schwebt ein schwarzer Balken über grauem Grund. */
body.shopseite > header,
body.shopseite.unterseite > header { background: var(--nacht); }