/* ============================================================
   REX — Stylesheet
   Professional Gold / Black
   ============================================================ */

:root {
    /* True black + warm gold yellow */
    --bg: #000000;
    --bg-2: #0a0a08;
    --surface: rgba(232, 192, 74, .04);
    --surface-2: rgba(232, 192, 74, .08);
    /* Deckende Flächen für Karten und Panels. Mit den halbtransparenten
     Werten oben schien der Hintergrund durch und der Text wurde
     unleserlich — die sind nur noch für Buttons und Pillen gedacht. */
    --card: #0d0d0b;
    --card-2: #161613;
    --line: rgba(255, 236, 190, .08);
    --line-2: rgba(232, 192, 74, .30);
    --cyan: #E8C04A;
    --cyan-soft: #F6D978;
    --cyan-deep: #C9A227;
    /* Zweiter Farbton der Verläufe — tieferes Gold */
    --violet: #D4A017;
    --ink: #0d0c08;
    --text: #F5F1E6;
    --muted: #A39B88;
    --muted-2: #6E6758;
    --glow-sm: 0 0 12px rgba(232, 192, 74, .32);
    --glow-md: 0 0 28px rgba(232, 192, 74, .22);
    --glow-lg: 0 0 70px rgba(232, 192, 74, .16);
    /* Deutlich kräftiger, für Hover-Zustände */
    --glow-xl: 0 0 36px rgba(232, 192, 74, .38), 0 0 80px rgba(232, 192, 74, .14);
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 18px;
    --r-xl: 22px;
    --max: 1200px;
    --header-h: 72px;
    /* ---- Abstandsrhythmus ----
     Alles baut auf 4px auf. Vorher standen ueberall krumme
     Einzelwerte, das laesst eine Seite unruhig wirken. */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;
    --sp-8: 64px;
    --sp-9: 96px;
    /* ---- Typo-Skala ----
     Eine Stufe pro Groesse statt beliebiger clamp()-Werte. */
    --t-xs: .74rem;
    --t-sm: .84rem;
    --t-md: .92rem;
    --t-lg: 1.02rem;
    --t-h3: 1.12rem;
    --t-h2: clamp(1.9rem, 3.4vw, 2.6rem);
    --t-h1: clamp(2.6rem, 5.4vw, 5rem);
    --ease: cubic-bezier(.22, .61, .36, 1);
    --dur: .24s;
}

/* ---------- Reset ---------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

/* Muss vor allen Layout-Regeln stehen und !important tragen:
   jede eigene display-Angabe auf einer Klasse (etwa
   .hero-screen { display: flex }) schlägt sonst das eingebaute
   [hidden] { display: none } des Browsers — die Seiten würden
   dann zwar wechseln, aber nichts ausblenden. */

[hidden] {
    display: none !important;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    min-height: 100vh;
}

body.locked {
    overflow: hidden;
}

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

svg {
    width: 20px;
    height: 20px;
}

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

button,
input {
    font: inherit;
    color: inherit;
}

button {
    background: none;
    border: 0;
    cursor: pointer;
}

::selection {
    background: var(--cyan);
    color: var(--ink);
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg);
}

::-webkit-scrollbar-thumb {
    background: rgba(232, 192, 74, .22);
    border-radius: 99px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(232, 192, 74, .4);
}

/* ---------- Hintergrund ---------- */

/* Das Quadratraster ist raus — es lag unter den Waben und die
   beiden Muster haben sich gegenseitig unruhig gemacht. */

.bg-grid {
    display: none;
}

/* ---------- Eigener Mauszeiger ----------
   Zwei Ebenen: der Punkt sitzt exakt auf der Position, der Schein
   läuft gedämpft hinterher. Nur auf Geräten mit echtem Zeiger —
   auf Touch gäbe es nichts zu folgen. */

.cursor-dot,
.cursor-glow {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    opacity: 0;
    will-change: transform;
}

.cursor-dot {
    z-index: 9999;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 12px rgba(232, 192, 74, .9);
    transition: opacity .3s var(--ease), transform .12s var(--ease);
}

.cursor-glow {
    z-index: 9998;
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(232, 192, 74, .6), rgba(232, 192, 74, .14) 55%, transparent 72%);
    filter: blur(4px);
    transition: opacity .3s var(--ease), width .22s var(--ease), height .22s var(--ease), margin .22s var(--ease);
}

body.has-cursor .cursor-dot,
body.has-cursor .cursor-glow {
    opacity: 1;
}

/* Über anklickbaren Elementen wächst der Schein und der Punkt */

body.cursor-active .cursor-glow {
    width: 62px;
    height: 62px;
    margin: -31px 0 0 -31px;
}

body.cursor-active .cursor-dot {
    transform: scale(1.6);
}

/* Systemzeiger nur ausblenden, wenn der eigene wirklich läuft —
   sonst stünde man ganz ohne Zeiger da. */

@media (hover: hover) and (pointer: fine) {
    body.has-cursor,
    body.has-cursor * {
        cursor: none !important;
    }
}

/* ---------- Wabenmuster ----------
   Zwei Ebenen desselben Musters: unten dauerhaft schwach sichtbar,
   darüber eine kräftige Kopie, die per Maske nur dort erscheint,
   wo der Mauszeiger steht. Dadurch leuchtet das Raster mit. */

.bg-hex,
.bg-hex-glow {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-repeat: repeat;
    background-size: 84px 150px;
}

.bg-hex {
    z-index: -3;
    opacity: .7;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none' stroke='%23E8C04A' stroke-opacity='0.14' stroke-width='1'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100'/%3E%3Cpath d='M28 0L28 34L0 50L0 84L28 100L56 84L56 50L28 34'/%3E%3C/g%3E%3C/svg%3E");
    /* Zum Seitenrand hin ausblenden, sonst wirkt es wie Tapete */
    -webkit-mask-image: radial-gradient(ellipse 80% 65% at 50% 30%, #000 25%, transparent 85%);
    mask-image: radial-gradient(ellipse 80% 65% at 50% 30%, #000 25%, transparent 85%);
    animation: hexDrift 32s ease-in-out infinite;
}

@keyframes hexDrift {
    0%,
    100% {
        background-position: 0 0;
    }
    50% {
        background-position: 42px 75px;
    }
}

.bg-hex-glow {
    z-index: -2;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none' stroke='%23E8C04A' stroke-opacity='1' stroke-width='1.4'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100'/%3E%3Cpath d='M28 0L28 34L0 50L0 84L28 100L56 84L56 50L28 34'/%3E%3C/g%3E%3C/svg%3E");
    filter: drop-shadow(0 0 6px rgba(232, 192, 74, .55));
    opacity: 0;
    transition: opacity .35s var(--ease);
    /* Folgt dem Cursor — die Werte setzt app.js */
    -webkit-mask-image: radial-gradient(190px circle at var(--mx, -999px) var(--my, -999px), #000 0%, rgba(0, 0, 0, .4) 42%, transparent 70%);
    mask-image: radial-gradient(190px circle at var(--mx, -999px) var(--my, -999px), #000 0%, rgba(0, 0, 0, .4) 42%, transparent 70%);
}

.bg-hex-glow.on {
    opacity: .75;
}

.bg-orb {
    position: fixed;
    z-index: -2;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(150px);
    opacity: .45;
}

/* Die festen Orbs sind raus — den Farbverlauf übernimmt jetzt
   .page-atmo, das mit der Seite mitscrollt. Zwei sich
   überlagernde Systeme wurden zu unruhig. */

.orb-1,
.orb-2,
.orb-3 {
    display: none;
}

/* Vignette: dunkelt die Ränder ab und bündelt den Blick zur Mitte */

.bg-vignette {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    /* Schwächer als vorher — der seitenweite Schein liegt jetzt
     darüber und würde sonst an den Rändern abgewürgt. */
    background: radial-gradient(ellipse 90% 80% at 50% 45%, transparent 55%, rgba(0, 0, 0, .6) 100%);
}

@keyframes float {
    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(60px, 70px) scale(1.12);
    }
}

/* ---------- Layout ---------- */

.wrap {
    width: 100%;
    max-width: var(--max);
    margin-inline: auto;
    padding-inline: var(--sp-5);
}

.wrap-narrow {
    max-width: 820px;
}

.section {
    padding-block: var(--sp-9);
    position: relative;
}

.mb-lg {
    margin-bottom: var(--sp-7);
}

/* Ueberschriften einheitlich in der breiten Grotesk — vorher nutzten
   nur Hero und Karten Archivo, der Rest Inter. Das las sich wie zwei
   verschiedene Seiten. */

h1,
h2,
h3 {
    font-family: 'Archivo', 'Inter', sans-serif;
    font-variation-settings: 'wdth' 106;
    line-height: 1.12;
    letter-spacing: -.026em;
    font-weight: 800;
    text-wrap: balance;
}

h2 {
    font-size: var(--t-h2);
}

h3 {
    font-size: var(--t-h3);
    font-weight: 700;
    letter-spacing: -.014em;
}

.eyebrow {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--cyan);
    margin-bottom: var(--sp-3);
    text-shadow: var(--glow-sm);
}

/* Sichtbarer Fokus fuer Tastaturbedienung — vorher gab es keinen */

:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 3px;
    border-radius: var(--r-sm);
}

.grad {
    background: linear-gradient(100deg, var(--cyan) 0%, var(--cyan-soft) 42%, var(--violet) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---------- Ankündigungsbanner ----------
   Sitzt über dem Header. Der Header rückt per Klassenschalter
   nach, statt vom Banner verdeckt zu werden. */

.announce {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 70;
    display: block;
    padding: 9px 24px;
    text-align: center;
    font-size: .84rem;
    font-weight: 500;
    color: var(--ink);
    background: var(--cyan);
}

.announce[href] {
    cursor: pointer;
}

.announce[href]:hover {
    filter: brightness(1.08);
}

.announce.tone-warn {
    background: #ffb347;
}

.announce.tone-alert {
    background: #ff7a90;
}

/* Der Versatz kommt aus der gemessenen Bannerhöhe — bei
   umbrechendem Text reicht ein fester Wert nicht. */

body.has-announce .header {
    top: calc(var(--announce-h, 40px) + 12px);
}

body.has-announce .hero {
    padding-top: calc(var(--header-h) + var(--announce-h, 40px) + var(--sp-5));
}

/* ---------- Header: freischwebende Capsule ---------- */

.header {
    position: fixed;
    top: 14px;
    left: 0;
    right: 0;
    z-index: 60;
    display: flex;
    align-items: center;
}

.header>.wrap {
    max-width: 1360px;
}

.header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 10px 10px 10px 26px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(8, 7, 4, .6);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    transition: background .3s var(--ease), border-color .3s var(--ease);
}

.header.scrolled .header-bar {
    background: rgba(8, 7, 4, .88);
    border-color: var(--line-2);
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    transition: transform .28s var(--ease);
}

.logo:hover {
    transform: translateY(-1px);
}

.logo-mark {
    width: auto;
    height: 34px;
    object-fit: contain;
    mix-blend-mode: lighten;
    filter: drop-shadow(0 0 10px rgba(232, 192, 74, .45));
    transition: transform .35s var(--ease), filter .35s var(--ease);
}

.logo:hover .logo-mark {
    transform: scale(1.08) rotate(-8deg);
    filter: drop-shadow(0 0 16px rgba(232, 192, 74, .7));
}

.logo-text {
    font-family: 'Archivo', 'Inter', sans-serif;
    font-variation-settings: 'wdth' 112;
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: .18em;
}

.nav {
    display: flex;
    gap: 4px;
}

.nav a {
    position: relative;
    padding: 8px 11px;
    font-size: .92rem;
    font-weight: 500;
    color: var(--muted);
    border-radius: var(--r-sm);
    transition: color .2s, background .2s;
}

.nav a::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 5px;
    height: 1.5px;
    border-radius: 99px;
    background: var(--cyan);
    box-shadow: var(--glow-sm);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .22s var(--ease);
}

.nav a:hover {
    color: var(--text);
    background: var(--surface-2);
}

.nav a:hover::after,
.nav a.on::after {
    transform: scaleX(1);
}

.nav a.on {
    color: var(--cyan);
    background: rgba(232, 192, 74, .08);
}

/* ---------- Kopfbereich der Unterseiten ---------- */

.page-head {
    position: relative;
    padding-top: calc(var(--header-h) + var(--sp-8));
    padding-bottom: var(--sp-6);
    text-align: center;
}

.page-head::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--line-2), transparent);
}

.page-head h1 {
    font-variation-settings: 'wdth' 110;
    font-size: clamp(2.1rem, 4.4vw, 3.4rem);
    text-transform: uppercase;
    margin-bottom: var(--sp-3);
}

.page-head .sec-text {
    max-width: 560px;
    margin-inline: auto;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ---------- Sprachumschalter ---------- */

.lang {
    position: relative;
}

.lang-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 40px;
    padding: 0 14px;
    font-family: 'JetBrains Mono', monospace;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--muted);
    background: var(--surface-2);
    border-radius: 999px;
    transition: all .2s var(--ease);
}

.lang-btn svg {
    width: 16px;
    height: 16px;
}

.lang-btn:hover {
    color: var(--text);
}

.lang.open .lang-btn {
    color: var(--cyan);
}

.lang-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 188px;
    max-height: min(70vh, 420px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px;
    background: rgba(10, 9, 6, .97);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .6);
    backdrop-filter: blur(16px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
    z-index: 70;
    scrollbar-width: thin;
    scrollbar-color: rgba(232, 192, 74, .35) transparent;
}

.lang-menu::-webkit-scrollbar {
    width: 6px;
}

.lang-menu::-webkit-scrollbar-thumb {
    background: rgba(232, 192, 74, .35);
    border-radius: 999px;
}

.lang.open .lang-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.lang-opt {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: var(--r-sm);
    color: var(--muted);
    transition: background .18s, color .18s;
}

.lang-opt:hover {
    background: var(--surface-2);
    color: var(--text);
}

