/* ========================================================================== 
   FEUERWERK LINDNER — Modern Retro Style (Logo-Farbwelt: Pink/Orange/Gelb/Blau)
   ========================================================================== */

:root {
  --white: #ffffff;
  --bg-alt: #1b2a5c;
  --bg-soft: #ffe0ee;
  --ink: #eef1fb;
  --ink-soft: #cdd3f2;
  --line: rgba(255,255,255,0.16);

  --panel: #22336b;
  --page-bg: #141f47;

  /* Neon-Akzente: aus dem Feuerwerk-Lindner-Logo abgeleitet. Auf dem
     dunkelblauen Hintergrund duerfen sie richtig leuchten statt wie auf
     Weiss abgedunkelt zu sein. */
  --neon-pink: #ff2f9e;
  --neon-pink-bright: #ff6fc4;
  --neon-cyan: #22c3ff;
  --neon-cyan-bright: #6adfff;
  --neon-green: #22e096;
  --neon-green-bright: #72f2bf;
  --neon-yellow: #ffd23d;
  --neon-yellow-bright: #ffe27a;
  --neon-orange: #ff6a00;
  --neon-orange-bright: #ff9433;

  --font-display: ui-rounded, "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  --font-body: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--page-bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  /* Helle Schrift auf dunklem Grund wirkt ohne diese beiden Zeilen in
     manchen Browsern (v.a. Chrome/Windows) deutlich kantiger/verpixelter,
     weil dann kein Sub-Pixel-Antialiasing greift. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Ruhige Tiefenwirkung ohne Rastermuster. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 70% 42% at 50% -8%, rgba(69,94,180,0.22), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,0.018), transparent 42%);
  pointer-events: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid var(--neon-cyan-bright);
  outline-offset: 3px;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  /* Ein einziges, dichtes Feuerwerks-Bouquet, nach dem Referenzfoto von
     Lukas gestaltet: ein großer, dichter Hauptburst (Pink/Gelb) plus
     drei kleinere Bursts drumherum (Cyan, Orange mit Aufstiegs-Stiel,
     Grün/Gelb), volle Stern-Explosionen wie im Foto statt einzelner
     Linien, in unseren Website-Farben, zentriert über der Seite. */
  --bouquet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='680' height='460' viewBox='0 0 680 460'%3E%3Cg opacity='0.15'%3E%3Cline x1='360' y1='158' x2='360' y2='40' stroke='%23ff45b4' stroke-width='6' stroke-linecap='round'/%3E%3Cline x1='364' y1='159' x2='382' y2='87' stroke='%23f2c200' stroke-width='4' stroke-linecap='round'/%3E%3Cline x1='368' y1='160' x2='424' y2='52' stroke='%23ff45b4' stroke-width='6' stroke-linecap='round'/%3E%3Cline x1='371' y1='163' x2='423' y2='104' stroke='%23ff45b4' stroke-width='4' stroke-linecap='round'/%3E%3Cline x1='374' y1='166' x2='482' y2='91' stroke='%23ff45b4' stroke-width='6' stroke-linecap='round'/%3E%3Cline x1='375' y1='169' x2='456' y2='138' stroke='%23f2c200' stroke-width='4' stroke-linecap='round'/%3E%3Cline x1='376' y1='173' x2='520' y2='156' stroke='%23ff45b4' stroke-width='6' stroke-linecap='round'/%3E%3Cline x1='376' y1='177' x2='472' y2='189' stroke='%23ff45b4' stroke-width='4' stroke-linecap='round'/%3E%3Cline x1='375' y1='181' x2='524' y2='237' stroke='%23ff45b4' stroke-width='6' stroke-linecap='round'/%3E%3Cline x1='374' y1='184' x2='460' y2='244' stroke='%23f2c200' stroke-width='4' stroke-linecap='round'/%3E%3Cline x1='371' y1='187' x2='484' y2='315' stroke='%23ff45b4' stroke-width='6' stroke-linecap='round'/%3E%3Cline x1='368' y1='190' x2='419' y2='288' stroke='%23ff45b4' stroke-width='4' stroke-linecap='round'/%3E%3Cline x1='364' y1='191' x2='406' y2='363' stroke='%23ff45b4' stroke-width='6' stroke-linecap='round'/%3E%3Cline x1='360' y1='192' x2='360' y2='305' stroke='%23f2c200' stroke-width='4' stroke-linecap='round'/%3E%3Cline x1='356' y1='191' x2='314' y2='363' stroke='%23ff45b4' stroke-width='6' stroke-linecap='round'/%3E%3Cline x1='352' y1='190' x2='301' y2='288' stroke='%23ff45b4' stroke-width='4' stroke-linecap='round'/%3E%3Cline x1='349' y1='187' x2='236' y2='315' stroke='%23ff45b4' stroke-width='6' stroke-linecap='round'/%3E%3Cline x1='346' y1='184' x2='260' y2='244' stroke='%23f2c200' stroke-width='4' stroke-linecap='round'/%3E%3Cline x1='345' y1='181' x2='196' y2='237' stroke='%23ff45b4' stroke-width='6' stroke-linecap='round'/%3E%3Cline x1='344' y1='177' x2='248' y2='189' stroke='%23ff45b4' stroke-width='4' stroke-linecap='round'/%3E%3Cline x1='344' y1='173' x2='200' y2='156' stroke='%23ff45b4' stroke-width='6' stroke-linecap='round'/%3E%3Cline x1='345' y1='169' x2='264' y2='138' stroke='%23f2c200' stroke-width='4' stroke-linecap='round'/%3E%3Cline x1='346' y1='166' x2='238' y2='91' stroke='%23ff45b4' stroke-width='6' stroke-linecap='round'/%3E%3Cline x1='349' y1='163' x2='297' y2='104' stroke='%23ff45b4' stroke-width='4' stroke-linecap='round'/%3E%3Cline x1='352' y1='160' x2='296' y2='52' stroke='%23ff45b4' stroke-width='6' stroke-linecap='round'/%3E%3Cline x1='356' y1='159' x2='338' y2='87' stroke='%23f2c200' stroke-width='4' stroke-linecap='round'/%3E%3Ccircle cx='360' cy='175' r='16' fill='%23ff45b4'/%3E%3Cline x1='175' y1='254' x2='175' y2='175' stroke='%23169ccc' stroke-width='5' stroke-linecap='round'/%3E%3Cline x1='178' y1='255' x2='193' y2='208' stroke='%23169ccc' stroke-width='3.5' stroke-linecap='round'/%3E%3Cline x1='181' y1='256' x2='230' y2='189' stroke='%23ff45b4' stroke-width='5' stroke-linecap='round'/%3E%3Cline x1='184' y1='259' x2='227' y2='227' stroke='%23169ccc' stroke-width='3.5' stroke-linecap='round'/%3E%3Cline x1='185' y1='262' x2='274' y2='233' stroke='%23169ccc' stroke-width='5' stroke-linecap='round'/%3E%3Cline x1='186' y1='265' x2='247' y2='265' stroke='%23ff45b4' stroke-width='3.5' stroke-linecap='round'/%3E%3Cline x1='185' y1='268' x2='285' y2='301' stroke='%23169ccc' stroke-width='5' stroke-linecap='round'/%3E%3Cline x1='184' y1='271' x2='239' y2='312' stroke='%23169ccc' stroke-width='3.5' stroke-linecap='round'/%3E%3Cline x1='181' y1='274' x2='249' y2='367' stroke='%23ff45b4' stroke-width='5' stroke-linecap='round'/%3E%3Cline x1='178' y1='275' x2='201' y2='345' stroke='%23169ccc' stroke-width='3.5' stroke-linecap='round'/%3E%3Cline x1='175' y1='276' x2='175' y2='395' stroke='%23169ccc' stroke-width='5' stroke-linecap='round'/%3E%3Cline x1='172' y1='275' x2='149' y2='345' stroke='%23ff45b4' stroke-width='3.5' stroke-linecap='round'/%3E%3Cline x1='169' y1='274' x2='101' y2='367' stroke='%23169ccc' stroke-width='5' stroke-linecap='round'/%3E%3Cline x1='166' y1='271' x2='111' y2='312' stroke='%23169ccc' stroke-width='3.5' stroke-linecap='round'/%3E%3Cline x1='165' y1='268' x2='65' y2='301' stroke='%23ff45b4' stroke-width='5' stroke-linecap='round'/%3E%3Cline x1='164' y1='265' x2='103' y2='265' stroke='%23169ccc' stroke-width='3.5' stroke-linecap='round'/%3E%3Cline x1='165' y1='262' x2='76' y2='233' stroke='%23169ccc' stroke-width='5' stroke-linecap='round'/%3E%3Cline x1='166' y1='259' x2='123' y2='227' stroke='%23ff45b4' stroke-width='3.5' stroke-linecap='round'/%3E%3Cline x1='169' y1='256' x2='120' y2='189' stroke='%23169ccc' stroke-width='5' stroke-linecap='round'/%3E%3Cline x1='172' y1='255' x2='157' y2='208' stroke='%23169ccc' stroke-width='3.5' stroke-linecap='round'/%3E%3Ccircle cx='175' cy='265' r='11' fill='%23169ccc'/%3E%3Cline x1='330' y1='332' x2='330' y2='276' stroke='%23ed6b00' stroke-width='4.5' stroke-linecap='round'/%3E%3Cline x1='333' y1='333' x2='347' y2='300' stroke='%23f2c200' stroke-width='3' stroke-linecap='round'/%3E%3Cline x1='336' y1='334' x2='378' y2='292' stroke='%23ed6b00' stroke-width='4.5' stroke-linecap='round'/%3E%3Cline x1='337' y1='337' x2='375' y2='321' stroke='%23f2c200' stroke-width='3' stroke-linecap='round'/%3E%3Cline x1='338' y1='340' x2='408' y2='340' stroke='%23ed6b00' stroke-width='4.5' stroke-linecap='round'/%3E%3Cline x1='337' y1='343' x2='381' y2='361' stroke='%23f2c200' stroke-width='3' stroke-linecap='round'/%3E%3Cline x1='336' y1='346' x2='392' y2='402' stroke='%23ed6b00' stroke-width='4.5' stroke-linecap='round'/%3E%3Cline x1='333' y1='347' x2='353' y2='396' stroke='%23f2c200' stroke-width='3' stroke-linecap='round'/%3E%3Cline x1='330' y1='348' x2='330' y2='432' stroke='%23ed6b00' stroke-width='4.5' stroke-linecap='round'/%3E%3Cline x1='327' y1='347' x2='307' y2='396' stroke='%23f2c200' stroke-width='3' stroke-linecap='round'/%3E%3Cline x1='324' y1='346' x2='268' y2='402' stroke='%23ed6b00' stroke-width='4.5' stroke-linecap='round'/%3E%3Cline x1='323' y1='343' x2='279' y2='361' stroke='%23f2c200' stroke-width='3' stroke-linecap='round'/%3E%3Cline x1='322' y1='340' x2='252' y2='340' stroke='%23ed6b00' stroke-width='4.5' stroke-linecap='round'/%3E%3Cline x1='323' y1='337' x2='285' y2='321' stroke='%23f2c200' stroke-width='3' stroke-linecap='round'/%3E%3Cline x1='324' y1='334' x2='282' y2='292' stroke='%23ed6b00' stroke-width='4.5' stroke-linecap='round'/%3E%3Cline x1='327' y1='333' x2='313' y2='300' stroke='%23f2c200' stroke-width='3' stroke-linecap='round'/%3E%3Cline x1='330' y1='348' x2='330' y2='420' stroke='%23ed6b00' stroke-width='2.4' stroke-linecap='round' opacity='0.7'/%3E%3Ccircle cx='330' cy='340' r='8' fill='%23ed6b00'/%3E%3Cline x1='530' y1='238' x2='530' y2='189' stroke='%2315a679' stroke-width='4' stroke-linecap='round'/%3E%3Cline x1='533' y1='239' x2='544' y2='210' stroke='%23f2c200' stroke-width='3' stroke-linecap='round'/%3E%3Cline x1='535' y1='240' x2='572' y2='203' stroke='%2315a679' stroke-width='4' stroke-linecap='round'/%3E%3Cline x1='536' y1='242' x2='569' y2='229' stroke='%23f2c200' stroke-width='3' stroke-linecap='round'/%3E%3Cline x1='537' y1='245' x2='598' y2='245' stroke='%2315a679' stroke-width='4' stroke-linecap='round'/%3E%3Cline x1='536' y1='248' x2='574' y2='263' stroke='%23f2c200' stroke-width='3' stroke-linecap='round'/%3E%3Cline x1='535' y1='250' x2='584' y2='299' stroke='%2315a679' stroke-width='4' stroke-linecap='round'/%3E%3Cline x1='533' y1='251' x2='550' y2='293' stroke='%23f2c200' stroke-width='3' stroke-linecap='round'/%3E%3Cline x1='530' y1='252' x2='530' y2='325' stroke='%2315a679' stroke-width='4' stroke-linecap='round'/%3E%3Cline x1='527' y1='251' x2='510' y2='293' stroke='%23f2c200' stroke-width='3' stroke-linecap='round'/%3E%3Cline x1='525' y1='250' x2='476' y2='299' stroke='%2315a679' stroke-width='4' stroke-linecap='round'/%3E%3Cline x1='524' y1='248' x2='486' y2='263' stroke='%23f2c200' stroke-width='3' stroke-linecap='round'/%3E%3Cline x1='523' y1='245' x2='462' y2='245' stroke='%2315a679' stroke-width='4' stroke-linecap='round'/%3E%3Cline x1='524' y1='242' x2='491' y2='229' stroke='%23f2c200' stroke-width='3' stroke-linecap='round'/%3E%3Cline x1='525' y1='240' x2='488' y2='203' stroke='%2315a679' stroke-width='4' stroke-linecap='round'/%3E%3Cline x1='527' y1='239' x2='516' y2='210' stroke='%23f2c200' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='530' cy='245' r='7' fill='%2315a679'/%3E%3C/g%3E%3C/svg%3E");
  background-image:
    radial-gradient(circle at 88% 12%, rgba(0,144,208,0.13), transparent 32%),
    radial-gradient(circle at 50% 95%, rgba(22,185,129,0.10), transparent 38%),
    var(--bouquet);
  background-size: auto, auto, 940px 636px;
  background-position: 0% 0%, 0% 0%, 50% 14%;
  background-repeat: no-repeat, no-repeat, no-repeat;
  opacity: 0.45;
}

