/* 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: "Geist", "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,
.card-stack-item,
.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,
.cta,
.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 {
  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 {
  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 {
  opacity: 1;
  animation: btn-haze 3.4s linear infinite;
}
.btn-primary:hover::after {
  opacity: 0.55;
  animation: btn-bloom 3.4s ease-in-out infinite;
}
.btn-primary: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 {
  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);
}
.btn-soft:hover,
.card-link:hover .btn-soft {
  border-color: rgb(255 138 80 / 0.55);
  background: linear-gradient(180deg, #ff6c22, #ff4d00 55%, #f04500);
  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 10px 24px -12px rgb(255 77 0 / 0.75);
}
.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);
}
/* Angemeldet: Name und Person rollen beim Drüberfahren nach oben weg, "Abmelden?" und die Tür kommen von unten */
.roll {
  display: inline-grid;
  overflow: hidden;
  height: 1.25rem;
  line-height: 1.25rem;
}
.roll > * {
  grid-area: 1 / 1;
  transition:
    transform 0.45s var(--ease),
    opacity 0.3s ease;
}
.roll > :last-child {
  transform: translateY(100%);
  opacity: 0;
}
.roll-icon {
  width: 1em;
  place-items: center;
}
.bar-user:hover .roll > :first-child,
.bar-user:focus-visible .roll > :first-child {
  transform: translateY(-100%);
  opacity: 0;
}
.bar-user:hover .roll > :last-child,
.bar-user:focus-visible .roll > :last-child {
  transform: none;
  opacity: 1;
}
.bar-user:hover,
.bar-user:focus-visible {
  color: #fca5a5;
}
@media (max-width: 639px) {
  .roll.hide-sm {
    display: none;
  }
}
.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;
}

.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;
}
.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);
}
.crumbs [aria-current] {
  color: var(--text-2);
}

/* 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;
}

.cards {
  display: grid;
  gap: var(--s5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}
/* Kategorie-Karten. Oben Icon, rechts Nummer und Pfeil, unten Name, Kurztext, Tags und eine Zeile mit Anzahl und Preis;
   rechts unten ein Stapel aus Paketbildern. Bei einer oder zwei Kategorien liegt alles in einer Reihe über die Breite:
   Icon, Text, Bilder, Pfeil. Was Tebex auf der Startseite nicht mitliefert, holt emergencyforge.js aus der Kategorieseite. */
.category-card {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
  min-height: 15rem;
  padding: var(--s5);
}
.card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s3);
}
.card-top-end {
  display: flex;
  align-items: center;
  gap: var(--s4);
}
.card-text {
  display: grid;
  justify-items: start;
  gap: var(--s2);
  min-width: 0;
  margin-top: auto;
}
.category-card:has(.card-stack:not([hidden])) .card-text {
  padding-right: 8.5rem;
}
.card-short {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  max-width: 52ch;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-2);
}
.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" */
.category-card.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;
}
.category-card.is-loading .card-meta i {
  visibility: hidden;
}
@keyframes shimmer {
  to {
    background-position: -200% 0;
  }
}
.category-card .is-new {
  animation: card-fill 0.6s var(--ease) both;
}
@keyframes card-fill {
  from {
    opacity: 0;
    translate: 0 4px;
  }
}
.cards:not([data-count="many"]) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}
/* Eine oder zwei Kategorien: eine Reihe, alles mittig */
.cards:not([data-count="many"]) .category-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--s6);
  min-height: 0;
  padding: var(--s6);
}
.cards:not([data-count="many"]) .card-top {
  display: contents;
}
.cards:not([data-count="many"]) .card-icon {
  grid-column: 1;
  grid-row: 1;
  width: 4rem;
  height: 4rem;
  font-size: 1.4rem;
}
.cards:not([data-count="many"]) .card-text {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  padding: 0;
}
.cards:not([data-count="many"]) .card-stack {
  position: static;
  grid-column: 3;
  grid-row: 1;
  margin-right: var(--s4);
}
.cards:not([data-count="many"]) .card-stack-item {
  width: 6.5rem;
}
.cards:not([data-count="many"]) .card-stack-item + .card-stack-item {
  margin-left: -2.6rem;
}
.cards:not([data-count="many"]) .card-top-end {
  grid-column: 4;
  grid-row: 1;
}
.cards:not([data-count="many"]) .card-go {
  position: static;
  width: 2.75rem;
  height: 2.75rem;
}
.cards[data-count="2"] .card-stack {
  display: none;
}
@media (max-width: 519px) {
  .card-meta .meta-free,
  .card-meta .meta-free + .dot,
  .card-meta .dot:has(+ .meta-free) {
    display: none;
  }
}
@media (max-width: 719px) {
  .cards:not([data-count="many"]) .category-card {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--s4);
    padding: var(--s5);
  }
  .cards:not([data-count="many"]) .card-stack {
    display: none;
  }
  .cards:not([data-count="many"]) .card-top-end {
    grid-column: 3;
  }
  .cards:not([data-count="many"]) .card-icon {
    width: 3rem;
    height: 3rem;
    font-size: 1.15rem;
  }
}
.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-index {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.8125rem;
  color: var(--text-3);
}
.card-title {
  font-size: 1.75rem;
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.1;
}
.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);
}
.price-free {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.75rem;
  border: 1px solid rgb(134 239 172 / 0.3);
  background: rgb(134 239 172 / 0.08);
  color: var(--green);
  font-size: 0.875rem;
  font-weight: 500;
}
.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 {
  padding: var(--s2) var(--s4);
  font-size: 1.125rem;
}
.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, Badges und die kleinen Hinweise auf dem Bild einer Karte. Alle in Geist Mono und Großbuchstaben, damit sie
   sich wie Beschriftungen an einem Gerät lesen und nicht mit dem Text verwechselt werden. */
