/* EmergencyForge für Tebex: dieselben Farben, Schrift, Glas und Knöpfe wie emergencyforge.de (app/globals.css,
   components/ui.ts), als einfaches CSS ohne Build. Orange #ff4d00 ist eine Fläche mit #111113 als Schrift;
   als Schriftfarbe ist es #ff6a2b, wegen des Kontrasts. */
:root {
  --bg: #0c0a09;
  --text: #f3ebe4;
  --text-2: rgb(243 235 228 / 0.65);
  --text-3: rgb(243 235 228 / 0.5);
  --line: rgb(255 255 255 / 0.08);
  --line-2: rgb(255 255 255 / 0.14);
  --orange: #ff4d00;
  --orange-text: #ff6a2b;
  --ink: #111113;
  --red: #f87171;
  --green: #86efac;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --bar-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Abstände in einer Reihe; alles andere leitet sich daraus ab */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4rem;
  --s9: 6rem;

  /* Drei Höhen: der Grund, Flächen darauf (Karten, Listen) und erhobene Flächen (Kaufbox, Summe, Formulare).
     Jede Stufe ist oben etwas heller, hat eine Lichtkante und wirft einen tieferen Schatten. */
  --surface-1: linear-gradient(180deg, rgb(255 255 255 / 0.045), rgb(255 255 255 / 0.012) 45%), #100e0c;
  --shadow-1:
    inset 0 1px 0 rgb(255 255 255 / 0.06),
    0 1px 2px rgb(0 0 0 / 0.4),
    0 18px 40px -24px rgb(0 0 0 / 0.85);
  --surface-2: radial-gradient(120% 70% at 50% -10%, rgb(255 255 255 / 0.075), transparent 60%), linear-gradient(180deg, #17130f, #100e0c);
  --shadow-2:
    inset 0 1px 0 rgb(255 255 255 / 0.1),
    0 1px 2px rgb(0 0 0 / 0.5),
    0 30px 70px -30px rgb(0 0 0 / 0.95);
  --shadow-lift:
    inset 0 1px 0 rgb(255 255 255 / 0.08),
    0 1px 2px rgb(0 0 0 / 0.5),
    0 30px 60px -28px rgb(0 0 0 / 0.95),
    0 18px 40px -30px rgb(255 77 0 / 0.35);

  /* Ecken: leicht gerundet, in vier Stufen nach Größe des Elements */
  --r-1: 3px; /* Tags, Badges, kleine Hinweise */
  --r-2: 6px; /* Knöpfe, Felder, Filter, Vorschaubilder */
  --r-3: 10px; /* Karten, Glas-Leisten, Galerie */
  --r-4: 14px; /* große erhobene Flächen */

  /* Glas für alles, was über der Seite schwebt: oben ein Glanzstreifen, darunter getöntes Glas mit feiner Körnung */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --glass: var(--grain), linear-gradient(180deg, rgb(255 255 255 / 0.12), rgb(255 255 255 / 0.04) 42%, rgb(255 255 255 / 0.015)),
    rgb(22 18 15 / 0.64);
  --glass-blur: blur(14px) saturate(1.8) brightness(1.04);
  --glass-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.24),
    inset 0 -1px 0 rgb(255 255 255 / 0.05),
    0 1px 0 rgb(0 0 0 / 0.5),
    0 22px 50px -22px rgb(0 0 0 / 0.9),
    0 16px 34px -26px rgb(255 77 0 / 0.4);
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: "Esse", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}
h1,
h2,
h3,
p {
  margin: 0;
}
::selection {
  background: rgb(255 77 0 / 0.35);
}

/* Fokus: ein klarer oranger Ring mit Abstand, nur bei Tastatur */
:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}
.btn:focus-visible,
.section-link:focus-visible,
.card:focus-visible,
.card-link:focus-visible {
  outline-offset: 4px;
}

/* Welche Rundung wo: klein für Beschriftungen, mittel für alles Bedienbare, größer für Flächen */
.tag,
.badge,
.ribbon,
.flag,
.basket-count,
.price-free,
.chip a,
.includes i,
.login-steps li::before,
.steps li,
.thumb-play,
.meter,
.meter span,
.status::before,
.rich-text code {
  border-radius: var(--r-1);
}
.btn,
.input,
.input-addon,
.chip,
.section-link,
.card-icon,
.feature-icon,
.assurances i,
.gallery-thumbs button,
.row-thumb,
.basket-thumb,
.spec,
.faq-item,
.video-play,
.skip,
.toast,
.module-image,
.rich-text img {
  border-radius: var(--r-2);
}
.card,
.rows,
.row,
.module,
.panel,
.gallery-stage,
.package-hero,
.mini-media,
.lightbox,
.empty,
.cat-icon,
.section-bar,
.site-bar[data-floating] .site-bar-inner,
.buybar-inner {
  border-radius: var(--r-3);
}
.surface-2,
.buybox,
.summary,
.form-card,
.login,
.about {
  border-radius: var(--r-4);
}
.btn-icon {
  border-radius: var(--r-2);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.skip {
  position: absolute;
  left: var(--s4);
  top: -4rem;
  z-index: 60;
  padding: var(--s2) var(--s4);
  background: var(--orange);
  color: var(--ink);
  font-weight: 500;
}
.skip:focus {
  top: var(--s4);
}

/* Typografie: eine Schrift, zwei Gewichte, drei Tonstufen, Orange als einziger Akzent */
.wrap {
  width: 100%;
  max-width: 88rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}
@media (min-width: 768px) {
  .wrap {
    padding: 0 var(--s6);
  }
}
.h1 {
  font-size: clamp(2.75rem, 5.6vw, 5.5rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.h2 {
  font-size: clamp(2.25rem, 4.4vw, 4.25rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.h3 {
  font-size: 2.25rem;
  font-weight: 500;
  letter-spacing: -0.04em;
}
.body {
  font-size: 1.125rem;
  line-height: 1.625;
  color: var(--text-2);
  text-wrap: pretty;
}
.hint {
  font-size: 0.875rem;
  color: var(--text-3);
}

/* Knöpfe: primär (orange, einer pro Ansicht), sekundär, leise und rot, getöntes Orange für die vielen Kaufknöpfe auf
   Karten und Glas für die Kopfzeile. Jeder Knopf hat oben eine Lichtkante und unten eine dunkle Kante, als wäre er aus
   einem Stück gefräst. Beim Drüberfahren wird er heller und sein Schatten weicher; beim Klicken gibt er einen Pixel nach. */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 3rem;
  padding: 0 1.375rem;
  border: 1px solid transparent;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  line-height: 1.25rem;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background 0.35s var(--ease),
    border-color 0.35s var(--ease),
    color 0.35s var(--ease),
    box-shadow 0.35s var(--ease),
    transform 0.15s ease;
}
.btn:active {
  transform: translateY(1px);
}
.btn i {
  transition: translate 0.4s var(--ease);
}
.btn:hover .fa-arrow-right {
  translate: 2px 0;
}
.btn-sm {
  min-height: 2.25rem;
  padding: 0 0.9rem;
}
.btn-lg {
  min-height: 3.5rem;
  font-size: 0.9375rem;
}
.btn-icon {
  width: 2.5rem;
  min-height: 2.5rem;
  padding: 0;
}
.btn-block {
  width: 100%;
}
/* Der orange Knopf glüht beim Drüberfahren wie Metall in der Esse: der Verlauf wird von unten heller, über die
   Fläche zieht ganz leicht Hitzeflimmern, dahinter liegt ein weicher Schein, und aus der Oberkante steigen Funken
   (die setzt emergencyforge.js). */
.btn-primary {
  isolation: isolate;
  border-color: rgb(255 138 80 / 0.55);
  background: linear-gradient(180deg, #ff6c22, #ff4d00 28%, #f04500 50%, #ff8a2a 78%, #ffb347) 0 0 / 100% 200%;
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.4),
    inset 0 -2px 0 rgb(140 32 0 / 0.35),
    0 1px 0 rgb(0 0 0 / 0.5),
    0 10px 24px -12px rgb(255 77 0 / 0.75);
  transition:
    background-position 0.7s var(--ease),
    border-color 0.35s var(--ease),
    color 0.35s var(--ease),
    box-shadow 0.5s var(--ease),
    transform 0.15s ease;
}
/* Hitzeflimmern: ein heller Schleier, kaum zu sehen, der langsam über die Fläche zieht */
.btn-primary::before,
.btn-soft::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  opacity: 0;
  background: linear-gradient(100deg, transparent 20%, rgb(255 240 200 / 0.2) 40%, transparent 55%, rgb(255 220 160 / 0.12) 70%, transparent 85%) 0 0 / 220% 100%;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
/* Der Schein hinter dem Knopf */
.btn-primary::after,
.btn-soft::after {
  content: "";
  position: absolute;
  inset: 25% 10% -25%;
  z-index: -2;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(closest-side, rgb(255 110 20 / 0.6), transparent);
  filter: blur(14px);
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.btn-primary:hover {
  border-color: rgb(255 200 140 / 0.7);
  background-position: 0 100%;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.5),
    inset 0 -2px 0 rgb(140 32 0 / 0.25),
    0 1px 0 rgb(0 0 0 / 0.5),
    0 14px 38px -12px rgb(255 110 20 / 0.95);
}
.btn-primary:hover::before,
.btn-soft:hover::before {
  opacity: 1;
  animation: btn-haze 3.4s linear infinite;
}
.btn-primary:hover::after,
.btn-soft:hover::after {
  opacity: 0.55;
  animation: btn-bloom 3.4s ease-in-out infinite;
}
.btn-primary:active,
.btn-soft:active {
  background-position: 0 30%;
  box-shadow:
    inset 0 2px 4px rgb(120 28 0 / 0.45),
    0 1px 0 rgb(0 0 0 / 0.5);
}
@keyframes btn-haze {
  to {
    background-position: -220% 0;
  }
}
@keyframes btn-bloom {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05, 1.15);
  }
}
/* Funken: steigen aus der Oberkante und verglühen */
.ember {
  position: absolute;
  top: 2px;
  z-index: 1;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ffd28a;
  box-shadow: 0 0 6px 1px rgb(255 140 40 / 0.9);
  pointer-events: none;
  animation: ember-rise var(--t, 1.2s) cubic-bezier(0.2, 0.6, 0.4, 1) forwards;
}
@keyframes ember-rise {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  100% {
    transform: translate(var(--dx, 0), var(--dy, -36px)) scale(0.2);
    opacity: 0;
  }
}
.btn-secondary {
  border-color: rgb(255 255 255 / 0.13);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.075), rgb(255 255 255 / 0.02));
  color: var(--text);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.08),
    inset 0 -1px 0 rgb(0 0 0 / 0.35),
    0 1px 0 rgb(0 0 0 / 0.4);
}
.btn-secondary:hover {
  border-color: rgb(255 255 255 / 0.24);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.12), rgb(255 255 255 / 0.04));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.14),
    inset 0 -1px 0 rgb(0 0 0 / 0.35),
    0 10px 24px -14px rgb(0 0 0 / 0.9);
}
.btn-secondary:active {
  background: rgb(255 255 255 / 0.05);
  box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.45);
}
.btn-ghost {
  color: rgb(243 235 228 / 0.8);
}
.btn-ghost:hover {
  background: rgb(255 255 255 / 0.06);
  color: var(--text);
}
.btn-soft {
  isolation: isolate;
  border-color: rgb(255 106 43 / 0.4);
  background: linear-gradient(180deg, rgb(255 77 0 / 0.16), rgb(255 77 0 / 0.07));
  color: #ff8a4a;
  box-shadow:
    inset 0 1px 0 rgb(255 180 140 / 0.12),
    0 1px 0 rgb(0 0 0 / 0.4);
  transition:
    background-position 0.7s var(--ease),
    border-color 0.35s var(--ease),
    color 0.35s var(--ease),
    box-shadow 0.5s var(--ease),
    transform 0.15s ease;
}
/* Liegt der Zeiger auf der Karte, sieht der Knopf aus wie .btn-primary in Ruhe, auf dem Knopf selbst wie
   .btn-primary beim Drüberfahren. Verlauf, Rand und Schein müssen darum mit .btn-primary übereinstimmen. */
.btn-soft:hover,
.card-link:hover .btn-soft {
  border-color: rgb(255 138 80 / 0.55);
  background: linear-gradient(180deg, #ff6c22, #ff4d00 28%, #f04500 50%, #ff8a2a 78%, #ffb347) 0 0 / 100% 200%;
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.4),
    inset 0 -2px 0 rgb(140 32 0 / 0.35),
    0 1px 0 rgb(0 0 0 / 0.5),
    0 10px 24px -12px rgb(255 77 0 / 0.75);
}
.btn-soft:hover,
.card-link .btn-soft:hover {
  border-color: rgb(255 200 140 / 0.7);
  background-position: 0 100%;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.5),
    inset 0 -2px 0 rgb(140 32 0 / 0.25),
    0 1px 0 rgb(0 0 0 / 0.5),
    0 14px 38px -12px rgb(255 110 20 / 0.95);
}
.btn-in-basket {
  border-color: rgb(134 239 172 / 0.3);
  background: rgb(134 239 172 / 0.08);
  color: var(--green);
}
.btn-in-basket:hover {
  border-color: rgb(248 113 113 / 0.5);
  background: rgb(248 113 113 / 0.1);
  color: var(--red);
}
.btn-glass {
  border-color: rgb(255 255 255 / 0.1);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.12), rgb(255 255 255 / 0.03));
  color: var(--text);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.22),
    0 6px 18px -10px rgb(0 0 0 / 0.8);
}
.btn-glass:hover {
  border-color: rgb(255 255 255 / 0.22);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0.05));
}
.btn-danger-soft {
  border-color: rgb(248 113 113 / 0.3);
  color: var(--red);
}
.btn-danger-soft:hover {
  border-color: rgb(248 113 113 / 0.6);
  background: rgb(248 113 113 / 0.1);
}
.btn.is-disabled,
.btn:disabled {
  pointer-events: none;
  opacity: 0.5;
}