.lang-opt.on {
    color: var(--cyan);
    background: rgba(232, 192, 74, .08);
}

.lang-code {
    font-family: 'JetBrains Mono', monospace;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .08em;
    min-width: 22px;
}

.lang-name {
    font-size: .86rem;
}

.icon-pill {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text);
    transition: all .22s var(--ease);
}

.icon-pill svg {
    width: 18px;
    height: 18px;
}

.icon-pill:hover {
    background: var(--cyan);
    color: var(--ink);
}

.cart-count {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    display: none;
    place-items: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: .7rem;
    font-weight: 700;
    background: rgba(0, 0, 0, .28);
    border-radius: 99px;
}

.cart-count.on {
    display: grid;
}

.burger {
    display: none;
    flex-direction: column;
    gap: 5px;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
}

.burger span {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition: .25s var(--ease);
}

.burger.on span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.burger.on span:nth-child(2) {
    opacity: 0;
}

.burger.on span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ---------- Hero ---------- */

/* Hero und Ticker füllen zusammen genau den ersten Bildschirm.
   Der Ticker wird per margin-top:auto an die Unterkante gedrückt,
   sitzt dadurch immer bündig am Faltrand — unabhängig davon, wie
   hoch das Fenster ist. */

.hero-screen {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100svh;
    overflow: hidden;
    /* clippt die Atmosphäre, nicht der Hero allein */
}

.hero {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    padding-top: calc(var(--header-h) + var(--sp-5));
    padding-bottom: var(--sp-5);
}

.hero>.wrap {
    width: 100%;
}

/* Kennzahlen und Ticker sitzen als Block an der Unterkante */

.hero-screen>.stats-band {
    margin-top: auto;
}

/* ---------- Seitenweiter Schein ----------
   Spannt sich über die volle Höhe von <main>. Der Hero-Glow allein
   endet an dessen Unterkante — darunter wäre alles wieder schwarz. */

main {
    position: relative;
}

.page-atmo {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    /* KEIN overflow: hidden — das hat die weichgezeichneten Ränder
     abgeschnitten, dadurch blieb von den seitlichen Blobs kaum
     etwas übrig. body hat bereits overflow-x: hidden. */
}

.pa {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(90px);
}

/* Abwechselnd rechts und links, damit der Blick der Seite folgt.
   Die Mittelpunkte liegen jetzt am Rand statt weit dahinter —
   sonst landet der sichtbare Teil außerhalb des Bildes. */

.a1 {
    top: 4%;
    right: -6%;
    width: 820px;
    height: 700px;
    background: radial-gradient(circle, rgba(232, 192, 74, .26), transparent 66%);
}

.a2 {
    top: 25%;
    left: -8%;
    width: 700px;
    height: 640px;
    background: radial-gradient(circle, rgba(232, 192, 74, .20), transparent 68%);
}

.a3 {
    top: 46%;
    right: -4%;
    width: 760px;
    height: 660px;
    background: radial-gradient(circle, rgba(232, 192, 74, .21), transparent 68%);
}

.a4 {
    top: 67%;
    left: -6%;
    width: 700px;
    height: 640px;
    background: radial-gradient(circle, rgba(232, 192, 74, .18), transparent 70%);
}

.a5 {
    bottom: 2%;
    left: 30%;
    width: 800px;
    height: 560px;
    background: radial-gradient(circle, rgba(232, 192, 74, .16), transparent 70%);
}

/* Inhalt muss darüber liegen. Alle direkten Kinder ausser der
   Schein-Ebene selbst — sonst rutscht ein neu ergaenzter Block
   irgendwann dahinter. */

main>*:not(.page-atmo) {
    position: relative;
    z-index: 1;
}

/* ---------- Hero-Atmosphäre ----------
   Ohne das steht das Modell in einer schwarzen Leere. Ein
   großflächiger Schein plus Lichtstrahlen füllen den Raum, so wie
   ein Hintergrundbild es täte — nur ohne Bilddatei. */

.hero-atmo {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.hero-atmo>* {
    position: absolute;
    display: block;
}

/* Großer Kern hinter dem Modell. Reicht bis unter die Kennzahlen,
   damit der Verlauf nicht auf halber Höhe in Schwarz abbricht. */

.atmo-core {
    top: -10%;
    right: -6%;
    width: 72%;
    height: 125%;
    background: radial-gradient(ellipse 44% 40% at 52% 38%, rgba(232, 192, 74, .32), transparent 62%), radial-gradient(ellipse 72% 62% at 55% 50%, rgba(232, 192, 74, .15), transparent 74%);
    filter: blur(46px);
    animation: atmoPulse 9s ease-in-out infinite;
}

@keyframes atmoPulse {
    0%,
    100% {
        opacity: .85;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.06);
    }
}

/* Schräge Lichtstrahlen — geben der Fläche Struktur */

.atmo-ray {
    top: -30%;
    width: 340px;
    height: 160%;
    background: linear-gradient(to bottom, transparent, rgba(232, 192, 74, .16), transparent);
    filter: blur(38px);
    transform: rotate(18deg);
}

.atmo-ray.r1 {
    right: 34%;
    animation: rayDrift 14s ease-in-out infinite;
}

.atmo-ray.r2 {
    right: 12%;
    width: 220px;
    opacity: .7;
    animation: rayDrift 18s ease-in-out infinite reverse;
}

.atmo-ray.r3 {
    right: 54%;
    width: 160px;
    opacity: .45;
    animation: rayDrift 22s ease-in-out infinite;
}

@keyframes rayDrift {
    0%,
    100% {
        transform: rotate(18deg) translateX(0);
    }
    50% {
        transform: rotate(15deg) translateX(-40px);
    }
}

/* Lichtteppich unter dem Modell. Sitzt tief genug, dass er auch
   hinter Kennzahlen und Ticker noch Farbe trägt. */

.atmo-floor {
    left: 34%;
    right: -12%;
    bottom: -12%;
    height: 380px;
    background: radial-gradient(ellipse 55% 100% at 52% 100%, rgba(232, 192, 74, .26), transparent 72%);
    filter: blur(55px);
}

/* Inhalt muss über der Atmosphäre liegen */

.hero-grid,
.hero-copy,
.hero-bot {
    position: relative;
    z-index: 1;
}

/* Der Hero darf breiter sein als der Rest der Seite — das ist der
   wirksamste Hebel für ein großes Modell: mehr Canvas-Fläche, ohne
   dass die Kamera näher ran muss (näher = Arme werden abgeschnitten). */

.hero>.wrap {
    max-width: 1600px;
}

.hero-grid {
    display: grid;
    /* Textspalte breiter, Modellspalte enger — vorher klaffte in der
     Mitte eine tote Fläche zwischen beidem. */
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.5fr);
    align-items: center;
    gap: var(--sp-5);
    margin-bottom: 0;
}

.hero-copy {
    max-width: 640px;
}

/* Eyebrow mit vorangestelltem Strich */

.eyebrow-line {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 26px;
    font-family: 'JetBrains Mono', monospace;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--cyan);
}

.eyebrow-line .dash {
    width: 34px;
    height: 1px;
    background: var(--cyan);
    box-shadow: var(--glow-sm);
}

@keyframes pulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: .3;
    }
}

/* Headline: breite Grotesk, zweite Zeile als Outline */

.hero-title {
    font-variation-settings: 'wdth' 112;
    font-size: var(--t-h1);
    line-height: .96;
    letter-spacing: -.022em;
    text-transform: uppercase;
    margin-bottom: var(--sp-5);
}

.hl-solid {
    color: var(--text);
    text-shadow: 0 0 40px rgba(255, 255, 255, .18);
}

.hl-outline {
    color: transparent;
    -webkit-text-stroke: 1.6px var(--cyan);
    paint-order: stroke fill;
    /* Kräftiger — die Outline-Zeile ist der Blickfang der Seite */
    filter: drop-shadow(0 0 12px rgba(232, 192, 74, .42)) drop-shadow(0 0 32px rgba(232, 192, 74, .18));
}

/* Badge unter der Headline */

.hero-badge {
    display: inline-block;
    padding: var(--sp-2) var(--sp-4);
    margin-bottom: var(--sp-5);
    font-family: 'JetBrains Mono', monospace;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cyan-soft);
    background: rgba(232, 192, 74, .07);
    border: 1px solid var(--line-2);
    border-radius: 999px;
    box-shadow: var(--glow-sm), inset 0 0 20px rgba(232, 192, 74, .06);
}

.hero-sub {
    max-width: 500px;
    margin-bottom: var(--sp-6);
    font-size: var(--t-lg);
    color: var(--muted);
    text-wrap: pretty;
}

.hero-cta {
    display: flex;
    gap: var(--sp-3);
    flex-wrap: wrap;
    margin-bottom: var(--sp-6);
}

/* Social Proof */

.vouches {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: .86rem;
    color: var(--muted);
}

.avatars {
    display: flex;
}

.av {
    /* Ohne overflow ragt das quadratische Bild ueber den runden
     Rahmen hinaus — der border-radius allein schneidet nichts ab. */
    position: relative;
    overflow: hidden;
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: 50%;
    border: 2px solid var(--bg);
    margin-left: -9px;
    background: linear-gradient(135deg, var(--cyan), var(--violet));
    opacity: calc(1 - var(--i) * .18);
    /* Der erste liegt oben, sonst deckt jeder folgende den vorigen zu */
    z-index: calc(10 - var(--i));
}

.av:first-child {
    margin-left: 0;
}

.av img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Echte Gesichter sollen nicht ausgeblichen werden — die
   Staffelung war nur fuer die leeren Platzhalterkreise gedacht. */

.av.pic {
    opacity: 1;
}

.live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #3ddc84;
    box-shadow: 0 0 9px #3ddc84;
    animation: pulse 2s ease-in-out infinite;
}

/* ---------- Roboter (Cursor-Tracking) ---------- */

.hero-bot {
    position: relative;
    display: grid;
    place-items: center;
    /* Hoch genug für den großen Ausschnitt, aber so, dass Hero,
     Kennzahlen und Ticker zusammen in einen Bildschirm passen */
    min-height: 480px;
    height: 64vh;
    /* Oben darf der Kopf über das Raster hinausragen, unten übernimmt
     die Maske. Seitlich KEIN Überhang: alles was über den Viewport
     ragt, wird vom Browser hart abgeschnitten — dann fehlt der Arm,
     egal wie die Kamera steht. */
    overflow: visible;
    margin-right: 0;
    margin-top: 0;
    cursor: crosshair;
}

.bot-glow {
    position: absolute;
    width: 100%;
    height: 92%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(232, 192, 74, .30), rgba(232, 192, 74, .12) 48%, transparent 74%);
    filter: blur(70px);
    animation: botBreathe 6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes botBreathe {
    0%,
    100% {
        transform: scale(1);
        opacity: .85;
    }
    50% {
        transform: scale(1.12);
        opacity: 1;
    }
}

/* Die alten Masse stammen vom 3D-Modell: 480px hoch, damit der
   Roboter Platz hatte. Das Video braucht nur seine eigene Hoehe. */

.hero-bot {
    cursor: default;
    min-height: 0;
    height: auto;
    gap: 10px;
}

/* ---------- Video im Hero ----------
   Vorschaubild mit Abspielknopf. Der echte Player kommt erst beim
   Klick — bis dahin ist das hier nur ein Bild. */

.hero-video {
    --rx: 0deg;
    --ry: 0deg;
    --lift: 0px;
    --img-x: 0px;
    --img-y: 0px;
    --gx: 50%;
    --gy: 28%;
    position: relative;
    display: block;
    width: 100%;
    max-width: 760px;
    aspect-ratio: 16 / 9;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--line-2);
    border-radius: var(--r-lg, 18px);
    background: #0a0a08;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .55), var(--glow-md);
    cursor: pointer;
    transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift));
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

.hero-video:hover,
.hero-video:focus-visible {
    --lift: -4px;
    box-shadow: 0 36px 90px rgba(0, 0, 0, .6), var(--glow-lg, var(--glow-md));
    outline: none;
}

.hero-video.is-tilt {
    --lift: -3px;
    will-change: transform;
    transition: transform .12s ease-out, box-shadow .35s var(--ease);
}

.hero-video-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: translate3d(var(--img-x), var(--img-y), 0);
    transition: transform .45s var(--ease);
}

.hero-video.is-tilt .hero-video-thumb {
    transition: transform .12s ease-out;
}

.hero-video-glare {
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(460px circle at var(--gx) var(--gy), rgba(255, 228, 150, .16), transparent 48%);
    opacity: 0;
    mix-blend-mode: screen;
    transition: opacity .35s var(--ease);
}

.hero-video.is-tilt .hero-video-glare {
    opacity: 1;
}

/* Der geladene Player nimmt exakt den Platz des Vorschaubilds ein. */

.hero-video-frame {
    width: 100%;
    max-width: 760px;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--line-2);
    border-radius: var(--r-lg, 18px);
    background: #000;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .55), var(--glow-md);
}

.hero-video-out {
    font-size: .78rem;
    color: var(--muted-2);
    transition: color .2s var(--ease);
}

.hero-video-out:hover {
    color: var(--cyan);
}

@media (max-width: 980px) {
    .hero-video,
    .hero-video-frame {
        max-width: 100%;
    }
}

#botCanvas {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.2s var(--ease);
    /* Unten sanft ausblenden, damit der angeschnittene Oberkörper
     nicht als harte Kante endet. Oben und Mitte bleiben voll deckend. */
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 88%, rgba(0, 0, 0, .6) 95%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 88%, rgba(0, 0, 0, .6) 95%, transparent 100%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.hero-bot.has-3d #botCanvas {
    opacity: 1;
}

.hero-bot.no-webgl #botCanvas {
    display: none;
}

/* --- SVG-Fallback ---
   Standardmäßig AUS. Sonst blitzt beim Neuladen kurz der alte
   Roboter auf, bis das GLB fertig geladen ist. Er erscheint nur,
   wenn WebGL fehlt oder das Modell nicht geladen werden kann. */

