/* ============================================================
   SYSTEM.CSS — one visual frame for every page
   ------------------------------------------------------------
   Loaded LAST on every page. Holds nothing new-looking: it takes
   the strongest pattern already in the site (the Bundles hero)
   and makes it the shared standard, so Kits, Plugins and Bundles
   read as chapters of one site instead of three separate ones.

   Tokens come from style.css :root — no new colors are invented
   here. Anything hard-coded below is an existing brand value
   (--fire #FF4400, --amber #E89040, --text #F8F5E4).
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   1. CATALOG HERO — Kits / Plugins adopt the Bundles treatment
   Was: centered, 56px, 760px column, a lot of dead air.
   Now: left-aligned statement type with warm light from the top
   left, matching bundles.html exactly.
   ───────────────────────────────────────────────────────────── */

/* Der Bundles-Hero endete bei 34px, Katalog- und Kit-Hero bei 48px.
   Alle drei sind derselbe Seitenanfang — also dasselbe Maß. */
.bundles-hero {
  padding-bottom: 48px;
}

.catalog-hero {
  position: relative;
  overflow: hidden;
  /* matches .bundles-hero rhythm */
  padding: calc(var(--nav-h) + 46px) 0 48px;
  border-bottom: 1px solid rgba(255, 103, 48, 0.22);
  background:
    radial-gradient(circle at 18% 10%, rgba(255, 68, 0, 0.18), transparent 32%),
    radial-gradient(circle at 78% 28%, rgba(232, 144, 64, 0.12), transparent 36%),
    linear-gradient(180deg, rgba(16, 9, 7, 0.98) 0%, rgba(8, 6, 6, 0.92) 100%);
}

/* Plugins keeps its cooler cast — it is the DNA Plugins chapter —
   but now within the same structure and the same warm floor. */
.catalog-hero--plugins {
  background:
    radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.10), transparent 32%),
    radial-gradient(circle at 78% 28%, rgba(232, 144, 64, 0.08), transparent 36%),
    linear-gradient(180deg, rgba(12, 10, 10, 0.98) 0%, rgba(8, 6, 6, 0.92) 100%);
}

/* The glow pool + the faint vertical rule grid, lifted from
   .bundles-hero so all three catalog pages share one surface. */
.catalog-hero::before,
.catalog-hero::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

.catalog-hero::before {
  inset: auto -12% -45% 36%;
  height: 220px;
  background: radial-gradient(ellipse at center, rgba(255, 68, 0, 0.22), transparent 68%);
  filter: blur(18px);
}

.catalog-hero::after {
  inset: 0;
  opacity: 0.18;
  background:
    linear-gradient(115deg, transparent 0 46%, rgba(255, 255, 255, 0.06) 47%, transparent 49%),
    repeating-linear-gradient(90deg, transparent 0 72px, rgba(255, 255, 255, 0.035) 73px, transparent 74px);
  mix-blend-mode: screen;
}

/* Kill the old centered 760px column. */
.catalog-hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  text-align: left;
}

.catalog-hero__inner .section-heading {
  margin-bottom: 0;
  font-size: clamp(46px, 8vw, 86px);
  letter-spacing: -0.06em;
  text-shadow:
    0 0 34px rgba(255, 68, 0, 0.22),
    0 10px 44px rgba(0, 0, 0, 0.55);
}

/* Lead paragraph — same measure and color as .bundles-hero__lead
   so the three heroes are typographically interchangeable. */
.catalog-hero__lead {
  max-width: 540px;
  margin: 22px 0 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  color: rgba(244, 239, 231, 0.6);
}

/* .section-sub was centered by style.css for this hero — undo. */
.catalog-hero .section-sub {
  margin: 18px 0 0;
  text-align: left;
}

/* ─────────────────────────────────────────────────────────────
   2. MOBILE — hero eyebrow and header crowding
   ───────────────────────────────────────────────────────────── */

/* The "BOUNCE FROM FRANKFURT" pill was orange text on an orange
   border with nothing behind it. Over the bright part of the fire
   footage it disappeared. It now carries its own dark ground so
   the brand colour stays readable on every frame of the scrub. */