/* Kopfzeile: flach über dem Seitenanfang, beim Scrollen eine schwebende Pille aus Glas (emergencyforge.js setzt data-floating) */
.site-bar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  padding: 0;
  transition:
    padding 0.45s var(--bar-ease),
    top 0.45s var(--bar-ease);
}
.site-bar-inner {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  max-width: 88rem;
  height: 5rem;
  margin: 0 auto;
  padding: 0 1.25rem;
  background: rgb(30 26 23 / 0);
  transition:
    max-width 0.45s var(--bar-ease),
    height 0.45s var(--bar-ease),
    padding 0.45s var(--bar-ease),
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}
@media (min-width: 768px) {
  .site-bar-inner {
    padding: 0 var(--s6);
  }
}
.site-bar[data-floating] {
  padding: var(--s2) var(--s3) 0;
}
.site-bar[data-floating] .site-bar-inner {
  max-width: 56rem;
  height: 3.75rem;
  padding: 0 var(--s2) 0 1.25rem;
  background: var(--glass);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
/* Der Lichtrand aus Glas: ein 1px-Ring, oben links und unten rechts am hellsten. Erhobene Flächen haben ihn auch. */
.site-bar-inner::before,
.section-bar::before,
.surface-2::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(140deg, rgb(255 255 255 / 0.38), rgb(255 255 255 / 0.07) 30%, rgb(255 255 255 / 0.02) 62%, rgb(255 255 255 / 0.2));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.surface-2::before {
  z-index: 0;
  background: linear-gradient(140deg, rgb(255 255 255 / 0.22), rgb(255 255 255 / 0.05) 30%, rgb(255 255 255 / 0.015) 62%, rgb(255 255 255 / 0.1));
}
.site-bar-inner::before {
  opacity: 0;
  transition: opacity 0.2s ease;
}
.site-bar[data-floating] .site-bar-inner::before {
  opacity: 1;
}
.bar-spacer {
  height: 5rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-width: 0;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.brand-mark {
  width: 2.25rem;
  height: 1.25rem;
  flex: none;
  fill: currentColor;
  transition: color 0.3s ease;
}
.brand:hover .brand-mark {
  color: var(--orange-text);
}
.brand-logo {
  height: 1.75rem;
  width: auto;
}
.brand-rule {
  width: 1px;
  height: 1.25rem;
  background: rgb(255 255 255 / 0.2);
}
.brand-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bar-nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
}
.bar-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  color: var(--text-2);
  transition: color 0.2s ease;
}
.bar-link i {
  font-size: 0.85em;
  opacity: 0.8;
}
.bar-link:hover {
  color: var(--text);
}
/* Menüs in der Kopfzeile (Konto, Währung): <details> mit einem Glas-Fenster darunter, rechtsbündig */
.menu {
  position: relative;
}
.menu > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.menu > summary::-webkit-details-marker {
  display: none;
}
.menu-caret {
  font-size: 0.6rem !important;
  transition: rotate 0.35s var(--ease);
}
.menu[open] .menu-caret {
  rotate: 180deg;
}
.menu[open] > summary {
  color: var(--text);
}
.menu-panel {
  position: absolute;
  top: calc(100% + 0.9rem);
  right: -0.5rem;
  z-index: 5;
  display: grid;
  gap: 2px;
  min-width: 17rem;
  padding: var(--s2);
  border-radius: var(--r-4);
  background:
    var(--grain),
    linear-gradient(180deg, rgb(255 255 255 / 0.09), rgb(255 255 255 / 0.03) 42%, rgb(255 255 255 / 0.01)),
    rgb(20 16 13 / 0.95);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  font-size: 0.9375rem;
  font-weight: 400;
  transform-origin: top right;
}
.menu[open] .menu-panel {
  animation: menu-in 0.28s var(--ease) both;
}
.menu.is-closing .menu-panel {
  animation: menu-out 0.18s ease both;
}
@keyframes menu-in {
  from {
    opacity: 0;
    translate: 0 -6px;
    scale: 0.97;
  }
}
@keyframes menu-out {
  to {
    opacity: 0;
    translate: 0 -4px;
    scale: 0.98;
  }
}
.menu-head {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s1);
  padding: var(--s3) var(--s3) var(--s4);
  border-bottom: 1px solid var(--line);
}
.menu-who {
  display: grid;
  min-width: 0;
}
.menu-who b {
  overflow: hidden;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.menu-who small,
.menu-text small {
  display: block;
  font-size: 0.75rem;
  color: var(--text-3);
}
.menu-label {
  padding: var(--s2) var(--s3) var(--s1);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.menu-item {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 0.6rem var(--s3);
  border-radius: var(--r-2);
  color: var(--text-2);
  transition:
    color 0.2s ease,
    background 0.2s ease;
}
.menu-item > i:first-child {
  width: 1.1rem;
  font-size: 0.85rem;
  text-align: center;
  color: var(--text-3);
  transition: color 0.2s ease;
}
.menu-item:hover,
.menu-item:focus-visible {
  color: var(--text);
  background: rgb(255 255 255 / 0.06);
}
.menu-item:hover > i:first-child {
  color: var(--orange-text);
}
.menu-text {
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}
.menu-ext {
  font-size: 0.65rem;
  opacity: 0.5;
}
.menu-out:hover {
  color: #fca5a5;
}
.menu-out:hover > i:first-child {
  color: #fca5a5;
}
.menu-item.is-on {
  color: var(--text);
}
.menu-check {
  font-size: 0.75rem;
  color: var(--orange-text);
}
.menu-currency .menu-panel {
  min-width: 17rem;
  max-height: calc(100vh - 7rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Viele Währungen: zwei Spalten, die Überschrift über beide */
.menu-currency .menu-panel.menu-cols {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 31rem;
}
.menu-cols .menu-label {
  grid-column: 1 / -1;
}
.menu-cols .menu-item {
  font-size: 0.875rem;
}
@media (max-width: 639px) {
  .menu-currency .menu-panel.menu-cols {
    width: auto;
  }
}
/* Zeichen der Währung als kleine Kachel vor dem Namen, das Kürzel rechts daneben */
.cur-tile {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  flex: none;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: rgb(255 255 255 / 0.04);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-2);
  transition:
    color 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}
.menu-item:hover .cur-tile,
.menu-item:focus-visible .cur-tile {
  color: var(--text);
  border-color: var(--line-2);
}
.menu-item.is-on .cur-tile {
  color: var(--orange-text);
  border-color: rgb(255 106 43 / 0.45);
  background: rgb(255 106 43 / 0.12);
}
.cur-code {
  font-family: "Esse Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  color: var(--text-3);
}
.menu-item.is-on .cur-code {
  color: var(--orange-text);
}
.cur-sym {
  font-weight: 500;
}
/* Anfangsbuchstabe des Namens als kleines Abzeichen */
.avatar {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  border-radius: var(--r-2);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink);
  background: linear-gradient(180deg, #ff8a4a, #ff4d00);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.35),
    0 4px 12px -4px rgb(255 77 0 / 0.6);
}
.avatar-lg {
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1rem;
}
.avatar i {
  font-size: 0.7rem;
}
.avatar-lg i {
  font-size: 1.05rem;
}
@media (max-width: 639px) {
  .menu-panel {
    position: fixed;
    top: calc(var(--toast-top, 4.5rem) + 0.25rem);
    left: 1rem;
    right: 1rem;
    min-width: 0;
  }
}
.basket-pill {
  position: relative;
}
.basket-count {
  position: absolute;
  top: -0.3rem;
  right: -0.3rem;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.3rem;
  background: linear-gradient(180deg, #ff6418, #ff4d00);
  color: var(--ink);
  font-size: 0.7rem;
  line-height: 1.25rem;
  text-align: center;
  box-shadow: 0 2px 8px -2px rgb(255 77 0 / 0.8);
}
@media (max-width: 639px) {
  .hide-sm,
  .brand-rule,
  .brand-name {
    display: none;
  }
  .bar-nav {
    gap: var(--s4);
  }
}

/* Der Umriss des Ambosses hinter dem Seitenkopf, blass und nach unten ausgeblendet, mit einem langsam wandernden orangen Licht */
.backdrop {
  position: absolute;
  inset: 0 0 auto;
  z-index: -1;
  height: 48rem;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 92%);
  mask-image: linear-gradient(to bottom, #000 30%, transparent 92%);
}
.backdrop-glow {
  position: absolute;
  top: -12rem;
  right: -12rem;
  width: 56rem;
  height: 44rem;
  background: radial-gradient(closest-side, rgb(255 77 0 / 0.11), transparent);
}
.backdrop-mark {
  position: absolute;
  top: var(--s7);
  left: 50%;
  width: min(80rem, 170vw);
  aspect-ratio: 702 / 410;
  transform: translateX(-8%);
  animation: brand-in 1.8s var(--ease) both;
}
.backdrop-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: rgb(243 235 228 / 0.08);
  stroke-width: 1.5px;
  stroke-linejoin: round;
}
.backdrop-line use {
  vector-effect: non-scaling-stroke;
}
.backdrop-light {
  stroke: rgb(255 106 43 / 0.6);
  -webkit-mask-image: linear-gradient(110deg, transparent 38%, #000 50%, transparent 62%);
  mask-image: linear-gradient(110deg, transparent 38%, #000 50%, transparent 62%);
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: brand-sweep 16s ease-in-out infinite alternate;
}
@keyframes brand-in {
  from {
    opacity: 0;
    transform: translateX(-6%) scale(0.98);
  }
}
@keyframes brand-sweep {
  from {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
  to {
    -webkit-mask-position: 0% 0;
    mask-position: 0% 0;
  }
}

/* Kategorien als Leiste aus Glas unter dem Kopf; zu viele für die Breite scrollen seitlich */
.section-bar {
  position: relative;
  isolation: isolate;
  display: flex;
  gap: var(--s1);
  width: max-content;
  max-width: 100%;
  margin: var(--s5) auto 0;
  padding: 0.3rem;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--glass);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.section-bar::-webkit-scrollbar {
  display: none;
}
.section-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex: none;
  padding: var(--s2) var(--s4);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-2);
  transition:
    color 0.2s ease,
    background 0.2s ease;
}
.section-link i {
  font-size: 0.8em;
  opacity: 0.7;
}
.section-link:hover {
  color: var(--text);
}
/* Die offene Kategorie: ein helleres, leicht erhabenes Stück Glas in der Leiste */
.section-link.is-active {
  color: var(--text);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.15), rgb(255 255 255 / 0.05));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.26),
    inset 0 0 0 1px rgb(255 255 255 / 0.07),
    0 4px 12px -6px rgb(0 0 0 / 0.8);
}
.section-link.is-active i {
  color: var(--orange-text);
  opacity: 1;
}

/* Aufklappmenü unter der Kategorienleiste: links die Kategorien, rechts die Pakete der Kategorie unter dem Zeiger */
.mega-host {
  position: relative;
  z-index: 35;
}
.mega {
  position: absolute;
  top: calc(100% + 0.6rem);
  left: 50%;
  width: max-content;
  max-width: calc(100% - 2rem);
  padding: var(--s5);
  border-radius: var(--r-4);
  /* Dichter als das übrige Glas, damit die Seite darunter nicht durch die Bilder scheint */
  background:
    var(--grain),
    linear-gradient(180deg, rgb(255 255 255 / 0.09), rgb(255 255 255 / 0.03) 42%, rgb(255 255 255 / 0.01)),
    rgb(20 16 13 / 0.94);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  opacity: 0;
  translate: 0 -6px;
  scale: 0.985;
  transform-origin: top center;
  transition:
    opacity 0.22s ease,
    translate 0.35s var(--ease),
    scale 0.35s var(--ease),
    left 0.35s var(--ease);
}
.mega.is-open {
  opacity: 1;
  translate: 0 0;
  scale: 1;
}
.mega.is-new > * {
  animation: card-fill 0.35s var(--ease) both;
}
/* Unsichtbare Brücke, damit der Zeiger auf dem Weg von der Leiste ins Menü nicht ins Leere fällt */
.mega::before {
  content: "";
  position: absolute;
  inset: -0.75rem 0 auto;
  height: 0.75rem;
}
.mega-n {
  font-family: "Esse Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  color: var(--text-3);
}
.mega-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  margin-bottom: var(--s4);
}
.mega-title {
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.mega-title .mega-n {
  margin-left: var(--s2);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 400;
}
.mega-all {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--orange-text);
}
.mega-all i {
  font-size: 0.75em;
  transition: translate 0.3s var(--ease);
}
.mega-all:hover i {
  translate: 3px 0;
}
.mega-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), 11.5rem);
  gap: var(--s4) var(--s3);
}
.mega-item {
  display: grid;
  align-content: start;
  gap: 0.35rem;
  min-width: 0;
}
.mega-img {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: radial-gradient(80% 90% at 50% 0%, rgb(255 77 0 / 0.14), transparent 70%), #0d0b0a;
  transition: border-color 0.3s ease;
}
.mega-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 0.6s var(--ease);
}
.mega-img svg {
  width: 40%;
  aspect-ratio: 700 / 408;
  fill: rgb(255 106 43 / 0.15);
}
.mega-item:hover .mega-img {
  border-color: rgb(255 106 43 / 0.35);
}
.mega-item:hover .mega-img img {
  scale: 1.05;
}
.mega-name {
  margin-top: 0.15rem;
  overflow: hidden;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mega-price {
  font-size: 0.8125rem;
  color: var(--text-3);
}
.mega-empty {
  min-width: 18rem;
  padding: var(--s3) 0 var(--s2);
  font-size: 0.9375rem;
  color: var(--text-3);
}
.mega-item.is-skel .mega-img {
  border: 0;
}
.mega-item.is-skel .skel-line {
  margin-top: 0.3rem;
}

/* Skelett: graue Flächen in der Form des Inhalts, über die ein Lichtstreif läuft, solange etwas lädt */
.skel {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r-1);
  background: rgb(255 255 255 / 0.05);
}
.skel::after {
  content: "";
  position: absolute;
  inset: 0;
  translate: -100% 0;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.08), transparent);
  animation: skel 1.2s ease-in-out infinite;
}
@keyframes skel {
  to {
    translate: 100% 0;
  }
}
.skel-line {
  width: 80%;
  height: 0.8rem;
}
.skel-short {
  width: 45%;
}
.skel-title {
  width: 60%;
  height: 1.6rem;
}
.skel-btn {
  width: 100%;
  height: 3rem;
  border-radius: var(--r-2);
}
@media (prefers-reduced-motion: reduce) {
  .skel::after {
    animation: none;
  }
}

.notice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: var(--s4);
  font-size: 0.875rem;
  color: var(--text-2);
}
.notice i {
  color: var(--orange-text);
}
.toast {
  margin-top: 1.25rem;
  padding: 0.875rem 1.25rem;
  border: 1px solid var(--line-2);
  background: var(--surface-1);
  box-shadow: var(--shadow-1);
  font-size: 0.9375rem;
}
.toast-danger,
.toast-error {
  border-color: rgb(248 113 113 / 0.35);
  color: #fecaca;
}
.toast-success {
  border-color: rgb(134 239 172 / 0.35);
}

/* Inhalt und Seitenleiste. Die Seitenleiste gibt es nur auf Start- und Kategorieseiten; Paket, Warenkorb und
   Anmeldung haben die ganze Breite, damit dort nichts vom einen Ding ablenkt. */
.main {
  display: grid;
  gap: var(--s7);
  padding-top: var(--s7);
  padding-bottom: var(--s9);
}
@media (min-width: 1024px) {
  .main:has(.sidebar) {
    grid-template-columns: minmax(0, 1fr) 19rem;
    gap: var(--s7);
  }
}
.content {
  min-width: 0;
}

.hero {
  max-width: 56rem;
  margin: var(--s7) auto var(--s8);
  text-align: center;
}
.hero + .main {
  padding-top: 0;
}
.hero-text {
  max-width: 52ch;
  margin: var(--s5) auto 0;
}
/* Startseite mit Zeichnung: links Überschrift und Text, rechts das Logo als Linienzeichnung mit wechselnden Stärken */
.hero-split {
  display: grid;
  align-items: center;
  gap: var(--s6) var(--s8);
  max-width: 88rem;
  text-align: left;
}
@media (min-width: 960px) {
  .hero-split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
}
.hero-split .hero-text {
  margin-left: 0;
}
/* Der Amboss im Hintergrund wäre neben der Zeichnung doppelt */
.page-index:has(.hero-split) .backdrop-mark {
  display: none;
}
.hero-side {
  display: grid;
  justify-items: center;
  gap: var(--s4);
  width: 100%;
  max-width: 34rem;
  margin-inline: auto;
}
.hero-art {
  width: 100%;
  margin: 0;
  aspect-ratio: 820 / 560;
}
.hero-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 22px rgb(255 77 0 / 0.18));
}
.hero-grid {
  color: rgb(255 255 255 / 0.05);
}
/* Vier Stufen (data-stage): 0 Linie mit Ecken, 1 gefüllt, 2 Farbe wählen (Auswahlrahmen, Farbleiste, der Zeiger klickt
   Orange und die Farbe läuft vom Klick aus ins Logo), 3 die fertigen Kacheln (App-Symbol, Kachel, Favicon). Die Ebenen
   liegen übereinander und blenden weich über; in Stufe 0 zeichnet sich die Linie neu. */