.bot-svg {
    display: none;
}

.hero-bot.no-webgl .bot-svg {
    display: block;
    position: absolute;
    width: min(100%, 380px);
    height: auto;
    max-height: 500px;
    animation: botIdle 5.5s ease-in-out infinite;
}

@keyframes botIdle {
    0%,
    100% {
        translate: 0 0;
    }
    50% {
        translate: 0 -14px;
    }
}

/* Ebenen fuer den Parallax-Effekt */

.bot-head,
.bot-torso,
.bot-arms,
.bot-legs,
.bot-eyes,
.bot-shadow {
    transform-box: fill-box;
    transform-origin: center;
    will-change: transform;
}

.bot-head {
    transform-origin: 50% 100%;
}

.bot-core,
.bot-core-in {
    animation: coreGlow 2.6s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
}

@keyframes coreGlow {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: .45;
    }
}

.bot-antenna {
    animation: pulse 1.8s ease-in-out infinite;
}

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

.btn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: var(--sp-3) var(--sp-5);
    font-size: var(--t-md);
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid transparent;
    transition: all var(--dur) var(--ease);
    white-space: nowrap;
}

.btn svg {
    width: 17px;
    height: 17px;
}

.btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.btn-primary {
    background: linear-gradient(180deg, #F3D56A 0%, var(--cyan) 46%, var(--cyan-deep) 100%);
    color: var(--ink);
    font-weight: 700;
    box-shadow: 0 6px 22px rgba(232, 192, 74, .28);
}

.btn-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .38) 50%, transparent 65%);
    transform: translateX(-130%);
    transition: transform .55s var(--ease);
    pointer-events: none;
}

.btn-primary:hover:not(:disabled)::after {
    transform: translateX(130%);
}

.btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: 0 10px 32px rgba(232, 192, 74, .4);
}

.btn-primary:active:not(:disabled) {
    transform: translateY(0);
}

.btn-ghost {
    background: var(--surface);
    border-color: var(--line);
    color: var(--text);
}

.btn-ghost:hover {
    border-color: var(--line-2);
    box-shadow: var(--glow-sm);
}

.btn-block {
    width: 100%;
}

.btn-sm {
    padding: 10px 18px;
    font-size: .86rem;
    border-radius: 999px;
}

.btn .arrow {
    font-size: 1.05em;
    line-height: 1;
}

.btn-primary,
.btn-ghost {
    border-radius: 999px;
}

.btn-spinner {
    display: none;
    animation: spin .8s linear infinite;
}

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

.btn.loading .btn-spinner {
    display: block;
}

.btn.loading {
    pointer-events: none;
    opacity: .75;
}

.icon-btn {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: var(--r-sm);
    color: var(--muted);
    transition: color .2s, background .2s;
}

.icon-btn:hover {
    color: var(--text);
    background: var(--surface-2);
}

/* ---------- Lauftext ---------- */

.marquee {
    position: relative;
    overflow: hidden;
    padding: var(--sp-3) 0;
    border-block: 1px solid var(--line);
    background: rgba(255, 255, 255, .015);
    /* Ränder ausblenden, damit die Wörter nicht hart abgeschnitten wirken */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.marquee-track {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    will-change: transform;
    /* Der Inhalt liegt 4× vor. Um genau 25 % zu verschieben heißt:
     um exakt eine Wiederholung — dadurch ist die Schleife nahtlos. */
    animation: marquee 30s linear infinite;
}

@keyframes marquee {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(-25%, 0, 0);
    }
}

.marquee:hover .marquee-track {
    animation-play-state: paused;
}

.mq-item {
    display: flex;
    align-items: center;
    gap: 13px;
    padding-right: 46px;
    font-family: 'JetBrains Mono', monospace;
    font-size: .76rem;
    font-weight: 500;
    letter-spacing: .19em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
}

.mq-dot {
    width: 5px;
    height: 5px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 8px var(--cyan);
}

/* ---------- Kennzahlen ---------- */

.stats-band {
    position: relative;
    /* Kompakter als eine eigene Sektion — sitzt jetzt mit im ersten
     Bildschirm und darf den Hero nicht erdrücken. */
    padding-block: var(--sp-5);
    border-top: 1px solid var(--line);
}

/* Schimmer über der Trennkante */

.stats-band::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--line-2), transparent);
}

.stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-4);
}

.stat {
    position: relative;
    padding: var(--sp-4) var(--sp-3);
    text-align: center;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.stat:hover {
    border-color: var(--line-2);
    transform: translateY(-3px);
    box-shadow: var(--glow-md);
}

.stat-icon {
    width: 22px;
    height: 22px;
    margin: 0 auto var(--sp-2);
    color: var(--cyan);
    filter: drop-shadow(0 0 8px rgba(232, 192, 74, .55));
}

.stat-value {
    font-family: 'Archivo', 'Inter', sans-serif;
    font-variation-settings: 'wdth' 106;
    font-size: clamp(1.4rem, 2.5vw, 1.95rem);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--cyan);
    text-shadow: var(--glow-md);
    line-height: 1.1;
}

.stat-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted-2);
    margin-top: var(--sp-2);
}

@media (max-width: 700px) {
    .stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------- Sektionskopf + Filter ---------- */

.sec-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-5);
    flex-wrap: wrap;
    margin-bottom: var(--sp-7);
}

.catalog-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
    margin-bottom: var(--sp-4);
}

.catalog-search {
    position: relative;
    flex: 1 1 280px;
    max-width: 420px;
}

.catalog-search svg {
    position: absolute;
    left: 14px;
    top: 50%;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
}

.catalog-search input {
    width: 100%;
    height: 44px;
    padding: 0 40px 0 40px;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 99px;
    font: inherit;
    font-size: var(--t-sm);
    outline: none;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.catalog-search input:focus {
    border-color: var(--cyan);
    box-shadow: var(--glow-sm);
}

.catalog-search input::placeholder {
    color: var(--muted);
}

.catalog-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    width: 28px;
    height: 28px;
    transform: translateY(-50%);
    border-radius: 99px;
    color: var(--muted);
    background: transparent;
    border: 0;
    font-size: 18px;
    line-height: 1;
}

.catalog-clear:hover {
    color: var(--text);
    background: var(--card-2);
}

.catalog-count {
    margin: 0;
    font-size: var(--t-sm);
    color: var(--muted);
}

.catalog-empty {
    color: var(--muted);
    grid-column: 1 / -1;
    padding: var(--sp-6) 0;
}

.filters {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
    /* Steht seit dem Umbau allein über dem Raster und braucht
     deshalb eigenen Abstand — vorher kam der vom .sec-head. */
    margin-bottom: var(--sp-5);
}

.sec-head .filters {
    margin-bottom: 0;
}

.filter {
    padding: var(--sp-2) var(--sp-4);
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--muted);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 99px;
    transition: all var(--dur) var(--ease);
}

.filter:hover {
    color: var(--text);
    border-color: var(--line-2);
}

.filter.on {
    color: var(--ink);
    background: var(--cyan);
    border-color: var(--cyan);
    box-shadow: var(--glow-sm);
}

/* ---------- Produktraster ---------- */

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--sp-5);
}

.skeleton {
    height: 340px;
}

.skeleton {
    height: 400px;
    border-radius: var(--r-xl);
    background: linear-gradient(100deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%);
    background-size: 220% 100%;
    animation: shimmer 1.4s linear infinite;
}

@keyframes shimmer {
    to {
        background-position: -220% 0;
    }
}

/* ============ Kategorie-Kacheln ============ */

.cat-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-4);
}

.tile {
    --rx: 0deg;
    --ry: 0deg;
    --lift: 0px;
    --img-x: 0px;
    --img-y: 0px;
    --img-s: 1;
    --fg-x: 0px;
    --fg-y: 0px;
    --bd-x: 0px;
    --bd-y: 0px;
    --gx: 50%;
    --gy: 28%;
    position: relative;
    display: block;
    /* Hochformat statt schmaler Streifen — die Kachel ist der
     Haupteinstieg der Startseite und darf Platz beanspruchen.
     4:5 entspricht dem Zuschnitt der Kategoriekarten, so wird
     an den Raendern nichts Wichtiges abgeschnitten. */
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    transform-style: preserve-3d;
    transform: perspective(980px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift));
    transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.tile:hover,
.tile:focus-visible {
    --lift: -5px;
    border-color: var(--line-2);
    box-shadow: 0 22px 55px rgba(0, 0, 0, .55), var(--glow-xl);
}

.tile.is-tilt {
    --lift: -4px;
    will-change: transform;
    transition: transform .12s ease-out, border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.tile img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.8) brightness(.62);
    transform: translate3d(var(--img-x), var(--img-y), 0);
    transition: transform .5s var(--ease), filter var(--dur) var(--ease);
}

.tile.is-tilt img {
    transition: transform .12s ease-out, filter var(--dur) var(--ease);
}

.tile:hover img {
    filter: saturate(1) brightness(.85);
}

/* Karten mit eingebautem Schriftzug duerfen kaum abgedunkelt
   werden — sonst verschwindet genau die Beschriftung, wegen der
   die eigene Textzeile ausgeblendet wurde. */

.tile.titled img {
    filter: saturate(.95) brightness(.86);
}

.tile.titled:hover img {
    filter: saturate(1.05) brightness(1);
}

.tile.no-img img {
    display: none;
}

.tile.no-img {
    background: radial-gradient(ellipse 80% 70% at 50% 40%, rgba(232, 192, 74, .16), transparent 70%), var(--card);
}

.tile-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10, 9, 6, .96) 20%, rgba(10, 9, 6, .45) 58%, transparent 88%);
    pointer-events: none;
}

/* Hier traegt nur noch die Produktzahl auf dem Verlauf — der
   kraeftige Schleier von oben wuerde die Karte unnoetig zudecken. */

.tile.titled .tile-shade {
    background: linear-gradient(to top, rgba(10, 9, 6, .9) 6%, transparent 34%);
}

/* Gold-Schleier beim Hover */

.tile::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 90% 80% at 50% 55%, rgba(232, 192, 74, .24), transparent 70%);
    opacity: 0;
    transition: opacity var(--dur) var(--ease);
    pointer-events: none;
}

.tile:hover::after {
    opacity: 1;
}

.tile-body {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    padding: var(--sp-5);
    transform: translate3d(var(--bd-x), var(--bd-y), 0);
    transition: transform .35s var(--ease);
}

.tile.is-tilt .tile-body {
    transition: transform .12s ease-out;
}

.tile-name {
    font-family: 'Archivo', 'Inter', sans-serif;
    font-variation-settings: 'wdth' 108;
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.1;
    text-transform: uppercase;
}

.tile-count {
    font-family: 'JetBrains Mono', monospace;
    font-size: .68rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted-2);
}

.tile:hover .tile-count {
    color: var(--cyan);
}

/* Ohne Namenszeile darueber reicht deutlich weniger Polster */

.tile.titled .tile-body {
    padding: var(--sp-3) var(--sp-4);
}

.tile.titled .tile-count {
    color: var(--muted);
}

.tile-go {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    font-size: .9rem;
    color: var(--muted);
    background: rgba(0, 0, 0, .5);
    border: 1px solid var(--line);
    border-radius: 50%;
    backdrop-filter: blur(8px);
    transform: translate3d(var(--fg-x), var(--fg-y), 0);
    transition: color var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform .35s var(--ease);
}

.tile.is-tilt .tile-go {
    transition: color var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform .12s ease-out;
}

.tile-glare {
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(380px circle at var(--gx) var(--gy), rgba(255, 228, 150, .2), transparent 46%);
    opacity: 0;
    mix-blend-mode: screen;
    transition: opacity .35s var(--ease);
}

.tile.is-tilt .tile-glare {
    opacity: 1;
}

.tile:hover .tile-go {
    color: var(--ink);
    background: var(--cyan);
    border-color: var(--cyan);
}

/* ============ Produktkarten ============ */

.pcard {
    --rx: 0deg;
    --ry: 0deg;
    --lift: 0px;
    --img-x: 0px;
    --img-y: 0px;
    --img-s: 1;
    --fg-x: 0px;
    --fg-y: 0px;
    --bd-x: 0px;
    --bd-y: 0px;
    --gx: 50%;
    --gy: 28%;
    position: relative;
    display: flex;
    flex-direction: column;
    background: linear-gradient(175deg, #161614, var(--card));
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    overflow: hidden;
    cursor: pointer;
    transform-style: preserve-3d;
    transform: perspective(980px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift));
    transition: transform .45s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
    animation: rise .5s var(--ease) both;
}

.pcard:hover,
.pcard:focus-visible {
    --lift: -6px;
    border-color: var(--line-2);
    box-shadow: 0 26px 70px rgba(0, 0, 0, .6), var(--glow-xl);
    outline: none;
}

.pcard.is-tilt {
    --lift: -4px;
    will-change: transform;
    transition: transform .12s ease-out, border-color .3s var(--ease), box-shadow .3s var(--ease);
}

.pcard.sold {
    opacity: .5;
}

.pcard.sold:hover,
.pcard.sold.is-tilt {
    --lift: 0px;
    --img-s: 1;
    --rx: 0deg;
    --ry: 0deg;
    box-shadow: none;
}

/* Leuchtender Rand. Liegt als Maske auf dem Rahmen, damit der
   Verlauf nur die Kante trifft und nicht die Fläche einfärbt. */

.pcard::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(140deg, rgba(232, 192, 74, .8), transparent 40%, transparent 60%, rgba(232, 192, 74, .5));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity var(--dur) var(--ease);
    pointer-events: none;
}

.pcard:hover::before,
.pcard:focus-visible::before {
    opacity: 1;
}

.pcard.sold::before {
    display: none;
}

.pcard-glare {
    position: absolute;
    inset: 0;
    z-index: 4;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(420px circle at var(--gx) var(--gy), rgba(255, 228, 150, .2), transparent 46%);
    opacity: 0;
    mix-blend-mode: screen;
    transition: opacity .35s var(--ease);
}