.video-scrub__hl-tag {
  background: rgba(10, 6, 5, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-color: rgba(255, 68, 0, 0.55);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7);
}

/* The producer carousel slides its pages in from off-screen using a
   translate of up to 7rem. With nothing clipping them, those pages
   stuck out past the viewport and the whole home page could be
   dragged sideways on a phone. `clip` rather than `hidden` so the
   scroll-pinned sections above keep working. */
.featured-producer {
  overflow-x: clip;
}

/* The carousel viewport is a grid whose single track is sized in fixed
   pixels, so on a phone the track (364px) stayed wider than the column
   holding it (327px) and the producer card was cut off on the right
   while keeping its full gutter on the left. Letting the track shrink
   to the column puts the card square between both gutters. */
@media (max-width: 600px) {
  /* Selector mirrors kit-vol2.css so it actually wins: that file sets
     the track to `1fr`, whose implicit auto minimum is the card's
     min-content width — the track then grows past its own column
     instead of shrinking. minmax(0, …) + min-width:0 releases it. */
  #demos.fp-demos-carousel .fp-carousel__viewport,
  .fp-carousel__viewport {
    grid-template-columns: minmax(0, 1fr);
  }

  #demos.fp-demos-carousel .fp-carousel__page,
  .fp-carousel__page {
    min-width: 0;
    max-width: 100%;
  }

  .fp-carousel__page .fp-card {
    min-width: 0;
    max-width: 100%;
  }
}

@media (max-width: 600px) {
  /* Narrow screens put the pill over the hottest part of the frame,
     so it holds a slightly denser ground and a tighter track. */
  .video-scrub__hl-tag {
    max-width: calc(100vw - 48px);
    padding: 6px 13px;
    letter-spacing: 0.14em;
    background: rgba(10, 6, 5, 0.68);
  }

  /* Logo + EXPLORE + burger were fighting for one row.
     The burger owns the right edge; EXPLORE steps down a size. */
  .nav__inner {
    gap: 10px;
  }

  .btn--nav {
    font-size: 11px;
    padding: 9px 13px;
    letter-spacing: 0.06em;
  }

  /* Feature chips broke 2-1-2 and looked accidental.
     Even distribution reads as a deliberate row. */
  .bundle-card__features,
  .kit-card__tags,
  .catalog-card__tags {
    gap: 8px;
  }
}

/* ─────────────────────────────────────────────────────────────
   3. FOOTER — one floor under every page
   style.css gave the footer a flat --bg fill, so on pages whose
   last section ends dark (aura, kit pages) the seam was invisible
   and on warm pages it was a hard edge. One soft floor + one
   hairline, applied everywhere, so the page always lands.
   ───────────────────────────────────────────────────────────── */

.footer {
  background: linear-gradient(180deg, #070707 0%, var(--bg) 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.045);
}

/* ─────────────────────────────────────────────────────────────
   4. QUALITY FLOOR
   ───────────────────────────────────────────────────────────── */

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

/* ─────────────────────────────────────────────────────────────
   5. NEW RELEASE — the current drop on the home page
   Sits directly under the video hero, so the newest kit is the
   first thing after the scroll. Only the section frame is new;
   the product card inside reuses .kit-catalog__* from kits.html
   so the same kit looks identical on both pages.
   ───────────────────────────────────────────────────────────── */

.home-release {
  position: relative;
  z-index: 2;
  padding: 96px 0 84px;
  border-top: 1px solid rgba(255, 255, 255, 0.045);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 68, 0, 0.07), transparent 38%),
    linear-gradient(180deg, var(--bg) 0%, #0a0908 100%);
}

.home-release__head {
  max-width: 720px;
  margin: 0 auto 44px;
  text-align: center;
}

/* One card in a grid built for a stack — cap it so a single
   release does not stretch to the full 1200px container. */
.home-release .kit-catalog__grid {
  max-width: 940px;
  margin: 0 auto;
}

@media (max-width: 720px) {
  .home-release {
    padding: 68px 0 60px;
  }

  .home-release__head {
    margin-bottom: 32px;
  }
}