.hero-grid,
.hero-guides,
.hero-fill,
.hero-paint,
.hero-line,
.hero-nodes,
.hero-select,
.hero-swatches {
  transition:
    opacity 0.9s var(--ease),
    stroke 0.9s ease;
}
.hero-box {
  fill: none;
  stroke: rgb(255 106 43 / 0.35);
  stroke-width: 1.5;
  stroke-dasharray: 6 7;
  vector-effect: non-scaling-stroke;
  animation: hero-show 0.6s ease 0.1s both;
}
.hero-dim {
  stroke: rgb(255 106 43 / 0.55);
  stroke-width: 1.5;
  fill: none;
  vector-effect: non-scaling-stroke;
  animation: hero-show 0.6s ease 0.2s both;
}
.hero-dim text {
  fill: var(--orange-text);
  stroke: none;
  font-family: "Esse Mono", ui-monospace, monospace;
  font-size: 18px;
  text-anchor: middle;
  letter-spacing: 0.04em;
}
.hero-fill {
  fill: rgb(255 77 0 / 0.22);
  opacity: 0;
}
.hero-paint {
  fill: #ff5a12;
  opacity: 0;
}
.hero-line {
  fill: none;
  stroke: #ff8a4a;
  stroke-width: 2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.is-drawing .hero-line {
  stroke-dashoffset: 1;
  animation: hero-draw 2.8s cubic-bezier(0.45, 0, 0.2, 1) 0.35s forwards;
}
.hero-node {
  fill: var(--bg);
  stroke: #ff8a4a;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.is-drawing .hero-node {
  opacity: 0;
  animation: hero-show 0.35s ease forwards;
  animation-delay: calc(0.35s + var(--at) * 2.8s);
}
.hero-mark {
  transform-box: fill-box;
  transform-origin: center;
  transition:
    opacity 0.5s ease,
    transform 0.8s var(--ease);
}
.hero-select,
.hero-swatches,
.hero-cursor {
  opacity: 0;
}
.hero-select-box {
  fill: none;
  stroke: #ff8a4a;
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}
.hero-handle {
  fill: var(--text);
  stroke: #ff8a4a;
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}
.hero-swatches-bg {
  fill: rgb(28 23 19 / 0.95);
  stroke: rgb(255 255 255 / 0.12);
}
.hero-swatch {
  stroke: rgb(255 255 255 / 0.2);
  stroke-width: 1;
}
.hero-swatch-ring {
  fill: none;
  stroke: var(--text);
  stroke-width: 2;
  opacity: 0;
}
.hero-cursor {
  transform-box: fill-box;
  transform-origin: top left;
}
.hero-cursor path {
  fill: var(--text);
  stroke: var(--bg);
  stroke-width: 1.5;
}
.hero-paintclip {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
}
.hero-icons > g {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.85) translateY(12px);
  transition:
    opacity 0.5s ease,
    transform 0.7s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.hero-icons text {
  fill: rgb(243 235 228 / 0.55);
  font-family: "Esse Mono", ui-monospace, monospace;
  font-size: 15px;
  text-anchor: middle;
  letter-spacing: 0.04em;
}
/* Stufe 1: gefüllt */
.hero-svg[data-stage="1"] .hero-fill {
  opacity: 1;
}
.hero-svg[data-stage="1"] .hero-nodes {
  opacity: 0.5;
}
/* Stufe 2: Farbe wählen */
.hero-svg[data-stage="2"] .hero-select,
.hero-svg[data-stage="2"] .hero-swatches,
.hero-svg[data-stage="2"] .hero-paint {
  opacity: 1;
}
.hero-svg[data-stage="2"] .hero-fill {
  opacity: 1;
}
.hero-svg[data-stage="2"] .hero-nodes {
  opacity: 0;
}
.hero-svg[data-stage="2"] .hero-line {
  stroke: #ffe6c2;
  opacity: 0.8;
}
.hero-svg[data-stage="2"] .hero-cursor {
  animation:
    hero-point 1.5s cubic-bezier(0.45, 0, 0.2, 1) 0.2s both,
    hero-click 0.25s ease 1.5s;
}
.hero-svg[data-stage="2"] .hero-swatch-ring {
  animation: hero-show 0.2s ease 1.55s forwards;
}
.hero-svg[data-stage="2"] .hero-paintclip {
  animation: hero-paint 1s cubic-bezier(0.45, 0, 0.2, 1) 1.6s forwards;
}
/* Stufe 3: das orange Logo wird zu den fertigen Kacheln */
.hero-svg[data-stage="3"] .hero-mark {
  opacity: 0;
  transform: scale(0.6);
}
.hero-svg[data-stage="3"] .hero-paint {
  opacity: 1;
}
.hero-svg[data-stage="3"] .hero-paintclip {
  transform: none;
}
.hero-svg[data-stage="3"] .hero-guides {
  opacity: 0;
}
.hero-svg[data-stage="3"] .hero-grid {
  opacity: 0.3;
}
.hero-svg[data-stage="3"] .hero-icons > g {
  opacity: 1;
  transform: none;
}
.hero-svg[data-stage="3"] .hero-icons > g:nth-child(1) {
  transition-delay: 0.5s;
}
.hero-svg[data-stage="3"] .hero-icons > g:nth-child(2) {
  transition-delay: 0.7s;
}
.hero-svg[data-stage="3"] .hero-icons > g:nth-child(3) {
  transition-delay: 0.9s;
}
@keyframes hero-point {
  0% {
    opacity: 0;
    transform: translate(220px, 120px);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes hero-click {
  50% {
    transform: scale(0.85);
  }
}
@keyframes hero-paint {
  to {
    transform: none;
  }
}
@keyframes hero-show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes hero-draw {
  to {
    stroke-dashoffset: 0;
  }
}
/* Stärken: oben ein Strich je Stärke, der sich füllt, darunter Titel und Text */
.hero-ticker {
  display: grid;
  gap: var(--s4);
  width: min(100%, 26rem);
  text-align: center;
}
.hero-bars {
  display: flex;
  gap: var(--s2);
}
.hero-bar {
  flex: 1;
  height: 1.25rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.hero-bar span {
  position: relative;
  display: block;
  height: 3px;
  overflow: hidden;
  border-radius: 2px;
  background: rgb(255 255 255 / 0.12);
}
.hero-bar span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #ff8a4a;
  transform: scaleX(0);
  transform-origin: left;
}
.hero-bar.is-done span::after {
  transform: none;
}
.hero-bar.is-on span {
  animation: hero-tick 5s linear forwards;
}
.hero-bar.is-on span::after {
  animation: hero-bar 5s linear forwards;
}
/* Der Strich selbst bekommt eine leere Animation gleicher Länge, deren Ende das Skript hört */
@keyframes hero-tick {
  to {
    opacity: 1;
  }
}
@keyframes hero-bar {
  to {
    transform: none;
  }
}
.hero-ticker:hover .hero-bar.is-on span,
.hero-ticker:hover .hero-bar.is-on span::after,
.hero-side:hover .hero-bar.is-on span,
.hero-side:hover .hero-bar.is-on span::after {
  animation-play-state: paused;
}
.hero-caption {
  display: grid;
  gap: 0.2rem;
  min-height: 3.2rem;
}
.hero-caption b {
  font-weight: 500;
  color: var(--text);
}
.hero-caption span {
  font-size: 0.9375rem;
  color: var(--text-2);
}
.hero-caption.is-new {
  animation: card-fill 0.5s var(--ease) both;
}
/* Ohne JavaScript: die Stärken als schlichte Liste */
.hero-points {
  display: grid;
  gap: var(--s2);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--text-2);
}
.hero-points span::before {
  content: ": ";
}
@media (max-width: 959px) {
  .hero-split {
    text-align: center;
  }
  .hero-split .hero-text {
    margin-inline: auto;
  }
  .hero-side {
    max-width: 26rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-line {
    stroke-dashoffset: 0;
    animation: none;
  }
  .hero-node,
  .hero-box,
  .hero-dim {
    opacity: 1;
    animation: none;
  }
  .hero-bar.is-on span::after {
    transform: none;
  }
  /* Ohne Bewegung steht in Stufe 2 gleich das Ergebnis: Orange gewählt, das Logo gefärbt */
  .hero-svg[data-stage="2"] .hero-paintclip {
    transform: none;
  }
  .hero-svg[data-stage="2"] .hero-swatch-ring,
  .hero-svg[data-stage="2"] .hero-cursor {
    opacity: 1;
  }
}
.page-head {
  margin-bottom: var(--s7);
}
.page-text {
  max-width: 62ch;
  margin-top: 1.25rem;
}
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) 0.6rem;
  margin-bottom: var(--s6);
  font-size: 0.875rem;
  color: var(--text-3);
}
.crumbs > i {
  font-size: 0.6rem;
  opacity: 0.6;
}
.crumbs a {
  transition: color 0.2s ease;
}
.crumbs a:hover {
  color: var(--text);
}
/* Das offene Paket als helles Stück Glas am Ende des Pfads */
.crumbs [aria-current] {
  padding: 0.2rem 0.55rem;
  border-radius: var(--r-1);
  font-weight: 500;
  color: var(--text);
  background: rgb(255 255 255 / 0.07);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.1),
    inset 0 0 0 1px rgb(255 255 255 / 0.04);
}
/* Die nachgereichte Kategorie: ihre Teile stehen in der Reihe wie die übrigen */
.crumb-slot:not([hidden]) {
  display: contents;
}
.crumb-slot > i {
  font-size: 0.6rem;
  opacity: 0.6;
}
.crumb-slot.is-new > * {
  animation: card-fill 0.5s var(--ease) both;
}

/* Flächen */
.card {
  position: relative;
  border: 1px solid var(--line);
  background: var(--surface-1);
  box-shadow: var(--shadow-1);
}
.surface-1 {
  background: var(--surface-1);
  box-shadow: var(--shadow-1);
}
.surface-2 {
  position: relative;
  isolation: isolate;
  border: 0;
  background: var(--surface-2);
  box-shadow: var(--shadow-2);
}
/* Karten als Link heben sich, der Rand wird warm und unten leuchtet eine orange Linie wie auf der Website */
.card-link {
  transition:
    transform 0.5s var(--ease),
    border-color 0.3s ease,
    box-shadow 0.5s var(--ease);
}
.card-link::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #ff6a2b, transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.card-link:hover {
  transform: translateY(-3px);
  border-color: rgb(255 106 43 / 0.3);
  box-shadow: var(--shadow-lift);
}
.card-link:hover::after,
.card-link:focus-within::after {
  opacity: 1;
}

/* Kategorien als Bento: die erste Kategorie groß mit ihren Paketbildern, die übrigen kleiner daneben und darunter.
   Sechs Spalten; ab der vierten Kategorie Reihen zu dritt, die letzte Reihe teilt sich die ganze Breite. */
.bento {
  display: grid;
  gap: var(--s4);
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: minmax(9.5rem, auto);
}
.bento-tile {
  display: flex;
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
}
.bento-big {
  grid-column: span 4;
  grid-row: span 2;
  min-height: 21rem;
}
.bento-full {
  grid-column: 1 / -1;
  min-height: 18rem;
}
.bento-small,
.bento-span-2 {
  grid-column: span 2;
}
.bento-tall {
  grid-column: span 2;
  grid-row: span 2;
}
.bento-span-3 {
  grid-column: span 3;
}
.bento-span-6 {
  grid-column: 1 / -1;
}
@media (max-width: 760px) {
  .bento {
    grid-template-columns: minmax(0, 1fr);
  }
  .bento-tile {
    grid-column: auto !important;
    grid-row: auto !important;
  }
  .bento-big,
  .bento-full {
    min-height: 17rem;
  }
}
/* Die Pakete der Kategorie liegen als schräge Karten übereinander, bis zu drei, und fächern beim Drüberfahren auf. In
   der großen Kachel rechts mittig vor dunklem Verlauf, in den kleinen oben rechts. Ohne Bild steht das Logo auf der Karte. */
.bento-art {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.bento-big .bento-art,
.bento-full .bento-art {
  background: radial-gradient(70% 80% at 75% 50%, rgb(255 77 0 / 0.16), transparent 70%), #0d0b0a;
}
.bento-big .bento-art::after,
.bento-full .bento-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(13 11 10 / 0.96) 30%, transparent 70%);
}
.stack {
  position: absolute;
  top: 50%;
  right: 7%;
  width: 46%;
  aspect-ratio: 16 / 10;
  translate: 0 -50%;
}
.bento-full .stack {
  right: 10%;
  width: 34%;
}
/* In den kleinen Kacheln bleibt der Stapel klein genug, dass er über dem Pfeil unten rechts endet */
.bento-tile:not(.bento-big):not(.bento-full) .stack {
  top: 1.1rem;
  right: 1.4rem;
  width: min(32%, 7rem);
  translate: none;
}
.stack-card {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: var(--r-2);
  background: #15110e;
  box-shadow: 0 20px 40px -16px rgb(0 0 0 / 0.95);
  transition: transform 0.7s var(--ease);
}
.stack-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.stack-card svg {
  width: 40%;
  aspect-ratio: 700 / 408;
  fill: rgb(255 106 43 / 0.18);
}
.stack-card[data-pos="0"] {
  z-index: 3;
}
.stack-card[data-pos="1"] {
  z-index: 2;
  transform: rotate(-7deg) translate(-6%, 3%);
}
.stack-card[data-pos="2"] {
  z-index: 1;
  transform: rotate(5deg) translate(5%, 2%);
}
.bento-tile:hover .stack-card[data-pos="0"] {
  transform: translateY(-4%) scale(1.03);
}
.bento-tile:hover .stack-card[data-pos="1"] {
  transform: rotate(-14deg) translate(-26%, 6%);
}
.bento-tile:hover .stack-card[data-pos="2"] {
  transform: rotate(10deg) translate(24%, 4%);
}
/* Kleine Kacheln fächern weniger weit, damit die Karten in der Kachel bleiben */
.bento-tile:not(.bento-big):not(.bento-full):hover .stack-card[data-pos="1"] {
  transform: rotate(-12deg) translate(-16%, 5%);
}
.bento-tile:not(.bento-big):not(.bento-full):hover .stack-card[data-pos="2"] {
  transform: rotate(9deg) translate(10%, 4%);
}
/* Nur ein Paket: sein Bild füllt die ganze Kachel wie in einer Vitrine, der Text steht auf einem dunklen Verlauf, beim
   Drüberfahren zoomt das Bild langsam heran */