body[data-page="home"]::after {
  opacity: 0.55;
}

body[data-page="shop"]::after {
  opacity: 0.47;
}

body[data-page="service"]::after {
  opacity: 0.45;
}

/* Weißes "Kästchen" hinter Seitentitel + Einleitungstext zusammen,
   damit sie über dem Feuerwerks-Hintergrund gut lesbar bleiben. */
.intro-box {
  display: inline-block;
  background: rgba(16,25,58,0.88);
  padding: 16px 22px;
  border-radius: 12px;
  border: 1.5px solid rgba(255,255,255,0.16);
  box-shadow: 0 4px 16px rgba(0,0,0,0.31);
}

.intro-box p {
  color: var(--ink);
}

a {
  color: inherit;
  text-decoration: none;
}

img, svg {
  display: block;
  max-width: 100%;
}

.container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Etwas mehr Luft zum Rand als die normalen 24px — sonst wirkt Text/Inhalt
   schnell wie abgeschnitten. Gilt für Handy UND die mittlere (Tablet-)
   Breite, also bis genau dorthin, wo noch keine eigene Sidebar-Spalte
   erscheint (siehe .shop-layout, ab 961px). */
@media (max-width: 960px) {
  .container,
  .nav-wrap,
  .hero {
    padding-left: 28px;
    padding-right: 28px;
  }
}