.pcard.is-tilt .pcard-glare {
    opacity: 1;
}

/* --- Bildbereich --- */

/* Die Box-Art ist im Breitformat — sie fuellt den oberen Kartenrand
   randlos aus, statt klein und zentriert im Nichts zu schweben. */

.pcard-media {
    position: relative;
    aspect-ratio: 16 / 9;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: radial-gradient(ellipse 70% 60% at 50% 62%, rgba(232, 192, 74, .12), transparent 70%);
}

/* Gold-Schleier legt sich beim Hover über das Artwork */

.pcard-media::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(ellipse 90% 80% at 50% 45%, rgba(232, 192, 74, .28), transparent 68%);
    opacity: 0;
    transition: opacity .35s var(--ease);
    pointer-events: none;
}

.pcard:hover .pcard-media::before {
    opacity: 1;
}

.pcard-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate3d(var(--img-x), var(--img-y), 0);
    transition: transform .5s var(--ease);
}

.pcard.is-tilt .pcard-img {
    transition: transform .12s ease-out;
}

/* Weicher Uebergang ins Textfeld */

.pcard-media::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 45%;
    z-index: 2;
    background: linear-gradient(to top, rgba(4, 6, 8, .92), transparent);
    pointer-events: none;
}

/* Leuchtende Kante zwischen Bild und Text */

.pcard-body::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cyan), transparent);
    opacity: 0;
    transition: opacity var(--dur) var(--ease);
}

.pcard:hover .pcard-body::before {
    opacity: .7;
}

.pcard-media.no-img::after {
    display: none;
}

/* Fällt nur ein, wenn kein Bild gesetzt ist oder es nicht lädt */

.pcard-fallback {
    display: none;
}

.pcard-media.no-img .pcard-img {
    display: none;
}

.pcard-media.no-img .pcard-fallback {
    display: grid;
    place-items: center;
    padding: 20px;
}

.fb-box {
    display: grid;
    place-items: center;
    gap: 12px;
    width: 132px;
    height: 176px;
    border-radius: 8px;
    background: linear-gradient(150deg, #141412, #0a0a08);
    border: 1px solid var(--line-2);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .06);
    transform: translate3d(var(--fg-x), var(--fg-y), 0);
    transition: transform .4s var(--ease);
}

.pcard.is-tilt .fb-box {
    transition: transform .12s ease-out;
}

.fb-logo {
    width: 42px;
    opacity: .95;
    mix-blend-mode: lighten;
    filter: drop-shadow(0 0 10px rgba(232, 192, 74, .5));
}

.fb-name {
    font-family: 'JetBrains Mono', monospace;
    font-size: .58rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted-2);
    text-align: center;
    padding: 0 10px;
}

/* --- Overlays auf dem Bild --- */

.pstatus {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    font-size: .72rem;
    font-weight: 500;
    color: var(--muted);
    background: rgba(0, 0, 0, .5);
    border: 1px solid var(--line);
    border-radius: 999px;
    backdrop-filter: blur(8px);
    transform: translate3d(var(--fg-x, 0px), var(--fg-y, 0px), 0);
    transition: transform .35s var(--ease);
}

.pcard.is-tilt .pstatus {
    transition: transform .12s ease-out;
}

.pstatus i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #3ddc84;
    box-shadow: 0 0 7px #3ddc84;
}

/* Farbe je Status */

.pstatus.st-updating i {
    background: #ffb347;
    box-shadow: 0 0 7px #ffb347;
}

.pstatus.st-down i {
    background: #ff7a90;
    box-shadow: 0 0 7px #ff7a90;
}

.pstatus.st-soldout i {
    background: var(--muted-2);
    box-shadow: none;
}

.pstatus.st-updating {
    color: #ffcf8f;
}

.pstatus.st-down {
    color: #ffb3bf;
}

.pbadge {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translate(calc(-50% + var(--fg-x, 0px)), var(--fg-y, 0px));
    z-index: 2;
    transition: transform .35s var(--ease);
    padding: 4px 11px;
    font-family: 'JetBrains Mono', monospace;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--cyan);
    background: rgba(232, 192, 74, .12);
    border: 1px solid var(--line-2);
    border-radius: 999px;
    white-space: nowrap;
}

.pcard-go {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    font-size: .95rem;
    color: var(--muted);
    background: rgba(0, 0, 0, .45);
    border: 1px solid var(--line);
    border-radius: 50%;
    backdrop-filter: blur(8px);
    transform: translate3d(var(--fg-x), var(--fg-y), 0);
    transition: color .22s var(--ease), background .22s var(--ease), border-color .22s var(--ease), transform .35s var(--ease);
}

.pcard.is-tilt .pbadge,
.pcard.is-tilt .pcard-go {
    transition: transform .12s ease-out, color .22s var(--ease), background .22s var(--ease), border-color .22s var(--ease);
}

.pcard:hover .pcard-go {
    color: var(--ink);
    background: var(--cyan);
    border-color: var(--cyan);
}

/* --- Text --- */

.pcard-body {
    position: relative;
    padding: var(--sp-4) var(--sp-5) var(--sp-5);
    transform: translate3d(var(--bd-x), var(--bd-y), 0);
    transition: transform .35s var(--ease);
}

.pcard.is-tilt .pcard-body {
    transition: transform .12s ease-out;
}

.pcard-body h3 {
    font-size: 1.26rem;
    margin-bottom: var(--sp-2);
}

.pcard-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
}

.pcard-sub {
    font-size: var(--t-sm);
    color: var(--muted);
}

.pcard-price {
    font-size: var(--t-md);
    font-weight: 700;
    color: var(--cyan);
    white-space: nowrap;
    text-shadow: var(--glow-sm);
}

/* ============ Produkt-Detail ============
   Zwei Spalten: links Bild, Beschreibung und Leistungen, rechts
   der Kaufbereich. Vorher stapelte sich alles in einer schmalen
   Saeule — der Kaufknopf lag dadurch weit unter dem Anschlag. */

/* Doppelter Klassenname mit Absicht: .modal-panel steht weiter
   unten in dieser Datei und hat dieselbe Spezifitaet — mit nur
   ".pd-panel" gewinnt dessen width von 520px und das Fenster
   bleibt schmal, egal was hier steht. */

.modal-panel.pd-panel {
    width: min(1240px, 96vw);
}

.pd-body {
    max-height: 92vh;
    overflow: hidden auto;
}

/* Beide Spalten auf gleiche Hoehe (Vorgabe von grid), damit der
   Kaufbereich seine Flaeche bis nach unten behaelt. */

.pd-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .95fr);
}

/* ---------- Linke Spalte ---------- */

.pd-media {
    position: relative;
    aspect-ratio: 16 / 9;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: radial-gradient(ellipse 70% 60% at 50% 55%, rgba(232, 192, 74, .14), transparent 70%);
}

.pd-media .pcard-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pd-media.no-img .pcard-img {
    display: none;
}

.pd-media .pcard-fallback {
    display: none;
}

.pd-media.no-img .pcard-fallback {
    display: grid;
    place-items: center;
}

/* Weicher Auslauf nach unten, damit die Kante nicht abgeschnitten wirkt */

.pd-media::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 45%;
    background: linear-gradient(to top, var(--card), transparent);
    pointer-events: none;
}

/* Links, nicht rechts — dort sitzt der Schliessen-Knopf */

.pd-badge {
    top: 16px;
    left: 16px;
    right: auto;
    transform: none;
}

.pd-text {
    padding: var(--sp-2) var(--sp-6) var(--sp-6);
}

.pd-desc {
    font-size: var(--t-md);
    line-height: 1.7;
    color: var(--muted);
    margin-bottom: var(--sp-5);
    text-wrap: pretty;
}

.pd-feats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px var(--sp-5);
}

.pd-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted-2);
    margin-bottom: 10px;
}

/* ---------- Rechte Spalte: Kaufbereich ---------- */

.pd-buy {
    display: flex;
    flex-direction: column;
    /* Rechts oben sitzt der Schliessen-Knopf — deshalb mehr Luft */
    padding: var(--sp-6) var(--sp-6) var(--sp-6);
    padding-top: 52px;
    border-left: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(232, 192, 74, .05), transparent 240px), var(--card-2);
}

.pd-buy .pstatus {
    position: static;
    align-self: flex-start;
    margin-bottom: var(--sp-3);
}

.pd-buy h2 {
    font-size: 1.5rem;
    line-height: 1.2;
    letter-spacing: -.02em;
}

.pd-sub {
    margin-top: 6px;
    font-size: var(--t-sm);
    color: var(--muted);
}

.pd-buy .pd-label {
    margin-top: var(--sp-5);
}

.pd-buy .variants {
    margin-bottom: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.pd-buy .variant {
    padding: 9px 15px;
    font-size: .87rem;
}

.pd-price {
    margin: var(--sp-5) 0 var(--sp-4);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--line);
}

.price-line {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 9px;
}

.price-line .price {
    font-size: 1.9rem;
}

.price-line .price-old {
    text-decoration: line-through;
}

.save-tag {
    padding: 2px 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: .68rem;
    font-weight: 700;
    color: #3ddc84;
    background: rgba(61, 220, 132, .13);
    border-radius: 999px;
}

.pd-price .stock-line {
    display: block;
    margin-top: 6px;
}

.pd-buy .btn {
    padding: 14px 24px;
}

/* Kurze Zusicherungen unter dem Knopf */

.pd-trust {
    margin-top: auto;
    padding-top: var(--sp-5);
    display: grid;
    gap: 9px;
    list-style: none;
}

.pd-trust li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: var(--t-xs);
    color: var(--muted-2);
}

.pd-trust svg {
    width: 14px;
    height: 14px;
    flex: none;
    color: var(--cyan);
    opacity: .8;
}

/* ---------- Schmal ---------- */

@media (max-width: 860px) {
    .modal-panel.pd-panel {
        width: min(560px, 96vw);
    }
    /* Kaufbereich nach oben, direkt unters Bild — auf dem Handy
     soll der Preis nicht hinter der Merkmalsliste liegen. */
    .pd-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .pd-main {
        display: contents;
    }
    .pd-media {
        order: 1;
    }
    .pd-buy {
        order: 2;
        padding: var(--sp-5);
        border-left: 0;
        border-bottom: 1px solid var(--line);
    }
    .pd-text {
        order: 3;
        padding: var(--sp-5);
    }
    .pd-feats {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ============ Alte Karte (nicht mehr im Markup) ============ */

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 26px;
    background: linear-gradient(170deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    overflow: hidden;
    transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
    animation: rise .5s var(--ease) both;
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
}

.card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(140deg, rgba(232, 192, 74, .55), transparent 45%, transparent 60%, rgba(232, 192, 74, .3));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity .35s var(--ease);
    pointer-events: none;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 22px 60px rgba(0, 0, 0, .5), var(--glow-lg);
}

.card:hover::before {
    opacity: 1;
}

.card.sold {
    opacity: .55;
}

.card.sold:hover {
    transform: none;
    box-shadow: none;
}

.card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.badge {
    padding: 4px 11px;
    font-family: 'JetBrains Mono', monospace;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--cyan);
    background: rgba(232, 192, 74, .1);
    border: 1px solid var(--line-2);
    border-radius: 99px;
    white-space: nowrap;
}

.badge.sold-badge {
    color: #ff7a90;
    background: rgba(255, 90, 120, .1);
    border-color: rgba(255, 90, 120, .3);
}

.card-desc {
    font-size: .9rem;
    color: var(--muted);
    margin-bottom: 20px;
}

.card-feats {
    list-style: none;
    display: grid;
    gap: 9px;
    margin-bottom: 22px;
    padding: 0;
}

.card-feats li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: .87rem;
    color: var(--muted);
}

.card-feats svg {
    width: 15px;
    height: 15px;
    color: var(--cyan);
    flex-shrink: 0;
    margin-top: 4px;
}

.variants {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.variant {
    padding: 7px 13px;
    font-size: .82rem;
    font-weight: 500;
    color: var(--muted);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    transition: all .2s var(--ease);
}

.variant:hover {
    color: var(--text);
    border-color: var(--line-2);
}

.variant.on {
    color: var(--cyan);
    border-color: var(--cyan);
    background: rgba(232, 192, 74, .09);
    box-shadow: var(--glow-sm);
}

/* Ausverkaufte Option. Anklickbar bleibt sie — der Preis und der
   Hinweis darunter sollen sichtbar sein, nur der Kauf ist gesperrt. */

.variant.out {
    opacity: .45;
    text-decoration: line-through;
}

.variant.out.on {
    text-decoration: none;
    opacity: 1;
}

.card-foot {
    margin-top: auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.price-block {
    display: flex;
    flex-direction: column;
}

.price {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -.02em;
}

.price-old {
    font-size: .85rem;
    color: var(--muted-2);
    text-decoration: line-through;
}

.stock-line {
    font-size: .74rem;
    color: var(--muted-2);
    margin-top: 3px;
}

.stock-line.low {
    color: #ffb347;
}

.stock-line.out {
    color: #ff7a90;
}

/* ---------- Feature-Raster ---------- */

/* Bento-Raster: die erste Kachel läuft über zwei Spalten. Sechs
   gleich große Kästen wirken schematisch — ein gebrochener Rhythmus
   liest sich wertiger. */

/* Vier Spalten, erste und letzte Kachel doppelt breit — ergibt zwei
   saubere Reihen mit gebrochenem Rhythmus. Mit drei Spalten bliebe
   am Ende eine einzelne Kachel allein stehen. */

.feat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-4);
}

.feat-grid>.feat:first-child,
.feat-grid>.feat:last-child {
    grid-column: span 2;
}

.feat {
    position: relative;
    overflow: hidden;
    padding: var(--sp-6) var(--sp-5) var(--sp-5);
    background: radial-gradient(ellipse 80% 60% at 12% 0%, rgba(232, 192, 74, .07), transparent 62%), var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

/* Glaskante oben — der schmale helle Strich, der Flächen plastisch
   wirken lässt */

.feat::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .18) 22%, rgba(232, 192, 74, .5) 50%, rgba(255, 255, 255, .18) 78%, transparent);
    opacity: .55;
    transition: opacity var(--dur) var(--ease);
}