.bento-tile.is-single .stack {
  inset: 0 !important;
  width: auto !important;
  aspect-ratio: auto;
  translate: none !important;
}
.bento-tile.is-single .stack-card {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none !important;
  background: #0d0b0a;
}
.bento-tile.is-single .stack-card:not([data-pos="0"]) {
  display: none;
}
.bento-tile.is-single .stack-card img {
  filter: saturate(0.85) brightness(0.8);
  transition:
    scale 1.2s var(--ease),
    filter 0.6s ease;
}
.bento-tile.is-single:hover .stack-card img {
  scale: 1.06;
  filter: saturate(1) brightness(0.95);
}
.bento-tile.is-single .stack-card svg {
  width: 30%;
  fill: rgb(255 106 43 / 0.1);
}
.bento-tile.is-single .bento-art::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  background:
    linear-gradient(90deg, rgb(13 11 10 / 0.8) 10%, transparent 60%),
    linear-gradient(0deg, rgb(13 11 10 / 0.95) 5%, rgb(13 11 10 / 0.3) 55%, transparent);
}
.bento-tile.is-single .bento-body {
  padding-right: 4.5rem;
}
.bento-big.is-single .bento-body,
.bento-full.is-single .bento-body {
  padding-top: var(--s6);
}
/* Solange die Kategorie lädt, schimmern die Karten */
.bento-tile.is-loading .stack-card {
  background: linear-gradient(90deg, rgb(255 255 255 / 0.03), rgb(255 255 255 / 0.08), rgb(255 255 255 / 0.03)) 0 0 / 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
.bento-tile.is-loading .stack-card svg {
  visibility: hidden;
}
@media (max-width: 760px) {
  .bento-big .stack,
  .bento-full .stack {
    top: 1.25rem;
    right: 1.25rem;
    width: 44%;
    translate: none;
  }
  .bento-big .bento-body,
  .bento-full .bento-body {
    padding-top: 9rem;
  }
  .bento-tile:not(.bento-big):not(.bento-full) {
    min-height: 10.5rem;
  }
  .bento-tile:not(.bento-big):not(.bento-full) .stack {
    width: 6rem;
  }
}
.bento-body {
  position: relative;
  display: grid;
  align-content: end;
  justify-items: start;
  gap: var(--s2);
  width: 100%;
  padding: var(--s5) 4.5rem var(--s5) var(--s5);
}
.bento-tile:not(.bento-big):not(.bento-full) .bento-body {
  padding-right: calc(min(32%, 7rem) + 2.5rem);
}
.bento-big .bento-body,
.bento-full .bento-body {
  max-width: 26rem;
  padding: var(--s6);
}
.bento-big .bento-icon,
.bento-full .bento-icon {
  margin-bottom: var(--s2);
}
/* In den kleinen Kacheln nur das Zeichen, ohne Kästchen */
.bento-tile:not(.bento-big):not(.bento-full) .bento-icon {
  display: block;
  width: auto;
  height: auto;
  margin-bottom: var(--s3);
  border: 0;
  background: none;
  box-shadow: none;
  font-size: 0.95rem;
}
.bento-name {
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.bento-big .bento-name,
.bento-full .bento-name {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  letter-spacing: -0.04em;
  line-height: 1;
}
.bento-short {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--text-2);
  line-height: 1.5;
  text-wrap: pretty;
}
.bento-short[hidden],
.bento-small .bento-short,
.bento-span-2 .bento-short {
  display: none;
}
.bento-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s4);
}
.bento-big .bento-foot,
.bento-full .bento-foot {
  margin-top: var(--s3);
}
.bento-tile .card-go {
  position: absolute;
  right: var(--s5);
  bottom: var(--s5);
}
.bento-tile .card-meta {
  font-size: 0.8125rem;
}
.card-meta {
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  align-items: center;
  gap: var(--s1) var(--s2);
  font-size: 0.875rem;
  color: var(--text-3);
}
.card-meta i {
  color: var(--orange-text);
  font-size: 0.85em;
}
.card-meta b {
  font-weight: 500;
  color: var(--text-2);
}
.card-meta .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}
/* Solange die Kategorieseite lädt, steht dort ein schimmernder Platzhalter statt "Pakete ansehen" */
.bento-tile.is-loading .card-meta {
  width: 9rem;
  height: 1.25rem;
  border-radius: var(--r-1);
  color: transparent;
  background: linear-gradient(90deg, rgb(255 255 255 / 0.04), rgb(255 255 255 / 0.09), rgb(255 255 255 / 0.04)) 0 0 / 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
.bento-tile.is-loading .card-meta b {
  visibility: hidden;
}
@keyframes shimmer {
  to {
    background-position: -200% 0;
  }
}
.bento-tile .is-new,
[data-slot="badge"].is-new {
  animation: card-fill 0.6s var(--ease) both;
}
@keyframes card-fill {
  from {
    opacity: 0;
    translate: 0 4px;
  }
}
@media (max-width: 519px) {
  .card-meta .meta-free,
  .card-meta .meta-free + .dot,
  .card-meta .dot:has(+ .meta-free) {
    display: none;
  }
}
.card-icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid rgb(255 106 43 / 0.3);
  background: radial-gradient(circle at 50% 0%, rgb(255 77 0 / 0.28), rgb(255 77 0 / 0.05));
  box-shadow:
    inset 0 1px 0 rgb(255 210 180 / 0.25),
    0 8px 24px -12px rgb(255 77 0 / 0.6);
  color: var(--orange-text);
  font-size: 1.15rem;
}
.card-go {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--line-2);
  color: var(--text-2);
  transition:
    color 0.3s ease,
    border-color 0.3s ease,
    background 0.3s ease,
    transform 0.5s var(--ease);
}
.card-link:hover .card-go {
  color: var(--ink);
  border-color: transparent;
  background: linear-gradient(180deg, #ff6418, #ff4d00);
  transform: translateX(2px);
}

/* Pakete im Raster */
.packages {
  display: grid;
  gap: var(--s5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr));
}
.package-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.package-media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: radial-gradient(80% 90% at 50% 0%, rgb(255 77 0 / 0.16), transparent 70%), #0d0b0a;
}
/* Unten blendet das Bild in die Karte über, statt an einer Linie zu enden */
.package-media::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 40%;
  background: linear-gradient(to top, rgb(16 14 12 / 0.9), transparent);
  pointer-events: none;
}
.package-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.package-card:hover .package-media img {
  transform: scale(1.04);
}
.package-placeholder {
  width: 42%;
  aspect-ratio: 702 / 410;
  fill: rgb(243 235 228 / 0.1);
}
.package-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s4) var(--s5) var(--s5);
}
.package-name {
  margin-top: var(--s1);
  font-size: 1.1875rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.package-name a::before {
  /* Die ganze Karte führt zum Paket, Knöpfe darin bleiben eigene Ziele */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}
.package-body .btn,
.package-body .tags {
  position: relative;
  z-index: 1;
}
/* Auf Karten bleiben Tags in einer Zeile und laufen rechts weich aus */
.package-body .tags {
  flex-wrap: nowrap;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
  mask-image: linear-gradient(90deg, #000 85%, transparent);
}
/* Der alte Preis steht auf Karten über dem neuen, damit Preis und Knopf in eine Zeile passen */
.package-foot .price-old {
  flex-basis: 100%;
  order: -1;
  margin: 0 0 -0.15rem;
}
.package-short {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.package-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin-top: auto;
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
}
.package-body > :nth-last-child(2):not(.package-name) {
  margin-bottom: var(--s3);
}

/* Preise: Euro als große Zahl mit kleinen Cent, die Währung leise dahinter. Kostenlos und frei wählbar als Pille. */
.price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.3rem;
  font-variant-numeric: tabular-nums;
}
.price-amount {
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--text);
}
.price-cents {
  font-size: 0.7em;
  letter-spacing: 0;
}
.price-cur {
  font-size: 0.875rem;
  color: var(--text-3);
}
.price-from,
.price-note {
  font-size: 0.8125rem;
  color: var(--text-3);
}
.price-old {
  margin-left: var(--s1);
  font-size: 0.8125rem;
  color: var(--text-3);
  text-decoration-color: rgb(248 113 113 / 0.8);
}
/* "Kostenlos" und "Betrag frei wählbar": grün getönter Chip wie die Tags; in der Kaufbox steht "Kostenlos" groß wie ein
   Preis, mit dem Geschenk in einem grünen Kästchen davor */
.price-free {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.6rem;
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  color: #a7f3c4;
  background: linear-gradient(180deg, rgb(134 239 172 / 0.16), rgb(134 239 172 / 0.06));
  box-shadow:
    inset 0 0 0 1px rgb(134 239 172 / 0.26),
    inset 0 1px 0 rgb(220 255 230 / 0.14);
}
.price-free i {
  font-size: 0.75em;
}
.price-lg {
  gap: var(--s1) 0.4rem;
}
.price-lg .price-amount {
  font-size: 3.25rem;
  line-height: 1;
  letter-spacing: -0.045em;
}
.price-lg .price-cur {
  font-size: 1.125rem;
}
.price-lg .price-free:not(.price-custom) {
  gap: var(--s3);
  padding: 0;
  font-size: 2.5rem;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--text);
  background: none;
  box-shadow: none;
}
.price-lg .price-free:not(.price-custom) i {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--r-2);
  font-size: 1.05rem;
  letter-spacing: 0;
  color: #a7f3c4;
  background: linear-gradient(180deg, rgb(134 239 172 / 0.2), rgb(134 239 172 / 0.06));
  box-shadow:
    inset 0 0 0 1px rgb(134 239 172 / 0.3),
    inset 0 1px 0 rgb(220 255 230 / 0.2),
    0 8px 22px -10px rgb(134 239 172 / 0.6);
}
.price-lg .price-custom {
  padding: var(--s2) var(--s3);
  font-size: 1rem;
}
.price-lg .price-note {
  flex-basis: 100%;
  margin-top: var(--s2);
  font-size: 0.875rem;
}
.price-deal {
  display: flex;
  flex-basis: 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s3);
}
.price-save {
  font-size: 0.875rem;
  color: var(--green);
}
.countdown {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  color: var(--orange-text);
}

/* Tags, Schilder und die kleinen Hinweise auf dem Bild einer Karte: ruhige Chips in normaler Schrift. Tags neutral,
   Schilder aus der Steuerzeile ("Neu", "Beliebt") orange getönt, Rabatt orange gefüllt, "Kostenlos" grün getönt. */
.badge,
.ribbon,
.tag,
.flag {
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}
/* Rabatt: orange gefüllt */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.5rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: linear-gradient(180deg, #ff7a33, #ff4d00);
  box-shadow:
    inset 0 1px 0 rgb(255 220 190 / 0.5),
    0 4px 12px -4px rgb(255 77 0 / 0.6);
}
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
}
.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.6rem;
  color: var(--text-2);
  background: rgb(255 255 255 / 0.06);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06);
}
.tag i {
  display: none;
}
/* Schild aus der Steuerzeile: orange getöntes Glas, vorn ein kleines Zeichen */
.ribbon {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.6rem 0.3rem 0.5rem;
  color: #ffc29a;
  background:
    linear-gradient(180deg, rgb(255 106 43 / 0.26), rgb(255 77 0 / 0.1)),
    rgb(24 16 11 / 0.72);
  box-shadow:
    inset 0 0 0 1px rgb(255 106 43 / 0.38),
    inset 0 1px 0 rgb(255 210 180 / 0.22),
    0 6px 16px -8px rgb(255 77 0 / 0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.ribbon i {
  font-size: 0.65rem;
  color: #ff8a4a;
}
/* "Neu": ein glimmender Punkt, um den ab und zu ein Ring aufgeht */
.ribbon-dot {
  position: relative;
  width: 0.4rem;
  height: 0.4rem;
  flex: none;
  border-radius: 50%;
  background: #ff8a4a;
  box-shadow: 0 0 8px rgb(255 106 43 / 0.9);
}
.ribbon-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid #ff8a4a;
  animation: ribbon-ping 2.4s var(--ease) infinite;
}
@keyframes ribbon-ping {
  0% {
    opacity: 0.9;
    scale: 1;
  }
  60%,
  100% {
    opacity: 0;
    scale: 2.8;
  }
}
.media-top {
  position: absolute;
  z-index: 1;
  top: var(--s3);
  left: var(--s3);
  right: var(--s3);
  display: flex;
  justify-content: space-between;
  gap: var(--s2);
  pointer-events: none;
}
.media-top .badge {
  margin-left: auto;
}
.flags {
  position: absolute;
  z-index: 1;
  left: var(--s3);
  bottom: var(--s3);
  display: flex;
  gap: 0.35rem;
}
.flag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.55rem;
  background: var(--glass);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.1),
    inset 0 1px 0 rgb(255 255 255 / 0.18);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: var(--text);
}
[data-slot][hidden],
.gallery-thumbs[hidden] {
  display: none !important;
}

/* Liste: Kategorien mit Darstellung "Liste" */
.rows {
  margin: 0;
  padding: var(--s2);
  list-style: none;
  border: 1px solid var(--line);
  background: var(--surface-1);
  box-shadow: var(--shadow-1);
}
.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3) 1.25rem;
  padding: var(--s4) var(--s4);
  transition: background 0.2s ease;
}
.row + .row {
  border-top: 1px solid var(--line);
}
.row:hover {
  background: rgb(255 255 255 / 0.025);
}
.row-main {
  display: flex;
  flex: 1 1 16rem;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s3);
}
.row-name {
  font-size: 1.0625rem;
  font-weight: 500;
}
a.row-name:hover {
  color: var(--orange-text);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin: 0 0 var(--s6);
  padding: 0;
  list-style: none;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--line-2);
  font-size: 0.875rem;
  color: var(--text-2);
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}
.chip:hover {
  color: var(--text);
  border-color: rgb(255 255 255 / 0.25);
}
.chip.is-active {
  border-color: rgb(255 106 43 / 0.45);
  color: var(--text);
  background: rgb(255 77 0 / 0.08);
}
.chip a {
  color: var(--text-3);
}
.chip a:hover {
  color: var(--red);
}

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  padding: var(--s8) var(--s5);
  border: 1px dashed var(--line-2);
  background: radial-gradient(60% 80% at 50% 0%, rgb(255 255 255 / 0.03), transparent);
  color: var(--text-3);
  text-align: center;
}
.empty > i {
  font-size: 2rem;
  color: rgb(243 235 228 / 0.25);
}

/* Paketseite: Galerie links, Kaufbox rechts (bleibt beim Scrollen stehen), Beschreibung unter der Galerie */
.product {
  display: grid;
  gap: var(--s6);
}
@media (min-width: 960px) {
  .product {
    grid-template-columns: minmax(0, 1.15fr) minmax(23rem, 1fr);
    grid-template-areas:
      "gallery buy"
      "tech buy"
      "about buy";
    grid-template-rows: auto auto 1fr;
    align-items: start;
    column-gap: var(--s7);
    row-gap: var(--s4);
  }
  .product > .tech {
    grid-area: tech;
  }
  .product-about {
    margin-top: var(--s6);
  }
  .gallery {
    grid-area: gallery;
  }
  .buybox {
    grid-area: buy;
    position: sticky;
    top: 5.5rem;
  }
  .product-about {
    grid-area: about;
  }
}
.gallery {
  position: relative;
  display: grid;
  gap: var(--s3);
}
/* Ein warmes Licht hinter dem Bild, wie unter dem Dashboard auf der Website */
.gallery::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -2rem 12% auto;
  height: 45%;
  border-radius: 50%;
  background: rgb(255 77 0 / 0.22);
  filter: blur(60px);
}
.gallery-stage {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--line-2);
  background: radial-gradient(80% 90% at 50% 0%, rgb(255 77 0 / 0.16), transparent 70%), #0d0b0a;
  box-shadow:
    0 -1px 0 rgb(255 178 122 / 0.55),
    0 40px 80px -40px rgb(0 0 0 / 0.95);
}
.gallery-stage > img,
.gallery-zoom,
.gallery-zoom img,
.gallery-stage iframe,
.video-poster {
  width: 100%;
  height: 100%;
}
.gallery-stage img {
  object-fit: cover;
}
.gallery-stage iframe {
  border: 0;
}
.gallery-zoom {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
/* Galerie mit mehreren Bildern: alle Ebenen übereinander, die aktuelle blendet weich ein, mit einem kleinen Zug in
   Richtung des Wechsels. Die Striche oben zählen sieben Sekunden; beim Drüberfahren und während ein Video läuft halten sie an. */
.gallery-stage.has-slides .gallery-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.03) translateX(calc(var(--dir, 1) * 1.5%));
  transition:
    opacity 0.9s var(--ease),
    transform 1.4s var(--ease),
    visibility 0s linear 0.9s;
}
.gallery-stage.has-slides .gallery-slide.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 0.9s var(--ease),
    transform 1.4s var(--ease),
    visibility 0s;
}
.gallery-stage .slides-bar {
  top: var(--s3);
  left: var(--s4);
  right: var(--s4);
}
.gallery-stage .slides-bar .is-on b {
  animation-duration: 7s;
}
.gallery-stage:hover > .slides-bar .is-on b,
.gallery-stage.is-playing > .slides-bar .is-on b {
  animation-play-state: paused;
}
.gallery-stage.is-video > .slides-bar .is-on b {
  animation: none;
  transform: none;
}