/* ---------- Typography helpers ---------- */

.font-display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.5px;
}

.neon-text {
  text-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 0 10px currentColor;
  opacity: 0.97;
}

.pink { color: var(--neon-pink); }
.cyan { color: var(--neon-cyan); }
.green { color: var(--neon-green); }
.yellow { color: var(--neon-yellow); }
.orange { color: var(--neon-orange); }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
}

h1 { font-size: 34px; font-weight: 800; }
h2 { font-size: 26px; margin-bottom: 20px; font-weight: 700; }
h3 { font-size: 18px; font-weight: 600; }

p, li, label, input, textarea, select, button {
  font-family: var(--font-body);
  font-size: 17px;
}

/* ---------- Header / Nav ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(16,25,58,0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 20px rgba(240,5,143,0.1);
}

.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  max-width: 1180px;
  margin: 0 auto;
  gap: 20px;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-logo {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.brand-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  color: var(--ink);
  line-height: 1.15;
}

.brand-name span {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 10px;
  color: var(--neon-pink);
  letter-spacing: 2px;
  margin-top: 3px;
}

.nav-links {
  display: flex;
  gap: 30px;
  list-style: none;
  align-items: center;
  flex-wrap: wrap;
}

.nav-links a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  padding: 8px 2px;
  position: relative;
  transition: color 0.2s ease;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0%;
  background: var(--neon-pink-bright);
  border-radius: 2px;
  transition: width 0.25s ease;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--neon-pink);
}

.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
}

.cart-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--neon-green);
  color: var(--neon-green);
  padding: 8px 14px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  border-radius: 999px;
  background: rgba(22,185,129,0.06);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  padding: 13px 26px;
  border-radius: 999px;
  border: 2px solid var(--neon-pink-bright);
  color: var(--neon-pink);
  background: var(--panel);
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(240,5,143,0.18);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
  letter-spacing: 0.2px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* "JETZT BESTELLEN" (Warenkorb-Popover) — voll gefüllt statt nur umrandet,
   weil das Popover selbst dieselbe Panel-Farbe wie der Button-Hintergrund
   hat und der Button dadurch kaum als eigenes Element auffiel. */
#checkout-btn {
  background: var(--neon-pink);
  border-color: var(--neon-pink);
  color: var(--white);
  box-shadow: 0 6px 22px rgba(255,47,158,0.4);
}

#checkout-btn:hover:not(:disabled) {
  background: var(--neon-pink-bright);
  border-color: var(--neon-pink-bright);
  box-shadow: 0 8px 28px rgba(255,47,158,0.55);
}

.btn:hover {
  transform: translateY(-2px);
  background: var(--neon-pink);
  border-color: var(--neon-pink);
  color: var(--white);
  box-shadow: 0 8px 24px rgba(240,5,143,0.32);
}

.btn.cyan {
  border-color: var(--neon-cyan-bright);
  color: var(--neon-cyan);
  box-shadow: 0 4px 18px rgba(0,144,208,0.18);
}
.btn.cyan:hover {
  background: var(--neon-cyan);
  border-color: var(--neon-cyan);
  color: var(--white);
  box-shadow: 0 8px 24px rgba(0,144,208,0.32);
}

.btn.green {
  border-color: var(--neon-green-bright);
  color: var(--neon-green);
  box-shadow: 0 4px 18px rgba(22,185,129,0.18);
}
.btn.green:hover {
  background: var(--neon-green);
  border-color: var(--neon-green);
  color: var(--white);
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none;
}

/* ---------- Hero (Home) ---------- */

.hero {
  padding: 90px 24px 70px;
  text-align: center;
  position: relative;
}

.hero-logo {
  width: 140px;
  height: 140px;
  margin: 0 auto 26px;
  filter: drop-shadow(0 10px 30px rgba(240,5,143,0.25));
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 6vw, 60px);
  letter-spacing: 0.5px;
  margin-bottom: 18px;
  background: linear-gradient(90deg, var(--neon-pink-bright), var(--neon-cyan-bright) 55%, var(--neon-green-bright));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero .subtitle {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--neon-cyan);
  margin-bottom: 28px;
  letter-spacing: 3px;
}

.hero p.lead {
  max-width: 620px;
  margin: 0 auto 34px;
  font-size: 19px;
  color: var(--ink-soft);
}