.badge,
.ribbon,
.tag,
.flag {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
}
/* Rabatt: gefüllt orange, unten rechts schräg abgeschnitten */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.65rem 0.3rem 0.55rem;
  background: linear-gradient(180deg, #ff6c22, #ff4d00);
  color: var(--ink);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%);
  filter: drop-shadow(0 4px 10px rgb(255 77 0 / 0.55));
}
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--line-2);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0.015));
  color: var(--text-2);
}
.tag i {
  font-size: 0.65rem;
  color: var(--orange-text);
}
/* Badge aus der Steuerzeile: dunkles Glas mit oranger Kante links */
.ribbon {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.6rem 0.3rem 0.55rem;
  border: 1px solid rgb(255 106 43 / 0.35);
  background: linear-gradient(90deg, rgb(255 77 0 / 0.2), rgb(30 18 12 / 0.85) 60%);
  box-shadow: inset 2px 0 0 var(--orange);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #ff8a4a;
}
.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;
  border: 1px solid rgb(255 255 255 / 0.12);
  background: var(--glass);
  box-shadow: 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"
      "about buy";
    align-items: start;
    column-gap: var(--s7);
    row-gap: var(--s8);
  }
  .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: links die Vorschaubilder als Stapel, rechts Zähler, Pfeile und Anhalten */
.gallery-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  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);
}
.gallery-ctrl {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex: none;
}
.gallery-ctrl .slide-btn {
  position: static;
  opacity: 1;
  transform: none;
}
.gallery-count {
  min-width: 3.25rem;
  margin-right: var(--s1);
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--text-3);
}
@media (max-width: 520px) {
  .gallery-thumbs button {
    width: 4.25rem;
  }
  .gallery-thumbs button + button {
    margin-left: -2rem;
  }
  .gallery-count {
    display: none;
  }
}
.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);
  }
}
.buybox > .btn-ghost {
  justify-self: start;
  margin-top: calc(var(--s3) * -1);
}
.assurances {
  display: grid;
  gap: var(--s3);
  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);
}
.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 {
  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: "Geist 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: "Geist 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: "Geist 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;
}

/* Startseite: kleiner Stapel aus Paketbildern unten rechts in der Kategorie-Karte */
.card-stack {
  position: absolute;
  right: var(--s5);
  bottom: var(--s5);
  display: flex;
}
.card-stack-item {
  display: grid;
  place-items: center;
  width: 3.5rem;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--line-2);
  background: #0d0b0a;
  box-shadow: 0 8px 18px -8px rgb(0 0 0 / 0.9);
  transition: transform 0.5s var(--ease);
}
.card-stack-item + .card-stack-item {
  margin-left: -1.4rem;
}
.card-stack-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card-stack-item svg {
  width: 60%;
  height: 60%;
  fill: rgb(243 235 228 / 0.15);
}
.card-stack-item:nth-child(1) {
  transform: rotate(-6deg);
}
.card-stack-item:nth-child(3) {
  transform: rotate(6deg);
}
.card-link:hover .card-stack-item:nth-child(1) {
  transform: rotate(-10deg) translate(-6px, -2px);
}
.card-link:hover .card-stack-item:nth-child(2) {
  transform: translateY(-4px);
}
.card-link:hover .card-stack-item:nth-child(3) {
  transform: rotate(10deg) translate(6px, -2px);
}

/* 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);
}

/* "Noch Fragen?" vor dem Fuß: erhoben, mit einem blauen Licht vom Discord-Knopf her */
.cta-wrap {
  padding-bottom: var(--s9);
}
.main + .cta-wrap {
  margin-top: calc(var(--s9) * -0.5);
}
.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s6);
  overflow: hidden;
  padding: var(--s7);
}
.cta::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: -6rem;
  top: 50%;
  width: 28rem;
  height: 20rem;
  transform: translateY(-50%);
  background: radial-gradient(closest-side, rgb(88 101 242 / 0.18), transparent);
  pointer-events: none;
}
.cta > * {
  position: relative;
  z-index: 1;
}
.cta-text {
  display: grid;
  gap: var(--s3);
  max-width: 40rem;
}
.cta .body {
  font-size: 1.0625rem;
}
@media (max-width: 640px) {
  .cta {
    padding: var(--s6) var(--s5);
  }
  .cta .btn {
    width: 100%;
  }
}