/* Darunter mittig die Vorschaubilder als Stapel, zum Klicken und Ziehen */
.gallery-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.gallery-thumbs {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 6px 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.gallery-thumbs::-webkit-scrollbar {
  display: none;
}
.gallery-thumbs button {
  position: relative;
  flex: none;
  width: 5.5rem;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--line-2);
  background: #0d0b0a;
  box-shadow: 0 8px 18px -8px rgb(0 0 0 / 0.95);
  cursor: pointer;
  opacity: calc(1 - var(--away, 0) * 0.18);
  transform: scale(calc(1 - var(--away, 0) * 0.05));
  transition:
    margin 0.45s var(--ease),
    transform 0.45s var(--ease),
    opacity 0.3s ease,
    border-color 0.2s ease,
    box-shadow 0.3s ease;
}
.gallery-thumbs button + button {
  margin-left: -2.4rem;
}
/* Beim Drüberfahren fächert der Stapel auf */
.gallery-thumbs:hover button + button,
.gallery-thumbs:focus-within button + button {
  margin-left: var(--s2);
}
.gallery-thumbs:hover button,
.gallery-thumbs:focus-within button {
  opacity: 0.7;
  transform: none;
}
.gallery-thumbs button:hover {
  opacity: 1;
  transform: translateY(-2px);
}
.gallery-thumbs button.is-active {
  opacity: 1;
  border-color: var(--orange);
  box-shadow:
    0 0 0 1px var(--orange),
    0 10px 24px -10px rgb(255 77 0 / 0.7);
  transform: translateY(-3px);
}
.gallery-thumbs:hover button.is-active,
.gallery-thumbs:focus-within button.is-active {
  opacity: 1;
  transform: translateY(-3px);
}
.gallery-thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Ziehen mit der Maus: kein Bild-Ziehen des Browsers, keine Textauswahl; passt nicht alles, laufen die Ränder weich aus */
.gallery-thumbs {
  -webkit-user-select: none;
  user-select: none;
}
.gallery-thumbs img {
  -webkit-user-drag: none;
  pointer-events: none;
}
.gallery-thumbs.is-dragging {
  cursor: grabbing;
}
.gallery-thumbs.is-dragging button {
  cursor: grabbing;
}
.gallery-thumbs.is-scrollable {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 1.25rem, #000 calc(100% - 1.25rem), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 1.25rem, #000 calc(100% - 1.25rem), transparent);
}
/* Pfeile im Bild, links und rechts mittig, als Glas. Mit Maus erscheinen sie beim Drüberfahren, am Handy stehen sie da. */
.gallery-arrow {
  position: absolute;
  z-index: 3;
  top: 50%;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--r-2);
  color: var(--text);
  background: var(--glass);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.18),
    0 6px 18px -6px rgb(0 0 0 / 0.8);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  translate: 0 -50%;
  cursor: pointer;
  transition:
    opacity 0.25s ease,
    translate 0.4s var(--ease),
    background 0.2s ease;
}
.gallery-arrow.is-prev {
  left: var(--s3);
}
.gallery-arrow.is-next {
  right: var(--s3);
}
.gallery-arrow:hover {
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0.06)),
    rgb(22 18 15 / 0.7);
}
.gallery-arrow i {
  font-size: 0.85rem;
  transition: translate 0.3s var(--ease);
}
.gallery-arrow.is-prev:hover i {
  translate: -2px 0;
}
.gallery-arrow.is-next:hover i {
  translate: 2px 0;
}
@media (hover: hover) and (pointer: fine) {
  .gallery-arrow {
    opacity: 0;
  }
  .gallery-arrow.is-prev {
    translate: 6px -50%;
  }
  .gallery-arrow.is-next {
    translate: -6px -50%;
  }
  .gallery-stage:hover .gallery-arrow,
  .gallery-stage:has(:focus-visible) .gallery-arrow {
    opacity: 1;
    translate: 0 -50%;
  }
}
/* Läuft ein Video, stören die Pfeile über dem Player */
.gallery-stage.is-playing .gallery-arrow {
  opacity: 0;
  pointer-events: none;
}
/* Zähler unten rechts im Bild, als kleines Glas */
.gallery-count {
  position: absolute;
  z-index: 3;
  right: var(--s3);
  bottom: var(--s3);
  padding: 0.25rem 0.55rem;
  border-radius: var(--r-2);
  font-family: "Esse Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background: var(--glass);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 4px 14px -6px rgb(0 0 0 / 0.8);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  pointer-events: none;
}
@media (max-width: 520px) {
  .gallery-thumbs button {
    width: 4.25rem;
  }
  .gallery-thumbs button + button {
    margin-left: -2rem;
  }
}
.thumb-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgb(0 0 0 / 0.4);
  color: #fff;
}

/* YouTube erst nach Klick: davor das Paketbild abgedunkelt, ein Knopf und der Hinweis auf YouTube */
.video-poster {
  position: relative;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: #0d0b0a center / cover no-repeat;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.video-poster::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, rgb(12 10 9 / 0.35), rgb(12 10 9 / 0.88));
}
.video-play {
  position: relative;
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  background: linear-gradient(180deg, #ff6418, #ff4d00);
  color: var(--ink);
  font-size: 1.5rem;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.28),
    0 0 0 10px rgb(255 77 0 / 0.12),
    0 12px 32px -10px rgb(255 77 0 / 0.75);
  transition:
    transform 0.4s var(--ease),
    box-shadow 0.4s var(--ease);
}
.video-play i {
  margin-left: 0.2rem;
}
.video-poster:hover .video-play {
  transform: scale(1.06);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.28),
    0 0 0 16px rgb(255 77 0 / 0.1),
    0 12px 32px -10px rgb(255 77 0 / 0.85);
}
.video-note {
  position: absolute;
  left: var(--s4);
  right: var(--s4);
  bottom: var(--s4);
  display: flex;
  justify-content: center;
  gap: var(--s2);
  font-size: 0.8125rem;
  color: var(--text-2);
}

/* Die Kaufbox: erhoben, mit Name, Preis und der einen Knopfreihe */
.buybox {
  display: grid;
  gap: var(--s5);
  padding: var(--s6);
}
.buybox > * {
  position: relative;
  z-index: 1;
}
.kicker[hidden] {
  display: none;
}
.kicker {
  margin-bottom: calc(var(--s2) * -1);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
}
.buybox-title {
  font-size: clamp(2.25rem, 3.6vw, 3.5rem);
}
.buybox-short {
  margin-top: calc(var(--s2) * -1);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--text-2);
  text-wrap: pretty;
}
.buybox .price-lg {
  padding: var(--s5) 0 0;
  border-top: 1px solid var(--line);
}
/* Kaufen, Dokumentation, GitHub und Discord in einer Reihe. Die Reihe richtet sich nach der Breite der Kaufbox:
   wird es eng, steht "Doku" statt "Dokumentation", erst ganz schmal bricht sie um. */
.buybox {
  container-type: inline-size;
}
.button-row {
  display: flex;
  gap: var(--s2);
}
.button-row .btn {
  flex: 0 1 auto;
  min-width: 0;
  padding: 0 1.1rem;
  overflow: hidden;
}
.button-row .btn-primary {
  flex: 1 0 auto;
  overflow: visible;
}
.l-short {
  display: none;
}
@container (max-width: 37rem) {
  .l-long {
    display: none;
  }
  .l-short {
    display: inline;
  }
}
@container (max-width: 27rem) {
  .button-row {
    flex-wrap: wrap;
  }
  .button-row .btn-primary {
    flex-basis: 100%;
  }
  .button-row .btn-secondary {
    flex: 1 1 0;
    padding: 0 var(--s2);
  }
}
/* Kaufbox: Kaufen breit oben, darunter GitHub, weitere Links und Discord nebeneinander, gleich breit */
.buybox .button-row {
  flex-wrap: wrap;
}
.buybox .button-row .btn-primary {
  flex: 1 1 100%;
  min-height: 3.5rem;
  font-size: 0.9375rem;
}
.buybox .button-row .btn-secondary,
.buybox .button-row .btn-danger-soft {
  flex: 1 1 0;
  padding: 0 var(--s3);
}
.buybox .tags {
  gap: var(--s1);
  margin-top: calc(var(--s2) * -1);
}

.buybox > .btn-ghost {
  justify-self: start;
  margin-top: calc(var(--s3) * -1);
}
.assurances {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3) var(--s4);
  margin: 0;
  padding: var(--s5) 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  font-size: 0.875rem;
  color: var(--text-2);
}
.assurances li {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-width: 0;
  line-height: 1.35;
}
@container (max-width: 22rem) {
  .assurances {
    grid-template-columns: minmax(0, 1fr);
  }
}
.assurances i {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex: none;
  border: 1px solid var(--line-2);
  background: rgb(255 255 255 / 0.03);
  color: var(--orange-text);
}
.assurances-tight {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s2);
  padding-top: var(--s4);
  font-size: 0.8125rem;
  color: var(--text-3);
}
.assurances-tight i {
  width: auto;
  height: auto;
  border: 0;
  background: none;
}
.product-about {
  max-width: 68ch;
}
.section-title {
  margin-bottom: var(--s5);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.03em;
}

/* Text aus dem Panel (Beschreibungen, CMS-Seiten) */
.rich-text {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text-2);
}
.rich-text > * + * {
  margin-top: 1em;
}
.rich-text h1,
.rich-text h2,
.rich-text h3 {
  margin-top: 1.75em;
  color: var(--text);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.2;
}
.rich-text > :first-child {
  margin-top: 0;
}
.rich-text h2 {
  font-size: 1.5rem;
}
.rich-text h3 {
  font-size: 1.25rem;
}
.rich-text strong,
.rich-text b {
  color: var(--text);
  font-weight: 500;
}
.rich-text a {
  color: var(--orange-text);
  text-decoration: underline;
  text-decoration-color: rgb(255 106 43 / 0.4);
  text-underline-offset: 3px;
}
.rich-text ul,
.rich-text ol {
  padding-left: 1.25rem;
}
.rich-text li + li {
  margin-top: 0.35em;
}
.rich-text ul li::marker {
  color: var(--orange-text);
}
.rich-text img {
  border: 1px solid var(--line);
}
.rich-text code {
  font-family: "Esse Mono", ui-monospace, monospace;
  font-size: 0.9em;
  padding: 0.1em 0.35em;
  background: rgb(255 255 255 / 0.06);
}
.cms {
  max-width: 46rem;
}

/* Formulare */
.input {
  width: 100%;
  min-width: 0;
  min-height: 3rem;
  padding: 0 var(--s4);
  border: 1px solid var(--line-2);
  background: rgb(0 0 0 / 0.25);
  color: var(--text);
  font: inherit;
  outline: none;
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.4);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.input:focus {
  border-color: rgb(255 77 0 / 0.6);
  box-shadow:
    inset 0 1px 2px rgb(0 0 0 / 0.4),
    0 0 0 4px rgb(255 77 0 / 0.14);
}
.input::placeholder {
  color: var(--text-3);
}
select.input {
  appearance: none;
  padding-right: 2.5rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%), linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
  background-position:
    calc(100% - 1.15rem) 50%,
    calc(100% - 0.8rem) 50%;
  background-size: 0.35rem 0.35rem;
  background-repeat: no-repeat;
}
.input-icon {
  position: relative;
  flex: 1;
  display: flex;
}
.input-icon i {
  position: absolute;
  left: var(--s4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-3);
  pointer-events: none;
}
.input-icon .input {
  padding-left: 2.6rem;
}
.form-card {
  display: grid;
  gap: var(--s5);
  max-width: 40rem;
  padding: var(--s6);
}
.form-card > * {
  position: relative;
  z-index: 1;
}
.field {
  display: grid;
  gap: var(--s2);
}
.field-label {
  font-size: 0.875rem;
  font-weight: 500;
}
.input-group {
  display: flex;
  gap: var(--s2);
}
.input-addon {
  display: grid;
  place-items: center;
  padding: 0 var(--s4);
  border: 1px solid var(--line-2);
  color: var(--text-3);
  font-size: 0.875rem;
}
.form-card .actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
}

/* Anmeldung */
.login {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  max-width: 30rem;
  margin: var(--s6) auto;
  padding: var(--s7) var(--s6) var(--s6);
  text-align: center;
}
.login > * {
  position: relative;
  z-index: 1;
}
.login .body {
  font-size: 1rem;
}
.login-mark {
  width: 4rem;
  height: 2.4rem;
  fill: var(--orange-text);
  filter: drop-shadow(0 6px 18px rgb(255 77 0 / 0.45));
}
.login-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  width: 100%;
}
.login-form .input {
  flex: 1 1 12rem;
}
/* Discord im Blau von Discord, damit man den Knopf wiedererkennt */
.btn-discord {
  border-color: rgb(140 150 255 / 0.4);
  background: linear-gradient(180deg, #6b77f5, #5865f2);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.25),
    0 6px 20px -8px rgb(88 101 242 / 0.6);
}
.btn-discord:hover {
  background: linear-gradient(180deg, #7984f7, #6370f4);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.28),
    0 12px 32px -10px rgb(88 101 242 / 0.75);
}
.login-steps {
  display: grid;
  gap: var(--s2);
  width: 100%;
  margin: var(--s2) 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  counter-reset: step;
  font-size: 0.875rem;
  color: var(--text-3);
  text-align: left;
}
.login-steps li {
  display: flex;
  gap: var(--s3);
  counter-increment: step;
}
.login-steps li::before {
  content: counter(step);
  flex: none;
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border: 1px solid var(--line-2);
  font-family: "Esse Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  color: var(--orange-text);
}

/* Warenkorb */
/* Schritte im Warenkorb: Felder mit Nummer oder Haken, verbunden durch eine Linie. Erledigt ist orange gefüllt, der
   aktuelle Schritt hat einen leuchtenden Rand, die Linie zu ihm ist orange, die danach läuft aus. */
.steps {
  display: flex;
  align-items: center;
  max-width: 40rem;
  margin: 0 0 var(--s6);
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.step {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex: 1 1 0;
  min-width: 0;
  font-size: 0.875rem;
  color: var(--text-3);
}
.step:last-child {
  flex: none;
}
/* Die Linie zum nächsten Schritt */
.step:not(:last-child)::after {
  content: "";
  flex: 1;
  min-width: var(--s4);
  height: 2px;
  margin: 0 var(--s2);
  border-radius: 2px;
  background: var(--line-2);
}
.step.is-done::after {
  background: linear-gradient(90deg, #ff6418, #ff4d00);
  box-shadow: 0 0 10px -1px rgb(255 77 0 / 0.6);
}
.step.is-current::after {
  background: linear-gradient(90deg, rgb(255 77 0 / 0.75), var(--line-2) 70%);
}
.step-dot {
  display: grid;
  place-items: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  background: var(--surface-1);
  font-family: "Esse Mono", ui-monospace, monospace;
  font-size: 0.8125rem;
  color: var(--text-3);
}
.step-name {
  white-space: nowrap;
}
.step.is-done {
  color: var(--text-2);
}
.step.is-done .step-dot {
  border-color: rgb(255 138 80 / 0.55);
  background: linear-gradient(180deg, #ff6c22, #ff4d00);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35);
  color: var(--ink);
  font-size: 0.75rem;
}
.step.is-current {
  color: var(--text);
  font-weight: 500;
}
.step.is-current .step-dot {
  border-color: rgb(255 106 43 / 0.75);
  background: rgb(255 77 0 / 0.12);
  color: var(--orange-text);
  box-shadow:
    0 0 0 3px rgb(255 77 0 / 0.12),
    0 0 18px -4px rgb(255 77 0 / 0.7);
}
/* Am Handy steht nur beim aktuellen Schritt der Name */
@media (max-width: 519px) {
  .step:not(.is-current) .step-name {
    display: none;
  }
}
.checkout {
  display: grid;
  gap: var(--s6);
}
@media (min-width: 960px) {
  .checkout {
    grid-template-columns: minmax(0, 1fr) 24rem;
    align-items: start;
    gap: var(--s7);
  }
}
.panel {
  padding: var(--s5);
  border: 1px solid var(--line);
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s3);
}
.panel-title {
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.basket {
  margin: 0;
  padding: 0;
  list-style: none;
}
.basket-item {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s4) 0;
  border-top: 1px solid var(--line);
}
.basket-thumb {
  display: grid;
  place-items: center;
  width: 4.5rem;
  aspect-ratio: 16 / 10;
  flex: none;
  overflow: hidden;
  border: 1px solid var(--line-2);
  background: radial-gradient(80% 90% at 50% 0%, rgb(255 77 0 / 0.18), transparent 70%), #0d0b0a;
  color: var(--text-3);
}
.basket-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.basket-name {
  display: grid;
  flex: 1;
  min-width: 0;
  font-weight: 500;
}
.basket-name a:hover {
  color: var(--orange-text);
}
.basket-name small {
  font-weight: 400;
  color: var(--text-3);
}
.coupon {
  display: flex;
  gap: var(--s2);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
}
.coupon + .chips {
  margin: var(--s4) 0 0;
}
.summary {
  display: grid;
  gap: var(--s4);
  padding: var(--s6);
}
.summary > * {
  position: relative;
  z-index: 1;
}
@media (min-width: 960px) {
  .summary {
    position: sticky;
    top: 5.5rem;
  }
}
.summary-label {
  font-size: 0.875rem;
  color: var(--text-3);
}
.summary .price-lg {
  margin-top: calc(var(--s3) * -1);
}
.summary-user {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: 0.875rem;
  color: var(--text-3);
}
.summary-user b {
  color: var(--text);
  font-weight: 500;
}

/* Seitenleiste: die Module aus dem Tebex-Panel, leiser als der Inhalt */
.sidebar {
  display: grid;
  gap: var(--s4);
  align-content: start;
}
.module {
  display: grid;
  gap: var(--s3);
  padding: 1.25rem;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.03), transparent 70%);
}
.module-link {
  transition:
    border-color 0.3s ease,
    transform 0.4s var(--ease);
}
.module-link:hover {
  border-color: rgb(255 106 43 / 0.3);
  transform: translateY(-2px);
}
.module-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--orange-text);
}
.module-text {
  font-size: 0.9375rem;
}
.module-name {
  font-weight: 500;
}
.module-meta {
  font-size: 0.875rem;
  color: var(--text-3);
}
.module-meta b {
  color: var(--text);
  font-weight: 500;
}
.module-meta.is-error {
  color: var(--red);
}
.module-image {
  border: 1px solid var(--line);
}
.module-list {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.module-list li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 var(--s3);
}
.module-form {
  display: flex;
  gap: var(--s2);
}
.meter {
  height: 0.5rem;
  overflow: hidden;
  background: rgb(255 255 255 / 0.06);
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.5);
}
.meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff6418, #ff4d00);
  box-shadow: 0 0 12px rgb(255 77 0 / 0.6);
}
.status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  color: var(--text-2);
}
.status::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  background: var(--red);
}
.status.is-up::before {
  background: #4ade80;
}