.hero-ctas {
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------- Sections / Cards ---------- */

.section {
  padding: 70px 0;
}

.section-tight {
  padding: 40px 0;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 6px 28px rgba(0,0,0,0.35);
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

@media (max-width: 820px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

.feature-card {
  display: block;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 16px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 6px 24px rgba(0,0,0,0.35);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.feature-card:hover {
  transform: translateY(-4px);
}

.feature-card.pink:hover { border-color: var(--neon-pink-bright); box-shadow: 0 14px 34px rgba(240,5,143,0.18); }
.feature-card.cyan:hover { border-color: var(--neon-cyan-bright); box-shadow: 0 14px 34px rgba(0,144,208,0.18); }
.feature-card.green:hover { border-color: var(--neon-green-bright); box-shadow: 0 14px 34px rgba(22,185,129,0.18); }

.feature-card .icon {
  font-size: 40px;
  margin-bottom: 14px;
}

.feature-card h3 {
  margin-bottom: 10px;
}

.feature-card.compact {
  padding: 18px;
}

.feature-card.compact .icon {
  font-size: 26px;
  margin-bottom: 6px;
}

.feature-card.compact h3 {
  margin-bottom: 4px;
  font-size: 15px;
}

.feature-card.compact p {
  font-size: 13px;
}

/* ---------- Shop ---------- */

.filter-bar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 26px;
}

.filter-chip {
  border: 1.5px solid rgba(255,106,0,0.51);
  background: rgba(255,106,0,0.18);
  color: var(--ink-soft);
  padding: 8px 18px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.filter-chip:hover {
  transform: translateY(-2px);
}

.filter-chip.active {
  border-color: rgba(255,106,0,0.78);
  background: rgba(255,106,0,0.33);
  color: var(--neon-orange);
}

.filter-chip.active.neon-text {
  /* Kleine Schrift + starkes Glühen = verwaschene/verpixelt wirkende
     Kanten, daher hier deutlich dezenter als bei den großen Überschriften. */
  text-shadow: 0 0 2px currentColor;
}

.shop-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

/* Ab genug Platz: eigene linke Spalte für Filter + Warenkorb-Symbol, die
   beim Scrollen stehen bleibt, während rechts nur die Produkte scrollen.
   Darunter (schmaler Bildschirm) bleibt es bei der horizontalen, sticky
   Toolbar über den Produkten mit Filter-Dropdown, siehe weiter unten. */
@media (min-width: 961px) {
  .shop-layout {
    grid-template-columns: 264px 1fr;
    align-items: start;
  }
}

/* Zusätzlich zum allgemeinen Seitenrand (siehe .container weiter oben)
   bekommen die Produktkarten und Kategorie-Überschriften im Shop bis zur
   mittleren (Tablet-)Breite noch etwas mehr eigenen Abstand zum Rand —
   dort wirkte es trotz der 28px vom Container noch zu eng, weil die
   Karten fast bis an diesen Rand heranreichen. */
@media (max-width: 960px) {
  .shop-layout {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* ---------- Shop toolbar (Filter + Warenkorb-Icon, bleibt beim Scrollen sichtbar) ----------
   Bewusst OHNE eigenen Karten-Hintergrund/Rahmen — nur die einzelnen Buttons
   (Filter-Dropdown, Warenkorb-Icon) sind selbst weiße Pills, damit beim
   Scrollen kein durchgehender weißer Balken über der Seite entsteht. */

.shop-toolbar {
  position: sticky;
  top: 96px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin-bottom: 26px;
}

@media (min-width: 961px) {
  .shop-toolbar {
    margin-bottom: 0;
  }
}

/* Auf-/Zuklapp-Button für Filter + Warenkorb — nur relevant, wenn die
   Toolbar NICHT in der eigenen linken Spalte steht (also unterhalb von
   961px, siehe .shop-layout weiter oben), weil sie dort als sticky Block
   über den Produkten hängt und sonst dauerhaft viel Bildschirmfläche
   blockiert. Ab 961px (eigene Sidebar-Spalte) bleibt alles wie gehabt
   immer sichtbar, der Button ist dann unnötig und ausgeblendet. */
.toolbar-toggle {
  display: none;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--neon-pink-bright);
  background: var(--panel);
  color: var(--neon-pink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(0,0,0,0.35);
}

.toolbar-toggle-icon {
  width: 18px;
  height: 18px;
  fill: currentColor;
  transition: transform 0.2s ease;
}

.toolbar-toggle[aria-expanded="true"] .toolbar-toggle-icon {
  transform: rotate(180deg);
}

.toolbar-panels {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.toolbar-panels-close {
  display: none;
}

@media (max-width: 960px) {
  /* Bis inkl. Tablet-Breite (noch keine eigene Sidebar-Spalte, siehe
     .shop-layout weiter oben ab 961px) übernimmt EIN gemeinsames Icon im
     Menüband oben rechts (Filter + Warenkorb zusammen) — der früher
     freistehende "Filter & Warenkorb"-Button wird ausgeblendet, damit es
     nicht zwei Auslöser für dasselbe Panel gibt. Genau wie bei der
     schmalen Handy-Ansicht, nur jetzt auch für die mittlere Breite. */
  .toolbar-toggle {
    display: none;
  }

  /* Echtes Dropdown, das per position:fixed direkt unter den Header
     hängt (wie am Handy), mit eigenem weißen, blickdichten Hintergrund —
     sonst verschwimmen die Filter-Chips optisch mit den Produktbildern
     dahinter. */
  .toolbar-panels {
    position: fixed;
    top: 78px;
    left: 16px;
    width: min(300px, calc(100vw - 32px));
    background: var(--panel);
    border: 1px solid transparent;
    border-radius: 16px;
    box-shadow: none;
    /* Oben etwas mehr Platz (statt einheitlich 14px), damit das X zum
       Schließen eine eigene Zeile über dem Warenkorb-Button hat und nicht
       optisch ins Warenkorb-Symbol hineinragt. */
    padding: 0 14px;
    /* Bewusst UNTER dem Header (z-index:50), damit das Dropdown den Header
       (und die Buttons darin) unter keinen Umständen überdecken kann. */
    z-index: 45;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: max-height 0.25s ease, opacity 0.2s ease;
  }

  .toolbar-panels.open {
    /* Groß genug, damit Warenkorb-Button + alle Filter ohne Scrollen
       hineinpassen (nur bei sehr kleinen/querformatigen Screens greift
       noch das overflow-y als Sicherheitsnetz). */
    max-height: 90vh;
    overflow-y: auto;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    padding: 34px 14px 14px;
    border-color: var(--line);
    box-shadow: 0 12px 34px rgba(0,0,0,0.4);
  }

  /* X zum manuellen Schließen — oben rechts im Dropdown, analog zum X beim
     Warenkorb-Popover und beim Produkt-Modal. */
  .toolbar-panels-close {
    display: none;
    position: absolute;
    top: 10px;
    right: 12px;
    background: none;
    border: none;
    font-size: 18px;
    color: var(--ink-soft);
    cursor: pointer;
    line-height: 1;
    z-index: 1;
  }

  .toolbar-panels.open .toolbar-panels-close {
    display: block;
  }
}

.filter-widget {
  position: relative;
}

@media (min-width: 961px) {
  .filter-widget {
    padding: 14px;
    background: rgba(22,34,78,0.82);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 6px 22px rgba(0,0,0,0.24);
  }
}

.filter-sidebar-label {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 5px;
}

.shop-toolbar .filter-bar {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 6px;
  margin: 0;
}

.shop-toolbar .filter-bar .filter-chip {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  text-align: left;
  border-radius: 10px;
  min-height: 36px;
  padding: 6px 9px;
  font-size: 12px;
  line-height: 1.15;
  white-space: nowrap;
  touch-action: manipulation;
}

/* Kaliber-Chips haben nur kurzen Text ("20 mm") und dürfen daher enger
   sein als die Kategorie-Chips mit ihren teils langen Bezeichnungen wie
   "Bodenfeuerwerk & Kindersortiment" — die brauchen den normalen,
   luftigeren Abstand, damit der Text nicht gequetscht wirkt. */
#kaliber-filters.filter-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

#kaliber-filters .filter-chip {
  width: 100%;
  min-height: 34px;
  padding: 5px 6px;
  font-size: 12px;
  justify-content: center;
}

.filter-chip-count {
  font-size: 12px;
  font-weight: 600;
  color: inherit;
  flex-shrink: 0;
  white-space: nowrap;
}

.filter-chip.active .filter-chip-count {
  color: #fff;
}

.filter-sidebar-label-sub {
  margin-top: 8px;
}

.filter-duration {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.filter-duration input[type="range"] {
  width: 100%;
  accent-color: var(--neon-cyan-bright);
  cursor: pointer;
}

.filter-duration-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
}

.cart-widget {
  position: relative;
}

.cart-toggle {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1.5px solid var(--neon-pink-bright);
  background: var(--panel);
  color: var(--neon-pink);
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(0,0,0,0.35);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
  touch-action: manipulation;
}

.cart-toggle:hover {
  background: var(--neon-pink);
  color: var(--white);
  transform: translateY(-2px);
}

.cart-toggle svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  flex-shrink: 0;
}

.cart-toggle-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  flex: 1;
  text-align: left;
}

.cart-badge {
  flex-shrink: 0;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--neon-pink);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-panel-close {
  display: block;
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  font-size: 20px;
  color: var(--ink-soft);
  cursor: pointer;
  line-height: 1;
}

@media (max-width: 760px) {
  .shop-toolbar { top: 88px; }
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

@media (max-width: 960px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Ab hier bleiben es bewusst immer mindestens 2 Spalten nebeneinander —
   statt auf 1 Spalte umzuschalten, werden Bild, Innenabstände, Schrift
   und die Mengen-/Warenkorb-Steuerung kompakter, damit nichts überläuft. */
@media (max-width: 560px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .product-media { height: 140px; padding: 8px; font-size: 36px; }
  .product-body { padding: 10px; gap: 6px; }
  .product-name { font-size: 13px; }
  .product-desc, .product-specs { font-size: 11px; }
  .product-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    font-size: 12px;
  }
  .price,
  .price-original { white-space: nowrap; }
  .price { font-size: 13px; }
  .price-original { font-size: 11px; }
  .price-group { width: 100%; gap: 4px 8px; }
  .stock { display: block; width: 100%; font-size: 11px; line-height: 1.3; }
  .sale-badge { font-size: 9px; padding: 2px 7px; }
  .qty-row { gap: 5px; }
  .qty-row button { width: 44px; height: 44px; font-size: 20px; }
  .qty-row input { width: 34px; min-height: 44px; padding: 4px 0; font-size: 16px; }
  .add-btn { padding: 8px 6px; font-size: 12px; }
}

@media (max-width: 400px) {
  .product-grid { gap: 8px; }
  .product-media { height: 118px; }
  .product-body { padding: 8px; }
  .qty-row button { width: 42px; height: 42px; }
  .qty-row input { width: 30px; min-height: 42px; }
}

.product-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 18px rgba(0,0,0,0.31);
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.product-card:hover {
  border-color: var(--neon-orange-bright);
  box-shadow: 0 14px 30px rgba(242,136,60,0.18);
  transform: translateY(-3px);
}

.product-media {
  position: relative; /* Bezugspunkt für den "Ausverkauft"-Stempel */
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  padding: 14px;
}

.product-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: saturate(1.08) contrast(1.02);
}

.category-header {
  margin: 46px 0 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--neon-orange-bright);
  text-align: center;
}

.category-header:first-child {
  margin-top: 0;
}

.category-header h2 {
  color: var(--neon-orange);
  margin-bottom: 4px;
}

.category-header p {
  color: var(--ink-soft);
  font-size: 15px;
}

.product-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.product-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
}

.product-desc {
  color: var(--ink-soft);
  font-size: 15px;
  flex: 1;
}

.product-specs {
  color: var(--ink-soft);
  font-size: 13px;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.2px;
  flex: 1;
}

.spec-line {
  display: block;
  margin-bottom: 3px;
}

.spec-line:last-child {
  margin-bottom: 0;
}

.product-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
}

.price {
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
}

.price-group {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.price-original {
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  text-decoration: line-through;
}

.price.sale {
  color: var(--neon-pink);
}

.sale-badge {
  display: inline-block;
  background: var(--neon-pink);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-align: center;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
}

.category-header.sale {
  border-bottom-color: var(--neon-pink-bright);
}

.category-header.sale h2 {
  color: var(--neon-pink);
}

.stock {
  font-size: 13px;
  font-weight: 600;
  color: var(--neon-green);
}

.stock.low {
  color: var(--neon-orange);
}

.stock.out {
  color: #7d86ad;
}

@media (max-width: 560px) {
  .product-card .product-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .product-card .price-group {
    width: 100%;
    flex-wrap: nowrap;
  }

  .product-card .price,
  .product-card .price-original {
    white-space: nowrap;
  }

  .product-card .stock {
    display: block;
    width: 100%;
    line-height: 1.3;
  }
}

.qty-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.qty-row button {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 1.5px solid var(--neon-green-bright);
  color: #081b16;
  background: var(--neon-green);
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  transition: background 0.12s ease, color 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
  touch-action: manipulation;
}

.qty-row button:hover:not(:disabled) {
  background: var(--neon-green-bright);
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(34,224,150,0.24);
}

.qty-row button:active:not(:disabled) { transform: translateY(0); }

.qty-row button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.qty-row input {
  width: 46px;
  text-align: center;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 8px;
  padding: 6px 0;
}

.add-btn {
  margin-top: 6px;
  width: 100%;
  text-align: center;
}

/* Cart panel — als Hover-/Klick-Popover neben dem Warenkorb-Icon in der
   Toolbar, damit man beim Scrollen durch die Produkte immer reinsehen und
   bestellen kann, ohne dass er den halben Bildschirm dauerhaft belegt. */

#cart-panel {
  position: fixed;
  top: 146px;
  left: 24px;
  width: 340px;
  max-height: 75vh;
  overflow-y: auto;
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.cart-widget:hover #cart-panel,
#cart-panel:hover,
#cart-panel.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* Übersteuert die Hover-Regeln oben, solange die Maus nach einem Klick auf
   das X noch über dem Warenkorb-Symbol/Popover steht — sonst würde das
   Popover trotz Schließen-Klick sofort wieder per :hover sichtbar bleiben,
   bis man mit der Maus wegfährt oder scrollt. */
.cart-widget.force-hidden #cart-panel {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-8px) !important;
}

@media (max-width: 760px) {
  #cart-panel {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    max-height: 82vh;
    border-radius: 18px 18px 0 0;
    transform: translateY(100%);
  }
  #cart-panel.open {
    transform: translateY(0);
  }
  .cart-panel-close {
    display: block;
  }
}