/* Fuß: Marke mit Satz, drei Spalten, unten Rechtliches und zwei Zusagen. 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;
}
.footer-top {
  position: relative;
  display: grid;
  gap: var(--s7) var(--s6);
  padding-top: var(--s8);
  padding-bottom: var(--s8);
}
.footer-top {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.footer-brand {
  grid-column: 1 / -1;
}
@media (min-width: 900px) {
  .footer-top {
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  }
  .footer-brand {
    grid-column: auto;
  }
}
.footer-brand {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--s4);
}
.footer-brand .brand {
  font-size: 1.25rem;
}
.footer-brand .brand-mark {
  width: 2.75rem;
  height: 1.6rem;
}
.footer-brand p {
  max-width: 34ch;
  color: var(--text-3);
  line-height: 1.6;
}
.footer-col {
  display: grid;
  align-content: start;
  gap: var(--s3);
}
.footer-col h2 {
  margin-bottom: var(--s1);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.footer-col a {
  justify-self: start;
  color: var(--text-2);
  transition: color 0.2s ease;
}
.footer-col a:hover {
  color: var(--text);
}
.footer-bottom {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding-top: var(--s5);
  padding-bottom: var(--s7);
  font-size: 0.875rem;
  color: var(--text-3);
}
.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-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
}
.footer-trust span {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
}
.footer-trust i {
  color: var(--orange-text);
}

/* 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 ----------
   Oben die Frameworks als Raster mit Haken, darunter Kacheln für Quellcode, OneSync, Abhängigkeiten und Sprache */
.tech {
  display: grid;
  gap: var(--s4);
  margin: 0 0 var(--s7);
  padding: var(--s5);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  background: var(--surface-1);
  box-shadow: var(--shadow-1);
}
.tech-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s1) var(--s4);
}
.tech-title {
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.tech-stand {
  font-size: 0.8125rem;
  color: var(--text-3);
}
.compat {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: var(--s2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.fw {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  font-size: 0.9375rem;
  font-weight: 500;
}
.fw.is-yes {
  border-color: rgb(134 239 172 / 0.25);
  background: linear-gradient(180deg, rgb(134 239 172 / 0.07), rgb(134 239 172 / 0.02));
}
.fw.is-yes i {
  color: var(--green);
}
.fw.is-no {
  color: var(--text-3);
}
.fw.is-no i {
  color: rgb(243 235 228 / 0.25);
}
.tech .specs {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
  margin: 0;
}
.tech .spec {
  background: rgb(255 255 255 / 0.02);
  box-shadow: none;
}
.tech .spec dd {
  display: flex;
  align-items: center;
  gap: var(--s2);
}
.tech .spec dd i {
  color: var(--orange-text);
  font-size: 0.9em;
}

/* ---------- 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 .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;
}

/* ---------- 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 {
  animation: auth-in 0.5s var(--ease) both;
}
@keyframes auth-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }
}
.auth-modal .login {
  position: relative;
  margin: 0;
  max-width: none;
}
.auth-close {
  position: absolute;
  top: var(--s3);
  right: var(--s3);
  z-index: 2;
}
.auth-loading .body {
  color: var(--text-3);
}

/* ---------- 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: "Geist 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: Geist, system-ui, sans-serif;
  font-size: 0.7rem;
}
.promo-clock {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex: none;
  font-family: "Geist 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: Geist, 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;
}

/* Links nach außen: das Symbol hebt sich, rechts erscheint ein kleiner Pfeil nach oben rechts. Der Inhalt rückt
   dafür ein Stück nach links, damit der Knopf gleich breit bleibt und die Reihe nicht springt. */
.btn-out .btn-label {
  display: inline-flex;
  align-items: center;
  gap: inherit;
  transition: translate 0.4s var(--ease);
}
.btn-out .btn-label > i:first-child {
  transition:
    transform 0.4s var(--ease),
    color 0.3s ease;
}
.btn-out .btn-ext {
  position: absolute;
  top: 50%;
  right: 0.7rem;
  margin-top: -0.35em;
  font-size: 0.7em;
  line-height: 1;
  opacity: 0;
  transform: translate(-4px, 4px);
  transition:
    transform 0.4s var(--ease),
    opacity 0.3s ease;
}
.btn-sm.btn-out .btn-ext {
  right: 0.45rem;
}
.btn-out:hover .btn-label {
  translate: -0.45rem 0;
}
.btn-sm.btn-out:hover .btn-label {
  translate: -0.3rem 0;
}
.btn-out:hover .btn-label > i:first-child {
  transform: translateY(-1px) scale(1.08);
}
.btn-secondary.btn-out:hover .btn-label > i:first-child {
  color: var(--orange-text);
}
.btn-out:hover .btn-ext {
  opacity: 1;
  transform: none;
}

/* 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;
  }
}