.feat:hover::before {
    opacity: 1;
}

/* Schein, der beim Hover aus der Ecke wächst */

.feat::after {
    content: '';
    position: absolute;
    top: -40%;
    left: -10%;
    width: 60%;
    height: 120%;
    background: radial-gradient(ellipse at center, rgba(232, 192, 74, .16), transparent 68%);
    opacity: 0;
    transition: opacity .35s var(--ease);
    pointer-events: none;
}

.feat:hover::after {
    opacity: 1;
}

.feat:hover {
    border-color: var(--line-2);
    transform: translateY(-4px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .5), var(--glow-md);
}

.feat>* {
    position: relative;
    z-index: 1;
}

.feat-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    margin-bottom: var(--sp-4);
    color: var(--cyan);
    background: linear-gradient(150deg, rgba(232, 192, 74, .18), rgba(232, 192, 74, .04));
    border: 1px solid var(--line-2);
    border-radius: var(--r-md);
    box-shadow: var(--glow-sm), inset 0 1px 0 rgba(255, 255, 255, .12);
    transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.feat-icon svg {
    width: 22px;
    height: 22px;
}

.feat:hover .feat-icon {
    box-shadow: var(--glow-xl), inset 0 1px 0 rgba(255, 255, 255, .18);
    transform: translateY(-2px);
}

.feat h3 {
    font-size: 1.12rem;
    margin-bottom: var(--sp-2);
}

.feat p {
    font-size: var(--t-sm);
    color: var(--muted);
    line-height: 1.7;
    max-width: 46ch;
}

@media (max-width: 900px) {
    .feat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .feat-grid>.feat:first-child,
    .feat-grid>.feat:last-child {
        grid-column: span 2;
    }
}

@media (max-width: 620px) {
    .feat-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .feat-grid>.feat:first-child,
    .feat-grid>.feat:last-child {
        grid-column: auto;
    }
}

/* ============ Animierte Icons ============
   Die Uhr läuft dauerhaft, alles andere reagiert erst beim Hover —
   sechs gleichzeitig zappelnde Symbole wären reiner Lärm. */

.feat-icon .ico {
    width: 24px;
    height: 24px;
    overflow: visible;
}

/* --- Uhr: Zeiger drehen sich --- */

.ico-clock .hand-h,
.ico-clock .hand-m {
    transform-origin: 12px 12px;
}

.ico-clock .hand-m {
    animation: clockSpin 4s linear infinite;
}

.ico-clock .hand-h {
    animation: clockSpin 48s linear infinite;
}

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

.feat:hover .ico-clock .hand-m {
    animation-duration: 1s;
}

.feat:hover .ico-clock .hand-h {
    animation-duration: 12s;
}

/* --- Blitz: schlägt ein --- */

.ico-bolt {
    transform-origin: 12px 12px;
}

.feat:hover .ico-bolt {
    animation: boltStrike .55s var(--ease);
}

@keyframes boltStrike {
    0% {
        transform: scale(1) rotate(0);
        filter: none;
    }
    35% {
        transform: scale(1.18) rotate(-7deg);
        filter: drop-shadow(0 0 8px rgba(232, 192, 74, .9));
    }
    60% {
        transform: scale(.96) rotate(3deg);
    }
    100% {
        transform: scale(1) rotate(0);
        filter: none;
    }
}

/* --- Schloss: Bügel rastet ein --- */

.ico-lock .shackle {
    transform-origin: 12px 10px;
    transition: transform .32s var(--ease);
}

.feat:hover .ico-lock .shackle {
    transform: translateY(-2.5px) scaleY(1.25);
}

/* --- Schild: Haken wird gezeichnet --- */

.ico-shield .tick {
    stroke-dasharray: 11;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset .45s var(--ease);
}

.feat:hover .ico-shield .tick {
    stroke-dashoffset: 11;
    animation: tickDraw .5s var(--ease) .06s forwards;
}

@keyframes tickDraw {
    from {
        stroke-dashoffset: 11;
    }
    to {
        stroke-dashoffset: 0;
    }
}

/* --- Aktualisieren: dreht eine Runde --- */

.ico-sync {
    transform-origin: 12px 12px;
    transition: transform .6s var(--ease);
}

.feat:hover .ico-sync {
    transform: rotate(360deg);
}

/* --- Community: Figuren treten nacheinander hervor --- */

.ico-users .u1,
.ico-users .u2 {
    transition: transform .35s var(--ease), opacity .35s var(--ease);
}

.ico-users .u2 {
    opacity: .55;
}

.feat:hover .ico-users .u1 {
    transform: translateX(-1.5px);
}

.feat:hover .ico-users .u2 {
    transform: translateX(1.5px);
    opacity: 1;
}

/* ---------- Zentrierter Sektionskopf ---------- */

.sec-center {
    text-align: center;
    max-width: 620px;
    margin: 0 auto var(--sp-7);
}

.sec-center h2 {
    margin-bottom: var(--sp-3);
}

.sec-text {
    color: var(--muted);
    font-size: var(--t-md);
    text-wrap: pretty;
}

/* ---------- Status-Seite ---------- */

.status-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
    padding: var(--sp-4) var(--sp-5);
    margin-bottom: var(--sp-7);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
}

.status-block {
    margin-bottom: var(--sp-7);
}

.status-block:last-child {
    margin-bottom: 0;
}

.block-label {
    display: block;
    margin-bottom: var(--sp-4);
    font-family: 'JetBrains Mono', monospace;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--cyan);
    text-shadow: var(--glow-sm);
}

/* --- Anti-Cheats: kompakte Zeile --- */

.ac-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-3);
}

.ac-card {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 999px;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.ac-card:hover {
    border-color: var(--line-2);
    box-shadow: var(--glow-md);
}

.ac-logo {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    font-family: 'Archivo', sans-serif;
    font-size: .88rem;
    font-weight: 800;
    color: var(--cyan);
    background: rgba(232, 192, 74, .1);
    border: 1px solid var(--line-2);
    border-radius: 50%;
    overflow: hidden;
}

.ac-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ac-name {
    flex: 1;
    font-size: var(--t-sm);
    font-weight: 600;
}

/* --- Software: Karten mit Bild --- */

.sw-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--sp-4);
}

.sw-card {
    --rx: 0deg;
    --ry: 0deg;
    --lift: 0px;
    --img-x: 0px;
    --img-y: 0px;
    --img-s: 1;
    --gx: 50%;
    --gy: 28%;
    position: relative;
    overflow: hidden;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    cursor: pointer;
    transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift));
    transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.sw-card:hover,
.sw-card:focus-visible {
    --lift: -4px;
    border-color: var(--line-2);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .5), var(--glow-md);
    outline: none;
}

.sw-card.is-tilt {
    --lift: -3px;
    will-change: transform;
    transition: transform .12s ease-out, border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.sw-media {
    position: relative;
    aspect-ratio: 16 / 9;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: radial-gradient(ellipse 70% 60% at 50% 55%, rgba(232, 192, 74, .12), transparent 70%);
}

.sw-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate3d(var(--img-x), var(--img-y), 0);
    transition: transform .5s var(--ease);
}

.sw-card.is-tilt .sw-media img {
    transition: transform .12s ease-out;
}

.sw-card-glare {
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(360px circle at var(--gx) var(--gy), rgba(255, 228, 150, .16), transparent 46%);
    opacity: 0;
    mix-blend-mode: screen;
    transition: opacity .3s var(--ease);
}

.sw-card.is-tilt .sw-card-glare {
    opacity: 1;
}

.sw-fallback {
    display: none;
}

.sw-media.no-img>img {
    display: none;
}

.sw-media.no-img .sw-fallback {
    display: grid;
    place-items: center;
}

.sw-media.no-img .sw-fallback img {
    width: 44px;
    height: auto;
    opacity: .9;
    mix-blend-mode: lighten;
    filter: drop-shadow(0 0 10px rgba(232, 192, 74, .5));
}

.sw-body {
    padding: var(--sp-4) var(--sp-5);
    transform: translate3d(var(--bd-x, 0px), var(--bd-y, 0px), 0);
    transition: transform .35s var(--ease);
}

.sw-card.is-tilt .sw-body {
    transition: transform .12s ease-out;
}

.sw-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
}

.sw-top h3 {
    font-size: 1.06rem;
}

.sw-top .pstatus {
    position: static;
    flex-shrink: 0;
    transform: none;
}

@media (max-width: 780px) {
    .ac-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 460px) {
    .ac-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

.status-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .93rem;
}

.status-summary.ok strong {
    color: #3ddc84;
}

.status-summary.warn strong {
    color: var(--cyan-soft);
}

.live-dot.amber {
    background: #ffb347;
    box-shadow: 0 0 9px #ffb347;
}

.status-time {
    font-family: 'JetBrains Mono', monospace;
    font-size: .72rem;
    color: var(--muted-2);
}

/* Status-Pillen auf der Status-Seite stehen im Fluss, nicht auf
   einem Bild — deshalb ohne absolute Position und Blur. */

.ac-card .pstatus,
.sw-top .pstatus {
    position: static;
    background: var(--surface-2);
    backdrop-filter: none;
    white-space: nowrap;
}

/* ---------- Ablauf ---------- */

/* Ablauf als Zeitstrahl: eine durchgehende Linie verbindet die
   Stationen. Vier lose Kästen lesen sich nicht als Reihenfolge —
   die Linie macht daraus einen Weg. */

.steps {
    position: relative;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-5);
}

/* Die Linie läuft auf Höhe der Knotenmitte, um jeweils ein halbes
   Feld eingerückt, damit sie nicht ins Leere ragt. */

.steps::before {
    content: '';
    position: absolute;
    top: 27px;
    left: 12.5%;
    right: 12.5%;
    height: 2px;
    background: linear-gradient(90deg, rgba(232, 192, 74, .15), rgba(232, 192, 74, .55) 20%, rgba(232, 192, 74, .55) 80%, rgba(232, 192, 74, .15));
}

/* Lichtpunkt, der die Linie entlangwandert */

.steps::after {
    content: '';
    position: absolute;
    top: 24px;
    left: 12.5%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 14px var(--cyan);
    animation: stepTravel 6s var(--ease) infinite;
}

@keyframes stepTravel {
    0% {
        left: 12.5%;
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        left: 87.5%;
        opacity: 0;
    }
}

.step {
    position: relative;
    text-align: center;
    padding-top: 0;
}

/* Station auf der Linie. Der deckende Hintergrund unterbricht die
   Linie sauber, statt sie durch den Kreis scheinen zu lassen. */

.step-node {
    position: relative;
    z-index: 1;
    width: 56px;
    height: 56px;
    margin: 0 auto var(--sp-4);
    display: grid;
    place-items: center;
    color: var(--cyan);
    background: linear-gradient(150deg, rgba(232, 192, 74, .16), rgba(232, 192, 74, .03)), var(--bg);
    border: 1px solid var(--line-2);
    border-radius: 50%;
    box-shadow: var(--glow-sm), inset 0 1px 0 rgba(255, 255, 255, .14);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.step-node svg {
    width: 22px;
    height: 22px;
}

.step:hover .step-node {
    transform: translateY(-3px) scale(1.06);
    box-shadow: var(--glow-xl), inset 0 1px 0 rgba(255, 255, 255, .2);
}

.step-n {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .2em;
    color: var(--muted-2);
    margin-bottom: var(--sp-2);
    transition: color var(--dur) var(--ease);
}

.step:hover .step-n {
    color: var(--cyan);
}

.step h3 {
    font-size: 1.08rem;
    margin-bottom: var(--sp-2);
}

.step p {
    font-size: var(--t-sm);
    color: var(--muted);
    line-height: 1.7;
    max-width: 30ch;
    margin-inline: auto;
}

/* Senkrecht auf schmalen Schirmen */

@media (max-width: 780px) {
    .steps {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--sp-6);
    }
    .steps::before {
        top: 28px;
        bottom: 28px;
        left: 27px;
        right: auto;
        width: 2px;
        height: auto;
        background: linear-gradient(180deg, rgba(232, 192, 74, .15), rgba(232, 192, 74, .55) 12%, rgba(232, 192, 74, .55) 88%, rgba(232, 192, 74, .15));
    }
    .steps::after {
        display: none;
    }
    .step {
        display: grid;
        grid-template-columns: 56px minmax(0, 1fr);
        grid-template-rows: auto auto auto;
        column-gap: var(--sp-4);
        text-align: left;
    }
    .step-node {
        grid-row: 1 / span 3;
        margin: 0;
    }
    .step p {
        max-width: none;
        margin-inline: 0;
    }
}

/* ---------- Bewertungen: scrollende Spalten ---------- */

.vouch-wall {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    height: 560px;
    overflow: hidden;
    padding-inline: 24px;
    max-width: var(--max);
    margin-inline: auto;
    /* Oben und unten ausblenden, sonst schneiden die Karten hart ab */
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}

.vouch-col {
    overflow: hidden;
}

.vouch-track {
    display: grid;
    gap: 18px;
    animation: vouchScroll var(--dur, 40s) linear infinite var(--dir, normal);
    will-change: transform;
}

.vouch-half {
    display: grid;
    gap: 18px;
}

@keyframes vouchScroll {
    from {
        transform: translate3d(0, 0, 0);
    }
    /* -50% minus die halbe Lücke: der Abstand zwischen den beiden
     Hälften gehört sonst nicht zur Wiederholung und das Band
     ruckt bei jedem Durchlauf. */
    to {
        transform: translate3d(0, calc(-50% - 9px), 0);
    }
}

.vouch-wall:hover .vouch-track {
    animation-play-state: paused;
}