.lightbox {
  max-width: min(92vw, 1400px);
  max-height: 92vh;
  padding: 0;
  border: 1px solid var(--line-2);
  background: #0d0b0a;
  overflow: hidden;
  box-shadow: 0 40px 100px -30px rgb(0 0 0 / 0.95);
}
.lightbox::backdrop {
  background: rgb(12 10 9 / 0.85);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.lightbox img {
  max-width: min(92vw, 1400px);
  max-height: 92vh;
  object-fit: contain;
}
.lightbox-close {
  position: absolute;
  top: var(--s3);
  right: var(--s3);
  background: rgb(12 10 9 / 0.7);
}

/* Paketseite: "Das bekommst du", Detail-Kacheln, FAQ, ähnliche Pakete und die Kaufleiste */
.includes {
  display: grid;
  gap: var(--s2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
  color: var(--text-2);
}
.includes li {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
}
.includes i {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  background: rgb(134 239 172 / 0.12);
  color: var(--green);
  font-size: 0.65rem;
  transform: translateY(0.15rem);
}
.specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--s3);
  margin: 0 0 var(--s7);
}
.spec {
  display: grid;
  gap: var(--s1);
  padding: var(--s4);
  border: 1px solid var(--line);
  background: var(--surface-1);
  box-shadow: var(--shadow-1);
}
.spec dt {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.spec dt i {
  color: var(--orange-text);
}
.spec dd {
  margin: 0;
  font-weight: 500;
  color: var(--text);
}
.faq {
  display: grid;
  gap: var(--s2);
  margin-top: var(--s7);
}
.faq-item {
  border: 1px solid var(--line);
  background: var(--surface-1);
  transition: border-color 0.3s ease;
}
.faq-item[open] {
  border-color: rgb(255 106 43 / 0.3);
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s4) 1.25rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary i {
  flex: none;
  font-size: 0.75rem;
  color: var(--text-3);
  transition: transform 0.4s var(--ease);
}
.faq-item[open] summary i {
  transform: rotate(180deg);
  color: var(--orange-text);
}
.faq-item p {
  margin: 0;
  padding: 0 1.25rem var(--s4);
  color: var(--text-2);
  line-height: 1.65;
}
.related {
  margin-top: var(--s9);
}
.related-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
}
.related-grid {
  display: grid;
  gap: var(--s4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}
.related-grid > :nth-child(n + 5) {
  display: none;
}
.mini-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.mini-media {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: radial-gradient(80% 90% at 50% 0%, rgb(255 77 0 / 0.16), transparent 70%), #0d0b0a;
}
.mini-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.mini-card:hover .mini-media img {
  transform: scale(1.04);
}
.mini-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s4);
}
.mini-name {
  font-weight: 500;
}
.buybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 35;
  padding: 0 var(--s3) var(--s3);
  translate: 0 120%;
  transition: translate 0.5s var(--ease);
  pointer-events: none;
}
.buybar.is-shown {
  translate: 0 0;
  pointer-events: auto;
}
.buybar-inner {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: var(--s4);
  max-width: 56rem;
  margin: 0 auto;
  padding: var(--s2) var(--s2) var(--s2) 1.25rem;
  background: var(--glass);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.buybar-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.buybar-price .price-amount {
  font-size: 1.125rem;
}
.buybar .btn {
  min-height: 2.75rem;
}
@media (max-width: 480px) {
  .buybar-name {
    display: none;
  }
  .buybar-price {
    flex: 1;
  }
}

/* Kategorie: Anzahl, Filter und Sortierung über den Paketen */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3) var(--s4);
  margin-bottom: var(--s5);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--line);
}
.toolbar[hidden],
[data-card][hidden],
[data-filter-empty][hidden] {
  display: none !important;
}
.toolbar-count {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.toolbar-filters {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: var(--s2);
}
.toolbar-filters .chip {
  background: none;
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
}
.toolbar-filters .chip i {
  font-size: 0.75em;
  color: var(--orange-text);
}
.toolbar-sort {
  position: relative;
  display: flex;
  align-items: center;
  margin-left: auto;
}
.toolbar-sort i {
  position: absolute;
  left: 0.85rem;
  font-size: 0.75rem;
  color: var(--text-3);
  pointer-events: none;
}
.input-sm {
  min-height: 2.25rem;
  padding-left: 2.1rem;
  font-size: 0.8125rem;
}

/* Kategorie-Kopf: großes Icon neben der Überschrift, darunter die Anzahl */
.cat-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: end;
  gap: var(--s3) var(--s5);
}
.cat-head .page-text,
.cat-head .clamp-toggle {
  grid-column: 1 / -1;
}
.cat-head .clamp-toggle {
  justify-self: start;
}
.cat-icon {
  display: grid;
  place-items: center;
  width: 5rem;
  height: 5rem;
  border: 1px solid rgb(255 106 43 / 0.35);
  background: radial-gradient(circle at 50% 0%, rgb(255 77 0 / 0.32), rgb(255 77 0 / 0.06));
  box-shadow:
    inset 0 1px 0 rgb(255 210 180 / 0.28),
    0 18px 40px -16px rgb(255 77 0 / 0.65);
  color: var(--orange-text);
  font-size: 1.9rem;
}
.cat-meta {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s3);
  font-size: 0.875rem;
  color: var(--text-3);
}
.cat-meta i {
  font-size: 0.8em;
  color: var(--orange-text);
}
@media (max-width: 640px) {
  .cat-icon {
    width: 3.5rem;
    height: 3.5rem;
    font-size: 1.35rem;
  }
}

/* Ein Paket in der Kategorie: eine große Karte über die ganze Breite, Bild links. Zwei: zwei große nebeneinander. */
@media (min-width: 820px) {
  .packages[data-count="1"] {
    grid-template-columns: 1fr;
  }
  .packages[data-count="1"] .package-card {
    flex-direction: row;
    min-height: 24rem;
  }
  .packages[data-count="1"] .package-media {
    flex: 1.3 1 0;
    aspect-ratio: auto;
  }
  .packages[data-count="1"] .package-media::after {
    inset: 0 0 0 auto;
    width: 35%;
    height: auto;
    background: linear-gradient(to left, rgb(16 14 12 / 0.95), transparent);
  }
  .packages[data-count="1"] .package-body {
    flex: 1 1 0;
    justify-content: center;
    gap: var(--s3);
    padding: var(--s7) var(--s6);
  }
  .packages[data-count="1"] .package-name {
    font-size: clamp(1.75rem, 2.6vw, 2.5rem);
    letter-spacing: -0.035em;
    line-height: 1.1;
  }
  .packages[data-count="1"] .package-short {
    font-size: 1rem;
    -webkit-line-clamp: 4;
  }
  .packages[data-count="1"] .package-foot {
    margin-top: var(--s4);
    justify-content: flex-start;
  }
  .packages[data-count="1"] .package-foot .price {
    margin-right: auto;
  }
  .packages[data-count="1"] .price-amount {
    font-size: 2rem;
  }
  .packages[data-count="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .packages[data-count="2"] .package-body {
    padding: var(--s5) var(--s6) var(--s6);
  }
  .packages[data-count="2"] .package-name {
    font-size: 1.5rem;
    letter-spacing: -0.03em;
  }
}

/* Listenzeilen: Vorschaubild, Name mit Kurztext und Tags, Preis, Knopf */
.rows .row {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--s3) var(--s5);
  padding: var(--s3);
}
.row-thumb {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--line-2);
  background: radial-gradient(80% 90% at 50% 0%, rgb(255 77 0 / 0.16), transparent 70%), #0d0b0a;
}
.row-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.row:hover .row-thumb img {
  transform: scale(1.05);
}
.row-thumb .package-placeholder {
  width: 55%;
}
.rows .row-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s1);
}
.row-short {
  font-size: 0.875rem;
  color: var(--text-3);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rows .row-main .tags {
  margin-top: var(--s1);
}
@media (max-width: 640px) {
  .rows .row {
    grid-template-columns: 5.5rem minmax(0, 1fr);
  }
  .rows .row > .price,
  .rows .row > .btn {
    grid-column: 2;
    justify-self: start;
  }
}

/* Lange Texte aus dem Panel: auf --lines Zeilen gekürzt, unten weich ausgeblendet, per Knopf aufklappbar */
.js .clamp:not(.is-open) {
  max-height: calc(var(--lines, 3) * 1.7em);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
  mask-image: linear-gradient(to bottom, #000 55%, transparent);
}
.clamp-toggle {
  margin-top: var(--s2);
  margin-left: calc(var(--s3) * -1);
}
.clamp-toggle i {
  font-size: 0.7em;
  transition: transform 0.4s var(--ease);
}
.clamp-toggle[aria-expanded="true"] i {
  transform: rotate(180deg);
}
/* Über den Store: links Marke, Überschrift und zwei Wege weiter, rechts der Text */
.about {
  display: grid;
  gap: var(--s5) var(--s7);
  margin-top: var(--s8);
  padding: var(--s6);
}
@media (min-width: 900px) {
  .about {
    grid-template-columns: minmax(14rem, 1fr) minmax(0, 2.2fr);
    padding: var(--s7);
  }
  .about-side {
    grid-row: 1 / span 2;
  }
  .about .clamp-toggle {
    grid-column: 2;
  }
}
.about .clamp-toggle {
  justify-self: start;
  margin-top: calc(var(--s4) * -1);
}
.about-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s4);
}
.about-side .section-title {
  margin: 0;
}
.about-mark {
  width: 60%;
  height: 60%;
  fill: currentColor;
}
.about-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: auto;
}
.about .rich-text {
  max-width: 72ch;
}

/* Vorteile auf der Startseite: Icon in einer Kachel, beim Drüberfahren kippt sie leicht und wird orange */
.features {
  display: grid;
  gap: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  margin-top: var(--s8);
}
.feature {
  display: grid;
  align-content: start;
  gap: var(--s3);
  padding: var(--s6);
  transition:
    border-color 0.3s ease,
    box-shadow 0.5s var(--ease),
    transform 0.5s var(--ease);
}
.feature::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #ff6a2b, transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.feature-icon {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: var(--s3);
  border: 1px solid var(--line-2);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.08), rgb(255 255 255 / 0.02));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.1);
  color: var(--text);
  font-size: 1.2rem;
  transition:
    transform 0.5s var(--ease),
    background 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.4s var(--ease);
}
.feature-title {
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.025em;
  transition: color 0.3s ease;
}
.feature-text {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-3);
}
.feature:hover {
  transform: translateY(-3px);
  border-color: rgb(255 106 43 / 0.3);
  box-shadow: var(--shadow-lift);
}
.feature:hover::after {
  opacity: 1;
}
.feature:hover .feature-icon {
  transform: rotate(-8deg) scale(1.05);
  border-color: rgb(255 122 61 / 0.5);
  background: linear-gradient(180deg, #ff6418, #ff4d00);
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.3),
    0 10px 24px -10px rgb(255 77 0 / 0.8);
}
.feature:hover .feature-title {
  color: var(--orange-text);
}

/* Fuß: oben einmal das Band "Noch Fragen?", darunter eine Zeile mit Marke, Links und runden Knöpfen, ganz unten der
   Hinweis zu Tebex, Rechtliches und "Nach oben". Dahinter der Name riesig und fast unsichtbar. */
.site-footer {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.02), transparent 40%);
}
.footer-watermark {
  position: absolute;
  left: 50%;
  bottom: -0.18em;
  transform: translateX(-50%);
  font-size: min(12vw, 15rem);
  font-weight: 500;
  letter-spacing: -0.06em;
  line-height: 1;
  white-space: nowrap;
  color: transparent;
  background: linear-gradient(180deg, rgb(243 235 228 / 0.06), rgb(243 235 228 / 0));
  -webkit-background-clip: text;
  background-clip: text;
  pointer-events: none;
  user-select: none;
}
/* "Noch Fragen?": erhoben, mit einem blauen Licht vom Discord-Knopf her */
.footer-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4) var(--s6);
  margin-top: var(--s7);
  overflow: hidden;
  padding: var(--s5) var(--s6);
  border-radius: var(--r-3);
}
.footer-cta::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: -6rem;
  top: 50%;
  width: 26rem;
  height: 16rem;
  transform: translateY(-50%);
  background: radial-gradient(closest-side, rgb(88 101 242 / 0.18), transparent);
  pointer-events: none;
}
.footer-cta > * {
  position: relative;
  z-index: 1;
}
.footer-cta-title {
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.footer-cta p {
  max-width: 54ch;
  margin-top: 0.25rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-3);
}
.footer-band {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5) var(--s6);
  padding-block: var(--s7);
}
.footer-band .brand {
  font-size: 1.125rem;
}
.footer-band .brand-mark {
  width: 2.4rem;
  height: 1.4rem;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
  font-size: 0.9375rem;
}
.footer-links a,
.footer-legal-links a {
  color: var(--text-2);
  transition: color 0.2s ease;
}
.footer-links a:hover,
.footer-legal-links a:hover {
  color: var(--text);
}
.footer-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
}
/* Runde Knöpfe für GitHub, Website und "Nach oben" */
.round-link {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border-radius: 50%;
  color: var(--text-2);
  background: rgb(255 255 255 / 0.05);
  box-shadow:
    inset 0 0 0 1px var(--line),
    inset 0 1px 0 rgb(255 255 255 / 0.06);
  transition:
    color 0.2s ease,
    background 0.2s ease,
    translate 0.35s var(--ease);
}
.round-link:hover {
  color: var(--text);
  background: rgb(255 255 255 / 0.1);
  translate: 0 -2px;
}
.footer-up:hover {
  color: var(--ink);
  background: linear-gradient(180deg, #ff6418, #ff4d00);
}
.footer-bottom {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4) var(--s6);
  padding-top: var(--s5);
  padding-bottom: var(--s7);
}
.footer-bottom::before {
  content: "";
  position: absolute;
  top: 0;
  left: 1.25rem;
  right: 1.25rem;
  height: 1px;
  background: var(--line);
}
@media (min-width: 768px) {
  .footer-bottom::before {
    left: var(--s6);
    right: var(--s6);
  }
}
.footer-legal {
  display: grid;
  gap: 0.3rem;
  max-width: 70ch;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--text-3);
}
.footer-legal a {
  color: var(--text-2);
  text-decoration: underline;
  text-decoration-color: rgb(243 235 228 / 0.3);
  text-underline-offset: 2px;
}
.footer-end {
  display: flex;
  align-items: center;
  gap: var(--s4);
}
.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: var(--s2);
  font-size: 0.8125rem;
}
.footer-legal-links a {
  padding: 0 var(--s3);
}
.footer-legal-links a + a {
  border-left: 1px solid var(--line-2);
}
@media (max-width: 760px) {
  .footer-band {
    flex-direction: column;
    align-items: flex-start;
  }
  .footer-cta .btn {
    width: 100%;
  }
  .footer-end {
    width: 100%;
    justify-content: space-between;
  }
  .footer-legal-links a:first-child {
    padding-left: 0;
  }
}