.cart-item {
  padding: 10px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 14px;
}

.cart-item-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.cart-item-name {
  flex: 1;
  min-width: 0;
}

.cart-item-remove {
  background: none;
  border: none;
  color: var(--neon-pink);
  cursor: pointer;
  font-size: 15px;
  flex-shrink: 0;
}

.cart-item-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.cart-item-qty {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cart-item-qty button {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1.5px solid var(--neon-cyan-bright);
  color: var(--neon-cyan);
  background: var(--panel);
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  padding: 0;
}

.cart-item-qty input {
  width: 38px;
  text-align: center;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 6px;
  padding: 4px 0;
  font-size: 13px;
}

.cart-item-price {
  font-weight: 600;
  color: var(--ink);
  flex-shrink: 0;
}

.cart-total {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 2px solid var(--neon-cyan-bright);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
}

.cart-note {
  font-size: 14px;
  color: var(--neon-pink);
  font-weight: 600;
  margin-top: 8px;
}

.cart-empty {
  color: var(--ink-soft);
  font-size: 15px;
  text-align: center;
  padding: 20px 0;
}

/* ---------- Forms ---------- */

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

@media (max-width: 700px) {
  .form-grid { grid-template-columns: 1fr; }
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-field.full {
  grid-column: 1 / -1;
}

.form-field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--neon-cyan);
  letter-spacing: 0.5px;
}

.form-field input,
.form-field select,
.form-field textarea {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 16px;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--neon-pink-bright);
  box-shadow: 0 0 0 3px rgba(240,5,143,0.12);
  background: var(--panel);
}

.form-note {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 10px;
}

.form-success {
  display: none;
  border: 1.5px solid var(--neon-green-bright);
  background: rgba(22,185,129,0.06);
  color: var(--neon-green);
  padding: 16px;
  border-radius: 10px;
  margin-top: 20px;
  font-size: 15px;
  font-weight: 600;
}

.form-error {
  display: none;
  border: 1.5px solid var(--neon-orange-bright);
  background: rgba(242,136,60,0.08);
  color: var(--neon-orange);
  padding: 16px;
  border-radius: 10px;
  margin-top: 20px;
  font-size: 15px;
  font-weight: 600;
}

/* ---------- Service page bits ---------- */

.occasion-list {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0;
}