.review {
    padding: var(--sp-5);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.review:hover {
    border-color: var(--line-2);
    background: var(--card-2);
}

.review p {
    font-size: var(--t-sm);
}

.review-product {
    display: inline-block;
    margin: calc(var(--sp-2) * -1) 0 var(--sp-3);
    padding: 3px 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: .62rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--cyan);
    background: rgba(232, 192, 74, .08);
    border: 1px solid var(--line-2);
    border-radius: 999px;
}

.stars {
    display: flex;
    gap: 3px;
    margin-bottom: 12px;
    color: var(--cyan);
}

.stars svg {
    width: 15px;
    height: 15px;
}

.stars .off {
    color: var(--muted-2);
}

.review p {
    font-size: .91rem;
    color: var(--muted);
    margin-bottom: 16px;
}

.review-name {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .85rem;
    font-weight: 600;
}

.avatar {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    font-size: .78rem;
    font-weight: 700;
    color: var(--ink);
    background: linear-gradient(135deg, var(--cyan), var(--violet));
    border-radius: 50%;
    flex-shrink: 0;
}

.avatar-img {
    object-fit: cover;
    background: var(--surface-2);
}

.verified {
    font-size: .72rem;
    color: var(--cyan);
    font-weight: 500;
}

/* ---------- FAQ ---------- */

.faq-list {
    display: grid;
    gap: 10px;
}

.faq-item {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.faq-item:hover {
    background: var(--card-2);
}

.faq-item.open {
    border-color: var(--line-2);
    background: var(--card-2);
}

.faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    font-size: var(--t-md);
    font-weight: 600;
    text-align: left;
}

.faq-q svg {
    width: 17px;
    height: 17px;
    color: var(--cyan);
    flex-shrink: 0;
    transition: transform .3s var(--ease);
}

.faq-item.open .faq-q svg {
    transform: rotate(45deg);
}

.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s var(--ease);
}

.faq-a p {
    padding: 0 22px 20px;
    font-size: .9rem;
    color: var(--muted);
}

/* ---------- Terms / refunds ---------- */

.legal-updated {
    margin: 0 0 var(--sp-6);
    font-size: var(--t-sm);
    color: var(--muted);
}

.legal-body {
    display: grid;
    gap: var(--sp-6);
}

.legal-block {
    padding: var(--sp-5) var(--sp-6);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
}

.legal-block h2 {
    margin: 0 0 var(--sp-3);
    font-size: 1.15rem;
}

.legal-block p {
    margin: 0 0 0.85em;
    color: var(--muted);
    font-size: .95rem;
    line-height: 1.6;
}

.legal-block p:last-child {
    margin-bottom: 0;
}

/* ---------- Bewertung schreiben ---------- */

.vouch-box {
    margin-top: var(--sp-7);
    padding: var(--sp-6);
    display: grid;
    gap: var(--sp-4);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
}

.vouch-box h3 {
    font-size: 1.15rem;
}

.vouch-box p {
    font-size: var(--t-sm);
    color: var(--muted);
}

.vouch-box .btn {
    justify-self: start;
}

.vouch-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
}

.vouch-who {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--t-sm);
    color: var(--muted);
}

.vouch-who img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

.vouch-who a {
    color: var(--muted-2);
    text-decoration: underline;
}

.vouch-who a:hover {
    color: var(--cyan);
}

.vouch-box .field {
    display: grid;
    gap: 7px;
}

.vouch-box label {
    font-family: 'JetBrains Mono', monospace;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted-2);
}

.vouch-box input,
.vouch-box textarea {
    width: 100%;
    padding: 11px 14px;
    font: inherit;
    font-size: var(--t-sm);
    color: var(--text);
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    outline: none;
    transition: border-color var(--dur) var(--ease);
    resize: vertical;
}

.vouch-box input:focus,
.vouch-box textarea:focus {
    border-color: var(--cyan);
    box-shadow: var(--glow-sm);
}

.vouch-box .hint {
    font-size: .76rem;
    color: var(--muted-2);
}

/* ============ Eigenes Dropdown ============
   Ein natives <select> laesst seine Optionsliste nicht gestalten —
   die zeichnet das Betriebssystem, weiss auf grau, mitten im
   dunklen Layout. Deshalb hier ein eigener Aufbau aus Knopf und
   Liste. */

.cselect {
    position: relative;
}

.cselect-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 11px 14px;
    font: inherit;
    font-size: var(--t-sm);
    text-align: left;
    color: var(--text);
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    cursor: pointer;
    outline: none;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.cselect-btn:hover {
    border-color: var(--line-2);
}

.cselect-btn:focus-visible,
.cselect.is-open .cselect-btn {
    border-color: var(--cyan);
    box-shadow: var(--glow-sm);
}

/* Leere Auswahl gedaempft, damit sie wie ein Platzhalter wirkt */

.cselect-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cselect[data-value=""] .cselect-label {
    color: var(--muted);
}

.cselect-caret {
    width: 11px;
    height: 11px;
    flex: none;
    color: var(--muted);
    transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}

.cselect.is-open .cselect-caret {
    transform: rotate(180deg);
    color: var(--cyan);
}

/* ---- Liste ---- */

.cselect-list {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 20;
    max-height: 244px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--sp-1);
    list-style: none;
    background: var(--card-2);
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .72), var(--glow-sm);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .16s var(--ease), transform .16s var(--ease), visibility 0s linear .16s;
    scrollbar-width: thin;
    scrollbar-color: rgba(232, 192, 74, .3) transparent;
}

.cselect-list::-webkit-scrollbar {
    width: 6px;
}

.cselect-list::-webkit-scrollbar-thumb {
    background: rgba(232, 192, 74, .25);
    border-radius: 99px;
}

/* Kein Platz nach unten: nach oben aufklappen */

.cselect.is-up .cselect-list {
    top: auto;
    bottom: calc(100% + 6px);
    transform: translateY(6px);
}

.cselect.is-open .cselect-list {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}

.cselect-opt {
    padding: 9px 12px;
    border-radius: 8px;
    font-size: var(--t-sm);
    color: var(--muted);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

/* Tastatur- und Maus-Hervorhebung teilen sich einen Zustand */

.cselect-opt.is-active {
    background: rgba(232, 192, 74, .1);
    color: var(--text);
}

.cselect-opt[aria-selected="true"] {
    color: var(--cyan);
    background: rgba(232, 192, 74, .13);
    box-shadow: inset 2px 0 0 var(--cyan);
}

/* Sternauswahl */

.star-pick {
    display: flex;
    gap: 4px;
}

.star-pick button {
    font-size: 1.6rem;
    line-height: 1;
    color: var(--muted-2);
    transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.star-pick button:hover {
    transform: scale(1.15);
}

.star-pick button.on {
    color: var(--cyan);
    text-shadow: var(--glow-sm);
}

.vouch-foot {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    flex-wrap: wrap;
}

.vouch-msg {
    font-size: var(--t-sm);
}

.vouch-msg.ok {
    color: #3ddc84;
}

.vouch-msg.err {
    color: #ff7a90;
}

/* ---------- Community ---------- */

.community-box {
    position: relative;
    overflow: hidden;
    padding: var(--sp-8) var(--sp-6);
    text-align: center;
    background: var(--card);
    border: 1px solid var(--line-2);
    border-radius: var(--r-xl);
}

.community-glow {
    position: absolute;
    inset: -40% 20% auto 20%;
    height: 320px;
    background: radial-gradient(ellipse at center, rgba(232, 192, 74, .22), transparent 70%);
    filter: blur(70px);
    pointer-events: none;
}

/* Der Glow muss ausgenommen bleiben — ein pauschales
   "position: relative" auf alle Kinder würde ihn aus der absoluten
   Positionierung holen und als 320 px hohen Block in den Textfluss
   stellen. Genau das schob den Inhalt nach unten. */

.community-box>*:not(.community-glow) {
    position: relative;
}

.community-box h2 {
    margin-bottom: 14px;
}

.community-box p {
    max-width: 520px;
    margin: 0 auto 28px;
    color: var(--muted);
}

.community-note {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 20px;
    font-size: .82rem;
    color: var(--muted-2);
}

/* ---------- CTA ---------- */

.cta-box {
    position: relative;
    padding: var(--sp-8) var(--sp-6);
    text-align: center;
    background: radial-gradient(ellipse 70% 130% at 50% 0%, rgba(232, 192, 74, .13), transparent 70%), var(--card);
    border: 1px solid var(--line-2);
    border-radius: var(--r-xl);
    box-shadow: var(--glow-lg);
}

.cta-box h2 {
    margin-bottom: 12px;
}

.cta-box p {
    max-width: 470px;
    margin: 0 auto 26px;
    color: var(--muted);
}

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

.footer {
    border-top: 1px solid var(--line);
    padding-top: var(--sp-8);
    padding-bottom: var(--sp-6);
}

.footer-inner {
    display: grid;
    grid-template-columns: 1.4fr 2.4fr;
    gap: 48px;
    margin-bottom: 44px;
}

.footer-note {
    font-size: .87rem;
    color: var(--muted-2);
    margin-top: 12px;
    max-width: 300px;
}

.footer-cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 11px;
    align-items: flex-start;
}

.footer-col h4 {
    font-family: 'JetBrains Mono', monospace;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted-2);
    margin-bottom: 3px;
}

.footer-col a {
    font-size: .89rem;
    color: var(--muted);
    transition: color .2s;
    cursor: pointer;
}

.footer-col a:hover {
    color: var(--cyan);
}

@media (max-width: 760px) {
    .footer-inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .footer-cols {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }
}

.footer-legal {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    font-size: .8rem;
    color: var(--muted-2);
}

.footer-legal a {
    color: inherit;
}

.footer-legal a:hover {
    color: var(--cyan);
}

/* ---------- Warenkorb-Drawer ---------- */

.drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(0, 0, 0, .76);
    backdrop-filter: blur(5px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s var(--ease), visibility .3s;
}

.drawer-backdrop.on {
    opacity: 1;
    visibility: visible;
}

.drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    width: min(410px, 100vw);
    display: flex;
    flex-direction: column;
    background: var(--bg-2);
    border-left: 1px solid var(--line-2);
    box-shadow: -24px 0 70px rgba(0, 0, 0, .6);
    transform: translateX(102%);
    transition: transform .38s var(--ease);
}

.drawer.on {
    transform: translateX(0);
}

.drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 22px;
    border-bottom: 1px solid var(--line);
}

.drawer-head h3 {
    font-size: var(--t-h3);
}

.drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--sp-4) var(--sp-5);
}

.empty {
    text-align: center;
    padding: 60px 12px;
    color: var(--muted-2);
}

.empty svg {
    width: 42px;
    height: 42px;
    margin: 0 auto 14px;
    opacity: .35;
}

.empty p {
    font-size: .9rem;
}

.line-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 15px 0;
    border-bottom: 1px solid var(--line);
}

.line-item:last-child {
    border-bottom: 0;
}

.li-main {
    flex: 1;
    min-width: 0;
}

.li-name {
    font-size: .92rem;
    font-weight: 600;
}

.li-variant {
    font-size: .78rem;
    color: var(--muted-2);
    margin-top: 1px;
}

.li-price {
    font-family: 'JetBrains Mono', monospace;
    font-size: .92rem;
    font-weight: 700;
    color: var(--cyan);
    margin-top: 7px;
}

.qty {
    display: flex;
    align-items: center;
    gap: 2px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    overflow: hidden;
}

.qty button {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    font-size: 1rem;
    color: var(--muted);
    transition: color .2s, background .2s;
}

.qty button:hover {
    color: var(--cyan);
    background: var(--surface-2);
}

.qty span {
    min-width: 24px;
    text-align: center;
    font-size: .84rem;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
}

/* Am Bestandslimit: der Knopf bleibt sichtbar, reagiert aber nicht.
   Verschwinden wuerde die Zeile springen lassen. */

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

.qty button:disabled:hover {
    color: var(--muted);
    background: none;
}

/* ---------------- Zusatzdienste im Warenkorb ---------------- */

.addons {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px dashed var(--line-2);
}

.addon-head {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted-2);
    margin-bottom: 10px;
}

.addon {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    margin-bottom: 8px;
    background: rgba(232, 192, 74, .04);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}

.addon:last-child {
    margin-bottom: 0;
}

.addon-main {
    flex: 1;
    min-width: 0;
}

.addon-name {
    font-size: .86rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.addon-for {
    font-size: .72rem;
    color: var(--muted-2);
    margin-top: 1px;
}

.addon-price {
    font-family: 'JetBrains Mono', monospace;
    font-size: .84rem;
    font-weight: 700;
    color: var(--cyan);
}

.addon-add {
    padding: 6px 12px;
    white-space: nowrap;
    font-size: .78rem;
    font-weight: 600;
    color: var(--bg);
    background: var(--cyan);
    border-radius: var(--r-sm);
    transition: filter .2s var(--ease);
}

.addon-add:hover {
    filter: brightness(1.15);
}

.drawer-foot {
    padding: 20px 22px;
    border-top: 1px solid var(--line);
    background: rgba(0, 0, 0, .5);
}

.field {
    display: block;
    margin-bottom: 16px;
}

.field span {
    display: block;
    font-size: .78rem;
    color: var(--muted-2);
    margin-bottom: 6px;
}

.field input {
    width: 100%;
    padding: 11px 14px;
    font-size: .9rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}

.field input::placeholder {
    color: var(--muted-2);
}

.field input:focus {
    border-color: var(--cyan);
    box-shadow: var(--glow-sm);
}

.coupon-row {
    display: flex;
    gap: 8px;
}

.coupon-row input {
    flex: 1;
    min-width: 0;
}

.coupon-apply {
    flex: 0 0 auto;
    padding: 0 16px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--text);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--dur) var(--ease);
}

.coupon-apply:hover {
    color: var(--ink);
    background: var(--cyan);
    border-color: var(--cyan);
}

.coupon-msg {
    margin: 8px 0 0;
    font-size: .78rem;
}

.coupon-msg.ok {
    color: var(--cyan);
}

.coupon-msg.bad {
    color: #ff7a90;
}

.total-stack {
    margin-bottom: 4px;
}

.total-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
}