/* ─────────────────────────────────────────────────────────────
   6. RESPONSIVE IMAGES
   The <img> tags are wrapped in <picture> to offer AVIF/WebP with
   a PNG/JPG fallback. `display: contents` makes the wrapper
   disappear from layout, so every existing rule that targets
   `.some-container img` or positions the image absolutely keeps
   working exactly as before.
   ───────────────────────────────────────────────────────────── */

picture {
  display: contents;
}

/* `display: contents` promotes a picture's CHILDREN to items of the
   grid/flex parent — including its <source> tags. In a 2x2 cover grid
   that turned 4 cells into 12 and pushed every image one slot further
   down. The sources carry no visual content, so they are taken out of
   layout entirely. */
picture > source {
  display: none;
}

/* ─────────────────────────────────────────────────────────────
   7. KARTEN — ein Hover für alle Produktkarten
   Die Karten wurden vorher von cards3d.js als Three.js-Geometrie
   nachgebaut (Tilt, Glanz, Env-Reflexion) und das echte HTML
   ausgeblendet. Das ist raus. Was bleibt, ist das, was ein Hover
   sagen muss: die Karte hebt sich an, weil sie anklickbar ist.

   Vorher liefen fünf Kartentypen mit fünf Dauern (.25s / .3s /
   .35s / .4s / .45s) und drei verschiedenen Hubhöhen (-2 / -3 /
   -5px). Jetzt: ein Hub, eine Dauer, ein Schatten.
   ───────────────────────────────────────────────────────────── */

:root {
  /* Ein Takt für alles, was auf eine Geste antwortet. */
  --t-hover: 180ms;
  --t-quick: 150ms;
  --ease-ui: cubic-bezier(0.22, 0.61, 0.36, 1);

  --card-lift: -3px;
  --card-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  --card-shadow-hover: 0 14px 42px rgba(0, 0, 0, 0.62);
}

.home-gateway__card,
.kit-catalog__card,
.bundle-card,
.kit-hero__pair,
.kit-addon__card {
  transition:
    transform var(--t-hover) var(--ease-ui),
    box-shadow var(--t-hover) var(--ease-ui),
    border-color var(--t-hover) var(--ease-ui);
}

.home-gateway__card:hover,
.kit-catalog__card:hover,
.bundle-card:hover,
.kit-hero__pair:hover,
.kit-addon__card:hover {
  transform: translateY(var(--card-lift));
  box-shadow: var(--card-shadow-hover);
}

/* Die Katalogkarte hatte als einzige gar keinen Schatten im Hover —
   sie verschob sich nur. Jetzt hebt sie sich wie die anderen. */
.kit-catalog__card {
  box-shadow: var(--card-shadow);
}

/* Die Upsell-Karte leuchtete beim Hover zusätzlich orange auf (zwei
   radial-gradients direkt auf der Karte). Nach A.1 ist der Glow
   hinter der Karte weg — der auf der Karte geht mit. Der Rahmen
   allein zeigt schon genug an, dass sie reagiert. */
.kit-hero__pair--upsell:hover {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02) 44%, rgba(0, 0, 0, 0) 100%),
    rgba(18, 12, 10, 0.94);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    var(--card-shadow-hover);
}

/* Das Cover kippte im Hover um 12 Grad heraus — Rest des 3D-Looks. */
.kit-hero__pair--upsell:hover .kit-hero__pair-cover--one {
  transform: translateX(-3px) rotate(-8deg);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.14) inset;
}

/* ─────────────────────────────────────────────────────────────
   8. TYPOGRAFIE — eine Skala
   Der Bestand hatte 35 verschiedene Schriftgrößen, darunter
   9.5px, 10.5px, 13.5px und 14.5px. Halbe Pixel entstehen nicht
   aus einer Entscheidung, sondern aus Nachjustieren im Browser.
   Die px-Werte in den CSS-Dateien liegen jetzt auf 17 Stufen —
   hier stehen sie als Token, damit Neues sie benutzt statt eine
   18. Stufe zu erfinden.
   ───────────────────────────────────────────────────────────── */