.occasion-chip {
  border: 1.5px solid var(--neon-cyan-bright);
  color: var(--neon-cyan);
  background: var(--panel);
  padding: 8px 18px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(0,144,208,0.12);
}

.steps {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

@media (max-width: 900px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
}

.step {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px;
  background: var(--panel);
  box-shadow: 0 4px 16px rgba(0,0,0,0.31);
}

.step::before {
  counter-increment: step;
  content: counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--neon-green-bright);
  color: var(--neon-green);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 12px;
}

/* ---------- Contact ---------- */

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.contact-info .row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.contact-info .row .label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  min-width: 110px;
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  margin-top: 60px;
  padding: 36px 24px;
  text-align: center;
  color: var(--ink-soft);
  font-size: 15px;
  background: var(--bg-alt);
}

.site-footer .foot-brand {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--ink);
  font-size: 18px;
  margin-bottom: 10px;
}

.site-footer a:hover {
  color: var(--neon-pink);
}

.disclaimer {
  max-width: 640px;
  margin: 14px auto 0;
  font-size: 13px;
  color: #7d86ad;
}

.social-row {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 16px;
}

.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  color: var(--ink-soft);
  transition: all 0.2s ease;
}

.social-icon:hover {
  border-color: var(--neon-pink);
  color: var(--neon-pink);
  background: rgba(240, 5, 143, 0.06);
  transform: translateY(-2px);
}

.social-icon svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.social-icon-lg {
  width: 52px;
  height: 52px;
}

.social-icon-lg svg {
  width: 26px;
  height: 26px;
}

.yt-inline-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--neon-yellow);
  white-space: nowrap;
}

.yt-inline-link .social-icon {
  border-color: var(--neon-yellow-bright);
  color: var(--neon-yellow);
}

.yt-inline-link:hover .social-icon {
  background: var(--neon-yellow);
  border-color: var(--neon-yellow);
  color: var(--white);
}

.yt-inline-link:hover {
  color: var(--neon-yellow-bright);
}

/* ---------- Produkt-Detail-Modal ---------- */

.product-card {
  cursor: pointer;
}

.product-card .qty-row,
.product-card .add-btn {
  cursor: default;
}

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(22, 22, 28, 0.55);
  backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-overlay.open {
  display: flex;
}

.modal-box {
  position: relative;
  width: 100%;
  max-width: 760px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 0 20px 60px rgba(0,0,0,0.44);
  border-radius: 18px;
}

.modal-overlay { overscroll-behavior: contain; }

.modal-close {
  position: fixed;
  top: calc(5vh + 14px);
  right: max(34px, calc((100vw - 760px) / 2 + 14px));
  z-index: 8;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  color: var(--ink);
  background: rgba(16,25,58,0.88);
  cursor: pointer;
  font-size: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.modal-media {
  width: 100%;
  min-height: 300px;
  max-height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-soft);
  font-size: 100px;
  border-radius: 18px 18px 0 0;
  overflow: hidden;
  padding: 20px;
  position: relative;
}

.modal-media img {
  width: 100%;
  height: 100%;
  max-height: 420px;
  object-fit: contain;
}

/* Bild-Zoom-Lupe: Klick aktiviert die Lupe, sie folgt danach der Maus über
   dem Produktbild (nur in der großen Detailansicht, nicht auf den kleinen
   Karten im Raster). Erneuter Klick bzw. Maus verlässt das Bild = aus. */
.modal-media.zoom-ready {
  cursor: zoom-in;
}

.modal-media.zoom-active {
  cursor: zoom-out;
}

.modal-media .zoom-hint {
  position: absolute;
  bottom: 10px;
  right: 14px;
  background: rgba(22, 22, 28, 0.72);
  color: var(--white);
  font-size: 12px;
  font-family: var(--font-display);
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 20px;
  pointer-events: none;
  opacity: 0.9;
  transition: opacity 0.2s ease;
  z-index: 4;
}

.modal-media.zoom-active .zoom-hint {
  opacity: 0;
}

.modal-media:not(.zoom-ready) .zoom-hint {
  display: none;
}

.image-loupe {
  position: absolute;
  display: none;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  border: 3px solid var(--neon-orange-bright);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), inset 0 0 0 2px rgba(255, 255, 255, 0.5);
  pointer-events: none;
  background-repeat: no-repeat;
  background-color: var(--panel);
  z-index: 5;
}

@media (max-width: 640px) {
  .image-loupe {
    width: 130px;
    height: 130px;
  }
}

.modal-body {
  padding: 28px;
}

.modal-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--ink);
  margin-bottom: 12px;
}

.modal-desc {
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.55;
}

.modal-specs {
  color: var(--ink-soft);
  font-size: 14px;
  font-family: var(--font-display);
  font-weight: 600;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.modal-specs .spec-line {
  margin-bottom: 5px;
}

#modal-video-wrap {
  margin-top: 26px;
}

#modal-video-wrap h3 {
  color: var(--neon-cyan);
  margin-bottom: 12px;
  font-size: 15px;
  letter-spacing: 0.5px;
}

.video-embed {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
}

.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--neon-orange);
}

.video-thumb-link {
  display: block;
}

.video-thumb {
  cursor: pointer;
  position: relative;
  background: #111;
}

.video-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
}

.video-play-badge {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  width: 62px;
  height: 62px;
  margin: auto;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.92);
  color: var(--neon-orange);
  font-size: 22px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.24);
}

.video-note {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 10px;
  line-height: 1.4;
}

/* ---------- Mobile nav toggle ---------- */

.nav-toggle {
  display: none;
  background: var(--panel);
  border: 1.5px solid var(--neon-cyan-bright);
  color: var(--neon-cyan);
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Tablet-Breite (761-960px): hier ist .nav-links (anders als am Handy)
   noch sichtbar und steht im Menüband zwischen Logo und Icon-Button —
   dadurch landet der Button optisch in der Mitte statt ganz rechts. Mit
   "order" nach hinten geschoben, damit er wie am Handy ganz rechts sitzt. */
@media (min-width: 761px) and (max-width: 960px) {
  .nav-actions {
    order: 3;
  }
}

/* Eigene, kleine Icon-Buttons für Filter und Warenkorb im Menüband (nur
   Shop-Seite, nur am Handy) — ersetzen dort den freistehenden "Filter &
   Warenkorb"-Button, damit sie nicht mehr lose unter dem Seitentitel
   schweben, sondern fest im Header sitzen, in der Reihenfolge
   Menü -> Filter -> Warenkorb. Der Filter-Button steuert #toolbar-panels
   (wie der freistehende Button), der Warenkorb-Button steuert direkt
   #cart-panel (wie das Icon in der Sidebar) — beide unabhängig voneinander,
   siehe js/shop.js (data-toolbar-toggle / data-cart-toggle). */
.header-icon-toggle {
  display: none;
  align-items: center;
  gap: 6px;
  background: var(--panel);
  border: 1.5px solid var(--neon-cyan-bright);
  color: var(--neon-cyan);
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 999px;
  cursor: pointer;
  justify-content: center;
  position: relative;
}

.header-icon-toggle svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
  flex-shrink: 0;
}

.header-icon-toggle .cart-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  font-size: 10px;
}

/* Muss NACH der obigen Basis-Regel (display: none) stehen, sonst gewinnt
   im CSS-Cascade die spätere Basis-Regel gegen die frühere Media-Query-
   Regel weiter oben — genau das war der Bug, durch den der Button
   komplett verschwunden war. */