/* Bewegung: der Kopf kommt beim Laden, Abschnitte steigen beim Hereinscrollen auf (emergencyforge.js setzt is-in).
   translate statt transform, damit das Anheben beim Drüberfahren davon unberührt bleibt. */
.hero > * {
  animation: hero-in 0.8s var(--ease) both;
}
.hero > :nth-child(2) {
  animation-delay: 0.12s;
}
@keyframes hero-in {
  from {
    opacity: 0;
    translate: 0 16px;
  }
}
.js [data-reveal] {
  opacity: 0;
  translate: 0 24px;
  transition:
    opacity 0.7s var(--ease) var(--d, 0s),
    translate 0.7s var(--ease) var(--d, 0s),
    transform 0.5s var(--ease),
    border-color 0.3s ease,
    box-shadow 0.5s var(--ease);
}
.js [data-reveal].is-in {
  opacity: 1;
  translate: 0 0;
}

/* ---------- Empfohlenes Paket auf der Startseite ----------
   Bild links, rechts Badge, Name, Kurztext, Tags, Preis und Kaufen. Am Handy untereinander. */
.spotlight {
  position: relative;
  display: grid;
  gap: var(--s6);
  margin-bottom: var(--s7);
  padding: var(--s5);
  overflow: hidden;
}
.spotlight > * {
  position: relative;
  z-index: 1;
}
@media (min-width: 820px) {
  .spotlight {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: center;
    padding: var(--s5) var(--s7) var(--s5) var(--s5);
  }
}
.spotlight-media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  background: radial-gradient(80% 90% at 50% 0%, rgb(255 77 0 / 0.2), transparent 70%), #0d0b0a;
}
.spotlight-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.spotlight:hover .spotlight-media img {
  transform: scale(1.03);
}
.spotlight-body {
  display: grid;
  justify-items: start;
  gap: var(--s4);
  min-width: 0;
}
.spotlight-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}
.spotlight-title {
  font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.04;
  text-wrap: balance;
}
.spotlight-short {
  max-width: 46ch;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--text-2);
}
.spotlight-foot {
  display: grid;
  gap: var(--s4);
  width: 100%;
  margin-top: var(--s2);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
}
.spotlight-foot .price-amount {
  font-size: 2rem;
}
.spotlight-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

/* ---------- Technik auf der Paketseite ----------
   Ein Kasten unter der Galerie: oben Titel und Version, die Frameworks als Chips mit Haken, darunter eine Zeile mit
   Quellcode, OneSync und Sprache, unten "Benötigt" und die Dokumentation. Abschnitte trennt eine feine Linie. */
.tech:not([hidden]) {
  display: grid;
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  background: var(--surface-1);
  box-shadow: var(--shadow-1);
}
.tech > * {
  padding: var(--s4) var(--s5);
}
.tech > * + * {
  border-top: 1px solid var(--line);
}
.tech-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s1) var(--s4);
  padding-bottom: 0;
}
.tech-head + .compat {
  border-top: 0;
  padding-top: var(--s3);
}
.tech-title {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.tech-stand {
  font-size: 0.8125rem;
  color: var(--text-3);
}
.compat {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin: 0;
  list-style: none;
}
.fw {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.7rem;
  border-radius: var(--r-2);
  font-size: 0.875rem;
  font-weight: 500;
}
.fw i {
  font-size: 0.7rem;
}
.fw.is-yes {
  color: var(--text);
  background: linear-gradient(180deg, rgb(134 239 172 / 0.12), rgb(134 239 172 / 0.04));
  box-shadow: inset 0 0 0 1px rgb(134 239 172 / 0.22);
}
.fw.is-yes i {
  color: var(--green);
}
.fw.is-no {
  color: var(--text-3);
  box-shadow: inset 0 0 0 1px var(--line);
}
.fw.is-no i {
  color: rgb(243 235 228 / 0.3);
}
/* Quellcode, OneSync, Sprache nebeneinander, mit feinen Strichen dazwischen */
.tech .specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) 0;
  margin: 0;
}
.tech .spec {
  display: grid;
  gap: 0.2rem;
  padding: 0 var(--s5) 0 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.tech .spec + .spec {
  padding-left: var(--s5);
  border-left: 1px solid var(--line);
}
.tech .spec dt {
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-3);
}
.tech .spec dd {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 500;
}
.tech .spec dd i {
  color: var(--orange-text);
  font-size: 0.85em;
}
@media (max-width: 520px) {
  .tech .specs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tech .spec,
  .tech .spec + .spec {
    padding: 0;
    border-left: 0;
  }
}
.tech-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3) var(--s5);
  background: rgb(0 0 0 / 0.14);
  border-radius: 0 0 var(--r-3) var(--r-3);
}
.tech-needs {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  min-width: 0;
  font-size: 0.875rem;
  color: var(--text-3);
}
.tech-label {
  margin-right: var(--s1);
}
.tech-label i {
  font-size: 0.8em;
  color: var(--orange-text);
}
.tech-needs code {
  padding: 0.2rem 0.45rem;
  border-radius: var(--r-1);
  font-family: "Esse Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  color: var(--text);
  background: rgb(255 255 255 / 0.07);
}
/* Optionale Abhängigkeiten gestrichelt und leiser, damit "Benötigt" vorn steht */
.tech-needs.is-optional .tech-label i {
  color: var(--text-3);
}
.tech-needs.is-optional code {
  color: var(--text-2);
  background: transparent;
  border: 1px dashed rgb(255 255 255 / 0.2);
  padding: calc(0.2rem - 1px) calc(0.45rem - 1px);
}
.tech-needs.is-none {
  gap: 0.5rem;
  color: var(--text-2);
}
.tech-needs.is-none i {
  font-size: 0.8em;
  color: var(--green);
}
.tech-doc {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  padding: 0.4rem 0.6rem;
  border-radius: var(--r-2);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-2);
  transition:
    color 0.2s ease,
    background 0.2s ease;
}
.tech-doc + .tech-doc {
  margin-left: 0;
}
.tech-doc:hover {
  color: var(--text);
  background: rgb(255 255 255 / 0.05);
}
.tech-doc .fa-book {
  color: var(--orange-text);
}
.tech-ext {
  font-size: 0.65rem;
  opacity: 0.6;
  transition: translate 0.3s var(--ease);
}
.tech-doc:hover .tech-ext {
  translate: 2px -2px;
}

/* ---------- Warenkorb als Schublade ----------
   Ein <dialog> am rechten Rand, aus Glas. Am Handy füllt es die Breite. */
.drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(25rem, 100vw);
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: var(--s2);
  border: 0;
  background: none;
  color: var(--text);
  overflow: visible;
}
.drawer::backdrop {
  background: rgb(6 5 4 / 0.6);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: drawer-fade 0.35s ease both;
}
.drawer-panel {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: var(--r-4);
  background:
    var(--grain),
    linear-gradient(180deg, rgb(255 255 255 / 0.09), rgb(255 255 255 / 0.02) 30%, rgb(255 255 255 / 0.01)),
    rgb(17 14 12 / 0.97);
  box-shadow: var(--glass-shadow), 0 30px 80px -20px rgb(0 0 0 / 0.9);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.drawer[open] .drawer-panel {
  animation: drawer-in 0.55s var(--ease) both;
}
.drawer.is-closing .drawer-panel {
  animation: drawer-out 0.32s ease-in both;
}
.drawer.is-closing::backdrop {
  animation: drawer-fade 0.32s ease reverse both;
}
@keyframes drawer-in {
  from {
    transform: translateX(calc(100% + var(--s4)));
  }
}
@keyframes drawer-out {
  to {
    transform: translateX(calc(100% + var(--s4)));
  }
}
@keyframes drawer-fade {
  from {
    opacity: 0;
  }
}
.has-drawer {
  overflow: hidden;
}
.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s4) var(--s4) var(--s4) var(--s5);
  border-bottom: 1px solid var(--line);
}
.drawer-title {
  font-size: 1.0625rem;
  font-weight: 500;
}
.drawer-title small {
  margin-left: var(--s2);
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--text-3);
}
.drawer-items {
  flex: 1;
  display: grid;
  align-content: start;
  gap: 2px;
  margin: 0;
  padding: var(--s2);
  overflow-y: auto;
  list-style: none;
}
.drawer-item {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2);
  border-radius: var(--r-2);
}
.drawer-item:hover {
  background: rgb(255 255 255 / 0.03);
}
.drawer-item.is-removing,
.basket-item.is-removing {
  overflow: hidden;
  opacity: 0.4;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.drawer-item .basket-thumb {
  width: 3.75rem;
}
.drawer-name {
  flex: 1;
  min-width: 0;
  display: grid;
  font-size: 0.875rem;
  font-weight: 500;
}
.drawer-name a {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.drawer-name small {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--text-3);
}
.drawer-item .price-amount {
  font-size: 1rem;
}
.drawer-item .btn-icon {
  width: 2rem;
  min-height: 2rem;
}
.drawer-foot {
  display: grid;
  gap: var(--s3);
  padding: var(--s4) var(--s5) var(--s5);
  border-top: 1px solid var(--line);
}
.coupon-sm {
  padding-top: 0;
  border-top: 0;
}
.coupon-sm .input-icon {
  flex: 1;
}
.drawer-foot .chips {
  margin: 0;
}
.drawer-sum {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-top: var(--s2);
  font-size: 0.875rem;
  color: var(--text-3);
}
.drawer-sum .price-amount {
  font-size: 1.75rem;
}
.drawer-full {
  justify-self: center;
  font-size: 0.8125rem;
  color: var(--text-3);
}
.drawer-full:hover {
  color: var(--text);
}
.drawer-empty {
  flex: 1;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--s3);
  padding: var(--s6);
  text-align: center;
  color: var(--text-3);
}
.drawer-empty-icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  font-size: 1.25rem;
}

/* ---------- Angaben vor dem Warenkorb (options.html) ----------
   Eine Karte mit Paketname, kurzem Satz und den Feldern. Discord ist eine eigene Zeile: Icon, Stand, Beschreibung von
   Tebex und Knopf; verknüpft wird sie grün mit Haken. Dieselbe Karte erscheint auch als Fenster über der Seite. */
.options {
  position: relative;
  display: grid;
  gap: var(--s5);
  max-width: 36rem;
  padding: var(--s6);
}
.options > * {
  position: relative;
  z-index: 1;
}
.options-head {
  display: grid;
  gap: var(--s2);
  padding-right: var(--s6);
}
.options-head .body {
  color: var(--text-2);
}
.options-form {
  display: grid;
  gap: var(--s4);
}
.connect {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s4);
  border: 1px solid rgb(140 150 255 / 0.25);
  border-radius: var(--r-3);
  background: linear-gradient(180deg, rgb(88 101 242 / 0.1), rgb(88 101 242 / 0.03));
}
.connect.is-linked {
  border-color: rgb(134 239 172 / 0.3);
  background: linear-gradient(180deg, rgb(134 239 172 / 0.08), rgb(134 239 172 / 0.02));
}
.connect-icon {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--r-2);
  background: linear-gradient(180deg, #6b77f5, #5865f2);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.25),
    0 8px 20px -10px rgb(88 101 242 / 0.8);
  color: #fff;
  font-size: 1.15rem;
}
.connect-ok {
  position: absolute;
  right: -0.35rem;
  bottom: -0.35rem;
  display: grid;
  place-items: center;
  width: 1.2rem;
  height: 1.2rem;
  border: 2px solid #15120f;
  border-radius: 50%;
  background: var(--green);
  color: var(--ink);
  font-size: 0.55rem;
}
.connect-text {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 0.15rem;
}
.connect-text b {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.connect-text small {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--text-3);
}
.connect .btn {
  flex: none;
}
.options-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
}
.options-actions .btn-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: saturate(0.6);
}
.options-actions .btn-primary:disabled::before,
.options-actions .btn-primary:disabled::after,
.options-actions .btn-primary:disabled .ember {
  display: none;
}
.options-modal .options {
  max-width: none;
}
.options-modal {
  width: min(34rem, calc(100vw - 2rem));
}
@media (max-width: 519px) {
  .connect {
    flex-wrap: wrap;
  }
  .connect .btn {
    width: 100%;
  }
}

/* ---------- Anmeldung als Fenster ----------
   Dieselbe Box wie auf der Seite /login, mittig über der abgedunkelten Seite, mit Kreuz oben rechts */
.auth-modal {
  width: min(30rem, calc(100vw - 2rem));
  max-width: none;
  margin: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  overflow: visible;
}
.auth-modal::backdrop {
  background: rgb(6 5 4 / 0.6);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: drawer-fade 0.35s ease both;
}
.auth-modal[open] .login,
.auth-modal[open] .options {
  animation: auth-in 0.5s var(--ease) both;
}
@keyframes auth-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }
}
.auth-modal .login,
.auth-modal .options {
  position: relative;
  margin: 0;
  max-width: none;
}
.auth-close {
  position: absolute;
  top: var(--s3);
  right: var(--s3);
  z-index: 2;
}
.auth-loading {
  justify-items: center;
}
.auth-loading .skel-line,
.auth-loading .skel-title {
  margin-inline: auto;
}
/* Die Summe in der Schublade, solange sie nach dem Entfernen neu kommt */
.drawer-sum.is-refreshing .price {
  color: transparent;
  border-radius: var(--r-1);
  background: linear-gradient(90deg, rgb(255 255 255 / 0.04), rgb(255 255 255 / 0.1), rgb(255 255 255 / 0.04)) 0 0 / 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
.drawer-sum.is-refreshing .price * {
  color: transparent;
}
/* Bilder, die noch laden: die Fläche schimmert, das Bild blendet danach ein */
.img-wait {
  background-image: linear-gradient(90deg, rgb(255 255 255 / 0.03), rgb(255 255 255 / 0.08), rgb(255 255 255 / 0.03)) !important;
  background-size: 200% 100% !important;
  animation: shimmer 1.4s linear infinite;
}
.img-wait > img {
  opacity: 0;
}
.img-in {
  animation: img-in 0.45s ease both;
}
@keyframes img-in {
  from {
    opacity: 0;
  }
}

/* ---------- Meldungen ----------
   Oben rechts unter der Kopfzeile, bündig mit der Tasche (emergencyforge.js setzt --toast-top und --toast-right),
   am Handy mittig darunter. Erfolg mit grünem Rand, Haken und Konfetti, Hinweise neutral, Fehler rot. */
.toasts {
  position: fixed;
  z-index: 60;
  top: var(--toast-top, 5.5rem);
  right: var(--toast-right, 1rem);
  display: grid;
  justify-items: end;
  gap: var(--s2);
  width: max-content;
  max-width: min(24rem, calc(100vw - 2rem));
  pointer-events: none;
  transition: top 0.45s var(--bar-ease);
}
@media (max-width: 639px) {
  .toasts {
    left: 1rem;
    right: 1rem;
    width: auto;
    max-width: none;
    justify-items: center;
  }
}
.toast-msg {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 0.65rem 1.1rem 0.65rem 0.75rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  background: var(--glass);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  font-size: 0.875rem;
  font-weight: 500;
  animation: toast-in 0.55s var(--spring) both;
}
.toast-ok {
  border-color: rgb(134 239 172 / 0.28);
}
.toast-error {
  border-color: rgb(248 113 113 / 0.4);
}
.toast-text {
  animation: toast-text 0.45s var(--ease) 0.2s both;
}
.toast-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.08);
  color: var(--text-2);
  font-size: 0.7rem;
}
.toast-error .toast-icon {
  background: rgb(248 113 113 / 0.14);
  color: #fca5a5;
}
@keyframes toast-text {
  from {
    opacity: 0;
    transform: translateX(-6px);
  }
}
.confetti {
  position: absolute;
  z-index: 0;
  width: 5px;
  height: 5px;
  border-radius: 1px;
  pointer-events: none;
}
.toast-msg.is-leaving {
  animation: toast-out 0.45s ease forwards;
}
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateX(16px) scale(0.94);
  }
}
@keyframes toast-out {
  to {
    opacity: 0;
    transform: translateX(12px) scale(0.98);
  }
}
@media (max-width: 639px) {
  @keyframes toast-in {
    from {
      opacity: 0;
      transform: translateY(-12px) scale(0.94);
    }
  }
  @keyframes toast-out {
    to {
      opacity: 0;
      transform: translateY(-8px) scale(0.98);
    }
  }
}
.toast-check {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: var(--green);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.toast-check circle {
  fill: rgb(134 239 172 / 0.1);
  stroke-dasharray: 63;
  stroke-dashoffset: 63;
  animation: draw 0.6s var(--ease) 0.15s forwards;
}
.toast-check path {
  stroke-dasharray: 16;
  stroke-dashoffset: 16;
  animation: draw 0.4s var(--ease) 0.55s forwards;
}
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .toast-check circle,
  .toast-check path {
    stroke-dashoffset: 0;
  }
}
/* Im kleinen Anmeldefenster, falls es sich nicht selbst schließen darf */
.auth-done {
  display: grid;
  place-items: center;
  gap: var(--s3);
  min-height: 100vh;
  padding: var(--s6);
  text-align: center;
  color: var(--text-2);
}
.auth-done .toast-check {
  width: 3rem;
  height: 3rem;
}