:root {
  /* Mikro-Zone: Labels, Chips, Eyebrows, Meta-Zeilen */
  --fs-micro: 10px;
  --fs-label: 11px;
  --fs-meta: 12px;

  /* Lesezone */
  --fs-small: 13px;
  --fs-body: 15px;
  --fs-lead: 16px;

  /* Titel — fluid, damit zwischen Handy und Desktop nichts springt */
  --fs-h3: clamp(18px, 2.2vw, 22px);
  --fs-h2: clamp(26px, 4vw, 40px);
  --fs-h1: clamp(40px, 7vw, 72px);
  --fs-display: clamp(46px, 8vw, 86px);

  /* Zeilenlänge: unter 68 Zeichen bleibt ein Absatz lesbar,
     darüber verliert das Auge beim Rücksprung die Zeile. */
  --measure: 68ch;
}

/* Große Überschriften brechen sonst mit einem Wort in der letzten
   Zeile. `balance` verteilt die Zeilen gleichmäßig — der Browser
   macht das nur bis vier Zeilen, also gezielt auf Titel. */
h1, h2,
.section-heading,
.hero__title,
.bundles-hero__title,
.kit-hero__title,
.aura-hero__title,
.home-gateway__title {
  text-wrap: balance;
}

/* Fließtext bekommt eine Obergrenze in Zeichen statt in Pixeln,
   damit sie bei jeder Schriftgröße stimmt. Nur dort, wo wirklich
   Sätze stehen — nicht auf Karten-Innentexten, die ihre Breite
   von der Karte bekommen. */
.section-sub,
.catalog-hero__lead,
.bundles-hero__lead,
.statement__text,
.identity__text,
.bundle-detail-note {
  max-width: min(var(--measure), 100%);
}

/* Diese lagen bei 94 bis 152 Zeichen pro Zeile — der Lizenzhinweis
   unter den Bundles, die Notiz unter dem Kauf-Block und der
   FOSSIL-Hinweis. Sie stehen zentriert, brauchen also auch die
   Ränder, sonst rutscht der Block nach links. */
.bundles-license,
.kit-cta__sub,
.fossil-cta__note {
  max-width: min(62ch, 100%);
  margin-inline: auto;
}

/* ─────────────────────────────────────────────────────────────
   9. VERTIKALER RHYTHMUS
   30 Abschnitte hatten 24 verschiedene Padding-Kombinationen
   (120/120, 110/120, 96/104, 96/84, 80/120, 64/110 …). Beim
   Scrollen liest sich das als Unruhe: mal steht ein Abschnitt
   eng, mal weit, ohne dass der Unterschied etwas bedeutet.

   Jetzt ein Maß für alle. `.featured-producer` bleibt außen vor —
   die 200px oben fangen die sticky Hero-Sektion darüber ab.
   ───────────────────────────────────────────────────────────── */

:root {
  --section-y: 96px;
  --section-y-sm: 64px;
}

.statement,
.kits,
.producer-demos,
.home-playlist,
.identity,
.home-aura,
.home-gateway,
.kit-catalog,
.plugins-catalog,
.home-release,
.kit-addon,
.kit-stats,
.sample-browser,
.kit-cta,
.aura-intro,
.aura-demos,
.aura-specs,
.aura-cta,
.bundle-detail-section {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}

@media (max-width: 720px) {
  .statement,
  .kits,
  .producer-demos,
  .home-playlist,
  .identity,
  .home-aura,
  .home-gateway,
  .kit-catalog,
  .plugins-catalog,
  .home-release,
  .kit-addon,
  .kit-stats,
  .sample-browser,
  .kit-cta,
  .aura-intro,
  .aura-demos,
  .aura-specs,
  .aura-cta,
  .bundle-detail-section {
    padding-top: var(--section-y-sm);
    padding-bottom: var(--section-y-sm);
  }
}