.total-row span {
    font-size: .88rem;
    color: var(--muted);
}

.total-row strong {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.3rem;
    color: var(--cyan);
    text-shadow: var(--glow-sm);
}

.total-sub span:last-child {
    font-family: 'JetBrains Mono', monospace;
    font-size: .88rem;
    color: var(--muted);
}

.total-off span,
.total-off strong {
    font-size: .88rem;
    color: var(--cyan-soft);
    text-shadow: none;
}

.total-note {
    font-size: .73rem;
    color: var(--muted-2);
    margin-bottom: 16px;
}

.btn-paypal {
    gap: 10px;
    color: #003087;
    background: #ffc439;
    border-color: #ffc439;
    font-weight: 700;
    box-shadow: 0 6px 22px rgba(255, 196, 57, .28);
}

.btn-paypal:hover:not(:disabled) {
    filter: brightness(1.04);
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(255, 196, 57, .4);
}

.paypal-mark {
    width: 22px;
    height: 22px;
    flex: none;
}

.pay-or {
    margin: 10px 0;
    text-align: center;
    font-size: .72rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted-2);
}

.drawer-error {
    font-size: .82rem;
    color: #ff7a90;
    margin-top: 10px;
    min-height: 1em;
}

/* ---------- Checkout-Modal ---------- */

.modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    place-items: center;
    padding: 16px;
}

.modal.on {
    display: grid;
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .88);
    backdrop-filter: blur(7px);
}

.modal-panel {
    position: relative;
    width: min(520px, 98vw);
    max-height: 92vh;
    background: #0c0c0a;
    border: 1px solid var(--line-2);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .7), var(--glow-lg);
    animation: pop .3s var(--ease);
}

@keyframes pop {
    from {
        opacity: 0;
        transform: scale(.96) translateY(12px);
    }
}

.modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
    background: rgba(0, 0, 0, .5);
    border-radius: 50%;
    backdrop-filter: blur(8px);
}

.modal-close:hover {
    background: rgba(0, 0, 0, .75);
    color: var(--cyan);
}

.modal-panel iframe {
    width: 100%;
    height: min(52rem, 88vh);
    border: 0;
    display: block;
}

/* Notausgang unter dem Rahmen. Laedt die Zahlungsseite nicht (viele
   Anbieter verbieten die Einbettung), ist das der einzige Weg
   weiter — dezent, aber immer da. */

.frame-out {
    display: block;
    padding: 10px 14px;
    text-align: center;
    font-size: .78rem;
    color: var(--muted-2);
    background: rgba(0, 0, 0, .5);
    border-top: 1px solid var(--line);
}

.frame-out:hover {
    color: var(--cyan);
}

/* ---------- Toast ---------- */

.toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    z-index: 120;
    transform: translate(-50%, 130%);
    padding: 12px 22px;
    font-size: .88rem;
    font-weight: 500;
    background: rgba(10, 9, 6, .96);
    border: 1px solid var(--line-2);
    border-radius: 99px;
    box-shadow: var(--glow-md);
    pointer-events: none;
    white-space: nowrap;
    /* Nur zu verschieben reicht nicht: bei leerem Text ist der Toast so
     flach, dass 130 % seiner Höhe ihn nicht aus dem Bild tragen — ein
     Rest blieb als dunkler Balken am unteren Rand stehen. */
    opacity: 0;
    visibility: hidden;
    transition: transform .35s var(--ease), opacity .25s var(--ease), visibility .25s;
}

.toast.on {
    transform: translate(-50%, 0);
    opacity: 1;
    visibility: visible;
}

/* Ein Hinweis, der etwas verhindert, darf nicht aussehen wie eine
   Bestaetigung. Sonst liest ihn niemand. */

.toast.bad {
    color: var(--amber, #ffb347);
    border-color: rgba(255, 179, 71, .45);
    box-shadow: 0 0 24px rgba(255, 179, 71, .16);
}

/* ---------- Scroll-Reveal ---------- */

.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .6s var(--ease), transform .6s var(--ease);
}

.reveal.in {
    opacity: 1;
    transform: none;
}

/* Reveal darf die 3D-Karte nicht mit transform: none plattmachen */
.pcard.reveal:not(.in) {
    transform: perspective(980px) rotateX(0deg) rotateY(0deg) translateY(22px);
}

.pcard.reveal.in {
    transform: perspective(980px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift));
}

/* ---------- Seitenwechsel & Motion ---------- */

@keyframes pageEnter {
    from {
        opacity: 0;
        transform: translateY(22px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes heroRise {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.page-in [data-page]:not([hidden]) {
    animation: pageEnter .55s var(--ease) both;
}

.page-in .page-head:not([hidden]) {
    animation: pageEnter .5s var(--ease) both;
}

.page-in .page-head:not([hidden]) .eyebrow {
    animation: heroRise .5s var(--ease) both;
}

.page-in .page-head:not([hidden]) h1 {
    animation: heroRise .55s .08s var(--ease) both;
}

.page-in .page-head:not([hidden]) .sec-text {
    animation: heroRise .55s .16s var(--ease) both;
}

.page-in .hero-copy > * {
    animation: heroRise .7s var(--ease) both;
}

.page-in .hero-copy > *:nth-child(1) { animation-delay: .04s; }
.page-in .hero-copy > *:nth-child(2) { animation-delay: .12s; }
.page-in .hero-copy > *:nth-child(3) { animation-delay: .2s; }
.page-in .hero-copy > *:nth-child(4) { animation-delay: .28s; }
.page-in .hero-copy > *:nth-child(5) { animation-delay: .36s; }
.page-in .hero-copy > *:nth-child(6) { animation-delay: .44s; }

.page-in .hero-bot {
    animation: pageEnter .7s .18s var(--ease) backwards;
}

.page-in .stat {
    animation: heroRise .55s var(--ease) backwards;
}

.page-in .stat:nth-child(1) { animation-delay: .08s; }
.page-in .stat:nth-child(2) { animation-delay: .16s; }
.page-in .stat:nth-child(3) { animation-delay: .24s; }
.page-in .stat:nth-child(4) { animation-delay: .32s; }

.page-in .feat {
    animation: heroRise .55s var(--ease) backwards;
}

.page-in .feat:nth-child(1) { animation-delay: .05s; }
.page-in .feat:nth-child(2) { animation-delay: .12s; }
.page-in .feat:nth-child(3) { animation-delay: .19s; }
.page-in .feat:nth-child(4) { animation-delay: .26s; }
.page-in .feat:nth-child(5) { animation-delay: .33s; }
.page-in .feat:nth-child(6) { animation-delay: .4s; }

.footer-col a.on {
    color: var(--cyan);
}

/* ---------- Responsive ---------- */

@media (max-width: 1200px) {
    .nav {
        gap: 0;
    }
    .nav a {
        padding: 8px 9px;
        font-size: .84rem;
    }
}

@media (max-width: 980px) {
    .hero>.wrap {
        max-width: var(--max);
    }
    .hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .hero-copy {
        margin-inline: auto;
    }
    .hero-sub {
        margin-inline: auto;
    }
    .hero-cta {
        justify-content: center;
    }
    /* Auf schmalen Schirmen passt beides nicht in einen Bildschirm —
     lieber natürlich fließen lassen als quetschen. */
    .hero-screen {
        min-height: auto;
    }
    /* Feste Hoehe war fuer das 3D-Modell noetig. Das Video bringt seine
     eigene ueber das Seitenverhaeltnis mit — eine Mindesthoehe liesse
     nur Leerraum darunter stehen. */
    .hero-bot {
        min-height: 0;
        height: auto;
        margin-right: 0;
        margin-top: 0;
        order: -1;
    }
}

@media (max-width: 900px) {
    .cat-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .vouch-wall {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        height: 480px;
    }
    .header-bar {
        padding-left: 18px;
        position: relative;
    }
    .icon-pill {
        display: none;
    }
    .hero-title {
        font-size: clamp(2.2rem, 9vw, 3.2rem);
    }
    /* Absolut statt fixed: die Capsule hat backdrop-filter und ist damit
     Containing Block für fixed-Kinder — top/left würden sonst gegen die
     Capsule statt gegen den Viewport rechnen. Die negativen Insets
     heben das Innenpadding der Capsule wieder auf. */
    .nav {
        position: absolute;
        top: calc(100% + 12px);
        left: -18px;
        right: -10px;
        flex-direction: column;
        gap: 0;
        padding: 12px 24px 20px;
        background: rgba(8, 7, 4, .97);
        backdrop-filter: blur(18px);
        border-bottom: 1px solid var(--line);
        transform: translateY(-130%);
        transition: transform .32s var(--ease);
        z-index: -1;
    }
    .nav.on {
        transform: translateY(0);
    }
    .nav a {
        padding: 13px 4px;
        border-bottom: 1px solid var(--line);
    }
    .nav a::after {
        display: none;
    }
    .burger {
        display: flex;
    }
    .stats {
        grid-template-columns: repeat(2, 1fr);
    }
    .section {
        padding-block: 74px;
    }
}

@media (max-width: 560px) {
    .filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }
    .filter {
        flex: 0 0 auto;
    }
    .cat-tiles {
        grid-template-columns: minmax(0, 1fr);
    }
    .tile {
        aspect-ratio: 16 / 10;
    }
    .tile-name {
        font-size: 1.3rem;
    }
    .vouch-wall {
        grid-template-columns: minmax(0, 1fr);
        height: 420px;
        padding-inline: 18px;
    }
    .community-box {
        padding: 44px 22px;
    }
    .wrap {
        padding-inline: 18px;
    }
    .hero {
        padding-top: calc(var(--header-h) + 56px);
    }
    body.has-announce .hero {
        padding-top: calc(var(--header-h) + var(--announce-h, 40px) + 56px);
    }
    .grid {
        grid-template-columns: 1fr;
    }
    .card {
        padding: 22px;
    }
    .cta-box {
        padding: 44px 22px;
    }
    .footer-legal {
        flex-direction: column;
        gap: 6px;
    }
    .drawer {
        width: 100vw;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
    html {
        scroll-behavior: auto;
    }
    /* Laufende Bänder ganz anhalten statt in Millisekunden durchzurauschen */
    .marquee-track,
    .vouch-track {
        animation: none !important;
    }
    .bg-hex-glow {
        display: none;
    }
    .bg-hex {
        animation: none !important;
    }
    .atmo-core,
    .atmo-ray {
        animation: none !important;
    }
    .cursor-dot,
    .cursor-glow {
        display: none;
    }
    .steps::after {
        display: none;
    }
    .pa {
        animation: none !important;
    }
    .ico-clock .hand-h,
    .ico-clock .hand-m {
        animation: none !important;
    }
    .vouch-wall {
        height: auto;
        overflow: visible;
        mask-image: none;
        -webkit-mask-image: none;
    }
    /* Ohne Bewegung ist die zweite Hälfte nur eine Dopplung */
    .vouch-half+.vouch-half {
        display: none;
    }
    .pcard,
    .pcard.reveal,
    .pcard.reveal.in,
    .sw-card,
    .hero-video,
    .tile {
        --rx: 0deg !important;
        --ry: 0deg !important;
        --lift: 0px !important;
        --img-x: 0px !important;
        --img-y: 0px !important;
        --img-s: 1 !important;
        --fg-x: 0px !important;
        --fg-y: 0px !important;
        --bd-x: 0px !important;
        --bd-y: 0px !important;
        transform: none !important;
    }
    .pcard-glare,
    .sw-card-glare,
    .tile-glare,
    .hero-video-glare {
        display: none;
    }
    .asst-panel {
        transition: none !important;
    }
    .asst-launch::after {
        animation: none !important;
    }
    .promo-panel {
        transition: none !important;
    }
    .page-in [data-page]:not([hidden]),
    .page-in .page-head:not([hidden]),
    .page-in .page-head:not([hidden]) .eyebrow,
    .page-in .page-head:not([hidden]) h1,
    .page-in .page-head:not([hidden]) .sec-text,
    .page-in .hero-copy > *,
    .page-in .hero-bot,
    .page-in .stat,
    .page-in .feat {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ============================================================
   RABATT-AKTION
   ============================================================ */

/* Nur ein Traeger fuers gemeinsame Ein- und Ausblenden — Knopf
   und Modal positionieren sich selbst. */

.promo {
    display: contents;
}

/* ---------- Knopf unten links ---------- */

.promo-launch {
    position: fixed;
    left: var(--sp-5);
    bottom: var(--sp-5);
    z-index: 75;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 11px var(--sp-4) 11px 13px;
    border: 1px solid var(--line-2);
    border-radius: 99px;
    background: linear-gradient(135deg, rgba(232, 192, 74, .17), rgba(212, 160, 23, .1)), #0a0a08;
    color: var(--text);
    font-size: var(--t-sm);
    font-weight: 500;
    cursor: pointer;
    box-shadow: var(--glow-md);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.promo-launch svg {
    width: 18px;
    height: 18px;
    flex: none;
    color: var(--cyan);
}

.promo-launch:hover {
    transform: translateY(-2px);
    box-shadow: var(--glow-xl);
}

.promo-launch:active {
    transform: translateY(0) scale(.97);
}

/* ---------- Modal ---------- */

.promo-modal {
    position: fixed;
    inset: 0;
    /* Ueber dem Warenkorb (90), aber UNTER dem Checkout (100):
     ein Rabattfenster darf sich nie ueber einen laufenden
     Bezahlvorgang legen. */
    z-index: 95;
    display: grid;
    place-items: center;
    padding: var(--sp-4);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
}

.promo.is-open .promo-modal {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

.promo-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .84);
    backdrop-filter: blur(6px);
}

.promo-panel {
    position: relative;
    width: min(740px, 100%);
    max-height: 92vh;
    /* Das Poster ist hochkant. Ohne Mindesthoehe wuerde die
     Bildspalte auf die Hoehe des Formulars zusammengedrueckt und
     vom Motiv bliebe ein Streifen. */
    min-height: min(470px, 88vh);
    overflow: hidden auto;
    display: grid;
    grid-template-columns: 270px 1fr;
    border: 1px solid var(--line-2);
    border-radius: var(--r-lg);
    background: var(--card);
    box-shadow: 0 30px 90px rgba(0, 0, 0, .8), var(--glow-md);
    transform: translateY(14px) scale(.97);
    transition: transform var(--dur) var(--ease);
}

.promo.is-open .promo-panel {
    transform: none;
}

.promo-x {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: rgba(0, 0, 0, .6);
    backdrop-filter: blur(8px);
    color: var(--muted);
    cursor: pointer;
    transition: var(--dur) var(--ease);
}

.promo-x svg {
    width: 15px;
    height: 15px;
}

.promo-x:hover {
    color: var(--cyan);
    border-color: var(--line-2);
}

/* ---------- Bildseite ---------- */

.promo-art {
    position: relative;
    overflow: hidden;
    background: #0a0a08;
}

.promo-art>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 18%;
    display: block;
}

/* Nur eine schmale Kante zur Textseite. Das Poster bringt seinen
   eigenen Rahmen mit — ein breiter Verlauf wuerde ihn zumatschen. */

.promo-art::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 82%, rgba(10, 9, 6, .7));
    pointer-events: none;
}

.promo-badge {
    position: absolute;
    top: var(--sp-3);
    left: var(--sp-3);
    z-index: 2;
    padding: 5px 11px;
    border: 1px solid var(--line-2);
    border-radius: 99px;
    background: rgba(10, 9, 6, .8);
    backdrop-filter: blur(10px);
    font-family: 'JetBrains Mono', monospace;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--cyan);
}

/* ---------- Textseite ---------- */

.promo-body {
    padding: var(--sp-7) var(--sp-6);
    text-align: center;
}

.promo-pre {
    font-family: 'JetBrains Mono', monospace;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted-2);
}

.promo-big {
    margin: 6px 0 2px;
    font-family: 'Archivo', 'Inter', sans-serif;
    font-size: clamp(1.9rem, 4.6vw, 2.5rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.02em;
    text-transform: uppercase;
    color: var(--cyan);
    text-shadow: var(--glow-md);
}

.promo-sub {
    font-family: 'Archivo', 'Inter', sans-serif;
    font-size: var(--t-h3);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.promo-sub span:first-child {
    color: var(--cyan);
}

.promo-lead {
    margin: var(--sp-3) auto var(--sp-5);
    max-width: 34ch;
    font-size: var(--t-sm);
    color: var(--muted);
}

.promo-form {
    display: grid;
    gap: var(--sp-3);
}

.promo-form input {
    width: 100%;
    padding: 13px var(--sp-4);
    font: inherit;
    font-size: var(--t-sm);
    text-align: center;
    color: var(--text);
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    outline: none;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.promo-form input::placeholder {
    color: var(--muted-2);
}

.promo-form input:focus {
    border-color: var(--cyan);
    box-shadow: var(--glow-sm);
}

/* Einwilligung: ohne Haken kein Absenden */

.promo-consent {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    text-align: left;
    font-size: .72rem;
    line-height: 1.5;
    color: var(--muted-2);
    cursor: pointer;
}

.promo-consent input {
    flex: none;
    width: 15px;
    height: 15px;
    margin-top: 2px;
    accent-color: var(--cyan);
    cursor: pointer;
}

.promo-consent:hover {
    color: var(--muted);
}

.promo-err {
    min-height: 1.2em;
    margin-top: var(--sp-2);
    font-size: var(--t-xs);
    color: #ff7a90;
}

.promo-no {
    display: inline-block;
    margin-top: var(--sp-2);
    font-size: var(--t-sm);
    color: var(--muted-2);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.promo-no:hover {
    color: var(--text);
}

.promo-priv {
    margin-top: var(--sp-4);
    font-size: .7rem;
    color: var(--muted-2);
}

/* ---------- Ergebnis ---------- */

.promo-check {
    width: 42px;
    height: 42px;
    margin: 0 auto var(--sp-3);
    color: var(--cyan);
}

.promo-done {
    font-family: 'Archivo', 'Inter', sans-serif;
    font-size: var(--t-h3);
    font-weight: 700;
}

.promo-coderow {
    display: flex;
    align-items: stretch;
    gap: var(--sp-2);
    margin: var(--sp-4) 0 var(--sp-3);
}

.promo-coderow code {
    flex: 1;
    min-width: 0;
    display: grid;
    place-items: center;
    padding: 13px var(--sp-3);
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--t-lg);
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--cyan);
    background: rgba(232, 192, 74, .08);
    border: 1px dashed var(--line-2);
    border-radius: var(--r-sm);
    overflow-wrap: anywhere;
}

.promo-copy {
    flex: none;
    padding: 0 var(--sp-4);
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: var(--dur) var(--ease);
}

.promo-copy:hover {
    border-color: var(--line-2);
    color: var(--cyan);
}

.promo-copy.ok {
    color: var(--cyan);
    border-color: var(--cyan);
}

.promo-hint {
    font-size: var(--t-xs);
    color: var(--muted);
}

/* ---------- Klein ---------- */

@media (max-width: 720px) {
    /* Das Bild wird zum Kopfbereich, sonst bleibt fuer den Text
     kaum Hoehe uebrig. Der Ausschnitt sitzt weiter oben, damit
     Maske und Schultern im Bild bleiben. */
    .promo-panel {
        grid-template-columns: 1fr;
        min-height: 0;
    }
    .promo-art {
        height: 190px;
    }
    .promo-art>img {
        object-position: center 22%;
    }
    .promo-art::after {
        background: linear-gradient(180deg, transparent 45%, rgba(10, 9, 6, .92));
    }
    .promo-body {
        padding: var(--sp-5) var(--sp-4) var(--sp-6);
    }
    .promo-launch {
        left: var(--sp-4);
        bottom: var(--sp-4);
        padding: 10px 14px 10px 12px;
    }
    /* Nebeneinander wuerden Rabattknopf und Assistent auf schmalen
     Schirmen kollidieren — hier bleibt nur das Symbol. */
    .promo-launch #promoLaunchText {
        display: none;
    }
}

/* ============================================================
   KI-ASSISTENT
   ============================================================ */

.asst {
    position: fixed;
    right: var(--sp-5);
    bottom: var(--sp-5);
    /* Ueber Header (60) und Banner (70), aber unter dem Warenkorb-
     Backdrop (80): oeffnet jemand den Warenkorb, wird das Widget
     mitabgedunkelt statt daraufzuliegen. */
    z-index: 75;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--sp-3);
    /* Der Container ist so hoch wie das Panel. Ohne das hier wuerde
     sein unsichtbarer Kasten alle Klicks in der unteren rechten
     Ecke der Seite schlucken. */
    pointer-events: none;
}

.asst>* {
    pointer-events: auto;
}

/* ---------- Startknopf ---------- */

.asst-launch {
    position: relative;
    width: 58px;
    height: 58px;
    flex: none;
    display: grid;
    place-items: center;
    border: 1px solid var(--line-2);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 30%, #10262c, #0a0a08 70%);
    box-shadow: var(--glow-md), inset 0 1px 0 rgba(255, 255, 255, .06);
    color: var(--text);
    cursor: pointer;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.asst-launch:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: var(--glow-xl);
}

.asst-launch:active {
    transform: scale(.96);
}

/* Langsam pulsierender Ring — zieht das Auge, ohne zu blinken */

.asst-launch::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1px solid rgba(232, 192, 74, .4);
    animation: asstPulse 3.2s var(--ease) infinite;
    pointer-events: none;
}

