/* Design-Vorlagen – umschaltbar über <html data-design="…">. Jede Vorlage überschreibt nur Variablen und wenige Details,
   der Aufbau des Shops bleibt gleich. Die Karten bleiben in jeder Vorlage der Mittelpunkt. */

/* 1 · Nacht (Standard) – Grafit, Logofarben als Akzente: Werte aus shop.css */

/* 2 · Hell & Ruhig – heller, freundlicher Shop für Familien und Gelegenheitskäufer */
[data-design="hell"]{--bg:#f5f5f7;--flaeche:#ffffff;--flaeche2:#f0f0f3;--rand:#e1e1e7;--text:#17171c;--leise:#6b6b78;
  --kopf-bg:rgba(255,255,255,.92);--bild-bg:#e9e9ee;--schatten:0 4px 14px rgba(20,20,40,.12);--cyan:#0b8fb3;--orange:#f07a10}
[data-design="hell"] .m{background:rgba(20,20,30,.78)}

/* 3 · Sammelalbum – warmes Papier, Karten stecken wie in Binder-Taschen */
[data-design="album"]{--bg:#efe6d4;--flaeche:#fbf6ea;--flaeche2:#f3ead8;--rand:#d9cbb0;--text:#2a2118;--leise:#7b6a55;
  --orange:#b8321f;--gelb:#d9a326;--magenta:#9c2a4f;--cyan:#2f6f7a;--knopf-text:#fff;
  --kopf-bg:rgba(251,246,234,.94);--bild-bg:#f7f1e3;--schatten:inset 0 0 0 1px rgba(0,0,0,.08);--radius:6px;--bild-radius:4px;
  --kopf-schrift:"Fraunces",Georgia,serif;--streifen:repeating-linear-gradient(90deg,#b8321f 0 18px,#d9a326 18px 36px)}
[data-design="album"] .kachel .bild,[data-design="album"] .gal-k .bild{padding:7px;background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,.35));
  border:1px solid #cdbd9e;box-shadow:inset 0 2px 6px rgba(0,0,0,.12),0 1px 0 #fff}
[data-design="album"] .bild img{border-radius:3px}
[data-design="album"] .raster{background:repeating-linear-gradient(0deg,transparent 0 1px,transparent 1px 40px);gap:14px}
[data-design="album"] .gal-kopf h2::before{background:#b8321f;border-radius:2px}
[data-design="album"] .knopf{border-radius:6px}

/* 4 · Minimal Galerie – wie ein Museum: viel Weißraum, große Karten, keine Effekte */
[data-design="galerie"]{--bg:#fafafa;--flaeche:#ffffff;--flaeche2:#f2f2f2;--rand:#e6e6e6;--text:#111;--leise:#777;
  --orange:#111;--gelb:#111;--magenta:#c2185b;--cyan:#111;--knopf-text:#fff;--kopf-bg:rgba(250,250,250,.95);--bild-bg:#fafafa;
  --schatten:none;--kachel-min:240px;--radius:0;--bild-radius:0;--kopf-schrift:"DM Serif Display",Georgia,serif;--streifen:#111}
[data-design="galerie"] .streifen{height:1px}
[data-design="galerie"] .raster{gap:44px 32px}
[data-design="galerie"] .kachel:hover .bild img{transform:translateY(-4px)}
[data-design="galerie"] .marken .m:not(.rabatt){display:none}
[data-design="galerie"] .k-name{font-family:var(--kopf-schrift);font-weight:400;font-size:17px}
[data-design="galerie"] .preis{font-family:var(--text-schrift);font-weight:600;font-size:15px}
[data-design="galerie"] .gal-kopf h2::before{display:none}
[data-design="galerie"] .knopf,[data-design="galerie"] .chip,[data-design="galerie"] .wahl,[data-design="galerie"] .kopf-knopf,
[data-design="galerie"] .suche input,[data-design="galerie"] .tabs,[data-design="galerie"] .tab{border-radius:0}
[data-design="galerie"] .vertrauen{border:0}

/* 5 · Feuer – die Flammen aus dem Logo: glühende Kopfzeile, warmes Dunkel */
[data-design="feuer"]{--bg:#120806;--flaeche:#1c0e0a;--flaeche2:#29140e;--rand:#3d2018;--text:#fff3e8;--leise:#c8a593;
  --cyan:#ffb347;--kopf-bg:linear-gradient(90deg,rgba(70,14,4,.95),rgba(120,34,0,.95) 50%,rgba(70,14,4,.95));
  --streifen:linear-gradient(90deg,#ffd23f,#ff8a1f,#e3176f,#ff8a1f,#ffd23f)}
[data-design="feuer"] body,[data-design="feuer"]{background:radial-gradient(1200px 500px at 50% -120px,rgba(255,110,20,.22),transparent 70%) #120806}
[data-design="feuer"] .kopf{background:var(--kopf-bg)}
[data-design="feuer"] .streifen{height:4px;background-size:200% 100%;animation:glut 6s linear infinite}
[data-design="feuer"] .kachel:hover .bild{box-shadow:0 0 0 2px #ff8a1f,0 10px 30px -6px rgba(255,120,20,.6)}
[data-design="feuer"] .gal-kopf h2{background:linear-gradient(90deg,#ffd23f,#ff8a1f,#e3176f);-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes glut{to{background-position:200% 0}}

/* 6 · Neon Arcade – fetzig: Violett-Schwarz, leuchtende Kanten in Cyan und Magenta */
[data-design="neon"]{--bg:#07051a;--flaeche:#110c2c;--flaeche2:#1a1340;--rand:#2e2470;--text:#efeaff;--leise:#a69cd6;
  --orange:#ff2bd6;--gelb:#3ef0ff;--magenta:#ff2bd6;--cyan:#3ef0ff;--knopf-text:#0a0420;--kopf-bg:rgba(9,6,30,.9);
  --kopf-schrift:"Chakra Petch","Segoe UI",sans-serif;--streifen:linear-gradient(90deg,#3ef0ff,#ff2bd6)}
[data-design="neon"] body{background:
  linear-gradient(rgba(62,240,255,.05) 1px,transparent 1px) 0 0/100% 48px,
  linear-gradient(90deg,rgba(255,43,214,.05) 1px,transparent 1px) 0 0/48px 100%,
  radial-gradient(900px 420px at 8% -8%,rgba(255,43,214,.25),transparent 70%),
  radial-gradient(900px 420px at 92% 0,rgba(62,240,255,.2),transparent 70%),#07051a;background-attachment:fixed}
[data-design="neon"] .streifen{box-shadow:0 0 18px #ff2bd6,0 0 18px #3ef0ff}
[data-design="neon"] .kachel .bild,[data-design="neon"] .gal-k .bild{box-shadow:0 0 0 1px rgba(62,240,255,.45),0 0 18px rgba(62,240,255,.18)}
[data-design="neon"] .chip,[data-design="neon"] .wahl,[data-design="neon"] .kopf-knopf,[data-design="neon"] .suche input{border-color:#3b2f8a;box-shadow:inset 0 0 12px rgba(255,43,214,.12)}
[data-design="neon"] .kachel:hover .bild{box-shadow:0 0 0 2px #3ef0ff,0 0 26px #ff2bd6}
[data-design="neon"] .knopf.haupt{box-shadow:0 0 18px rgba(255,43,214,.55);text-transform:uppercase;letter-spacing:1px}
[data-design="neon"] .preis,[data-design="neon"] .d-preis{color:#3ef0ff;text-shadow:0 0 12px rgba(62,240,255,.5)}
[data-design="neon"] .gal-kopf h2{text-transform:uppercase;letter-spacing:2px}

/* 7 · Holo-Schimmer – Regenbogenglanz wie eine Holo-Karte, wenn die Maus über eine Karte fährt */
[data-design="holo"]{--bg:#0d0f15;--flaeche:#151822;--flaeche2:#1d2130;--rand:#2b3043;--text:#f1f4ff;--leise:#9aa3c0;
  --orange:#8a7dff;--cyan:#5ee7ff;--magenta:#ff6ad5;--gelb:#ffe66d;--knopf-text:#fff;
  --streifen:linear-gradient(90deg,#ff6ad5,#ffe66d,#5ee7ff,#8a7dff,#ff6ad5)}
[data-design="holo"] body{background:radial-gradient(1000px 500px at 15% -10%,rgba(138,125,255,.22),transparent 70%),
  radial-gradient(900px 450px at 85% 5%,rgba(94,231,255,.16),transparent 70%),radial-gradient(800px 500px at 50% 110%,rgba(255,106,213,.14),transparent 70%),#0d0f15;background-attachment:fixed}
[data-design="holo"] .kachel .bild,[data-design="holo"] .gal-k .bild{box-shadow:0 0 0 1.5px rgba(255,255,255,.14),0 8px 26px rgba(138,125,255,.22)}
[data-design="holo"] .knopf.haupt{background:linear-gradient(90deg,#8a7dff,#ff6ad5);border:0}
[data-design="holo"] .kachel .bild::after,[data-design="holo"] .gal-k .bild::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(115deg,transparent 20%,rgba(255,106,213,.35) 35%,rgba(255,230,109,.35) 45%,rgba(94,231,255,.35) 55%,rgba(138,125,255,.35) 65%,transparent 80%);
  background-size:250% 250%;mix-blend-mode:color-dodge;transition:opacity .25s}
[data-design="holo"] .kachel:hover .bild::after,[data-design="holo"] .gal-k:hover .bild::after{opacity:1;animation:holo 1.6s linear infinite}
[data-design="holo"] .gal-kopf h2{background:var(--streifen);-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes holo{from{background-position:100% 0}to{background-position:-50% 0}}

/* 8 · Retro-Konsole – Handheld-Grün der 90er, Pixel-Schrift, eckige Rahmen */
[data-design="retro"]{--bg:#c7d3a3;--flaeche:#dbe5b8;--flaeche2:#b8c78c;--rand:#306230;--text:#0f380f;--leise:#306230;
  --orange:#0f380f;--gelb:#8bac0f;--magenta:#9b1d20;--cyan:#0f380f;--knopf-text:#dbe5b8;--kopf-bg:rgba(199,211,163,.96);
  --bild-bg:#9bbc0f;--schatten:4px 4px 0 #306230;--radius:0;--bild-radius:0;
  --kopf-schrift:"Press Start 2P",monospace;--streifen:repeating-linear-gradient(90deg,#0f380f 0 8px,#8bac0f 8px 16px)}
[data-design="retro"] .streifen{height:6px}
[data-design="retro"] .kachel .bild{border:3px solid #0f380f}
[data-design="retro"] .gal-kopf h2,[data-design="retro"] .dialog h2{font-size:14px;line-height:1.6}
[data-design="retro"] .preis{font-size:11px}
[data-design="retro"] .d-preis{font-size:20px}
[data-design="retro"] .marke span{font-size:11px;line-height:1.5}
[data-design="retro"] .knopf,[data-design="retro"] .chip,[data-design="retro"] .wahl,[data-design="retro"] .kopf-knopf,
[data-design="retro"] .suche input,[data-design="retro"] .tabs,[data-design="retro"] .tab,[data-design="retro"] .dialog,[data-design="retro"] .pille{border-radius:0;border-width:2px}
[data-design="retro"] .m{border-radius:0;background:#0f380f;color:#dbe5b8}

/* 9 · Kompakt – für Vielkäufer: kleinere Karten, viel mehr pro Bildschirm */
[data-design="kompakt"]{--kachel-min:128px}
[data-design="kompakt"] .raster{gap:12px 10px}
[data-design="kompakt"] .k-name{font-size:12.5px;-webkit-line-clamp:1}
[data-design="kompakt"] .k-set{font-size:11.5px}
[data-design="kompakt"] .preis{font-size:14px}
[data-design="kompakt"] .anz{font-size:11px}
[data-design="kompakt"] .galerie .gal-k{flex-basis:140px}
[data-design="kompakt"] .marken .m:not(.rabatt):not(.H):not(.R):not(.E){display:none}
@media (max-width:820px){[data-design="kompakt"] .raster{grid-template-columns:repeat(3,minmax(0,1fr))}}