/* ─────────────────────────────────────────────────────────────
   10. PRODUKTKARTEN — gleiche Höhe, gleiche Reihenfolge
   Nebeneinander stehende Karten waren unterschiedlich hoch, weil
   ihre Texte unterschiedlich lang sind. Der Button rutschte
   dadurch bei jeder Karte auf eine andere Höhe. Jetzt füllt die
   Karte ihre Zeile und die Aktion sitzt unten bündig.
   ───────────────────────────────────────────────────────────── */

/* Nur das Gateway-Raster stellt Karten nebeneinander (drei Spalten).
   Dort standen sie unterschiedlich hoch, weil die Texte unterschiedlich
   lang sind, und die Aktion sass bei jeder Karte auf anderer Hoehe.
   Ein Grid streckt seine Kinder von sich aus auf gleiche Hoehe — es
   fehlte nur die Struktur INNERHALB der Karte, die die Aktion nach
   unten schiebt.

   Die Kit- und Bundle-Listen sind bewusst ausgenommen: sie sind
   flex-column, ihre Karten stehen untereinander. Dort gibt es keine
   Nachbarkarte, zu der eine Hoehe passen muesste. */

.home-gateway__card {
  display: flex;
  flex-direction: column;
}

.home-gateway__copy {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.home-gateway__copy > :last-child {
  margin-top: auto;
}

/* Haupt- und Nebenaktion waren gleich laut. Der Kaufweg ist die
   gefüllte Fläche, alles andere führt nur weiter. */
.btn--ghost {
  font-weight: 500;
}

/* Ladezustand: zwischen Klick und Weiterleitung zum Checkout
   vergehen bei langsamer Verbindung mehrere Sekunden, in denen
   die Seite bisher aussah, als sei der Klick nicht angekommen.
   Die Beschriftung bleibt stehen (kein Breitensprung), sie wird
   nur gedimmt und bekommt einen laufenden Punkt. */
.btn.is-loading {
  pointer-events: none;
  opacity: 0.7;
}

.btn.is-loading::after {
  content: '';
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  margin-left: 0.6em;
  vertical-align: -0.1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btnSpin 0.7s linear infinite;
}

@keyframes btnSpin {
  to { transform: rotate(360deg); }
}

/* ─────────────────────────────────────────────────────────────
   11. BEDIENBARKEIT
   ───────────────────────────────────────────────────────────── */

/* Es gab keinen sichtbaren Fokus. Wer mit der Tastatur navigiert,
   sah nicht, wo er ist. `:focus-visible` zeigt ihn nur bei
   Tastatur, nicht nach einem Mausklick. */
:focus-visible {
  outline: 2px solid var(--fire, #FF4400);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Auf dunklem Orange ist Orange schlecht zu sehen — dort hell. */
.btn--fire:focus-visible,
.btn--primary:focus-visible,
.lemonsqueezy-button:focus-visible {
  outline-color: #F8F5E4;
}

/* Touch: alles Anklickbare mindestens 44px hoch. Kleine
   Icon-Buttons wachsen über die Trefferfläche, nicht optisch. */
@media (hover: none) {
  a[class*="btn"],
  button,
  .nav__link,
  .footer a,
  .finder__view-btn,
  .finder__nav-btn {
    min-height: 44px;
  }

  a[class*="btn"],
  button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Textlinks in Fließtext bleiben inline — dort würde ein
     44px-Block die Zeile auseinanderreißen. */
  p a,
  .footer__legal a {
    min-height: 0;
    display: inline;
  }
}

/* Kein horizontaler Scroll, egal was ein Kind an Breite mitbringt. */
html,
body {
  overflow-x: clip;
}

/* ─────────────────────────────────────────────────────────────
   12. KAUF-BUTTONS (eigener Shop)
   Die Kauf-Elemente waren <a> auf einen externen Checkout. Jetzt
   sind es <button>, weil sie keine Adresse mehr ansteuern, sondern
   eine Anfrage ausloesen. Ein <button> ist von sich aus per Tab
   erreichbar und per Enter und Leertaste bedienbar — ein <a> ohne
   href waere beides nicht.

   .btn bringt Schrift, Farbe und Form schon mit; ein <button>
   schleppt nur noch seinen eigenen Rahmen mit, der hier weg muss.
   ───────────────────────────────────────────────────────────── */

button.btn,
button.bundles-sticky-cta {
  border: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  color: inherit;
}

button.btn:disabled,
button.bundles-sticky-cta:disabled {
  cursor: wait;
}

/* Der Fehlerfall gehoert vor die Augen, nicht in die Konsole. Die
   Meldung liegt fest am unteren Rand ueber allem — so ist sie von
   jedem der Kauf-Buttons aus sichtbar (Preiszeile, Navigation,
   Sticky-Balken) und verschiebt an keiner Stelle das Layout. */
.checkout-error {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: calc(100% - 32px);
  max-width: 560px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 120, 90, 0.5);
  border-left-width: 3px;
  border-radius: 8px;
  background: rgba(32, 13, 10, 0.97);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
  color: #FFD9CC;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: 1.55;
  text-transform: none;
  letter-spacing: 0;
}

.checkout-error[hidden] {
  display: none;
}

.checkout-error__close {
  flex: 0 0 auto;
  margin: -4px -4px 0 0;
  padding: 0;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
}

.checkout-error__close:hover {
  opacity: 1;
}

/* Auf dem Handy sitzt der Sticky-Kaufbalken unten — die Meldung
   davor, sonst liegt sie darauf. */
@media (max-width: 720px) {
  .checkout-error {
    bottom: 84px;
  }
}

/* ── Widerrufsverzicht vor dem Kauf ────────────────────────────
   Pflicht-Haekchen nach § 356 Abs. 5 BGB. Bewusst nuechtern
   gehalten: Das ist kein Verkaufsmoment, sondern eine Formalie,
   die der Kaeufer gelesen haben muss. Ein Klick zu viel ist
   besser als ein Widerruf nach dem Download. */
.consent-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(3px);
}

.consent-box {
  width: 100%;
  max-width: 460px;
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: #141414;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.7);
  color: #F2F2F2;
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: 0;
}

.consent-box h2 {
  margin: 0 0 4px;
  font-size: 20px;
  line-height: 1.25;
}

.consent-produkt {
  margin: 0 0 20px;
  color: #9A9A9A;
  font-size: var(--fs-small);
}

.consent-zeile {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  font-size: var(--fs-small);
  line-height: 1.6;
  cursor: pointer;
}

.consent-zeile:hover {
  border-color: rgba(255, 255, 255, 0.2);
}

.consent-haken {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--color-accent, #FF4A1C);
  cursor: pointer;
}

.consent-klein {
  margin: 14px 0 0;
  color: #8A8A8A;
  font-size: 12px;
  line-height: 1.6;
}

.consent-klein a {
  color: #B8B8B8;
  text-decoration: underline;
}

.consent-knoepfe {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 24px;
}

.consent-knoepfe button {
  padding: 11px 20px;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  cursor: pointer;
  transition: opacity 150ms ease, background-color 150ms ease;
}

.consent-abbruch {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: none;
  color: #C8C8C8;
}

.consent-abbruch:hover {
  background: rgba(255, 255, 255, 0.06);
}

.consent-weiter {
  border: 0;
  background: var(--color-accent, #FF4A1C);
  color: #FFF;
}

.consent-weiter:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.consent-weiter:not(:disabled):hover {
  opacity: 0.9;
}

@media (max-width: 480px) {
  .consent-box { padding: 22px; }
  .consent-knoepfe { flex-direction: column-reverse; }
  .consent-knoepfe button { width: 100%; }
}

/* ─────────────────────────────────────────────────────────────
   13. PREISE AUS DER DATENBANK
   Die Preise tragen data-preis="<slug>" und werden von
   js/preise.js nach dem Laden gegen den Stand aus der Datenbank
   abgeglichen (siehe dort, warum im Normalfall nichts passiert).

   Tabellenziffern sorgen dafuer, dass jede Ziffer gleich breit
   ist. Aendert sich ein Preis wirklich — 24,99 auf 29,99 —,
   bleibt die Zeile dadurch exakt gleich lang und nichts rutscht.
   ───────────────────────────────────────────────────────────── */

[data-preis] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}