@keyframes asstPulse {
    0% {
        transform: scale(1);
        opacity: .55;
    }
    70%,
    100% {
        transform: scale(1.35);
        opacity: 0;
    }
}

.asst-launch-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
    mix-blend-mode: lighten;
    transition: var(--dur) var(--ease);
}

.asst-launch-x {
    width: 20px;
    height: 20px;
    position: absolute;
    opacity: 0;
    transform: rotate(-90deg);
    transition: var(--dur) var(--ease);
}

/* Offen: Logo gegen ein X tauschen, Ring aus */

.asst.is-open .asst-launch-logo {
    opacity: 0;
    transform: scale(.6);
}

.asst.is-open .asst-launch-x {
    opacity: 1;
    transform: rotate(0);
}

.asst.is-open .asst-launch::after {
    animation: none;
    opacity: 0;
}

/* ---------- Panel ---------- */

.asst-panel {
    width: min(384px, calc(100vw - var(--sp-6)));
    height: min(560px, calc(100vh - 140px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--card);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .7), var(--glow-md);
    /* Geschlossen: nicht anklickbar, aber im Baum — sonst ginge
     die Animation verloren und der Verlauf mit ihr. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(.97);
    transform-origin: 100% 100%;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur);
}

.asst.is-open .asst-panel {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}

/* ---------- Kopfzeile ---------- */

.asst-head {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(232, 192, 74, .09), transparent);
}

.asst-headtext {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    min-width: 0;
}

.asst-headtext strong {
    font-size: var(--t-md);
}

.asst-headtext span {
    font-size: var(--t-xs);
    color: var(--muted);
}

.asst-x {
    margin-left: auto;
    width: 30px;
    height: 30px;
    flex: none;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
    transition: var(--dur) var(--ease);
}

.asst-x svg {
    width: 14px;
    height: 14px;
}

.asst-x:hover {
    color: var(--text);
    border-color: var(--line-2);
}

/* ---------- Avatare ---------- */

.asst-av {
    width: 26px;
    height: 26px;
    flex: none;
    display: grid;
    place-items: center;
    border: 1px solid var(--line-2);
    border-radius: 50%;
    background: #0a0a08;
    overflow: hidden;
}

.asst-av img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    mix-blend-mode: lighten;
}

.asst-av-lg {
    width: 34px;
    height: 34px;
    box-shadow: var(--glow-sm);
}

.asst-av-lg img {
    width: 22px;
    height: 22px;
}

/* ---------- Verlauf ---------- */

.asst-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* kein Weiterscrollen der Seite */
    padding: var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    scrollbar-width: thin;
    scrollbar-color: rgba(232, 192, 74, .3) transparent;
}

.asst-list::-webkit-scrollbar {
    width: 6px;
}

.asst-list::-webkit-scrollbar-thumb {
    background: rgba(232, 192, 74, .25);
    border-radius: 99px;
}

.asst-row {
    display: flex;
    align-items: flex-end;
    gap: var(--sp-2);
    animation: asstIn .22s var(--ease);
}

.asst-user {
    justify-content: flex-end;
}

@keyframes asstIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.asst-bubble {
    max-width: 78%;
    padding: 10px var(--sp-3);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--card-2);
    font-size: var(--t-sm);
    line-height: 1.55;
    /* Modelltext kommt mit echten Umbruechen — die sollen bleiben */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.asst-bot .asst-bubble {
    border-bottom-left-radius: var(--sp-1);
}

.asst-user .asst-bubble {
    border-bottom-right-radius: var(--sp-1);
    border-color: var(--line-2);
    background: linear-gradient(135deg, rgba(232, 192, 74, .16), rgba(232, 192, 74, .06));
    color: var(--text);
}

.asst-fail .asst-bubble {
    border-color: rgba(255, 122, 144, .4);
    color: #ffb3c0;
}

/* Tippanzeige */

.asst-typing .asst-bubble {
    display: flex;
    gap: 4px;
    padding: 14px var(--sp-3);
}

.asst-typing i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--cyan);
    opacity: .35;
    animation: asstDot 1.2s var(--ease) infinite;
}

.asst-typing i:nth-child(2) {
    animation-delay: .16s;
}

.asst-typing i:nth-child(3) {
    animation-delay: .32s;
}

@keyframes asstDot {
    0%,
    60%,
    100% {
        opacity: .3;
        transform: translateY(0);
    }
    30% {
        opacity: 1;
        transform: translateY(-4px);
    }
}

/* ---------- Vorschlaege ---------- */

.asst-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    padding: 0 var(--sp-4) var(--sp-3);
}

.asst-chips:empty {
    display: none;
}

.asst-chip {
    padding: 6px 11px;
    border: 1px solid var(--line-2);
    border-radius: 99px;
    background: var(--surface);
    color: var(--cyan-soft);
    font-size: var(--t-xs);
    cursor: pointer;
    transition: var(--dur) var(--ease);
}

.asst-chip:hover {
    background: rgba(232, 192, 74, .12);
    box-shadow: var(--glow-sm);
}

/* ---------- Eingabe ---------- */

.asst-form {
    display: flex;
    align-items: flex-end;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4) var(--sp-4);
    border-top: 1px solid var(--line);
}

.asst-form textarea {
    flex: 1;
    min-width: 0;
    height: 40px;
    max-height: 96px;
    padding: 10px var(--sp-3);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--bg-2);
    color: var(--text);
    font: inherit;
    font-size: var(--t-sm);
    line-height: 1.4;
    resize: none;
    outline: none;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.asst-form textarea::placeholder {
    color: var(--muted-2);
}

.asst-form textarea:focus {
    border-color: var(--line-2);
    box-shadow: var(--glow-sm);
}

.asst-send {
    width: 40px;
    height: 40px;
    flex: none;
    display: grid;
    place-items: center;
    border: none;
    border-radius: var(--r-md);
    background: linear-gradient(135deg, var(--cyan), var(--violet));
    color: #001015;
    cursor: pointer;
    transition: var(--dur) var(--ease);
}

.asst-send svg {
    width: 17px;
    height: 17px;
}

.asst-send:hover:not(:disabled) {
    box-shadow: var(--glow-md);
    transform: translateY(-1px);
}

.asst-send:disabled {
    opacity: .45;
    cursor: default;
}

/* ---------- Klein ---------- */

@media (max-width: 520px) {
    .asst {
        right: var(--sp-4);
        bottom: var(--sp-4);
    }
    .asst-panel {
        width: calc(100vw - var(--sp-5));
        height: min(70vh, calc(100vh - 130px));
    }
}