@media (max-width: 960px) {
  .header-icon-toggle {
    display: flex;
    position: relative;
  }
}

/* Mobiles Menue.
   Vorher: Logo und Menue-Button passten zusammen nicht in eine Zeile
   (359 px noetig, 327 px vorhanden), der Button rutschte deshalb unter das
   Logo. Und das geoeffnete Menue lag IM Menueband, wodurch der klebende
   Header auf 412 px anwuchs - mehr als die halbe Bildschirmhoehe.
   Jetzt: kompakteres Logo, engere Abstaende, und das Menue haengt sich als
   Overlay unter den Header, statt ihn aufzublaehen. */
@media (max-width: 760px) {
  .nav-toggle { display: block; padding: 7px 12px; font-size: 13px; }

  .nav-wrap {
    position: relative;
    flex-wrap: nowrap;
    padding: 10px 14px;
    gap: 10px;
  }

  .brand-logo { width: 34px; height: 34px; }
  .brand-name { font-size: 15px; line-height: 1.05; }
  .brand-name span { font-size: 8px; letter-spacing: 0.6px; }

  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6px 14px 12px;
    background: #16224d;
    border-top: 1px solid var(--line);
    box-shadow: 0 14px 28px rgba(0,0,0,0.45);
    z-index: 60;
  }

  .nav-links.open { display: flex; }
  .nav-links li { width: 100%; }

  /* Grosse Tippflaechen statt Textlinks */
  .nav-links a {
    display: block;
    width: 100%;
    padding: 11px 4px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
  }
  .nav-links li:last-child a { border-bottom: none; }
  .nav-links a::after { display: none; }
  .nav-links a.active { color: var(--neon-pink-bright); }
}

/* Seitentitel + Einleitungssatz auf Shop/Show buchen/Kontakt/Impressum
   (Home ist über .hero schon zentriert) am Handy etwas mittiger rücken,
   bewusst dezent gehalten. */
@media (max-width: 600px) {
  main.container > h1,
  main.container > h1 + p.product-desc {
    text-align: center;
  }
}

/* ---------------------------------------------------------------------------
   Abhol-Info ("Wo und wann kann ich abholen?")
   Steht auf Startseite und Shop-Seite. Vorher stand nirgends auf der Website,
   wann und wo abgeholt werden kann - das war der haeufigste Abbruchgrund.
   --------------------------------------------------------------------------- */
.pickup-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  background: rgba(22,34,78,0.88);
  border: 1px solid var(--line);
  border-left: 4px solid var(--neon-green);
  border-radius: 14px;
  padding: 22px 26px;
  box-shadow: 0 6px 28px rgba(0,0,0,0.35);
  text-align: left;
}

.shop-title {
  font-size: clamp(2.35rem, 5vw, 4.25rem);
  line-height: 1;
  letter-spacing: -0.035em;
}

.pickup-bar .pickup-col {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.pickup-bar .pickup-label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--neon-green-bright);
}

.pickup-bar .pickup-value {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--white);
  line-height: 1.35;
}

.pickup-bar .pickup-note {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.45;
}

.pickup-bar a.pickup-value:hover,
.pickup-bar .pickup-note a:hover {
  color: var(--neon-cyan-bright);
}

.pickup-bar .pickup-note a {
  color: var(--neon-cyan);
  text-decoration: underline;
}

@media (max-width: 780px) {
  .pickup-bar {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 20px;
  }
}

/* ---------------------------------------------------------------------------
   FAQ-Seite: Aufklappbare Fragen ueber <details>/<summary>.
   Bewusst ohne JavaScript geloest - funktioniert in jedem Browser, ist
   barrierefrei und laesst sich per Strg+F durchsuchen, wenn offen.
   --------------------------------------------------------------------------- */
.faq-group {
  margin-bottom: 34px;
}

.faq-group > h2 {
  margin-bottom: 14px;
}

.faq-item {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color 0.18s ease;
}

.faq-item[open] {
  border-color: rgba(255,255,255,0.3);
}

.faq-item > summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 52px 16px 20px;
  position: relative;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--white);
  line-height: 1.4;
}

.faq-item > summary::-webkit-details-marker { display: none; }

.faq-item > summary::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  color: var(--neon-cyan);
  transition: transform 0.18s ease;
}

.faq-item[open] > summary::after {
  content: "−";
  color: var(--neon-pink);
}

.faq-item > summary:hover { color: var(--neon-cyan-bright); }

.faq-answer {
  padding: 0 20px 18px;
  color: var(--ink);
  font-size: 15.5px;
  line-height: 1.65;
}

.faq-answer p { margin: 0 0 12px; }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer strong { color: var(--white); }
.faq-answer a { color: var(--neon-cyan); text-decoration: underline; }
.faq-answer a:hover { color: var(--neon-cyan-bright); }

.faq-answer ul {
  margin: 0 0 12px;
  padding-left: 20px;
}

.faq-answer li { margin-bottom: 7px; }

.faq-table {
  width: 100%;
  border-collapse: collapse;
  margin: 4px 0 14px;
  font-size: 14.5px;
}

.faq-table th,
.faq-table td {
  text-align: left;
  padding: 9px 12px 9px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.faq-table th {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--neon-cyan-bright);
  white-space: nowrap;
}

.faq-table td:first-child {
  font-weight: 600;
  color: var(--white);
  white-space: nowrap;
  padding-right: 18px;
}

.faq-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 30px;
}

.faq-jump a {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 18px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.faq-jump a:hover {
  border-color: var(--neon-pink);
  color: var(--white);
}

@media (max-width: 600px) {
  .faq-item > summary { font-size: 16px; padding: 14px 46px 14px 16px; }
  .faq-answer { padding: 0 16px 16px; font-size: 15px; }
  .faq-table { font-size: 13.5px; }
  .faq-table td:first-child { white-space: normal; }
}

/* ---------------------------------------------------------------------------
   Hinweisband ueber dem Shop, z.B. "Reservierung erst ab 1. Dezember moeglich".
   Wird von js/shop.js ein- und ausgeblendet, je nach Antwort des Servers.
   --------------------------------------------------------------------------- */
.shop-banner {
  background: linear-gradient(90deg, rgba(255,106,0,0.22), rgba(255,45,158,0.16));
  border: 1.5px solid var(--neon-orange);
  border-radius: 12px;
  padding: 15px 20px;
  margin-bottom: 16px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
}

.shop-banner strong {
  display: block;
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--neon-orange-bright);
  margin-bottom: 3px;
}

/* ---------- Verkaufsstart-Nacharbeit 27.09.2026 ---------- */

/* Sichtbarer, kontrastreicher Tastaturfokus auf allen interaktiven Elementen. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--neon-cyan-bright);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.shop-intro {
  padding: clamp(24px, 4vw, 38px);
}

/* Die vier breiten Seiteneinstiege dürfen den normalen Container-Innenrand
   nutzen, bleiben aber auf kleinen Bildschirmen vollständig responsiv. */
.page-intro-wide {
  display: block;
  position: relative;
  left: 50%;
  width: min(1180px, calc(100vw - 48px));
  max-width: 1180px;
  transform: translateX(-50%);
}

.shop-title {
  font-size: clamp(2.15rem, 4.3vw, 3.125rem);
  line-height: 1.03;
}

@media (max-width: 420px) {
  .shop-title { font-size: clamp(1.85rem, 9vw, 2.2rem); }
}

.shop-banner {
  padding: 0;
  overflow: hidden;
}