/* ---------- Aktionsleiste ----------
   Eine Zeile über der Kopfzeile. Die Kopfzeile sitzt darunter, bis die Leiste aus dem Bild gescrollt ist. */
.promo {
  position: relative;
  z-index: 41;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2) var(--s4);
  height: 2.75rem;
  padding: 0 3rem;
  overflow: hidden;
  border-bottom: 1px solid rgb(255 106 43 / 0.22);
  background:
    linear-gradient(90deg, transparent, rgb(255 77 0 / 0.16) 30%, rgb(255 77 0 / 0.16) 70%, transparent),
    rgb(20 14 10 / 0.95);
  font-size: 0.8125rem;
  white-space: nowrap;
}
.promo-text {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}
.promo-text i {
  color: var(--orange-text);
}
.promo-code {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  flex: none;
  padding: 0.2rem 0.25rem 0.2rem 0.6rem;
  border: 1px dashed rgb(255 138 80 / 0.55);
  border-radius: var(--r-2);
  background: rgb(255 77 0 / 0.08);
  color: #ffd0b8;
  font-family: "Esse Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    color 0.2s ease,
    transform 0.15s ease;
}
.promo-code:hover {
  border-color: rgb(255 160 110 / 0.8);
  background: rgb(255 77 0 / 0.14);
}
.promo-code:hover span {
  background: rgb(255 255 255 / 0.12);
  color: var(--text);
}
.promo-code:active {
  transform: scale(0.97);
}
/* Nach dem Klick: grün, "Kopiert" mit Haken, einmal kurz größer */
.promo-code.is-copied {
  border-style: solid;
  border-color: rgb(134 239 172 / 0.55);
  background: rgb(134 239 172 / 0.1);
  color: var(--green);
  animation: code-pop 0.45s var(--ease);
}
.promo-code.is-copied span {
  background: rgb(134 239 172 / 0.16);
  color: var(--green);
}
.promo-code span i {
  font-size: 0.85em;
}
@keyframes code-pop {
  40% {
    transform: scale(1.06);
  }
}
.promo-code span {
  padding: 0.05rem 0.4rem;
  border-radius: var(--r-1);
  background: rgb(255 255 255 / 0.06);
  color: var(--text-2);
  font-family: Esse, system-ui, sans-serif;
  font-size: 0.7rem;
}
.promo-clock {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex: none;
  font-family: "Esse Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}
.promo-clock span:not(.promo-left) {
  padding: 0.1rem 0.35rem;
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  background: rgb(255 255 255 / 0.06);
}
.promo-left {
  margin-right: 0.2rem;
  font-family: Esse, system-ui, sans-serif;
  color: var(--text-3);
}
.promo-close {
  position: absolute;
  top: 50%;
  right: var(--s2);
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border: 1px solid transparent;
  border-radius: var(--r-2);
  background: none;
  color: var(--text-3);
  cursor: pointer;
  translate: 0 -50%;
}
.promo-close:hover {
  border-color: var(--line-2);
  color: var(--text);
}
.has-promo .site-bar:not([data-floating]) {
  top: var(--promo-h, 2.75rem);
}
/* Am Handy darf die Leiste zwei Zeilen haben; die Kopfzeile rückt um die echte Höhe nach unten (--promo-h) */
@media (max-width: 639px) {
  .promo {
    flex-wrap: wrap;
    height: auto;
    min-height: 2.75rem;
    padding: var(--s2) 2.75rem;
    row-gap: var(--s1);
    white-space: normal;
    text-align: center;
  }
  .promo-text {
    justify-content: center;
    width: 100%;
  }
  .promo-code span {
    display: none;
  }
}

/* ---------- Bilder im Wechsel auf Paketkarten ----------
   Bilder liegen übereinander und blenden weich über, mit einem kleinen Zug in Richtung des Wechsels. Oben Striche mit
   Fortschritt, an den Seiten Pfeile, unten rechts Anhalten. Pfeile und Anhalten erscheinen beim Drüberfahren,
   am Handy stehen sie immer da. */
.package-media.has-slides .slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.035) translateX(calc(var(--dir, 1) * 1.5%));
  transition:
    opacity 0.9s var(--ease),
    transform 1.4s var(--ease);
}
.package-media.has-slides .slide.is-on {
  opacity: 1;
  transform: none;
}
.package-card:hover .package-media.has-slides .slide.is-on {
  transform: scale(1.04);
}
.media-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.package-media.has-slides .media-top {
  top: calc(var(--s3) + 0.6rem);
}
.package-media.has-slides .media-top,
.package-media.has-slides .flags {
  z-index: 2;
}
.slides-bar {
  position: absolute;
  z-index: 2;
  top: var(--s2);
  left: var(--s3);
  right: var(--s3);
  display: flex;
  gap: 0.3rem;
  pointer-events: none;
}
.slides-bar i {
  flex: 1;
  height: 3px;
  overflow: hidden;
  border-radius: 2px;
  background: rgb(255 255 255 / 0.22);
}
.slides-bar b {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--text);
  transform: scaleX(0);
  transform-origin: left;
}
.slides-bar .is-done b {
  transform: none;
}
.slides-bar .is-on b {
  animation: slide-fill 5s linear forwards;
  animation-play-state: paused;
}
.is-visible > .slides-bar .is-on b {
  animation-play-state: running;
}
.slides-paused .slides-bar .is-on b {
  animation: none;
  transform: none;
  opacity: 0.85;
}
@keyframes slide-fill {
  to {
    transform: none;
  }
}
.slides-nav {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.slide-btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: var(--r-2);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.14), rgb(255 255 255 / 0.04)), rgb(18 15 13 / 0.6);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 6px 18px -8px rgb(0 0 0 / 0.9);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: var(--text);
  font-size: 0.8rem;
  cursor: pointer;
  pointer-events: auto;
  opacity: 0;
  transition:
    opacity 0.3s ease,
    transform 0.4s var(--ease),
    border-color 0.2s ease;
}
.slide-btn:hover {
  border-color: rgb(255 255 255 / 0.3);
}
.slide-btn:active {
  transform: scale(0.94);
}
.slide-prev,
.slide-next {
  top: 50%;
  margin-top: -1.125rem;
}
.slide-prev {
  left: var(--s3);
  transform: translateX(-6px);
}
.slide-next {
  right: var(--s3);
  transform: translateX(6px);
}
.slide-pause {
  right: var(--s3);
  bottom: var(--s3);
  width: 2rem;
  height: 2rem;
  font-size: 0.7rem;
}
.package-card:hover .slide-btn,
.package-media:has(:focus-visible) .slide-btn,
.slides-paused .slide-pause {
  opacity: 1;
  transform: none;
}
@media (hover: none) {
  .slide-btn {
    opacity: 1;
    transform: none;
  }
  .slide-prev,
  .slide-next {
    width: 2rem;
    height: 2rem;
    margin-top: -1rem;
  }
}

/* ---------- Bewegung ----------
   Alles hier hängt an Klassen, die emergencyforge.js setzt; ohne JavaScript bleiben die Knöpfe ruhig. Bei
   reduzierter Bewegung schaltet der Block darunter Übergänge und Animationen ab. */
:root {
  --spring: cubic-bezier(0.34, 1.4, 0.5, 1);
}

/* Kaufknöpfe: der Klick zeigt kurz "Im Warenkorb" mit Haken und ein paar Funken, dann lädt Tebex die Seite */
.btn-add .btn-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: inherit;
  transition:
    transform 0.45s var(--ease),
    opacity 0.3s ease;
}
/* In der Knopfreihe sind Knöpfe sonst beschnitten, damit lange Texte schrumpfen; der Kaufknopf schrumpft dort nie */
.button-row .btn-add {
  overflow: visible;
}
.btn-add .btn-label-done {
  position: absolute;
  inset: 0;
  transform: translateY(60%);
  opacity: 0;
}
.btn-add.is-added,
.btn-add.is-added:hover {
  border-color: rgb(134 239 172 / 0.45);
  background: linear-gradient(180deg, #2b3a2e, #1d2820);
  color: var(--green);
  animation: none;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.12),
    0 10px 26px -14px rgb(134 239 172 / 0.6);
}
.btn-add.is-added::before,
.btn-add.is-added::after {
  opacity: 0;
}
.btn-add.is-added .btn-label:not(.btn-label-done) {
  transform: translateY(-60%);
  opacity: 0;
}
.btn-add.is-added .btn-label-done {
  transform: none;
  opacity: 1;
}
.spark {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 1px;
  background: #ffc46b;
  box-shadow: 0 0 8px #ff6a2b;
  pointer-events: none;
  animation: spark 0.8s var(--ease) forwards;
}
@keyframes spark {
  from {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  to {
    transform: translate(var(--dx), var(--dy)) scale(0.3);
    opacity: 0;
  }
}

/* Knöpfe, die weiterführen (Zum Warenkorb, Zur Kasse): das Symbol kippt weg und wird klein, der Pfeil dreht sich
   federnd aus der Gegenrichtung herein */
.go-ico {
  position: relative;
  display: inline-block;
  width: 1.15em;
  height: 1.25rem;
  flex: none;
}
.go-ico i {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transition:
    transform 0.55s var(--spring),
    opacity 0.25s ease;
}
.go-ico .go-in {
  transform: rotate(-120deg) scale(0.3);
  opacity: 0;
}
.btn-go:hover .go-ico .go-out {
  transform: rotate(90deg) scale(0.3);
  opacity: 0;
  transition:
    transform 0.4s var(--ease),
    opacity 0.2s ease;
}
.btn-go:hover .go-ico .go-in {
  transform: none;
  opacity: 1;
  translate: none;
  transition-delay: 0.08s;
}

/* Normale Knöpfe (grau und Discord): beim Drüberfahren läuft von links die Farbe der Marke hinein, die Schrift wechselt
   mit. Grau füllt sich cremefarben, Discord-Links blau, der blaue Discord-Knopf hell. Die Füllung liegt hinter dem Inhalt
   (isolation), darum braucht es kein Extra-Element. */
.btn-secondary,
.btn-discord {
  isolation: isolate;
  overflow: hidden;
  transition:
    color 0.35s ease 0.05s,
    border-color 0.35s ease,
    background 0.35s var(--ease),
    box-shadow 0.35s var(--ease),
    transform 0.15s ease;
}
.btn-secondary::before,
.btn-discord::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--fill, var(--text));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.btn-secondary:not(.is-disabled):not(:disabled):hover::before,
.btn-discord:hover::before {
  transform: none;
}
.btn-secondary:not(.is-disabled):not(:disabled):hover {
  color: var(--ink);
  border-color: transparent;
}
.btn-secondary[href*="discord"],
.btn-secondary[data-link="discord"] {
  --fill: #5865f2;
}
.btn-secondary[href*="discord"]:not(.is-disabled):not(:disabled):hover,
.btn-secondary[data-link="discord"]:not(.is-disabled):not(:disabled):hover {
  color: #fff;
}
.btn-discord {
  --fill: var(--text);
}
/* "Ansehen" in der großen Bento-Kachel füllt sich, sobald der Zeiger auf der Kachel liegt */
.bento-tile:hover .bento-cta::before {
  transform: none;
}
.bento-tile:hover .bento-cta {
  color: var(--ink);
  border-color: transparent;
}
.btn-discord:hover {
  color: #4752c4;
}

/* Kategorienleiste: ein Stück Glas gleitet federnd unter den Reiter, über dem die Maus steht, und kehrt beim
   Verlassen zur offenen Kategorie zurück. Das Symbol im Reiter nickt dabei kurz. */
.section-mark {
  position: absolute;
  top: 0.3rem;
  bottom: 0.3rem;
  left: 0;
  z-index: 0;
  width: 0;
  border-radius: var(--r-2);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.15), rgb(255 255 255 / 0.05));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.26),
    inset 0 0 0 1px rgb(255 255 255 / 0.07),
    0 4px 12px -6px rgb(0 0 0 / 0.8);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.5s var(--spring),
    width 0.5s var(--spring),
    opacity 0.25s ease;
}
.section-mark.is-shown {
  opacity: 1;
}
.section-bar[data-glide] .section-link {
  position: relative;
  z-index: 1;
}
.section-bar[data-glide] .section-link.is-active {
  background: none;
  box-shadow: none;
}
.section-bar:not([data-glide]) .section-link:not(.is-active):hover {
  background: rgb(255 255 255 / 0.06);
}
.section-link i {
  transition:
    transform 0.4s var(--ease),
    color 0.25s ease,
    opacity 0.25s ease;
}
.section-link:hover i {
  transform: translateY(-1px) scale(1.12);
  opacity: 1;
}

/* Paketkarten neigen sich leicht zum Mauszeiger, nur solange er darauf ist; in Ruhe bleibt die Karte flach, damit die
   Schrift scharf bleibt. Die Übergänge vom Aufsteigen beim Hereinscrollen bleiben drin. */
.js .package-card[data-tilt] {
  transition:
    opacity 0.7s var(--ease) var(--d, 0s),
    translate 0.7s var(--ease) var(--d, 0s),
    transform 0.6s var(--ease),
    border-color 0.3s ease,
    box-shadow 0.5s var(--ease);
}
.js .package-card[data-tilt]:hover {
  transform: perspective(900px) translateY(-3px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}
.js .package-card[data-tilt].is-tilting {
  transition:
    opacity 0.7s var(--ease) var(--d, 0s),
    translate 0.7s var(--ease) var(--d, 0s),
    transform 0.2s ease-out,
    border-color 0.3s ease,
    box-shadow 0.5s var(--ease);
}

/* Warenkorb: kam seit der letzten Seite ein Paket dazu, hebt sich die Zahl sanft, ein feiner Ring läuft aus und die
   Tasche neigt sich einmal leicht. Bewusst ruhig. */
.basket-count.is-pop {
  animation: basket-pop 0.8s var(--ease);
}
.basket-count.is-pop::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid rgb(255 106 43 / 0.6);
  border-radius: inherit;
  pointer-events: none;
  animation: basket-ring 1s var(--ease) forwards;
}
.basket-pill.is-nudge > i:first-child {
  animation: basket-nudge 0.8s var(--ease);
}
@keyframes basket-pop {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.18);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes basket-ring {
  from {
    opacity: 0.6;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(1.7);
  }
}
@keyframes basket-nudge {
  0%,
  100% {
    transform: rotate(0);
  }
  35% {
    transform: rotate(-6deg);
  }
  65% {
    transform: rotate(3deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] {
    opacity: 1;
    translate: none;
  }
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}