.shop-banner > summary,
.pickup-bar > summary {
  min-height: 48px;
  padding: 13px 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--white);
  list-style: none;
}

.shop-banner > summary::-webkit-details-marker,
.pickup-bar > summary::-webkit-details-marker {
  display: none;
}

.shop-banner > summary::after,
.pickup-bar > summary::after {
  content: "⌄";
  color: var(--neon-cyan-bright);
  font-size: 19px;
  transform: rotate(180deg);
  transition: transform .18s ease;
}

.shop-banner:not([open]) > summary::after,
.pickup-bar:not([open]) > summary::after {
  transform: rotate(0);
}

.details-toggle-label {
  margin-left: auto;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
}

.shop-banner-content {
  padding: 0 18px 16px;
}

.pickup-bar {
  display: block;
  padding: 0;
}

.pickup-bar > summary {
  color: var(--neon-green-bright);
  font-size: 17px;
  border-bottom: 1px solid transparent;
}

.pickup-bar[open] > summary {
  border-bottom-color: var(--line);
}

.pickup-content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding: 20px 26px 24px;
}

@media (max-width: 780px) {
  .pickup-bar { padding: 0; }
  .pickup-content { grid-template-columns: 1fr; gap: 16px; padding: 18px 20px 22px; }
  .details-toggle-label { display: none; }
}

/* Filter wirken fast vollflächig, bleiben aber klar von aktiven Zuständen
   unterscheidbar. Beide Filtergruppen verwenden die gewünschten 12px. */
.filter-widget {
  background: rgba(22,34,78,0.94);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 14px;
  padding: 12px;
}

.shop-toolbar .filter-bar .filter-chip,
#kaliber-filters .filter-chip {
  background: rgba(255,106,0,0.30);
  color: #fff7f0;
  font-size: 12px;
}

.shop-toolbar .filter-bar .filter-chip:hover,
.shop-toolbar .filter-bar .filter-chip:focus-visible,
#kaliber-filters .filter-chip:hover,
#kaliber-filters .filter-chip:focus-visible {
  background: rgba(255,106,0,0.38);
  color: #fff;
}

.shop-toolbar .filter-bar .filter-chip.active,
#kaliber-filters .filter-chip.active {
  background: rgba(255,106,0,0.62);
  border-color: var(--neon-orange-bright);
  color: #fff;
}

#kaliber-filters .filter-chip span {
  white-space: nowrap;
}

/* Die sichtbare Taste ist exakt 25×25px. Der transparente Button bleibt
   44×44px groß, damit Touch- und Tastaturbedienung sicher funktionieren. */
.qty-row,
.cart-item-qty {
  gap: 2px;
}

.qty-row button,
.cart-item-qty button {
  position: relative;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  font-size: 0;
  box-shadow: none;
}

.qty-row button::before,
.cart-item-qty button::before {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 25px;
  height: 25px;
  border-radius: 6px;
  border: 1.5px solid #5ee0b4;
  background: #1b7a5b;
  color: #fff;
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 22px;
  text-align: center;
}

.qty-row button[data-action="dec"]::before,
.cart-item-qty button[data-qty-dec]::before { content: "−"; }
.qty-row button[data-action="inc"]::before,
.cart-item-qty button[data-qty-inc]::before { content: "+"; }

.cart-item-qty button::before {
  border-color: var(--neon-cyan-bright);
  background: var(--panel);
  color: var(--neon-cyan-bright);
}

.qty-row button:hover:not(:disabled),
.cart-item-qty button:hover:not(:disabled) {
  background: transparent;
  transform: none;
  box-shadow: none;
}

.qty-row button:hover:not(:disabled)::before {
  background: #27966f;
  box-shadow: 0 4px 12px rgba(34,224,150,.18);
}

@media (max-width: 520px) {
  .page-intro-wide {
    width: calc(100vw - 32px);
  }
}

.product-details-btn {
  align-self: flex-start;
  border: 0;
  background: transparent;
  color: var(--neon-cyan-bright);
  min-height: 28px;
  padding: 2px 0;
  font: 700 12px/1.3 var(--font-display);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.modal-media img {
  transition: transform .16s ease;
  transform-origin: 50% 50%;
}

.modal-media.zoom-ready { cursor: default; }
.modal-media.zoom-active { cursor: crosshair; }

.image-zoom-controls {
  position: absolute;
  left: 14px;
  bottom: 10px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 10px;
  background: rgba(13,16,35,.88);
  border: 1px solid rgba(255,255,255,.2);
}

.image-zoom-button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 7px;
  border: 1px solid var(--neon-cyan-bright);
  background: #202954;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.image-zoom-button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

#zoom-level {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  min-width: 48px;
  text-align: center;
  color: #fff;
  font: 700 12px/1 var(--font-display);
}

@media (max-width: 520px) {
  .modal-media .zoom-hint { display: none; }
}

/* ---------------------------------------------------------------------------
   Ausverkaufte Artikel deutlich kennzeichnen.
   Vorher stand nur "Ausverkauft" in kleiner grauer Schrift bei den anderen
   Bestandsangaben - beim Ueberfliegen kaum zu sehen. Jetzt: Bild abgedunkelt
   und entfaerbt, dazu ein schraeg liegender Stempel darueber.
   --------------------------------------------------------------------------- */
.product-card.is-sold-out .product-media img {
  filter: grayscale(1) brightness(0.5);
}

.product-card.is-sold-out .product-body {
  opacity: 0.72;
}

.product-card.is-sold-out .product-name {
  text-decoration: line-through;
  text-decoration-color: rgba(255,255,255,0.35);
  text-decoration-thickness: 1.5px;
}

.sold-out-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 3;
}

.sold-out-stamp {
  transform: rotate(-11deg);
  border: 2.5px solid var(--white);
  border-radius: 7px;
  padding: 6px 16px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--white);
  background: rgba(20,26,58,0.62);
  box-shadow: 0 3px 14px rgba(0,0,0,0.45);
  white-space: nowrap;
}

/* Der Bestandstext selbst wird bei "Ausverkauft" ebenfalls deutlicher. */
.stock.out {
  color: #ff8fb4;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

@media (max-width: 620px) {
  .sold-out-stamp { font-size: 13px; padding: 5px 12px; letter-spacing: 1.4px; }
}

/* ---------------------------------------------------------------------------
   Videos: Zwei-Klick-Loesung
   Solange nicht geklickt wurde, wird KEIN Inhalt von YouTube geladen - weder
   Player noch Vorschaubild. Vorher hat allein das Oeffnen der Seite bzw. der
   Produktansicht die IP-Adresse an Google uebermittelt, ohne dass jemand
   zugestimmt haette.
   --------------------------------------------------------------------------- */
.video-consent {
  position: relative;
  cursor: pointer;
  background: linear-gradient(150deg, #1b2a5c 0%, #101a3d 100%);
  overflow: hidden;
}

.video-consent img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.55;
  transition: opacity 0.2s ease, transform 0.3s ease;
}

.video-consent:hover img,
.video-consent:focus-visible img { opacity: 0.75; transform: scale(1.03); }

.video-consent:focus-visible {
  outline: 3px solid var(--neon-cyan);
  outline-offset: 3px;
}

.video-poster,
.video-poster-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 54px;
  opacity: 0.5;
}

.video-consent-note {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 8px 10px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--ink-soft);
  background: rgba(10,16,40,0.78);
}

/* Auf der Show-Seite sind die Kacheln reine Platzhalter ohne Bild */
.video-thumb .video-poster { font-size: 60px; }