/* ─── DESIGN TOKENS ─── */
:root {
    /* Base Variables (Default Theme) */
    --tm-name-color: #ffffff;
    --tm-name-color: #ffffff;
    --tm-company-color: rgba(255, 255, 255, 0.75);
    --bg: #ffffff;
    --panel-bg: #ffffff;
    --surface: #f7f7f9;
    --surface-hover: #eeeef2;
    --border: rgba(0, 0, 0, 0.09);
    --border-light: rgba(0, 0, 0, 0.05);
    --text: #222223;
    --text-muted: #717C7D;
    --brand: var(--tm-accent);
    --brand-alt: #F8485E;
    --brand-green: #47D7AC;
    --brand-yellow: #FED141;
    --brand-purple: var(--tm-accent);
    --brand-coral: #F8485E;
    /* Eine Familie fuer alles. Hierarchie entsteht ueber Groesse + Weight,
       nicht ueber einen Schriftwechsel. Poppins lag nur als Weight 700 vor,
       darum waren alle 500/600-Regeln darauf wirkungslos (Font-Synthesis
       erzeugt kein leichteres Gewicht) und die Heading-Ebene rendert flach
       und fett. Inter ist Variable (100-900) und traegt die Abstufung. */
    --font-heading: 'Inter', sans-serif;
    --font-body: 'Inter', sans-serif;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 9999px;
    --radius: var(--radius-lg);
    --page-pad: clamp(16px, 4vw, 64px);
    --shadow-main: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 10px 20px -6px rgba(0, 0, 0, 0.08);
    /* Vier Stufen, alle neutral. Ein Schatten simuliert Licht, und Licht ist
       nicht magenta: farbige Glows behaupten, das Objekt leuchte selbst. Wenn
       das viele Objekte tun, leuchtet keines mehr. Farbe bleibt Signal
       (Hover, Auswahl, Fokus), sie ist kein Anstrich. */
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.10);
    --shadow-modal: 0 32px 80px rgba(0, 0, 0, 0.24);
    /* Typo-Skala: neun Stufen statt 107 Einzelwerte. Den Unterschied zwischen
       0.72 und 0.75rem sieht niemand bewusst; das Auge merkt nur, dass zwei
       fast gleiche Groessen nebeneinanderstehen, und justiert staendig nach.
       Genau das erzeugt Unruhe. Die Stufen liegen auf den vorhandenen
       Haeufungen, damit der Umbau das Layout nicht verschiebt. */
    --t-2xs: 0.68rem;
    --t-xs: 0.78rem;
    --t-sm: 0.88rem;
    --t-base: 1rem;
    --t-md: 1.15rem;
    --t-lg: 1.35rem;
    --t-xl: 1.6rem;
    --t-2xl: 2rem;
    --t-3xl: 2.6rem;
    /* Bewegungssprache: zwei Kurven, drei Dauern. Ein Interface mit einer
       einzigen Bewegungssprache fuehlt sich wie ein Ding an; neun Kurven
       fuehlen sich an wie neun Entwickler. Kein Overshoot mehr: Federn ist ein
       Spielzeug-Signal, und nichts, was man 50 Mal am Tag anfasst, sollte ueber
       sein Ziel hinausschiessen.
       Gilt fuer transition, also Zustandswechsel. Die Dauern von @keyframes-
       Animationen bleiben unangetastet: Marquee-Tempo (24s) und Puls-Rhythmus
       sind bewusst gewaehlt und haben mit dieser Skala nichts zu tun. */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
    --dur-fast: 180ms;
    --dur-base: 320ms;
    --dur-slow: 600ms;
    --nav-bg: rgba(255, 255, 255, 0.82);
    /* Deckende Entsprechung, wenn der Blur mangels GPU-Compositing entfaellt */
    --nav-bg-solid: #ffffff;
    --tooltip-bg: #ffffff;
    --input-bg: #ffffff;
}

[data-theme="dark"] {
    --bg: #0d1117;
    --panel-bg: #161b22;
    --surface: #21262d;
    --surface-hover: #30363d;
    --border: rgba(255, 255, 255, 0.1);
    --border-light: rgba(255, 255, 255, 0.05);
    --text: #c9d1d9;
    --text-muted: #8b949e;
    --shadow-main: 0 8px 30px -8px rgba(0, 0, 0, 0.5);
    /* Im Dunkeln traegt ein Schatten weniger, deshalb kraeftiger. */
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.40);
    --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.50);
    --shadow-modal: 0 32px 80px rgba(0, 0, 0, 0.65);
    --nav-bg: rgba(22, 27, 34, 0.82);
    --nav-bg-solid: #161b22;
    --tooltip-bg: #21262d;
    --input-bg: #0d1117;
}

/* ─── ACCENT THEMES ─── */
/* Brand Accent – MonsterDealz Corporate Identity (Pantone 219 C) */
:root,
[data-accent="amber"] {
    --tm-accent: #DA1884;
    --tm-accent-light: #E84DA3;
    --tm-accent-10: rgba(218, 24, 132, 0.10);
    --tm-accent-25: rgba(218, 24, 132, 0.25);
}

/* Monochrome (Minimalist / High Contrast Accent) */
[data-accent="mono"] {
    --tm-accent: var(--text);
    --tm-accent-light: var(--text-muted);
    /* Use surface/border for rgba equivalents to avoid pure black/white alpha clashes */
    --tm-accent-10: var(--border-light);
    --tm-accent-25: var(--border);
}

/* ─── BLACK WEEK THEME ─── */
[data-profile="black-week"] {
    --bg: #0a0a0a;
    --panel-bg: #111111;
    --surface: #1a1a1a;
    --surface-hover: #252525;
    --border: rgba(255, 215, 0, 0.12);
    --border-light: rgba(255, 215, 0, 0.06);
    --text: #f0e6d2;
    --text-muted: #9a8e7a;
    --brand: #FFD700;
    --brand-alt: #FFA500;
    --brand-green: #FFD700;
    --brand-yellow: #FFD700;
    --brand-purple: #B8860B;
    --brand-coral: #FFD700;
    --shadow-main: 0 8px 30px -8px rgba(0, 0, 0, 0.7);
    --nav-bg: rgba(10, 10, 10, 0.82);
    --nav-bg-solid: #0a0a0a;
    --tooltip-bg: #1a1a1a;
    --input-bg: #111111;
}

/* Hero */
[data-profile="black-week"] .hero {
    background: linear-gradient(145deg, #111111 0%, #0a0a0a 100%);
    border-color: rgba(255, 215, 0, 0.15);
}

[data-profile="black-week"] .hero-content h1 .outline {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 50%, #FFD700 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: bwGoldShimmer 3s ease-in-out infinite;
}

@keyframes bwGoldShimmer {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

[data-profile="black-week"] .hero-logo {
    filter: brightness(0) invert(1);
}

/* Nav */
[data-profile="black-week"] .top-nav {
    background: var(--nav-bg);
    border-color: rgba(255, 215, 0, 0.1);
}

[data-profile="black-week"] .top-nav .logo {
    filter: brightness(0) invert(1);
}

/* Portal sections */
[data-profile="black-week"] .portal {
    background: var(--panel-bg);
    border-color: rgba(255, 215, 0, 0.1);
}

[data-profile="black-week"] .portal-info {
    background: #0d0d0d !important;
    border-left-color: #FFD700;
    border-right-color: rgba(255, 215, 0, 0.1);
}

/* Die linke Markenspalte faerbt ihren Text ueber --logo-text. Die Variable ist
   pro Brand INLINE in index.html gesetzt und auf den hellen Standard-Hintergrund
   abgestimmt: #fff nur bei dealdoktor + schnaeppchenfuchs (dunkles Logo-Banner),
   #333 bei den anderen fuenf. Die Zeile darueber faerbt die Spalte aber auf
   #0d0d0d - dadurch standen fuenf von sieben Brands mit Kontrast 1,54 auf
   Schwarz (WCAG-Minimum 4,5), zuletzt sichtbar an den Social-Zahlen.
   Im Dark-Theme trat es nie auf, weil der Block "Dark Mode: Decouple logo
   sidebar" (weiter unten) dieselbe Variable bereits umzieht; das Profil ist
   aber im Light-Theme genauso benutzbar.
   Analog dazu hier die Variable auf die Profil-Textfarbe ziehen, statt einzelne
   Kinder zu patchen - so kommen ALLE Consumer mit (social-strip, stats-compact,
   portal-tagline, demo-meta, demo-badge) und kuenftige ebenfalls.
   !important ist noetig, weil der Wert am selben Element inline steht.
   --logo-bg bleibt bewusst unberuehrt: die Logo-Banner behalten ihre
   Markenfarbe (z.B. mytopdeals cremeweiss). */
[data-profile="black-week"] .portal {
    --logo-text: var(--text) !important;
}

[data-profile="black-week"] .portal-brand-row .portal-brand-name {
    color: var(--text);
}

/* Tier buttons */
[data-profile="black-week"] .tier-btn {
    background: var(--surface);
    border-color: rgba(255, 215, 0, 0.12);
    color: var(--text);
}

[data-profile="black-week"] .tier-btn:hover {
    border-color: rgba(255, 215, 0, 0.3);
    background: var(--surface-hover);
}

[data-profile="black-week"] .tier-btn.active {
    border-color: #FFD700;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(255, 215, 0, 0.08) 100%);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.15), inset 0 0 0 1.5px #FFD700;
}

[data-profile="black-week"] .tier-btn.active .tier-label {
    color: #FFD700;
    font-weight: 700;
}

[data-profile="black-week"] .tier-btn.active .tier-price {
    color: #FFD700;
    font-weight: 700;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

/* Tiles */
[data-profile="black-week"] .tile {
    background: var(--surface);
    border-color: rgba(255, 215, 0, 0.08);
    color: var(--text);
}

[data-profile="black-week"] .tile:hover {
    border-color: rgba(255, 215, 0, 0.25);
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.06);
}

[data-profile="black-week"] .tile h4 {
    color: var(--text);
}

[data-profile="black-week"] .tile .tile-detail {
    color: var(--text-muted);
}

[data-profile="black-week"] .tile .tile-icon {
    color: #FFD700;
}

/* Layer labels */
[data-profile="black-week"] .layer-title {
    color: #FFD700;
}

/* Addon section */
[data-profile="black-week"] .addon-grid .tile {
    border-color: rgba(255, 215, 0, 0.06);
}

/* Scroll progress bar */
[data-profile="black-week"] .scroll-progress-bar {
    background: linear-gradient(90deg, #FFD700, #FFA500, #FFD700);
}

/* Section headings */
[data-profile="black-week"] .section-title,
[data-profile="black-week"] .package-layer h3 {
    color: var(--text);
}

/* Demo badges / pills */
[data-profile="black-week"] .demo-badge {
    background: rgba(255, 215, 0, 0.1) !important;
    border-color: rgba(255, 215, 0, 0.2) !important;
    color: #FFD700 !important;
}

/* Demo meta */
[data-profile="black-week"] .demo-meta {
    background: transparent !important;
}

[data-profile="black-week"] .demo-meta span {
    background: rgba(255, 215, 0, 0.06) !important;
    border-color: rgba(255, 215, 0, 0.12) !important;
    color: var(--text-muted) !important;
}

/* KPI values */
[data-profile="black-week"] .kpi-val,
[data-profile="black-week"] .stats-compact .val {
    color: #FFD700;
}

/* KPI labels + icons readable on dark bg */
[data-profile="black-week"] .kpi-tip {
    color: rgba(255, 255, 255, 0.7) !important;
    opacity: 1 !important;
}

[data-profile="black-week"] .kpi-lbl i {
    color: #FFD700 !important;
    opacity: 1 !important;
}

/* Footer */
[data-profile="black-week"] .footer {
    background: #050505;
    color: var(--text-muted);
    border-top-color: rgba(255, 215, 0, 0.08);
}

/* Tooltip */
[data-profile="black-week"] .tooltip-text {
    background: var(--tooltip-bg);
    color: var(--text);
    border-color: rgba(255, 215, 0, 0.15);
}

/* Gate / login */
[data-profile="black-week"] .gate-overlay {
    background: rgba(0, 0, 0, 0.95);
}

[data-profile="black-week"] .gate-card {
    background: #111111;
    border-color: rgba(255, 215, 0, 0.15);
}

[data-profile="black-week"] .gate-submit-btn {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    color: #0a0a0a;
}

/* Offer bar / cart */
[data-profile="black-week"] .offer-bar {
    background: #111111;
    border-color: rgba(255, 215, 0, 0.15);
    /* Der Hintergrund ist hier vollstaendig deckend – ein backdrop-filter
       wuerde jeden Frame berechnet und ist zu 100% verdeckt. */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Offer-Bar ins Gold/Schwarz-Schema. Punktuell statt ueber --tm-accent:
   die Variable hat projektweit ueber 400 Verwendungen, das waere eine
   eigene Aenderung mit eigenem Testlauf. */
[data-profile="black-week"] .offer-bar::before {
    background: linear-gradient(90deg,
            transparent 0%,
            #FFD700 18%,
            #FFA500 50%,
            #FFD700 82%,
            transparent 100%);
}

[data-profile="black-week"] .offer-bar-checkout-btn {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    color: #0a0a0a;
}

[data-profile="black-week"] .offer-bar-checkout-btn:hover {
    box-shadow: 0 8px 20px rgba(255, 165, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}

[data-profile="black-week"] .offer-bar-total-price {
    color: #FFD700;
}

/* Die zweite Zeile ist noetig, weil der Light-Theme-Block weiter unten mit
   hoeherer Spezifitaet dieselbe Regel setzt. */
[data-profile="black-week"] .offer-bar-help-item:hover,
[data-theme="light"][data-profile="black-week"] .offer-bar-help-item:hover {
    background: #FFD700;
    color: #0a0a0a;
}

[data-profile="black-week"] .offer-bar-avatar-more {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #0a0a0a;
}

/* Offer-Bar im LIGHT-Theme + Black-Week: Die Light-Overrides (heller Glass-BG,
   weisse Cards, helle Total-Box) stehen spaeter im File und gewinnen bei
   gleicher Spezifitaet gegen die Black-Week-Overrides oben -> heller Text
   (--text: #f0e6d2) landet auf hellem Grund und ist unlesbar. Black-Week ist
   konzeptionell durchgehend dunkel (alle Farbvariablen dark, unabhaengig vom
   User-Theme); die Offer-Bar ist das einzige grosse Element mit direkten
   Light-Farben. Hier auf die Dark-Optik zurueckgesetzt, mit hoeherer
   Spezifitaet ([data-theme][data-profile]) damit es die Light-Regeln
   zuverlaessig schlaegt. Default-Theme ist light (admin.js), d.h. jeder Partner
   ohne manuellen Theme-Wechsel war betroffen. */
[data-theme="light"][data-profile="black-week"] .offer-bar {
    background: #111111;
    border-color: rgba(255, 215, 0, 0.15);
    box-shadow:
        0 -12px 48px rgba(0, 0, 0, 0.5),
        0 -1px 0 rgba(255, 255, 255, 0.08) inset;
}
[data-theme="light"][data-profile="black-week"] .offer-bar-card {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 215, 0, 0.12);
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.18),
        0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}
[data-theme="light"][data-profile="black-week"] .offer-bar-card:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 215, 0, 0.4);
}
[data-theme="light"][data-profile="black-week"] .offer-bar-total {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.10) 0%,
        rgba(255, 255, 255, 0.04) 100%);
    border-color: rgba(255, 215, 0, 0.15);
}
[data-theme="light"][data-profile="black-week"] .offer-bar-help-item {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85);
    border: none;
}
[data-theme="light"][data-profile="black-week"] .offer-bar-help-item:hover {
    background: var(--tm-accent, #e94d97);
    color: #fff;
}
[data-theme="light"][data-profile="black-week"] .offer-bar--collapsed .offer-bar-summary {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 215, 0, 0.12);
}
/* Direkte dunkle Text-/Glyph-Farben, die auf dem dunklen Grund verschwinden. */
[data-theme="light"][data-profile="black-week"] .offer-bar-card-remove {
    color: rgba(255, 255, 255, 0.55);
}
[data-theme="light"][data-profile="black-week"] .offer-bar-card-remove .offer-bar-card-remove-glyph {
    background: rgba(255, 255, 255, 0.12);
}
[data-theme="light"][data-profile="black-week"] .offer-bar-total-reach {
    color: var(--text-muted, #9a8e7a);
}
[data-theme="light"][data-profile="black-week"] .offer-pill-boost {
    color: var(--text-muted, #9a8e7a);
}

/* CTA / buttons */
[data-profile="black-week"] .cta-btn,
[data-profile="black-week"] .hero-cta {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    color: #0a0a0a;
    font-weight: 700;
}

[data-profile="black-week"] .cta-btn:hover,
[data-profile="black-week"] .hero-cta:hover {
    box-shadow: 0 4px 25px rgba(255, 215, 0, 0.3);
}

/* Social strip: KEINE color-Regel hier. Die Basis setzt `color: var(--logo-text)
   !important`, jede nicht-wichtige Farbe an dieser Stelle ist wirkungslos (die
   fruehere `var(--text-muted)`-Regel war genau deshalb tot). Die Faerbung laeuft
   ueber --logo-text am .portal, siehe Block oben. */

/* FAQ */
[data-profile="black-week"] .faq-item {
    background: var(--surface);
    border-color: rgba(255, 215, 0, 0.08);
}

[data-profile="black-week"] .faq-question {
    color: var(--text);
}

/* Dot nav */
[data-profile="black-week"] .dot-nav-dot.active {
    background: #FFD700;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

/* ─── BLACK WEEK BRANDING ELEMENTS ─── */

/* ─── Early-Bird-Frist im Hero ────────────────────────────────────
   Loest das fruehere Ribbon an der Hero-Oberkante ab. Ein randloser
   Streifen dort liest sich als Toolbar, also als Beiwerk, egal wie hell
   er ist. Die Frist ist der einzige Verknappungshebel des Kits und
   deshalb ab dem ersten Tag das groesste Einzelelement im Hero.
   Konstant bleiben Groesse und Position, es eskalieren nur
   Granularitaet und Farbe (siehe .is-final). */
.bw-deadline {
    margin-top: 20px;
}

.bw-deadline[hidden] {
    display: none;
}

.bw-dl-eyebrow {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-heading);
    font-size: var(--t-2xs);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #9a8e7a;
    margin-bottom: 8px;
    transition: color var(--dur-base) var(--ease-out);
}

.bw-dl-bolt {
    color: #FFD700;
    font-size: 1.1em;
    line-height: 1;
    letter-spacing: 0;
}

.bw-dl-clock {
    display: inline-flex;
    align-items: stretch;
    /* Liegt bewusst ueber der Kit-H1 (clamp(1.5rem, 2.8vw, 2.8rem)): die
       Headline gewinnt ueber Flaeche, die Frist ueber Versalhoehe. */
    font-size: clamp(2.1rem, 3vw, 3rem);
    line-height: 1;
    color: #f0e6d2;
    font-variant-numeric: tabular-nums;
}

.bw-dl-seg {
    display: inline-flex;
    align-items: baseline;
    gap: 0.18em;
}

/* Haarlinie statt Doppelpunkt: trennt, ohne zu blinken, und ist in der
   Basisstufe der einzige Goldpunkt des Blocks. */
.bw-dl-seg + .bw-dl-seg {
    border-left: 1px solid rgba(255, 215, 0, 0.3);
    margin-left: 0.5em;
    padding-left: 0.5em;
}

.bw-dl-seg b {
    font-weight: 500;
    letter-spacing: -0.02em;
}

/* Feste Kastenbreite fuer die nullgepolsterten Folgesegmente: der Tick
   schreibt damit in eine Box, die sich nicht neu vermisst. */
.bw-dl-seg + .bw-dl-seg b {
    display: inline-block;
    min-width: 1.3em;
    text-align: right;
}

.bw-dl-seg em {
    font-style: normal;
    font-size: 0.28em;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #9a8e7a;
}

/* Endstufe (unter 48 Std): der Akzent sitzt auf der FUEHRENDEN Einheit,
   also auf der Zahl, die "wie lange noch" beantwortet. Welche das ist,
   wechselt mit der Stufe, der Selektor ist dadurch zustandsgebunden.
   In der Basisstufe gibt es bewusst gar keinen Akzent, damit die Farbe
   selbst ein Eskalationssignal bleibt statt Dauerdekoration. */
.bw-deadline.is-final .bw-dl-eyebrow {
    color: #FF6B35;
}

.bw-deadline.is-final .bw-dl-seg:first-child b {
    color: #FF6B35;
}

/* Frist und Vorteil stehen nebeneinander in einer Zeile, gleiche Groesse,
   getrennt durch dieselbe Haarlinie wie die Zeitsegmente. Zwei Register:
   die Frist in Creme sagt "wie lange", der Wert in Gold sagt "wofuer". */
.bw-dl-row {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 0;
}

.bw-dl-pct {
    display: inline-flex;
    align-items: baseline;
    gap: 0.18em;
    font-size: clamp(2.1rem, 3vw, 3rem);
    line-height: 1;
    color: #FFD700;
    font-variant-numeric: tabular-nums;
    border-left: 1px solid rgba(255, 215, 0, 0.3);
    margin-left: 0.5em;
    padding-left: 0.5em;
}

.bw-dl-pct[hidden] {
    display: none;
}

.bw-dl-pct b {
    font-weight: 500;
    letter-spacing: -0.02em;
}

.bw-dl-pct em {
    font-style: normal;
    font-size: 0.28em;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    /* Gedimmtes Gold statt Grau: das Segment bleibt als Einheit lesbar. */
    color: color-mix(in srgb, #FFD700 62%, transparent);
}

/* ─── Frist angedockt in der Offer-Bar ───────────────────────────
   Sobald die Hero-Box hinter der Sticky-Nav verschwindet, uebernimmt dieser
   Zwilling. Gleiche Fakten, andere Tonlage: oben Display-Element (~3rem),
   hier Statuszeile (15px).
   Das Band liegt ABSOLUT in der Bar. Als Flex-Kind wuerde seine
   min-content-Breite zur Mindestbreite der Bar und koennte sie aufreissen –
   out-of-flow kann es die Breite baulich nicht beeinflussen. Die Hoehe
   kommt ueber padding-top an der Bar, --eb-rail-h ist die einzige Quelle
   dafuer. Vorgabe war: hoeher ja, breiter nie. */
.offer-bar {
    --eb-rail-h: 40px;
    /* Schriftgroesse der Werte = Hoehe ihrer Zeilenbox (line-height: 1).
       Der Baseline-Ausgleich unten rechnet damit, deshalb eine Quelle. */
    --eb-val-size: 23px;
    /* Takt des Wide-Intro-Auftritts (_bwEbWideIntro, admin.js): eine Quelle
       fuer beide Seiten, damit JS (Folgestufen-Timing) und CSS (Animation)
       nicht zwei Zahlen synchron halten muessen. */
    --eb-letter-stagger: 20ms;
    --eb-letter-dur: 380ms;
    --eb-group-dur: 420ms;
    --eb-pct-blink-dur: 900ms;
}

/* Ausrichtung: BASELINE, nicht center. Als Flex-Kind wuerde das Label ueber
   seine Boxmitte ausgerichtet, waehrend "Tagen", "bis zu" und "% Rabatt" als
   <em> INNERHALB von .obeb-clock/.obeb-pct an der Grundlinie der grossen Zahl
   haengen - die liegt tiefer. Das Label stand dadurch ~4px ueber den drei
   anderen Kleintexten, als eigene Zeile statt als Teil des Satzes.
   Baseline-Alignment setzt die Gruppe an die Oberkante, deshalb schiebt
   padding-top sie wieder auf die alte Hoehe: (Bandhoehe - Wertbox) / 2 ist
   exakt der Betrag, den align-items: center vorher erzeugt hat - die Zahlen
   bleiben also, wo sie waren, nur die Beschriftungen fluchten.
   Der border-bottom gehoert in die Rechnung: box-sizing ist global
   border-box, die Zentrierung lief also ueber die Content-Hoehe
   (Bandhoehe - 1px). Ohne den Abzug saessen die Zahlen einen halben Pixel
   tiefer als vorher - nachgemessen, nicht geschaetzt. */
.offer-bar-eb {
    position: absolute;
    top: 3px; /* unter dem 3px-Akzentstreifen (::before) */
    left: 0;
    right: 0;
    height: var(--eb-rail-h);
    display: flex;
    align-items: baseline;
    justify-content: flex-end; /* Werte stehen ueber Gesamtpreis + CTA */
    gap: 10px;
    padding: calc((var(--eb-rail-h) - 1px - var(--eb-val-size)) / 2) 22px 0 16px;
    min-width: 0;
    font-family: var(--font-heading);
    border-bottom: 1px solid rgba(255, 215, 0, 0.14);
    /* Query-Container fuer die adaptive Pillen-Typografie (siehe unten).
       Eigene Breite kommt aus left/right, Hoehe aus --eb-rail-h – die
       Containment-Regel aendert daran nichts. */
    container-type: inline-size;
    container-name: ebrail;
    pointer-events: none; /* klaut keine Klicks am oberen Bar-Rand */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    /* Nur Compositor-Properties. Kein will-change: transiente
       transform/opacity-Uebergaenge promotet der Browser selbst. */
    transition: opacity var(--dur-base) var(--ease-out),
        transform var(--dur-base) var(--ease-out),
        visibility 0s linear var(--dur-base);
}

.offer-bar--eb .offer-bar-eb {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity var(--dur-base) var(--ease-out),
        transform var(--dur-base) var(--ease-out),
        visibility 0s;
}

@media (prefers-reduced-motion: reduce) {

    .offer-bar-eb,
    .offer-bar--eb .offer-bar-eb {
        transition: none;
        transform: none;
    }
}

/* Hoehenreserve. Die padding-Shorthands der Bar liegen teils auf
   ID-Spezifitaet, deshalb hier bewusst hoehere Selektoren – so ist die
   Reihenfolge im File egal. */
.offer-bar.offer-bar--eb {
    padding-top: calc(var(--eb-rail-h) + 11px);
}

/* Leerer Warenkorb: die Bar ist dort nur eine schmale Ecken-Pille. Statt sie
   zu verbreitern (ausgeschlossen) stapelt das Band Frist und Rabatt
   untereinander und waechst nach oben. */
.offer-bar.offer-bar--eb.offer-bar--empty {
    --eb-rail-h: 78px;
    padding-top: calc(var(--eb-rail-h) + 8px);
}

.offer-bar--empty .offer-bar-eb {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 0 14px;
}

/* Das Label bleibt auch in der schmalen Pille: "97 Tagen" allein erklaert
   sich niemandem. Gestapelt steht es als eigene Zeile ueber den Werten.
   Der Blitz wandert per ::before in dieselbe Zeile, statt als eigenes
   Flex-Kind eine dritte Zeile zu belegen. */
.offer-bar--empty .obeb-bolt {
    display: none;
}

.offer-bar--empty .obeb-label {
    max-width: 100%;
    text-align: center;
}

.offer-bar--empty .obeb-label::before {
    content: '\26A1';
    margin-right: 5px;
    color: #FFD700;
    letter-spacing: 0;
}

.offer-bar--empty .obeb-pct {
    border-left: none;
    padding-left: 0;
    margin-left: 0;
    /* Faellt die Zeile trotz Stufen einen Hauch zu breit aus (andere
       Font-Metriken), bricht das letzte Element sichtbar um, statt dass
       die zentrierte Zeile beidseitig unsichtbar clippt. */
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 1px;
}

/* In der schmalen Pille zaehlt die fuehrende Einheit. Zwei Zeitsegmente
   plus Rabattwert laufen dort aus der Bar heraus (real gesehen bei
   "07 Stunden 57 Minuten"), und die Bar darf nicht breiter werden. */
.offer-bar--empty .obeb-seg + .obeb-seg {
    display: none;
}

/* Sicherheitsnetz: was trotzdem zu breit wird, wird geschnitten statt die
   Bar zu sprengen. */
.offer-bar--empty .offer-bar-eb {
    overflow: hidden;
}

/* Die Pillenbreite haengt von der Zahl der Hilfe-Icons ab (Partner 3,
   Admin 4) und darf nicht wachsen. Eine feste Schriftgroesse passt deshalb
   nie fuer alle Faelle: gross genug fuer die 200px-Pille laeuft sie in der
   160px-Pille ueber. Die Typografie skaliert darum per Container-Query mit
   der TATSAECHLICHEN Pillenbreite: gross als Standard, kompakter nur dort,
   wo wirklich weniger Platz ist. Das Band selbst ist der Container (absolut
   positioniert, Breite = Barbreite, Hoehe fix per --eb-rail-h). */
.offer-bar--empty .obeb-label {
    font-size: 10px;
    letter-spacing: 0.12em;
}

.offer-bar--empty .obeb-clock,
.offer-bar--empty .obeb-pct {
    font-size: 24px;
    max-width: 100%;
    /* Ohne nowrap brechen die Beschriftungen ("% Rabatt", "bis zu") bei
       Platznot INNERHALB der Zeile um und zerlegen die Pille in Zeilensalat.
       Lieber sauber halten und notfalls per Container-Stufe schrumpfen. */
    white-space: nowrap;
}

.offer-bar--empty .obeb-clock em,
.offer-bar--empty .obeb-pct em {
    font-size: 10px;
    letter-spacing: 0.08em;
}

@container ebrail (max-width: 200px) {
    .offer-bar--empty .obeb-label {
        font-size: 9px;
        /* Eng genug gestellt, dass "EARLY BIRD ENDET IN" in der
           Partner-Pille (3 Icons, ~160px) komplett steht statt zu
           ellipsieren. */
        letter-spacing: 0.04em;
    }

    .offer-bar--empty .obeb-clock,
    .offer-bar--empty .obeb-pct {
        font-size: 20px;
    }

    .offer-bar--empty .obeb-clock em,
    .offer-bar--empty .obeb-pct em {
        font-size: 9px;
        letter-spacing: 0.05em;
    }
}

/* ACHTUNG Masseinheit: Container-Queries messen die CONTENT-Box des Rails,
   dessen 2x14px Eigen-Padding ist also schon abgezogen. Alle Schwellen hier
   sind Content-Breiten, per Lineal-Render vermessen (nicht geschaetzt):
   4-Icon-Pille ~167px, 3-Icon-Pille ~119px Content.
   Die 20px-Zeile "bis zu 20 % Rabatt" misst ~118px, die 17px-Zeile ~100px. */
@container ebrail (max-width: 130px) {

    .offer-bar--empty .obeb-clock,
    .offer-bar--empty .obeb-pct {
        font-size: 17px;
    }

    .offer-bar--empty .obeb-clock em,
    .offer-bar--empty .obeb-pct em {
        font-size: 8px;
        letter-spacing: 0.03em;
    }
}

/* Unter 100px Content (kommt in Produktion nicht vor, Minimum sind 3 Icons)
   passt "bis zu 20 % Rabatt" auch geschrumpft nicht mehr. Das "bis zu"-
   Praefix faellt dann als erstes: "20 % Rabatt" bleibt lesbar, statt dass
   die Zeile clippt. */
@container ebrail (max-width: 100px) {
    .offer-bar--empty .obeb-pct em:first-child {
        display: none;
    }
}

/* Typografie: Hero-Grammatik in klein. */
.obeb-bolt {
    color: #FFD700;
    font-size: 12px;
    line-height: 1;
    flex-shrink: 0;
}

/* Kein margin-right: auto. Das schob das Label an die linke Barkante und
   liess bei breiter Bar ~430px Nichts zwischen Beschriftung und Zahl stehen -
   die Zeile las sich als zwei Fremdkoerper statt als ein Satz. Label und
   Werte laufen als EIN Block ans rechte Ende, dorthin wo die Zahlen schon
   immer standen (ueber Gesamtpreis + CTA). */
.obeb-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #9a8e7a;
}

.obeb-clock,
.obeb-pct {
    display: inline-flex;
    align-items: baseline;
    flex-shrink: 0;
    /* Deutlich groesser als die uebrigen Bar-Texte: die Frist ist hier der
       Grund, warum das Band ueberhaupt existiert. Die Groesse steht als
       Variable, weil der Baseline-Ausgleich des Bandes mit ihr rechnet. */
    font-size: var(--eb-val-size);
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.obeb-clock {
    color: #f0e6d2;
}

.obeb-pct {
    color: #FFD700;
    gap: 0.28em;
    margin-left: 2px;
    padding-left: 10px;
    border-left: 1px solid rgba(255, 215, 0, 0.3);
}

.obeb-pct[hidden] {
    display: none;
}

.obeb-seg {
    display: inline-flex;
    align-items: baseline;
    gap: 0.28em;
}

.obeb-seg + .obeb-seg {
    border-left: 1px solid rgba(255, 215, 0, 0.3);
    margin-left: 0.45em;
    padding-left: 0.45em;
}

.obeb-clock b,
.obeb-pct b {
    font-weight: 600;
    letter-spacing: -0.02em;
}

.obeb-seg + .obeb-seg b {
    display: inline-block;
    min-width: 1.3em;
    text-align: right;
}

.obeb-clock em,
.obeb-pct em {
    font-style: normal;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #9a8e7a;
}

.obeb-pct em {
    color: color-mix(in srgb, #FFD700 62%, transparent);
}

/* Endstufe: Akzent auf der fuehrenden Einheit, exakt wie im Hero. */
.offer-bar-eb.is-final .obeb-bolt,
.offer-bar-eb.is-final .obeb-label,
.offer-bar-eb.is-final .obeb-seg:first-child b {
    color: #FF6B35;
}

/* Edit-Mode: auf der Oberkante liegen bereits gruener Streifen und das
   schwebende "Editor Mode"-Label. Ein drittes Signal dort waere Laerm, und
   ein Admin im Editor ist nicht das Publikum einer Verknappung. */
body.edit-mode .offer-bar-eb {
    display: none;
}

body.edit-mode .offer-bar.offer-bar--eb {
    padding-top: 11px;
}

body.edit-mode .offer-bar.offer-bar--eb.offer-bar--empty {
    padding-top: 8px;
}

/* Der tickende Readout ist aria-hidden, die Frist steht einmal statisch
   daneben. Eine Live-Region im Sekundentakt waere fuer Screenreader
   unbenutzbar. */
.bw-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ─── Bewegung der Frist ──────────────────────────────────────────
   Zwei Anlaesse, mehr nicht: der Auftritt und der echte Zahlenwechsel.
   Kein Dauerloop – das Band haengt fix am unteren Bildrand und liegt damit
   im Scroll-Hot-Path (siehe CLAUDE.md, Rendering-Performance). Alles laeuft
   ueber transform/opacity, kein will-change, keine Layout-Properties. */

/* 1. Ziffernwechsel. Die abgeloeste Zahl faehrt nach oben aus, die neue
      rueckt von unten nach. Beide Huellen setzt _bwRollNum in admin.js nur
      dann, wenn wirklich weitergezaehlt wurde, und raeumt sie danach ab. */
@keyframes bwNumRollIn {
    from {
        transform: translateY(var(--bw-roll-shift, 0.42em));
        opacity: 0;
    }

    to {
        transform: none;
        opacity: 1;
    }
}

@keyframes bwNumRollOut {
    from {
        transform: none;
        opacity: 1;
    }

    to {
        transform: translateY(calc(var(--bw-roll-shift, 0.42em) * -1));
        opacity: 0;
    }
}

/* Bezugsrahmen fuer die ausfahrende Kopie. Kostet nichts, solange keine
   Rolle laeuft – die Zelle traegt dann nur blanken Text. */
.bw-dl-seg b,
.obeb-seg b {
    position: relative;
}

.bw-roll-in {
    display: inline-block;
    animation: bwNumRollIn 220ms var(--ease-out) both;
}

/* Deckt die Zelle vollflaechig ab und erbt dadurch deren Ausrichtung –
   die nullgepolsterten Folgesegmente stehen rechtsbuendig. */
.bw-roll-ghost {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    animation: bwNumRollOut 220ms var(--ease-out) both;
}

/* Endstufe: dort tickt der Minutenwert, und die Bewegung IST die Nachricht.
   Also etwas weiter und laenger – die Groesse bleibt wie immer unangetastet. */
.bw-deadline.is-final .bw-roll-in,
.bw-deadline.is-final .bw-roll-ghost,
.offer-bar-eb.is-final .bw-roll-in,
.offer-bar-eb.is-final .bw-roll-ghost {
    --bw-roll-shift: 0.6em;
    animation-duration: 300ms;
}

/* 1b. Der Auftritt der Zahl: ein Dreischlag, gesetzt von _bwIntroPulse
       (admin.js) genau einmal pro Seitenaufruf. Die fuehrende Zahl schlaegt
       dreimal abklingend aus (30 %, 20 %, 10 %) und leuchtet dabei jeweils
       schwaecher auf. Der abnehmende Weg ist die eigentliche Arbeit: drei
       gleich grosse Schlaege waeren ein Zappeln, drei abklingende lesen
       sich als ein Vorgang, der zur Ruhe kommt.

       Vier Vorfassungen, damit sie nicht zurueckkommen: HOCHZAEHLEN
       behauptet fuer eine Sekunde das Gegenteil dessen, was die Frist sagt.
       BLINKEN laesst die Zahl fehlen und liest sich als Stoerung. Ein
       einzelner 5-Prozent-Impuls und danach auch der Doppelschlag waren zu
       leise. Diese Stufe ist bewusst laut gewaehlt.

       Helligkeit ueber brightness und einen Schein aus currentColor, nicht
       ueber eine gesetzte Farbe: in der Endstufe unter 48 Std ist die Zahl
       orange (.is-final), ein fester Wert wuerde die Eskalation fuer die
       Dauer ueberschreiben. Gold waere hier ohnehin falsch, im Kit ist es
       Eskalationssignal und keine Dekoration. */
@keyframes bwNumPulse {
    0% {
        transform: scale(1);
        filter: none;
        text-shadow: none;
    }

    14% {
        transform: scale(1.3);
        filter: brightness(1.8);
        text-shadow: 0 0 26px color-mix(in srgb, currentColor 70%, transparent),
            0 0 64px color-mix(in srgb, currentColor 32%, transparent);
    }

    30% {
        transform: scale(0.98);
        filter: none;
        text-shadow: none;
    }

    44% {
        transform: scale(1.2);
        filter: brightness(1.55);
        text-shadow: 0 0 20px color-mix(in srgb, currentColor 55%, transparent);
    }

    60% {
        transform: scale(0.99);
        filter: none;
        text-shadow: none;
    }

    74% {
        transform: scale(1.1);
        filter: brightness(1.3);
        text-shadow: 0 0 16px color-mix(in srgb, currentColor 40%, transparent);
    }

    100% {
        transform: scale(1);
        filter: none;
        text-shadow: none;
    }
}

/* Kein display-Wechsel noetig, obwohl transform auf nicht-ersetzten
   Inline-Elementen nicht greift: die Zelle ist Flex-Item von .bw-dl-seg
   bzw. .obeb-seg und dadurch bereits blockifiziert (computed display:
   block, nachgemessen). Ein zusaetzliches inline-block waere wirkungslos. */
.bw-num-pulse {
    transform-origin: 50% 62%;
    animation: bwNumPulse 1150ms var(--ease-out) both;
}

/* 2. Auftritt, gestaffelt: erst die Ansage, dann die Frist, dann der Wert.
      Im Hero traegt das hidden-Attribut den Trigger (display:none -> sichtbar
      startet die Animation von selbst, kein JS-Hook noetig). */
@keyframes bwDlEnter {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.bw-deadline:not([hidden]) .bw-dl-eyebrow {
    animation: bwDlEnter var(--dur-base) var(--ease-out) both;
}

.bw-deadline:not([hidden]) .bw-dl-clock {
    animation: bwDlEnter var(--dur-base) var(--ease-out) 70ms both;
}

.bw-deadline:not([hidden]) .bw-dl-pct {
    animation: bwDlEnter var(--dur-base) var(--ease-out) 130ms both;
}

/* In der Bar gibt es kein display-Toggle, sondern die Klasse .offer-bar--eb.
   Die Kinder haengen sich deshalb per Transition mit Versatz an denselben
   Zustandswechsel. Delays nur im sichtbaren Zustand: beim Ausblenden soll
   die Zeile in einem Stueck gehen, nicht nachtroepfeln. */
.offer-bar-eb .obeb-bolt,
.offer-bar-eb .obeb-label,
.offer-bar-eb .obeb-clock,
.offer-bar-eb .obeb-pct {
    opacity: 0;
    transform: translateY(3px);
    transition: opacity var(--dur-base) var(--ease-out),
        transform var(--dur-base) var(--ease-out);
}

.offer-bar--eb .offer-bar-eb .obeb-bolt,
.offer-bar--eb .offer-bar-eb .obeb-label,
.offer-bar--eb .offer-bar-eb .obeb-clock,
.offer-bar--eb .offer-bar-eb .obeb-pct {
    opacity: 1;
    transform: none;
}

.offer-bar--eb .offer-bar-eb .obeb-clock {
    transition-delay: 70ms;
}

.offer-bar--eb .offer-bar-eb .obeb-pct {
    transition-delay: 130ms;
}

/* 3. Erstauftritt der breiten Bar (_bwEbWideIntro, admin.js), einmalig:
      das Label tippt sich buchstabenweise auf, dann schlaegt die Zahl als
      Block auf, zuletzt leuchtet der Rabatt nach. Dreiakter statt
      Stufenzahn - die Klasse .eb-wide-intro traegt der Rail nur fuer die
      Dauer des Auftritts, danach raeumt admin.js sie per Timeout wieder ab.
      Reine Compositor-Properties (opacity/transform/filter), kein
      Layout-Read im Scroll-Hot-Path. */
.eb-wide-intro .obeb-label .eb-letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(6px);
    filter: blur(3px);
    animation: ebLetterIn var(--eb-letter-dur) var(--ease-out) both;
    /* --i kommt von admin.js pro Buchstabe, calc() macht daraus den Takt. */
    animation-delay: calc(var(--i) * var(--eb-letter-stagger));
}

@keyframes ebLetterIn {
    to {
        opacity: 1;
        transform: none;
        filter: none;
    }
}

/* fill:both haelt die Zahl/den Rabatt waehrend der animation-delay-Wartezeit
   unsichtbar (0%-Keyframe), obwohl die Dock-Transition weiter oben sie
   sofort auf opacity:1 setzen wuerde - die Animation gewinnt fuer ihre
   ganze Laufzeit inklusive Delay. Genau dieser Vorhalt erzeugt den
   gestaffelten Auftritt: erst tippt das Label fertig, dann erst kommt die
   Zahl ins Bild. */
.eb-wide-intro .obeb-clock {
    animation: ebGroupIn var(--eb-group-dur) var(--ease-out) both;
    animation-delay: var(--eb-clock-delay, 500ms);
}

@keyframes ebGroupIn {
    0% {
        opacity: 0;
        transform: scale(0.88);
    }

    65% {
        opacity: 1;
        transform: scale(1.04);
        filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5));
    }

    100% {
        opacity: 1;
        transform: scale(1);
        filter: none;
    }
}

/* Rabatt-Segment: kommt wie die Zahl per Pop ins Bild, blinkt danach aber
   ZWEIMAL statt einmal nachzuleuchten - der Rabatt ist der eigentliche
   Kaufanreiz der Zeile und bekommt deshalb die auffaelligste Geste der
   drei. Volle Opazitaet zwischen den Blinks (nicht auf 0 abfallend, das
   laese sich als Fehler statt als Hinweis, siehe die Ablehnung von
   BLINKEN weiter oben bei bwNumPulse) - hier dagegen ist ein echtes
   Blinken die ausdrueckliche Absicht, nicht die abgelehnte Alternative
   fuer die tickende Zahl. */
.eb-wide-intro .obeb-pct {
    animation: ebPctBlink var(--eb-pct-blink-dur) var(--ease-out) both;
    animation-delay: var(--eb-pct-delay, 900ms);
}

@keyframes ebPctBlink {
    0% {
        opacity: 0;
        transform: scale(0.88);
    }

    18% {
        opacity: 1;
        transform: scale(1.05);
        filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5));
    }

    32% {
        opacity: 1;
        transform: scale(1);
        filter: none;
    }

    44% {
        opacity: 0.25;
        transform: scale(1);
        filter: none;
    }

    56% {
        opacity: 1;
        filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5));
    }

    68% {
        opacity: 0.25;
        filter: none;
    }

    80% {
        opacity: 1;
        filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5));
    }

    100% {
        opacity: 1;
        transform: scale(1);
        filter: none;
    }
}

@media (prefers-reduced-motion: reduce) {

    /* .bw-num-pulse setzt _bwIntroPulse hier gar nicht erst. Die Regel
       faengt den Fall ab, dass die Einstellung waehrend der Bewegung
       umgestellt wird: die Zahl darf dann nicht vergroessert stehenbleiben
       (ohne Animation kein animationend, das aufraeumt). */
    .bw-num-pulse,
    .bw-roll-in,
    .bw-deadline:not([hidden]) .bw-dl-eyebrow,
    .bw-deadline:not([hidden]) .bw-dl-clock,
    .bw-deadline:not([hidden]) .bw-dl-pct {
        animation: none;
    }

    /* _bwRollNum legt hier gar keine Huellen erst an. Sollte doch eine
       stehen (Einstellung waehrend einer laufenden Bewegung umgestellt),
       darf die Kopie nicht ohne Animation ueber der Zahl kleben bleiben:
       ohne Animation gibt es auch kein animationend, das sie abraeumt. */
    .bw-roll-ghost {
        display: none;
    }

    .offer-bar-eb .obeb-bolt,
    .offer-bar-eb .obeb-label,
    .offer-bar-eb .obeb-clock,
    .offer-bar-eb .obeb-pct {
        opacity: 1;
        transform: none;
        transition: none;
    }

    /* Zusaetzliches Sicherheitsnetz: admin.js prueft prefers-reduced-motion
       bereits VOR dem Buchstaben-Split und laesst ihn dann ausfallen -
       diese Regel faengt nur den Fall ab, dass die Einstellung waehrend
       eines laufenden Auftritts umgestellt wird. */
    .eb-wide-intro .eb-letter,
    .eb-wide-intro .obeb-clock,
    .eb-wide-intro .obeb-pct {
        animation: none;
        opacity: 1;
        transform: none;
        filter: none;
    }
}

/* Animated gold border glow on hero */
/* Der Basis-Hero ist seit Welle 1 kartenlos (border/radius/shadow = 0). Das
   Kampagnen-Profil behaelt bewusst seine Gold-Box, braucht den Radius seither
   aber explizit, sonst laufen die Ecken spitz zu. */
[data-profile="black-week"] .hero {
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: var(--radius-xl);
    animation: bwBorderPulse 3s ease-in-out infinite;
}

@keyframes bwBorderPulse {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.05), inset 0 0 20px rgba(255, 215, 0, 0.02);
    }

    50% {
        box-shadow: 0 0 40px rgba(255, 215, 0, 0.1), inset 0 0 30px rgba(255, 215, 0, 0.04);
    }
}

/* Enhanced gold gradient for h1 .outline */
[data-profile="black-week"] .hero-content h1 {
    white-space: nowrap;
    font-size: clamp(1.5rem, 2.8vw, 2.8rem);
}

[data-profile="black-week"] .hero-content h1 .outline {
    background: linear-gradient(135deg, #FFD700 0%, #FFC107 25%, #FFD700 50%, #FFA000 75%, #FFD700 100%);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: bwGoldShimmer 4s ease-in-out infinite;
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.3));
}

/* Hero slogan highlight in gold */
[data-profile="black-week"] .hero-slogan .highlight {
    color: #FFD700;
    background: none;
    -webkit-text-fill-color: #FFD700;
}

/* Gold glow on KPI values */
[data-profile="black-week"] .kpi-val {
    text-shadow: 0 0 12px rgba(255, 215, 0, 0.3);
}

[data-profile="black-week"] .kpi-divider {
    background: rgba(255, 215, 0, 0.15);
}

/* Animated gold border on portals */
[data-profile="black-week"] .portal {
    border: 1px solid rgba(255, 215, 0, 0.1);
    position: relative;
}

[data-profile="black-week"] .portal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #FFD700, transparent);
    opacity: 0.5;
}

/* Gold shimmer sweep on tier buttons on hover */
[data-profile="black-week"] .tier-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.06), transparent);
    transition: left var(--dur-slow) ease;
}

[data-profile="black-week"] .tier-btn {
    position: relative;
    overflow: hidden;
}

[data-profile="black-week"] .tier-btn:hover::before {
    left: 100%;
}

/* Trust bar logos – brighten on dark bg */
[data-profile="black-week"] .trust-logos img {
    filter: brightness(0) invert(0.85);
}

/* Portal logo banner – slightly brighten */
[data-profile="black-week"] .portal-logo-banner {
    border-color: rgba(255, 215, 0, 0.1);
}

/* Das Partikel-Rieseln im Hero (.bw-sparkles/.bw-sparkle + bwSparkleFloat)
   ist am 2026-08-02 entfallen, Erzeuger und Regeln zusammen – siehe
   _applyBlackWeekBranding in admin.js. */

/* Subtle gold vignette on body */
[data-profile="black-week"] body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center top, rgba(255, 215, 0, 0.03) 0%, transparent 60%);
    pointer-events: none;
    z-index: 9998;
}

/* Browser mockup in gold theme */
[data-profile="black-week"] .browser-mockup {
    border-color: rgba(255, 215, 0, 0.15);
}

/* Package description */
[data-profile="black-week"] .package-description {
    color: var(--text-muted);
    background: rgba(255, 215, 0, 0.03);
    border-color: rgba(255, 215, 0, 0.08);
}

/* ─── Newsbar (News-Ticker) ───
   Label-Pill, Puls-Punkt, Item-Icons und Link-Hover der Newsbar faerben sich
   alle ueber --tm-accent, also im MonsterDealz-Magenta - die einzige Magenta-
   Flaeche im Gold/Schwarz-Kit. Statt jede Deklaration zu doppeln wird die
   Variable nur innerhalb des Mounts umgezogen; so kommen auch die Edit-Mode-
   Bedienelemente (X, Add-Button, Icon-Picker) automatisch mit. */
[data-profile="black-week"] .news-ticker-mount {
    --tm-accent: #FFD700;
    --tm-accent-light: #FFA500;
}

[data-profile="black-week"] .news-ticker {
    background: var(--panel-bg);
    /* Fester Wert statt color-mix: --border-light ist im Profil schon ein
       6%-Gold, der Mix daraus faellt auf #111 praktisch unsichtbar aus. */
    border-color: rgba(255, 215, 0, 0.14);
}

/* Urgency bleibt als eigenes Signal erkennbar, wandert aber aus dem Rot in
   die warme Gold-Familie, damit sie im Kit nicht als Fremdfarbe steht. */
[data-profile="black-week"] .news-ticker-item--urgent i {
    color: #FF6B35;
}

/* Early-Bird-Hinweis: --accent ist die Brandfarbe, mehrere davon (z.B.
   Reebate #1565C0) stehen auf dem schwarzen Kit-Grund praktisch unlesbar.
   Deshalb hier auf Gold, wie der Rest des Kits. */
[data-profile="black-week"] .early-bird-note {
    background: rgba(255, 215, 0, 0.1);
    border-color: rgba(255, 215, 0, 0.32);
    color: #FFD700;
}

/* ─── Block editing outside edit-mode ─── */
body:not(.edit-mode) [data-ek],
body:not(.edit-mode) .demo-meta span,
body:not(.edit-mode) .demo-badge,
body:not(.edit-mode) .kpi-tip,
body:not(.edit-mode) .tier-price,
body:not(.edit-mode) .tier-name,
body:not(.edit-mode) .package-description {
    -webkit-user-modify: read-only !important;
    user-modify: read-only !important;
}

/* ─── FAQ BUTTON (Inside Pill) ─── */
.faq-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-decoration: none;
    color: var(--text-muted);
    font-size: var(--t-2xs);
    font-weight: 600;
    transition: color var(--dur-fast), transform var(--dur-fast);
    margin-right: 8px;
    opacity: 0.7;
}

.faq-btn:hover {
    color: var(--text);
    opacity: 1;
}

.faq-btn i {
    font-size: var(--t-base);
}

/* ─── THEME TOGGLE ─── */
.theme-toggle {
    background: var(--surface);
    border: 1px solid var(--border);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text);
    transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) linear, border-color var(--dur-fast) linear, color var(--dur-fast) linear;
    margin-right: 12px;
}

.theme-toggle:hover {
    background: var(--surface-hover);
    transform: scale(1.05);
}

.theme-toggle i {
    font-size: var(--t-md);
}

/* Dunkel-Kit (z.B. black-week): Das Kit bringt einen eigenen Schwarz-Gold-Farbsatz
   mit und gilt nur dunkel - im Light-Theme verlieren seine Regeln gegen die
   [data-theme="light"]-Direktfarben bei gleicher Spezifitaet. Der Umschalter waere
   dort ein Schalter, der die Seite unlesbar macht, also ist er weg. Die Klasse
   setzt _tmxApplyThemeLock (index.html); display:none nimmt den Button
   gleichzeitig aus dem Tab-Fokus. */
html.theme-locked .theme-toggle {
    display: none;
}

/* ─── RESET ─── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    /* 90px = Nav + Luft. --kit-switch-h kommt dazu, sobald der
       Kampagnen-Wegweiser unter der Nav klebt (kit-switch.js misst). */
    --kit-switch-h: 0px;
    scroll-padding-top: calc(90px + var(--kit-switch-h));
}

/* ═══════════════════════════════════════════════════════════════
   Custom Premium Scrollbars (for Windows/Linux)
   ═══════════════════════════════════════════════════════════════ */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--accent, #e8911a) 32%, transparent);
    border-radius: 999px;
    border: 0;
    transition: background var(--dur-fast) ease;
}

::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--accent, #e8911a) 60%, transparent);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb,
.dark ::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--accent, #e8911a) 40%, transparent);
    border: 0;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover,
.dark ::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--accent, #e8911a) 70%, transparent);
}

/* Firefox (no thin+color custom thumb, but honor palette) */
* {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--accent, #e8911a) 35%, transparent) transparent;
}

/* ═══════════════════════════════════════════════════════════════
   Global Premium Focus Rings 
   ═══════════════════════════════════════════════════════════════ */
*:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand, #e8911a) 30%, transparent) !important;
}

/* Windows High-Contrast / forced-colors: box-shadow rings are dropped there,
   so restore a real outline as a robust fallback. */
@media (forced-colors: active) {
    *:focus-visible {
        outline: 2px solid Highlight !important;
        outline-offset: 2px;
    }
}

/* A11y: Kachel-Fokusring im Brand-Accent des jeweiligen Portals (statt des
   globalen --brand-Rings), damit die per Tastatur fokussierte Platzierung
   klar hervortritt. z-index hebt den Ring ueber Nachbarkacheln. */
.tile:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #e8911a) 55%, transparent) !important;
    position: relative;
    z-index: 3;
}

/* A11y: Skip-to-Content-Link. Visuell versteckt, bis er per Tastatur
   fokussiert wird (dann faehrt er sichtbar oben links ein). */
.skip-link {
    position: fixed;
    top: -80px;
    left: 12px;
    z-index: 100001;
    padding: 10px 18px;
    background: var(--tm-accent, #DA1884);
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 8px;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    transition: top 0.2s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
    top: 12px;
    outline: 2px solid #fff !important;
    outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   Tactile Active States (Physical Interaction Feedback)
   ═══════════════════════════════════════════════════════════════ */
.tier-btn:not(:disabled):active,
.auth-gate-btn:not(:disabled):active,
.pill-input:not(:disabled):active,
.mc-action-btn:not(:disabled):active,
.udb-add-btn:not(:disabled):active,
.checkout-btn:not(:disabled):active,
.offer-bar-btn:not(:disabled):active,
.stats-range-btn:not(:disabled):active,
.social-admin-btn:not(:disabled):active {
    transform: scale(0.96) !important;
    transition: transform var(--dur-fast) var(--ease-out) !important;
}

body {
    background: var(--bg);
    font-family: var(--font-body);
    color: var(--text);
    line-height: 1.6;
    letter-spacing: -0.005em;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    padding-top: calc(90px + var(--kit-switch-h, 0px));
    /* Gegenstueck zum padding-top: unten steht die Offer-Bar ebenso fix im
       Viewport und lag ohne Reserve ueber dem Footer-Abbinder (Anschrift,
       Impressum, Datenschutz). Den Wert misst offer-bar.js an der Bar selbst
       und legt ihn als --offer-bar-h ab, weil die Bar-Hoehe mit Kampagnen-
       Streifen, Markenzahl und Mobil-Layout schwankt. Vor dem ersten Lauf
       (und ohne Warenkorb) sind es 0px, es verschiebt sich also nichts.
       Im Druck raeumt body{padding:0 !important} die Reserve wieder ab. */
    padding-bottom: var(--offer-bar-h, 0px);
    scrollbar-gutter: stable;
    /* Nav height (70px) + 20px breathing room */
}

/* Wrapper to prevent horizontal scroll without breaking snapping.
   html braucht clip ebenfalls: body allein propagiert auf Chromium-
   Mobile nicht zuverlaessig zum Viewport (nur clip, nicht hidden,
   sonst brechen scroll-snap/sticky). */
html,
body {
    overflow-x: clip;
}

/* Premium Polish #7 – Typo-Finish: tighter heading tracking for editorial feel */
h1, h2, h3, h4, h5, h6,
.portal-title, .hero-content h1, .section-heading,
.faq-title, .testimonials-title, .conv-title {
    letter-spacing: -0.02em;
}

/* ─── HERO ─── */
/* ─── HERO (White Premium Card) ─── */
/* ─── HERO (White Premium Card - Compact Flex) ─── */
/* Der Hero ist die einzige Stelle, an der die Marke unwidersprochen spricht.
   Er war eine Karte unter Karten (Rahmen, Schatten, 8px Bodenabstand) und
   damit ein Widget neben Widgets. Jetzt: keine Karte, die Aussage steht frei
   auf der Seite und bekommt Luft. Seitliches Padding bleibt bei 24px, damit
   die -14px-Kompensation der .hero-brand-row (Logo flush) weiter aufgeht. */
.hero {
    margin: 0 auto;
    max-width: calc(1200px - 2 * var(--page-pad));
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    border: none;
    /* Kompakt gehalten: Luft ja, Leerlauf nein. Unter dem Hero folgen noch
       20px Ticker-Margin + 32px .portals-Padding, der Abstand nach unten
       darf hier also klein bleiben. Kein grosszuegiges vh-Wachstum, sonst
       gaehnt der Hero auf hohen Bildschirmen. */
    padding: clamp(20px, 3vh, 40px) 24px clamp(14px, 2vh, 26px) 24px;
    position: relative;
    overflow: visible;
    color: var(--text);
    scroll-margin-top: calc(90px + var(--kit-switch-h, 0px));
}

.hero-desktop-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}

.hero-left-col {
    flex: 1;
    text-align: left;
    /* Cap aufgelöst – Text-Stack soll volle Restbreite nutzen, damit
       Slogan + Sub natürlicher umbrechen statt vorzeitig zu wrappen. */
    max-width: none;
    min-width: 0;
}

.hero-right-col {
    flex: 0 0 auto;
}

/* Remove gradient blobs for cleaner look */
.hero::before,
.hero::after {
    display: none;
}

.hero-inner {
    max-width: none;
    margin: 0;
    position: relative;
    z-index: 1;
}

.hero-top {
    display: none;
}

.hero-content {
    margin-bottom: 0;
    text-align: left;
}

/* Groesse traegt die Hierarchie, nicht Fettung: 600 statt 700, dafuer deutlich
   groesser und mit negativem Tracking (in em, damit es ueber die clamp-Spanne
   mitskaliert - das alte -1.2px war bei 43px richtig und bei 64px zu wenig). */
.hero-content h1 {
    font-size: clamp(2.4rem, 5vw, 4rem);
    font-weight: 600;
    line-height: 1.05;
    margin-bottom: 8px;
    color: var(--text);
    letter-spacing: -0.03em;
}

/* Der Gradient hier lief von Magenta nach Magenta, war also optisch identisch
   zu einer schlichten Farbe, kostete aber eine Textur-Ebene und brach das
   Subpixel-Antialiasing (Text wirkt dadurch leicht unscharf). */
.hero-content h1 .outline {
    color: var(--tm-accent);
    font-weight: 600;
}

/* Steht jetzt allein ueber der Headline, darf also wieder ruhig sein. */
.hero-logo {
    height: clamp(48px, 4vw, 60px);
    width: auto;
    object-fit: contain;
    margin-right: 14px;
}

.hero-logo--dark {
    display: none;
}

[data-theme="dark"] .hero-logo--light {
    display: none;
}

[data-theme="dark"] .hero-logo--dark {
    display: block;
}

/* Logo ueber der Aussage statt daneben. Nebeneinander nahm die breite
   Wortmarke der Headline so viel Spalte weg, dass der Slogan mitten in der
   Phrase umbrach ("Persoenlich / begleitet."). Gestapelt bekommt der Text die
   volle Breite und die Reihenfolge stimmt: Absender, dann Aussage. */
.hero-brand-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 0;
    /* Logo flush-links: 10px Abstand zur Seitenkante. Hero padding-left
       ist 24px → margin-left: -14px ergibt 10px Restabstand. */
    margin-left: -14px;
}

/* Logo links, Text-Stack (H1 + Sub + Slogan) rechts gestapelt.
   Logo zentriert sich vertikal gegen den Stack. */
.hero-text-stack {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.hero-text-stack .hero-sub {
    margin: 0;
}

/* Slogan im Stack: text-wrap: pretty bricht an natürlicheren Stellen
   (Satz-Grenzen statt Wort-Stümpfen). */
.hero-text-stack .hero-slogan {
    text-wrap: pretty;
}

/* Eyebrow über der H1 – kleine uppercase Marke statt H1-Treatment.
   "MEDIA-KIT 2026" als SEO/Page-Anchor, H1 trägt jetzt die Verkaufs-
   Headline ("Empfehlung statt Werbung."). */
.hero-eyebrow {
    font-family: var(--font-heading);
    font-size: var(--t-xs);
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    line-height: 1.2;
}

.hero-eyebrow .outline {
    color: var(--tm-accent);
    -webkit-text-fill-color: var(--tm-accent);
}

.hero-greeting {
    font-family: var(--font-heading);
    font-size: var(--t-base);
    font-weight: 500;
    color: var(--tm-accent);
    margin-bottom: 6px;
    letter-spacing: -0.005em;
    animation: heroGreetingFadeIn 0.6s var(--ease-out);
}
@keyframes heroGreetingFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.hero-sub {
    font-size: var(--t-base);
    color: var(--text-muted);
    font-weight: 500;
    margin-bottom: 0;
}

.hero-intro-text {
    font-size: var(--t-base);
    line-height: 1.6;
    color: var(--text-muted);
    margin-top: 16px;
    max-width: 580px;
}

/* ─── HERO KPIs ─── */
.hero-kpis {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding-left: 28px;
    border-left: 1px solid rgba(0, 0, 0, 0.06);
    border-top: none;
    margin-top: 0;
    padding-top: 0;
}

.kpi {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Diese drei Zahlen sind die Kaufbegruendung. Zahl gross, Label leise.

   Am 2026-08-02 zunaechst um rund 45 % angehoben, um die Flaeche neben der
   hoeheren Textspalte zu fuellen, dann noch am selben Tag um 20 % zurück-
   genommen (zu dominant gegenueber Headline + Slogan). Die KPI-Spalte ist
   dadurch wieder kuerzer als die linke Spalte, Restluft unter den KPIs ist
   seitdem gewollt, kein Restluft-Bug wie in der vorigen Fassung. */
.kpi-val {
    font-size: clamp(1.84rem, 2.32vw, 2.56rem);
    font-weight: 600;
    color: var(--text);
    line-height: 1.05;
    margin-bottom: 2px;
    letter-spacing: -0.02em;
}

.kpi-label {
    font-size: 0.78rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-muted);
    font-weight: 500;
}

.kpi-divider {
    display: none;
}

/* Der Slogan IST die Positionierung ("Redaktionell platziert. Authentisch
   geteilt. Persoenlich begleitet."). Er stand auf 1rem, also exakt so gross
   wie der Fliesstext daneben - drei Zeilen ohne Hierarchie. Jetzt hoerbar
   groesser, dafuer nicht mehr fett: Gewicht schreit, Groesse spricht. */
.hero-left-col .hero-slogan {
    text-align: left;
    margin: 10px 0 0 0;
    max-width: none;
    font-size: clamp(1.15rem, 1.5vw, 1.35rem);
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1.45;
}

@media (max-width: 900px) {
    .hero {
        padding: 24px 16px 12px 16px;
    }

    .hero-desktop-flex {
        flex-direction: column;
        text-align: center;
        gap: 32px;
    }

    .hero-left-col,
    .hero-content,
    .hero-left-col .hero-slogan,
    .hero-intro-text {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-kpis {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        border-left: none;
        padding-left: 0;
        border-top: 1px solid rgba(0, 0, 0, 0.06);
        padding-top: 24px;
        width: 100%;
        gap: 24px;
    }

    .kpi {
        align-items: center;
        width: 45%;
    }
}

/* ─── PORTALS ─── */
.portals {
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px var(--page-pad) 4px;
    display: flex;
    flex-direction: column;
    /* Der Abstand liegt in einer Variable, weil Testimonials und FAQ ihn per
       negativer Margin gegenrechnen. Wer hier den Wert aendert, muss die
       Variable mitaendern, sonst ueberlappen die Sektionen. */
    --portals-gap: clamp(32px, 6vw, 72px);
    gap: var(--portals-gap);
}

.portal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px;
    position: relative;
    overflow: visible;
    transition: border-color var(--dur-base), box-shadow var(--dur-base), filter var(--dur-slow) ease, opacity var(--dur-slow) ease;
    scroll-margin-top: calc(90px + var(--kit-switch-h, 0px));
}

/* .portal.scrolled-past (blur + opacity auf gelesene Portale) ist entfernt,
   der zugehoerige blurObserver in admin.js ebenfalls. Ein Filter ueber eine
   bildschirmgrosse Flaeche bei jedem Scroll, auf dem Main-Thread, auf dem
   Lenis scrollt. Und ein Media-Kit sollte den eigenen Content nicht
   unscharf machen, um Tiefe zu behaupten. */

.portal:hover {
    border-color: var(--accent);
    box-shadow: 0 4px 24px color-mix(in srgb, var(--accent) 12%, transparent);
}



/* Body layout */
.portal-body {
    display: grid;
    grid-template-columns: 420px minmax(0, 1fr);
    gap: 0;
}

/* Info side */
.portal-info {
    padding: 0;
    border-left: 4px solid var(--accent);
    /* Replaces .portal-accent */
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background: var(--logo-bg, var(--surface));
    color: var(--logo-text, var(--text));
    border-radius: var(--radius) 0 0 var(--radius);
    overflow: visible;
    position: relative;
    z-index: 2;
}

/* Content side (ensure tooltips drop over info sidebar) */
.portal-content {
    position: relative;
    z-index: 3;
}

/* Logo banner area */
/* Banner ist zur Brand-Website verlinkt (Task 6). Link ist ein reiner
   Block-Wrapper, damit das Banner-Layout unveraendert bleibt. */
.portal-logo-link {
    display: block;
    line-height: 0;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    border-top-left-radius: calc(var(--radius) - 4px);
    overflow: hidden;
    transition: filter var(--dur-base) ease, opacity var(--dur-base) ease;
}

.portal-logo-link:hover {
    filter: brightness(1.04);
    opacity: 0.95;
}

.portal-logo-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.portal-logo-banner {
    width: 100%;
    display: block;
    object-fit: cover;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0;
    border-top-left-radius: calc(var(--radius) - 4px);
}

/* Bei China-Gadgets + Reebate ist .portal-logo-banner ein Flex-Container mit
   dem Logo darin (nicht das Bild selbst). Ohne max-width rechnet der Browser
   die Breite aus max-height + Seitenverhaeltnis, das Logo wird breiter als die
   Spalte und overflow:hidden schneidet es ab (CG-SVG ist 3,7:1). */
.portal-logo-banner img {
    max-width: 100%;
}

.portal-info-content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: visible;
    /* Never clip child mockup hover effects */
}

.portal-logo {
    max-height: 48px;
    width: auto;
    object-fit: contain;
    /* Ensure logo fits */
    margin-bottom: 4px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    align-self: flex-start;
}

.portal-info h2 {
    font-family: var(--font-heading);
    font-size: var(--t-xl);
    font-weight: 700;
    color: var(--accent);
    /* Brand color title */
    margin-bottom: 4px;
    line-height: 1.15;
}

.portal-tagline {
    color: var(--logo-text, var(--text-muted));
    opacity: 0.8;
    font-size: var(--t-sm);
    margin-bottom: 8px;
    line-height: 1.4;
}

/* Stats Cards Grid */
.stats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Standard Stats (Views, Installs, Newsletter - first 3 items) */
.stats li {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
    border-radius: var(--radius-md);
    padding: 12px;
    display: flex;
    flex-direction: column;
    /* Stack vertical by default */
    justify-content: center;
    gap: 4px;
    font-size: var(--t-sm);
    color: var(--logo-text, var(--text));
    transition: transform var(--dur-fast), background var(--dur-fast);
}

.stats li:hover {
    transform: translateY(-3px);
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    box-shadow: var(--shadow-2);
}

.stats li i {
    color: var(--accent);
    font-size: var(--t-lg);
    margin-bottom: 4px;
    display: block;
}

.stats li strong {
    font-family: var(--font-heading);
    font-size: var(--t-md);
    font-weight: 700;
    color: inherit;
    display: block;
    /* Force value to new line */
}

/* Gender Row (4th item) and Age (5th) overrides */
/* We force these to flow inline-ish */
.stats li:nth-child(n+4) {
    grid-column: 1 / -1;
    /* Full width */
    flex-direction: row;
    /* Horizontal flow */
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
}

.stats li:nth-child(n+4) i {
    margin-bottom: 0;
    /* No bottom margin in row mode */
    font-size: var(--t-lg);
}

/* Fix for Gender text content */
.stats li:nth-child(4) strong {
    display: inline;
    /* Keep '65% M' inline */
    font-size: var(--t-md);
    /* Adjust size */
}

/* Fix for Age text content */
.stats li:nth-child(5) strong {
    display: inline;
    font-size: var(--t-base);
}

/* Social Strip - 2-col outline grid */
.social-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 10px;
}

.social-strip span,
.social-strip a {
    background: color-mix(in srgb, var(--logo-text) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--logo-text) 15%, transparent);
    color: var(--logo-text) !important;
    font-size: var(--t-xs);
    font-weight: 600;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    box-shadow: none;
    transition: background var(--dur-fast), transform var(--dur-fast);
    opacity: 0.85;
}

.social-strip span:hover,
.social-strip a:hover {
    background: color-mix(in srgb, var(--logo-text) 14%, transparent);
    transform: translateY(-1px);
    filter: none;
    opacity: 1;
}

.social-strip a {
    text-decoration: none;
}

.social-strip i {
    font-size: var(--t-xs);
    color: var(--accent);
    opacity: 0.9;
    /* Fixed-Size-Box damit fa-solid (z.B. Podcast) und fa-brands gleich
       breit + auf gleicher Baseline rendern. Inline-Flex sorgt für
       Vertical-Center der Glyphe innerhalb der Box. */
    width: 1.1em;
    height: 1em;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

/* ─── PRICING SIDE ─── */
.portal-pricing {
    padding: 0 20px 16px;
    position: relative;
    overflow: visible;
}

/* Tier selector spans full width */
.tier-selector {
    display: flex;
    gap: 7px;
    /* Spacing moved from padding-top to margin-top so the element's own box
       stays tight around the visible buttons. The old padding was a dead
       reservation for .tier-selector-label (now display:none) and caused the
       tour highlight ring to clip into the text above (top edge 10px too high). */
    margin-top: 10px;
    margin-bottom: 12px;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 10;
}

/* Query-Container fuer den Streichpreis (siehe `@container tierbar` weiter
   unten). Galt bisher nur im 601px-Zweig, jetzt auf allen Bildschirmbreiten:
   die Zellbreite haengt an dieser Leiste, nicht am Fenster, und auf dem
   Telefon ist sie am engsten - genau dort war der Umbruch bisher unbemessen.

   `screen` ist zwingend: im Druck ist die Leiste ein schrumpfender Flex-Item
   (gemessen 511px auf A4), und Inline-Size-Containment setzt genau so eine
   inhaltsabhaengige Breite auf 0. Der Container haette dort also immer
   angeschlagen und den Streichpreis grundlos umgebrochen. */
@media screen {
    .tier-selector {
        container-type: inline-size;
        container-name: tierbar;
    }
}

/* "Wähle dein Paket" Label – hidden, kept in DOM for i18n compatibility */
.tier-selector-label {
    display: none;
}

/* ─── Early-Bird-Hinweis ─────────────────────────────────────────
   Sitzt als eigenes Element VOR .tier-selector (der ist eine nowrap-
   Flexzeile, ein Kind darin wuerde neben die Paket-Buttons rutschen).
   Faerbung ueber --accent, also automatisch in der Farbe der jeweiligen
   Brand. Gerendert wird er in admin.js, nur bei aktivem Rabatt.
   --eb-shift zieht ihn auf die Mitte der Performance-Pille: die Reihe ist
   bei ungleich rabattierten Tiers asymmetrisch, reine Zentrierung im
   Container stellt den Hinweis dann sichtbar schief. Wert kommt aus
   admin.js (_ebMeasureShift), Default 0 haelt ihn zentriert. */
.early-bird-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: fit-content;
    max-width: 100%;
    margin: 14px auto 0 auto;
    padding: 5px 13px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
    color: var(--accent);
    font-size: var(--t-2xs);
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
    transform: translateX(var(--eb-shift, 0px));
}

.early-bird-note i {
    font-size: 0.9em;
    flex-shrink: 0;
}



.tier-btn {
    padding: 11px 24px;
    border: none;
    background: var(--surface-hover);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: var(--t-base);
    font-weight: 500;
    letter-spacing: 0.2px;
    cursor: pointer;
    color: var(--text-muted);
    transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) linear, border-color var(--dur-fast) linear, color var(--dur-fast) linear, box-shadow var(--dur-fast) linear;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}


/* Item 7: Price color hierarchy */
.tier-btn .tier-name {
    font-weight: 700;
}

/* nowrap gehoert an den Betrag selbst, nicht an .tier-btn: die Mobil-Zweige
   setzen den Button auf `white-space: normal` (lange Paketnamen duerfen
   umbrechen) und gaben damit auch das Leerzeichen zwischen Zahl und
   Waehrungszeichen zum Umbruch frei - `2.800` blieb oben, das `€` rutschte in
   die zweite Zeile, abhaengig von der Geraetebreite. Der Streichpreis bekommt
   unterhalb von 400px Leistenbreite eine eigene Zeile, deshalb ist nowrap hier
   kein Ueberlaufrisiko (siehe `@container tierbar`). */
/* Markenton beimischen statt pur setzen (Pitfall 28). Die Korrektur stand bis
   zum 09.08.2026 nur im 601px-Zweig, unterhalb davon galt weiter reines
   `var(--accent)` bei `opacity: .85` - gemessen 20 von 21 Preisen unter 4,5:1
   im Light-Theme (DealDoktor 1,62), 15 von 21 im Dark-Theme. Der Preis ist die
   wichtigste Zahl der Paketwahl, und mobil ist der Ernstfall: die Regel gehoert
   deshalb in die Basisregel, nicht in einen Breitenzweig (dieselbe Lehre wie
   bei `nowrap` eine Kommentarzeile hoeher). */
.tier-btn .tier-price {
    font-weight: 700;
    font-size: 1em;
    color: color-mix(in srgb, var(--accent) 40%, var(--text));
    opacity: 1;
    white-space: nowrap;
    transition: color 0.25s var(--ease-out);
}

.tier-btn.active .tier-price {
    color: color-mix(in srgb, var(--accent) 40%, var(--text));
    opacity: 1;
}

/* Hide icons unless the tier is selected */
.tier-btn .tier-name i,
.tier-btn .tier-name .fire {
    display: none;
    margin-right: 4px;
}

.tier-btn.active .tier-name i,
.tier-btn.active .tier-name .fire {
    display: inline-block;
}

.tier-btn:hover {
    background: var(--surface);
    color: var(--text);
    transform: translateY(-1px);
}

.tier-btn:active {
    transform: translateY(1px) scale(0.97);
    transition: transform var(--dur-fast) var(--ease-out);
}

.tier-btn.active {
    background: color-mix(in srgb, var(--accent) 15%, var(--panel-bg));
    color: var(--text);
    box-shadow: inset 0 0 0 1.5px var(--accent), 0 4px 12px color-mix(in srgb, var(--accent) 15%, transparent);
    transform: none;
}

.tier-btn.active:hover {
    background: color-mix(in srgb, var(--accent) 25%, var(--panel-bg));
    box-shadow: inset 0 0 0 1.5px var(--accent), 0 6px 16px color-mix(in srgb, var(--accent) 25%, transparent);
    transform: translateY(-1px);
}

.tier-btn.active:active {
    transform: translateY(1px) scale(0.97);
    transition: transform var(--dur-fast) var(--ease-out);
}

.tier-btn .fire {
    margin-right: 6px;
    filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--accent) 20%, transparent));
}

/* Tile grid */
.tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    /* Increased from 140px */
    gap: 12px;
    /* Slightly increased gap */
}

.tile {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 22px 18px 18px;
    text-align: center;
    transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) linear, box-shadow var(--dur-fast) linear, background-color var(--dur-fast) linear;
    position: relative;
    cursor: default;
}

/* Hide tile text until tile-config.json is loaded (prevents flash of empty content) */
body:not(.tiles-loaded) .tile h4,
body:not(.tiles-loaded) .tile .tile-detail {
    visibility: hidden;
}

.tile:not(.disabled):hover {
    border-color: var(--accent);
    background: var(--panel-bg);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 15%, transparent);
    transform: translateY(-2px);
}

.tile:not(.disabled):active {
    transform: translateY(0) scale(0.98);
    transition: transform var(--dur-fast) var(--ease-out);
}

.tile.disabled {
    opacity: 0.62;
    background: var(--surface);
    border-style: solid;
    border-color: var(--border);
    cursor: help;
    /* Show help cursor to indicate interaction */
    position: relative;
    /* Intentional locked look (not a render glitch): muted but defined */
}

.tile.disabled:hover {
    opacity: 0.8;
    /* Make it more visible on hover */
    background: rgba(0, 0, 0, 0.02);
}

/* Hide duplicate tiles in Premium layer (already shown in Performance with updated detail) */
.tile.tier-dup-hidden {
    display: none;
}

/* Kachel, die das aktive Profil nicht anbietet (profiles/*.json -> deletedTiles).
   Reversibel statt aus dem DOM entfernt, damit ein Profilwechsel sie zurueckholt. */
.tile.profile-hidden {
    display: none !important;
}

/* Improve brightness of tile short descriptions in dark mode */
[data-theme="dark"] .tile .tile-detail {
    color: #b0b8c1 !important;
    /* Brighter than the standard --text-muted */
    opacity: 0.95;
}

/* Subtle booster price styling */
.addon-tile .tile-detail {
    font-size: var(--t-xs);
    color: var(--text-muted);
    opacity: 0.8;
    margin-top: 4px;
    font-weight: 500;
}

.tile-unavailable-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    background: #333;
    color: #fff;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: var(--t-xs);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-fast), transform var(--dur-fast);
    z-index: 100;
    box-shadow: var(--shadow-2);
}

.tile-unavailable-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

.tile.disabled:hover .tile-unavailable-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(-5px);
}

/* ── Booster ohne gewaehltes Paket ────────────────────────────────────
   Regel von Mike (06.08.2026): erst Paket, dann Booster. Klick-Guard
   (_offerToggleAddonTile, offer-bar.js) und Erklaerung in der
   Platzierungskarte (.tooltip-sheet-locked, script.js
   _buildPlacementCardInner) bleiben bestehen - nur die optische Daempfung
   ist auf Mikes Wunsch (07.08.2026) entfernt, die Kachel sieht jetzt normal
   aus. `.addon-needs-tier` traegt deshalb hier bewusst keine Regel mehr,
   bleibt aber als reiner Zustands-Marker fuer Klick-Guard/Tooltip sowie den
   Lightbox-Cursor-Ausschluss (siehe body[data-screenshot-mode="lightbox"]
   weiter unten) erhalten. */

/* Status dot */
.tile-status {
    display: none;
}

/* ── Content-Waechter: Befund an der Kachel ──────────────────────
   Nutzt den vorhandenen, sonst ungenutzten .tile-status-Slot, statt ein
   weiteres Element in die Kachel zu haengen: der sitzt schon im Markup jeder
   Kachel und geraet dadurch nie mit der Edit-Serialisierung aneinander.

   Oben LINKS, weil oben rechts im Edit-Mode der Stift sitzt (.tile-edit-btn).
   Der helle Ring loest den Punkt von jedem Untergrund - im Standard-Kit wie im
   goldenen Kampagnen-Kit, wo ein reines Amber sonst verschwaende.
   Sichtbar nur fuer Admins: die Klasse setzt _applyContentGuardMarkers. */
.tile.has-guard-flag {
    position: relative;
}

.tile.has-guard-flag>.tile-status {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 6px;
    left: 6px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 9px;
    line-height: 1;
    color: #fff;
    z-index: 12;
    cursor: help;
    pointer-events: auto;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--panel-bg, #111) 85%, transparent),
        0 2px 6px rgba(0, 0, 0, 0.35);
}

.tile.has-guard-flag>.tile-status::before {
    content: '\f12a';
    /* fa-exclamation */
}

/* Alarm = der deutsche Text fehlt oder ist verloren, die Seite zeigt eine
   Luecke. Hinweis = sichtbar, aber unvollstaendig (meist fehlt EN). */
.tile-status[data-guard="alarm"] {
    background: #e5484d;
}

.tile-status[data-guard="hinweis"] {
    background: #f0a02a;
    color: #3a2400;
}

.tile.disabled .tile-status {
    display: none;
}

/* ─── LAYERED CAKE (Basis + Boost) – Stack-Row Design ─── */
.layered-cake-grid {
    display: flex;
    flex-direction: column-reverse;
    gap: 12px;
    margin-bottom: 16px;
    position: relative;
    overflow: visible;
    /* Must be visible so tile tooltips are never clipped */
    transition: gap var(--dur-base) ease;
    border-radius: var(--radius-md);
}

/* ── Layer Merge: Performance (classic) → S+M merge ── */
[data-tier="classic"] .layered-cake-grid,
[data-tier="premium"] .layered-cake-grid {
    gap: 0;
}

/* Keep spacing above locked Premium layer when only S+M are merged */
[data-tier="classic"] .package-layer.layer-l {
    margin-top: 12px;
}

/* S bottom edge → merge downward into M */
[data-tier="classic"] .package-layer.layer-s,
[data-tier="premium"] .package-layer.layer-s {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
}

[data-tier="classic"] .package-layer.layer-s::before,
[data-tier="premium"] .package-layer.layer-s::before {
    border-bottom-left-radius: 0 !important;
}

/* M top edge → merge upward into S */
[data-tier="classic"] .package-layer.layer-m.active-layer,
[data-tier="premium"] .package-layer.layer-m {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top-color: transparent;
}

[data-tier="classic"] .package-layer.layer-m.active-layer::before,
[data-tier="premium"] .package-layer.layer-m::before {
    border-top-left-radius: 0 !important;
}

/* ── Layer Merge: Premium → all three merge ── */
/* M bottom edge → merge downward into L */
[data-tier="premium"] .package-layer.layer-m {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
}

[data-tier="premium"] .package-layer.layer-m::before {
    border-bottom-left-radius: 0 !important;
}

/* L top edge → merge upward into M */
[data-tier="premium"] .package-layer.layer-l {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top-color: transparent;
}

[data-tier="premium"] .package-layer.layer-l::before {
    border-top-left-radius: 0 !important;
}

/* ── Hide "+" connector completely when layers merge (Smooth Accordion) ── */
[data-tier="classic"] .tier-plus-connector,
[data-tier="premium"] .tier-plus-connector {
    max-height: 0 !important;
    opacity: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: none !important;
    pointer-events: none;
}

/* ── Unify background colors when layers merge ── */
[data-tier="classic"] .package-layer.layer-s,
[data-tier="classic"] .package-layer.layer-m.active-layer {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}

[data-tier="premium"] .package-layer.layer-s,
[data-tier="premium"] .package-layer.layer-m,
[data-tier="premium"] .package-layer.layer-l {
    background: color-mix(in srgb, var(--accent) 14%, transparent);
}

/* ── Unify left stripe color when merged ── */
[data-tier="classic"] .package-layer.layer-s::before {
    background: color-mix(in srgb, var(--accent) 75%, transparent);
}

[data-tier="premium"] .package-layer.layer-s::before,
[data-tier="premium"] .package-layer.layer-m::before {
    background: var(--accent);
}

/* ── Eliminate gaps: remove padding + border on inner merged layers ── */
[data-tier="classic"] .package-layer.layer-m.active-layer,
[data-tier="premium"] .package-layer.layer-m,
[data-tier="premium"] .package-layer.layer-l {
    padding-top: 0;
    border-top-width: 0;
}

[data-tier="classic"] .package-layer.layer-s,
[data-tier="premium"] .package-layer.layer-s {
    border-bottom-width: 0;
}

[data-tier="premium"] .package-layer.layer-m {
    border-bottom-width: 0;
}

/* Kein Schlagschatten auf den nach unten verschmolzenen Layern.
   .layered-cake-grid dreht die Layer per column-reverse, die Malreihenfolge
   dreht sich aber nicht mit: der im DOM spaetere Layer (S) liegt oben und
   malt seinen box-shadow (--shadow-1 = 0 1px 2px) ueber die Oberkante des
   darunter liegenden Layers - sichtbar als dunkler Strich quer durch den
   verschmolzenen Block, inklusive des goldenen tier-stripe. Betroffen sind
   genau die Layer, die schon border-bottom-width: 0 bekommen. Der unterste
   sichtbare Layer behaelt seinen Schatten, der Block wirkt nach aussen
   unveraendert. */
[data-tier="classic"] .package-layer.layer-s,
[data-tier="premium"] .package-layer.layer-s,
[data-tier="premium"] .package-layer.layer-m {
    box-shadow: none;
}


/* ── Hide layer titles on merged inner layers (Smooth Accordion) ── */
[data-tier="classic"] .layer-m.active-layer>.layer-title,
[data-tier="premium"] .layer-m>.layer-title,
[data-tier="premium"] .layer-l>.layer-title {
    max-height: 0;
    opacity: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    pointer-events: none;
}

/* ── Hide per-layer ::after when merged – JS label takes over (Smooth) ── */
[data-tier="classic"] .layer-s::after,
[data-tier="classic"] .layer-m::after {
    opacity: 0 !important;
    pointer-events: none;
}

[data-tier="premium"] .layer-s::after,
[data-tier="premium"] .layer-m::after,
[data-tier="premium"] .layer-l::after {
    opacity: 0 !important;
    pointer-events: none;
}

/* ─── Package description – subtle callout (Pfad-A Premium-Lift) ─── */
.package-description {
    /* Flat panel-bg – Copy ist Fokus, kein konkurrierender Farbverlauf.
       Brand-Identität trägt nur Left-Stripe + dezenter Border + Shadow. */
    background: var(--panel-bg);
    border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--border-light));
    border-left: 3px solid color-mix(in srgb, var(--accent) 60%, transparent);
    border-radius: var(--radius-md);
    padding: 12px 16px 18px;
    margin: 8px 0 8px;
    color: var(--text-muted);
    font-size: var(--t-sm);
    font-weight: 400;
    line-height: 1.6;
    text-align: left;
    box-shadow: var(--shadow-1);
    transition: all var(--dur-fast);
}

/* Edit mode feedback for package description */
body.edit-mode .package-description {
    cursor: text !important;
    user-select: text !important;
    -webkit-user-select: text !important;
    outline: 1px dashed rgba(255, 255, 255, 0.15);
}

body.edit-mode .package-description:hover,
body.edit-mode .package-description:focus {
    outline: 2px dashed var(--tm-primary);
    background: color-mix(in srgb, var(--tm-primary) 5%, transparent);
}

/* FAQ hint link (below package description) */
.faq-hint-link {
    display: block;
    text-align: center;
    margin: 6px auto 10px;
    font-size: var(--t-xs);
    font-weight: 500;
    color: color-mix(in srgb, var(--accent, #3b82f6) 70%, var(--text-muted));
    text-decoration: none;
    opacity: 0.65;
    transition: opacity var(--dur-fast), color var(--dur-fast);
    letter-spacing: 0.02em;
}

.faq-hint-link i {
    margin-right: 4px;
    font-size: 0.85em;
}

.faq-hint-link:hover {
    opacity: 1;
    color: var(--accent, #3b82f6);
}

@keyframes pkg-desc-fade {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pkg-desc-fadein {
    animation: pkg-desc-fade 0.6s var(--ease-out) both;
}

/* ─── SM Add-on Toggle (as tile in booster grid) ─── */
/* Social-Media accent (blue – matches global accent) */
:root {
    --sm-grad-1: #3b82f6;
}

.sm-addon-toggle.tile {
    cursor: pointer;
    position: relative;
    transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) linear, border-color var(--dur-fast) linear, box-shadow var(--dur-fast) linear;
    /* Subtle purple tint – clearly different, not overwhelming */
    background: color-mix(in srgb, var(--sm-grad-1) 7%, var(--surface)) !important;
    border-color: color-mix(in srgb, var(--sm-grad-1) 30%, transparent) !important;
    box-shadow: var(--shadow-1);
}

/* Icon & title get a muted purple accent */
.sm-addon-toggle.tile .tile-icon {
    color: var(--sm-grad-1);
    opacity: 0.85;
}

.sm-addon-toggle.tile h4 {
    color: var(--sm-grad-1);
    font-weight: 700;
}

.sm-addon-toggle.tile .tile-detail {
    color: color-mix(in srgb, var(--sm-grad-1) 60%, var(--text-muted)) !important;
    opacity: 1 !important;
}

.sm-addon-toggle.tile:hover {
    border-color: color-mix(in srgb, var(--sm-grad-1) 55%, transparent) !important;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--sm-grad-1) 14%, transparent);
    transform: translateY(-2px);
}

.sm-addon-toggle.active {
    border-color: var(--sm-grad-1) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--sm-grad-1) 18%, transparent);
    background: color-mix(in srgb, var(--sm-grad-1) 11%, var(--surface)) !important;
}

.sm-toggle-check-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--sm-grad-1) 35%, var(--border-light));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--t-2xs);
    color: var(--sm-grad-1);
    transition: all var(--dur-fast) ease;
}

.sm-addon-toggle.active .sm-toggle-check-badge {
    background: var(--sm-grad-1);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--sm-grad-1) 35%, transparent);
}

/* ─── SM Crossfade Animations ─── */
.sm-fade-out {
    animation: smFadeOut .25s ease both;
}

.sm-fade-in {
    animation: smFadeIn .35s var(--ease-out) both;
}

@keyframes smFadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(10px);
    }
}

@keyframes smFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ─── Addon Wrapper Height Animation ─── */
.addon-wrapper {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows var(--dur-slow) ease-in-out, opacity var(--dur-base) ease-in-out;
    opacity: 1;
    /* Default to hidden to allow transition */
    overflow: hidden;
    /* Default to hidden to allow transition */
}

.addon-wrapper.is-open {
    overflow: visible;
    /* Restore visible state when fully open so tooltips aren't clipped */

    /* ─── Premium-Lift (Pfad 1, Minimal-Harmonisierung) ───
       Performance-Booster-Grid bekommt SM-konsistente Box-Optik:
       Stripe oben + Brand-Border + soft Glow + leicht warmer BG.
       Effekte nur im is-open Zustand, sonst nimmt der collapse-Container
       Padding-Höhe in Anspruch und der grid-template-rows: 0fr-Animation
       würde brechen. */
    position: relative;
    margin: 18px 0 14px;
    padding: 16px 18px 14px;
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent) 7%, var(--panel-bg, #fff)),
        var(--panel-bg, #fff) 65%);
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border-light, #e5e5e5));
    box-shadow: 0 6px 24px color-mix(in srgb, var(--accent) 8%, transparent);
}

.addon-wrapper.is-open::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #f59e0b));
    opacity: 0.85;
    pointer-events: none;
    z-index: 2;
    border-top-left-radius: var(--radius-xl);
    border-top-right-radius: var(--radius-xl);
}

/* Tighten separator when sitting inside the premium-lifted wrapper */
.addon-wrapper.is-open .upsell-separator {
    margin-top: 0;
}

.addon-wrapper.addon-hidden {
    grid-template-rows: 0fr;
    opacity: 0;
    pointer-events: none;
}

.addon-wrapper-inner {
    min-height: 0;
    overflow: visible;
}

/* ─── Generic Input Placeholder ─── */
.custom-name-input {}

/* ─── News-Ticker (thin static info-strip between hero and portals) ─── */
.news-ticker-mount {
    /* Hidden by default – JS toggles when items resolve. Hidden state
       prevents layout shift before _renderNewsTicker runs.
       Match .portals Container (max-width 1200px + page-pad seitlich)
       damit Pill-Edges mit den Brand-Section-Edges darunter fluchten.
       Symmetric vertical breathing room: 20px top margin, 0 bottom;
       .portals padding-top compresses to 14px wenn der Ticker
       gerendert ist (see :has() rule below). */
    display: block;
    max-width: 1200px;
    margin: 20px auto 0 auto;
    padding: 0 var(--page-pad);
    box-sizing: border-box;
}

/* Compress portals padding-top when the ticker is visible, so the
   gap below the strip matches the gap above (otherwise 32px padding +
   small margin = bottom-heavy asymmetry). Der Kampagnen-Wegweiser klebt
   unter der Nav und gehoert nicht mehr in diesen Streifen. */
body:has(.news-ticker-mount:not([hidden])) .portals {
    padding-top: 14px;
}

.news-ticker-mount[hidden] {
    display: none;
}

.news-ticker {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 20px;
    margin: 0;
    border-radius: var(--radius-lg);
    background: var(--panel-bg, #fff);
    border: 1px solid color-mix(in srgb, var(--tm-accent) 12%, var(--border-light, #e5e5e5));
    box-shadow: var(--shadow-1);
    font-size: var(--t-xs);
    line-height: 1.4;
    color: var(--text);
    overflow-x: auto;
    scrollbar-width: none;
}

.news-ticker::-webkit-scrollbar {
    display: none;
}

.news-ticker-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--tm-accent) 10%, transparent);
    color: var(--tm-accent);
    font-size: var(--t-2xs);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    flex-shrink: 0;
}

.news-ticker-pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tm-accent);
    animation: newsTickerPulse 2s ease-in-out infinite;
}

@keyframes newsTickerPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
}

.news-ticker-items {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    min-width: 0;
}

.news-ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    padding: 2px 0;
    transition: color var(--dur-fast) ease, opacity var(--dur-fast) ease;
}

a.news-ticker-item:hover {
    color: var(--tm-accent);
}

.news-ticker-item i {
    color: var(--tm-accent);
    font-size: var(--t-xs);
    opacity: 0.85;
    flex-shrink: 0;
}

.news-ticker-brand-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--panel-bg) 60%, transparent);
}

.news-ticker-item--urgent i {
    color: #e74c3c;
    animation: newsTickerPulse 1.5s ease-in-out infinite;
}

.news-ticker-sep {
    color: var(--text-muted);
    opacity: 0.45;
    user-select: none;
    flex-shrink: 0;
}

/* News-Ticker-Content: Viewport der einzeiligen Laufschrift. */
.news-ticker-content {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    /* Weiche Kanten, damit Items nicht hart ein-/ausfahren. */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
}

/* Laufschrift-Track: zwei identische Item-Gruppen, endlos nach links.
   translateX(-50%) setzt die Klon-Gruppe exakt auf die Startposition der
   ersten -> nahtloser Loop. Dauer setzt news-ticker.js proportional zur
   Breite (konstante Geschwindigkeit). Pause bei Hover. */
.news-ticker-track {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: max-content;
    animation: newsTickerScroll 24s linear infinite;
    will-change: transform;
}

.news-ticker-content:hover .news-ticker-track {
    animation-play-state: paused;
}

@keyframes newsTickerScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.news-ticker-items {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    flex-shrink: 0;
    /* Fester Abstand zur wiederholten Gruppe = Teil der Gruppenbreite,
       damit der -50%-Loop bündig bleibt. */
    padding-right: 32px;
}

/* ─── News-Ticker: Desktop-Rotator (vertikaler Crossfade) ───────
   Auf Desktop laeuft KEINE Laufschrift mehr: die Marquee (.news-ticker-
   content) ist ausgeblendet, stattdessen stapelt der Rotator die News-
   Items uebereinander und JS blendet sie vertikal ineinander ueber.
   Mobile (<=720px) dreht das im Media-Query wieder um. */
.news-ticker-content { display: none; }

.news-ticker-rotator {
    position: relative;
    flex: 1;
    min-width: 0;
    height: 1.8em;
    overflow: hidden;
    /* Weiche rechte Kante, falls eine Schlagzeile die Breite sprengt. */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
}

.news-ticker-slot {
    position: absolute;
    inset: 0;
    display: inline-flex;
    align-items: center;
    opacity: 0;
    /* Wartend: eine Zeilenhoehe tiefer, unsichtbar. */
    transform: translateY(100%);
    transition: opacity var(--dur-base) ease,
        transform var(--dur-slow) var(--ease-out);
    pointer-events: none;
    will-change: opacity, transform;
}

.news-ticker-slot.is-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.news-ticker-slot.is-leaving {
    opacity: 0;
    /* Verlassend: eine Zeilenhoehe hoeher nach oben rausrollen. */
    transform: translateY(-100%);
    pointer-events: none;
}

/* Reduced-Motion: keine Laufschrift. Statisch + bei Bedarf manuell
   scrollbar, Klon-Gruppe ausgeblendet. */
@media (prefers-reduced-motion: reduce) {
    .news-ticker-track {
        animation: none;
        width: 100%;
    }
    .news-ticker-content {
        overflow-x: auto;
        scrollbar-width: none;
    }
    .news-ticker-content::-webkit-scrollbar { display: none; }
    .news-ticker-track .news-ticker-items[aria-hidden="true"] { display: none; }

    /* Rotator: kein vertikales Rollen. Alle News-Items statisch inline (mit
       Separator) zeigen, damit ohne Auto-Rotate keine Nachricht verloren geht. */
    .news-ticker-rotator {
        height: auto;
        overflow: visible;
        display: flex;
        flex-wrap: wrap;
        gap: 2px 12px;
        -webkit-mask-image: none;
                mask-image: none;
    }
    .news-ticker-slot {
        position: static;
        inset: auto;
        opacity: 1;
        transform: none;
        transition: none;
        pointer-events: auto;
    }
    .news-ticker-slot + .news-ticker-slot::before {
        content: "·";
        margin-right: 12px;
        color: var(--text-muted);
        opacity: 0.45;
    }
}

.news-ticker-label {
    transition: opacity var(--dur-base) ease,
        visibility var(--dur-base),
        transform var(--dur-base) var(--ease-out),
        margin var(--dur-base) ease,
        padding var(--dur-base) ease,
        max-width var(--dur-base) ease;
}

@media (max-width: 720px) {
    /* Mobile: zurueck zur Laufschrift, Desktop-Rotator aus. Die Marquee
       verhindert Umbrueche langer Schlagzeilen auf schmalen Viewports. */
    .news-ticker-rotator { display: none; }
    .news-ticker-content { display: flex; }

    .news-ticker {
        font-size: var(--t-xs);
        gap: 10px;
        padding: 6px 12px;
    }
    .news-ticker-label {
        font-size: var(--t-2xs);
        padding: 3px 8px;
    }
    .news-ticker-items {
        gap: 8px;
    }
}

/* ─── News-Ticker: Edit-Mode ────────────────────────────────── */
.news-ticker--editing {
    border-style: dashed;
    border-color: color-mix(in srgb, var(--tm-accent) 35%, var(--border-light, #e5e5e5));
    background: color-mix(in srgb, var(--tm-accent) 3%, var(--panel-bg, #fff));
    /* Edit-Mode: max 2 Items, kein H-Scroll noetig -> overflow visible,
       damit das Icon-Picker-Popover nicht geclippt wird. */
    overflow: visible;
}

.news-ticker-item--editing {
    display: inline-flex;
    position: relative;
    align-items: center;
    gap: 6px;
    padding: 2px 6px 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--tm-accent) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--tm-accent) 22%, transparent);
    transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

.news-ticker-item--editing:hover {
    background: color-mix(in srgb, var(--tm-accent) 10%, transparent);
}

.news-ticker-text[contenteditable="true"] {
    outline: none;
    min-width: 60px;
    cursor: text;
    padding: 2px 4px;
    border-radius: 4px;
}

.news-ticker-text[contenteditable="true"]:focus {
    background: color-mix(in srgb, var(--tm-accent) 14%, var(--panel-bg, #fff));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--tm-accent) 30%, transparent);
}

.news-ticker-x {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 0;
    background: color-mix(in srgb, var(--tm-accent) 14%, transparent);
    color: var(--tm-accent);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) ease;
    flex-shrink: 0;
}

.news-ticker-x i {
    font-size: var(--t-2xs);
    color: inherit;
}

.news-ticker-x:hover {
    background: #e74c3c;
    color: #fff;
    transform: scale(1.06);
}

/* + button at the end of populated items */
.news-ticker-add-inline {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px dashed color-mix(in srgb, var(--tm-accent) 40%, transparent);
    background: transparent;
    color: var(--tm-accent);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    padding: 0;
    transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease, transform var(--dur-fast) ease;
    flex-shrink: 0;
}

.news-ticker-add-inline:hover {
    background: color-mix(in srgb, var(--tm-accent) 10%, transparent);
    border-color: var(--tm-accent);
    border-style: solid;
    transform: scale(1.04);
}

.news-ticker-add-inline i {
    font-size: var(--t-xs);
}

/* Empty-state + button (centered, prominent so admin notices it) */
.news-ticker--empty {
    justify-content: flex-start;
}

.news-ticker-add-empty {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1.5px dashed color-mix(in srgb, var(--tm-accent) 45%, transparent);
    background: transparent;
    color: var(--tm-accent);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--t-xs);
    font-weight: 600;
    transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

.news-ticker-add-empty:hover {
    background: color-mix(in srgb, var(--tm-accent) 8%, transparent);
    border-color: var(--tm-accent);
    border-style: solid;
}

.news-ticker-add-empty i {
    font-size: var(--t-2xs);
}

/* ── Inline Icon-Picker (Edit-Mode) ── */
.news-ticker-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--tm-accent) 22%, transparent);
    border-radius: 6px;
    background: color-mix(in srgb, var(--tm-accent) 8%, transparent);
    color: var(--tm-accent);
    cursor: pointer;
    transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

.news-ticker-icon-btn:hover {
    background: color-mix(in srgb, var(--tm-accent) 16%, transparent);
    border-color: var(--tm-accent);
}

.news-ticker-icon-btn i {
    font-size: var(--t-2xs);
}

.news-ticker-icon-picker {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 200;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
    padding: 8px;
    background: var(--panel-bg, #fff);
    border: 1px solid color-mix(in srgb, var(--tm-accent) 25%, var(--border-light, #e5e5e5));
    border-radius: 10px;
    box-shadow: var(--shadow-3);
}

.news-ticker-icon-picker.is-open {
    display: grid;
}

.news-ticker-icon-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted, #666);
    cursor: pointer;
    transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}

.news-ticker-icon-cell:hover {
    background: color-mix(in srgb, var(--tm-accent) 12%, transparent);
    color: var(--tm-accent);
}

.news-ticker-icon-cell.is-current {
    background: color-mix(in srgb, var(--tm-accent) 18%, transparent);
    border-color: color-mix(in srgb, var(--tm-accent) 40%, transparent);
    color: var(--tm-accent);
}

.news-ticker-icon-cell i {
    font-size: var(--t-xs);
}


/* ── Kampagnen-Wegweiser (kit-switch.js) ─────────────────────
   Klebt direkt unter .sticky-nav (70px, mobil 60px). JS setzt top auf die
   gemessene Nav-Unterkante und --kit-switch-h auf die eigene Hoehe, damit
   Hero und Brand-Spruenge mitwandern. Nicht im Fluss: sonst bliebe unter
   dem Hero ein Loch, waehrend die Leiste oben klebt. */
.kit-switch-mount { display: none; }
body.content-unlocked .kit-switch-mount:not([hidden]) {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 8px var(--page-pad);
    box-sizing: border-box;
    z-index: 990;
    background: transparent;
    border: 0;
    box-shadow: none;
    /* Nur die Pille faengt Klicks. Die leere Flaeche daneben ist durchsichtig. */
    pointer-events: none;
}
.kit-switch-mount .kit-switch-banner {
    pointer-events: auto;
}
.kit-switch-banner {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    max-width: 720px;
    padding: 9px 10px 9px 18px;
    border-radius: 999px;
    font-size: 0.88rem;
    color: var(--text);
    background: color-mix(in srgb, var(--tm-accent) 9%, var(--panel-bg));
    border: 1px solid color-mix(in srgb, var(--tm-accent) 26%, transparent);
    box-shadow: 0 6px 20px -10px color-mix(in srgb, var(--tm-accent) 45%, transparent);
}
.kit-switch-banner i { color: var(--tm-accent); }
.kit-switch-btn {
    flex-shrink: 0;
    border: 0;
    border-radius: 999px;
    padding: 7px 14px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    color: #fff;
    background: var(--tm-accent);
}
.kit-switch-btn:hover { filter: brightness(1.08); }
/* Waehrend der Kampagne dominiert das Kampagnen-Kit: Rueckweg dezent. */
.kit-switch-banner.kit-switch-quiet {
    background: var(--panel-bg);
    border-color: var(--border-light, rgba(128,128,128,.25));
    box-shadow: none;
}
.kit-switch-quiet .kit-switch-btn {
    background: transparent;
    color: var(--tm-accent);
    border: 1px solid color-mix(in srgb, var(--tm-accent) 40%, transparent);
}

/* ─── SM Section (collapsible, info-rich Summary + auto-expand Body) ─── */
.sm-section {
    margin: 24px 0 18px;
    padding: 0;
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent) 7%, var(--panel-bg, #fff)),
        var(--panel-bg, #fff) 65%);
    border: 1px solid var(--border-light, #e5e5e5);
    box-shadow: var(--shadow-2);
    position: relative;
    overflow: visible;
}

/* Left-Stripe entfernt (User-Feedback: wirkte pink/fremd).
   SM-Box nutzt nur neutralen Aussenrahmen + subtilen Accent-Tint im BG. */

/* Farbton-Kopplung an den aktiven Tier. Der sichtbare Tier-Block ist
   flach getoent, nicht als Gradient: .layer-s/-m/-l geben 6/10/14%,
   beim Merge vereinheitlichen die [data-tier]-Regeln auf 10% (classic)
   bzw. 14% (premium). Ohne die Kopplung bliebe die SM-Box auf ihrem
   7%-Gradient und wirkt daneben blass (am staerksten bei Premium:
   14% flach gegen 7% nach Weiss auslaufend). Basis ist bewusst
   transparent wie beim Tier-Block, damit beide denselben Untergrund
   durchscheinen lassen (Light + Dark). */
[data-tier="basic"] .sm-section {
    background: color-mix(in srgb, var(--accent) 6%, transparent);
}

[data-tier="classic"] .sm-section {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}

[data-tier="premium"] .sm-section {
    background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.sm-section-summary {
    list-style: none;
    cursor: pointer;
    padding: 22px 24px 18px;
    display: block;
    user-select: none;
    transition: background var(--dur-fast) ease;
    /* button reset */
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    appearance: none;
    /* Teil des Button-Resets, seit .sm-section-summary ein div[role=button] ist:
       das UA-Stylesheet gab einem <button> letter-spacing: normal, ein div erbt
       dagegen das projektweite -0.005em. Ohne diese Zeile wuerde die Kopfzeile
       durch den Elementwechsel rund 1% schmaler setzen - eine typografische
       Aenderung, die mit der Verlinkung nichts zu tun hat. Wer die Box bewusst
       auf die Projekt-Typografie bringen will, loescht diese Zeile. */
    letter-spacing: normal;
}

.sm-section-summary::-webkit-details-marker {
    display: none;
}

.sm-section-summary:hover {
    background: color-mix(in srgb, var(--accent) 4%, transparent);
}

.sm-section-summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -4px;
    border-radius: var(--radius-xl);
}

.sm-section-title-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}

.sm-section-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--accent);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--t-md);
    flex-shrink: 0;
    box-shadow: none;
}

.sm-section-title-block {
    flex: 1;
    min-width: 0;
}

.sm-section-heading {
    margin: 0 0 4px;
    font-family: var(--font-heading);
    font-size: var(--t-md);
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Platforms-Icons direkt inline ohne eigenen Pill-Container.
   Reduziert Visual-Crowding rechts neben Price-Badge + Chevron. */
.sm-section-platforms-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.sm-section-platforms-inline i {
    font-size: var(--t-base);
    color: var(--accent);
    opacity: 0.85;
    line-height: 1;
}

/* Kanaele mit hinterlegter URL sind echte Links (sm-section.js). Sie sollen
   sich vom stummen Icon daneben nur beim Hover unterscheiden - eine Reihe aus
   teils unterstrichenen, teils nicht unterstrichenen Glyphen laese sich als
   Fehler. Deshalb Unterstrich weg und stattdessen Deckkraft als Signal. */
.sm-section-platforms-inline a.sm-platform-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    border-radius: var(--radius-sm, 6px);
    transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) ease;
}

.sm-section-platforms-inline a.sm-platform-link:hover i {
    opacity: 1;
}

.sm-section-platforms-inline a.sm-platform-link:hover {
    transform: translateY(-1px);
}

.sm-section-platforms-inline a.sm-platform-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Im Edit-Mode bearbeitet der Admin die Kopfzeile - ein versehentlicher Klick
   duerfte ihn nicht aus der Seite heraus auf einen fremden Kanal tragen. */
body.edit-mode .sm-section-platforms-inline a.sm-platform-link {
    pointer-events: none;
}

.sm-section-summary-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    align-self: center;
}

.sm-section-price-badge {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    box-shadow: none;
    flex-shrink: 0;
    align-self: center;
}

.sm-section-price-badge-label {
    font-size: var(--t-2xs);
    font-weight: 500;
    opacity: 0.85;
    letter-spacing: 0.02em;
}

.sm-section-price-badge strong {
    font-size: var(--t-sm);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.sm-section-sub {
    margin: 0;
    font-size: var(--t-xs);
    color: var(--text-muted);
    line-height: 1.5;
    white-space: nowrap;
}

.sm-section-summary-chev {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--t-xs);
    flex-shrink: 0;
    border: 1.5px solid color-mix(in srgb, var(--accent) 28%, transparent);
    transition: transform var(--dur-base) var(--ease-out),
                background var(--dur-base) ease,
                border-color var(--dur-base) ease,
                color var(--dur-base) ease,
                box-shadow var(--dur-base) ease;
    align-self: center;
}

.sm-section-summary:hover .sm-section-summary-chev {
    background: color-mix(in srgb, var(--accent) 24%, transparent);
    border-color: var(--accent);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 28%, transparent);
}

.sm-section[data-open="true"] .sm-section-summary-chev {
    transform: rotate(180deg);
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 40%, transparent);
}

.sm-section-summary-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
}

.sm-platform-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sm-platform-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 8%, var(--surface, #f8f8f8));
    border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
    font-size: var(--t-2xs);
    font-weight: 600;
    color: var(--text);
    letter-spacing: 0.01em;
}

.sm-platform-chip i {
    color: var(--accent);
    font-size: var(--t-xs);
}

.sm-section-quickstats {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin-left: auto;
    font-size: var(--t-xs);
    color: var(--text-muted);
    font-weight: 500;
}

.sm-section-quickstat strong {
    color: var(--text);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.sm-section-quickstat-price strong {
    color: var(--accent);
}

.sm-section-quickstat-sep {
    opacity: 0.4;
}

.sm-section-summary-teaser {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 12px;
    max-height: 200px;
    overflow: hidden;
    transition: opacity var(--dur-base) ease,
        transform var(--dur-base) var(--ease-out),
        max-height var(--dur-base) var(--ease-out),
        margin var(--dur-base) ease;
}

.sm-section-teaser-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 8px;
    background: var(--panel-bg, #fff);
    border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
    font-size: var(--t-2xs);
    color: var(--text);
    font-weight: 500;
    white-space: nowrap;
    transition: transform var(--dur-fast), box-shadow var(--dur-fast), border-color var(--dur-fast);
    box-shadow: var(--shadow-1);
}
.sm-section-teaser-chip:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
    box-shadow: 0 4px 10px color-mix(in srgb, var(--accent) 12%, transparent);
}

.sm-section-teaser-chip i {
    color: var(--accent);
    font-size: var(--t-2xs);
    opacity: 0.8;
}

/* (Legacy .sm-section-teaser-chip-price moved into title-row .sm-section-price-badge) */

/* ── SM-Booster Edit-Mode: Chips hinzufuegen/loeschen/Icon aendern ──
   Steuerelemente sind immer im DOM (initSmRowEditor haengt sie nur im
   Edit-Mode an, siehe tour.js), Sichtbarkeit rein per body.edit-mode. */
.sm-chip-remove-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-left: 2px;
    border-radius: 50%;
    background: #ef5350;
    color: #fff;
    font-size: 8px;
    cursor: pointer;
    flex-shrink: 0;
}

body.edit-mode .sm-chip-remove-btn {
    display: inline-flex;
}

.sm-chip-remove-btn:hover {
    transform: scale(1.2);
}

.sm-chip-add-btn {
    display: none;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border: 1.5px dashed var(--border-light);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: var(--t-2xs);
    font-weight: 500;
    cursor: pointer;
    background: transparent;
}

body.edit-mode .sm-chip-add-btn {
    display: inline-flex;
}

body.edit-mode .sm-chip-add-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 5%, transparent);
}

body.edit-mode .sm-section-teaser-chip i.sm-icon-pickable {
    cursor: pointer;
    border-radius: 3px;
}

body.edit-mode .sm-section-teaser-chip i.sm-icon-pickable:hover {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Smoothly collapse the teaser-chip row when expanded – opacity +
   max-height + margin all fade together instead of snapping to
   display:none. */
.sm-section[data-open="true"] .sm-section-summary-teaser {
    opacity: 0;
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    transform: translateY(-4px);
    pointer-events: none;
}

.sm-section-title-row {
    transition: margin-bottom var(--dur-base) ease;
}

.sm-section[data-open="true"] .sm-section-title-row {
    margin-bottom: 0;
}

/* Smooth expand – JS-driven via data-open so the same transitions run
   on every toggle. (Native <details> dropped content-visibility/display
   semantics that broke re-entry on second+ toggles.) */
.sm-section .sm-section-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--dur-slow) var(--ease-out);
    will-change: grid-template-rows;
}

.sm-section[data-open="true"] .sm-section-body {
    grid-template-rows: 1fr;
}

.sm-section-body-inner {
    min-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transform-origin: top center;
    transition: opacity var(--dur-base) ease, transform var(--dur-slow) var(--ease-out);
    will-change: opacity, transform;
}

.sm-section[data-open="true"] .sm-section-body-inner {
    opacity: 1;
    transform: translateY(0);
}

/* Auto-Reveal beim Reinscrollen bewusst langsamer als der manuelle
   Klick: das Ausfahren soll als gesetzte Geste wahrgenommen werden,
   nicht wegblitzen. Nur auf diesem Pfad (data-auto-reveal, in
   sm-section.js gesetzt) – ein Klick auf die Pille bleibt flott
   (--dur-slow), weil aktive Bedienung sich direkt anfuehlen muss. */
.sm-section[data-auto-reveal="true"] .sm-section-body {
    transition-duration: var(--sm-reveal-dur, 1200ms);
}

.sm-section[data-auto-reveal="true"] .sm-section-body-inner {
    transition: opacity calc(var(--sm-reveal-dur, 1200ms) * 0.75) ease,
        transform var(--sm-reveal-dur, 1200ms) var(--ease-out);
}

/* Body padding – grid is rendered inside body wrapper */
.sm-section .sm-packages-grid {
    margin: 14px 24px 14px;
    width: auto;
}

/* ─── Selectable SM price cells (6 SKUs: 3 rows × 2 variants) ───
   Editorial / flat luxury feel: no lift, no gradient, no plastic
   shadows. Selection = solid color, white text, accent left-border
   to anchor it, small confident check badge. */
.sm-price.sm-price-cell {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-family: inherit;
    padding: inherit;
    position: relative;
    transition: background var(--dur-base) ease,
        color var(--dur-base) ease;
}

.sm-price-cell .sm-price-cell-add,
.sm-price-cell .sm-price-cell-check {
    width: 21px;
    height: 21px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--t-2xs);
    flex-shrink: 0;
    transition: background var(--dur-fast) ease, color var(--dur-fast) ease, opacity var(--dur-fast) ease;
}

.sm-price-cell .sm-price-cell-add {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
    opacity: 1;
}

.sm-price-cell .sm-price-cell-check {
    background: rgba(255, 255, 255, 0.85);
    color: var(--accent);
    display: none;
    border: 0;
}

.sm-price-cell:hover {
    background: color-mix(in srgb, var(--accent) 4%, transparent);
}

.sm-price-cell:hover .sm-price-cell-add {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    opacity: 1;
}

/* ── Selected – Basic (magenta), flat fill, no lift ── */
.sm-price-cell.is-selected {
    background: var(--accent);
    color: #fff;
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 75%, #000);
}

.sm-price-cell.is-selected:hover {
    background: color-mix(in srgb, var(--accent) 92%, #000);
}

.sm-price-cell.is-selected .sm-price-cell-add {
    display: none;
}

.sm-price-cell.is-selected .sm-price-cell-check {
    display: inline-flex;
    animation: smCellCheckFade 0.22s ease;
}

@keyframes smCellCheckFade {
    from { opacity: 0; transform: scale(0.6); }
    to   { opacity: 1; transform: scale(1); }
}

.sm-price-cell.is-selected .sm-price-cell-label {
    font-weight: 700;
}

/* ── Premium variant (gold) ── */
.sm-price-cell.sm-price-premium:hover {
    background: color-mix(in srgb, #f59e0b 6%, transparent);
}

.sm-price-cell.sm-price-premium:hover .sm-price-cell-add {
    border-color: #f59e0b;
    color: #f59e0b;
}

.sm-price-cell.sm-price-premium.is-selected {
    background: #f59e0b;
    color: #fff;
    box-shadow: inset 3px 0 0 #c2410c;
}

.sm-price-cell.sm-price-premium.is-selected:hover {
    background: color-mix(in srgb, #f59e0b 92%, #000);
}

/* ─── SM Variant CTAs (legacy bulk-select buttons, kept hidden for now) ─── */
.sm-section-cta-row {
    display: none;
    flex-wrap: wrap;
    gap: 10px;
    padding: 4px 24px 22px;
}

.sm-section-cta {
    flex: 1;
    min-width: 180px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 18px;
    border-radius: 12px;
    border: 1.5px solid color-mix(in srgb, var(--accent) 32%, transparent);
    background: var(--panel-bg, #fff);
    color: var(--text);
    font-family: inherit;
    font-size: var(--t-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease,
                color var(--dur-fast) ease, transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}

.sm-section-cta i {
    color: var(--accent);
    font-size: var(--t-xs);
}

.sm-section-cta:hover {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 6%, var(--panel-bg, #fff));
    transform: translateY(-1px);
}

.sm-section-cta:active {
    transform: translateY(0);
}

.sm-section-cta-premium {
    border-style: solid;
    border-color: color-mix(in srgb, #f59e0b 35%, transparent);
}

.sm-section-cta-premium i {
    color: #f59e0b;
}

.sm-section-cta-premium:hover {
    border-color: #f59e0b;
    background: color-mix(in srgb, #f59e0b 7%, var(--panel-bg, #fff));
}

/* Active state: filled */
.sm-section-cta-state-active {
    display: none;
}

.sm-section-cta.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 30%, transparent);
}

.sm-section-cta.is-active i {
    color: #fff;
}

.sm-section-cta.is-active .sm-section-cta-state-add {
    display: none;
}

.sm-section-cta.is-active .sm-section-cta-state-active {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.sm-section-cta-premium.is-active {
    background: linear-gradient(135deg, #f59e0b, #ea580c);
    border-color: #f59e0b;
    box-shadow: 0 6px 18px color-mix(in srgb, #f59e0b 35%, transparent);
}

@media (max-width: 640px) {
    .sm-section-cta-row {
        padding: 4px 16px 18px;
    }
    .sm-section-cta {
        min-width: 0;
        font-size: var(--t-xs);
    }
}

/* When expanded, the platform-pill + price-badge + teaser-chip row
   smoothly fade + collapse out (instead of snapping to display:none).
   Below grid surfaces this info anyway, so the summary stays focused
   on heading + sub.  */
.sm-section-platforms-inline,
.sm-section-price-badge {
    max-width: 240px;
    overflow: hidden;
    transition: opacity var(--dur-base) ease,
        transform var(--dur-base) var(--ease-out),
        max-width var(--dur-base) var(--ease-out),
        padding var(--dur-base) ease,
        margin var(--dur-base) ease,
        border-width var(--dur-base) ease;
}

/* Chev-Variante: dauerhaft neben Chevron-Toggle sichtbar (closed + open). */
.sm-section[data-open="true"] .sm-section-price-badge {
    opacity: 0;
    transform: scale(0.85);
    max-width: 0;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
    border-width: 0;
    pointer-events: none;
}

@media (max-width: 640px) {
    .sm-section {
        margin: 16px 0 14px;
    }
    .sm-section-summary {
        padding: 18px 16px 14px;
    }
    .sm-section-icon {
        width: 38px;
        height: 38px;
        font-size: var(--t-base);
    }
    .sm-section-heading {
        font-size: var(--t-base);
    }
    .sm-section-quickstats {
        margin-left: 0;
        width: 100%;
    }
    .sm-section .sm-packages-grid {
        margin: 12px 16px 18px;
    }
}

/* Hide the legacy state-holder tile from the booster grid – in JEDER Ansicht,
   auch im Edit-Mode. Sie bleibt im DOM, weil der Warenkorb ihre .active-Klasse
   liest (offer-bar.js), ist aber kein Inhalt: die echte UI ist die .sm-section
   darueber.

   Frueher blendete ein zusaetzliches `body.edit-mode ...` sie im Edit-Mode
   wieder ein, damit ein Admin ihre data-basic/classic/premium-Flags erreicht.
   Das war doppelt schaedlich: die Flags steuern nichts (die SM-Box haengt an
   `_smSections[portal].enabled`, und kundenseitig ist die Kachel ohnehin nie
   sichtbar), und die Regel war spezifischer als `.tile.profile-hidden` –
   ein im Kit geloeschtes SM-Paket kam im Edit-Mode also immer zurueck und
   liess sich fuer den Admin nicht entfernen. Auch das inline gesetzte
   display:none der 5-Sekunden-Undo-Phase verlor gegen ihr !important.
   Ohne Edit-Mode-Ausnahme ist die Kachel unerreichbar und kann damit auch
   nicht mehr versehentlich hart geloescht werden (der Standard-Pfad entfernt
   deletedTiles per el.remove() aus dem DOM – das wuerde die SM-Zeile im
   Warenkorb kappen). */
.sm-addon-toggle.sm-toggle-hidden {
    display: none !important;
}

@media (max-width: 640px) {
    .sm-section {
        padding: 18px 16px 16px;
        margin: 16px 0 14px;
    }
    .sm-section-icon {
        width: 38px;
        height: 38px;
        font-size: var(--t-base);
    }
    .sm-section-heading {
        font-size: var(--t-base);
    }
}

/* ─── SM Packages Grid ─── */
.sm-packages-grid {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--panel-bg);
    box-shadow: var(--shadow-main);
    margin-bottom: 0;
}

/* Back-bar at top of SM grid */
.sm-back-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: color-mix(in srgb, var(--accent) 4%, transparent);
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
    transition: background var(--dur-fast);
}

.sm-back-bar:hover {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.sm-back-link {
    font-size: var(--t-xs);
    font-weight: 500;
    color: var(--accent);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: gap var(--dur-fast);
}

.sm-back-bar:hover .sm-back-link {
    gap: 8px;
}

.sm-back-link i {
    font-size: var(--t-2xs);
    transition: transform var(--dur-fast);
}

.sm-back-bar:hover .sm-back-link i {
    transform: translateX(-2px);
}

.sm-section-title {
    font-size: var(--t-xs);
    font-weight: 700;
    color: var(--text);
    opacity: .7;
}

.sm-section-title i {
    margin-right: 4px;
    color: var(--accent);
}

.sm-packages-header {
    display: grid;
    grid-template-columns: 1fr 160px;
    gap: 0;
    align-items: stretch;
    border-bottom: 1px solid var(--border-light);
}

.sm-col-label {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sm-col-icons {
    display: flex;
    gap: 10px;
    font-size: var(--t-md);
    color: var(--text-muted);
    opacity: .6;
}

.sm-col-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 14px 10px;
    text-align: center;
    border-left: 1px solid var(--border-light);
}

.sm-col-title {
    font-weight: 700;
    font-size: var(--t-base);
    color: var(--text);
}

.sm-col-title i {
    color: var(--accent);
}

.sm-col-sub {
    font-size: var(--t-2xs);
    color: var(--text-muted);
    line-height: 1.35;
    margin-top: 2px;
    max-width: 120px;
}

.sm-col-header.sm-premium {
    background: color-mix(in srgb, var(--accent) 6%, transparent);
}

/* SM Row */
.sm-row {
    display: grid;
    grid-template-columns: 1fr 160px;
    gap: 0;
    border-bottom: 1px solid var(--border-light);
    transition: background var(--dur-fast) ease, color var(--dur-fast) ease, opacity var(--dur-base) ease;
    cursor: pointer;
    /* Anker fuer die Bundle-Klammer weiter unten. Bisher stand das nur im
       Edit-Mode-Block, wo es die Drag-/Loesch-Knoepfe traegt. */
    position: relative;
}

body.edit-mode .sm-row {
    cursor: default;
}

/* Row-Level-Selected: ganze Zeile bekommt sanften Accent-Tint statt
   Voll-Accent-Fill. Cell selbst behält den vollen Accent als
   Selected-Marker. Soft statt aggressiv. */
.sm-row:has(.sm-price-cell.is-selected) {
    background: color-mix(in srgb, var(--accent) 16%, var(--panel-bg, #fff));
}

.sm-row:has(.sm-price-cell.is-selected) .sm-label-icon {
    background: color-mix(in srgb, var(--accent) 26%, transparent);
    color: var(--accent);
}

/* Mega-Bundle-Spar-Badge: erscheint wenn YT+Short selected aber Mega
   nicht. JS füllt den Inhalt + togglet hidden. */
.sm-mega-savings {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
    font-size: var(--t-2xs);
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1;
    width: fit-content;
}

.sm-mega-savings[hidden] {
    display: none;
}

.sm-mega-savings i {
    font-size: var(--t-2xs);
    opacity: 0.9;
}

/* Ruhezustand des Chips: erklaert den Streichpreis daneben, wirbt aber nicht.
   Er steht dauerhaft an der Bundle-Zeile, deshalb neutrale Flaeche statt
   Akzentflaeche - und der Text mischt den Markenton bei, statt ihn pur zu
   setzen: reines var(--accent) auf Schrift faellt ueber die sieben Brands
   unter die Lesbarkeitsschwelle (Pitfall 28). Die Akzentfassung darueber
   bleibt dem einen Zustand vorbehalten, der eine Handlung verlangt. */
.sm-mega-savings.is-quiet {
    background: color-mix(in srgb, var(--text) 5%, transparent);
    border-color: color-mix(in srgb, var(--text) 13%, transparent);
    color: color-mix(in srgb, var(--accent) 40%, var(--text));
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════
   Bundle-Darstellung: Klammer, Rechnung, Enthalten-Zustand

   Eine Bundle-Zeile (.sm-row--bundle) fasst andere Zeilen derselben Liste
   (.sm-row--bundle-part) zum Paketpreis zusammen. Ohne Markierung liest
   sich die Liste als vier gleichrangige Angebote, und dass die dritte
   Zeile die beiden darueber enthaelt, sieht man ihr nicht an.
   Alle Klassen setzt _updateSmExtras() in script.js.
   ═══════════════════════════════════════════════════════════════ */

/* Die Klammer haengt an der ZEILE, nicht am Label: ab 600px loest
   `.sm-label { display: contents }` die Label-Box auf, ein Pseudo-Element
   darauf existierte dort gar nicht mehr. Absolut positioniert, damit es im
   Mobil-Grid kein Auto-Placement-Item wird (gleiche Falle wie bei
   .sm-mega-savings, siehe Kommentar im Media-Query).

   Gezeichnet wird nur bei Kontiguitaet (.sm-bundle-linked, von JS gesetzt)
   und nie im Edit-Mode: dort liegen Drag-Griff und Loeschen-Knopf genau auf
   diesen Pixeln (body.edit-mode .sm-row { padding-left: 26px }). */
body:not(.edit-mode) .sm-row.sm-bundle-linked::before {
    content: '';
    position: absolute;
    left: 4px;
    width: 8px;
    border-left: 2px solid color-mix(in srgb, var(--accent) 62%, transparent);
    pointer-events: none;
    transition: border-color var(--dur-base) ease;
}

/* Oberer Bogen: setzt auf halber Hoehe der ersten Zutat an, damit die Linie
   aus der Zeile herauszuwachsen scheint statt oben abgeschnitten zu wirken. */
body:not(.edit-mode) .sm-row.sm-bundle-linked[data-sm-bracket="start"]::before {
    top: 50%;
    bottom: -1px;
    border-top: 2px solid color-mix(in srgb, var(--accent) 62%, transparent);
    border-top-left-radius: 8px;
}

body:not(.edit-mode) .sm-row.sm-bundle-linked[data-sm-bracket="mid"]::before {
    top: -1px;
    bottom: -1px;
}

/* Unterer Bogen: laeuft auf halber Hoehe in die Bundle-Zeile hinein. */
body:not(.edit-mode) .sm-row.sm-bundle-linked[data-sm-bracket="end"]::before {
    top: -1px;
    height: 50%;
    border-bottom: 2px solid color-mix(in srgb, var(--accent) 62%, transparent);
    border-bottom-left-radius: 8px;
}

/* Abzweig fuer jede Zutat ZWISCHEN Anfang und Ende.
   Erste Fassung hatte nur die zwei Boegen an den Enden: die Linie lief an
   allen Zeilen dazwischen bloss VORBEI, ohne sie anzubinden. Bei genau zwei
   Zutaten heisst das, dass nur die obere einen sichtbaren Anschluss hatte -
   gelesen wurde "im Bundle ist YouTube drin", die Zeile darunter wirkte
   unbeteiligt (vom Nutzer so gemeldet, 06.08.2026).
   Eine Linie, die an etwas vorbeilaeuft, verbindet es nicht. Jede beteiligte
   Zeile braucht ihren eigenen Anschluss ans Geruest. */
body:not(.edit-mode) .sm-row.sm-bundle-linked[data-sm-bracket="mid"]::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 50%;
    width: 8px;
    margin-top: -1px;
    border-top: 2px solid color-mix(in srgb, var(--accent) 62%, transparent);
    pointer-events: none;
    transition: border-color var(--dur-base) ease;
}

/* Gemeinsame Flaeche unter der Gruppe. Die Klammer allein zeigt die
   Verbindung, aber erst eine durchgehende Tonung laesst die drei Zeilen als
   EINEN Block lesen statt als drei Nachbarn mit einer Linie daneben.
   Bewusst sehr zart: sie muss unter dem Hover-Tint (6%) und weit unter dem
   Selected-Tint (16%) bleiben, sonst verliert die Auswahl ihr Signal.
   Gewaehlte Zeilen sind ausgenommen, sonst ueberschreibt diese Regel den
   Selected-Tint - beide Selektoren haben dieselbe Spezifitaet und diese hier
   steht spaeter im Stylesheet. */
body:not(.edit-mode) .sm-row.sm-bundle-linked:not(:has(.sm-price-cell.is-selected)) {
    background: color-mix(in srgb, var(--accent) 4%, transparent);
}

/* Innerhalb der Gruppe treten die Trennlinien zurueck, nach aussen bleiben
   sie stehen - so bekommt der Block eine erkennbare Ober- und Unterkante. */
body:not(.edit-mode) .sm-row.sm-bundle-linked:not([data-sm-bracket="end"]) {
    border-bottom-color: color-mix(in srgb, var(--accent) 14%, transparent);
}

/* Hover-Kopplung: die Maus auf dem Bundle laesst seine Zutaten aufleuchten
   und umgekehrt. CSS kann nicht rueckwaerts auf vorherige Geschwister
   zeigen - deshalb :has() am Container und von dort per Klasse nach unten.
   Bereits gewaehlte Zeilen bleiben ausgenommen, sonst ueberschriebe der
   Hover-Tint ihren staerkeren Selected-Tint. */
.sm-packages-grid:has(.sm-row--bundle:hover) .sm-row--bundle-part:not(:has(.sm-price-cell.is-selected)),
.sm-packages-grid:has(.sm-row--bundle-part:hover) .sm-row--bundle:not(:has(.sm-price-cell.is-selected)) {
    background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.sm-packages-grid:has(.sm-row--bundle:hover) .sm-row.sm-bundle-linked::before,
.sm-packages-grid:has(.sm-row--bundle-part:hover) .sm-row.sm-bundle-linked::before,
.sm-packages-grid:has(.sm-row--bundle:hover) .sm-row.sm-bundle-linked::after,
.sm-packages-grid:has(.sm-row--bundle-part:hover) .sm-row.sm-bundle-linked::after {
    border-color: color-mix(in srgb, var(--accent) 70%, transparent);
}

/* ── Streichpreis im Preisfeld ──────────────────────────────────
   Eigene Zeile ueber dem Preis statt daneben: die Preisspalte ist 160px
   breit und `white-space: nowrap`, zwei Betraege nebeneinander plus
   Plus-Knopf sprengen sie seitlich (Pitfall 9). Das Element ist ein
   Geschwister von .sm-price-cell-label, nicht sein Kind - das Label ist
   contenteditable und wird von applyDiscount() per innerHTML komplett
   ersetzt. */
.sm-price-cell-strike[hidden] {
    display: none;
}

.sm-price-cell.has-bundle-strike {
    flex-wrap: wrap;
    row-gap: 1px;
    /* Ohne das verteilt der Flexbox-Default (align-content: stretch) die zwei
       Zeilen ueber die volle Zellhoehe - der Streichpreis klebte oben an der
       Zellkante und las sich als eigenes Element statt als Anker des Preises
       darunter. Faellt nur auf, wenn die Zeile hoch ist (Bundle-Zeile mit
       Chip), also genau dort, wo dieser Streichpreis vorkommt. */
    align-content: center;
}

.sm-price-cell.has-bundle-strike .sm-price-cell-strike:not([hidden]) {
    display: block;
    order: -1;
    flex-basis: 100%;
    text-align: center;
    font-size: var(--t-2xs);
    font-weight: 600;
    letter-spacing: 0;
    color: var(--text-muted);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

/* Auf der gefuellten Zelle liegt der Streichpreis auf der Markenfarbe. Mit 0.72
   verschwand er dort fast - eine durchgestrichene Zahl ist ohnehin schwerer zu
   lesen und braucht auf farbigem Grund mehr Deckung als auf weiss. */
.sm-price-cell.is-selected .sm-price-cell-strike {
    color: rgba(255, 255, 255, 0.88);
}

/* Im Edit-Mode weg: dort sitzt der Loeschen-Knopf der Zeile (top/right 8px)
   genau ueber diesen Pixeln, und der Admin bearbeitet hier ohnehin den
   echten Zeilenpreis, nicht die Bundle-Rechnung. */
body.edit-mode .sm-price-cell.has-bundle-strike .sm-price-cell-strike {
    display: none;
}

/* ── Bestandteil eines gewaehlten Bundles ───────────────────────
   Gedaempft, weil bereits bezahlt - nicht "gesperrt". Der Klick ist in
   _toggleSmPackage() abgefangen und erklaert sich per Toast, der Text in
   der Zeile nennt den Grund. Optik, Begruendung und Klick-Guard muessen
   zusammen auftreten, sonst ist der Zustand stumm (Pitfall 40). */
.sm-row--absorbed {
    opacity: 0.62;
}

.sm-row--absorbed .sm-price-cell {
    cursor: default;
}

.sm-row--absorbed .sm-price-cell:hover {
    background: transparent;
}

/* Der Plus-Knopf darf nicht mehr zum Zufuegen einladen. */
.sm-row--absorbed .sm-price-cell-add,
.sm-row--absorbed .sm-price-cell:hover .sm-price-cell-add {
    background: color-mix(in srgb, var(--text) 8%, transparent);
    border-color: color-mix(in srgb, var(--text) 16%, transparent);
    color: var(--text-muted);
    opacity: 0.6;
}

.sm-row-included {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: var(--t-2xs);
    font-weight: 600;
    line-height: 1;
    color: var(--text-muted);
    width: fit-content;
}

.sm-row-included[hidden] {
    display: none;
}

.sm-row-included i {
    font-size: var(--t-2xs);
    opacity: 0.8;
}

/* SM-Row-Video-Badge: zeigt, dass die Zeile eine YouTube-Vorschau hat (Hover
   fuellt .portal-mockup-container, siehe script.js _handleSmRowHoverIn).
   Dezenter Pulse zieht den Blick an, ohne die Preis-/Text-Hierarchie der
   Zeile zu stoeren - deshalb inline im Fliesstext statt als eigene Zeile. */
.sm-row-video-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-top: 6px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 85%, black 15%);
    color: #fff;
    font-size: 9px;
    cursor: pointer;
    animation: smVideoBadgePulse 2.4s ease-in-out infinite;
    transition: transform var(--dur-fast) ease;
}

.sm-row-video-badge:hover {
    transform: scale(1.15);
}

.sm-row-video-badge:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.sm-row-video-badge i {
    margin-left: 1px; /* Play-Dreieck wirkt ungedreht optisch nicht zentriert */
}

/* Angeheftet (script.js _setSmVideoRowLocked): Icon wechselt auf Pin, Puls
   weicht einem ruhigen, staerkeren Ring - "angeheftet" ist ein bestaetigter
   Zustand, kein "schau her" mehr. Play-Dreieck-Versatz gilt fuer den Pin
   nicht, deshalb margin-left hier zurueckgesetzt. */
.sm-row.sm-video-locked .sm-row-video-badge {
    animation: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
}

.sm-row.sm-video-locked .sm-row-video-badge i {
    margin-left: 0;
}

@keyframes smVideoBadgePulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 62%, transparent); }
    50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 0%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
    .sm-row-video-badge {
        animation: none;
    }
}

/* Subtotal-Footer der SM-Section: erscheint wenn mindestens ein
   Paket selected. JS aktualisiert den Wert + togglet hidden. */
.sm-section-subtotal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: color-mix(in srgb, var(--accent) 6%, var(--panel-bg, #fff));
    border-top: 1px solid var(--border-light);
    font-size: var(--t-sm);
}

.sm-section-subtotal[hidden] {
    display: none;
}

.sm-section-subtotal-label {
    font-weight: 600;
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--t-2xs);
}

.sm-section-subtotal-value {
    font-weight: 800;
    font-size: var(--t-base);
    color: var(--accent);
}

.sm-row:last-child {
    border-bottom: none;
}

.sm-row:hover {
    background: rgba(255, 255, 255, .02);
}

/* ── SM-Booster Edit-Mode: Zeilen hinzufuegen/loeschen/sortieren/Icon aendern ── */
body.edit-mode .sm-row {
    position: relative;
    padding-left: 26px;
}

.sm-row-drag {
    display: none;
}

body.edit-mode .sm-row-drag {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 4px;
    top: 0;
    bottom: 0;
    width: 20px;
    color: var(--text-muted);
    cursor: grab;
    font-size: var(--t-xs);
}

.sm-row-remove-btn {
    display: none;
}

body.edit-mode .sm-row-remove-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ef5350;
    border: 2px solid var(--bg, #0a0c14);
    color: #fff;
    font-size: var(--t-2xs);
    cursor: pointer;
    z-index: 5;
}

body.edit-mode .sm-row-remove-btn:hover {
    transform: scale(1.15);
}

/* YouTube-Video-Button: links neben dem Loeschen-Kreuz, gleiche Kreisform.
   Neutral solange kein Video hinterlegt ist, wechselt mit .has-video auf den
   Marken-Rotton der Plattform - eindeutiges Feedback ohne Text. */
.sm-row-video-btn {
    display: none;
}

body.edit-mode .sm-row-video-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 8px;
    right: 34px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--panel-bg, #1a1d29);
    border: 2px solid var(--bg, #0a0c14);
    color: var(--text-muted);
    font-size: var(--t-2xs);
    cursor: pointer;
    z-index: 5;
    transition: transform var(--dur-fast) ease, background var(--dur-fast) ease, color var(--dur-fast) ease;
}

body.edit-mode .sm-row-video-btn:hover {
    transform: scale(1.15);
}

body.edit-mode .sm-row-video-btn.has-video {
    background: #ff0033;
    color: #fff;
}

.sm-row-add-btn {
    display: none;
}

body.edit-mode .sm-row-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 12px;
    margin-top: 4px;
    border: 2px dashed var(--border-light);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-muted);
    font-size: var(--t-sm);
    font-weight: 500;
    cursor: pointer;
}

body.edit-mode .sm-row-add-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 5%, transparent);
}

body.edit-mode .sm-label-icon.sm-icon-pickable {
    cursor: pointer;
}

body.edit-mode .sm-label-icon.sm-icon-pickable:hover {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Geteiltes Icon-Picker-Popover (Zeilen + Chips) - an document.body gehaengt,
   siehe tour.js _openSmIconPicker(). Nutzt die vorhandenen .te-icon-btn-Kacheln
   aus dem Kachel-Editor fuer ein identisches Erscheinungsbild. */
.sm-icon-picker {
    position: absolute;
    z-index: 9999;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
    padding: 8px;
    background: var(--panel-bg, #1a1d29);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}

/* YouTube-URL-Popover: gleiches Anhang-Muster wie .sm-icon-picker (an
   document.body gehaengt, siehe tour.js _openSmVideoUrlEditor()). */
.sm-video-url-popover {
    position: absolute;
    z-index: 9999;
    width: 260px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    background: var(--panel-bg, #1a1d29);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}

.sm-video-url-popover label {
    font-size: var(--t-2xs);
    font-weight: 600;
    color: var(--text-muted);
}

.sm-video-url-popover input {
    width: 100%;
    padding: 7px 9px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
    background: var(--surface-hover, transparent);
    color: var(--text);
    font-size: var(--t-xs);
}

.sm-video-url-popover input:focus {
    outline: none;
    border-color: var(--accent);
}

.sm-video-url-popover-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}

.sm-video-url-popover-actions button {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: var(--t-xs);
    color: #fff;
    transition: transform var(--dur-fast) ease;
}

.sm-video-url-popover-actions button:hover {
    transform: scale(1.1);
}

.sm-video-url-remove {
    background: #ef5350;
}

.sm-video-url-save {
    background: color-mix(in srgb, var(--accent) 85%, black 15%);
}

/* SM Label cell */
.sm-label {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
}

.sm-label-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: var(--t-base);
    color: var(--accent);
}

.sm-label strong {
    display: block;
    font-size: var(--t-sm);
    font-weight: 700;
    color: var(--text);
}

.sm-label-sub {
    display: block;
    font-size: var(--t-xs);
    color: var(--text-muted);
    line-height: 1.35;
    margin-top: 1px;
}

.sm-label-details {
    display: block;
    font-size: var(--t-2xs);
    color: var(--text-muted);
    margin-top: 3px;
}

/* SM Price cell */
.sm-price {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px 10px;
    font-weight: 700;
    font-size: var(--t-sm);
    color: var(--text);
    border-left: 1px solid var(--border-light);
    white-space: nowrap;
}

.sm-price-premium {
    background: color-mix(in srgb, var(--accent) 6%, transparent);
    color: var(--accent);
}

/* Responsive: echtes Stack-Layout auf Mobil.
   Problem: 2-Spalten-Grid (1fr | Preis) laesst dem Text nur ~160px ->
   Titel + Beschreibung zerbrechen in viele Umbrueche.
   Fix: .sm-label + inneres text-div via display:contents aufloesen, damit
   Name/Sub/Details direkte Grid-Items der .sm-row werden. Sub/Details
   spannen dann ueber die volle Breite (nur Icon-Spalte ausgenommen), der
   Preis sitzt als kompakte Pill oben rechts. */
@media (max-width: 600px) {
    .sm-row {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "icon name   price"
            "icon sub    sub"
            "icon detail detail";
        align-items: center;
        column-gap: 12px;
        row-gap: 2px;
        padding: 12px 14px;
    }

    .sm-label {
        display: contents;
    }

    .sm-label > div {
        display: contents;
    }

    .sm-label-icon {
        grid-area: icon;
        align-self: start;
    }

    .sm-label strong {
        grid-area: name;
        align-self: center;
    }

    .sm-label-sub {
        grid-area: sub;
        margin-top: 2px;
        line-height: 1.35;
    }

    .sm-label-details {
        grid-area: detail;
        margin-top: 2px;
    }

    .sm-mega-savings {
        grid-column: 2 / -1;
        margin-top: 6px;
    }

    /* Kein eigener grid-area-Name (wie .sm-label-details) - .sm-mega-savings
       zeigt das Muster fuer "eigene, zusaetzliche Zeile ueber grid-column":
       ein Kind ohne grid-area landet sonst per Auto-Placement irgendwo im
       benannten Grid und kollidiert mit .sm-label-details' Zelle. */
    .sm-row-video-badge {
        grid-column: 2 / -1;
        margin-top: 6px;
    }

    /* Gleiche Regel, gleicher Grund wie darueber. */
    .sm-row-included {
        grid-column: 2 / -1;
        margin-top: 6px;
    }

    /* Der Streichpreis faellt auf Mobil weg: der Preis ist hier eine kompakte
       Pill, eine zweite Zeile darin sprengt ihre Form. Die Rechnung geht nicht
       verloren - der Chip in der Zeile nennt Einzelsumme UND Ersparnis
       vollstaendig. */
    .sm-price-cell.has-bundle-strike {
        flex-wrap: nowrap;
    }

    .sm-price-cell.has-bundle-strike .sm-price-cell-strike:not([hidden]) {
        display: none;
    }

    /* Preis als kompakte Pill oben rechts, kein Spalten-Divider mehr. */
    .sm-price.sm-price-cell {
        grid-area: price;
        flex-direction: row;
        align-items: center;
        gap: 6px;
        padding: 7px 12px;
        border-left: none;
        border-radius: 999px;
        align-self: center;
        white-space: nowrap;
        font-size: var(--t-xs);
    }
}

.package-layer {
    position: relative;
    transition: opacity var(--dur-base) ease, padding var(--dur-base) ease, border-radius var(--dur-base) ease, border-color var(--dur-base) ease, margin var(--dur-base) ease, box-shadow var(--dur-base) ease, background var(--dur-base) ease;
    overflow: visible;
    /* Allow tooltips to escape */
    border-radius: var(--radius-md);
    /* Premium-Lift (Pfad A): Brand-Border + soft Brand-Glow + warmer
       BG-Tint. Vertikales tier-stripe-label::before bleibt signature. */
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border-light, var(--border)));
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent) 5%, var(--panel-bg, transparent)),
        var(--panel-bg, transparent) 75%);
    box-shadow: var(--shadow-1);
    z-index: 0;
}

.package-layer:hover {
    z-index: 10;
}

/* Round the left-side accent stripe to match the card corners */
.package-layer::before {
    border-top-left-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
}

.package-layer>.layer-title::before {
    border-top-left-radius: var(--radius-md);
}

/* ── Locked state: grayed out with golden lock badge ── */
.package-layer.locked-layer {
    pointer-events: none;
    /* Override the Pfad-A Premium-Lift so locked layers stay visually
       muted (no brand-glow, neutral border + BG). */
    background: var(--panel-bg, transparent);
    border-color: var(--border-light, var(--border));
    box-shadow: none;
}

/* Gray out the layer title bar – aber Tier-Stripe-Label muss lesbar
   bleiben. Vorher: ::before opacity 0.5 + weiße Schrift = unsichtbar
   auf hellem Grau. */
.package-layer.locked-layer::before {
    background: color-mix(in srgb, var(--text-muted) 55%, var(--border)) !important;
    opacity: 0.85;
}

.package-layer.locked-layer>.layer-title {
    color: var(--text-secondary, #888) !important;
    font-weight: 700;
    opacity: 0.5;
}

[data-theme="dark"] .package-layer.locked-layer>.layer-title {
    color: var(--text-secondary, #bbb) !important;
}

/* Vertical Tier-Stripe-Label im locked-State: weiße Schrift bleibt,
   aber Hintergrund (::before) ist jetzt dunkleres Grau (statt
   border-light×0.5) → wieder lesbar mit Text-Shadow als Anchor. */
.package-layer.locked-layer .tier-stripe-label {
    color: rgba(255, 255, 255, 0.96) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
    opacity: 1 !important;
}

/* Override .tile.disabled opacity in locked layers – keep tile at full opacity
   so the ::after lock badge is not dimmed. Dim children individually instead. */
.package-layer.locked-layer .layer-tiles .tile,
.package-layer.locked-layer .layer-tiles .tile.disabled {
    position: relative;
    opacity: 1 !important;
    background: color-mix(in srgb, var(--surface) 35%, transparent);
    border-color: color-mix(in srgb, var(--border) 30%, transparent);
}

[data-theme="dark"] .package-layer.locked-layer .layer-tiles .tile,
[data-theme="dark"] .package-layer.locked-layer .layer-tiles .tile.disabled {
    background: color-mix(in srgb, var(--surface) 20%, transparent);
    border-color: color-mix(in srgb, var(--border) 20%, transparent);
}

/* Dim each tile child individually, NOT the tile itself */
.package-layer.locked-layer .layer-tiles .tile .tile-icon {
    filter: grayscale(1);
    opacity: 0.25;
}

.package-layer.locked-layer .layer-tiles .tile h4 {
    opacity: 0.3;
}

.package-layer.locked-layer .layer-tiles .tile .tile-detail {
    opacity: 0.25;
}

/* Golden lock badge – full opacity, unaffected by graying */
.package-layer.locked-layer .layer-tiles .tile::after {
    content: '\f023';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 4px;
    right: 5px;
    font-size: var(--t-2xs);
    color: #c8942a;
    opacity: 1;
}

/* ── Active state: included items with checkmark ── */
.package-layer.active-layer {
    filter: none;
    opacity: 1;
}

.package-layer.active-layer .tile {
    position: relative;
}

.package-layer.active-layer .tile::after {
    content: '\f00c';
    /* fa-check */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 4px;
    right: 5px;
    font-size: 0.5rem;
    color: #4caf50;
    opacity: 0.85;
}

/* ── Feature #4: Hover tooltip on locked tiles ── */
.package-layer.locked-layer .layer-tiles .tile {
    cursor: pointer;
    pointer-events: auto;
}

.locked-tier-hint {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: rgba(40, 40, 40, 0.92);
    color: #fff;
    font-size: var(--t-2xs);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--dur-fast) ease, transform var(--dur-fast) ease;
    z-index: 20;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.locked-tier-hint::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: rgba(40, 40, 40, 0.92);
}

.package-layer.locked-layer .layer-tiles .tile:hover .locked-tier-hint {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Left color stripe per tier – wider to hold star ratings */
.package-layer::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 29px;
}

.layer-title {
    font-size: var(--t-2xs);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 6px;
    margin-left: 28px;
    margin-right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 2px 8px 2px 6px;
    border-radius: var(--radius-xl);
    color: #fff;
    font-family: var(--font-heading);
    text-align: center;
    max-height: 40px;
    transition: all var(--dur-base) var(--ease-out);
}

.layer-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 6px;
    padding: 0 8px 8px 34px;
}

.layer-tiles .tile {
    padding: 6px 4px 4px;
    border-radius: var(--radius-sm);
    text-align: center;
}

.layer-tiles .tile h4 {
    font-size: var(--t-2xs);
    margin-bottom: 0px;
    font-weight: 500;
}

.layer-tiles .tile-detail {
    font-size: var(--t-2xs);
    opacity: 1;
    font-weight: 500;
}

.layer-tiles .tile-icon {
    width: 26px;
    height: 26px;
    font-size: var(--t-sm);
    margin: 0 auto 3px;
}

/* ── Layer L (outermost / largest = Premium) ── */
.layer-l {
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    padding-top: 6px;
}

.layer-l::before {
    background: var(--accent);
}

.layer-l>.layer-title {
    background: color-mix(in srgb, var(--accent) 35%, transparent);
    color: var(--text);
}

/* ── Layer M (Performance) ── */
.layer-m {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    padding-top: 6px;
}

.layer-m::before {
    background: color-mix(in srgb, var(--accent) 75%, transparent);
}

.layer-m>.layer-title {
    background: color-mix(in srgb, var(--accent) 25%, transparent);
    color: var(--text);
}

/* ── Layer S (Essentials – visually on TOP due to column-reverse) ── */
.layer-s {
    background: color-mix(in srgb, var(--accent) 6%, transparent);
    padding-top: 6px;
}

.layer-s::before {
    background: color-mix(in srgb, var(--accent) 65%, transparent);
}

.layer-s>.layer-title {
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--text);
}

/* ── Tier name labels – per-layer ::after for separate boxes ── */
.package-layer::after {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-lr;
    text-orientation: mixed;
    font-size: 0.48rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
    z-index: 1;
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.layer-s::after {
    content: 'Essentials';
}

.layer-m::after {
    content: 'Performance';
}

.layer-l::after {
    content: 'Premium';
}

/* Hide per-layer ::after when merged – JS label takes over */
[data-tier="classic"] .layer-s::after,
[data-tier="classic"] .layer-m::after {
    display: none !important;
}

[data-tier="premium"] .layer-s::after,
[data-tier="premium"] .layer-m::after,
[data-tier="premium"] .layer-l::after {
    display: none !important;
}

/* JS-created label spanning the full merged box */
.tier-stripe-label {
    position: absolute;
    left: 0;
    width: 29px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    font-size: var(--t-2xs);
    /* Base fallback */
    font-weight: 700;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
    z-index: 20;
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    opacity: 0;
    animation: fadeInStripe 0.3s ease-out forwards 0.4s;
}

/* Stern und Schrift laufen als EIN horizontaler Text-Run, den dieser Wrapper
   als Ganzes in die Vertikale dreht.
   Vorher stand das Label in writing-mode: vertical-lr. Dort waren Stern
   (FontAwesome) und Buchstaben (Body-Font) getrennte Text-Runs mit
   unterschiedlichen Font-Metriken; ihre Boxen landeten auf gebrochenen
   Pixelkanten (27,25px vs 23,78px) und rasterten unabhaengig voneinander.
   Je nach Zoomstufe und x-Position des Layouts sass der Stern dadurch bis zu
   1px neben der Achse der Schrift (bei 133% Skalierung in 6 von 8 Faellen
   0,83px links). Auf einer gemeinsamen Baseline kann das nicht mehr passieren:
   gemessen ueber 6 Skalierungen x 4 Sub-Pixel-Positionen bleibt der Versatz
   konstant unter 0,2px. */
.tier-stripe-label .stripe-inner {
    transform: rotate(90deg);
    white-space: nowrap;
    letter-spacing: 1.5px;
    line-height: 1;
}

/* Der Wrapper dreht den Stern gegen die Rotation von .stripe-inner zurueck,
   damit die Spitze nach oben zeigt. Die Rotation muss hier sitzen und nicht am
   <i>: dessen transform gehoert der sparkleIn-Animation, die es sonst
   ueberschreibt.
   translateY hebt den Stern von der Baseline auf die Mitte der Versalhoehe
   (nach der Drehung ist das die horizontale Achse der Schrift). Bewusst per
   transform und nicht per vertical-align: vertical-align wird auf ganze
   Geraetepixel gerundet und driftet dadurch mit der Zoomstufe, transform nicht.
   Der Wert ist per Rendering-Messung kalibriert. Ein Rest bleibt: die Versalhoehe
   der Schrift wird je Zoomstufe unterschiedlich gehintet, die Bezugsachse wandert
   also selbst leicht (gemessen bis 0,8px bei 100%, 0,04px bei 133%). Dieser Rest
   ist jetzt aber KONSTANT, statt wie vorher je nach Zoom UND x-Position im Layout
   um bis zu 1px zu springen. */
.tier-stripe-label.premium-stripe .stripe-inner > .stripe-star {
    display: inline-block;
    transform: translateY(-0.1228em) rotate(-90deg);
    line-height: 1;
    margin-right: 6px;
}

@keyframes fadeInStripe {
    to {
        opacity: 1;
    }
}

.tier-stripe-label.basic-stripe {
    font-size: var(--t-2xs);
    color: #ffffff;
    opacity: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.tier-stripe-label.classic-stripe {
    font-size: calc(0.65rem + 1.5px);
}

.tier-stripe-label.premium-stripe {
    font-size: calc(0.65rem + 3px);
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    /* No container-level animation – each letter animates individually */
    animation: none;
    opacity: 1;
}

/* Each letter of PREMIUM sparkles individually */
.sparkle-letter {
    display: inline-block;
    opacity: 0;
    animation: sparkleIn 0.5s var(--ease-out) forwards;
    /* animation-delay is set per-letter in JS */
}

@keyframes sparkleIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
        text-shadow:
            0 0 12px rgba(255, 255, 255, 1),
            0 0 24px rgba(255, 255, 255, 0.8),
            0 0 40px rgba(255, 200, 50, 0.6);
        filter: brightness(2);
    }

    40% {
        opacity: 1;
        transform: scale(1.25);
        text-shadow:
            0 0 10px rgba(255, 255, 255, 0.9),
            0 0 20px rgba(255, 200, 50, 0.4);
        filter: brightness(1.5);
    }

    70% {
        transform: scale(0.95);
        text-shadow:
            0 0 6px rgba(255, 255, 255, 0.4);
        filter: brightness(1.1);
    }

    100% {
        opacity: 1;
        transform: scale(1);
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        filter: brightness(1);
    }
}

/* Hide horizontal title – stripe label is now the name */
.layer-title {
    display: none !important;
}

/* ── Feature #7: "+" connector between active layers ── */
.tier-plus-connector {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: -6px 0;
    position: relative;
    z-index: 2;
    max-height: 40px;
    transition: all var(--dur-base) var(--ease-out);
}

.tier-plus-connector i {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 15%, var(--panel-bg));
    border: 2px solid color-mix(in srgb, var(--accent) 30%, transparent);
    color: var(--accent);
    font-size: var(--t-2xs);
    font-weight: 900;
}

/* ── Tier Switch Effects ── */

/* 1. Shadow lift on the whole grid during upgrade */
@keyframes mergeLift {
    0% {
        box-shadow: var(--shadow-main);
        transform: scale(1);
    }

    35% {
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent);
        transform: scale(1.007);
    }

    100% {
        box-shadow: var(--shadow-main);
        transform: scale(1);
    }
}

.tier-upgrade .layered-cake-grid {
    animation: mergeLift 0.7s var(--ease-out);
}

/* 2. Glow seam at merge point – horizontal light sweep */
@keyframes seamGlow {
    0% {
        opacity: 0;
        width: 0;
        left: 0;
    }

    20% {
        opacity: 1;
        width: 30%;
    }

    60% {
        opacity: 0.8;
        width: 80%;
    }

    100% {
        opacity: 0;
        width: 100%;
        left: 0;
    }
}

/* Glow seam – now a JS-generated element */
.seam-glow {
    position: absolute;
    top: -1px;
    left: 0;
    height: 2px;
    width: 0;
    background: linear-gradient(90deg, transparent, var(--accent), color-mix(in srgb, var(--accent) 60%, #fff), var(--accent), transparent);
    z-index: 10;
    animation: seamGlow 0.6s 0.1s ease-out forwards;
    pointer-events: none;
    border-radius: var(--radius-sm);
    filter: blur(0.5px);
    box-shadow: 0 0 8px 2px color-mix(in srgb, var(--accent) 40%, transparent);
}

/* 3. Tiles stagger reveal – spring pop-in */
@keyframes tilePopIn {
    0% {
        opacity: 0;
        transform: translateY(12px) scale(0.92);
    }

    50% {
        opacity: 1;
        transform: translateY(-3px) scale(1.02);
    }

    75% {
        transform: translateY(1px) scale(0.995);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.layer-just-unlocked .tile {
    animation: tilePopIn 0.45s var(--ease-out) both;
}

.layer-just-unlocked .tile:nth-child(1) {
    animation-delay: 0.08s;
}

.layer-just-unlocked .tile:nth-child(2) {
    animation-delay: 0.14s;
}

.layer-just-unlocked .tile:nth-child(3) {
    animation-delay: 0.20s;
}

.layer-just-unlocked .tile:nth-child(4) {
    animation-delay: 0.26s;
}

.layer-just-unlocked .tile:nth-child(5) {
    animation-delay: 0.32s;
}

.layer-just-unlocked .tile:nth-child(6) {
    animation-delay: 0.38s;
}

/* Keep original upgrade glow (subtler, complementary) */
@keyframes upgradeGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
    }

    30% {
        box-shadow: 0 0 20px 4px color-mix(in srgb, var(--accent) 25%, transparent);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
    }
}

@keyframes downgradeDim {
    0% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(0.92);
    }

    100% {
        filter: brightness(1);
    }
}

.layer-just-unlocked {
    animation: upgradeGlow 0.8s ease-out;
}

.tier-downgrade .layered-cake-grid {
    animation: downgradeDim 0.7s ease-out;
}

/* Sparkles for upgrading (base shared properties) */

.sparkle-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
    pointer-events: none;
    z-index: 10;
    box-shadow: 0 0 4px #fff;
    animation: flyOut 1s ease-out forwards;
}

@keyframes flyOut {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translate(var(--tx), var(--ty)) scale(0);
        opacity: 0;
    }
}

.firework-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 10;
    animation: firework-explode 1s ease-out forwards;
    box-shadow: var(--shadow-2);
    background: currentColor;
}

@keyframes firework-explode {
    0% {
        transform: translate(0, 0) scale(1.5);
        opacity: 1;
    }

    100% {
        transform: translate(var(--tx), var(--ty)) scale(0);
        opacity: 0;
    }
}

/* addon grid compact overrides */
.addon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 6px;
}

.addon-grid .tile {
    padding: 8px 6px;
    border-radius: var(--radius-sm);
    transition: border-color var(--dur-base) ease, background var(--dur-base) ease, box-shadow var(--dur-base) ease, transform var(--dur-base) ease;
}

/* Freeze addon tiles during tier transitions */
.tier-upgrade .addon-grid .tile,
.tier-downgrade .addon-grid .tile {
    transition: none !important;
    animation: none !important;
}

/* Isolate upsell section from layered-cake-grid reflow */
.upsell-separator {
    contain: layout style;
}

/* NOTE: addon-grid must NOT use contain – it clips tile-tooltip overflow */

/* Booster dedup: hide addon tiles already included in the active tier */
.addon-grid .tile {
    transition: opacity var(--dur-base) ease-in-out, transform var(--dur-fast) ease-in;
}

.addon-grid .tile.booster-included {
    display: none !important;
}

.addon-grid .tile h4 {
    font-size: var(--t-xs);
    margin-bottom: 2px;
}

.addon-grid .tile-detail {
    font-size: var(--t-2xs);
}

.addon-grid .tile-icon {
    width: 24px;
    height: 24px;
    font-size: var(--t-xs);
    margin-bottom: 2px;
}

/* ─── UPSELL BOOSTERS ─── */
.upsell-separator {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 12px 0 8px;
    gap: 12px;
}

.upsell-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent);
}

.upsell-separator h3 {
    font-family: var(--font-heading);
    font-size: var(--t-xs);
    font-weight: 500;
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: 0.5px;
    opacity: 0.7;
}

/* ── "Instagram Live" Floating Hearts Effect ── */
.live-particle {
    position: absolute;
    bottom: -10px;
    font-size: var(--t-md);
    pointer-events: none;
    z-index: 10;
    animation: floatUp var(--ease-out) forwards;
}

@keyframes floatUp {
    0% {
        transform: translateY(0) scale(calc(var(--s, 1) * 0.5));
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    50% {
        transform: translateY(-160px) scale(calc(var(--s, 1) * 1)) rotate(-15deg);
    }

    100% {
        transform: translateY(-350px) scale(calc(var(--s, 1) * 0.8)) rotate(15deg);
        opacity: 0;
    }
}

/* Premium-Panel-Tint bei mytopdeals. Der frueher hier laufende "Living Cake"-
   Shimmer (cakeShimmer, background-position endlos) ist entfernt: eine
   Dauerbewegung, die keine Information traegt, dafuer permanent repaintet, und
   das auch noch als Einzelfall bei genau einem von sieben Portalen. Der
   Verlauf bleibt als ruhige Hervorhebung. */
.portal#mytopdeals[data-tier="premium"] .layer-l {
    background: linear-gradient(110deg, color-mix(in srgb, var(--accent) 6%, transparent) 0%, color-mix(in srgb, var(--accent) 18%, transparent) 50%, color-mix(in srgb, var(--accent) 6%, transparent) 100%);
}

/* ── Global Tier Selector & Button Styles ── */
.tier-selector {
    flex-wrap: nowrap;
    gap: 6px;
}

.tier-btn {
    padding: 8px 10px;
    font-size: var(--t-xs);
}

/* ── All portals now use consistent stacked tier-buttons (see global .tier-selector above) ── */

@keyframes cakeShimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* Tile icon */
.tile-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--t-base);
    margin: 0 auto 10px;
    transition: transform var(--dur-base) var(--ease-out), background-color var(--dur-fast) linear, color var(--dur-fast) linear;
}

.tile.disabled .tile-icon {
    background: rgba(0, 0, 0, 0.03);
    color: #999;
}

[data-theme="dark"] .tile.disabled .tile-icon {
    background: rgba(255, 255, 255, 0.05);
    color: #888;
}

[data-theme="dark"] .tile.disabled h4 {
    color: var(--text-secondary, #999);
}

/* ─── TILE MICRO-ANIMATIONS ─── */
@keyframes anim-bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-16px) scale(1.05);
    }
}

@keyframes anim-wiggle {

    0%,
    100% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(-24deg) scale(1.2);
    }

    50% {
        transform: rotate(24deg) scale(1.2);
    }

    75% {
        transform: rotate(-16deg) scale(1.2);
    }
}


/* Tile text */
.tile h4 {
    font-family: var(--font-heading);
    font-size: var(--t-xs);
    font-weight: 500;
    color: var(--text);
    margin-bottom: 3px;
    line-height: 1.3;
}

.tile.disabled h4 {
    color: var(--text-muted);
}

.tile-detail {
    font-size: var(--t-2xs);
    color: var(--text-muted);
    line-height: 1.3;
}

/* ─── TILE TOOLTIP ─── */
.tile-tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: var(--tooltip-offset, 50%);
    transform: translateX(var(--tooltip-tx, -50%)) translateY(6px);
    width: 340px;
    background: var(--tooltip-bg);
    border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-md);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, .12),
        0 2px 8px rgba(0, 0, 0, .06),
        0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent);
    padding: 16px 16px 14px;
    z-index: 1100;
    /* above sticky nav (z-index: 1000) */
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-base) ease-in, transform var(--dur-base) ease-in;
    text-align: left;
}

/* Arrow */
.tile-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: var(--tooltip-arrow, 50%);
    transform: translateX(-50%);
    border: 7px solid transparent;
    border-top-color: var(--tooltip-bg);
}

.tile-tooltip::before {
    content: '';
    position: absolute;
    top: 100%;
    left: var(--tooltip-arrow, 50%);
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: color-mix(in srgb, var(--accent) 20%, var(--border));
}

/* Show on hover – SUPPRESSED: portal clone handles display now */
.tile:not(.disabled):hover .tile-tooltip {
    /* Original tooltip is hidden; the JS portal clone is shown instead */
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Portal clone styling – explicit values, no inheritance needed */
.tooltip-portal-clone {
    /* Desktop-Hover-Karte teilt die visuelle Sprache des Mobile-Sheets:
       gleiche Accent-getoente Box-Optik (BG-Glow + Border + Rim-Light),
       gefuellt vom selben Content-Builder. Positionierung kommt inline aus
       showPortalTooltip (fixed, Arrow) und bleibt unberuehrt. */
    width: 320px;
    background:
        radial-gradient(120% 62% at 50% 0%,
            color-mix(in srgb, var(--sheet-accent, #e94d97) 10%, transparent) 0%,
            transparent 55%),
        var(--panel-bg, var(--tooltip-bg));
    border: 1px solid color-mix(in srgb, var(--sheet-accent, #e94d97) 26%, var(--border));
    border-radius: 16px;
    box-shadow:
        0 22px 52px rgba(0, 0, 0, .20),
        0 0 26px color-mix(in srgb, var(--sheet-accent, #e94d97) 12%, transparent),
        inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent);
    padding: 16px 18px 16px;
    text-align: left;
    font-family: 'Inter', sans-serif;
    color: var(--text);
}

/* Desktop-Karte: kein Close-Button, daher kein Head-Rechts-Padding noetig */
.tooltip-portal-clone .tooltip-sheet-head {
    margin-bottom: 13px;
    padding-right: 0;
    padding-bottom: 12px;
}

.tooltip-portal-clone .tooltip-sheet-facts { margin-bottom: 0; }
.tooltip-portal-clone .tooltip-sheet-text { margin-top: 12px; }

/* Gesperrte Platzierung: neutraler Lock-Hinweis (kein Accent-Fill), nur der
   Tier-Name im Brand-Accent. Selber Karten-Stil, klar als "gesperrt" lesbar. */
.tooltip-sheet-locked {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 2px;
    padding: 10px 14px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--text) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
}

.tooltip-sheet-locked-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 10px;
    background: color-mix(in srgb, var(--text) 8%, transparent);
    color: var(--text-muted);
    font-size: var(--t-base);
}

.tooltip-sheet-locked-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tooltip-sheet-locked-text strong {
    font-size: var(--t-sm);
    font-weight: 700;
    color: var(--text);
    line-height: 1.25;
}

.tooltip-sheet-locked-text .lk-tier {
    color: var(--sheet-accent, #e94d97);
}

.tooltip-sheet-locked-text span {
    font-size: var(--t-xs);
    color: var(--text-muted);
}

/* Folgt der Lock-Block auf die Platzierungsbeschreibung (gesperrte Kachel),
   braucht er echten Abstand - der 2px-Default reichte nur direkt unter dem
   Head, der seine eigene Bottom-Margin mitbringt. */
.tooltip-sheet-text + .tooltip-sheet-locked { margin-top: 10px; }

.tooltip-portal-clone::after {
    content: '';
    position: absolute;
    top: 100%;
    left: var(--tooltip-arrow, 50%);
    transform: translateX(-50%);
    border: 7px solid transparent;
    border-top-color: var(--panel-bg, var(--tooltip-bg));
}

.tooltip-portal-clone::before {
    content: '';
    position: absolute;
    top: 100%;
    left: var(--tooltip-arrow, 50%);
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: color-mix(in srgb, var(--sheet-accent, #e94d97) 26%, var(--border));
}

/* Tooltip text */
.tooltip-text {
    font-size: var(--t-xs);
    color: var(--text);
    line-height: 1.6;
    margin-bottom: 0;
}

/* Tooltip image – phone mockup */
.tooltip-img {
    display: none;
}

/* ── Mobile Tooltip Bottom-Sheet (Touch, Task 5) ─────────────────
   Ersetzt die fummelige Hover-Bubble auf Touch-Geraeten durch ein
   von unten einfahrendes Sheet (Titel + optionales Beispielbild +
   Text + Backdrop). Gebaut/geoeffnet nur bei pointer:coarse (JS). */
.tooltip-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-base) ease;
    z-index: 10000;
}

.tooltip-sheet-backdrop.visible {
    opacity: 1;
    pointer-events: auto;
}

.tooltip-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10001;
    background:
        radial-gradient(120% 58% at 50% -12%,
            color-mix(in srgb, var(--sheet-accent, #e94d97) 11%, transparent) 0%,
            transparent 55%),
        var(--panel-bg, #1c1c22);
    border-top: 1px solid color-mix(in srgb, var(--sheet-accent, #e94d97) 30%, var(--border));
    border-radius: 22px 22px 0 0;
    box-shadow:
        0 -1px 0 color-mix(in srgb, #fff 10%, transparent) inset,
        0 -24px 60px -14px rgba(0, 0, 0, 0.55),
        0 -3px 14px color-mix(in srgb, var(--sheet-accent, #e94d97) 12%, transparent);
    padding: 10px 20px calc(24px + env(safe-area-inset-bottom, 0px));
    max-height: 82vh;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) ease;
    -webkit-overflow-scrolling: touch;
    /* Swipe-to-dismiss (script.js, bindSheetGestures): die horizontale Achse
       gehoert der Geste, vertikal scrollt der Inhalt. contain verhindert, dass
       ein Zug am oberen Rand die Seite bzw. Pull-to-Refresh mitzieht. */
    touch-action: pan-y;
    overscroll-behavior: contain;
}

.tooltip-sheet.visible {
    transform: translateY(0);
}

.tooltip-sheet::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--sheet-accent, #e94d97);
    border-radius: 22px 22px 0 0;
    opacity: 0.9;
}

.tooltip-sheet-handle {
    width: 44px;
    height: 5px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text) 20%, transparent);
    margin: 4px auto 14px;
    transition: background var(--dur-fast) ease, width var(--dur-fast) ease;
}

.tooltip-sheet-handle:active {
    background: var(--sheet-accent, #e94d97);
    width: 58px;
}

/* Sticky-Zone mit Hoehe 0: nimmt keinen Platz im Fluss ein (Handle/Head
   ruecken nicht runter), haelt den Close-Button aber am oberen Rand des
   sichtbaren Scroll-Bereichs fest. Ohne sie war der Button ein normales
   Kind von .tooltip-sheet - und .tooltip-sheet ist zugleich der
   Scroll-Container (overflow-y:auto). Bei langem Inhalt (Bild + Text +
   CTA) scrollte der Button also mit dem Rest nach oben aus dem sichtbaren
   Bereich, sobald man im Sheet nach unten scrollte: unerreichbar, bis man
   zurueckscrollte. (Gemeldet 07.08.2026, Last-Call-Booster-Sheet.) */
.tooltip-sheet-close-wrap {
    position: sticky;
    top: 0;
    height: 0;
    z-index: 3;
}

.tooltip-sheet-close {
    position: absolute;
    top: 12px;
    right: 14px;
    /* Die Reveal-Animation gibt .tooltip-sheet-head (und den anderen Content-
       Bloecken) per transform/opacity einen eigenen Stacking-Context - ohne
       ausreichendes z-index auf der Sticky-Zone gewinnt dann die
       DOM-Reihenfolge (Head kommt NACH dem Close-Button) und faengt
       Klicks/Taps im Ueberlapp unsichtbar ab, obwohl der Button optisch
       obenauf gezeichnet aussieht (CDP-belegt: elementFromPoint traf
       .tooltip-sheet-head statt den Button). */
    z-index: 2;
    width: 42px;
    height: 42px;
    border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
    border-radius: 50%;
    background: color-mix(in srgb, var(--text) 8%, transparent);
    color: var(--text);
    font-size: var(--t-lg);
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) ease;
}

.tooltip-sheet-close:active {
    background: color-mix(in srgb, var(--sheet-accent, #e94d97) 22%, transparent);
    color: var(--sheet-accent, #e94d97);
    transform: scale(0.92);
}

.tooltip-sheet-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-right: 46px;
    padding-bottom: 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--sheet-accent, #e94d97) 20%, var(--border));
}

.tooltip-sheet-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 14px;
    color: var(--sheet-accent, #e94d97);
    font-size: var(--t-md);
    background: linear-gradient(140deg,
        color-mix(in srgb, var(--sheet-accent, #e94d97) 26%, transparent),
        color-mix(in srgb, var(--sheet-accent, #e94d97) 7%, transparent));
    border: 1px solid color-mix(in srgb, var(--sheet-accent, #e94d97) 40%, transparent);
    box-shadow:
        0 4px 14px -6px color-mix(in srgb, var(--sheet-accent, #e94d97) 55%, transparent),
        0 1px 0 color-mix(in srgb, #fff 15%, transparent) inset;
}

.tooltip-sheet-eyebrow {
    display: block;
    font-size: var(--t-2xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sheet-accent, #e94d97);
    margin-bottom: 3px;
}

/* Format-Fakten unter dem Head (Tier-Zugehoerigkeit) */
.tooltip-sheet-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 16px;
}

.tooltip-sheet-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: var(--t-xs);
    color: var(--text);
    background: color-mix(in srgb, var(--sheet-accent, #e94d97) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--sheet-accent, #e94d97) 22%, transparent);
}

.tooltip-sheet-chip i {
    color: var(--sheet-accent, #e94d97);
    font-size: 0.8em;
}

.tooltip-sheet-chip strong {
    font-weight: 700;
}

/* ─── Booster-Auswahl im Sheet ──────────────────────────────────
   Ohne Hover oeffnet der Tap auf eine Booster-Kachel die Beschreibung wie
   bei jeder anderen Platzierung; die Auswahl liegt deshalb hier. Volle
   Breite und Markenfarbe, weil es die einzige Handlung der Karte ist. */
.tooltip-sheet-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    margin: 0 0 18px;
    padding: 13px 18px;
    border: 1px solid color-mix(in srgb, var(--sheet-accent, #e94d97) 45%, transparent);
    border-radius: var(--radius-sm, 10px);
    background: color-mix(in srgb, var(--sheet-accent, #e94d97) 14%, transparent);
    color: var(--text);
    font-family: inherit;
    font-size: var(--t-sm);
    font-weight: 600;
    letter-spacing: -0.005em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--dur-fast, 0.15s) ease, border-color var(--dur-fast, 0.15s) ease;
}

.tooltip-sheet-action i {
    color: var(--sheet-accent, #e94d97);
    font-size: 0.9em;
}

.tooltip-sheet-action:active {
    background: color-mix(in srgb, var(--sheet-accent, #e94d97) 24%, transparent);
}

/* Bereits gewaehlt: ruhiger, es ist eine Bestaetigung, keine Aufforderung. */
.tooltip-sheet-action.is-selected {
    background: transparent;
    border-color: color-mix(in srgb, var(--sheet-accent, #e94d97) 30%, transparent);
    color: color-mix(in srgb, var(--text) 75%, transparent);
}

/* Staffelung je Paket. Bewusst KEIN zweiter Chip-Cluster: der "Enthalten ab"-
   Chip darueber bleibt das auffaellige Element, diese Zeile ist die ruhige
   Faktenangabe darunter. Das aktive Paket wird ueber Helligkeit und Gewicht
   hervorgehoben, nicht ueber die Markenfarbe - die steht pro Brand inline und
   waere auf so kleinem Text in mehreren Brands nicht lesbar (Pitfall 28). */
.tooltip-sheet-steps {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    /* Getrennt wird ueber Abstand, nicht ueber Trennzeichen: innen 5px zwischen
       Paket und Wert, aussen 18px zwischen den Stufen. Ein Trennpunkt zwischen
       den Stufen landet beim Umbruch am Anfang der zweiten Zeile (im hellen
       Theme mit "3 Tage" reproduziert). */
    gap: 3px 18px;
    /* Der Chip darueber traegt 16px Abstand; davon 6 zurueckholen, damit Chip
       und Faktenzeile als eine Gruppe lesen. In der Desktop-Karte steht der
       Chip-Abstand auf 0 (Regel weiter oben), dort wird der Wert gesetzt. */
    margin: -6px 0 16px;
    font-size: var(--t-xs);
    line-height: 1.5;
}

.tooltip-portal-clone .tooltip-sheet-steps {
    margin-top: 10px;
}

/* 65% ist die Untergrenze, nicht Geschmack: bei 55% kommt die Zeile im hellen
   Theme auf 3,64:1 und im dunklen auf 4,25:1 gegen den Kartengrund gemessen,
   beides unter den 4,5:1, die fuer diese Schriftgroesse gelten. Hier stehen
   Mengenangaben, keine Dekoration. */
.tooltip-sheet-step {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    color: color-mix(in srgb, var(--text) 65%, transparent);
}

.tooltip-sheet-step.is-active {
    color: var(--text);
}

.tooltip-sheet-step .tss-val {
    font-weight: 650;
}

.tooltip-sheet-titles {
    min-width: 0;
}

.tooltip-sheet-title {
    font-family: var(--font-heading);
    font-size: var(--t-md);
    font-weight: 700;
    color: var(--text);
    margin: 0;
    line-height: 1.2;
}

.tooltip-sheet-detail {
    font-size: var(--t-xs);
    color: var(--text-muted);
    margin-top: 2px;
}

/* Signature: brand-getoenter Spotlight-Frame fuer das Beispielbild */
.tooltip-sheet-figure {
    position: relative;
    isolation: isolate;
    margin: 0 0 16px;
    padding: 10px;
    border-radius: 18px;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--sheet-accent, #e94d97) 10%, var(--panel-bg)) 0%,
        var(--panel-bg) 72%);
    border: 1px solid color-mix(in srgb, var(--sheet-accent, #e94d97) 26%, var(--border));
    box-shadow:
        0 1px 0 color-mix(in srgb, #fff 12%, transparent) inset,
        0 12px 32px -14px color-mix(in srgb, var(--sheet-accent, #e94d97) 42%, transparent);
}

/* Accent-Spotlight, steigt hinter dem Bild auf */
.tooltip-sheet-figure::before {
    content: '';
    position: absolute;
    inset: -14% -8% auto -8%;
    height: 62%;
    z-index: -1;
    background: radial-gradient(58% 100% at 50% 0%,
        color-mix(in srgb, var(--sheet-accent, #e94d97) 46%, transparent) 0%,
        transparent 70%);
    filter: blur(22px);
    opacity: 0.5;
    pointer-events: none;
}

.tooltip-sheet-img {
    display: block;
    width: 100%;
    max-height: 54vh;
    object-fit: contain;
    border-radius: 11px;
    background: color-mix(in srgb, var(--text) 5%, transparent);
}

.tooltip-sheet-figure .tooltip-sheet-img {
    margin: 0;
    border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
    box-shadow: var(--shadow-3);
}

/* Mobile Bottom-Sheet (pointer:coarse) hat oft wenig Hoehe zur Verfuegung
   (Browser-Toolbars fressen einen Teil des Viewports). Platzierungsbeschreibung
   braucht darunter noch Raum, Text darf nicht abgeschnitten werden - deshalb
   kleiner als der Desktop-Wert, aber (seit Wegfall des Live-Badges, das keinen
   eigenen Platz mehr braucht) groesser als zuvor. */
@media (max-width: 600px) {
    .tooltip-sheet-img {
        max-height: 36vh;
    }

    /* Gesperrte Platzierung traegt zusaetzlich zu Bild + Text noch den
       Tier-Hinweis - mit dem vollen 36vh-Bild reichte die 82vh-Sheet-Hoehe
       dafuer nicht mehr, das Sheet musste erst gescrollt werden, um "Erst ab
       ... enthalten" zu sehen (Mike, 06.08.2026). Bild etwas kleiner UND der
       Hinweis selbst kompakter + naeher an den Text geholt, statt das Bild
       fuer alle Karten wieder zu verkleinern. */
    .tooltip-sheet:has(.tooltip-sheet-locked) .tooltip-sheet-img {
        max-height: 30vh;
    }

    /* 82vh liess oben durchgehend ~18% Backdrop stehen, ungenutzter Leerraum,
       waehrend unten genau die Zeile fehlte, die den Scroll erzwang. */
    .tooltip-sheet {
        max-height: 90vh;
    }

    .tooltip-sheet-locked {
        gap: 10px;
        padding: 8px 12px;
    }

    .tooltip-sheet-text + .tooltip-sheet-locked {
        margin-top: 6px;
    }

    .tooltip-sheet-locked-icon {
        width: 32px;
        height: 32px;
        font-size: var(--t-sm);
    }

    .tooltip-sheet-locked-text strong {
        font-size: var(--t-xs);
    }
}

.tooltip-sheet-text {
    font-size: var(--t-base);
    line-height: 1.62;
    color: color-mix(in srgb, var(--text) 90%, var(--text-muted));
    margin: 0;
    max-width: 62ch;
    text-wrap: pretty;
}

/* Wenn kein Beispielbild da ist, wird der Text zur Hero: dezente
   editoriale Accent-Kante links (konkurriert nicht mit dem Frame). */
.tooltip-sheet:not(:has(.tooltip-sheet-figure)) .tooltip-sheet-text {
    padding-left: 14px;
    border-left: 2px solid color-mix(in srgb, var(--sheet-accent, #e94d97) 55%, transparent);
}

/* Gestaffelter Content-Reveal beim Auffahren (nativer, wertiger Eindruck).
   Startwerte stehen INNERHALB der no-preference-Query, damit bei
   reduced-motion nie ein leeres Sheet stehen bleibt. */
@media (prefers-reduced-motion: no-preference) {
    .tooltip-sheet > .tooltip-sheet-head,
    .tooltip-sheet > .tooltip-sheet-facts,
    .tooltip-sheet > .tooltip-sheet-figure,
    .tooltip-sheet > .tooltip-sheet-text {
        opacity: 0;
        transform: translateY(14px);
    }
    .tooltip-sheet.visible > .tooltip-sheet-head   { animation: tsSheetIn 0.42s var(--ease-out) 0.06s forwards; }
    .tooltip-sheet.visible > .tooltip-sheet-facts  { animation: tsSheetIn 0.42s var(--ease-out) 0.12s forwards; }
    .tooltip-sheet.visible > .tooltip-sheet-figure { animation: tsSheetIn 0.42s var(--ease-out) 0.18s forwards; }
    .tooltip-sheet.visible > .tooltip-sheet-text   { animation: tsSheetIn 0.42s var(--ease-out) 0.24s forwards; }
}

@keyframes tsSheetIn {
    to { opacity: 1; transform: translateY(0); }
}

body.tooltip-sheet-open {
    overflow: hidden;
}

/* ── Mockup overlay for tile hover screenshots ── */
.portal-mockup-container {
    position: relative;
}

.mockup-overlay {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    width: min(480px, 90vw);
    aspect-ratio: 16/9;
    z-index: 300;
    background: var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-modal);
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-base) ease, transform var(--dur-base) ease;
}

.mockup-overlay.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.mockup-overlay img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    border-radius: 0;
    display: block;
    opacity: 0;
    transition: opacity var(--dur-slow) ease;
}

.mockup-overlay img.slide-active {
    opacity: 1;
}

/* Table note for optional extras */
.table-note {
    font-size: var(--t-xs);
    color: var(--text-muted);
    margin-top: 14px;
    font-style: italic;
}

/* ── FOOTER ── */
.footer {
    background: #ffffff;
    border-radius: var(--radius-xl);
    padding: 36px 30px 24px;
    margin-top: 20px;
    margin-bottom: 20px;
    border: 1px solid var(--border);
    /* Changed from var(--card-border) to var(--border) to match existing token */
    box-shadow: var(--shadow-main);
    /* Changed from var(--card-shadow) to var(--shadow-main) to match existing token */
    scroll-snap-align: start;
}

/* Partnership Managers Section */
.footer-team {
    margin-bottom: 50px;
}

.footer-team h3 {
    font-size: var(--t-lg);
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px;
    text-align: center;
}

.footer-team-sub {
    color: var(--text-muted);
    font-size: var(--t-sm);
    text-align: center;
    margin-bottom: 28px;
}

.team-grid {
    display: flex;
    gap: 24px;
    justify-content: center;
    flex-wrap: wrap;
}

.team-card {
    background: var(--surface);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--radius-lg);
    padding: 20px 16px;
    /* Compacted from 28px 24px */
    text-align: center;
    width: 200px;
    /* Slightly narrower */
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-fast) linear;
    box-shadow: var(--shadow-2);
}

.team-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-3);
    border-color: rgba(0, 0, 0, 0.1);
}

.team-card img {
    width: 64px;
    /* Compacted from 80px */
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center 35%;
    margin-bottom: 10px;
    /* Reduced */
    border: 3px solid var(--panel-bg);
    box-shadow: var(--shadow-2);
}

.team-card .team-name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--t-base);
    color: var(--text);
    margin-bottom: 2px;
}

.team-card .team-role {
    font-size: var(--t-xs);
    color: var(--text-muted);
    font-weight: 500;
    margin-bottom: 8px;
}

.team-card a {
    font-size: var(--t-xs);
    color: var(--text-muted);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 4px;
    transition: color var(--dur-fast);
}

.team-card a:hover {
    color: var(--brand);
    /* Use primary brand color */
}

/* ── Team Editor (edit mode) ─────────────────── */
.team-img-wrapper {
    position: relative;
    display: inline-block;
}

.team-img-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--dur-fast);
}

.team-img-wrapper:hover .team-img-overlay {
    opacity: 1;
}

.team-img-overlay i {
    color: #fff;
    font-size: var(--t-lg);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.team-remove-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: rgba(239, 68, 68, 0.9);
    color: #fff;
    font-size: var(--t-2xs);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--dur-fast);
    z-index: 2;
}

.team-card {
    position: relative;
}

.team-card:hover .team-remove-btn {
    opacity: 1;
}

.team-add-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 200px;
    border: 2px dashed var(--border-light, rgba(0, 0, 0, 0.12));
    border-radius: var(--radius-lg);
    background: transparent;
    color: var(--text-muted);
    font-size: var(--t-sm);
    cursor: pointer;
    transition: border-color var(--dur-fast), color var(--dur-fast);
}

.team-add-btn:hover {
    border-color: var(--accent, var(--tm-accent));
    color: var(--accent, var(--tm-accent));
}

.team-add-btn i {
    font-size: var(--t-xl);
}

/* Footer CTA + Meta */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
    padding-top: 30px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.footer-cta h2 {
    font-size: var(--t-xl);
    /* Slightly smaller */
    margin-bottom: 0;
    /* Inline with button if space allows, or tight stack */
    color: var(--text);
    margin-bottom: 12px;
}

.cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, var(--tm-accent), color-mix(in srgb, var(--tm-accent) 80%, #000));
    color: #fff;
    padding: 10px 24px;
    border-radius: var(--radius-md);
    text-decoration: none;
    font-weight: 500;
    transition: transform var(--dur-fast), opacity var(--dur-fast);
    box-shadow: var(--shadow-2);
}

.cta-btn:hover {
    transform: scale(1.03);
    opacity: 0.9;
}

.footer-meta {
    text-align: right;
}

.footer-meta .brand-wordmark {
    color: var(--text);
    font-weight: 700;
    letter-spacing: -1px;
}

/* Footer-Logo: zwei Dateien statt Filter-Trick. Ein invertiertes tmx_logo.png
   macht die Wortmarke zwar hell, verdreht aber die Farben des X (Magenta wird
   Gruen). Auf dunklem Grund laeuft daher die echte weisse Wortmarken-Datei. */
.footer-logo {
    height: 32px;
    /* Muss gesetzt sein: die width/height-Attribute im HTML (dort fuer die
       Platzreservierung noetig) wirken sonst als Praesentations-Hint und
       zerren das Logo auf 596px Breite. */
    width: auto;
    margin: 0 auto 16px auto;
    display: block;
    cursor: pointer;
}

/* Ungefiltert: das X behaelt sein Magenta, wie im Checkout auch. Das fruehere
   brightness(0.2) hat es im Light-Theme auf Fast-Schwarz gedrueckt und stand
   damit im Widerspruch zum Zweck der zwei Dateien. */
.footer-logo--light {
    filter: none;
}

.footer-logo--dark {
    display: none;
    /* Leicht gedaempft, damit die weisse Wortmarke den Adressblock und die
       Links darunter (--text-muted) nicht ueberstrahlt. Stammt aus der
       abgeloesten [data-theme="dark"] .footer-meta img-Regel. */
    opacity: 0.9;
}

[data-theme="dark"] .footer-logo--light,
[data-profile="black-week"] .footer-logo--light {
    display: none;
}

[data-theme="dark"] .footer-logo--dark,
[data-profile="black-week"] .footer-logo--dark {
    display: block;
}

/* Black-Week ist auch im Light-Theme ein dunkles Kit und faehrt in Hero + Nav
   ein monochrom weisses Logo. Der Footer zieht nach, sonst steht unten als
   einziges Element ein buntes X im Schwarz-Gold-Kit. */
[data-profile="black-week"] .footer-logo--dark {
    filter: brightness(0) invert(1);
}

.footer-address {
    text-align: right;
    color: var(--text-muted);
    font-size: var(--t-xs);
    margin-top: 12px;
    line-height: 1.6;
}

.footer-address a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--dur-fast);
}

.footer-address a:hover {
    color: var(--brand);
}

.footer-meta p {
    font-size: var(--t-xs);
    color: var(--text-muted);
    margin-top: 6px;
}

.footer-links {
    display: flex;
    gap: 16px;
    margin-top: 6px;
    justify-content: flex-end;
}

.footer-links a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: var(--t-xs);
}

.footer-links a:hover {
    color: var(--tm-accent);
}

/* ─── TRUST BAR (Bekannt aus) ─── */
.trust-bar {
    display: none;
    /* vorerst deaktiviert */
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 18px 32px;
    margin: 0 auto;
    max-width: 800px;
    overflow: hidden;
    position: relative;
}

.trust-label {
    font-size: var(--t-2xs);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-muted, rgba(255, 255, 255, 0.35));
    white-space: nowrap;
    flex-shrink: 0;
}

.trust-marquee {
    flex: 0 1 auto;
    overflow: hidden;
    position: relative;
}

.trust-track {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
}



.trust-track img {
    height: 18px;
    width: auto;
    object-fit: contain;
    filter: grayscale(100%) brightness(0.7);
    opacity: 0.45;
    transition: filter var(--dur-base) ease, opacity var(--dur-base) ease, transform var(--dur-base) ease;
    user-select: none;
    -webkit-user-drag: none;
}

.trust-track img:hover {
    filter: grayscale(0%) brightness(1);
    opacity: 1;
    transform: scale(1.12);
}



/* Light theme adjustments */
[data-theme="light"] .trust-label {
    color: rgba(0, 0, 0, 0.3);
}

[data-theme="light"] .trust-track img {
    filter: grayscale(100%) brightness(0.55);
    opacity: 0.4;
}

[data-theme="light"] .trust-track img:hover {
    filter: grayscale(0%) brightness(1);
    opacity: 1;
}

@media (max-width: 768px) {
    .trust-bar {
        flex-direction: column;
        gap: 10px;
        padding: 14px 16px;
    }

    .trust-track img {
        height: 22px;
    }
}

/* ─── ANIMATIONS ─── */
.portal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--dur-slow) ease, transform var(--dur-slow) ease, border-color var(--dur-base), box-shadow var(--dur-base);
}

.portal.visible {
    opacity: 1;
    transform: translateY(0);
}


/* ─── RESPONSIVE ─── */
@media (max-width: 860px) {
    .portal-body {
        grid-template-columns: 1fr;
    }

    .portal-info {
        border-right: none;
        border-bottom: 1px solid var(--border);
        border-radius: var(--radius) var(--radius) 0 0;
    }

    .portal-pricing {
        overflow: visible;
        /* tooltips must not be clipped */
        /* Accent-Linie ueber die GANZE Karte: im Single-Column-Layout hat nur
           .portal-info (oberer Abschnitt) den border-left-Accent -> die Linie
           bricht am Uebergang ab. border-left auch auf die Pricing-Sektion
           (gleiche linke Kante) macht die Linie durchgehend wie im Desktop-
           2-Spalten-Layout. Untere Ecken runden fuer sauberen Kartenabschluss. */
        border-left: 4px solid var(--accent);
        border-radius: 0 0 var(--radius) var(--radius);
    }

    .hero-content h1 {
        font-size: var(--t-3xl);
    }

    .kpi-val {
        font-size: 1.28rem;
    }

    .hero-kpis {
        gap: 20px;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }

    .footer-meta {
        text-align: center;
    }

    .footer-links {
        justify-content: center;
    }

    .tile-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 8px;
    }

    .tier-selector {
        justify-content: center;
    }

    .team-card {
        width: 180px;
    }
}

/* Mobile: compact segmented tier control */
@media (max-width: 500px) {
    .portal-pricing {
        padding: 12px 8px;
        overflow: visible;
        /* tooltips must not be clipped */
    }

    .portal-body {
        overflow: visible;
        /* tooltips must not be clipped */
    }

    .tier-selector {
        flex-wrap: wrap;
        gap: 6px;
        /* Task 3: 32px Top-Padding war vestigial (reservierte Hoehe fuer das
           ausgeblendete "Waehle dein Paket"-Label) und verschwendete Platz.
           Auf tight getrimmt -> Box deutlich niedriger. */
        padding: 5px 4px;
        background: var(--surface-hover);
        border-radius: var(--radius-md);
    }

    /* Item 1: Mobile – allow buttons to wrap and display name+price stacked */
    .tier-btn {
        flex: 1 1 auto;
        min-width: 0;
        text-align: center;
        padding: 7px 6px;
        font-size: var(--t-2xs);
        border-radius: var(--radius-md);
        white-space: normal;
        overflow: hidden;
        word-break: break-word;
    }

    .tier-btn .tier-name {
        font-size: var(--t-2xs);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .tier-btn .tier-price {
        font-size: var(--t-2xs);
    }

    .tier-btn .fire {
        display: none;
    }

    .package-layer {
        padding: 8px 6px 8px 10px;
    }

    .layer-tiles {
        /* Feste 2 Spalten statt auto-fill: verhindert leere Trailing-Tracks,
           wenn ein Layer weniger Kacheln hat als gefittete Spalten (2/4/4 je
           Layer). 2 Spalten halten die separaten Layer-Grids zudem vertikal
           fluchtend (gemergter Premium-Look).
           Nicht zu verwechseln mit der Ausrichtung innerhalb einer Reihe: eine
           angebrochene Schlussreihe steht linksbuendig, und das ist so gewollt
           (Zentrierung war #24, zurueckgenommen mit #28). */
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px;
    }

    .tile-tooltip {
        width: min(280px, 85vw);
        left: 0;
        transform: translateX(0) translateY(6px);
    }

    .tile:not(.disabled):hover .tile-tooltip {
        transform: translateX(0) translateY(0);
    }

    .tile-tooltip::after,
    .tile-tooltip::before {
        left: 20px;
    }

    .hero-content h1 {
        font-size: var(--t-2xl);
    }

    .hero-brand-row {
        justify-content: center;
    }

    .portal-body {
        grid-template-columns: 1fr;
    }

    .portal-info {
        border-right: none;
        border-bottom: 1px solid var(--border);
        border-radius: var(--radius) var(--radius) 0 0;
    }

    .trust-bar {
        padding: 0 10px;
    }

    .trust-bar p {
        font-size: var(--t-xs);
        margin-right: 6px;
    }

    .trust-logos {
        gap: 10px;
    }

    .trust-logos img {
        height: 24px;
        max-width: 60px;
    }
}

/* ─── STICKY NAVIGATION ─── */
.sticky-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: var(--nav-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-light);
    z-index: 1000;
    height: 70px;
    display: flex;
    align-items: center;
    box-shadow: var(--shadow-2);
}

.nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 var(--page-pad);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-logo img {
    height: 32px;
    width: auto;
    display: block;
}

.nav-links {
    display: flex;
    gap: 24px;
    padding-right: 20px;
    margin-right: auto;
}

/* ─── TEAM SECTION (Moved) ─── */
.team-section {
    max-width: 1200px;
    margin: 0 auto 10px auto;
    padding: 0 var(--page-pad);
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.team-inner {
    background: var(--panel-bg);
    border-radius: var(--radius-xl);
    padding: 24px 32px;
    /* Compacted from 40px */
    box-shadow: var(--shadow-main);
    border: 1px solid var(--border-light);
}

.nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--text-muted);
    font-size: var(--t-2xs);
    /* Smaller for label */
    font-weight: 500;
    padding: 4px 0;
    position: relative;
    transition: color var(--dur-fast);
    height: 64px;
    /* Taller for logo + label */
    gap: 4px;
}

.nav-link img {
    height: 32px;
    width: auto;
    object-fit: contain;
    transition: filter var(--dur-fast), transform var(--dur-fast);
    filter: grayscale(1);
    opacity: 0.6;
    border-radius: var(--radius-sm);
}

.nav-link span {
    display: block;
    text-transform: none;
    letter-spacing: 0;
    opacity: 0.7;
    transition: opacity var(--dur-fast);
    white-space: nowrap;
}

.nav-link:hover img,
.nav-link.active img {
    filter: grayscale(0);
    opacity: 1;
    transform: scale(1.05);
}

.nav-link:hover span,
.nav-link.active span {
    opacity: 1;
    color: var(--brand-color, var(--text));
}

.nav-link:hover,
.nav-link.active {
    color: var(--brand-color, var(--text));
}

.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--brand-color, var(--brand));
    border-radius: var(--radius-sm);
}

.nav-cta {
    background: var(--text);
    color: #fff;
    padding: 8px 18px;
    border-radius: var(--radius-xl);
    text-decoration: none;
    font-size: var(--t-sm);
    font-weight: 500;
    transition: transform var(--dur-fast), opacity var(--dur-fast);
}

.nav-cta:hover {
    transform: scale(1.05);
    opacity: 0.9;
}

/* Responsive Nav */
@media (max-width: 1000px) {
    /* Die Portal-Logo-Leiste entfaellt hier komplett (frueher eine zweite
       fixed Leiste unter der sticky-nav). Sie kostete 80px Hoehe auf jedem
       Screen, und navigiert wird mobil ohnehin per Scroll. Der Scroll-Spy in
       admin.js markiert weiter .nav-link.active - fuer Desktop, wo die Leiste
       in der Bar sitzt. */
    .nav-links {
        display: none;
    }

    /* .nav-inner verteilt per space-between. Ohne die Logo-Leiste bleibt nur
       die Steuer-Pille uebrig und rutschte damit nach links. */
    .nav-inner {
        justify-content: flex-end;
    }

    .sticky-nav {
        height: 60px;
    }

    body.content-unlocked .kit-switch-mount:not([hidden]) {
        top: 60px;
    }

    body {
        padding-top: calc(60px + var(--kit-switch-h, 0px));
    }
}

/* ─── PORTAL INTRO ─── */
/* ─── PORTAL INTRO (BRAND INFO) ─── */
.portal-intro {
    padding: 12px 16px 6px;
    margin-bottom: 4px;
    position: relative;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    background: linear-gradient(to bottom right, var(--panel-bg), var(--surface));
    /* Thin frame + subtle shadow */
    box-shadow: var(--shadow-main);
}

.portal-intro h2 {
    /* 1.08rem statt --t-md (1.15rem): der laengste Lead (DealDoktor
       "Mehrfacher Gesamtsieger unter Deutschlands Schnaeppchen-Seiten.")
       passt damit einzeilig in die ~560px breite Intro-Spalte (live gemessen:
       ~11px Puffer beim engsten Viewport). Nur -6%, kaum sichtbar, weiterhin
       klar groesser als der 16px-Fliesstext. text-wrap:balance bleibt als
       Sicherung, falls ein (admin-editierbarer) Lead doch mal umbricht. */
    font-size: 1.08rem;
    line-height: 1.35;
    /* 600 statt 700: der Lead traegt seine Betonung seit dem Kontrast-Fix
       ueber den Gewichtssprung zum .highlight (700), nicht mehr ueber dessen
       Markenfarbe. Bewusst nach UNTEN gesetzt und der Highlight bei 700
       belassen, damit die Zeile nicht breiter wird als vorher: die 1.08rem
       oben sind auf den laengsten Lead einzeilig kalibriert. */
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
    letter-spacing: -0.5px;
    text-wrap: balance;
}

.portal-intro h2 .highlight {
    /* Kein Marken-Gradient mehr (WCAG 1.4.3). Bei 1.08rem/700 liegt der Lead
       unter der Large-Text-Grenze, es gilt also 4,5:1 - gerissen haben das
       fuenf der sieben Marken im Light-Theme und sechs im Dark-Theme, am
       deutlichsten dealdoktor mit 1,89:1 (hell) und reebate mit 1,93:1
       (dunkel). Die Marke auf 4,5:1 abzudunkeln haette sie unkenntlich
       gemacht (#f5a623 waere zu #986716 geworden), deshalb traegt die
       Hervorhebung jetzt den Gewichtssprung gegen die 600er-Basis daneben.
       Das Markensignal steht unveraendert im Logo-Banner, in der 4px-Accent-
       Kante der Markenspalte und in den accent-getoenten KPI-Kacheln.
       color: inherit statt var(--text), damit der Lead als Ganzes umfaerbbar
       bleibt und die beiden Teile nie auseinanderlaufen koennen. */
    color: inherit;
    font-weight: 700;
    /* inline (nicht inline-block): der Highlight-Text darf intern umbrechen.
       Als inline-block rutschte der ganze Block als Einheit in Zeile 2,
       sodass der Rest ("Mehrfacher") allein oben stand. Loest zugleich den
       verwaisten Satzpunkt -> der Mobile-Override weiter unten ist jetzt
       redundant, bleibt aber als Sicherung stehen. */
    display: inline;
}

.portal-intro p {
    font-size: var(--t-base);
    color: var(--text-muted);
    line-height: 1.6;
    font-weight: 400;
    margin-bottom: 0;
}

/* Mobil-Kurztext pro Portal: auf Desktop versteckt, nur mobil sichtbar (siehe
   Mobile-Block). Im Edit-Mode auf Desktop sichtbar + als Mobil-Variante
   markiert, damit der Admin ihn bearbeiten kann. */
.portal-intro-short { display: none; }

body.edit-mode .portal-intro-short {
    display: block;
    margin-top: 8px;
    padding: 6px 10px;
    border: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent);
    border-radius: var(--radius-sm);
    opacity: 0.85;
    font-size: var(--t-sm);
    color: var(--text-muted);
    line-height: 1.5;
}
body.edit-mode .portal-intro-short::before {
    content: "Mobil-Kurztext";
    display: block;
    font-size: var(--t-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--accent);
    opacity: 0.8;
    margin-bottom: 3px;
}
:lang(en) body.edit-mode .portal-intro-short::before { content: "Mobile short text"; }

/* ─── HERO SLOGAN ─── */
.hero-slogan {
    margin-top: 24px;
    font-size: var(--t-md);
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    color: var(--text);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    letter-spacing: -0.5px;
}

/* Auch hier lief ein Gradient von Magenta nach Magenta. Eine Farbe genuegt. */
.hero-slogan .highlight {
    color: var(--tm-accent);
    font-weight: 600;
}

/* ─── SIDEBAR MOCKUP ─── */
.portal-mockup-container {
    /* padding-top gives translateY(-5px) + shadow room above the mockup */
    padding-top: 12px;
    margin: 0 0 16px;
    overflow: visible;
}

/* perspective nur auf Hover-Geraeten (Desktop). Auf Touch promotet das
   Mockup sonst zu einem eigenen GPU-Layer, der beim Momentum-Scroll sichtbar
   nachhinkt/"einfriert" (Task 1). Capability-basiert, kein Device-Fork. */
@media (hover: hover) and (pointer: fine) {
    .portal-mockup-container {
        perspective: 1000px;
    }
}

.browser-mockup {
    background: var(--panel-bg);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-main);
    overflow: hidden;
    position: relative;
    border: 1px solid var(--border-light);
    transition: transform var(--dur-base) ease, box-shadow var(--dur-base) ease;
    max-width: 320px;
    margin-inline: auto;
}

.browser-mockup:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-3);
}

/* Kopplung: der Mockup-Frame glueht im Portal-Accent auf, solange die
   zugehoerige Platzierungs-Karte (Desktop-Hover, rechte Spalte) offen ist.
   Verdrahtet den Blick Karte <-> Live-Beispiel ueber den Spalten-Gap. */
.portal-mockup-container.mockup-linked .browser-mockup {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border-light));
    box-shadow:
        0 18px 45px -8px rgba(0, 0, 0, 0.32),
        0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent),
        0 0 30px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* Die Fensterleiste ueber dem Mockup ist entfernt (2026-07-30). Die Punkte
   .dot.red/.yellow/.green bleiben, die Mockup-Lightbox nutzt sie weiter. */
.dot.red {
    background: #ff5f56;
}

.dot.yellow {
    background: #ffbd2e;
}

.dot.green {
    background: #27c93f;
}

/* Quadratischer Rahmen: der aktuelle Grafiksatz liefert die Platzierungs-
   Mockups 1:1 (1600er bzw. 1920er WebP). Das frueher gesetzte 16/9 schnitt
   davon knapp ein Drittel der Hoehe ab, das Handy stand unten offen. */
.browser-mockup img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    object-position: center;
    transition: opacity var(--dur-base) ease;
}

/* Swap layers: overlay original, crossfade on tile hover.
   contain statt cover, damit auch Mockups mit abweichendem Seitenverhaeltnis
   (Newsletter hochkant, App-Push quer) vollstaendig im Rahmen stehen. Der
   eigene Hintergrund verdeckt dabei das darunterliegende Basisbild.
   Zwei Layer (data-role front/back) statt einem: der Slideshow-Wechsel loest
   den Front-Layer auf und gibt den darunterliegenden, bereits deckenden
   Back-Layer mit dem naechsten Bild frei - eine echte Ueberblendung ohne
   Nulldurchgang. Laengere, gedaempfte Kurve statt linear fuer einen
   ruhigeren, weniger "blitzenden" Wechsel. JS-Timeout muss MOCKUP_CROSSFADE_MS
   in tour.js synchron halten. */
.browser-mockup .mockup-swap-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    background: var(--panel-bg);
    opacity: 0;
    transition: opacity 600ms cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
    pointer-events: none;
}

.browser-mockup .mockup-swap-img[data-role="front"] {
    z-index: 3;
}

.browser-mockup .mockup-swap-img.visible {
    opacity: 1;
    pointer-events: auto;
    cursor: zoom-in;
}

/* ── Mockup zoom button (magnifying glass on swap image) ── */
.mockup-zoom-btn {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    font-size: var(--t-sm);
    cursor: pointer;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-base) ease, transform var(--dur-fast) ease, background var(--dur-fast) ease;
}

.browser-mockup .mockup-swap-img.visible~.mockup-zoom-btn {
    opacity: 1;
    pointer-events: auto;
}

.mockup-zoom-btn:hover {
    background: rgba(0, 0, 0, 0.75);
    transform: scale(1.12);
}

.mockup-zoom-btn:active {
    transform: scale(0.95);
}

/* ── SM-Video-Hover-Vorschau: legt sich beim Hover einer SM-Row mit
   hinterlegtem YouTube-Video ueber alles, was im Browser-Mockup gerade steht
   (Original-Screenshot ODER eine gesperrte Platzierungs-Vorschau). z-index
   ueber beiden Tile-Mockup-Ebenen (front=3) UND dem Zoom-Button (4), damit
   sie beim Anzeigen vollstaendig verdeckt werden. Eigenstaendiger Layer,
   siehe script.js _showSmVideoPreview()/_ensureSmVideoPreviewEl(). ── */
.mockup-swap-video {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--panel-bg);
    opacity: 0;
    pointer-events: none;
    cursor: pointer;
    overflow: hidden;
    transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.mockup-swap-video.visible {
    opacity: 1;
    pointer-events: auto;
}

.mockup-swap-video-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transform: scale(1);
    transition: transform 3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Sehr sanfter Ken-Burns-Zoom waehrend die Vorschau steht - reiner
   Wahrnehmungs-Kick, nur transform, kein Layout-Read pro Frame. */
.mockup-swap-video.visible .mockup-swap-video-thumb {
    transform: scale(1.06);
}

.mockup-swap-video-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.15) 45%, rgba(0, 0, 0, 0) 65%);
}

.mockup-swap-video-play {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #fff;
    font-size: 20px;
    transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mockup-swap-video.visible .mockup-swap-video-play {
    animation: smVideoPlayPulse 2.2s ease-out infinite;
}

.mockup-swap-video-play i {
    margin-left: 3px; /* Play-Dreieck optisch zentrieren */
}

.mockup-swap-video:hover .mockup-swap-video-play {
    transform: scale(1.12);
}

@keyframes smVideoPlayPulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.35); }
    70% { box-shadow: 0 0 0 16px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

.mockup-swap-video-label {
    position: absolute;
    left: 12px;
    bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--t-xs);
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.mockup-swap-video-label i {
    color: #ff0033;
    font-size: var(--t-sm);
}

@media (prefers-reduced-motion: reduce) {
    .mockup-swap-video-thumb {
        transition: none;
    }

    .mockup-swap-video.visible .mockup-swap-video-play {
        animation: none;
    }
}

/* ── Mockup lightbox (enlarged placement screenshot) ── */
.mockup-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0;
    transition: opacity var(--dur-base) ease;
    cursor: pointer;
}

.mockup-lightbox.visible {
    opacity: 1;
}

.mockup-lightbox-frame {
    background: var(--panel-bg, #fff);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-modal);
    overflow: hidden;
    max-width: min(80vw, 900px);
    width: fit-content;
    max-height: 85vh;
    transform: scale(0.85) translateY(20px);
    transition: transform var(--dur-base) var(--ease-out);
    cursor: default;
    position: relative;
}

.mockup-lightbox.visible .mockup-lightbox-frame {
    transform: scale(1) translateY(0);
}

/* Der Schliessen-Button steht seit dem Wegfall der Fensterleiste frei ueber
   dem Bild und braucht deshalb eine eigene Flaeche: als flaches Icon ginge er
   auf einem hellen Screenshot unter. Optik wie die Blaetter-Pfeile, aber
   bewusst ohne backdrop-filter - die Lightbox steht nicht in der
   html.gpu-software-Abschaltung, und eine deckende Flaeche tut es hier. */
.mockup-lightbox-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 44px;
    height: 44px;
    border: none;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: var(--t-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background var(--dur-fast), transform var(--dur-fast);
    z-index: 4;
}

.mockup-lightbox-close:hover {
    background: var(--accent, var(--tm-accent));
    transform: scale(1.1);
}

.mockup-lightbox-close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.mockup-lightbox-frame img {
    max-width: 100%;
    height: auto;
    /* Ohne Fensterleiste beginnt das Bild direkt an der Rahmenkante, die
       frueheren 32px Kopfhoehe entfallen aus der Rechnung. */
    max-height: calc(85vh - 20px);
    object-fit: contain;
    object-position: top;
    display: block;
}

/* Das Bild ist ein Block mit automatischer Breite und stuende sonst links,
   sobald der Rahmen breiter ist als es selbst - was passiert, wenn ein
   schmales Hochformat-Mockup mit mehreren Bildern die Miniaturleiste den
   Rahmen aufziehen laesst (gemessen: 57px aus der Mitte). */
.mockup-lightbox-img-wrapper img {
    margin-inline: auto;
}

/* Mit Miniaturleiste braucht das Bild rund 72px weniger Hoehe, sonst schiebt
   die Leiste den Rahmen ueber seine max-height von 85vh und wird vom
   overflow:hidden abgeschnitten. Bewusst ueber :has() statt ueber einen
   Flex-Umbau des Rahmens: der Rahmen ist width:fit-content, und als
   Flex-Container berechnet er seine Breite anders (gemessen 900px statt 712px)
   und rueckt das Bild aus der Mitte. Ohne mehrere Bilder bleibt alles beim
   Alten. */
.mockup-lightbox-frame:has(.mockup-lightbox-thumbs) img {
    max-height: calc(85vh - 80px);
}

/* ── SM-Video-Lightbox: erbt Backdrop/Fade/Close-Button von .mockup-lightbox,
   ueberschreibt nur die Rahmengroesse fuer ein 16:9-Embed statt eines
   Screenshots mit natuerlicher Bildgroesse (tour.js _openSmVideoLightbox).
   min() mit vh-Term haelt die Breite selbst kurz, statt die Hoehe per
   max-height zu kappen und das Verhaeltnis zu brechen (bei aspect-ratio +
   width:100% wuerde ein reines max-height die Breite nicht mitziehen). ── */
.mockup-video-lightbox-frame {
    width: min(90vw, 960px, calc(85vh * 16 / 9));
}

.mockup-video-lightbox-iframe-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
}

.mockup-video-lightbox-iframe-wrapper iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* ── Mockup Lightbox Gallery Nav ── */
.mockup-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: var(--t-md);
    transition: background var(--dur-fast), transform var(--dur-fast);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 3;
}

.mockup-lightbox-nav:hover {
    background: var(--accent);
    transform: translateY(-50%) scale(1.1);
}

.mockup-lightbox-prev {
    left: 10px;
}

.mockup-lightbox-next {
    right: 10px;
}

/* ── Miniaturleiste: zeigt bei mehreren Bildern, was es zu sehen gibt ──
   Loest die frueheren abstrakten Punkte ab. Die Leiste ist ein eigenes
   Flex-Kind des Frames (siehe .mockup-lightbox-frame), damit sie bei hohen
   Bildern nicht unter das overflow:hidden des Rahmens rutscht. */
.mockup-lightbox-thumbs {
    display: flex;
    /* safe center: bei mehr Miniaturen als Platz faellt die Ausrichtung auf
       flex-start zurueck, statt den Inhalt an BEIDEN Enden herauszudruecken
       (dort waere der erste Eintrag nicht mehr erreichbar). */
    justify-content: safe center;
    align-items: center;
    gap: 8px;
    padding: 10px 12px 12px 12px;
    width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
    /* Scrollbar verstecken wie bei der mobilen Logo-Leiste: sie kostet sonst
       Hoehe, die der Rahmen nicht hat, und die Leiste wird unten abgeschnitten
       (gemessen an einem 224px breiten Hochformat-Mockup). Gescrollt wird per
       Wischen, und der aktive Eintrag zieht sich selbst in Sicht. */
    scrollbar-width: none;
}

.mockup-lightbox-thumbs::-webkit-scrollbar {
    display: none;
}

.lightbox-thumb {
    flex: 0 0 auto;
    width: 72px;
    height: 48px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--radius-sm, 6px);
    background: var(--surface-hover, #f5f5f5);
    cursor: pointer;
    overflow: hidden;
    opacity: 0.55;
    transition: opacity var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
}

/* Schlaegt .mockup-lightbox-frame img (0,1,1): die Miniatur darf nicht der
   Hoehenregel des Hauptbildes folgen, sonst sprengt sie die Leiste. */
.mockup-lightbox-thumbs .lightbox-thumb img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: top;
    display: block;
}

.lightbox-thumb:hover {
    opacity: 1;
    transform: translateY(-2px);
}

.lightbox-thumb:focus-visible {
    outline: 2px solid var(--accent, var(--tm-accent));
    outline-offset: 2px;
}

.lightbox-thumb.active {
    opacity: 1;
    border-color: var(--accent, var(--tm-accent));
}

/* Tile highlight when its screenshot is shown in mockup (hover preview) */
.tile.mockup-active {
    box-shadow: 0 0 0 2px var(--accent, var(--tm-accent)), 0 4px 16px color-mix(in srgb, var(--tm-accent) 15%, transparent);
    transform: translateY(-2px);
    transition: box-shadow var(--dur-base) ease, transform var(--dur-base) ease;
}

/* Locked tile: stronger accent + subtle pulse to indicate "pinned" */
.tile.mockup-locked {
    box-shadow: 0 0 0 3px var(--accent, var(--tm-accent)), 0 6px 20px color-mix(in srgb, var(--tm-accent) 25%, transparent);
    transform: translateY(-2px);
    cursor: pointer;
}

.tile.mockup-locked::after {
    content: '\f08d';
    /* fa-thumbtack */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: var(--t-2xs);
    color: var(--accent, var(--tm-accent));
    opacity: 0.7;
}

/* ─── COMPACT STATS ─── */
.stats-compact {
    list-style: none;
    display: flex;
    gap: 4px;
    margin: 16px 0 0 0;
    padding: 6px 0 0 0;
    border-top: 1px solid color-mix(in srgb, var(--logo-text) 12%, transparent);
}

.stats-compact li {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.stats-compact .val {
    display: block;
    font-size: var(--t-md);
    font-weight: 800;
    color: var(--logo-text);
    line-height: 1.1;
    white-space: nowrap;
    margin-bottom: 3px;
    letter-spacing: -0.3px;
}

/* Compact icon + label row */
.kpi-lbl {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    position: static;
    cursor: default;
}

.kpi-lbl i {
    font-size: var(--t-2xs);
    color: var(--accent);
    opacity: 0.9;
    flex-shrink: 0;
}

/* Micro-label – always visible */
.kpi-tip {
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    color: var(--logo-text);
    opacity: 0.55;
    white-space: nowrap;
    position: static;
    pointer-events: auto;
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    transform: none;
}

/* Edit mode */
body.edit-mode .kpi-tip {
    cursor: default;
    border-radius: var(--radius-sm);
    padding: 0 2px;
}

/* SM packages grid – show with edit indicator in edit mode */
body.edit-mode .sm-packages-grid {
    display: block !important;
    border-radius: var(--radius-lg);
}

body.edit-mode .sm-price,
body.edit-mode .sm-label strong,
body.edit-mode .sm-label-sub,
body.edit-mode .sm-label-details,
body.edit-mode .sm-col-title,
body.edit-mode .sm-col-sub,
body.edit-mode .sm-section-title {
    cursor: default;
    border-radius: var(--radius-sm);
}

/* ── CRITICAL: override inherited pointer-events:none in edit mode ── */
/* locked-layer, content-locked, etc. all set pointer-events:none on parents.
   We must re-enable pointer-events and user-select for every editable element
   and its closest interactive ancestors so clicking works. */

/* Force default cursor everywhere in edit mode – no text/grab cursors */
body.edit-mode,
body.edit-mode *,
body.edit-mode [contenteditable="true"],
body.edit-mode [data-ek] {
    cursor: default !important;
}

body.edit-mode [contenteditable="true"],
body.edit-mode .tile-edit-btn,
body.edit-mode .sm-packages-grid,
body.edit-mode .sm-packages-grid * {
    pointer-events: auto !important;
    user-select: text !important;
}

/* Tiles: no text selection during drag */
body.edit-mode .tile,
body.edit-mode .tile * {
    user-select: none !important;
    -webkit-user-select: none !important;
}

body.edit-mode .package-layer.locked-layer {
    pointer-events: auto !important;
}


/* ─── Avg-age + income row (above mockup) ─── */
/* Zeile wird ausgespielt. Sie steht ein zweites Mal weiter unten in dieser
   Datei, der spaetere Block gewinnt: display dort mitziehen. */
.demo-meta {
    order: -1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    margin: 0 0 4px;
}

/* Chips: directly below demo-meta, still above the mockup */
.demographics-mini {
    order: -1;
    margin-bottom: 0;
}

.demo-meta span {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    font-size: var(--t-2xs);
    font-weight: 500;
    color: var(--logo-text);
    opacity: 0.8;
}

.demo-meta-icon {
    font-style: normal;
    font-size: var(--t-xs);
    font-weight: 700;
    color: var(--accent);
    flex-shrink: 0;
}

/* Gender span */
.meta-gender {
    padding-right: 0;
    border-left: 1px solid color-mix(in srgb, var(--logo-text) 15%, transparent);
}

.meta-gender .fa-mars {
    color: #5b9bd5;
}

.meta-gender .fa-venus {
    color: #d07ca3;
}

/* × remove button on meta items – edit mode only */
.meta-remove {
    display: none;
    cursor: pointer;
    font-size: var(--t-2xs);
    font-style: normal;
    opacity: 0.5;
    margin-left: 1px;
    line-height: 1;
}

body.edit-mode .meta-remove {
    display: inline;
}

body.edit-mode .meta-remove:hover {
    opacity: 1;
    color: #ff6b6b;
}

/* ─── Mini Demographics – flat, no card ─── */
.demographics-mini {
    display: none;
}



/* ─── Age + income row (below KPI stats) ─── */
/* Zweite, spaeter greifende Fassung derselben Zeile. Diese entscheidet, was
   sichtbar ist. */
.demo-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    margin: 0 0 4px;
}

.demo-meta span {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    font-size: var(--t-2xs);
    font-weight: 500;
    color: var(--logo-text);
    opacity: 0.8;
}

.demo-meta-icon {
    font-style: normal;
    font-size: var(--t-xs);
    font-weight: 700;
    color: var(--accent);
    flex-shrink: 0;
}

/* × on meta items – edit mode only */
.meta-remove {
    display: none;
    cursor: pointer;
    font-size: var(--t-2xs);
    font-style: normal;
    opacity: 0.5;
    margin-left: 2px;
    line-height: 1;
}

body.edit-mode .meta-remove {
    display: inline;
}

body.edit-mode .meta-remove:hover {
    opacity: 1;
    color: #ff6b6b;
}


/* Audience pills row – 3 per row, no separator line */
.demo-badges {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px 6px;
    align-items: center;
    justify-items: center;
    padding-top: 4px;
}

.pill-input-wrap {
    grid-column: 1 / -1;
}

/* Audience tag – plain text, no chip style */
.demo-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--logo-text);
    font-size: var(--t-2xs);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    opacity: 0.7;
    line-height: 1.4;
    text-align: center;
    padding: 2px 0;
}

/* × remove button inside pill – edit mode only */
.pill-remove {
    display: none;
    cursor: pointer;
    font-size: var(--t-2xs);
    opacity: 0.55;
    line-height: 1;
    margin-left: 2px;
    font-style: normal;
}

body.edit-mode .pill-remove {
    display: inline;
}

body.edit-mode .pill-remove:hover {
    opacity: 1;
    color: #ff6b6b;
}

/* + Add pill button – edit mode only */
.add-pill-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px dashed color-mix(in srgb, var(--accent) 50%, transparent);
    background: transparent;
    color: color-mix(in srgb, var(--logo-text) 50%, transparent);
    font-size: var(--t-sm);
    cursor: pointer;
    transition: border-color var(--dur-fast), color var(--dur-fast);
    flex-shrink: 0;
    line-height: 1;
}

body.edit-mode .add-pill-btn {
    display: flex;
}

body.edit-mode .add-pill-btn:hover {
    border-color: var(--accent);
    color: var(--logo-text);
}

/* Hidden when full (3 tags) */
body.edit-mode .add-pill-btn:disabled,
body.edit-mode .add-pill-btn[data-full="1"] {
    display: none;
}

/* Inline pill input row */
.pill-input-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
}

.pill-input {
    flex: 1;
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--logo-text);
    font-size: var(--t-2xs);
    font-weight: 500;
    padding: 3px 10px;
    outline: none;
    font-family: inherit;
}

.pill-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
}

.pill-input-ok {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: var(--accent);
    color: #fff;
    font-size: var(--t-base);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
    font-weight: 700;
}

/* ─── INTRO BOX SECTION (Slogan Box) ─── */
.intro-box-section {
    background: var(--surface);
    padding: 40px var(--page-pad);
    text-align: center;
}

.intro-box-section .portal-intro {
    max-width: 900px;
    margin: 0 auto;
    display: inline-block;
    text-align: left;
    width: 100%;
    /* Override margin bottom if needed */
    margin-bottom: 0;
}

.intro-box-section h2 {
    text-align: center;
    font-size: var(--t-xl);
    margin-bottom: 0;
}

/* Lang Toggle */
.lang-toggle-container {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 16px;
    background: var(--surface-hover);
    padding: 6px 12px;
    border-radius: var(--radius-pill);
}

.lang-btn {
    background: none;
    border: none;
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    transition: color var(--dur-fast);
}

.lang-btn.active {
    color: var(--text);
    text-decoration: underline;
    text-underline-offset: 4px;
}

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

.lang-divider {
    color: var(--border);
    font-size: var(--t-xs);
    user-select: none;
}


.lang-icon {
    font-size: var(--t-sm);
    color: var(--text-muted);
    margin-right: 2px;
}


/* Cleanup */
.footer {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    scroll-margin-top: calc(90px + var(--kit-switch-h, 0px));
}



/* ─── TRUST BAR ─── */
.trust-bar {
    max-width: 1200px;
    margin: 8px auto 0 auto;
    padding: 0 16px;
}

.trust-bar p {
    color: var(--text-muted);
    font-size: var(--t-sm);
    font-weight: 500;
    margin: 0 12px 0 0;
    white-space: nowrap;
    align-self: center;
}

.trust-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 4px;
}

.trust-logos::-webkit-scrollbar {
    display: none;
}

.trust-logos img {
    height: 24px;
    width: auto;
    max-width: 80px;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all var(--dur-base) ease;
    flex-shrink: 0;
}

.trust-logos img:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: translateY(-2px);
}

/*  STAGGERED TILE REVEAL & GREYSCALE FADE  */

/* Staggered Tile Reveal: tiles cascade in on upgrade */
@keyframes tile-cascade-in {
    0% {
        opacity: 0;
        transform: scale(0.85) translateY(8px);
        filter: brightness(1.4);
    }

    60% {
        opacity: 1;
        transform: scale(1.04) translateY(-2px);
        filter: brightness(1.15);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: brightness(1);
    }
}

.tile.cascade-reveal {
    animation: tile-cascade-in 0.45s var(--ease-out) both;
}

/* Greyscale Fade on Downgrade: tiles flash grey before fading out */
@keyframes tile-grey-flash {
    0% {
        filter: grayscale(0%) brightness(1);
    }

    40% {
        filter: grayscale(100%) brightness(0.8);
    }

    100% {
        filter: grayscale(100%) brightness(1);
        opacity: 0.3;
        transform: scale(0.95);
    }
}

.tile.grey-flash {
    animation: tile-grey-flash 0.5s ease-out forwards;
}

/*  STICKY MOBILE CTA (Item 4)  */
.sticky-cta-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    padding: 12px 20px 20px;
    background: linear-gradient(to top, var(--surface) 70%, transparent);
    pointer-events: none;
    justify-content: center;
}

.sticky-cta-btn {
    pointer-events: all;
    background: var(--accent, var(--tm-accent));
    color: #fff !important;
    font-size: var(--t-base);
    font-weight: 700;
    padding: 14px 40px;
    border-radius: var(--radius-pill);
    text-decoration: none;
    box-shadow: var(--shadow-2);
    transition: transform var(--dur-fast), box-shadow var(--dur-fast);
    white-space: nowrap;
}

.sticky-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-3);
}

.sticky-cta-bar.is-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(100%);
    transition: opacity var(--dur-base), transform var(--dur-base);
}

.sticky-cta-bar.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity var(--dur-base), transform var(--dur-base);
}

@media (min-width: 769px) {
    .sticky-cta-bar {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .sticky-cta-bar {
        display: flex;
    }

    /* Prevent footer from being hidden behind sticky bar */
    .footer {
        padding-bottom: 80px;
    }

    /* Task 4 (2026-07-05): Partnershipmanager werden auf Mobil jetzt kompakt
       ANGEZEIGT (vorher hier per display:none versteckt, nur E-Mail-CTA sichtbar).
       Die kompakte Zeilen-Optik kommt aus dem @media(max-width:600px)-Block. */

    .team-cta {
        margin-top: 0 !important;
    }
}

/* 
   EMOTIONAL TIER-SWITCH EFFECTS  (7 total)
    */

/*  1. Coin Rain  */
.coin-particle {
    position: absolute;
    font-size: var(--t-lg);
    pointer-events: none;
    z-index: 20;
    animation: coin-fall var(--dur, 1.4s) ease-in forwards;
    opacity: 1;
    user-select: none;
}

@keyframes coin-fall {
    0% {
        transform: translateY(-30px) rotate(0deg) scale(1);
        opacity: 1;
    }

    70% {
        opacity: 1;
    }

    100% {
        transform: translateY(var(--ty, 140px)) rotate(var(--rot, 180deg)) scale(0.6);
        opacity: 0;
    }
}

/*  2. Ripple Wave – thick glowing rings  */
.ripple-ring {
    position: absolute;
    border-radius: 50%;
    border: 4px solid var(--accent, var(--tm-accent));
    pointer-events: none;
    z-index: 15;
    box-shadow: 0 0 12px 4px color-mix(in srgb, var(--tm-accent) 50%, transparent);
    transform: scale(0);
    animation: ripple-expand 0.9s var(--ease-out) forwards;
}

.ripple-ring.ring-2 {
    animation-delay: 0.18s;
    border-color: color-mix(in srgb, var(--tm-accent) 50%, transparent);
}

@keyframes ripple-expand {
    0% {
        transform: scale(0);
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }

    100% {
        transform: scale(6);
        opacity: 0;
    }
}

/*  3. Tile Glow Domino – vivid bounce + glow  */
@keyframes tile-domino-glow {
    0% {
        box-shadow: 0 0 0 0 transparent;
        border-color: var(--border);
        transform: scale(1);
    }

    25% {
        box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 90%, transparent),
            0 0 32px 10px color-mix(in srgb, var(--accent) 55%, transparent);
        border-color: var(--accent);
        transform: scale(1.09);
    }

    65% {
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent);
        border-color: var(--accent);
        transform: scale(1.03);
    }

    100% {
        box-shadow: 0 0 0 0 transparent;
        border-color: var(--border);
        transform: scale(1);
    }
}

.tile.domino-glow {
    animation: tile-domino-glow 0.85s var(--ease-out) both;
}

/*  4. Spotlight – strong full-panel burst  */
.portal-spotlight {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 10;
    animation: spotlight-flash 1.1s ease-out forwards;
}

@keyframes spotlight-flash {
    0% {
        opacity: 0;
        background: radial-gradient(ellipse at 50% 42%,
                color-mix(in srgb, var(--accent) 65%, white) 0%,
                color-mix(in srgb, var(--accent) 28%, transparent) 40%,
                transparent 72%);
    }

    12% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        background: radial-gradient(ellipse at 50% 42%, transparent 0%, transparent 70%);
    }
}

/*  5. Star Burst  */
.star-particle {
    position: absolute;
    font-size: var(--t-base);
    pointer-events: none;
    z-index: 20;
    animation: star-explode var(--dur, 0.9s) ease-out forwards;
    user-select: none;
}

@keyframes star-explode {
    0% {
        transform: translate(0, 0) scale(1.2);
        opacity: 1;
    }

    100% {
        transform: translate(var(--tx), var(--ty)) scale(0);
        opacity: 0;
    }
}

/*  6. Tile Shrink (Downgrade) – dramatic collapse  */
@keyframes tile-shrink-out {
    0% {
        transform: scale(1);
        opacity: 1;
        filter: brightness(1);
    }

    20% {
        transform: scale(1.1);
        opacity: 1;
        filter: brightness(1.3);
    }

    100% {
        transform: scale(0.65);
        opacity: 0.25;
        filter: grayscale(1) brightness(0.6);
    }
}

.tile.shrink-out {
    animation: tile-shrink-out 0.7s var(--ease-inout) forwards;
}

/*  7. Page Fold (Downgrade) – deep 3D flip  */
@keyframes tile-page-fold {
    0% {
        transform: perspective(250px) rotateX(0deg);
        opacity: 1;
        filter: brightness(1);
    }

    45% {
        transform: perspective(250px) rotateX(-65deg);
        opacity: 0.4;
        filter: grayscale(0.9) brightness(0.75);
    }

    100% {
        transform: perspective(250px) rotateX(0deg);
        opacity: 0.25;
        filter: grayscale(1);
    }
}

.tile.page-fold {
    animation: tile-page-fold 0.75s var(--ease-inout) forwards;
    transform-origin: top center;
}

/* ═══════════════════════════════════════════════════════════════
   FAQ SECTION – Premium Accordion
   ═══════════════════════════════════════════════════════════════ */
.faq-section {
    width: 100%;
    margin-bottom: 0;
    scroll-margin-top: calc(90px + var(--kit-switch-h, 0px));
}

/* Abstand zwischen Testimonials und FAQ verdichten: gleiche Rechnung wie bei
   .testimonials-section, damit die FAQ-Box bei kleinem Gap nicht in die
   Testimonials laeuft. */
.testimonials-section+.faq-section {
    margin-top: calc(22px - var(--portals-gap, 72px));
}

.faq-inner {
    background: var(--panel-bg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    box-shadow: var(--shadow-main);
    padding: 48px 48px 56px;
}

.faq-title {
    font-size: var(--t-xl);
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--text);
    margin: 0 0 6px 0;
    text-transform: none;
}

.faq-subtitle {
    font-size: var(--t-sm);
    color: var(--text-muted);
    margin: 0 0 36px 0;
    line-height: 1.5;
}

/* ── Category jump-nav (chips) ─────────────────────── */
.faq-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 22px;
}

.faq-nav[hidden] {
    display: none;
}

.faq-nav-chip {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: 999px;
    padding: 7px 15px;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--dur-base) ease,
        border-color var(--dur-base) ease,
        background var(--dur-base) ease;
}

.faq-nav-chip:hover {
    color: var(--tm-accent);
    border-color: color-mix(in srgb, var(--tm-accent) 40%, var(--border-light));
    background: color-mix(in srgb, var(--tm-accent) 7%, var(--surface));
}

/* Editor bearbeitet die Header direkt -> Sprung-Nav dort ausblenden */
body.edit-mode .faq-nav {
    display: none;
}

/* Aktiver Chip = aktuell ausgefahrene Kategorie */
.faq-nav-chip.is-active,
.faq-nav-chip.is-active:hover {
    color: #fff;
    background: var(--tm-accent);
    border-color: var(--tm-accent);
}

/* Hinweis unter der Chip-Nav, solange keine Kategorie gewaehlt ist */
.faq-cat-hint {
    font-size: var(--t-sm);
    color: var(--text-muted);
    margin: 2px 0 6px;
    padding: 14px 2px;
    text-align: center;
    opacity: 0.85;
}

body.edit-mode .faq-cat-hint {
    display: none !important;
}

/* ── Ausklapp-Ansicht (>=2 Kategorien, nur View-Mode) ──────────
   Nur die aktive Kategorie ist sichtbar; inaktive Fragen sind ausgeblendet,
   die In-List-Kategorie-Header werden durch die Chips oben ersetzt. Der
   body:not(.edit-mode)-Guard laesst den Edit-Mode komplett unberuehrt. */
body:not(.edit-mode) .faq-list.faq-collapsible .faq-item.faq-hidden {
    display: none;
}

body:not(.edit-mode) .faq-list.faq-collapsible .faq-item:has(.faq-cat-heading) {
    display: none;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ── Individual FAQ card ───────────────────────────── */
.faq-item {
    position: relative;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
    background: var(--surface);
    box-shadow: var(--shadow-1);
    transition: background var(--dur-base) ease,
        border-color var(--dur-base) ease,
        box-shadow var(--dur-base) var(--ease-inout),
        transform var(--dur-base) ease;
    overflow: hidden;
}

/* Left accent stripe (hidden by default) */
.faq-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--tm-accent, var(--tm-accent));
    opacity: 0;
    transform: scaleY(0);
    transform-origin: center;
    transition: opacity var(--dur-base) ease, transform var(--dur-base) var(--ease-out);
    z-index: 1;
}

.faq-item:hover:not(.is-open) {
    border-color: var(--border);
    box-shadow: var(--shadow-2);
    transform: translateY(-1px);
}

/* Open state – neutral, no accent tint or stripe */
.faq-item.is-open {
    border-color: var(--border);
    background: var(--surface);
    box-shadow: var(--shadow-3);
    transform: translateY(-1px);
}

.faq-item.is-open::before {
    opacity: 0;
    transform: scaleY(0);
}

/* ── Category heading ──────────────────────────────── */
/* Spezielle .faq-item-Variante: gruppiert Fragen thematisch. Kein Accordion
   (kein .faq-question -> _initFaqAccordion ueberspringt es), keine Karten-Optik.
   Erkennung per :has(.faq-cat-heading), damit die Render-Pfade unveraendert
   bleiben (Header ist ein normales .faq-item im _faqItems-Array). */
.faq-item:has(.faq-cat-heading) {
    border: none;
    background: none;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
    margin-top: 22px;
}

.faq-list > .faq-item:has(.faq-cat-heading):first-child {
    margin-top: 2px;
}

.faq-item:has(.faq-cat-heading):hover {
    transform: none;
    box-shadow: none;
    border: none;
}

.faq-item:has(.faq-cat-heading)::before {
    display: none;
}

.faq-cat-heading {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 0 6px 10px 6px;
    border-bottom: 1px solid var(--border-light);
}

.faq-cat-text {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--tm-accent);
}

/* ── Question (trigger) ────────────────────────────── */
.faq-question {
    display: flex;
    align-items: center;
    padding: 16px 22px;
    cursor: pointer;
    font-family: var(--font-heading);
    font-size: var(--t-base);
    font-weight: 500;
    color: var(--text);
    list-style: none;
    transition: color var(--dur-base) ease;
    gap: 16px;
    user-select: none;
    -webkit-user-select: none;
}

.faq-question::-webkit-details-marker {
    display: none;
}

.faq-question:hover {
    color: var(--tm-accent, var(--tm-accent));
}

/* Divider between question and answer when open */
.faq-item.is-open .faq-question {
    color: var(--tm-accent);
    font-weight: 700;
    padding-bottom: 16px;
    border-bottom: 1px solid color-mix(in srgb, var(--tm-accent) 15%, var(--border-light));
}

/* Numbered badge – hidden (replaced by cleaner layout) */
.faq-num {
    display: none;
}

/* Question text */
.faq-q-text {
    flex: 1;
    min-width: 0;
    line-height: 1.4;
}

/* Chevron icon – clean, minimal */
.faq-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: transparent;
    flex-shrink: 0;
    transition: background var(--dur-base) ease,
        transform var(--dur-base) var(--ease-out);
}

.faq-chevron::after {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-right: 2.5px solid var(--text-muted);
    border-bottom: 2.5px solid var(--text-muted);
    transform: rotate(45deg) translate(-1px, -1px);
    transition: border-color var(--dur-base) ease;
}

.faq-item:hover .faq-chevron {
    background: color-mix(in srgb, var(--tm-accent) 8%, transparent);
}

.faq-item:hover .faq-chevron::after {
    border-color: var(--tm-accent);
}

.faq-item.is-open .faq-chevron {
    background: color-mix(in srgb, var(--tm-accent) 10%, transparent);
    transform: rotate(180deg);
}

.faq-item.is-open .faq-chevron::after {
    border-color: var(--tm-accent);
}

/* ── Answer panel (animated) ───────────────────────── */
/* Grid-Rows-Collapse statt JS-gemessenem max-height: robust gegen Re-Renders,
   kein Einfrieren einer veralteten scrollHeight-Messung (Bugfix Bannerformate-Clip).
   minmax(0, Nfr) statt Nfr: plain 0fr = minmax(auto, 0fr), und das auto-Minimum
   rechnet das padding des Grid-Items (.faq-answer) mit ein -> Track kollabiert nur
   auf ~44px statt 0, geschlossene Boxen bleiben zu hoch. minmax(0, ...) erzwingt
   echtes Track-Minimum 0. */
.faq-answer-wrap {
    display: grid;
    grid-template-rows: minmax(0, 0fr);
    overflow: hidden;
    transition: grid-template-rows var(--dur-base) var(--ease-inout),
        opacity var(--dur-base) ease;
    opacity: 0;
}

.faq-item.is-open .faq-answer-wrap {
    grid-template-rows: minmax(0, 1fr);
    opacity: 1;
}

/* Grid-Kind muss auf 0 schrumpfen koennen, sonst kollabiert die Zeile nicht */
.faq-answer-wrap > .faq-answer {
    min-height: 0;
}

.faq-answer {
    padding: 16px 24px 20px 24px;
    font-size: var(--t-sm);
    color: var(--text-muted);
    line-height: 1.8;
}

.faq-answer p {
    margin: 0 0 12px 0;
}

.faq-answer p:last-child {
    margin-bottom: 0;
}

.faq-answer ul {
    margin: 8px 0 14px 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.faq-answer li {
    color: var(--text);
    line-height: 1.6;
}

.faq-answer strong {
    color: var(--text);
    font-weight: 700;
}

/* ── FAQ Edit Mode ─────────────────────────────────── */
.faq-remove-btn {
    display: none;
    position: absolute;
    top: 14px;
    right: 28px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ef5350;
    border: 2px solid var(--bg, #0a0c14);
    color: #fff;
    font-size: var(--t-2xs);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    z-index: 10;
    pointer-events: auto;
    transition: transform var(--dur-fast);
}

.faq-remove-btn:hover {
    transform: scale(1.2);
}

body.edit-mode .faq-remove-btn {
    display: flex;
}

.faq-add-btn {
    display: none;
    width: 100%;
    padding: 14px;
    margin-top: 8px;
    border: 2px dashed var(--border-light);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-muted);
    font-size: var(--t-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--dur-fast);
    gap: 6px;
    align-items: center;
    justify-content: center;
}

.faq-add-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 5%, transparent);
}

body.edit-mode .faq-add-btn {
    display: flex;
}

.nav-link[data-target="faq"] {
    display: none;
}

@media (max-width: 860px) {
    .faq-inner {
        padding: 28px 20px;
    }

    .faq-answer {
        padding-left: 20px;
    }
}

/*  Portal FAQ hint  */
.portal-faq-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 18px 0;
    font-size: var(--t-xs);
    font-weight: 500;
    color: var(--accent);
    text-decoration: none;
    opacity: 0.75;
    transition: opacity var(--dur-fast), gap var(--dur-fast);
}

.portal-faq-hint:hover {
    opacity: 1;
    gap: 7px;
}

.portal-faq-hint i {
    font-size: var(--t-xs);
}


/* 
   CONVERSION SECTION
    */
.conversion-section {
    width: 100%;
    margin-bottom: 0;
    scroll-margin-top: calc(90px + var(--kit-switch-h, 0px));
}

.conversion-inner {
    background: linear-gradient(135deg,
            color-mix(in srgb, var(--accent) 12%, var(--surface)) 0%,
            var(--surface) 60%);
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
    border-radius: var(--radius);
    padding: 48px 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Decorative glow blob */
.conversion-inner::before {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 18%, transparent) 0%, transparent 70%);
    top: -100px;
    right: -100px;
    pointer-events: none;
}

.conversion-badge {
    display: inline-block;
    font-size: var(--t-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    padding: 4px 14px;
    border-radius: var(--radius-xl);
    margin-bottom: 16px;
}

.conversion-title {
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--text);
    margin: 0 0 12px 0;
}

.conversion-sub {
    font-size: var(--t-base);
    color: var(--text-muted);
    max-width: 520px;
    margin: 0 auto 32px auto;
    line-height: 1.6;
}

.conversion-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

.conv-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 26px;
    background: var(--accent);
    color: #fff;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: var(--t-sm);
    text-decoration: none;
    transition: background var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast);
    box-shadow: var(--shadow-2);
}

.conv-btn-primary:hover {
    background: color-mix(in srgb, var(--accent) 80%, #000);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px color-mix(in srgb, var(--accent) 62%, transparent);
}

.conv-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 26px;
    background: transparent;
    color: var(--text);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    font-weight: 500;
    font-size: var(--t-sm);
    text-decoration: none;
    transition: border-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}

.conv-btn-secondary:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════════════════
   EDIT MODE
   ═══════════════════════════════════════════════════════════════ */

/* Nav toggle button */
.edit-mode-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 32px;
    padding: 0 10px;
    border-radius: var(--radius-xl);
    border: 1.5px solid transparent;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--dur-fast);
    font-size: var(--t-xs);
    font-weight: 500;
    white-space: nowrap;
}

.edit-mode-btn::after {
    content: 'EDIT';
    font-size: var(--t-2xs);
    font-weight: 700;
    letter-spacing: 0.5px;
    opacity: 0.6;
}

.edit-mode-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}

/* Active edit mode – highly visible */
.edit-mode-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
    animation: edit-pulse 2s ease-in-out infinite;
}

.edit-mode-btn.active::after {
    content: 'AKTIV';
    opacity: 1;
}

@keyframes edit-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
    }

    50% {
        box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 10%, transparent);
    }
}

/* Top bar indicator when edit mode is on */
body.edit-mode .site-nav::before {
    content: '✏ BEARBEITUNGSMODUS AKTIV – Klicke auf Texte zum Bearbeiten';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 22px;
    background: var(--accent);
    color: #fff;
    font-size: var(--t-2xs);
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    animation: edit-bar-in 0.3s ease;
}

@keyframes edit-bar-in {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Push nav content down to make room for the bar */
body.edit-mode .site-nav {
    padding-top: 22px;
}

/* Tiles in edit mode */
body.edit-mode .tile {
    cursor: default;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
}

body.edit-mode .tile:active {
    cursor: default;
}

/* Suppress tooltips and hover highlights in edit mode */
body.edit-mode .tile .tile-tooltip {
    display: none !important;
}

body.edit-mode .tile:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* Icon wiggle animation in edit mode (replaces dashed outline) */
@keyframes tile-wiggle {

    0%,
    100% {
        transform: rotate(0deg) scale(1);
    }

    15% {
        transform: rotate(-18deg) scale(1.3);
    }

    30% {
        transform: rotate(15deg) scale(0.8);
    }

    45% {
        transform: rotate(-12deg) scale(1.25);
    }

    60% {
        transform: rotate(10deg) scale(0.85);
    }

    75% {
        transform: rotate(-5deg) scale(1.1);
    }
}

body.edit-mode .tile .tile-icon i {
    animation: tile-wiggle 1.6s ease-in-out infinite;
    transform-origin: center center;
}

/* SortableJS drag states */
.sortable-ghost {
    opacity: 0.35;
    background: color-mix(in srgb, var(--accent) 15%, var(--panel-bg));
}

.sortable-drag {
    opacity: 1 !important;
}

/* Contenteditable text fields in edit mode */
/* ── All editable fields: always show dashed underline in edit mode ── */
body.edit-mode [data-ek][contenteditable="true"] {
    border-radius: 0;
    cursor: default;
    min-width: 20px;
    padding-bottom: 1px;
    transition: background var(--dur-fast), border-color var(--dur-fast);
}

body.edit-mode [data-ek][contenteditable="true"]:hover {
    outline: none;
}

body.edit-mode [data-ek][contenteditable="true"]:focus {
    outline: none;
}

/* ── Preisfeld im Basispreis-Modus (Rabatt sichtbar) ──────────────────────
   Solange ein Rabatt laeuft, zeigt das Feld beim Fokus nur noch den Basispreis
   statt Streichpreis + Rabattpreis (siehe _beginBasePriceEdit in tour.js).
   Ohne Markierung wirkt der Sprung von 600 auf 750 wie ein Fehler; der Tint
   sagt "hier steht gerade eine andere Zahl als eben". Markenton bleibt dabei
   Flaeche und Rand, nie die Zahl selbst (Pitfall 28). */
body.edit-mode .editing-base-price {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
    border-radius: 4px;
}

/* Per-tile pencil button */
.tile-edit-btn {
    display: none;
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: var(--t-2xs);
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: transform var(--dur-fast);
    box-shadow: var(--shadow-1);
}

.tile-edit-btn:hover {
    transform: scale(1.15);
}

body.edit-mode .tile-edit-btn {
    display: flex;
}

/* Label editor popover */
.tile-label-popover {
    position: fixed;
    z-index: 9999;
    background: var(--panel-bg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-3);
    padding: 14px 16px;
    min-width: 480px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Social URL edit popover */
.social-url-popover {
    position: absolute;
    z-index: 9998;
    background: var(--panel-bg, #161b28);
    border: 1px solid var(--border-light, rgba(255, 255, 255, .12));
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-3);
    padding: 14px 16px;
    width: 300px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    backdrop-filter: blur(12px);
    animation: popFadeIn .15s ease both;
}

@keyframes popFadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sup-header {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: var(--t-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--accent, #3b82f6);
}

.sup-close {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--text-muted, rgba(255, 255, 255, .4));
    cursor: pointer;
    font-size: var(--t-sm);
    padding: 2px 4px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
}

.sup-close:hover {
    color: var(--text, #f0f0f5);
}

.sup-input {
    width: 100%;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light, rgba(255, 255, 255, .12));
    background: rgba(255, 255, 255, .05);
    color: var(--text, #f0f0f5);
    font-size: var(--t-sm);
    font-family: inherit;
    outline: none;
}

.sup-input:focus {
    border-color: rgba(59, 130, 246, .5);
}

.sup-label {
    font-size: var(--t-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(255, 255, 255, .4);
    margin-top: 0;
}

.sup-actions {
    display: flex;
    justify-content: flex-end;
}

.sup-save {
    padding: 7px 14px;
    border-radius: var(--radius-sm);
    border: none;
    background: var(--accent, #3b82f6);
    color: #0a0c14;
    font-size: var(--t-xs);
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: opacity var(--dur-fast);
}

.sup-save:hover {
    opacity: .88;
}

/* Visual hint: social links get a subtle ring in edit mode */
body.edit-mode .social-strip a,
body.edit-mode .social-strip span {
    border-radius: var(--radius-sm);
    cursor: pointer !important;
}

body.edit-mode .social-strip a:hover,
body.edit-mode .social-strip span:hover {
    outline-color: rgba(245, 158, 11, .85);
    background: rgba(245, 158, 11, .07);
}

/* ── Social: + Add Button ──────────────────────────────── */
.social-add-btn {
    display: none;
    align-items: center;
    justify-content: center;
    font-size: var(--t-base);
    background: rgba(245, 158, 11, .15) !important;
    border: 2px dashed rgba(245, 158, 11, .45) !important;
    color: var(--accent, #f59e0b) !important;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--dur-fast), border-color var(--dur-fast);
    min-height: 36px;
    box-shadow: none !important;
    outline: none !important;
}

.social-add-btn:hover {
    background: rgba(245, 158, 11, .25) !important;
    border-color: rgba(245, 158, 11, .7) !important;
    transform: none;
    filter: none;
}

body.edit-mode .social-add-btn {
    display: flex;
}

/* ── Social: × Remove Button ──────────────────────────── */
.social-remove-btn {
    display: none;
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ef5350;
    border: 2px solid var(--bg, #0a0c14);
    color: #fff;
    font-size: var(--t-2xs);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    z-index: 5;
    transition: transform var(--dur-fast);
}

.social-remove-btn:hover {
    transform: scale(1.2);
}

body.edit-mode .social-remove-btn {
    display: flex;
}

/* ── Social: Platform Picker Popover ──────────────────── */
.sap-wide {
    width: 340px;
}

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

.sap-platform-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 4px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .04);
    color: var(--text, #f0f0f5);
    font-size: var(--t-2xs);
    font-family: inherit;
    cursor: pointer;
    transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
}

.sap-platform-btn i {
    font-size: var(--t-md);
}

.sap-platform-btn span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80px;
}

.sap-platform-btn:hover:not([disabled]) {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .18);
    transform: translateY(-1px);
}

.sap-platform-btn.selected {
    background: rgba(245, 158, 11, .18);
    border-color: rgba(245, 158, 11, .6);
    color: var(--accent, #f59e0b);
}

.sap-platform-btn.sap-used {
    opacity: .3;
    cursor: not-allowed;
}

.tile-label-popover label {
    font-size: var(--t-2xs);
    font-weight: 500;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.5px;
}

.tile-label-popover input {
    width: 100%;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
    background: var(--bg);
    color: var(--text);
    font-size: var(--t-sm);
    font-family: inherit;
    outline: none;
    transition: border-color var(--dur-fast);
}

.tile-label-popover input:focus {
    border-color: var(--accent);
}

.tile-label-popover-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    margin-top: 4px;
}

.tile-label-popover-actions button {
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    border: none;
    font-size: var(--t-xs);
    font-weight: 500;
    cursor: pointer;
    transition: opacity var(--dur-fast);
}

.tlp-save {
    background: var(--accent);
    color: #fff;
}

.tlp-cancel {
    background: var(--border-light);
    color: var(--text);
}

.tlp-save:hover,
.tlp-cancel:hover {
    opacity: 0.8;
}

/* Save toast */
.edit-save-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: #22c55e;
    color: #fff;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-size: var(--t-xs);
    font-weight: 500;
    z-index: 9998;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--dur-base), transform var(--dur-base);
    pointer-events: none;
}

.edit-save-toast.show {
    opacity: 1;
    transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════
   TILE EDIT MODAL
   ═══════════════════════════════════════════════════════════ */

.tile-edit-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9000;
    align-items: center;
    justify-content: center;
}

.tile-edit-modal.open {
    display: flex;
}

.tile-edit-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    animation: te-backdrop-in 0.2s ease;
}

@keyframes te-backdrop-in {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.tile-edit-dialog {
    position: relative;
    z-index: 1;
    background: var(--te-bg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-modal);
    width: min(560px, 95vw);
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: te-dialog-in 0.25s var(--ease-out);
}

@keyframes te-dialog-in {
    from {
        opacity: 0;
        transform: scale(0.93) translateY(16px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

#tileEditModal {
    --te-accent: #f5a623;
    --te-bg: var(--panel-bg, #161b22);
    --te-surface: var(--surface, #21262d);
    --te-border: var(--border, rgba(255, 255, 255, 0.1));
    --te-text: var(--text, #c9d1d9);
    --te-muted: var(--text-muted, #8b949e);
    --te-border-focus: var(--te-accent);
}

[data-theme="dark"] #tileEditModal {
    --te-bg: var(--panel-bg, #161b22);
    --te-surface: var(--surface, #21262d);
    --te-border: var(--border, rgba(255, 255, 255, 0.1));
    --te-text: var(--text, #c9d1d9);
    --te-muted: var(--text-muted, #8b949e);
    --te-border-focus: var(--te-accent);
}

.tile-edit-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px 14px;
    border-bottom: 1px solid var(--te-border);
    background: var(--te-surface);
}

.tile-edit-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: var(--t-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--te-accent);
}

.tile-edit-close {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: color-mix(in srgb, var(--te-text) 5%, transparent);
    color: var(--te-text);
    cursor: pointer;
    font-size: var(--t-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--dur-fast);
}

.tile-edit-close:hover {
    background: color-mix(in srgb, var(--te-text) 15%, transparent);
}

.tile-edit-body {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 18px 22px 10px;
    overflow-y: auto;
    flex: 1;
}

/* Icon section: preview + inline grid side by side */
.te-icon-section {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--border-light);
}

.te-icon-preview {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--te-accent, #f59e0b) 12%, transparent);
    border: 1.5px solid color-mix(in srgb, var(--te-accent, #f59e0b) 35%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--t-xl);
    color: var(--te-accent, #f59e0b);
    transition: border-color var(--dur-fast);
}

.te-icon-grid-wrap {
    flex: 1;
}

/* tile-edit-icon-wrap kept for backwards compat (not used in new layout) */
.tile-edit-icon-wrap {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--te-accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--te-accent) 25%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--t-lg);
    color: var(--te-accent);
}

.tile-edit-fields {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
}

.te-label {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.te-label>span {
    font-size: var(--t-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--te-muted);
}

.te-input,
.te-textarea {
    width: 100%;
    padding: 9px 12px;
    border-radius: var(--radius-md);
    border: 1.5px solid var(--te-border);
    background: var(--te-surface);
    color: var(--te-text);
    font-size: var(--t-sm);
    font-family: inherit;
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
    resize: none;
    box-sizing: border-box;
}

.te-input:focus,
.te-textarea:focus {
    outline: none;
    border-color: var(--te-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--te-accent) 15%, transparent);
}

.te-textarea {
    resize: vertical;
    min-height: 90px;
    line-height: 1.5;
}

.tile-edit-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 22px 18px;
    border-top: 1px solid var(--border-light);
}

.te-btn-cancel {
    padding: 9px 18px;
    border-radius: var(--radius-md);
    border: 1.5px solid var(--te-border);
    background: transparent;
    color: var(--te-muted);
    font-size: var(--t-xs);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--dur-fast);
}

.te-btn-cancel:hover {
    border-color: var(--te-muted);
    color: var(--te-text);
}

.te-btn-save {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 22px;
    border-radius: var(--radius-md);
    border: none;
    background: var(--te-accent);
    color: #fff;
    font-size: var(--t-xs);
    font-weight: 700;
    cursor: pointer;
    transition: all var(--dur-fast);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--te-accent) 35%, transparent);
}

.te-btn-save:hover {
    filter: brightness(1.1);
}

/* Delete button – shown only when editing an existing tile */
.te-btn-delete {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: var(--radius-md);
    border: 1.5px solid rgba(239, 83, 80, 0.4);
    background: transparent;
    color: #ef5350;
    font-size: var(--t-xs);
    font-weight: 500;
    cursor: pointer;
    margin-right: auto;
    transition: all var(--dur-fast);
}

.te-btn-delete:hover {
    background: rgba(239, 83, 80, 0.08);
    border-color: #ef5350;
}

.te-btn-delete.hidden {
    display: none;
}

/* Icon wrap – clickable to open picker */
.tile-edit-icon-wrap {
    position: relative;
    cursor: pointer;
}

.te-icon-hint {
    display: none;
    position: absolute;
    bottom: -4px;
    right: -4px;
    font-size: var(--t-2xs);
    background: var(--te-accent, #f59e0b);
    color: #fff;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
}

.tile-edit-icon-wrap:hover .te-icon-hint {
    display: flex;
}

/* Icon Picker dropdown */
/* .te-icon-picker no longer used (inline grid replaces dropdown) */
.te-icon-picker {
    display: none;
}

.te-icon-picker-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}

.te-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    border: 1.5px solid transparent;
    background: transparent;
    color: var(--text-muted, #888);
    font-size: var(--t-base);
    cursor: pointer;
    transition: all var(--dur-fast);
}

.te-icon-btn:hover,
.te-icon-btn.selected {
    background: color-mix(in srgb, var(--te-accent, #f59e0b) 12%, transparent);
    border-color: var(--te-accent, #f59e0b);
    color: var(--te-accent, #f59e0b);
}


/* Tier checkboxes (create mode) */
.te-tier-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 6px;
    padding: 8px 10px;
    background: var(--input-bg, rgba(0, 0, 0, 0.03));
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border-light);
}

.te-tier-row[aria-hidden="true"] {
    display: none;
}

/* Paket-Zuordnung: drei Stufen als Segment-Auswahl.
   Eine Stufe legt Tier-Flags UND Zeile fest, deshalb ist genau eine aktiv. */
.te-tier-pick-wrap[aria-hidden="true"] {
    display: none;
}

.te-tier-pick {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    background: var(--input-bg, rgba(0, 0, 0, 0.03));
    border: 1.5px solid var(--border-light);
    border-radius: var(--radius-sm);
}

.te-tier-opt {
    padding: 9px 6px;
    min-height: 40px;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--te-text, inherit);
    background: transparent;
    border: none;
    border-radius: calc(var(--radius-sm) - 3px);
    cursor: pointer;
    transition: background var(--dur-fast), color var(--dur-fast);
}

.te-tier-opt:hover:not(.is-active) {
    background: color-mix(in srgb, var(--te-accent, #f59e0b) 10%, transparent);
}

.te-tier-opt.is-active {
    background: color-mix(in srgb, var(--te-accent, #f59e0b) 18%, transparent);
    box-shadow: inset 0 0 0 1.5px var(--te-accent, #f59e0b);
    color: var(--te-accent, #f59e0b);
    font-weight: 600;
}

.te-tier-opt:focus-visible {
    outline: 2px solid var(--te-accent, #f59e0b);
    outline-offset: 2px;
}

.te-tier-hint {
    margin: 6px 2px 0;
    font-size: 0.74rem;
    line-height: 1.4;
    color: var(--text-muted);
}

/* Mockup image upload zone */
.te-upload-zone {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    border: 1.5px dashed var(--border-light);
    border-radius: var(--radius-md);
    background: var(--input-bg, rgba(0, 0, 0, 0.02));
    cursor: pointer;
    overflow: hidden;
    transition: border-color var(--dur-fast), background var(--dur-fast);
}

.te-upload-zone:hover,
.te-upload-zone.drag-over {
    border-color: var(--te-accent, #f59e0b);
    background: color-mix(in srgb, var(--te-accent, #f59e0b) 5%, transparent);
}

.te-upload-add {
    gap: 7px;
    font-size: var(--t-xs);
    color: var(--text-muted, #888);
    flex-direction: column;
    padding: 10px;
}

.te-img-file-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

/* ── Thumbnail strip ── */
.te-img-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.te-thumb {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1.5px solid var(--border-light);
    background: var(--input-bg, #f5f5f5);
    flex-shrink: 0;
}

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

.te-thumb-del {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--t-2xs);
    opacity: 0;
    transition: opacity var(--dur-fast);
    padding: 0;
}

.te-thumb:hover .te-thumb-del {
    opacity: 1;
}

/* ── Crop Modal ─────────────────────────────────── */
.crop-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.crop-dialog {
    background: var(--panel-bg, #fff);
    border: 1px solid var(--border-light, rgba(0, 0, 0, 0.08));
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-modal);
    width: min(800px, 90vw);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: cropFadeIn 0.25s ease-out;
}

@keyframes cropFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.crop-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--border-light, rgba(0, 0, 0, 0.08));
}

.crop-header h3 {
    margin: 0;
    font-size: var(--t-base);
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.crop-header h3 i {
    color: var(--accent);
}

.crop-close {
    background: none;
    border: none;
    font-size: var(--t-md);
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    transition: background var(--dur-fast), color var(--dur-fast);
}

.crop-close:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text);
}

.crop-body {
    flex: 1;
    overflow: hidden;
    min-height: 300px;
    max-height: 60vh;
    background: #1a1a2e;
    display: flex;
    align-items: center;
    justify-content: center;
}

.crop-body img {
    max-width: 100%;
    display: block;
}

.crop-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-light, rgba(0, 0, 0, 0.08));
    flex-wrap: wrap;
}

.crop-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: var(--radius-md);
    font-size: var(--t-sm);
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all var(--dur-fast);
}

.crop-btn-cancel {
    background: var(--surface, #f5f5f5);
    color: var(--text-muted);
    border: 1px solid var(--border-light, rgba(0, 0, 0, 0.08));
}

.crop-btn-cancel:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text);
}

.crop-btn-confirm {
    background: #22c55e;
    color: #fff;
}

.crop-btn-confirm:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

/* ── Mockup overlay slideshow ── */
.mockup-overlay img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    opacity: 0;
    transition: opacity var(--dur-slow) ease;
}

.mockup-overlay img.slide-active {
    opacity: 1;
}


.te-tier-label {
    font-size: var(--t-xs);
    font-weight: 500;
    color: var(--text-muted, #888);
    white-space: nowrap;
}

.te-tier-check {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: var(--t-xs);
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
}

.te-tier-check input {
    cursor: pointer;
}

/* Add Tile button at bottom of each layer-tiles grid */
.tile-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    border: 1.5px dashed color-mix(in srgb, var(--accent, #f59e0b) 30%, transparent);
    background: color-mix(in srgb, var(--accent, #f59e0b) 2%, transparent);
    color: color-mix(in srgb, var(--accent, #f59e0b) 90%, #fff);
    font-size: var(--t-xs);
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    grid-column: 1 / -1;
    transition: all var(--dur-fast) var(--ease-out);
    margin-top: 2px;
}

.tile-add-btn:hover {
    border-color: color-mix(in srgb, var(--accent, #f59e0b) 70%, transparent);
    color: var(--accent, #f59e0b);
    background: color-mix(in srgb, var(--accent, #f59e0b) 8%, transparent);
}

/* "Add Performance Boosters" section button */
.addon-add-section-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 16px 20px;
    margin-top: 24px;
    border-radius: var(--radius-lg);
    border: 2px dashed color-mix(in srgb, var(--accent, #f59e0b) 30%, transparent);
    background: color-mix(in srgb, var(--accent, #f59e0b) 2%, transparent);
    color: color-mix(in srgb, var(--accent, #f59e0b) 90%, #fff);
    font-size: var(--t-sm);
    font-weight: 700;
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease-out);
}

.addon-add-section-btn:hover {
    border-color: color-mix(in srgb, var(--accent, #f59e0b) 70%, transparent);
    color: var(--accent, #f59e0b);
    background: color-mix(in srgb, var(--accent, #f59e0b) 8%, transparent);
}

/* Hide when not in edit mode */
.addon-add-section-btn {
    display: none;
}

body.edit-mode .addon-add-section-btn {
    display: flex;
}

body.edit-mode .tile:not(.locked) {
    cursor: default;
}


/* ═══════════════════════════════════════════════════════════════
   AUTH GATE
   ═══════════════════════════════════════════════════════════════ */

/* Blur everything except hero + nav when locked */
body.content-locked .portals,
body.content-locked .team-section,
body.content-locked .faq-section,
body.content-locked .sticky-cta-bar,
body.content-locked .footer {
    filter: blur(10px) brightness(0.85);
    pointer-events: none;
    user-select: none;
    transition: filter var(--dur-slow) ease;
}

body.content-locked {
    overflow: hidden;
}

/* Smooth unblur on unlock */
body:not(.content-locked) .portals,
body:not(.content-locked) .team-section,
body:not(.content-locked) .faq-section,
body:not(.content-locked) .sticky-cta-bar,
body:not(.content-locked) .footer {
    filter: none;
    pointer-events: auto;
    transition: filter var(--dur-slow) ease;
}

/* Gate overlay */
.auth-gate {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    /* hidden by default – shown only by body.content-locked */
    align-items: center;
    justify-content: center;
    background: rgba(4, 6, 14, 0.92);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    opacity: 1;
    transition: opacity var(--dur-slow) ease;
    padding: 20px;
}

@keyframes gateGradientShift {

    0%,
    100% {
        background-position: 0% 50%;
    }

    25% {
        background-position: 100% 0%;
    }

    50% {
        background-position: 100% 100%;
    }

    75% {
        background-position: 0% 100%;
    }
}

body.content-locked .auth-gate {
    display: flex;
}

/* ── "Glass Door" Background App Scaling ── */
.portals,
.team-section,
.testimonials-section,
.faq-section,
.sticky-cta-bar,
.footer,
.hero-container,
.hero-section,
.brand-nav,
header,
.sticky-nav {
    transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-slow) var(--ease-out);
    transform-origin: center top;
}

body.content-locked .portals,
body.content-locked .team-section,
body.content-locked .testimonials-section,
body.content-locked .faq-section,
body.content-locked .sticky-cta-bar,
body.content-locked .footer,
body.content-locked .hero-container,
body.content-locked .hero-section,
body.content-locked .brand-nav,
body.content-locked header,
body.content-locked .sticky-nav {
    transform: scale(0.98) translateY(10px);
}

.auth-gate.hiding {
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-slow) var(--ease-out);
}

.auth-gate.hiding .auth-gate-card {
    opacity: 0;
    transform: scale(1.08) translateY(-10px);
    transition: all var(--dur-slow) var(--ease-out);
}

.auth-gate.hidden {
    display: none;
}

/* Gate card */
.auth-gate-card {
    background: rgba(18, 20, 28, 0.88);
    backdrop-filter: blur(40px) saturate(150%);
    -webkit-backdrop-filter: blur(40px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-xl);
    padding: 36px 36px 32px;
    width: 100%;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.03),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    opacity: 0;
    transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-slow) ease;
}

/* `opacity` steht hier BEWUSST zusaetzlich zur Animation: die Sichtbarkeit der
   Karte darf nicht allein im `both`-Endzustand von gateEntrance haengen. Die
   Basisregel oben setzt `opacity: 0`, und `.auth-gate-card.shake` weiter unten
   ueberschreibt die komplette `animation`-Eigenschaft (gleiche Spezifitaet,
   spaeter in der Datei). Damit war der gehaltene Endzustand bei jedem
   fehlgeschlagenen Login weg und die Karte fiel auf `opacity: 0` zurueck:
   sichtbar blieb nur der dunkle Vollbild-Overlay des Gates, die Fehlermeldung
   stand unsichtbar im DOM. Der statische Wert ueberlebt den Animationstausch,
   waehrend gateEntrance laeuft gewinnt weiterhin die Animation. */
.auth-gate-card.ready {
    animation: gateEntrance 0.7s var(--ease-out) both;
    opacity: 1;
}

@keyframes gateEntrance {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes gateShake {

    0%,
    100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-8px);
    }

    40% {
        transform: translateX(8px);
    }

    60% {
        transform: translateX(-6px);
    }

    80% {
        transform: translateX(6px);
    }
}

.auth-gate-card.shake {
    animation: gateShake 0.45s var(--ease-inout) both;
}

/* Lock icon */
.auth-gate-lock {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--tm-accent) 25%, transparent) 0%, rgba(255, 255, 255, 0.04) 100%);
    border: 1px solid color-mix(in srgb, var(--tm-accent) 30%, transparent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--t-lg);
    color: color-mix(in srgb, var(--tm-accent) 70%, #fff);
    transition: transform var(--dur-slow) var(--ease-out), background var(--dur-base), border-color var(--dur-base), color var(--dur-base);
}

.auth-gate-lock.unlocked {
    background: linear-gradient(135deg, rgba(102, 187, 106, 0.25) 0%, rgba(102, 187, 106, 0.08) 100%);
    border-color: rgba(102, 187, 106, 0.4);
    color: #81c784;
    animation: lockPulse 0.6s var(--ease-out);
}

@keyframes lockPulse {
    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.25);
    }

    100% {
        transform: scale(1);
    }
}

/* Logo */
.auth-gate-logo {
    margin-bottom: 14px;
}

.auth-gate-logo img {
    height: 40px;
    width: auto;
    opacity: 1;
    filter: brightness(1.6);
}

/* Title */
.auth-gate-title {
    font-family: var(--font-heading);
    font-size: var(--t-lg);
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px;
    letter-spacing: -0.01em;
}

.auth-gate-title span {
    color: var(--tm-accent, #e91e8c);
    font-weight: 700;
    position: relative;
    top: 1px;
}

/* Subtitle */
.auth-gate-sub {
    font-size: var(--t-sm);
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 24px;
    line-height: 1.5;
}

/* Auto-login greeting: der Marken-Titel tritt zurueck, der Name des Partners
   wird der eigentliche Blickfang der Karte (statt gleich grosser Konkurrenz). */
.auth-gate-card.logging-in .auth-gate-title {
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    margin: 0 0 20px;
}

.auth-gate-card.logging-in .auth-gate-title span {
    color: var(--tm-accent, #e91e8c);
    top: 0;
}

.auth-gate-card.logging-in .auth-gate-form,
.auth-gate-card.logging-in .auth-gate-sub,
.auth-gate-card.logging-in #authGateHint,
.auth-gate-card.logging-in #authGateRequestToggle,
.auth-gate-card.logging-in #authGateTip {
    opacity: 0;
    max-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), max-height var(--dur-base) var(--ease-out), margin var(--dur-base) var(--ease-out), padding var(--dur-base) var(--ease-out);
}

.auth-gate-form,
.auth-gate-sub,
#authGateHint,
#authGateRequestToggle,
#authGateTip {
    max-height: 250px;
    overflow: hidden;
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), max-height var(--dur-base) var(--ease-out), margin var(--dur-base) var(--ease-out), padding var(--dur-base) var(--ease-out);
}

.auth-gate-greeting {
    opacity: 0;
    max-height: 0;
    margin-bottom: 0;
    overflow: hidden;
    transform: translateY(10px);
    transition: all var(--dur-slow) var(--ease-out);
}

.auth-gate-card.logging-in .auth-gate-greeting {
    opacity: 1;
    max-height: 240px;
    margin-bottom: 4px;
    transform: translateY(0);
    pointer-events: auto;
    transition-delay: 0.2s;
}

.auth-gate-greeting-inner {
    display: block;
    text-align: center;
    padding: 2px 4px 0;
    margin-bottom: 16px;
}

.auth-gate-greeting-inner i {
    font-size: var(--t-md);
    color: #e91e8c;
    flex-shrink: 0;
}

.auth-gate-greeting-intro {
    display: block;
    font-size: var(--t-sm);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 2px;
}

.auth-gate-greeting-name {
    display: block;
    font-weight: 800;
    font-size: clamp(var(--t-lg), 6vw, var(--t-2xl));
    letter-spacing: -0.015em;
    line-height: 1.15;
    color: #fff;
    margin-bottom: 0;
    overflow-wrap: break-word;
}

.auth-gate-greeting-name::after {
    content: '';
    display: block;
    width: 28px;
    height: 3px;
    margin: 10px auto 12px;
    border-radius: 2px;
    background: linear-gradient(90deg, #e91e8c, #f48cc7);
}

.auth-gate-greeting-loading {
    margin: 0 0 9px;
    font-size: var(--t-xs);
    color: rgba(255, 255, 255, 0.75);
    text-align: center;
    letter-spacing: 0.01em;
}

.auth-gate-greeting-bar {
    height: 3px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.auth-gate-greeting-progress {
    height: 100%;
    width: 0%;
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, #e91e8c, #f48cc7);
    box-shadow: 0 0 10px color-mix(in srgb, var(--tm-accent) 55%, transparent);
}

/* Black-Week-Kit: der Login-Splash trug bislang keinerlei Kit-Identitaet
   (Mike, 05.08.2026 - "wird sehr subtil dargestellt, gerne in Gold"). Gold
   markiert hier die Kit-Zugehoerigkeit (Kicker, Namens-Akzent, Ladebalken),
   der Name selbst bleibt bewusst weiss - dieselbe Trennung wie im Checkout
   (Signale gold, der eigentliche Inhalt/Absender bleibt neutral). */
[data-profile="black-week"] .auth-gate-card.logging-in .auth-gate-title {
    color: #FFD700;
}

[data-profile="black-week"] .auth-gate-greeting-name::after {
    background: linear-gradient(90deg, #FFD700, #FFA500);
}

[data-profile="black-week"] .auth-gate-greeting-progress {
    background: linear-gradient(90deg, #FFD700, #FFA500);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.55);
}

.auth-gate-greeting-tagline {
    margin: 14px 0 0;
    font-size: var(--t-xs);
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.04em;
    text-align: center;
    line-height: 1.45;
}

.loading-dots::after {
    content: '';
    animation: loadingDots 1.2s steps(3, end) infinite;
}

@keyframes loadingDots {
    0% {
        content: '.';
    }

    33% {
        content: '..';
    }

    66%,
    100% {
        content: '...';
    }
}

/* Form */
.auth-gate-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.auth-gate-form[hidden] {
    display: none !important;
}

/* Input wrapper */
.auth-gate-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.auth-gate-input-icon {
    position: absolute;
    left: 16px;
    color: rgba(255, 255, 255, 0.5);
    font-size: var(--t-sm);
    pointer-events: none;
}

.auth-gate-input {
    width: 100%;
    padding: 14px 16px 14px 42px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    color: #fff;
    font-size: var(--t-base);
    font-family: var(--font-body);
    outline: none;
    transition: border-color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast);
    letter-spacing: 0.08em;
}

.auth-gate-input::placeholder {
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: normal;
}

.auth-gate-input:focus,
.auth-gate-input:focus-visible {
    border-color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.16);
    box-shadow: none !important;
}

/* Error message */
.auth-gate-error {
    font-size: var(--t-xs);
    color: #ff6b6b;
    min-height: 0;
    text-align: center;
    transition: opacity var(--dur-fast);
}

.auth-gate-error:empty {
    display: none;
}

/* Submit button */
.auth-gate-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 24px;
    background: linear-gradient(135deg, var(--tm-accent) 0%, color-mix(in srgb, var(--tm-accent) 80%, #ff3366) 100%);
    border: none;
    border-radius: 999px;
    color: #fff;
    font-family: var(--font-heading);
    font-size: var(--t-sm);
    font-weight: 700;
    cursor: pointer;
    transition: transform var(--dur-fast) ease, filter var(--dur-fast);
    letter-spacing: 0.01em;
    margin-top: 2px;
}

.auth-gate-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

.auth-gate-btn:active {
    transform: translateY(0);
}

.auth-gate-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Loading spinner inline */
.auth-gate-btn.loading span::after {
    content: '...';
    animation: dots 1s steps(3, end) infinite;
}

@keyframes dots {

    0%,
    20% {
        content: '.';
    }

    40% {
        content: '..';
    }

    60%,
    100% {
        content: '...';
    }
}

/* Request access – text link style */
.auth-gate-request-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 18px;
    padding: 0;
    border: none;
    background: none;
    font-size: var(--t-xs);
    font-weight: 500;
    font-family: var(--font-body);
    color: rgba(255, 255, 255, 0.38);
    text-decoration: none;
    cursor: pointer;
    transition: color var(--dur-base) ease;
    letter-spacing: 0.01em;
}

.auth-gate-request-btn:hover {
    color: rgba(255, 255, 255, 0.7);
    background: none;
    border: none;
    box-shadow: none;
    transform: none;
}

.auth-gate-request-btn i {
    font-size: var(--t-2xs);
    opacity: 0.6;
    transition: opacity var(--dur-fast);
}

.auth-gate-request-btn:hover i {
    opacity: 1;
    transform: none;
}

/* ── Request Form (Login Gate) ───────────────────── */
.auth-gate-request-form {
    margin-top: 18px;
    display: none;
    flex-direction: column;
    gap: 10px;
}

.auth-gate-request-form.open {
    display: flex;
    animation: fadeSlideUp 0.35s ease both;
}

.auth-gate-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 4px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    font-size: var(--t-xs);
    font-family: var(--font-body);
    cursor: pointer;
    transition: color var(--dur-fast), transform var(--dur-fast);
}

.auth-gate-back-btn:hover {
    color: rgba(255, 255, 255, 0.8);
}

.auth-gate-back-btn i {
    font-size: var(--t-xs);
    transition: transform var(--dur-fast);
}

.auth-gate-back-btn:hover i {
    transform: translateX(-3px);
}

.agr-field {
    position: relative;
    display: flex;
    align-items: center;
}

.agr-icon {
    position: absolute;
    left: 16px;
    color: rgba(255, 255, 255, 0.3);
    font-size: var(--t-xs);
    pointer-events: none;
}

.agr-field .auth-gate-input {
    padding-left: 42px;
}

.agr-submit {
    margin-top: 4px;
}

.agr-feedback {
    font-size: var(--t-xs);
    min-height: 20px;
    text-align: center;
    transition: color var(--dur-fast);
    line-height: 1.5;
}

.agr-feedback.ok {
    color: #66bb6a;
}

.agr-feedback.ok i {
    margin-right: 4px;
}

.agr-feedback.err {
    color: #ff6b6b;
}

/* Datenschutz-Hinweis am Zugangsanfrage-Formular */
.agr-privacy-note {
    margin: 2px 0 0;
    font-size: 0.68rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.55);
    text-align: center;
}

.agr-privacy-note a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--dur-fast);
}

.agr-privacy-note a:hover {
    color: rgba(255, 255, 255, 0.95);
}

/* Impressum + Datenschutz unten in der Gate-Card */
.auth-gate-legal {
    margin: 18px 0 0;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
}

.auth-gate-legal a {
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    transition: color var(--dur-fast);
}

.auth-gate-legal a:hover {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.auth-gate-legal-sep {
    margin: 0 6px;
    opacity: 0.6;
}

/* ── Notification Badge ──────────────────────────── */
.request-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, #ef5350, #e53935);
    color: #fff;
    font-size: var(--t-2xs);
    font-weight: 700;
    line-height: 1;
    position: absolute;
    top: -6px;
    right: -6px;
    box-shadow: 0 2px 8px rgba(239, 83, 80, 0.4);
    animation: badgePulse 2s ease-in-out infinite;
}

.request-badge.tab-badge {
    position: static;
    margin-left: 4px;
    top: auto;
    right: auto;
    min-width: 16px;
    height: 16px;
    font-size: var(--t-2xs);
}

@keyframes badgePulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(239, 83, 80, 0.4);
    }

    50% {
        box-shadow: 0 0 0 4px rgba(239, 83, 80, 0);
    }
}

/* ── Access Request Status Pills ─────────────────── */
.agr-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--radius-xl);
    font-size: var(--t-2xs);
    font-weight: 700;
    white-space: nowrap;
}

.agr-status.approved {
    background: rgba(102, 187, 106, 0.1);
    color: #66bb6a;
    border: 1px solid rgba(102, 187, 106, 0.25);
}

.agr-status.rejected {
    background: rgba(239, 83, 80, 0.08);
    color: #e57373;
    border: 1px solid rgba(239, 83, 80, 0.2);
}

.agr-status.pending {
    background: rgba(255, 167, 38, 0.08);
    color: #ffa726;
    border: 1px solid rgba(255, 167, 38, 0.2);
}

/* Resolved row */
.agr-resolved td {
    opacity: 0.55;
}

.agr-resolved td:last-child {
    opacity: 1;
}

/* Generated link result */
.agr-link-result {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

.agr-link-result code {
    font-size: var(--t-2xs);
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--tm-accent) 8%, transparent);
    border: 1px solid var(--tm-accent-25);
    color: var(--accent, var(--tm-accent));
    word-break: break-all;
}

.agr-link-result button {
    flex-shrink: 0;
    padding: 3px 8px !important;
    font-size: 0.7rem !important;
}

/* ── Admin Step-Up Confirm ───────────────────────── */
.auth-gate-admin-confirm {
    margin-top: 8px;
    padding-top: 22px;
    border-top: 1px solid rgba(245, 158, 11, 0.15);
    animation: fadeSlideUp 0.45s var(--ease-out) both;
}

@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes adminPulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.25);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(245, 158, 11, 0);
    }
}

.auth-gate-admin-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(217, 119, 6, 0.10));
    border: 1px solid rgba(245, 158, 11, 0.30);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: var(--t-lg);
    color: #f59e0b;
    filter: drop-shadow(0 0 12px rgba(245, 158, 11, 0.3));
    animation: adminPulse 2.5s ease-in-out infinite;
}

.auth-gate-admin-title {
    font-size: var(--t-md);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #ffffff;
    margin-bottom: 6px;
    text-shadow: 0 0 20px rgba(245, 158, 11, 0.2);
}

.auth-gate-admin-sub {
    font-size: var(--t-xs);
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 20px;
    line-height: 1.45;
}

.auth-gate-admin-confirm .auth-gate-input {
    border-color: rgba(245, 158, 11, 0.20);
}

.auth-gate-admin-confirm .auth-gate-input:focus {
    border-color: rgba(245, 158, 11, 0.55);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.08);
}

.auth-gate-admin-confirm .auth-gate-input-icon {
    color: rgba(245, 158, 11, 0.5);
}

.auth-gate-admin-confirm .auth-gate-error {
    color: #ef5350;
    font-size: var(--t-xs);
    min-height: 18px;
    margin: 6px 0 2px;
    text-align: left;
}

.auth-gate-skip-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.03);
    font-family: inherit;
    font-size: var(--t-xs);
    color: rgba(255, 255, 255, 0.40);
    cursor: pointer;
    transition: all var(--dur-base) ease;
}

.auth-gate-skip-btn:hover {
    color: rgba(255, 255, 255, 0.75);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
}

/* Dark mode: card looks identical (already dark glass) */
[data-theme="dark"] .auth-gate {
    background: rgba(4, 6, 14, 0.92);
}

/* ── Logout Button ─────────────────────────────────────────── */
.logout-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(220, 60, 60, 0.4);
    background: rgba(220, 60, 60, 0.1);
    color: #e05555;
    cursor: pointer;
    font-size: var(--t-sm);
    transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
    flex-shrink: 0;
}

.logout-btn:hover {
    background: rgba(220, 60, 60, 0.22);
    border-color: rgba(220, 60, 60, 0.7);
    color: #ff4040;
}

/* ── Admin Panel Trigger Button ────────────────────────────── */
.admin-panel-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid color-mix(in srgb, var(--tm-accent) 35%, transparent);
    background: color-mix(in srgb, var(--tm-accent) 8%, transparent);
    color: var(--accent, var(--tm-accent));
    cursor: pointer;
    font-size: var(--t-xs);
    font-weight: 700;
    font-family: var(--font-heading);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: background var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast), color var(--dur-fast);
    flex-shrink: 0;
}

.admin-panel-btn:hover,
.admin-panel-btn.active {
    background: color-mix(in srgb, var(--tm-accent) 15%, transparent);
    border-color: color-mix(in srgb, var(--tm-accent) 70%, transparent);
    box-shadow: 0 0 10px color-mix(in srgb, var(--tm-accent) 15%, transparent);
    color: var(--accent, var(--tm-accent));
}

/* ── Online Partner Counter ───────────────────────────────────── */
.online-counter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: var(--radius-sm);
    background: rgba(76, 175, 80, 0.08);
    border: 1px solid rgba(76, 175, 80, 0.25);
    font-size: var(--t-xs);
    font-weight: 700;
    font-family: var(--font-heading);
    color: #66bb6a;
    cursor: default;
    flex-shrink: 0;
    transition: all var(--dur-base) ease;
}

.online-counter:hover {
    background: rgba(76, 175, 80, 0.14);
    border-color: rgba(76, 175, 80, 0.5);
}

.online-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #66bb6a;
    box-shadow: 0 0 6px rgba(76, 175, 80, 0.6);
    animation: onlinePulse 2s ease-in-out infinite;
}

.online-counter.offline .online-dot {
    background: #999;
    box-shadow: none;
    animation: none;
}

.online-counter.offline {
    color: var(--text-muted, #999);
    border-color: var(--border-light);
    background: transparent;
}

@keyframes onlinePulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.5);
    }

    50% {
        box-shadow: 0 0 0 5px rgba(76, 175, 80, 0);
    }
}

/* ── Admin Sliding Panel Bar ────────────────────────────────── */
.admin-panel {
    position: fixed;
    top: var(--nav-h, 70px);
    left: 0;
    right: 0;
    z-index: 990;
    /* NO overflow:hidden – lets box-shadow and border-radius breathe */
    pointer-events: none;
    /* centre like the hero */
    display: flex;
    justify-content: center;
    padding: 0 16px;
}

.admin-panel.open {
    pointer-events: auto;
}

.admin-panel-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    width: 100%;
    max-width: 1200px;
    justify-content: center;
    /* Match hero card exactly */
    background: var(--panel-bg);
    border: 1px solid var(--border-light);
    border-top: none;
    /* flush with nav */
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    box-shadow: var(--shadow-main);
    color: var(--text);
    /* Slide animation on the inner card – no clipping */
    transform: translateY(-110%);
    opacity: 0;
    transition: transform var(--dur-base) var(--ease-out),
        opacity var(--dur-base) ease;
}

.admin-panel.open .admin-panel-inner {
    transform: translateY(0);
    opacity: 1;
}

/* Section */
.ap-section {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.ap-section-label {
    font-size: var(--t-2xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted, rgba(0, 0, 0, 0.38));
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Divider */
.ap-divider {
    width: 1px;
    height: 28px;
    background: var(--border-light);
    margin: 0 2px;
    flex-shrink: 0;
}

/* Generic panel button */
.ap-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
    background: var(--panel-bg);
    color: var(--text);
    font-size: var(--t-xs);
    font-weight: 500;
    font-family: var(--font-heading);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}

.ap-btn:hover {
    background: var(--hover-bg, rgba(0, 0, 0, 0.06));
    border-color: var(--border-medium, rgba(0, 0, 0, 0.2));
    color: var(--text);
}

/* Edit button */
.ap-btn-edit {
    border-color: var(--border-light);
    color: var(--text-muted, #888);
}

.ap-btn-edit:hover,
.ap-btn-edit.active {
    background: var(--tm-accent-10);
    border-color: color-mix(in srgb, var(--tm-accent) 50%, transparent);
    color: var(--accent, var(--tm-accent));
}

.ap-btn-edit.active {
    box-shadow: 0 0 8px color-mix(in srgb, var(--tm-accent) 15%, transparent);
}

.ap-btn-cart.active {
    background: var(--tm-accent-10);
    border-color: color-mix(in srgb, var(--tm-accent) 50%, transparent);
    color: var(--accent, var(--tm-accent));
    box-shadow: 0 0 8px color-mix(in srgb, var(--tm-accent) 15%, transparent);
}

/* Save button */
.ap-btn-save {
    border-color: color-mix(in srgb, var(--tm-accent) 35%, transparent);
    color: var(--accent, var(--tm-accent));
}

.ap-btn-save:hover {
    background: color-mix(in srgb, var(--tm-accent) 12%, transparent);
    border-color: color-mix(in srgb, var(--tm-accent) 60%, transparent);
    color: var(--accent, var(--tm-accent));
}

/* Password input */
.ap-pw-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ap-input {
    padding: 7px 12px;
    background: var(--input-bg, rgba(0, 0, 0, 0.05));
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: var(--t-xs);
    font-family: var(--font-body);
    outline: none;
    width: 200px;
    transition: border-color var(--dur-fast), background var(--dur-fast);
}

.ap-input:focus {
    border-color: var(--border-medium, rgba(0, 0, 0, 0.2));
    background: var(--input-bg, rgba(0, 0, 0, 0.04));
}

.ap-input::placeholder {
    color: var(--text-muted, rgba(0, 0, 0, 0.35));
}

/* Feedback text */
.ap-pw-feedback {
    font-size: var(--t-xs);
    margin-left: 4px;
    min-width: 120px;
    transition: color var(--dur-fast);
}

.ap-pw-feedback.ok {
    color: var(--accent, var(--tm-accent));
}

.ap-pw-feedback.err {
    color: #ef5350;
}

/* ── UserDB Button ────────────────────────────────── */
.ap-btn-users {
    border-color: var(--border-light);
    color: var(--text-muted, #888);
}

.ap-btn-users:hover {
    background: var(--tm-accent-10);
    border-color: color-mix(in srgb, var(--tm-accent) 50%, transparent);
    color: var(--accent, var(--tm-accent));
}

.ap-btn-revisions {
    border-color: var(--border-light);
    color: var(--text-muted, #888);
}

.ap-btn-revisions:hover {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.5);
    color: #f59e0b;
}

/* ── Gate Toggle Button ──────────────────────────────────────── */
.ap-btn-gate {
    border-color: color-mix(in srgb, var(--tm-accent) 35%, transparent);
    color: var(--accent, var(--tm-accent));
    transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}

.ap-btn-gate:hover {
    background: var(--tm-accent-10);
    border-color: color-mix(in srgb, var(--tm-accent) 60%, transparent);
}

.ap-btn-gate.gate-off {
    border-color: rgba(180, 180, 180, 0.35);
    color: var(--text-muted, #888);
}

.ap-btn-gate.gate-off:hover {
    background: rgba(180, 180, 180, 0.08);
    border-color: rgba(180, 180, 180, 0.5);
}

/* ── Share-Link Button & Popover ─────────────────────────────── */
.ap-share-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 2px;
}

.ap-btn-share {
    border-color: var(--border-light);
    color: var(--text-muted, #888);
    padding: 5px 9px;
}

.ap-btn-share:hover,
.ap-btn-share.active {
    background: var(--tm-accent-10);
    border-color: color-mix(in srgb, var(--tm-accent) 50%, transparent);
    color: var(--accent, var(--tm-accent));
}

/* ── Create / Delete Profile Buttons ── */
.ap-btn-create-profile {
    border-color: rgba(76, 175, 80, 0.4);
    color: #4CAF50;
    padding: 5px 8px;
    font-size: var(--t-xs);
}

.ap-btn-create-profile:hover {
    background: rgba(76, 175, 80, 0.12);
    border-color: #4CAF50;
    color: #388E3C;
}

.ap-btn-delete-profile {
    border-color: rgba(244, 67, 54, 0.3);
    color: #e57373;
    padding: 5px 8px;
    font-size: var(--t-2xs);
}

.ap-btn-delete-profile:hover {
    background: rgba(244, 67, 54, 0.12);
    border-color: #f44336;
    color: #d32f2f;
}

/* ── Delete Profile Dialog ── */
.ap-delete-profile-modal {
    background: var(--panel-bg, #fff);
    border: 1px solid rgba(244, 67, 54, 0.2);
    border-radius: var(--radius-lg);
    padding: 28px 32px;
    width: 400px;
    max-width: 90vw;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(244, 67, 54, 0.1);
    animation: slideUp 0.25s ease-out;
}

.ap-delete-header {
    text-align: center;
    margin-bottom: 16px;
}

.ap-delete-icon-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(244, 67, 54, 0.1), rgba(244, 67, 54, 0.2));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    font-size: var(--t-lg);
    color: #e53935;
}

.ap-delete-header h3 {
    margin: 0;
    font-size: var(--t-md);
    font-weight: 700;
    color: var(--text, #222);
}

.ap-delete-kit-name {
    text-align: center;
    font-size: var(--t-base);
    font-weight: 500;
    color: #e53935;
    background: rgba(244, 67, 54, 0.06);
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    margin-bottom: 14px;
}

.ap-delete-warning {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: rgba(255, 152, 0, 0.06);
    border: 1px solid rgba(255, 152, 0, 0.2);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    margin-bottom: 16px;
    font-size: var(--t-xs);
    line-height: 1.5;
    color: var(--text-muted, #666);
}

.ap-delete-warning>i {
    color: #ff9800;
    font-size: var(--t-md);
    margin-top: 2px;
    flex-shrink: 0;
}

.ap-delete-pw-label {
    display: block;
    font-size: var(--t-xs);
    font-weight: 500;
    color: var(--text-muted, #666);
    margin-bottom: 6px;
}

.ap-delete-pw-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border, #ddd);
    border-radius: var(--radius-sm);
    font-size: var(--t-sm);
    background: var(--surface, #f9f9f9);
    color: var(--text, #222);
    outline: none;
    transition: border-color var(--dur-fast);
    box-sizing: border-box;
}

.ap-delete-pw-input:focus {
    border-color: #e53935;
    box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.12);
}

.ap-delete-error {
    font-size: var(--t-xs);
    color: #e53935;
    margin-top: 6px;
    font-weight: 500;
}

.ap-delete-confirm {
    padding: 8px 20px;
    border: none;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, #e53935, #c62828);
    color: #fff;
    font-size: var(--t-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--dur-fast);
    box-shadow: 0 2px 8px rgba(229, 57, 53, 0.3);
}

.ap-delete-confirm:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(229, 57, 53, 0.4);
}

.ap-delete-confirm:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* ── Create Profile Dialog ── */
.ap-create-profile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease-out;
}

.ap-create-profile-modal {
    background: var(--panel-bg, #fff);
    border: 1px solid var(--border, rgba(0, 0, 0, 0.1));
    border-radius: var(--radius-lg);
    padding: 28px 32px;
    width: 380px;
    max-width: 90vw;
    box-shadow: var(--shadow-modal);
    animation: slideUp 0.25s ease-out;
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.ap-create-profile-modal h3 {
    margin: 0 0 20px;
    font-size: var(--t-md);
    font-weight: 700;
    color: var(--text, #222);
}

.ap-create-profile-modal label {
    display: block;
    font-size: var(--t-xs);
    font-weight: 500;
    color: var(--text-muted, #666);
    margin-bottom: 4px;
    margin-top: 12px;
}

.ap-create-profile-modal label:first-of-type {
    margin-top: 0;
}

.ap-create-profile-modal input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border, #ddd);
    border-radius: var(--radius-sm);
    font-size: var(--t-sm);
    background: var(--surface, #f9f9f9);
    color: var(--text, #222);
    outline: none;
    transition: border-color var(--dur-fast);
    box-sizing: border-box;
}

.ap-create-profile-modal input:focus {
    border-color: var(--accent, var(--tm-accent));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tm-accent) 15%, transparent);
}

.ap-create-profile-hint {
    font-size: var(--t-xs);
    color: var(--text-muted, #888);
    margin: 14px 0 0;
    line-height: 1.5;
    padding: 8px 10px;
    background: color-mix(in srgb, var(--tm-accent) 6%, transparent);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--accent, var(--tm-accent));
}

.ap-create-profile-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
}

.ap-create-cancel {
    padding: 8px 18px;
    border: 1px solid var(--border, #ddd);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted, #888);
    font-size: var(--t-sm);
    cursor: pointer;
    transition: all var(--dur-fast);
}

.ap-create-cancel:hover {
    background: rgba(0, 0, 0, 0.04);
}

.ap-create-confirm {
    padding: 8px 20px;
    border: none;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, #4CAF50, #388E3C);
    color: #fff;
    font-size: var(--t-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--dur-fast);
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}

.ap-create-confirm:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4);
}

.ap-share-popover {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 1200;
    background: var(--panel-bg);
    border: 1px solid var(--border-medium, rgba(0, 0, 0, 0.15));
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-3);
    padding: 14px 16px 12px;
    min-width: 320px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity var(--dur-fast) ease, transform var(--dur-fast) ease;
}

.ap-share-popover.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.ap-share-popover-title {
    font-size: var(--t-2xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted, rgba(0, 0, 0, 0.4));
}

.ap-share-url-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ap-share-url-input {
    flex: 1;
    padding: 6px 10px;
    background: var(--input-bg, rgba(0, 0, 0, 0.05));
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: var(--t-xs);
    font-family: monospace;
    outline: none;
    /* Mask token by default */
    -webkit-text-security: disc;
    text-security: disc;
    cursor: default;
    transition: border-color var(--dur-fast);
    min-width: 0;
}

.ap-share-url-input:hover,
.ap-share-url-input:focus {
    -webkit-text-security: none;
    text-security: none;
    border-color: color-mix(in srgb, var(--tm-accent) 50%, transparent);
    cursor: text;
}

.ap-share-copy-btn {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    border: 1px solid color-mix(in srgb, var(--tm-accent) 35%, transparent);
    background: color-mix(in srgb, var(--tm-accent) 8%, transparent);
    color: var(--tm-accent);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--t-xs);
    transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}

.ap-share-copy-btn:hover {
    background: var(--tm-accent-25);
    border-color: color-mix(in srgb, var(--tm-accent) 70%, transparent);
}

.ap-share-copy-btn.copied {
    background: rgba(102, 187, 106, 0.15);
    border-color: rgba(102, 187, 106, 0.6);
    color: #66bb6a;
}

.ap-share-regen-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(239, 83, 80, 0.3);
    background: transparent;
    color: #ef5350;
    font-size: var(--t-xs);
    font-weight: 500;
    font-family: var(--font-heading);
    cursor: pointer;
    align-self: flex-start;
    transition: background var(--dur-fast), border-color var(--dur-fast);
}

.ap-share-regen-btn:hover {
    background: rgba(239, 83, 80, 0.08);
    border-color: rgba(239, 83, 80, 0.6);
}

.ap-share-regen-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Profile Selector ────────────────────────────────────────── */

.ap-profile-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0;
    margin-left: 6px;
}

.ap-profile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    border: 1px solid color-mix(in srgb, var(--tm-accent) 30%, transparent);
    border-right: none;
    background: color-mix(in srgb, var(--tm-accent) 8%, transparent);
    color: color-mix(in srgb, var(--tm-accent) 70%, transparent);
    font-size: var(--t-2xs);
    flex-shrink: 0;
    transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}

.ap-profile-select {
    appearance: none;
    -webkit-appearance: none;
    padding: 5px 26px 5px 8px;
    height: 28px;
    background: var(--panel-bg);
    border: 1px solid color-mix(in srgb, var(--tm-accent) 30%, transparent);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--text);
    font-size: var(--t-xs);
    font-weight: 500;
    font-family: var(--font-heading);
    outline: none;
    cursor: pointer;
    white-space: nowrap;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%238278e6' fill-opacity='0.6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 8px;
    transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast);
}

.ap-profile-wrap:hover .ap-profile-icon,
.ap-profile-select:hover+.ap-profile-icon {
    border-color: color-mix(in srgb, var(--tm-accent) 50%, transparent);
    background: color-mix(in srgb, var(--tm-accent) 14%, transparent);
    color: var(--tm-accent);
}

.ap-profile-select:hover {
    border-color: color-mix(in srgb, var(--tm-accent) 50%, transparent);
    background: color-mix(in srgb, var(--tm-accent) 6%, transparent);
}

.ap-profile-select:focus {
    border-color: color-mix(in srgb, var(--tm-accent) 70%, transparent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--tm-accent) 12%, transparent);
}

/* Highlight when non-standard profile is active */
.ap-profile-wrap.profile-active .ap-profile-icon {
    background: color-mix(in srgb, var(--tm-accent) 18%, transparent);
    border-color: color-mix(in srgb, var(--tm-accent) 60%, transparent);
    color: var(--tm-accent);
}

.ap-profile-wrap.profile-active .ap-profile-select {
    border-color: color-mix(in srgb, var(--tm-accent) 60%, transparent);
    background: color-mix(in srgb, var(--tm-accent) 8%, transparent);
    color: var(--tm-accent);
    box-shadow: 0 0 10px color-mix(in srgb, var(--tm-accent) 15%, transparent);
}

.ap-profile-select option {
    background: var(--panel-bg, #fff);
    color: var(--text);
    padding: 4px 8px;
}

/* ── Brand Visibility Checkboxes ─────────────────────────────── */
.ap-brand-checks {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin-left: 10px;
    padding: 2px 0;
}

.ap-brand-check {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    font-size: var(--t-2xs);
    font-weight: 500;
    font-family: var(--font-heading);
    color: var(--text-muted, #888);
    transition: color var(--dur-fast), opacity var(--dur-fast);
    user-select: none;
    white-space: nowrap;
}

.ap-brand-check:hover {
    color: var(--text);
}

.ap-brand-check input[type="checkbox"] {
    accent-color: var(--tm-accent);
    width: 13px;
    height: 13px;
    cursor: pointer;
    margin: 0;
}

.ap-brand-check.brand-off {
    opacity: 0.45;
    text-decoration: line-through;
}

/* ── Discount Section ────────────────────────────────────────── */
.ap-discount-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ap-discount-icon {
    font-size: var(--t-xs);
    color: var(--text-muted, rgba(0, 0, 0, 0.4));
    flex-shrink: 0;
}

.ap-discount-field-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.ap-discount-input {
    width: 62px;
    padding: 7px 26px 7px 10px;
    background: var(--input-bg, rgba(0, 0, 0, 0.05));
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: var(--t-sm);
    font-weight: 700;
    font-family: var(--font-heading);
    outline: none;
    text-align: center;
    transition: border-color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast);
    -moz-appearance: textfield;
    appearance: textfield;
}

.ap-discount-input::-webkit-inner-spin-button,
.ap-discount-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ap-discount-input:focus {
    border-color: rgba(245, 166, 35, 0.6);
    background: rgba(245, 166, 35, 0.04);
    box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.12);
}

.ap-discount-unit {
    position: absolute;
    right: 9px;
    font-size: var(--t-xs);
    font-weight: 700;
    color: var(--text-muted, rgba(0, 0, 0, 0.4));
    pointer-events: none;
    line-height: 1;
}

.ap-btn-discount {
    border-color: rgba(245, 166, 35, 0.35);
    color: #f5a623;
}

.ap-btn-discount:hover {
    background: rgba(245, 166, 35, 0.12);
    border-color: rgba(245, 166, 35, 0.65);
    color: #ffb733;
}

.ap-btn-discount.saved {
    border-color: rgba(76, 175, 80, 0.5);
    color: #66bb6a;
    background: rgba(76, 175, 80, 0.1);
}

.ap-discount-date {
    width: 130px;
    padding: 6px 8px;
    background: var(--input-bg, rgba(0, 0, 0, 0.05));
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: var(--t-xs);
    font-weight: 500;
    font-family: var(--font-heading);
    outline: none;
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}

.ap-discount-date:focus {
    border-color: rgba(245, 166, 35, 0.6);
    box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.12);
}

.ap-discount-date::-webkit-calendar-picker-indicator {
    opacity: 0.5;
    cursor: pointer;
}

/* Calendar toggle button */
.ap-date-toggle {
    position: relative;
    padding: 5px 8px !important;
    font-size: var(--t-xs);
}

.ap-date-dot {
    display: none;
    position: absolute;
    top: 3px;
    right: 3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #66bb6a;
}

.ap-date-dot.visible {
    display: block;
}

/* Date popover dropdown */
.ap-date-popover {
    display: none;
    position: absolute;
    top: 100%;
    margin-top: 6px;
    background: var(--panel-bg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-3);
    padding: 10px 12px;
    z-index: 1000;
    flex-direction: column;
    gap: 6px;
    min-width: 200px;
}

.ap-date-popover.open {
    display: flex;
}

.ap-date-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--t-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted, rgba(0, 0, 0, 0.45));
    cursor: pointer;
}

.ap-date-row input {
    flex: 1;
}

.ap-discount-expired {
    opacity: 0.5;
}

.ap-discount-active-badge {
    font-size: var(--t-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

.ap-discount-active-badge.active {
    background: rgba(76, 175, 80, 0.15);
    color: #66bb6a;
}

.ap-discount-active-badge.expired {
    background: rgba(244, 67, 54, 0.12);
    color: #ef5350;
}

.ap-discount-active-badge.scheduled {
    background: rgba(245, 166, 35, 0.15);
    color: #f5a623;
}

/* ── Mission Control Button in Admin Bar ──────────────── */
.ap-btn-mc {
    border-color: rgba(168, 130, 255, 0.35);
    color: #a882ff;
    position: relative;
}

.ap-btn-mc:hover {
    background: rgba(168, 130, 255, 0.12);
    border-color: rgba(168, 130, 255, 0.65);
    color: #bb99ff;
}

.ap-btn-mc .request-badge {
    position: absolute;
    top: -4px;
    right: -4px;
}

/* ═══════════════════════════════════════════════════════════════
   CONTROL CENTER – macOS-style dropdown panel
   ═══════════════════════════════════════════════════════════════ */

/* Wrapper – covers viewport when open */
.cc-wrapper {
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
    visibility: hidden;
}

.cc-wrapper.open {
    pointer-events: auto;
    visibility: visible;
}

/* Transparent backdrop – click-to-close */
.cc-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background var(--dur-base) ease;
}

.cc-wrapper.open .cc-backdrop {
    background: rgba(0, 0, 0, 0.25);
}

/* ── Floating Panel ────────────────────────────────────── */
.cc-panel {
    position: fixed;
    top: 70px;
    left: 16px;
    width: 340px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 90px);
    background: color-mix(in srgb, var(--panel-bg) 85%, transparent);
    backdrop-filter: blur(56px) saturate(2.2);
    -webkit-backdrop-filter: blur(56px) saturate(2.2);
    border: 1px solid color-mix(in srgb, var(--border-light) 40%, transparent);
    border-radius: 20px;
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.2),
        0 8px 24px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Entrance animation */
    opacity: 0;
    transform: scale(0.92) translateY(-8px);
    transition: opacity var(--dur-base) var(--ease-out),
        transform var(--dur-base) var(--ease-out);
}

.cc-wrapper.open .cc-panel {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* ── Header ────────────────────────────────────────────── */
.cc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px 12px;
    flex-shrink: 0;
}

.cc-header-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--t-sm);
    font-weight: 700;
    font-family: var(--font-heading);
    color: var(--text);
    letter-spacing: 0.02em;
}

.cc-header-title i {
    color: var(--tm-accent);
    font-size: var(--t-base);
}

.cc-close {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--border-light) 50%, transparent);
    background: color-mix(in srgb, var(--surface) 60%, transparent);
    color: var(--text-muted);
    font-size: var(--t-xs);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--dur-fast);
}

.cc-close:hover {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.3);
    color: var(--status-danger);
    transform: scale(1.1);
}

/* ── Body ──────────────────────────────────────────────── */
.cc-body {
    padding: 0 14px 16px;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scrollbar-width: none;
}

.cc-body::-webkit-scrollbar {
    display: none;
}

/* ── Tile Base ─────────────────────────────────────────── */
.cc-tile {
    padding: 14px 16px;
    border-radius: 16px;
    background: linear-gradient(150deg,
            color-mix(in srgb, var(--surface) 95%, transparent) 0%,
            color-mix(in srgb, var(--surface-hover) 60%, var(--surface)) 100%);
    border: 1px solid color-mix(in srgb, var(--border-light) 50%, transparent);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: all var(--dur-base) ease;
}

.cc-tile:hover {
    border-color: color-mix(in srgb, var(--border) 60%, transparent);
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* ── Tile Label ────────────────────────────────────────── */
.cc-tile-label {
    font-size: var(--t-2xs);
    font-weight: 700;
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0.7;
}

.cc-tile-label i {
    font-size: var(--t-2xs);
    color: var(--tm-accent);
    opacity: 0.8;
}

/* ═══ Quick Toggles Row ═══ */
.cc-toggles {
    display: flex;
    justify-content: center;
    gap: 16px;
    padding: 6px 0;
}

.cc-toggle-circle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: transform var(--dur-fast);
}

.cc-toggle-circle:hover {
    transform: scale(1.08);
}

.cc-toggle-circle:active {
    transform: scale(0.95);
}

.cc-toggle-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--t-md);
    background: linear-gradient(150deg,
            color-mix(in srgb, var(--surface) 90%, transparent) 0%,
            color-mix(in srgb, var(--surface-hover) 70%, var(--surface)) 100%);
    border: 1px solid color-mix(in srgb, var(--border-light) 50%, transparent);
    color: var(--text-muted);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: all var(--dur-base) var(--ease-out);
}

.cc-toggle-label {
    font-size: var(--t-2xs);
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.03em;
    transition: color var(--dur-fast);
}

/* Active toggle state – accent glow */
.cc-toggle-circle.active .cc-toggle-icon {
    background: linear-gradient(135deg,
            color-mix(in srgb, var(--tm-accent) 25%, transparent) 0%,
            color-mix(in srgb, var(--tm-accent) 15%, transparent) 100%);
    border-color: color-mix(in srgb, var(--tm-accent) 40%, transparent);
    color: var(--tm-accent);
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--tm-accent) 10%, transparent),
        0 4px 16px color-mix(in srgb, var(--tm-accent) 15%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.cc-toggle-circle.active .cc-toggle-label {
    color: var(--tm-accent);
}

/* Gate-specific "on" alias for JS compatibility */
.cc-toggle-circle.gate-on .cc-toggle-icon {
    background: linear-gradient(135deg,
            color-mix(in srgb, var(--tm-accent) 25%, transparent) 0%,
            color-mix(in srgb, var(--tm-accent) 15%, transparent) 100%);
    border-color: color-mix(in srgb, var(--tm-accent) 40%, transparent);
    color: var(--tm-accent);
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--tm-accent) 10%, transparent),
        0 4px 16px color-mix(in srgb, var(--tm-accent) 15%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.cc-toggle-circle.gate-on .cc-toggle-label {
    color: var(--tm-accent);
}

/* ═══ Bottom Row ═══ */
.cc-bottom-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.cc-tile-half {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 18px 12px;
    border-radius: 16px;
    background: linear-gradient(150deg,
            color-mix(in srgb, var(--surface) 95%, transparent) 0%,
            color-mix(in srgb, var(--surface-hover) 60%, var(--surface)) 100%);
    border: 1px solid color-mix(in srgb, var(--border-light) 50%, transparent);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: all var(--dur-base) var(--ease-out);
    font-family: var(--font-heading);
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--text);
    letter-spacing: 0.02em;
}

.cc-tile-half i {
    font-size: var(--t-md);
    color: var(--text-muted);
    opacity: 0.7;
    transition: color var(--dur-fast), opacity var(--dur-fast);
}

.cc-tile-half:hover {
    border-color: color-mix(in srgb, var(--border) 60%, transparent);
    transform: translateY(-2px) scale(1.02);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.cc-tile-half:hover i {
    color: var(--tm-accent);
    opacity: 1;
}

.cc-tile-half:active {
    transform: translateY(0) scale(0.97);
}

/* ── Portale brand checks inside CC ──────────────────── */
.cc-tile-portale .ap-brand-checks {
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px;
}

/* ── Mobile: full-width bottom sheet ─────────────────── */
@media (max-width: 480px) {
    .cc-panel {
        left: 8px;
        right: 8px;
        width: auto;
        max-width: none;
        top: auto;
        bottom: 8px;
        max-height: 80vh;
        border-radius: 24px;
        transform: scale(1) translateY(16px);
    }

    .cc-wrapper.open .cc-panel {
        transform: scale(1) translateY(0);
    }

    .cc-toggles {
        gap: 20px;
    }
}

/* ── Mission Control Sidebar ─────────────────────────── */
.mc-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9998;
    pointer-events: none;
    visibility: hidden;
}

.mc-sidebar.open {
    pointer-events: auto;
    visibility: visible;
}

.mc-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background var(--dur-base) ease;
}

.mc-sidebar.open .mc-overlay {
    background: rgba(0, 0, 0, 0.35);
}

.mc-panel {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 350px;
    max-width: 90vw;
    background: color-mix(in srgb, var(--panel-bg) 88%, transparent);
    backdrop-filter: blur(48px) saturate(2);
    -webkit-backdrop-filter: blur(48px) saturate(2);
    border-right: 1px solid color-mix(in srgb, var(--border-light) 60%, transparent);
    box-shadow: var(--shadow-modal);
    transform: translateX(-100%);
    transition: transform var(--dur-base) var(--ease-out);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.mc-sidebar.open .mc-panel {
    transform: translateX(0);
}

.mc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 22px;
    border-bottom: 1px solid color-mix(in srgb, var(--border-light) 50%, transparent);
    flex-shrink: 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 40%, transparent) 0%, transparent 100%);
}

.mc-header-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--t-base);
    font-weight: 700;
    font-family: var(--font-heading);
    color: var(--text);
    letter-spacing: 0.02em;
}

.mc-header-title i {
    color: var(--tm-accent);
    font-size: var(--t-md);
}

.mc-close {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
    background: var(--surface);
    color: var(--text-muted);
    font-size: var(--t-base);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--dur-fast);
}

.mc-close:hover {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.25);
    color: var(--status-danger);
}

.mc-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 22px 32px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mc-section {
    padding: 16px;
    margin-bottom: 8px;
    position: relative;
    background: linear-gradient(150deg, var(--surface) 0%, color-mix(in srgb, var(--surface-hover) 50%, var(--surface)) 100%);
    border-radius: var(--radius-lg);
    border: 1px solid color-mix(in srgb, var(--border-light) 70%, transparent);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: background var(--dur-base) ease, border-color var(--dur-base) ease, box-shadow var(--dur-base) ease, transform var(--dur-base) ease;
}

.mc-section:hover {
    background: linear-gradient(150deg, var(--surface-hover) 0%, color-mix(in srgb, var(--surface-hover) 80%, var(--surface)) 100%);
    border-color: color-mix(in srgb, var(--border) 80%, transparent);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transform: translateY(-1px);
}

.mc-section-title {
    font-size: var(--t-2xs);
    font-weight: 700;
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0.75;
}

.mc-section-title i {
    font-size: var(--t-xs);
    color: var(--tm-accent);
    opacity: 0.8;
}

/* ── MC Tooltip ──────────────────────────────────────── */
.mc-tip {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 2px;
    cursor: help;
}

.mc-tip>i {
    font-size: 0.65rem !important;
    color: var(--text-muted) !important;
    transition: color var(--dur-fast);
}

.mc-tip:hover>i {
    color: var(--text) !important;
}

/* Tooltip bubble is managed by JS – positioned with position:fixed */
#mcTooltipBubble {
    position: fixed;
    width: 230px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: var(--tooltip-bg);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: var(--t-2xs);
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: 0;
    text-transform: none;
    white-space: normal;
    box-shadow: var(--shadow-main);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 99999;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--dur-fast);
}

#mcTooltipBubble.visible {
    opacity: 1;
}

/* ── Floating Editor Badge ─────────────────────────── */
.edit-badge {
    position: fixed;
    bottom: 288px;
    right: 32px;
    padding: 10px 18px;
    border-radius: var(--radius-xl);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: var(--t-xs);
    font-weight: 500;
    letter-spacing: 0.02em;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: var(--shadow-2);
    z-index: 9998;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 7px;
    transition: all var(--dur-base) ease;
    user-select: none;
}

/* removed edit-mode badge override */

.edit-badge.cooldown {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.edit-badge:hover {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.3);
    color: #4ade80;
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(34, 197, 94, 0.15);
}

.edit-badge.active {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.35);
    color: #4ade80;
    box-shadow: 0 4px 20px rgba(34, 197, 94, 0.15), 0 0 0 1px rgba(34, 197, 94, 0.08);
    animation: editBadgePulse 2.5s ease-in-out infinite;
}

.edit-badge.active:hover {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.3);
    color: #f87171;
    box-shadow: 0 6px 24px rgba(239, 68, 68, 0.15);
    animation: none;
}

.edit-badge.active:hover #editModeBadgeLabel {
    font-size: 0;
}

.edit-badge.active:hover #editModeBadgeLabel::after {
    content: "Bearbeiten beenden";
    font-size: var(--t-xs);
}

.edit-badge i {
    font-size: var(--t-2xs);
    opacity: 0.8;
}

@keyframes editBadgePulse {

    0%,
    100% {
        opacity: 0.85;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.03);
        box-shadow: 0 4px 24px rgba(34, 197, 94, 0.25), 0 0 0 1px rgba(34, 197, 94, 0.15);
    }
}

[data-theme="light"] .edit-badge {
    background: rgba(255, 255, 255, 0.7);
    box-shadow: var(--shadow-2);
}

[data-theme="light"] .edit-badge.active {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(22, 163, 74, 0.3);
    color: #16a34a;
    box-shadow: 0 4px 20px rgba(34, 197, 94, 0.12);
}
/* Black-Week + Light-Theme: Edit-Badge zurueck auf dunklen Glass-Grund
   (sonst heller Grund unter hellem Text). Compound-Selektor, siehe oben. */
[data-theme="light"][data-profile="black-week"] .edit-badge {
    background: rgba(255, 255, 255, 0.06);
}

/* Global Save Button Visibility Logic */
body:not(.edit-mode) #globalSaveBtn {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(10px) scale(0.95);
}
body.edit-mode #globalSaveBtn {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1);
    transition: all var(--dur-base) var(--ease-inout);
}

/* MC tip light overrides removed – base styles are now theme-aware */

.mc-divider {
    border-top: 1px solid var(--border-light);
    margin: 4px 0;
}

/* ── Toggle Button (Gate) ────────────────────────────── */
.mc-toggle-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    background: var(--surface);
    color: var(--text);
    font-size: var(--t-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--dur-fast);
}

.mc-toggle-btn:hover {
    background: var(--surface-hover);
    border-color: var(--border);
}

.mc-toggle-icon {
    font-size: var(--t-sm);
    opacity: 0.6;
}

/* ── iOS Toggle Switch ───────────────────────────────── */
.mc-toggle-switch {
    margin-left: auto;
    width: 44px;
    min-width: 44px;
    height: 26px;
    background: var(--border);
    border-radius: 13px;
    position: relative;
    transition: background var(--dur-base) var(--ease-out);
    flex-shrink: 0;
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.12);
}

.mc-toggle-dot {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(180deg, #fff 0%, #f0f0f0 100%);
    box-shadow: var(--shadow-2);
    transition: transform var(--dur-base) var(--ease-out);
}

/* Active state */
.mc-toggle-btn.gate-on .mc-toggle-switch,
.mc-effect-toggle input:checked+.mc-toggle-switch {
    background: var(--tm-accent);
}

.mc-toggle-btn.gate-on .mc-toggle-dot,
.mc-effect-toggle input:checked+.mc-toggle-switch .mc-toggle-dot {
    transform: translateX(18px);
}

/* ── Effect Toggle Row ───────────────────────────────── */
.mc-effect-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    background: var(--surface);
    cursor: pointer;
    transition: all var(--dur-fast);
    margin-bottom: 4px;
}

.mc-effect-toggle:hover {
    background: var(--surface-hover);
    border-color: var(--border);
}

.mc-effect-toggle input[type="checkbox"] {
    display: none;
}

.mc-effect-label {
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.mc-effect-label i {
    font-size: var(--t-sm);
    color: var(--text-muted);
    width: 18px;
    text-align: center;
}

/* ── Discount Row in MC ──────────────────────────────── */
.mc-discount-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mc-discount-select {
    flex: 1;
    padding: 8px 10px;
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    background: var(--input-bg);
    color: var(--text);
    font-size: var(--t-xs);
    font-family: var(--font-heading);
    cursor: pointer;
    appearance: auto;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}

.mc-discount-select:focus {
    border-color: var(--tm-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tm-accent) 12%, transparent);
    outline: none;
}

/* ── Date Fields ─────────────────────────────────────── */
.mc-date-fields {
    display: none;
    gap: 8px;
    margin-top: 8px;
}

.mc-date-fields.open {
    display: flex;
}

.mc-date-label {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    font-size: var(--t-xs);
    color: var(--text-muted);
    font-weight: 500;
}

.mc-date-input {
    flex: 1;
    padding: 7px 8px;
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    background: var(--input-bg);
    color: var(--text);
    font-size: var(--t-xs);
    font-family: var(--font-heading);
    color-scheme: auto;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}

.mc-date-input:focus {
    border-color: var(--tm-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tm-accent) 12%, transparent);
    outline: none;
}

/* ── MC Icon Buttons ─────────────────────────────────── */
.mc-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--border-light) 80%, transparent);
    background: linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface-hover) 40%, var(--surface)) 100%);
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--dur-base) var(--ease-out);
    flex-shrink: 0;
    position: relative;
    box-shadow: var(--shadow-1);
}

.mc-icon-btn:hover {
    background: var(--surface-hover);
    color: var(--text);
    border-color: var(--border);
    transform: translateY(-2px) scale(1.05);
    box-shadow: var(--shadow-2);
}

.mc-icon-btn-danger:hover {
    background: rgba(239, 68, 68, 0.15);
    color: var(--status-danger);
    border-color: rgba(239, 68, 68, 0.3);
}

.mc-icon-btn-success {
    background: rgba(34, 197, 94, 0.1);
    color: rgba(34, 197, 94, 0.7);
    border-color: rgba(34, 197, 94, 0.2);
}

.mc-icon-btn-success:hover {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
    border-color: rgba(34, 197, 94, 0.4);
}

/* ── Profile Row ─────────────────────────────────────── */
.mc-profile-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── Profile Override Hover Pill ─────────────────────── */
.profile-override-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: var(--radius-xl);
    background: rgba(96, 165, 250, .15);
    color: #60a5fa;
    font-size: var(--t-2xs);
    font-weight: 600;
    cursor: help;
    border: 1px solid rgba(96, 165, 250, .3);
    white-space: nowrap;
    margin-left: auto;
    /* Push it to the right if space allows */
}

.profile-override-pill:hover .profile-override-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.profile-override-tooltip {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: auto;
    min-width: 220px;
    background: rgba(30, 58, 95, .95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(96, 165, 250, .3);
    border-radius: 10px;
    padding: 12px 14px;
    color: #e0e7ff;
    box-shadow: var(--shadow-3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);
    transition: all var(--dur-fast) var(--ease-out);
    z-index: 101;
    pointer-events: none;
    text-align: left;
}



.ap-custom-select {
    position: relative;
    flex: 1;
    user-select: none;
}

/* Fix double wrappers from cloned native select classes */
.ap-custom-select.udb-discount-select,
.ap-custom-select.udb-profile-select,
.ap-custom-select.udb-contact-select,
.ap-custom-select.mc-discount-select,
.ap-custom-select.udb-add-select,
.ap-custom-select.udb-gate-select {
    border: none !important;
    background: none !important;
    padding: 0 !important;
    background-image: none !important;
    border-radius: 0 !important;
}

/* Make table selects compact to fit layout */
.ap-custom-select.udb-discount-select .ap-custom-select-trigger,
.ap-custom-select.udb-profile-select .ap-custom-select-trigger,
.ap-custom-select.udb-contact-select .ap-custom-select-trigger {
    padding: 4px 10px;
    border-radius: var(--radius-xl);
    font-size: var(--t-xs);
}

/* Ansprechpartner-Spalte: ein gesetzter AP steht in normaler Textfarbe, "Kein AP"
   bleibt gedaempft wie die uebrigen Leerzustaende der Tabelle. Bewusst kein eigener
   Farbton – die Spalte ist eine interne Zuordnung, kein Statussignal. */
.ap-custom-select.udb-contact-select .ap-custom-select-trigger {
    color: var(--text-muted, #999);
}

.ap-custom-select.udb-contact-select.active .ap-custom-select-trigger {
    color: var(--text);
}

.ap-custom-select.udb-add-select .ap-custom-select-trigger {
    padding: 9px 12px;
    border-radius: 8px;
    font-size: var(--t-xs);
    min-width: 80px;
    height: 100%;
}

.ap-custom-select-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 8px 12px;
    font-size: var(--t-sm);
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--dur-fast), border-color var(--dur-fast);
}

.ap-custom-select-trigger:hover {
    background: var(--surface-hover);
    border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
}

.ap-custom-select-options {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 999999;
    max-height: 250px;
    overflow-y: auto;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-5px);
    transition: opacity var(--dur-fast), transform var(--dur-fast);
}

.ap-custom-select.open .ap-custom-select-options,
.ap-custom-select-options.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.ap-custom-select.open .ap-custom-select-trigger i {
    transform: rotate(180deg);
}

.ap-custom-select-trigger i {
    transition: transform var(--dur-fast);
    font-size: var(--t-xs);
    opacity: 0.7;
}

.ap-custom-option {
    padding: 10px 12px;
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    transition: background var(--dur-fast);
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.ap-custom-option:hover {
    background: var(--surface-hover);
}

.ap-custom-option.selected {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}

/* ── Share-Link Row ──────────────────────────────────── */
.mc-share-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mc-share-input {
    flex: 1;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
    background: var(--surface);
    color: var(--text-muted);
    font-size: var(--t-2xs);
    font-family: monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Edit / Cart Toggle States ───────────────────────── */
.mc-toggle-btn.edit-on .mc-toggle-switch,
.mc-toggle-btn.cart-on .mc-toggle-switch,
.mc-toggle-btn.inquiry-on .mc-toggle-switch,
.mc-toggle-btn.pdf-on .mc-toggle-switch,
.mc-toggle-btn.copy-on .mc-toggle-switch,
.mc-toggle-btn.pricenote-on .mc-toggle-switch,
.mc-toggle-btn.preview-on .mc-toggle-switch {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border-color: rgba(34, 197, 94, 0.4);
}

.mc-toggle-btn.edit-on .mc-toggle-dot,
.mc-toggle-btn.cart-on .mc-toggle-dot,
.mc-toggle-btn.inquiry-on .mc-toggle-dot,
.mc-toggle-btn.pdf-on .mc-toggle-dot,
.mc-toggle-btn.copy-on .mc-toggle-dot,
.mc-toggle-btn.pricenote-on .mc-toggle-dot,
.mc-toggle-btn.preview-on .mc-toggle-dot {
    transform: translateX(16px);
}

/* Light theme MC overrides removed – base styles are now theme-aware */

/* ── Action Button ───────────────────────────────────── */
.mc-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 18px;
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--border-light) 80%, transparent);
    background: linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface-hover) 40%, var(--surface)) 100%);
    color: var(--text);
    font-size: var(--t-sm);
    font-weight: 700;
    font-family: var(--font-heading);
    cursor: pointer;
    transition: all var(--dur-base) var(--ease-out);
    letter-spacing: 0.03em;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.mc-action-btn:hover {
    background: var(--surface-hover);
    border-color: var(--border);
    color: var(--text);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.mc-action-btn:active {
    transform: translateY(0) scale(0.98);
    box-shadow: var(--shadow-1);
}

.mc-full-width {
    width: 100%;
    margin-bottom: 6px;
}

.mc-badge {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
}

/* ── Brand Checks in MC ──────────────────────────────── */
.mc-section .ap-brand-checks {
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px;
}

/* ── Tier Switch Effects ─────────────────────────────── */
/* Shimmer / Gloss sweep */
@keyframes shimmerSweep {
    0% {
        transform: translateX(-100%) skewX(-20deg);
    }

    100% {
        transform: translateX(150%) skewX(-20deg);
    }
}

/* Clip overflow only while shimmer is active (class is added/removed by JS within ~800ms) */
.tier-shimmer {
    overflow: hidden !important;
}

.tier-shimmer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
    animation: shimmerSweep 0.7s ease-out forwards;
    pointer-events: none;
    z-index: 5;
}

/* Glow Pulse ring */
@keyframes glowPulseRing {
    0% {
        transform: scale(0.5);
        opacity: 1;
    }

    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

.tier-glow-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    margin: -30px 0 0 -30px;
    border-radius: 50%;
    border: 2px solid var(--accent, var(--tm-accent));
    pointer-events: none;
    z-index: 5;
    animation: glowPulseRing 0.7s ease-out forwards;
}

/* Price counter morph – handled via JS, this just styles the morphing container */
.price-morphing {
    display: inline-block;
    transition: none;
}

/* Light mode MC overrides removed – base styles are now theme-aware */


/* ── Dark mode depth for Admin UI ───────────────────── */
[data-theme="dark"] .mc-panel {
    box-shadow: var(--shadow-modal);
}

[data-theme="dark"] .udb-modal {
    box-shadow: var(--shadow-modal);
}

[data-theme="dark"] .udb-overlay {
    background: rgba(5, 7, 12, 0.7);
}

/* ── Mobile: MC full width ───────────────────────────── */
@media (max-width: 600px) {
    .layered-cake-grid {
        gap: 12px;
    }

    /* Feste 2 Spalten fuer alle Layer-Grids im Mobile-Bereich (auch 500-600px,
       wo die Basis repeat(auto-fill, minmax(130px,1fr)) sonst 3 Tracks fittet
       und Layer mit weniger Kacheln rechts leere Spalten liessen). Haelt die
       gemergten Premium-Layer vertikal fluchtend. Eine angebrochene Schlussreihe
       bleibt dabei linksbuendig, siehe Kommentar im 500px-Block. */
    .layer-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mc-panel {
        width: 100%;
        max-width: 100%;
    }
}

/* Strikethrough original price next to discounted price */
.price-original {
    font-size: 0.75em;
    text-decoration: line-through;
    opacity: 0.45;
    margin-right: 4px;
    font-weight: 500;
}

/* SM packages: stack strikethrough above current price */
.sm-price .price-original {
    display: block;
    margin-right: 0;
    margin-bottom: 2px;
}


/* ══════════════════════════════════════════════════════════ */
/* UserDB Modal                                              */
/* ══════════════════════════════════════════════════════════ */
.udb-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: color-mix(in srgb, var(--bg) 65%, transparent);
    backdrop-filter: blur(24px) saturate(1.6);
    -webkit-backdrop-filter: blur(24px) saturate(1.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-base) ease;
}

.udb-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.udb-modal {
    background: color-mix(in srgb, var(--panel-bg) 88%, transparent);
    backdrop-filter: blur(56px) saturate(2.2);
    -webkit-backdrop-filter: blur(56px) saturate(2.2);
    border: 1px solid color-mix(in srgb, var(--border-light) 40%, transparent);
    border-radius: 24px;
    box-shadow:
        0 40px 100px rgba(0, 0, 0, 0.18),
        0 12px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    width: clamp(360px, 95vw, 1200px);
    max-width: 1200px;
    max-height: clamp(400px, 82vh, 900px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(16px) scale(0.94);
    opacity: 0;
    transition: transform var(--dur-base) var(--ease-out),
        opacity var(--dur-base) ease;
}

.udb-overlay.open .udb-modal {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* Tabs */
.udb-tabs {
    display: flex;
    gap: 2px;
    padding: 8px 24px;
    border-bottom: 1px solid color-mix(in srgb, var(--border-light) 50%, transparent);
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 50%, transparent) 0%, transparent 100%);
    flex-shrink: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.udb-tabs::-webkit-scrollbar {
    display: none;
}

.udb-tab {
    padding: 8px 14px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: var(--t-xs);
    font-weight: 600;
    font-family: var(--font-heading);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
    transition: all var(--dur-base) ease;
    white-space: nowrap;
    border-radius: 10px;
}

.udb-tab::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 0;
    background: transparent;
    transition: none;
}

.udb-tab i {
    font-size: var(--t-2xs);
    opacity: 0.6;
    transition: opacity var(--dur-fast), color var(--dur-fast);
}

.udb-tab:hover {
    color: var(--text);
    background: color-mix(in srgb, var(--surface-hover) 60%, transparent);
}

.udb-tab:hover i {
    opacity: 0.8;
}

.udb-tab.active {
    color: var(--text);
    background: color-mix(in srgb, var(--surface) 80%, transparent);
    border-radius: 10px;
    box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.udb-tab.active i {
    opacity: 1;
    color: var(--tm-accent);
}

.udb-tab.active::after {
    display: none;
}

/* Tab body / panels */
.udb-tab-body {
    /* Als Variable, weil der Partner-Tab denselben Wert braucht: dort wandert
       der obere Abstand ins Panel, siehe .udb-list-controls. */
    --udb-tab-pad-top: 24px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--udb-tab-pad-top) 32px 40px 32px;
    scrollbar-width: thin;
}

.udb-tab-panel {
    display: none;
}

.udb-tab-panel.active {
    display: block;
}

/* ── Social Media Admin Tab ─────────────────────── */
.social-admin-brand {
    background: var(--surface-hover);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    margin-bottom: 12px;
}

.social-admin-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

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

.social-admin-icon {
    width: 30px;
    text-align: center;
    font-size: var(--t-base);
    color: var(--text-muted);
    flex-shrink: 0;
}

.social-admin-count {
    width: 110px;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--panel-bg);
    color: var(--text-primary);
    font-size: var(--t-xs);
    font-weight: 500;
    flex-shrink: 0;
}

.social-admin-url {
    flex: 1;
    min-width: 0;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--panel-bg);
    color: var(--text-muted);
    font-size: var(--t-xs);
}

.social-admin-count:focus,
.social-admin-url:focus {
    outline: none;
    border-color: var(--accent, #f59e0b);
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.15);
}

/* ── Debug Tab ─────────────────────────────────── */
.debug-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 4px 0;
}

.debug-card {
    background: linear-gradient(150deg,
            color-mix(in srgb, var(--surface) 95%, transparent) 0%,
            color-mix(in srgb, var(--surface-hover) 50%, var(--surface)) 100%);
    border: 1px solid color-mix(in srgb, var(--border-light) 50%, transparent);
    border-radius: 16px;
    padding: 18px 20px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: all var(--dur-base) ease;
}

.debug-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    border-color: color-mix(in srgb, var(--border) 60%, transparent);
}

.debug-card.full {
    grid-column: 1 / -1;
}

.debug-card h4 {
    margin: 0 0 12px;
    font-size: var(--t-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.debug-card h4 i {
    font-size: var(--t-sm);
}

.debug-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
}

.debug-stat {
    background: linear-gradient(150deg,
            color-mix(in srgb, var(--panel-bg) 90%, transparent) 0%,
            color-mix(in srgb, var(--panel-bg) 70%, transparent) 100%);
    border-radius: 12px;
    padding: 12px 14px;
    text-align: center;
    border: 1px solid color-mix(in srgb, var(--border-light) 30%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.debug-stat-value {
    font-size: var(--t-md);
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.debug-stat-label {
    font-size: var(--t-2xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-top: 2px;
}

.debug-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 4px;
}

.debug-dot.green {
    background: #22c55e;
    box-shadow: 0 0 6px #22c55e80;
}

.debug-dot.red {
    background: var(--status-danger);
    box-shadow: 0 0 6px color-mix(in srgb, var(--status-danger) 50%, transparent);
}

.debug-error-table {
    width: 100%;
    font-size: var(--t-xs);
    border-collapse: collapse;
}

.debug-error-table th {
    text-align: left;
    padding: 6px 8px;
    background: var(--panel-bg);
    font-weight: 500;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-light);
    white-space: nowrap;
}

.debug-error-table td {
    padding: 5px 8px;
    border-bottom: 1px solid var(--border-light, rgba(0, 0, 0, 0.04));
    font-size: var(--t-2xs);
    color: var(--text);
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.debug-error-table tr:hover td {
    background: rgba(0, 0, 0, 0.02);
}

.debug-error-type {
    color: var(--status-danger);
    font-weight: 500;
}

.debug-file-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 240px;
    overflow-y: auto;
}

.debug-file-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 8px;
    border-bottom: 1px solid var(--border-light, rgba(0, 0, 0, 0.04));
    font-size: var(--t-xs);
}

.debug-file-list li:hover {
    background: rgba(0, 0, 0, 0.02);
}

.debug-file-size {
    color: var(--text-muted);
    font-size: var(--t-2xs);
    white-space: nowrap;
    margin-left: 8px;
}

.debug-info-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid var(--border-light, rgba(0, 0, 0, 0.04));
    font-size: var(--t-xs);
}

.debug-info-label {
    color: var(--text-muted);
    font-weight: 500;
}

.debug-info-value {
    font-weight: 500;
    color: var(--text);
}

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

/* Add card */
.udb-add-card {
    margin: 12px 24px 16px;
    padding: 14px 18px;
    background: color-mix(in srgb, var(--tm-accent) 50%, transparent);
    border: 1px solid color-mix(in srgb, var(--tm-accent) 50%, transparent);
    border-radius: var(--radius-lg);
}

.udb-add-row-inline {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: nowrap;
}

.udb-add-row-inline .udb-input {
    flex: 1 1 140px;
    min-width: 100px;
    padding: 7px 10px;
    font-size: var(--t-xs);
}

.udb-add-row-inline .udb-input-sm {
    flex: 0 1 110px;
    min-width: 70px;
}

.udb-select-sm {
    flex: 0 0 auto;
    padding: 6px 8px;
    font-size: var(--t-xs);
    border: 1px solid var(--border-light, #e0e0e0);
    border-radius: var(--radius-sm);
    background: var(--panel-bg, #fff);
    color: var(--text-primary);
    cursor: pointer;
    outline: none;
    transition: border-color var(--dur-fast);
    appearance: auto;
}

.udb-select-sm:focus {
    border-color: var(--accent, var(--tm-accent));
}

.udb-add-row-inline .udb-btn-add {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 7px 14px;
    font-size: var(--t-xs);
}

/* ── Listen-Steuerung ueber der Partner-Tabelle ─────────────────
   Suchfeld + Filter nach Ansprechpartner. Bewusst leichter gehalten als die
   Anlage-Zeile darueber: hier wird gesucht, nicht erfasst. */
.udb-list-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 10px 0 12px;
    flex-wrap: wrap;

    /* Bleibt beim Scrollen der Liste stehen: bei vielen Partnern ist das
       Suchfeld sonst genau dann aus dem Bild, wenn man es braucht. Scroll-
       Container ist .udb-tab-body, geklebt wird an dessen Oberkante.
       Drei Punkte haengen daran und sind nicht optional:
       - der Abstand zur Tabelle sitzt als padding statt margin, sonst
         scheinen die Zeilen im Zwischenraum unter der Leiste durch;
       - der Hintergrund ist deckend und nimmt dieselbe Variable wie
         .udb-modal, damit die Leiste in jedem Theme nahtlos bleibt;
       - z-index 3 legt sie ueber den ebenfalls klebenden Tabellenkopf
         (z-index 2), der direkt darunter andockt. */
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--panel-bg);
}

/* Der obere Abstand wandert im Partner-Tab vom Scroll-Container ins Panel.
   Grund: das padding-top des Containers liegt UEBER allem, was dort klebt.
   Die Steuerleiste haette sonst einen 24px hohen Streifen ueber sich, durch
   den die Tabellenzeilen sichtbar durchlaufen (gemessen und im Screenshot
   bestaetigt). Als Panel-Abstand scrollt er stattdessen mit weg, und der
   Scrollport beginnt buendig. Betrifft bewusst nur den Partner-Tab: die
   uebrigen Panels sind teils tiefer verschachtelt, eine globale Regel
   verschoebe dort den Abstand. Gleiches :has-Muster wie beim Rabatt-Tab. */
.udb-tab-body:has(#udbPanelPartners.active) {
    padding-top: 0;
}

#udbPanelPartners {
    padding-top: var(--udb-tab-pad-top, 24px);
}

/* Der Tabellenkopf klebt am oberen Rand seines Scroll-Containers.
   Das ist .udb-table-wrap (overflow auto), nicht .udb-tab-body: jedes
   overflow ausser visible macht den Wrap zum Sticky-Containing-Block.
   `top: var(--udb-controls-h)` war fuer den Tab-Body gerechnet und hat
   den Kopf innerhalb des Wraps um die Leistenhoehe nach unten geschoben.
   Bei vielen Zeilen faellt das kaum auf (erste Zeile leicht ueberdeckt),
   bei einem einzigen Treffer liegt genau diese Zeile unter dem Kopf –
   Suche sagt "1 von N", die Tabelle sieht leer aus. */
#udbPanelPartners .udb-table th {
    top: 0;
}

.udb-search-box {
    position: relative;
    flex: 1 1 260px;
    min-width: 180px;
    max-width: 380px;
    display: flex;
    align-items: center;
}

.udb-search-box>i {
    position: absolute;
    left: 12px;
    font-size: var(--t-xs);
    color: var(--text-muted, #999);
    pointer-events: none;
}

.udb-search-input {
    width: 100%;
    padding: 9px 12px 9px 34px;
    font-size: var(--t-xs);
    font-family: var(--font-body);
    border: 1px solid var(--border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg) 50%, var(--surface));
    color: var(--text);
    outline: none;
    transition: border-color var(--dur-fast), background var(--dur-fast);
}

.udb-search-input:focus {
    border-color: var(--tm-accent);
    background: var(--surface);
}

/* Trefferzahl: still, solange nichts gefiltert ist, und deutlich, sobald die
   Liste etwas verbirgt - sonst liest sich eine gefilterte Tabelle wie eine
   geschrumpfte Partnerliste. */
.udb-list-count {
    margin-left: auto;
    font-size: var(--t-xs);
    color: var(--text-muted, #999);
    white-space: nowrap;
}

.udb-list-count.is-filtered {
    color: var(--tm-accent);
}

/* Chips in der Steuerleiste: der Warnchip nur, wenn es wirklich etwas zu tun
   gibt (er blendet sich selbst aus), der schlichte fuer den CSV-Export. */
.udb-chip-warn,
.udb-chip-plain {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    font-size: var(--t-xs);
    font-family: var(--font-body);
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}

.udb-chip-warn {
    border: 1px solid color-mix(in srgb, #e0a800 45%, transparent);
    background: color-mix(in srgb, #e0a800 12%, transparent);
    color: #e0a800;
}

.udb-chip-warn:hover {
    background: color-mix(in srgb, #e0a800 20%, transparent);
}

.udb-chip-plain {
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted, #999);
}

.udb-chip-plain:hover {
    border-color: var(--tm-accent);
    color: var(--text);
}

/* Auswahlspalte: schmal halten, sonst frisst sie Platz von den Datenspalten */
.udb-table th.udb-col-pick,
.udb-table td.udb-col-pick {
    width: 34px;
    padding-left: 12px;
    padding-right: 0;
    text-align: center;
}

.udb-col-pick input {
    cursor: pointer;
    accent-color: var(--tm-accent);
}

/* Sammelaktion: sitzt als einziges Element unter der Tabelle und ist nur da,
   wenn wirklich etwas ausgewaehlt ist. */
.udb-bulk-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 12px 0 0;
    padding: 12px 16px;
    border: 1px solid color-mix(in srgb, var(--tm-accent) 35%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--tm-accent) 8%, transparent);
}

.udb-bulk-count {
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--text);
}

.udb-bulk-label,
.udb-bulk-status {
    font-size: var(--t-xs);
    color: var(--text-muted, #999);
}

.udb-bulk-apply,
.udb-bulk-clear {
    padding: 8px 14px;
    font-size: var(--t-xs);
    font-family: var(--font-body);
    border-radius: 8px;
    cursor: pointer;
    transition: filter var(--dur-fast), border-color var(--dur-fast);
}

.udb-bulk-apply {
    border: none;
    background: var(--tm-accent);
    color: #fff;
    font-weight: 600;
}

.udb-bulk-apply:hover:not(:disabled) {
    filter: brightness(1.1);
}

.udb-bulk-apply:disabled {
    opacity: 0.6;
    cursor: default;
}

.udb-bulk-clear {
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted, #999);
}

.udb-bulk-clear:hover {
    border-color: var(--border-light);
    color: var(--text);
}

/* Notiz in der Namenszelle: als eigenes Element erkennbar, voller Text im
   title-Attribut (die Zelle schneidet ihn sonst wortlos ab). */
/* Namenszelle deckeln: ein `nowrap`-Element darin wuerde die Spalte sonst auf
   seine eigene Wunschbreite aufziehen und die ganze Tabelle ueber den Rahmen
   schieben (gemessen: 173px -> 287px allein durch die Notiz). Der Text wird
   gekuerzt, vollstaendig steht er im title. */
.udb-table td.udb-username {
    max-width: 230px;
}

.udb-user-sub {
    display: flex;
    align-items: baseline;
    min-width: 0;
    overflow: hidden;
}

.udb-sub-company {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 0 1 auto;
}

.udb-sub-sep {
    flex: 0 0 auto;
}

.udb-sub-note {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    cursor: help;
    font-style: italic;
}

.udb-sub-note>i {
    font-style: normal;
    opacity: 0.6;
}

/* Eingeschlafene Partner: die Markierung sitzt neben dem Datum, nicht statt
   dessen - das Datum bleibt die Information, das Zeichen ist der Hinweis. */
.udb-idle-mark {
    margin-left: 6px;
    font-size: 0.85em;
    opacity: 0.75;
    cursor: help;
}

.udb-login-cell.is-stale .udb-idle-mark {
    color: #e0a800;
}

.udb-login-cell.is-never {
    color: var(--text-muted, #999);
}

.udb-login-cell.is-never .udb-idle-mark {
    color: var(--text-muted, #999);
}

/* Compact inline add-partner bar */
.udb-add-partner-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 20px;
    /* Seitlich 0: gleiche Kante wie Tabelle und Karten, siehe .udb-table-wrap. */
    margin: 4px 0 24px;
    border: 1px dashed var(--border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface) 30%, transparent);
    flex-wrap: wrap;
    transition: background var(--dur-fast), border-color var(--dur-fast);
}

.udb-add-partner-bar:focus-within {
    background: var(--surface);
    border-style: solid;
    border-color: var(--border-light);
}

.udb-add-input {
    flex: 1 1 120px;
    min-width: 80px;
    padding: 9px 12px;
    font-size: var(--t-xs);
    font-family: var(--font-body);
    border: 1px solid var(--border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg) 50%, var(--surface));
    color: var(--text);
    outline: none;
    transition: border-color var(--dur-fast), background var(--dur-fast);
}

.udb-add-input:focus {
    border-color: var(--tm-accent);
    background: var(--surface);
}

.udb-add-input-sm {
    flex: 1 1 100px;
    min-width: 90px;
}

.udb-add-select {
    flex: 0 0 auto;
    padding: 9px 10px;
    font-size: var(--t-xs);
    font-family: var(--font-body);
    border: 1px solid var(--border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg) 50%, var(--surface));
    color: var(--text);
    cursor: pointer;
    outline: none;
    transition: border-color var(--dur-fast);
}

.udb-add-select:focus {
    border-color: var(--tm-accent);
}

.udb-add-btn {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: var(--tm-accent);
    color: #fff;
    font-size: var(--t-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--dur-fast), transform var(--dur-fast);
}

.udb-add-btn:hover {
    background: color-mix(in srgb, var(--tm-accent) 85%, #000);
    transform: scale(1.08);
}

/* Header */
.udb-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 40%, transparent) 0%, transparent 100%);
    border-bottom: none;
    position: relative;
    flex-shrink: 0;
}

.udb-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 24px;
    right: 24px;
    height: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--border-light) 50%, transparent), transparent);
}

.udb-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--tm-accent);
    font-weight: 700;
    font-size: var(--t-base);
    font-family: var(--font-heading);
}

.udb-header-left i {
    font-size: var(--t-base);
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--tm-accent) 25%, transparent));
}

.udb-header-left h3 {
    margin: 0;
    font-size: var(--t-base);
    color: var(--text);
    font-weight: 700;
    letter-spacing: 0.01em;
}

.udb-close {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--border-light) 50%, transparent);
    background: color-mix(in srgb, var(--surface) 60%, transparent);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--dur-base) ease;
    font-size: var(--t-xs);
}

.udb-close:hover {
    background: rgba(239, 83, 80, 0.12);
    border-color: rgba(239, 83, 80, 0.35);
    color: #ef5350;
    transform: scale(1.1);
}

/* Table */
/* Seitlich buendig mit den Karten darueber (Beschreibung, Kampagnen-Box): den
   Aussenabstand setzt allein .udb-tab-body. Eigene 24px hier machten die
   Tabelle sichtbar schmaler als die Karten im selben Tab - vier gestapelte
   Bloecke mit zwei verschiedenen Kanten. */
.udb-table-wrap {
    overflow-x: auto;
    overflow-y: auto;
    flex: 1;
    padding: 10px 0;
}

.udb-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
    font-size: var(--t-sm);
    color: var(--text);
}

.udb-table th {
    padding: 8px 16px;
    text-align: left;
    font-size: var(--t-2xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: none;
    position: sticky;
    top: 0;
    background: var(--panel-bg);
    z-index: 2;
}

.udb-table td {
    padding: 16px 16px;
    background: color-mix(in srgb, var(--surface) 60%, transparent);
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
    transition: all var(--dur-fast) ease;
}

.udb-table td:first-child {
    border-left: 1px solid var(--border-light);
    border-top-left-radius: 14px;
    border-bottom-left-radius: 14px;
}

/* Last col (actions) gets fixed width so the table doesn't stretch */
.udb-table td:last-child {
    width: auto;
    white-space: nowrap;
    border-right: 1px solid var(--border-light);
    border-top-right-radius: 14px;
    border-bottom-right-radius: 14px;
}

.udb-table tr:hover td {
    background: var(--surface-hover);
    border-color: color-mix(in srgb, var(--border) 60%, transparent);
    box-shadow: var(--shadow-2);
}

.udb-username {
    font-weight: 700;
    font-family: var(--font-heading);
    letter-spacing: -0.01em;
}

.udb-badge-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--tm-accent) 12%, transparent);
    color: var(--tm-accent);
    font-size: var(--t-xs);
    font-weight: 700;
}

.udb-badge-count.is-zero {
    background: color-mix(in srgb, var(--text-muted) 14%, transparent);
    color: var(--text-muted);
}

.udb-never {
    color: var(--text-muted, rgba(0, 0, 0, 0.35));
    font-style: italic;
}

/* Sortierbare Spaltenkoepfe (Partnerliste) */
.udb-table th[data-sort] {
    cursor: pointer;
    user-select: none;
    transition: color var(--dur-fast);
}

.udb-table th[data-sort]:hover {
    color: var(--text);
}

.udb-table th[data-sort].sort-active {
    color: var(--tm-accent);
}

.udb-sort-icon {
    margin-left: 4px;
    font-size: 0.85em;
    opacity: 0.45;
}

.udb-table th[data-sort].sort-active .udb-sort-icon {
    opacity: 1;
}

/* Such-Toolbar ueber der Partnerliste */
.udb-list-toolbar {
    display: flex;
    justify-content: flex-end;
    padding: 4px 0 0;
}

.udb-search-wrap {
    position: relative;
    width: 100%;
    max-width: 260px;
}

.udb-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--t-xs);
    color: var(--text-muted);
    pointer-events: none;
}

.udb-search-input {
    width: 100%;
    padding: 8px 12px 8px 32px;
    font-size: var(--t-xs);
    font-family: var(--font-body);
    border: 1px solid var(--border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg) 50%, var(--surface));
    color: var(--text);
    outline: none;
    transition: border-color var(--dur-fast), background var(--dur-fast);
}

.udb-search-input:focus {
    border-color: var(--tm-accent);
    background: var(--surface);
}

.udb-loading {
    text-align: center;
    padding: 24px;
    color: var(--text-muted, rgba(0, 0, 0, 0.4));
}

/* Inline edit in table */
.udb-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: nowrap;
}

/* "Link kopieren" Button – visuell hervorgehoben */
.udb-copy-link-btn {
    background: color-mix(in srgb, var(--tm-accent) 50%, transparent);
    border-color: color-mix(in srgb, var(--tm-accent) 50%, transparent);
    color: var(--accent, var(--tm-accent));
    gap: 5px;
    font-size: var(--t-xs);
    white-space: nowrap;
}

.udb-copy-link-btn:hover {
    background: color-mix(in srgb, var(--tm-accent) 50%, transparent);
}

/* Discount badge in table */
/* Discount select in table ─ looks like a pill badge */
.udb-discount-select {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    color: var(--text-muted, #999);
    font-size: var(--t-xs);
    font-family: inherit;
    padding: 3px 22px 3px 10px;
    cursor: pointer;
    outline: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 8px;
    transition: border-color var(--dur-fast), background-color var(--dur-fast), color var(--dur-fast);
}

.udb-discount-select:hover {
    border-color: var(--accent, var(--tm-accent));
}

.udb-discount-select.active {
    border-color: rgba(102, 187, 106, 0.55);
    background-color: rgba(102, 187, 106, 0.09);
    color: #81c784;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2381c784'/%3E%3C/svg%3E");
}

.udb-discount-select option {
    background: var(--bg, #1a1a2e);
    color: var(--text, #eee);
}

/* Profile dropdown */
.udb-profile-select {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    color: var(--text-muted, #999);
    font-size: var(--t-xs);
    font-family: inherit;
    padding: 3px 22px 3px 10px;
    cursor: pointer;
    outline: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 8px;
    transition: border-color var(--dur-fast), background-color var(--dur-fast), color var(--dur-fast);
}

.udb-profile-select:hover {
    border-color: var(--accent, var(--tm-accent));
}

.udb-profile-select.active {
    border-color: rgba(100, 149, 237, 0.55);
    background-color: rgba(100, 149, 237, 0.09);
    color: #93b8f0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2393b8f0'/%3E%3C/svg%3E");
}

.udb-profile-select option {
    background: var(--bg, #1a1a2e);
    color: var(--text, #eee);
}

/* Type dropdown (Partner/Tracking) */
.udb-type-select {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    color: var(--text-muted, #999);
    font-size: var(--t-xs);
    font-family: inherit;
    padding: 3px 22px 3px 10px;
    cursor: pointer;
    outline: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 8px;
    transition: border-color var(--dur-fast), background-color var(--dur-fast), color var(--dur-fast);
}

.udb-type-select:hover {
    border-color: var(--accent, var(--tm-accent));
}

.udb-type-select.active {
    border-color: rgba(255, 167, 38, 0.55);
    background-color: rgba(255, 167, 38, 0.09);
    color: #ffa726;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23ffa726'/%3E%3C/svg%3E");
}

.udb-type-select option {
    background: var(--bg, #1a1a2e);
    color: var(--text, #eee);
}

.udb-discount-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--t-xs);
    color: var(--text-muted, #aaa);
    white-space: nowrap;
}

.udb-discount-field {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    color: var(--text, #eee);
    font-size: var(--t-xs);
    font-family: inherit;
    padding: 3px 22px 3px 10px;
    cursor: pointer;
    outline: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 8px;
}

.udb-discount-field option {
    background: var(--bg, #1a1a2e);
    color: var(--text, #eee);
}

.udb-action-btn {
    padding: 5px 10px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--status-success);
    font-size: var(--t-xs);
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all var(--dur-fast) ease;
    white-space: nowrap;
}

.udb-action-btn:hover {
    background: rgba(16, 185, 129, 0.08);
    color: #059669;
}

.udb-action-btn i.fa-link {
    font-size: var(--t-2xs);
}

.udb-action-btn.danger {
    padding: 4px 6px;
    color: #d1d5db;
    font-size: var(--t-xs);
}

.udb-action-btn.danger:hover {
    color: #ef5350;
    background: rgba(239, 83, 80, 0.06);
}

[data-theme="dark"] .udb-action-btn {
    color: #34d399;
}

[data-theme="dark"] .udb-action-btn:hover {
    background: rgba(52, 211, 153, 0.1);
    color: #6ee7b7;
}

[data-theme="dark"] .udb-action-btn.danger {
    color: #555;
}

[data-theme="dark"] .udb-action-btn.danger:hover {
    color: #ef5350;
    background: rgba(239, 83, 80, 0.1);
}

.udb-action-btn.success {
    color: #66bb6a;
    border-color: rgba(102, 187, 106, 0.3);
}

.udb-inline-edit {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

.udb-inline-input {
    flex: 1;
    padding: 5px 10px;
    background: var(--input-bg, rgba(0, 0, 0, 0.05));
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: var(--t-xs);
    outline: none;
    min-width: 0;
}

.udb-inline-input:focus {
    border-color: var(--tm-accent);
}

/* Add section */
.udb-add-section {
    padding: 16px 24px;
    border-top: 1px solid var(--border-light);
    background: var(--panel-bg);
}

.udb-add-title {
    font-size: var(--t-2xs);
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted, rgba(0, 0, 0, 0.4));
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.udb-add-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.udb-input {
    flex: 1;
    min-width: 140px;
    padding: 9px 14px;
    background: var(--input-bg, rgba(0, 0, 0, 0.05));
    border: 1px solid color-mix(in srgb, var(--border-light) 60%, transparent);
    border-radius: 12px;
    color: var(--text);
    font-size: var(--t-sm);
    font-family: var(--font-body);
    outline: none;
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04);
}

.udb-input:focus {
    border-color: var(--tm-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tm-accent) 12%, transparent);
}

.udb-input::placeholder {
    color: var(--text-muted, rgba(0, 0, 0, 0.35));
}

.udb-btn {
    padding: 9px 18px;
    border-radius: 12px;
    border: 1px solid transparent;
    font-size: var(--t-sm);
    font-weight: 600;
    font-family: var(--font-heading);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all var(--dur-base) var(--ease-out);
    white-space: nowrap;
}

.udb-btn-add {
    background: color-mix(in srgb, var(--tm-accent) 12%, transparent);
    border-color: color-mix(in srgb, var(--tm-accent) 40%, transparent);
    color: var(--tm-accent);
}

.udb-btn-add:hover {
    background: color-mix(in srgb, var(--tm-accent) 22%, transparent);
    border-color: var(--tm-accent);
}

.udb-add-feedback {
    margin-top: 8px;
    font-size: var(--t-xs);
    min-height: 18px;
    transition: color var(--dur-fast);
}

.udb-add-feedback.ok {
    color: #66bb6a;
}

.udb-add-feedback.err {
    color: #ef5350;
}

/* PW gen row (new password field + generate + copy buttons inline) */
.udb-pw-gen-row {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-width: 180px;
}

.udb-pw-gen-row .udb-input {
    min-width: 0;
    flex: 1;
}

.udb-btn-gen,
.udb-btn-copy {
    padding: 8px 10px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    background: var(--input-bg, rgba(0, 0, 0, 0.05));
    color: var(--text-muted, #888);
    cursor: pointer;
    font-size: var(--t-sm);
    transition: all var(--dur-fast);
    white-space: nowrap;
    flex-shrink: 0;
}

.udb-btn-gen:hover {
    border-color: var(--accent, #3b82f6);
    color: var(--accent, #3b82f6);
}

.udb-btn-copy:hover {
    border-color: var(--tm-accent);
    color: var(--tm-accent);
}

/* Inline edit expanded layout */
.udb-inline-edit.block-edit {
    display: block !important;
}

.udb-edit-grid {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 6px;
}

.udb-pw-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.udb-pw-row .udb-inline-input {
    flex: 1;
}

.udb-edit-btns {
    display: flex;
    gap: 5px;
}

/* ── Contenteditable inline cells ──────────────────────────── */
.udb-editable-cell {
    position: relative;
    cursor: text;
    min-width: 100px;
    border-radius: var(--radius-sm);
    transition: background var(--dur-fast), box-shadow var(--dur-fast);
    outline: none;
    color: var(--text);
}

.udb-editable-cell:empty::before {
    content: attr(title);
    position: absolute;
    top: 50%;
    left: 16px;
    /* Match table td padding */
    transform: translateY(-50%);
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.85em;
    opacity: 0.6;
    pointer-events: none;
    white-space: nowrap;
}

.udb-editable-cell:hover {
    background: color-mix(in srgb, var(--surface-hover) 80%, var(--border-light));
}

.udb-editable-cell:focus {
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--tm-accent);
}

.udb-editable-cell.udb-cell-saving {
    opacity: 0.5;
}

.udb-editable-cell.udb-cell-saved {
    background: rgba(102, 187, 106, 0.08) !important;
    box-shadow: inset 0 0 0 1px #66bb6a;
    transition: background 0s, box-shadow 0s;
}

/* PW panel below action buttons */
.udb-pw-panel {
    margin-top: 5px;
}

.udb-pw-panel .udb-pw-row {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
}

.udb-pw-panel .udb-inline-input {
    flex: 1;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

/* ── Kit-Stats & Public Links sections ─────────────────────── */
.udb-section {
    padding: 0 0 4px;
    border-top: 1px solid var(--border-light);
}

.udb-section-title {
    font-size: var(--t-2xs);
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--accent, var(--tm-accent));
    padding: 14px 24px 4px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.udb-table-compact {
    font-size: var(--t-xs);
}

.udb-table-compact td:last-child {
    width: auto;
    min-width: auto;
}

.udb-pub-add {
    border-top: none;
    padding-top: 10px;
}

.udb-pub-add .udb-add-row {
    align-items: center;
}

/* ══════════════════════════════════════════════════════════════
   PDF EXPORT – FAB, Modal, Cards, Progress
   ══════════════════════════════════════════════════════════════ */

/* Floating Action Button – hidden until page is .unlocked */
.pdf-export-fab {
    display: none;
    /* shown via JS when user is logged in */
    position: fixed;
    bottom: 160px;
    right: 32px;
    z-index: 9000;
    background: linear-gradient(135deg, #e53935 0%, #c62828 100%);
    color: #fff;
    border: none;
    border-radius: var(--radius-pill);
    padding: 14px 24px;
    font-size: var(--t-sm);
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
    box-shadow: var(--shadow-3);
    transition: all var(--dur-base) var(--ease-out);
    gap: 8px;
    align-items: center;
}

.pdf-export-fab i {
    font-size: var(--t-md);
    margin-right: 6px;
}

.pdf-export-fab:hover {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 10px 32px rgba(229, 57, 53, 0.45), 0 4px 12px rgba(0, 0, 0, 0.2);
}

.pdf-export-fab:active {
    transform: translateY(0) scale(0.98);
}

/* Show FAB only when admin or partner unlocked the page */
body.unlocked .pdf-export-fab {
    display: inline-flex;
}

/* ── Modal Overlay ── */
.pdf-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-base) ease;
}

.pdf-modal-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

/* ── Modal Box ── */
.pdf-modal {
    background: var(--surface, #1e1e2e);
    border: 1px solid var(--border, #333);
    border-radius: var(--radius-xl);
    width: 90%;
    max-width: 560px;
    max-height: 85vh;
    overflow-y: auto;
    padding: 28px 32px;
    box-shadow: var(--shadow-modal);
    transform: translateY(30px) scale(0.96);
    transition: transform var(--dur-base) var(--ease-out);
}

.pdf-modal-overlay.open .pdf-modal {
    transform: translateY(0) scale(1);
}

.pdf-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.pdf-modal-header h3 {
    font-size: var(--t-md);
    font-weight: 700;
    color: var(--text, #eee);
    margin: 0;
}

.pdf-modal-header h3 i {
    color: #e53935;
    margin-right: 8px;
}

.pdf-modal-close {
    background: none;
    border: none;
    color: var(--text-muted, #888);
    font-size: var(--t-xl);
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
    border-radius: var(--radius-sm);
    transition: background var(--dur-fast), color var(--dur-fast);
}

.pdf-modal-close:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text, #eee);
}

.pdf-modal-sub {
    color: var(--text-muted, #999);
    font-size: var(--t-sm);
    margin-bottom: 20px;
}

/* ── Portal Toggle Cards ── */
.pdf-portal-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
}

/*  PDF Modal Card  */
.pdf-portal-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border: none;
    border-radius: var(--radius-lg);
    background: var(--surface-hover);
    cursor: pointer;
    transition: all var(--dur-base) ease;
    user-select: none;
    font-family: inherit;
}

.pdf-portal-card:hover {
    background: color-mix(in srgb, var(--surface-hover) 75%, #fff);
}

.pdf-portal-card.selected {
    background: color-mix(in srgb, var(--card-accent, var(--accent)) 5%, var(--panel-bg));
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--card-accent, var(--accent)) 40%, transparent);
}

.pdf-portal-card input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Logo – brand-colored squircle */
.pdf-card-logo {
    width: 64px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: var(--card-logo-bg, #f5f5f0);
    box-shadow: var(--shadow-1);
    overflow: hidden;
}

.pdf-card-logo img {
    max-width: 52px;
    max-height: 26px;
    object-fit: contain;
    display: block;
    transition: opacity var(--dur-fast), filter var(--dur-fast);
}

.pdf-portal-card:not(.selected) .pdf-card-logo {
    opacity: 0.5;
    filter: grayscale(0.6);
}

.pdf-card-logo-fallback {
    font-weight: 700;
    font-size: var(--t-2xs);
    color: var(--text-muted);
    text-align: center;
    line-height: 1.15;
}

/* Body  title + segmented control */
.pdf-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    gap: 6px;
}

.pdf-card-title {
    font-size: var(--t-sm);
    font-weight: 700;
    color: var(--text);
    line-height: 1;
}

.pdf-portal-card:not(.selected) .pdf-card-title {
    opacity: 0.5;
}

/* Segmented Control – brand-colored */
.pdf-seg-control {
    display: flex;
    background: color-mix(in srgb, var(--card-accent, var(--accent)) 8%, rgba(0, 0, 0, 0.03));
    border-radius: var(--radius-sm);
    padding: 2px;
    gap: 1px;
}

.pdf-seg {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 5px 6px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    font-family: inherit;
    cursor: pointer;
    transition: all var(--dur-fast) ease;
    color: var(--text-muted);
    line-height: 1.15;
}

.pdf-seg:hover {
    background: rgba(255, 255, 255, 0.7);
    color: var(--text);
}

.pdf-seg.active {
    background: var(--card-accent, var(--accent));
    color: #fff;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--card-accent, var(--accent)) 35%, transparent);
}

.pdf-seg-label {
    font-size: var(--t-2xs);
    font-weight: 500;
    white-space: nowrap;
}

.pdf-seg-price {
    font-size: var(--t-2xs);
    font-weight: 500;
    opacity: 0.55;
}

.pdf-seg.active .pdf-seg-label,
.pdf-seg.active .pdf-seg-price {
    color: #fff;
    opacity: 1;
    font-weight: 700;
}

/* Check */
.pdf-card-check {
    font-size: var(--t-md);
    color: var(--border, #ccc);
    transition: all var(--dur-fast);
    flex-shrink: 0;
    opacity: 0.25;
}

.pdf-portal-card.selected .pdf-card-check {
    color: var(--card-accent, var(--accent));
    opacity: 1;
}

/* ── Footer with Button + Progress ── */
.pdf-modal-footer {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pdf-export-btn {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, #e53935 0%, #c62828 100%);
    color: #fff;
    font-size: var(--t-base);
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all var(--dur-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.pdf-export-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(229, 57, 53, 0.4);
}

.pdf-export-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ── Animated Progress Bar ── */
.pdf-progress {
    display: none;
    position: relative;
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--panel-bg, #252538);
    border: 1px solid var(--border, #333);
    overflow: hidden;
}

.pdf-progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 0%;
    background: linear-gradient(90deg, #e53935, #ff7043, #e53935);
    background-size: 200% 100%;
    animation: pdf-shimmer 1.5s ease infinite;
    border-radius: var(--radius-md);
    transition: width var(--dur-base) var(--ease-out);
}

@keyframes pdf-shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.pdf-progress-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: var(--t-sm);
    font-weight: 500;
    z-index: 1;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* ══════════════════════════════════════════════════════════════
   NATIVE PDF EXPORT – Print Styles
   ══════════════════════════════════════════════════════════════ */

/* Druck-Stempel (Erstelldatum + Preisvorbehalt): am Bildschirm nie sichtbar.
   Befüllt vom beforeprint-Listener in pdf-export.js. */
.print-stamp {
    display: none;
}

@media print {
    /* Enforce modern background colors and gradients during print */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Der Shift ist am Bildschirmlayout gemessen. Im Druck sind die Spalten
       anders breit, also verwerfen und wieder zentrieren. */
    .early-bird-note {
        transform: none !important;
    }

    /* Stempel auf JEDER Druckseite: position:fixed wiederholen Chrome und
       Firefox pro Seite. Jedes Portal steht per page-break-after auf einer
       eigenen Seite, also trägt auch eine einzeln weitergereichte Seite den
       Hinweis. */
    .print-stamp {
        display: block !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        text-align: center;
        line-height: 1.45;
        padding-top: 4px;
        border-top: 1px solid rgba(0, 0, 0, 0.12);
        background: #fff;
    }
    /* Preishinweis per Admin-Toggle aus -> leerer Stempel, keine Fusslinie. */
    .print-stamp:empty {
        display: none !important;
    }
    .print-stamp-line,
    .print-stamp-note {
        display: block;
        font-size: 7.5pt;
        color: #555;
    }
    .print-stamp-line {
        font-weight: 600;
        color: #222;
    }

    /* Page Definition */
    @page {
        margin: 1cm;
        size: A4 portrait;
    }

    /* Kill the film-grain overlay – position:fixed + z-index:9999 bleeds over the print */
    [data-theme="dark"] body::before,
    .dark body::before,
    body::before,
    body::after {
        display: none !important;
        content: none !important;
    }

    /* Kill any residual transforms from tile-tilt / velocity-transition */
    .tile, .tier-btn, .layered-cake-grid {
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }

    /* Hide everything that isn't part of the core PDF */
    .offer-bar,
    .news-ticker-mount,
    .kit-switch-mount,
    .back-to-top,
    .tooltip-sheet,
    .tooltip-sheet-backdrop,
    .pdf-export-fab,
    .pdf-modal-overlay,
    .auth-gate,
    .admin-bar,
    .sticky-nav,
    header,
    footer,
    .admin-panel,
    .tile-tooltip,
    .confetti-container,
    .theme-toggle-btn,
    .help-fab-container,
    .cust-tour-floating-badge,
    .tour-welcome-modal,
    .image-crop-modal,
    .edit-badge,
    .tm-admin-action-btn,
    .sup-popover,
    .edit-btn,
    .udb-edit-btn,
    .edit-overlay-btn,
    .portal-info-content,
    .portal-intro,
    .testimonials-section,
    .portal.trusted-partners {
        display: none !important;
    }

    body {
        margin: 0 !important;
        padding: 0 !important;
    }

    .portals {
        /* !important, weil der 600px-Block weiter unten sonst seine 20px durchsetzt
           und die Rechnung der Sektionen nicht mehr zum echten Gap passt. */
        --portals-gap: 30px !important;
        gap: 30px !important;
        /* Unten Platz für den fixen .print-stamp, sonst liegt er auf dem Content. */
        padding: 0 0 12mm !important;
        margin: 0 !important;
    }

    .portal {
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin-bottom: 30px !important;
        page-break-after: always; /* Force each portal onto its own page */
    }

    /* Das letzte gedruckte Portal bricht NICHT um, sonst haengt eine leere
       Schlussseite (nur mit Stempel) am Dokument. Die Klasse setzt der
       beforeprint-Listener in pdf-export.js auf das letzte sichtbare Portal. */
    .portal.pdf-last {
        page-break-after: auto !important;
        break-after: auto !important;
    }

    /* Quote Layout (Vertical Stacking) */
    .portal-body {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 0 !important;
        width: 100% !important;
    }

    .portal-info {
        break-inside: avoid;
        page-break-inside: avoid;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        position: static !important;
        border: none !important;
    }

    .portal-logo-banner {
        width: 100% !important;
        max-width: none !important;
        border-radius: 12px !important;
        margin: 0 0 20px 0 !important;
        padding: 15px 0 !important;
        box-shadow: var(--shadow-2);
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .portal-logo-banner img {
        padding: 0 !important;
        margin: 0 !important;
        max-height: 80px !important;
        object-fit: contain !important;
    }

    .package-section {
        width: 100% !important;
        max-width: 950px !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    .tier-selector {
        transform: scale(0.95); /* Shrink slightly to save space */
        transform-origin: top center;
        margin-bottom: 15px !important;
    }

    .package-description {
        text-align: center;
        font-size: 1rem !important;
        line-height: 1.4;
        margin-bottom: 20px !important;
        padding: 0 20px;
    }

    .upsell-line {
        margin-bottom: 20px !important;
        padding-bottom: 10px !important;
    }

    .package-layer.locked-layer {
        filter: grayscale(0.5);
        opacity: 0.45;
    }

    .package-layer, .sm-packages-grid {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .tile:not(.disabled):hover {
        transform: none !important;
        box-shadow: none !important;
    }
}

/* Light mode compat */
[data-theme="light"] .pdf-modal {
    background: #fff;
    border-color: #ddd;
}

[data-theme="light"] .pdf-portal-card {
    background: #f5f5f0;
}

[data-theme="light"] .pdf-portal-card.selected {
    background: color-mix(in srgb, var(--card-accent, var(--accent)) 5%, #fff);
}

/* Black-Week + Light-Theme: PDF-Modal + Portal-Karten erben helle Gruende
   (Light-Regeln oben), waehrend var(--text) hell bleibt -> unlesbar. Zurueck
   auf die dunklen Black-Week-Flaechen. Compound-Selektor schlaegt die Light-
   Regeln (beide Attribute am selben <html>). */
[data-theme="light"][data-profile="black-week"] .pdf-modal {
    background: var(--surface, #1a1a1a);
    border-color: var(--border);
}
[data-theme="light"][data-profile="black-week"] .pdf-portal-card {
    background: var(--surface-hover, #252525);
}
[data-theme="light"][data-profile="black-week"] .pdf-portal-card.selected {
    background: color-mix(in srgb, var(--card-accent, var(--accent)) 14%, var(--surface-hover, #252525));
}

/* ═══════════════════════════════════════════
   Sticky Offer Bar
   ═══════════════════════════════════════════ */
.offer-bar {
    position: fixed;
    bottom: 0;
    left: 50%;
    /* Default (leerer Warenkorb): unten rechts NEBEN der Portal-Karte,
       in der Luecke zwischen Kartenrand und Viewport-Rand. Linke Kante
       der Bar = Portal-Kartenrand (600px Halbbreite - --page-pad) + 16px.
       Reicht der Platz nicht, klemmt 50vw-16px-100% die Bar mit 16px
       Abstand an den Viewport-Rand. Zentriert (Items): translateX(-50%). */
    transform: translateX(calc(min(600px - var(--page-pad) + 16px, 50vw - 16px - 100%))) translateY(100%);
    z-index: 9000;
    width: auto;
    max-width: calc(100vw - 40px);
    /* Glassmorphism für Premium-Feel – dunkler Glass-Tint + starker
       Backdrop-Blur + Saturate. Light-Mode-Override unten. */
    background: linear-gradient(180deg, rgba(18, 20, 28, 0.78) 0%, rgba(14, 16, 22, 0.92) 100%);
    backdrop-filter: blur(32px) saturate(180%);
    -webkit-backdrop-filter: blur(32px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 18px 18px 0 0;
    box-shadow:
        0 -12px 48px rgba(0, 0, 0, 0.5),
        0 -1px 0 rgba(255, 255, 255, 0.08) inset;
    transition: transform var(--dur-slow) var(--ease-out),
                max-width var(--dur-base) var(--ease-inout);
    font-family: var(--font-heading);
    display: inline-flex;
    align-items: center;
    /* Bewusst knapp: jeder Pixel Bar-Chrome geht direkt von der Kartenbreite
       ab und damit vom Markennamen (die Karten teilen sich den Rest). */
    padding: 11px 18px;
    gap: 12px;
    overflow: visible;
}

/* Author-CSS `.offer-bar { display: inline-flex }` schlaegt sonst das Browser-Default
   `[hidden] { display: none }`, egal welche Spezifitaet - betrifft auch --offer-bar-h
   (body padding-bottom), das bei deaktiviertem Warenkorb sonst faelschlich reserviert bleibt. */
.offer-bar[hidden] {
    display: none;
}

/* Pink-Akzent-Stripe oben – Brand-Touch + Layer-Separation, prominenter. */
.offer-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--tm-accent, #e94d97) 18%,
        var(--tm-accent, #e94d97) 82%,
        transparent 100%);
    border-radius: 18px 18px 0 0;
    opacity: 0.95;
}

/* Light-Mode: hellere Glass-Variante mit stärkerem Layer-Lift. */
[data-theme="light"] .offer-bar {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(246, 246, 250, 0.98) 100%);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow:
        0 -16px 56px rgba(0, 0, 0, 0.18),
        0 -1px 0 rgba(255, 255, 255, 0.95) inset;
}

/* Cart-Layout: alle Cards in EINER Zeile. .offer-bar-items ist ein Grid,
   dessen Spalten NICHT hier stehen: _offerFitBarWidth() (offer-bar.js)
   setzt sie als Inline-Style, eine pro Card und nach deren eigenem Bedarf
   bemessen (Marke + Preis), nicht als N gleiche Anteile. Diese Regel hier
   ist nur der Fallback, bevor JS zum ersten Mal gerechnet hat.
   Kein Scroll, kein Umbruch, Bar-Hoehe konstant. Die Bar-Breite kommt aus
   --bar-target (Formel + Begruendung in offer-bar.js). Ab 3 Brands greift
   der Summary-Collapse (siehe "Desktop Multi-Brand-Collapse" weiter unten),
   es gibt also nie mehr als 2 Cards gleichzeitig zu zeigen. Der 1400er-
   Deckel hier ist Sicherheitsnetz fuer den Fall, dass das Chrome
   (Gesamt-Block, CTA) waechst. Auf schmalen Viewports deckelt
   calc(100vw-40px) weiter. */
.offer-bar:not(.offer-bar--empty) {
    width: min(var(--bar-target, 960px), calc(100vw - 40px), 1400px);
    max-width: min(calc(100vw - 40px), 1400px);
}
.offer-bar:not(.offer-bar--empty) .offer-bar-items {
    display: grid;
    grid-template-columns: repeat(var(--cart-count, 1), minmax(0, 1fr));
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible;
    mask-image: none;
    -webkit-mask-image: none;
}

/* Cart-Bar Help-Buttons (FAQ + Kontakt). Sichtbar nur wenn Cart Items
   hat (Help-FAB ist dann versteckt). */
.offer-bar-help {
    display: flex;
    gap: 5px;
    align-items: center;
    flex-shrink: 0;
}

.offer-bar-help-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: var(--t-base);
    cursor: pointer;
    transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}
.offer-bar-help-item:hover {
    background: var(--tm-accent, #e94d97);
    color: #fff;
    transform: translateY(-1px);
}
[data-theme="light"] .offer-bar-help-item {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-muted, #555);
    border: 1px solid rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .offer-bar-help-item:hover {
    background: var(--tm-accent, #e94d97);
    color: #fff;
    border-color: var(--tm-accent, #e94d97);
}

/* ── Edit-Button in Bar: active state (Edit-Mode an) ── */

/* Button expandiert zu Pill mit Label */
.offer-bar-edit-btn.active {
    width: auto;
    border-radius: 18px;
    padding: 0 14px;
    gap: 6px;
    background: rgba(34, 197, 94, 0.18);
    color: #4ade80;
    font-size: var(--t-xs);
    font-weight: 600;
    font-family: var(--font-heading);
    letter-spacing: 0.02em;
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.35);
}
.offer-bar-edit-btn.active::after {
    content: "Beenden";
}
:lang(en) .offer-bar-edit-btn.active::after {
    content: "Exit";
}
.offer-bar-edit-btn.active:hover {
    background: rgba(239, 68, 68, 0.18);
    color: #f87171;
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.4);
}
[data-theme="light"] .offer-bar-edit-btn.active {
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
    box-shadow: 0 0 0 1px rgba(22, 163, 74, 0.25);
}
[data-theme="light"] .offer-bar-edit-btn.active:hover {
    background: rgba(239, 68, 68, 0.10);
    color: #dc2626;
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.3);
}

/* Bar-Stripe wechselt von Pink zu Gruen im Edit-Mode */
body.edit-mode .offer-bar::before {
    background: linear-gradient(90deg,
        transparent 0%,
        #22c55e 18%,
        #4ade80 50%,
        #22c55e 82%,
        transparent 100%);
}

/* Editor-Label schwebt UEBER dem gruenen Stripe */
body.edit-mode .offer-bar::after {
    content: "Editor Mode";
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    font-size: var(--t-2xs);
    font-weight: 700;
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #4ade80;
    background: rgba(14, 16, 22, 0.85);
    backdrop-filter: blur(8px);
    padding: 2px 12px;
    border-radius: 6px 6px 0 0;
    white-space: nowrap;
    pointer-events: none;
}
[data-theme="light"] body.edit-mode .offer-bar::after {
    color: #16a34a;
    background: rgba(255, 255, 255, 0.9);
}

/* Bar-Deckel konsistent zu .offer-bar:not(.offer-bar--empty): 1400px
   (angehoben von 1200, damit 3 Brands je ~285px Card bekommen statt ~210px). */
body.cart-has-items .offer-bar {
    max-width: min(calc(100vw - 40px), 1400px);
}

/* Empty-State: nur FAQ + Kontakt sichtbar, Items/Total/CTA versteckt. */
.offer-bar.offer-bar--empty .offer-bar-items,
.offer-bar.offer-bar--empty .offer-bar-total,
.offer-bar.offer-bar--empty .offer-bar-checkout-btn {
    display: none !important;
}
.offer-bar.offer-bar--empty {
    padding: 8px 14px;
}

.offer-bar.visible {
    transform: translateX(calc(min(600px - var(--page-pad) + 16px, 50vw - 16px - 100%))) translateY(0);
}

/* Warenkorb mit Items -> Bar smooth in die Mitte gleiten.
   translateX(-50%) ist layout-exakt zentriert (kein vw, daher kein
   Scrollbar-Versatz). Leerer Warenkorb behaelt die Ecke. */
.offer-bar.visible:not(.offer-bar--empty) {
    transform: translateX(-50%) translateY(0);
}

/* Checkout-Modal offen → Offer-Bar smooth ausfaden, damit kein zweites
   schwebendes UI-Element mit dem Modal konkurriert. */
.offer-bar.visible.offer-bar-checkout-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(24px);
    transition: opacity var(--dur-base) ease,
        transform var(--dur-base) var(--ease-inout);
}

[data-theme="light"] .offer-bar {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(0, 0, 0, 0.06);
    box-shadow: 0 -6px 32px rgba(0, 0, 0, 0.1), 0 -1px 0 rgba(255, 255, 255, 0.8) inset;
}

.offer-bar-items {
    display: flex;
    align-items: stretch;
    gap: 10px;
    /* Kein flex:1 – Bar passt sich Content an (auto-width oben). Items
       wachsen nur soweit Content+max-width erlauben. */
    flex: 0 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 10px;
    margin: -10px;
    /* Scroll-Affordance: rechter Edge fadet aus wenn Content überläuft. */
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 32px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 32px), transparent 100%);
}

.offer-bar-items::-webkit-scrollbar {
    display: none;
}

/* Mask nur wenn tatsächlich Overflow – bei wenigen Cards kein Fade. */
.offer-bar:not(.offer-bar--overflowing) .offer-bar-items {
    mask-image: none;
    -webkit-mask-image: none;
}

.offer-bar-card {
    display: flex;
    /* Task 2: kompakte EINZEILIGE Row statt hoher Column-Card.
       [Favicon] [Brand · Tier / Pills] [Preis]. Rechts 26px reserviert
       fuer den absolut positionierten ×-Remove-Button. */
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 7px 22px 7px 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 12px;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 0;
    overflow: hidden;
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.18),
        0 0 0 1px rgba(255, 255, 255, 0.03) inset;
    transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast);
}

/* Brand-Akzent: schmaler Stripe links, Farbe via --card-accent (in
   offer-bar.js pro Portal gesetzt). Pseudo-Element -> unabhaengig vom
   border-color-Shorthand der Theme-Regeln. */
.offer-bar-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--card-accent, var(--tm-accent, #e94d97));
    border-radius: 12px 0 0 12px;
    pointer-events: none;
}

/* Cards neutral – kein Tier-Wash mehr. Der Akzent kommt brand-bezogen
   ueber den Left-Stripe (--card-accent, in offer-bar.js gesetzt).
   Tier steht als neutrales Text-Label (.offer-bar-chip-tier Basis). */

[data-theme="light"] .offer-bar-card {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(0, 0, 0, 0.06);
    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.06),
        0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

/* Preis tabular-nums damit Spalten in Multi-Card-Grid aligned. */
.offer-bar-chip-price {
    font-variant-numeric: tabular-nums;
}

.offer-bar-card {
    cursor: pointer;
    transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast);
}

.offer-bar-card:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--tm-accent, #e94d97);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35),
                0 0 0 1px color-mix(in srgb, var(--tm-accent) 30%, transparent);
}

[data-theme="light"] .offer-bar-card:hover {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08),
                0 0 0 1px color-mix(in srgb, var(--tm-accent) 30%, transparent);
}

.offer-bar-card:focus-visible {
    outline: 2px solid var(--accent, #e94d97);
    outline-offset: 2px;
}

/* Flash-Highlight: nach Klick auf Cart-Card scrollt Portal in View
   und kurz pulst der Section-Rahmen – User sieht wo gelandet. */
@keyframes offerBarPortalFlash {
    0%, 100% { box-shadow: 0 0 0 0 rgba(233, 77, 151, 0); }
    25% { box-shadow: 0 0 0 6px rgba(233, 77, 151, 0.35); }
    60% { box-shadow: 0 0 0 4px rgba(233, 77, 151, 0.18); }
}
.offer-bar-portal-flash {
    animation: offerBarPortalFlash 1.1s var(--ease-inout);
}

/* ── Sexy Cart-Add-Feedback ──────────────────────────────────────
   2 simultane Effekte beim Add-to-Cart:
   1. Cart-Bar Pulse (Accent-Ring um Border)
   2. Card Slide-In mit Spring-Easing
   ───────────────────────────────────────────────────────────────── */

/* 1. Cart-Bar Pulse – Accent-Ring um Bar-Border, 2 Wellen. */
@keyframes offerBarAddPulse {
    0% {
        box-shadow:
            0 -6px 32px rgba(0, 0, 0, 0.4),
            0 -1px 0 rgba(255, 255, 255, 0.06) inset,
            0 0 0 0 rgba(233, 77, 151, 0.6);
    }
    40% {
        box-shadow:
            0 -6px 32px rgba(0, 0, 0, 0.4),
            0 -1px 0 rgba(255, 255, 255, 0.06) inset,
            0 0 0 8px rgba(233, 77, 151, 0);
    }
    100% {
        box-shadow:
            0 -6px 32px rgba(0, 0, 0, 0.4),
            0 -1px 0 rgba(255, 255, 255, 0.06) inset,
            0 0 0 0 rgba(233, 77, 151, 0);
    }
}
.offer-bar.offer-bar--pulse {
    animation: offerBarAddPulse 0.75s var(--ease-inout);
}

/* 2. Card Slide-In mit Overshoot-Spring. */
@keyframes cartCardSlideIn {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.7);
    }
    55% {
        opacity: 1;
        transform: translateY(-3px) scale(1.06);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
.offer-bar-card--just-added {
    animation: cartCardSlideIn 0.55s var(--ease-out) backwards;
}

/* Reduced-Motion: alle Feedback-Animationen entfernen, accessibility. */
@media (prefers-reduced-motion: reduce) {
    .offer-bar.offer-bar--pulse,
    .offer-bar-card--just-added {
        animation: none;
    }
}

[data-theme="light"] .offer-bar-card {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: var(--shadow-2);
}

[data-theme="light"] .offer-bar-card:hover {
    background: rgba(255, 255, 255, 1);
    border-color: rgba(0, 0, 0, 0.12);
}

/* ── Card remove button ── */
.offer-bar-card {
    position: relative;
}

/* Remove-Button: 24x24 Hit-Area (WCAG-AA Target-Size) mit visuell
   kleinerem 16x16 Circle-Glyph innen. Transparent default, semi-bg
   on hover. */
.offer-bar-card-remove {
    position: absolute;
    top: 0;
    right: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.55);
    font-size: var(--t-sm);
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Linkes Padding ruecke den Glyph 2px nach rechts, ohne die 24px
       Hit-Area anzufassen. Der Button selbst darf nicht wandern: die
       Card hat overflow:hidden + 12px Radius und wuerde die obere
       rechte Ecke anschneiden. */
    padding: 0 0 0 4px;
    opacity: 0.5;
    transition: opacity var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
    z-index: 2;
}

.offer-bar-card-remove-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    pointer-events: none;
    transition: background var(--dur-fast), color var(--dur-fast);
}

.offer-bar-card:hover .offer-bar-card-remove {
    opacity: 1;
}

.offer-bar-card-remove:focus-visible {
    outline: 2px solid var(--accent, #e94d97);
    outline-offset: 2px;
}

.offer-bar-card-remove:hover {
    background: rgba(239, 68, 68, 0.9);
    color: #fff;
}

[data-theme="light"] .offer-bar-card-remove {
    color: rgba(0, 0, 0, 0.5);
}

[data-theme="light"] .offer-bar-card-remove .offer-bar-card-remove-glyph {
    background: rgba(0, 0, 0, 0.08);
}

.offer-bar-card-remove:hover .offer-bar-card-remove-glyph {
    background: rgba(239, 68, 68, 0.9);
    color: #fff;
}

[data-theme="light"] .offer-bar-card-remove:hover .offer-bar-card-remove-glyph {
    background: rgba(239, 68, 68, 0.9);
    color: #fff;
}

/* Body = mittlere Spalte: Brand+Tier-Zeile plus optionale Pills-Zeile. */
/* flex:1 ist Pflicht, nicht Kosmetik: ohne flex-grow bleibt der Body auf
   max-content stehen, waehrend das Grid die Card auf ihre Spaltenbreite
   stretcht. Folge (gemessen 2026-07-17, vom User gemeldet): 31-84px der Card
   lagen ungenutzt brach, und das margin-left:auto des Preises war wirkungslos
   (sein Container war ja nur so breit wie sein Inhalt) - der Preis klebte an
   der Marke statt am rechten Rand, entgegen der Absicht 2 Zeilen tiefer.
   Zugleich musste Zeile 2 innerhalb von max-content truncaten, obwohl daneben
   Platz war. Mit flex:1 fuellt der Body die Card: Zeile 2 gewinnt bei 2 Brands
   ~45px (176 -> 221px), der Preis sitzt rechts. Bei 3 Brands auf schmalen
   Viewports ist die Card selbst ausgereizt, dort aendert es nichts. */
.offer-bar-card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    flex: 1 1 auto;
    min-width: 0;
}

/* Meta-Zeile unter dem Brand: Tier-Label + optionale Add-on-Pills.
   Der Brand-Name sitzt seit dem Zeilen-Split allein in Zeile 1 und
   bekommt die volle Body-Breite -> kein vorzeitiges Ellipsis mehr
   (Fix "My..."/"Sc..."). Tier/Pills sind sekundaer und stehen darunter. */
.offer-bar-card-meta {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.offer-bar-card-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
    background: #fff;
    border-radius: 5px;
    padding: 2px;
    flex-shrink: 0;
    align-self: center;
}

/* Zeile 1 (Meta-Zeile) = Marke links + Gesamtpreis rechts (die zwei Anker).
   Preis rechtsbuendig via margin-left:auto, flex-shrink:0 haelt ihn auch bei
   engen Cards vollstaendig; die Marke ellipst zuerst (sekundaer gegenueber
   dem Preis). Tier + Add-on-Pills sitzen in Zeile 2 (.offer-bar-card-sub). */
.offer-bar-card-meta .offer-bar-chip-price {
    margin-left: auto;
    flex-shrink: 0;
    padding-left: 8px;
    font-size: var(--t-xs);
    font-weight: 700;
}

.offer-bar-chip-brand {
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--text, #fff);
    line-height: 1;
    display: block;
    min-width: 0;
    flex-shrink: 1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-theme="light"] .offer-bar-chip-brand {
    color: var(--text, #222);
}

/* Tier-Label in der Meta-Zeile unter dem Brand (offer-bar-card-meta),
   sekundaer gehalten. Color via var(--text) mit Opacity statt
   --text-muted: gibt 4.5:1 WCAG-AA Contrast auf beiden Themes statt
   grenzwertig 3.5:1. */
.offer-bar-chip-tier {
    font-size: var(--t-2xs);
    font-weight: 500;
    color: var(--text, #fff);
    opacity: 0.7;
    letter-spacing: 0.1px;
    line-height: 1;
    text-transform: none;
}
/* Bullet-Prefix raus seit Vertical-Stack – Tier sitzt auf eigener Zeile. */
.offer-bar-chip-tier::before {
    content: none;
}

/* SM-Only Marker – erbt jetzt Tier-Chip-Style (text + opacity 0.7).
   Accent kommt vom Pill, nicht vom Tier-Chip. */
.offer-bar-chip-tier--sm-only {
    font-weight: 500;
}

/* Tier-Icon inline vor Tier-Label. Premium-Star bekommt Sonderbehandlung
   (etwas größer + Glow) für Wert-Hierarchie. */
.offer-bar-tier-icon {
    margin-right: 5px;
    font-size: var(--t-2xs);
    opacity: 0.95;
}
.offer-bar-tier-icon.fa-star {
    font-size: var(--t-xs);
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--tm-accent) 50%, transparent));
}
.offer-bar-chip-tier {
    /* Tier sitzt jetzt in Zeile 2 (.offer-bar-card-sub) inline vor den Pills.
       Die Truncation der ganzen "Tier · SM-Paket"-Zeile macht der Sub-Container
       als Block (ein Ellipsis fuer die ganze Zeile), darum hier nur inline. */
    display: inline;
}

/* Total-Stack: Label oben, Preis Mitte, Reichweite-Subline unten. */
.offer-bar-total {
    display: flex;
    align-items: center;
}
/* Zeile 1 = "Gesamt" NEBEN dem Betrag (nicht darueber), Zeile 2 = Staffel.
   Das Label allein auf einer Zeile kostete eine volle Zeilenhoehe fuer ein
   Wort und liess den Block zugleich breit werden, weil die Staffel darunter
   einzeilig lief. Nebeneinander gestellt traegt Zeile 1 sich selbst und die
   Staffel darf zweizeilig umbrechen, ohne dass die Bar hoeher wird. */
.offer-bar-total-stack {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: flex-end;
    align-items: baseline;
    column-gap: 7px;
    row-gap: 1px;
}
.offer-bar-total-stack .offer-bar-total-label { grid-column: 1; }
.offer-bar-total-stack .offer-bar-total-price { grid-column: 2; }
.offer-bar-total-stack .offer-bar-bundle { grid-column: 1 / -1; }
.offer-bar-total-reach {
    font-size: var(--t-2xs);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.2px;
    margin-top: 2px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.offer-bar-total-reach i {
    color: var(--tm-accent, #e94d97);
    opacity: 0.7;
    font-size: var(--t-2xs);
}
[data-theme="light"] .offer-bar-total-reach {
    color: rgba(0, 0, 0, 0.55);
}

.offer-bar-chip-price {
    font-size: var(--t-sm);
    font-weight: 700;
    color: var(--text, #fff);
    line-height: 1;
    letter-spacing: -0.01em;
}

[data-theme="light"] .offer-bar-chip-price {
    color: var(--text, #222);
}

/* Zeile 2 der Card = Tier + Add-on-Pills (SM-Paket / Booster), sekundaer/gedaempft
   unter der Marke+Preis-Zeile. Ein Block, der als GANZES mit EINEM Ellipsis
   truncatet, damit die Card kompakt 2-zeilig bleibt (nicht 3 Zeilen hoch) und
   Tier + SM-Paket beide sichtbar sind. Tier und Pills fliessen inline;
   Preis+Marke stehen prominent in Zeile 1.
   Das Ellipsis ist reiner Notausgang, KEIN Normalzustand: der Add-on-Betrag ist
   deshalb aus dem Pill raus (offer-bar.js, Messung 2026-07-17). Wer hier Text
   ergaenzt, prueft den Bedarf gegen SUB_CAP (205px, offer-bar.js) - sonst
   frisst die gedaempfte Zeile die Card-Breite und truncatet wieder. */
.offer-bar-card-sub {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 2px;
    line-height: 1.2;
}

/* Add-on pills – inline in Zeile 2 hinter dem Tier, mit "·"-Trenner. */
.offer-bar-pills {
    display: inline;
    min-width: 0;
}
.offer-bar-card-sub .offer-bar-pills::before {
    content: "·";
    margin: 0 5px 0 4px;
    opacity: 0.45;
}

/* Cart-Kontext = Inventur, nicht Marketing. Pills ohne Box-Styling –
   nur Icon + Text mit subtiler Farbtönung. Reduziert visuellen Lärm
   bei mehreren Cards. */
.offer-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--t-2xs);
    font-weight: 500;
    padding: 0;
    border-radius: 0;
    border: 0;
    background: transparent;
    line-height: 1.2;
    white-space: nowrap;
}

/* Im Cart fliessen die Pills als Inline-Text (siehe .offer-bar-pills),
   damit die ganze Zeile als ein Block truncatet statt jede Pill einzeln. */
.offer-bar-pills .offer-pill {
    display: inline;
}

/* 40% Accent auf --text statt reines --tm-accent bzw. 85%-Mix auf
   --text-muted: Letzteres lag im Dark-Theme bei ~3.0-3.6:1 (Kartenhintergrund
   ist ein transparentes Weiss-Overlay, kein reines --panel-bg) - "inkl.
   Social Media" war damit schwer lesbar (gemeldet 05.08.2026). Selbe
   Rechenlogik wie Pitfall 28 (.tier-price): mit --text statt --text-muted
   gemischt kommt auch Dark auf ueber 5:1, Light von grenzwertigen 4.7:1 auf
   comfortable ueber 10:1 - eine Regel statt Theme-Override. */
.offer-pill-sm {
    color: color-mix(in srgb, var(--tm-accent) 40%, var(--text));
}

.offer-pill-boost {
    color: var(--text-muted, #aaa);
}

[data-theme="light"] .offer-pill-boost {
    color: #6b7280;
}

/* Gebuendeltes "N Add-ons"-Pill (SM + Booster zusammen) – accent-getoent
   wie SM, damit die Add-on-Auswahl im Cart sichtbar bleibt. Gleicher
   Kontrast-Fix wie .offer-pill-sm (selbe Formel, selber Befund). */
.offer-pill-addons {
    color: color-mix(in srgb, var(--tm-accent) 40%, var(--text));
}

/* Dot-Separator zwischen mehreren Pills in einer Row. */
.offer-bar-pills .offer-pill + .offer-pill::before {
    content: "·";
    margin-right: 6px;
    opacity: 0.4;
}

.offer-bar-total {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    margin-left: 2px;
    border-left: none;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.10) 0%,
        rgba(255, 255, 255, 0.04) 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.16),
        0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}

[data-theme="light"] .offer-bar-total {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.92) 0%,
        rgba(252, 252, 254, 0.88) 100%);
    border-color: rgba(0, 0, 0, 0.06);
    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.06),
        0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

.offer-bar-total-label {
    font-size: var(--t-2xs);
    font-weight: 600;
    /* Nicht --text-muted: das ergab im Light-Theme gemessene 4.3:1 und lag
       damit unter der 4.5:1 der WCAG-AA. Gedaempft ueber Deckkraft statt
       ueber einen eigenen Grauton, damit es beiden Themes folgt. */
    color: var(--text, #888);
    opacity: 0.65;
    text-transform: none;
    letter-spacing: 0;
}

.offer-bar-total-price {
    font-size: var(--t-md);
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.5px;
}

[data-theme="light"] .offer-bar-total-price {
    color: var(--text, #222);
}

/* ── Multibrand-Staffel in der Bar ────────────────────────────
   Unter dem Betrag: was schon greift, darunter was die naechste Brand
   braechte. Zwei kurze Zeilen statt einer langen - die lange Variante
   diktierte die Breite des ganzen Blocks und nahm sie den Cards weg.
   Jede Zeile bleibt fuer sich einzeilig (kein Umbruch im Satz), der
   Block insgesamt bekommt eine Obergrenze.

   Beide Zeilen sind Fussnoten zum Betrag, keine eigenen Schlagzeilen:
   sie laufen in gedaempftem Text, und nur die Prozentzahl traegt den
   Akzent. Die frueher komplett eingefaerbte Bestaetigungszeile war der
   lauteste Punkt im Block - lauter als der Betrag, den sie erklaert -
   und stellte im Black-Week-Kit ausserdem Magenta neben dessen Gold. */
.offer-bar-bundle {
    display: block;
    max-width: 190px;
    text-align: right;
    font-size: var(--t-2xs);
    font-weight: 500;
    line-height: 1.4;
    /* Abstand zum Betrag: die Staffel ist ein eigener Gedanke, die beiden
       Zeilen darin gehoeren dagegen eng zusammen. */
    margin-top: 3px;
}

.offer-bar-bundle-on,
.offer-bar-bundle-next {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Die Bestaetigung ("was gilt") steht eine Stufe ueber dem Upsell ("was
   moeglich waere") - ueber die SCHRIFTGROESSE, nicht nur ueber Farbe.
   Gleich gross gesetzt reimten sich beide Zeilen (gleiche Laenge, gleiche
   Struktur Text-Zahl-Text) zu einer grauen Textur, in der man lesen musste,
   um sie zu unterscheiden. Ausserdem war die geldrelevante Bestaetigung
   sonst der kleinste Text der ganzen Seite. */
.offer-bar-bundle-on {
    font-size: var(--t-xs);
    color: var(--text, #fff);
    opacity: 0.8;
}
/* Die Zahl traegt ueber ihr GEWICHT, nicht ueber Farbe - in beiden Kits.
   Farbig war sie zweimal falsch: im Black-Week-Kit ist Gold die Grundfarbe
   und taugt dort nicht als Auszeichnung (es waere das dritte Gold im Balken,
   neben Betrag und CTA), und im Standard-Kit war die eingefaerbte Zahl der
   einzige Farbtraeger im Block - also trug ausgerechnet die Nebeninformation
   die Farbe und nicht die Summe. Auf zwei Glyphen dieser Groesse wirkt ein
   Farb-Pop ohnehin kaum; die Hierarchie liegt jetzt bei der Schriftgroesse.
   Nebeneffekt: keine Kontrast-Sonderfaelle je Theme mehr. */
.offer-bar-bundle-on b {
    font-weight: 700;
}

.offer-bar-bundle-next {
    color: var(--text, #fff);
    opacity: 0.68;
}
.offer-bar-bundle-next b {
    font-weight: 600;
}

[data-theme="light"] .offer-bar-bundle-on,
[data-theme="light"] .offer-bar-bundle-next {
    color: var(--text, #222);
}

[data-profile="black-week"] .offer-bar-bundle-on,
[data-profile="black-week"] .offer-bar-bundle-next,
[data-theme="light"][data-profile="black-week"] .offer-bar-bundle-on,
[data-theme="light"][data-profile="black-week"] .offer-bar-bundle-next {
    color: #f0e6d2;
}

/* ── Mobile Summary-Bar: Avatar-Stack + Meta-Zeile ──
   Desktop komplett versteckt; nur unter dem Mobile-Breakpoint sichtbar
   (Reflow-Regeln im konsolidierten @media-Block am Dateiende). Ersetzt
   mobil die zusammengequetschten Einzel-Cards durch eine kompakte
   Zusammenfassung (ueberlappende Marken-Favicons + "X Brands · Y Platz."). */
.offer-bar-summary {
    display: none;
    align-items: center;
    gap: 10px;
    min-width: 0;
    cursor: pointer;
}
.offer-bar-avatars {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
.offer-bar-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
    border: 2px solid var(--panel-bg, #fff);
    box-shadow: var(--shadow-1);
    margin-left: -10px;
    box-sizing: border-box;
}
.offer-bar-avatar:first-child {
    margin-left: 0;
}

/* Ab dem 5. Logo rutscht der Stack enger zusammen, damit auch alle 7 Portale
   neben die Meta-Zeile passen, ohne sie auf schmalen Viewports zu verdraengen. */
.offer-bar-avatar:nth-child(n+5) {
    margin-left: -15px;
}

/* ── Logo-Stack: Entfernen per Hover ─────────────────────────
   Der Wrapper traegt jetzt den Stapel-Versatz, nicht mehr das <img>: die
   :first-child- und :nth-child-Regeln oben greifen sonst ins Leere, weil
   jedes Logo ein Einzelkind seines Wrappers ist. */
.offer-bar-avatar-wrap {
    position: relative;
    display: inline-flex;
    margin-left: -10px;
}
.offer-bar-avatar-wrap:first-child {
    margin-left: 0;
}
.offer-bar-avatar-wrap:nth-child(n+5) {
    margin-left: -15px;
}
.offer-bar-avatar-wrap .offer-bar-avatar {
    margin-left: 0;
    display: block;
    transition: filter var(--dur-fast, .15s);
}
/* Beim Hover rueckt das Logo nach vorn, sonst verdeckt der Nachbar-Avatar
   im ueberlappenden Stack die rechte Haelfte der Schaltflaeche. */
.offer-bar-avatar-wrap:hover,
.offer-bar-avatar-wrap:focus-within {
    z-index: 20 !important;
}
.offer-bar-avatar-wrap:hover .offer-bar-avatar,
.offer-bar-avatar-wrap:focus-within .offer-bar-avatar {
    filter: brightness(.45);
}

.offer-bar-avatar-remove {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 2px solid var(--panel-bg, #fff);
    border-radius: 50%;
    background: transparent;
    color: #fff;
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--dur-fast, .15s);
}
.offer-bar-avatar-wrap:hover .offer-bar-avatar-remove,
.offer-bar-avatar-remove:focus-visible {
    opacity: 1;
}
.offer-bar-avatar-remove:focus-visible {
    outline: 2px solid var(--tm-accent, #DA1884);
    outline-offset: 2px;
}
.offer-bar-avatar-remove-glyph {
    font-size: 17px;
    line-height: 1;
    font-weight: 400;
    /* Das Kreuz sitzt in seiner Zeilenbox leicht hoch, 1px zurueckholen */
    transform: translateY(-1px);
    pointer-events: none;
}

@media (hover: none) {
    /* Ohne Hover gibt es keinen Zwischenschritt: die Flaeche waere ein
       unsichtbarer Loesch-Knopf ueber dem Logo. Auf Touch fuehrt der Tap
       deshalb weiter ins Checkout-Modal. */
    .offer-bar-avatar-remove {
        display: none;
    }
}
.offer-bar-avatar-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--t-2xs);
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--tm-accent-light, #E84DA3), var(--tm-accent, #DA1884));
    letter-spacing: -0.02em;
}
.offer-bar-summary-meta {
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--text-muted, #717C7D);
    letter-spacing: 0.1px;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Desktop Multi-Brand-Collapse (ab 3 Brands) ──
   Maximal 2 Marken als Einzel-Cards (Mikes Vorgabe 2026-08-03: eine dritte
   volle Card machte die Bar zu breit). Ab der dritten dieselbe kompakte
   Summary wie mobil (Marken-Avatare + "N Brands · X Platz."): die Bar
   schrumpft auf Inhaltsbreite (width:auto) und oeffnet per Klick das
   Checkout-Modal. Nur Desktop (>600px); mobil zeigt die Summary ohnehin
   immer, daher hier gescopet, um die Mobile-Optik nicht zu veraendern.
   Spezifitaet: .offer-bar--collapsed.offer-bar:not(...) schlaegt die
   Grid-Regel .offer-bar:not(...) .offer-bar-items. */
@media (min-width: 601px) {
    .offer-bar--collapsed.offer-bar:not(.offer-bar--empty) {
        width: auto;
    }
    .offer-bar--collapsed.offer-bar:not(.offer-bar--empty) .offer-bar-items {
        display: none;
    }
    .offer-bar--collapsed .offer-bar-summary {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 7px 14px 7px 11px;
        border-radius: 12px;
        cursor: pointer;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.10);
        transition: background var(--dur-fast), border-color var(--dur-fast);
    }
    .offer-bar--collapsed .offer-bar-summary:hover {
        background: rgba(255, 255, 255, 0.10);
        border-color: rgba(255, 255, 255, 0.18);
    }
    /* Chevron signalisiert "aufklappen" (oeffnet das Checkout-Modal). */
    .offer-bar--collapsed .offer-bar-summary::after {
        content: '\203A';
        font-size: var(--t-md);
        line-height: 1;
        font-weight: 700;
        color: var(--text-muted, #717C7D);
        margin-left: 2px;
    }
    [data-theme="light"] .offer-bar--collapsed .offer-bar-summary {
        background: rgba(255, 255, 255, 0.92);
        border-color: rgba(0, 0, 0, 0.06);
    }
    [data-theme="light"] .offer-bar--collapsed .offer-bar-summary:hover {
        background: #fff;
        border-color: rgba(0, 0, 0, 0.12);
    }
}

/* Addon tile selected state */
.addon-tile.addon-selected {
    outline: 2px solid var(--accent, var(--tm-accent));
    outline-offset: -2px;
    position: relative;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, var(--tm-accent)) 25%, transparent);
}

.addon-tile.addon-selected::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 6px;
    right: 8px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent, var(--tm-accent));
    color: #fff;
    font-size: var(--t-2xs);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Edit-Mode: Cart-Inhalt verstecken, Bar bleibt sichtbar (Edit-Button) */
body.edit-mode .offer-bar .offer-bar-items,
body.edit-mode .offer-bar .offer-bar-total,
body.edit-mode .offer-bar .offer-bar-checkout-btn {
    display: none !important;
}

.auth-gate-visible .offer-bar {
    display: none !important;
}

/* ── Offer Bar: Checkout Button ── */
.offer-bar-checkout-btn {
    padding: 10px 17px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #e94d97 0%, #DA1884 100%);
    color: #fff;
    font-size: var(--t-sm);
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    transition: transform var(--dur-fast), box-shadow var(--dur-fast), filter var(--dur-fast);
    flex-shrink: 0;
    box-shadow: var(--shadow-2);
}

.offer-bar-checkout-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(218, 24, 132, 0.45),
                0 0 0 1px rgba(255, 255, 255, 0.12) inset;
    filter: brightness(1.06);
}

.offer-bar-checkout-btn:active {
    transform: translateY(1px) scale(0.97);
    box-shadow: 0 1px 4px rgba(218, 24, 132, 0.2);
    filter: brightness(1);
    transition: transform var(--dur-fast) var(--ease-out);
}

.offer-bar-cta-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
    gap: 1px;
}

.offer-bar-cta-label {
    font-size: var(--t-sm);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.offer-bar-cta-sub {
    font-size: var(--t-2xs);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.78);
    letter-spacing: 0.2px;
}

/* ── Checkout Popover ── */
.checkout-overlay {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Spotlight-Vignette: dunkler an Rändern, leichter zur Mitte hin.
       Backdrop-Blur + Saturate verstärkt Tunnel-Vision-Effekt. */
    background:
        radial-gradient(ellipse 60% 60% at center, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0.62) 100%);
    backdrop-filter: blur(8px) saturate(0.85);
    -webkit-backdrop-filter: blur(8px) saturate(0.85);
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-out);
}

[data-theme="dark"] .checkout-overlay {
    background:
        radial-gradient(ellipse 60% 60% at center, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.82) 100%);
}

.checkout-overlay.visible {
    opacity: 1;
}

.checkout-modal {
    background: var(--panel-bg, #fff);
    border-radius: var(--radius-xl);
    box-shadow:
        0 32px 100px rgba(0, 0, 0, 0.45),
        0 0 0 1px color-mix(in srgb, var(--tm-accent) 18%, transparent),
        0 0 60px color-mix(in srgb, var(--tm-accent) 12%, transparent);
    max-width: 540px;
    width: 92vw;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    transform: scale(0.92) translateY(28px);
    opacity: 0;
    transition: transform var(--dur-slow) var(--ease-out),
        opacity var(--dur-base) ease;
}

.checkout-overlay.visible .checkout-modal {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.checkout-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--text-muted, #999);
    font-size: var(--t-base);
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--dur-fast);
    z-index: 2;
}

.checkout-close:hover {
    background: rgba(0, 0, 0, 0.06);
}

.checkout-close:focus-visible {
    outline: 2px solid var(--tm-accent, #e94d97);
    outline-offset: 2px;
}

/* Grip-Handle: nur im mobilen Bottom-Sheet sichtbar (siehe @media max-width:600px). */
.checkout-sheet-handle {
    display: none;
}

/* Teilen-Box-Chevron: nur im mobilen Single-Sheet sichtbar (Collapse-Toggle). */
.checkout-share-toggle {
    display: none;
}

.checkout-header {
    text-align: center;
    padding: 14px 24px 12px;
    border-bottom: 1px solid var(--border-light, #eee);
    flex-shrink: 0;
    background: var(--panel-bg, #fff);
    box-shadow: var(--shadow-1);
    transition: max-height var(--dur-base) ease, padding var(--dur-base) ease, opacity var(--dur-fast) ease;
    overflow: hidden;
    max-height: 200px;
}

.checkout-modal.has-multi .checkout-header {
    padding: 18px 24px 16px;
}

/* Hero-Brand-Row sichtbar im Viewport → Modal-Header redundant, weg. */
.checkout-modal.checkout-modal--hide-header .checkout-header {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: 0;
    opacity: 0;
}

/* Brand-Row: nur Logo, zentriert. */
.checkout-brand-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.checkout-logo {
    display: block;
    height: 36px;
    width: auto;
    object-fit: contain;
    margin: 0;
    flex-shrink: 0;
}

.checkout-modal.has-multi .checkout-logo {
    height: 52px;
}

[data-theme="dark"] .checkout-logo--light {
    display: none;
}
[data-theme="dark"] .checkout-logo--dark {
    display: block;
}
.checkout-logo--dark {
    display: none;
}

/* Black-Week: Header steht auf --panel-bg (#111), das Light-Logo hat eine
   schwarze Wortmarke. Ohne Swap ist die Absenderzeile praktisch unsichtbar.
   Anders als im Footer bleibt das X hier in Markenfarben (kein Monochrom-
   Filter): der Checkout ist der Abschluss, dort steht der Absender und nicht
   der Kampagnen-Skin. */
[data-profile="black-week"] .checkout-logo--light {
    display: none;
}
[data-profile="black-week"] .checkout-logo--dark {
    display: block;
}

/* MEDIA-KIT 2026 Title – Hero-H1-Style. Single-Card kompakter
   (Header soll Content nicht überstrahlen), Multi-Card prominenter. */
.checkout-mediakit-title {
    font-family: var(--font-heading);
    font-size: var(--t-md);
    font-weight: 700;
    line-height: 1.15;
    margin: 0;
    color: var(--text);
    letter-spacing: -0.3px;
}

.checkout-modal.has-multi .checkout-mediakit-title {
    font-size: var(--t-2xl);
    letter-spacing: -1px;
}

.checkout-mediakit-title .outline {
    color: var(--tm-accent);
    font-weight: 700;
}

.checkout-header>i {
    font-size: var(--t-xl);
    color: var(--accent);
    margin-bottom: 8px;
    display: block;
}

.checkout-header h2 {
    font-family: var(--font-heading);
    font-size: var(--t-xl);
    font-weight: 700;
    color: var(--text);
    margin: 0;
    line-height: 1.15;
}

.checkout-header p {
    font-size: var(--t-sm);
    color: var(--text-muted);
    margin: 4px 0 0;
    line-height: 1.4;
    max-width: none;
}

/* Share-Link 404 / abgelaufen: gleiche Checkout-Karte, leerer Body. */
.checkout-offer-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    padding: 36px 20px 44px;
}
.checkout-offer-error > i {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--t-md);
    color: var(--tm-accent);
    background: color-mix(in srgb, var(--tm-accent) 12%, var(--surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tm-accent) 22%, transparent);
}
.checkout-offer-error p {
    margin: 0;
    max-width: 42ch;
    font-size: var(--t-sm);
    line-height: 1.5;
    color: var(--text-muted);
}

/* Der Body ist die Buehne, auf der die Brand-Cards als Tiles liegen. Ohne
   diesen Tonwert sitzt --surface (#f7f7f9) fast deckungsgleich auf
   --panel-bg (#fff): die Cards haben dann keine Figur-Grund-Trennung und
   gehen neben der dunklen Bottom-Line-Bank unter. */
.checkout-body {
    padding: 12px 24px 14px;
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    min-height: 0;
    background: color-mix(in srgb, var(--text) 4%, var(--panel-bg));
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--text-muted) 40%, transparent) transparent;
}
/* Dunkle Themes: Buehne muss DUNKLER als --panel-bg sein, nicht heller,
   sonst kehrt sich die Beziehung Card-zu-Grund um. */
[data-theme="dark"] .checkout-body,
[data-profile="black-week"] .checkout-body {
    background: var(--bg);
}
/* Checkout-Scrollbar: neutral grau statt accent-getönt. */
.checkout-body::-webkit-scrollbar {
    width: 6px;
}

.checkout-body::-webkit-scrollbar-track {
    background: transparent;
}

.checkout-body::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--text-muted) 40%, transparent);
    border-radius: 999px;
    transition: background var(--dur-fast);
}

.checkout-body::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--text-muted) 58%, transparent);
}

.checkout-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: var(--t-xs);
    color: var(--text-muted);
    text-align: center;
    margin: 12px 0 2px;
    line-height: 1.4;
}
/* Angebots-Hinweis vor dem Submit-Button: bewusst NICHT die Fussnoten-Optik
   von .checkout-hint (das ist hier die einzige Handlungsanweisung im
   Copy-Only-Flow, keine Randnotiz). Voller Text-Kontrast + Gewicht wie
   .checkout-no-obligation, statt --text-muted.
   display:block statt geerbtem display:flex (Basis-Regel oben): der Satz
   ist zu lang fuer die Flex-Row-Optik der anderen .checkout-hint-Zeilen -
   Icon, Text-vor-<strong>, das <strong>-Element selbst und Text-danach
   werden bei flex JEWEILS zu eigenen Flex-Items (jede Element-Grenze ein
   eigenes Item) und brechen dadurch als vier isolierte, einzeln zentrierte
   Fragmente statt als ein zusammenhaengender, normal umbrechender Satz. */
.checkout-hint--primary {
    display: block;
    color: var(--text);
    font-size: var(--t-sm);
    font-weight: 600;
    line-height: 1.5;
}
/* Kein --tm-accent auf der <strong>-Mailadresse: faellt im Dark-Theme auf
   3.66:1 (Pitfall 28 - Markenfarbe gehoert in Flaechen/Icons, nicht in
   Fliesstext). Fettung allein reicht als Hervorhebung, erbt --text (11-16:1
   ueber alle drei Themes). */
.checkout-hint--primary i {
    margin-right: 5px;
    color: var(--tm-accent);
    opacity: 1;
}
.checkout-no-obligation {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--text-muted);
    margin: 12px 0 2px;
}
.checkout-no-obligation i {
    color: var(--tm-accent);
    opacity: 0.9;
}
.offer-bar-empty-hint {
    font-size: var(--t-sm);
    color: var(--text-muted);
    white-space: nowrap;
    padding-left: 4px;
}
/* #4 Preis-Basis-Hinweis im Checkout */
.checkout-price-basis {
    font-size: var(--t-xs);
    color: var(--text-muted);
    text-align: center;
    margin: 0 0 2px;
    opacity: 0.9;
}
.checkout-hint i {
    color: var(--tm-accent);
    opacity: 0.85;
    flex-shrink: 0;
    margin-top: 2px;
}

.checkout-hint-main,
.checkout-hint-action {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.checkout-hint-main > i,
.checkout-hint-action > i {
    flex-shrink: 0;
    margin-top: 3px;
    font-size: var(--t-xs);
}

.checkout-hint-main {
    color: var(--text);
}

.checkout-hint-main > i {
    color: var(--tm-accent);
    opacity: 0.85;
}

.checkout-hint-action {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed color-mix(in srgb, var(--text-muted) 28%, transparent);
    font-size: var(--t-2xs);
    opacity: 0.8;
}

.checkout-hint-action > i {
    color: var(--text-muted);
    opacity: 0.7;
    font-size: var(--t-2xs);
}

.checkout-packages {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

/* 1-Brand-Mode zeigt die Subtotal-Zeile als "Gesamtpaketpreis" (Label-Swap in
   offer-bar.js openCheckoutPopover). Frueher war sie hier display:none
   ("redundant zum Gesamtbetrag") - das war falsch, denn bei 1 Brand rendert
   KEINE Gesamtbetrag-Bank (nur bei 2+ Brands), der Ein-Brand-Preis blieb also
   voellig ohne Summe. Sie erscheint ohnehin nur bei Extras (SM/Booster/Discount);
   ein reiner Tier-Preis steht bereits in der Tier-Zeile und braucht keine
   Wiederholung. Kein display:none mehr -> Standard-.checkout-row-subtotal greift. */

/* ─── Checkout Layout Switch ───────────────────────────────
   Default: Cards untereinander gestapelt (Modal max-width 540px).
   Bei 3+ Brands + Details-Open: .checkout-packages--expanded +
   .checkout-modal.has-multi werden gleichzeitig gesetzt → 2-col Grid
   + Modal wächst auf 1080px. View Transitions API morpht den Wechsel
   (siehe _toggleCheckoutDetails in offer-bar.js). */
.checkout-modal {
    transition: transform var(--dur-slow) var(--ease-out),
        opacity var(--dur-base) ease;
    /* Eindeutiger Name macht den Layout-Wechsel als eigene View
       Transition animierbar – Browser snapshottet vor + nach dem Class-
       Add und cross-fadet smooth zwischen den Layouts. */
    view-transition-name: checkout-modal;
}

/* 2-3 Brands: kompakter (980px). Cards bekommen ~450px Breite, atmen
   ohne ausschweifend zu wirken. */
.checkout-modal.has-multi {
    max-width: 980px;
    width: 92vw;
}

/* 4+ Brands: breiter wieder, sonst cramped in 2-col Grid. */
.checkout-modal.has-multi--wide {
    max-width: 1280px;
    width: 96vw;
}

/* Default-Root-Cross-Fade abschalten – wir wollen nur den Modal
   morphen, der Rest der Seite hinter dem Overlay bleibt statisch. */
::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

.checkout-packages--expanded {
    display: grid;
    /* Max 2 Brand-Cards pro Reihe – Layout bleibt klar lesbar auch
       bei vielen Brands. Bei ungerader Brand-Zahl fuellt die Gesamtbetrag-Karte
       die freie Ecke (checkout-bottomline--corner), das Raster bleibt luecken-
       los. Die Hoehe faengt die Auto-Fit-Verdichtung ab. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch;
    margin-bottom: 10px;
}

/* Stretch cards to equal height + push subtotal to bottom of each so
   uneven placements counts (9 vs 8 etc.) don't break visual alignment.
   Kein eigenes Keyframe-Stagger mehr – View Transitions API morpht den
   Layout-Wechsel sauber, Re-Animation pro Toggle ist störend. */
.checkout-packages--expanded .checkout-row {
    display: flex;
    flex-direction: column;
}

.checkout-packages--expanded .checkout-row-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.checkout-packages--expanded .checkout-row-subtotal {
    margin-top: auto;
}

/* Multi-Mode: Cards schmaler – gleicher auto-fit Algorithmus, nur
   knapperes Spalten-Gap (10px statt 14px) für mehr Item-Breite. */
.checkout-packages--expanded .checkout-placements-list {
    gap: 6px 10px;
}

/* Multi-Mode-Banner: die Cards sind hier breit (460px bei 3, 620px bei 4
   Brands). Ein flacher Banner laesst das zentrierte Logo darin winzig wirken.
   Hoeher = Logo groesser, die "Box geht in die Hoehe statt in die Breite". */
/* Hoehe = Logo-max-height + Padding, kein Ueberschuss: die 150px liessen ueber
   breiten Wortmarken (China-Gadgets, reebate skalieren ueber die BREITE, nicht
   die Hoehe) eine leere Zone stehen. 124px = 100px Logo + 2x12px. Kein Logo
   wird dadurch kleiner - genau das war der alte Fehler ("Logos viel zu mini"). */
.checkout-packages--expanded .checkout-row-banner {
    height: 124px;
    padding: 12px 18px;
}

.checkout-packages--expanded .checkout-row-banner img {
    /* Referenzhoehe = china-gadgets (--logo-zoom 1). Die uebrigen Brands
       wachsen von hier per Zoom auf dieselbe Schriftgroesse. 100px waeren
       fuer schnaeppchenfuchs zu hoch (Tinte 118px in einem 124px-Banner). */
    max-height: 64px;
}

/* Dense-Mode: 4+ Brands → Text-Zeilen komprimieren damit mehr Cards passen.
   Der Banner bleibt aber gross: bei 4+ Brands ist das Modal am breitesten
   (1280px, ~620px Cards), ein flacher Banner machte die Logos hier am
   kleinsten (72px war der Ausloeser fuer "Logos viel zu mini"). Kompakte
   Textzeilen plus praesenter Banner. */
.checkout-packages--dense {
    gap: 10px;
}

.checkout-packages--dense .checkout-row-banner {
    height: 124px;
    padding: 12px 18px;
}

.checkout-packages--dense .checkout-row-banner img {
    max-height: 64px;
}

/* Die Brand-Normalisierung liegt bewusst NICHT mehr hier als max-height,
   sondern als --logo-zoom bei den Basisregeln (.checkout-row-banner).
   Grund siehe dort: eine max-height je Brand wird von den Auto-Fit-Stufen
   ueberschrieben und war ab 3 Brands wirkungslos. */

.checkout-packages--dense .checkout-row-body {
    padding: 10px 14px 12px;
}

.checkout-packages--dense .checkout-line {
    font-size: var(--t-xs);
}

.checkout-packages--dense .checkout-line-tier .checkout-line-label strong {
    font-size: var(--t-xs);
}

/* Dense-Mode: Card-Preis zurueckskalieren, 1.2rem sprengt die schmale Card. */
.checkout-packages--dense .checkout-line-tier .checkout-line-price {
    font-size: var(--t-base);
}

.checkout-packages--dense .checkout-row-subtotal {
    padding-top: 8px;
    font-size: var(--t-xs);
}

.checkout-packages--dense .checkout-row-details {
    margin-top: 6px;
}

.checkout-packages--dense .checkout-row-details-summary {
    padding: 4px 10px;
    font-size: var(--t-2xs);
}

.checkout-packages--dense .checkout-placements-list {
    gap: 4px 10px;
    padding-top: 4px;
}

.checkout-packages--dense .checkout-placements-list li {
    font-size: var(--t-2xs);
}

.checkout-packages--dense .checkout-placements-title {
    font-size: var(--t-2xs);
}

/* Mobile fallback: even when has-multi is set, drop to single column
   under 720px viewport so cards don't shrink below readable width. */
@media (max-width: 720px) {
    .checkout-modal.has-multi {
        max-width: 540px;
    }
    .checkout-packages--expanded {
        grid-template-columns: 1fr;
    }
}

/* Ruhe-Elevation: die Card ist die Ware und braucht eigenes Material, sonst
   traegt die Bottom-Line-Bank als einziges Element Fuellung + Schatten. */
.checkout-row {
    background: var(--panel-bg, #fff);
    border: 1px solid var(--border, rgba(0, 0, 0, 0.09));
    border-radius: var(--radius-md);
    padding: 0;
    overflow: hidden;
    box-shadow: var(--shadow-2);
    transition: transform var(--dur-fast), box-shadow var(--dur-fast), border-color var(--dur-fast);
    position: relative; /* Anker fuer den Loeschen-Chip */
}

/* Dunkle Themes: Schatten traegt auf dunklem Grund nicht, die Card hebt sich
   ueber den helleren --surface-Ton und eine kraeftigere Hairline ab. */
[data-theme="dark"] .checkout-row,
[data-profile="black-week"] .checkout-row {
    background: var(--surface);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Black-Week: Preis + "enthalten"-Signalfarben im Checkout/Share-Link auf
   Gold statt MonsterDealz-Magenta ziehen, damit die wichtigste Zahl im Modal
   dieselbe Sprache spricht wie .tier-btn.active .tier-price und
   .offer-bar-total-price auf der Hauptseite. Bewusst NICHT die CTA-Familie
   (.checkout-submit, .checkout-share-*, .checkout-pdf-link) - die bleibt
   Marken-Magenta, siehe Kommentar bei .checkout-logo weiter oben ("der
   Checkout ist der Abschluss, dort steht der Absender und nicht der
   Kampagnen-Skin"). Hier geht es nur um Inhalts-/Informationsfarben. */
[data-profile="black-week"] .checkout-line-tier .checkout-line-price,
[data-profile="black-week"] .checkout-row-subtotal-price strong {
    color: #FFD700;
}

[data-profile="black-week"] .checkout-line-icon,
[data-profile="black-week"] .checkout-line-tier--sm-only .checkout-line-label strong,
[data-profile="black-week"] .checkout-line-tier--sm-only .checkout-tier-icon,
[data-profile="black-week"] .checkout-extras-divider span {
    color: #FFD700;
}

[data-profile="black-week"] .checkout-extras-divider::before,
[data-profile="black-week"] .checkout-extras-divider::after {
    background: rgba(255, 215, 0, 0.18);
}

[data-profile="black-week"] .checkout-tier-booster-pill {
    background: rgba(255, 215, 0, 0.12);
    color: #FFD700;
}

[data-profile="black-week"] .checkout-bundle-line i,
[data-profile="black-week"] .checkout-bundle-next i,
[data-profile="black-week"] .checkout-tier-ledger .checkout-bundle-line i,
[data-profile="black-week"] .checkout-tier-ledger .checkout-bundle-next i {
    color: #FFD700;
}

.checkout-row:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06), 0 4px 12px color-mix(in srgb, var(--tm-accent) 12%, transparent);
    border-color: color-mix(in srgb, var(--tm-accent) 25%, var(--border-light));
}

/* Brand aus dem Warenkorb entfernen: Frosted-Disc oben rechts auf dem
   Banner (Banner-Ecke ist frei, Logo zentriert). Banner-/Theme-agnostisch
   (funktioniert auf hellen wie dunklen Bannern). Papierkorb statt x, weil
   das Modal-Close-x oben rechts ein anderes Element ist. Rot erst im Hover
   = destruktiv; Magenta bleibt dem Primary-CTA vorbehalten. */
.checkout-row-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(15, 23, 40, 0.42);
    color: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    font-size: var(--t-xs);
    cursor: pointer;
    opacity: 0;
    transform: scale(0.9);
    transition: opacity var(--dur-fast), transform var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
}
/* groesseres Tap-Target (~48px) ohne visuellen Bulk */
.checkout-row-remove::before { content: ''; position: absolute; inset: -9px; }
.checkout-row-remove:hover { background: rgba(239, 68, 68, 0.92); color: #fff; }
.checkout-row-remove:focus-visible {
    opacity: 1;
    transform: none;
    outline: 2px solid #fff;
    outline-offset: 2px;
}
/* Desktop: erst bei Card-Hover einblenden (ruhige Card). */
@media (hover: hover) {
    .checkout-row:hover .checkout-row-remove { opacity: 1; transform: none; }
}
/* Touch: dauerhaft sichtbar (kein Hover-Reveal moeglich). */
@media (hover: none), (pointer: coarse) {
    .checkout-row-remove { opacity: 1; transform: none; }
}

.checkout-row-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* Feste Höhe statt min-height – alle Banner exakt gleich groß,
       Logos werden via max-height + object-fit eingepasst, kein
       Symmetrie-Bruch durch unterschiedliche Logo-Aspect-Ratios. */
    height: 140px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border-light, #e5e5e5);
    box-sizing: border-box;
    /* Der --logo-zoom unten schiebt den Bildrand ueber die Bannerkante
       hinaus. Ohne hidden laege er ueber Nachbar-Card und Kartenrand. */
    overflow: hidden;
}

.checkout-row-banner img {
    max-height: 96px;
    max-width: 90%;
    width: auto;
    object-fit: contain;
    transform: scale(var(--logo-zoom, 1));
}

/* Einzel-Brand-Checkout: die --logo-zoom-Werte unten sind auf den Multi-Brand-
   Fall (img max-height 64px) geeicht. Der single-card-Banner hatte keine eigene
   Regel und fiel auf die Basis 96px zurueck -> Logo 1,5x zu gross ("Logo sehr
   gross bei nur einer Brand", gemeldet 16.08.2026). 80px = 1,25x der
   Multi-Referenz: praesent in der breiten 540px-Einzel-Card, aber ohne die
   Uebergroesse. Uniform ueber alle 7 Brands, weil der Zoom multiplikativ auf
   diese gemeinsame Basis wirkt (per CDP gegengeprueft). Die is-compact-Stufen
   fassen nur --expanded an und ueberschreiben das hier nicht (vgl. Pitfall 45). */
.checkout-packages--single-card .checkout-row-banner img {
    max-height: 80px;
}

/* ─── Logo-Schrift ueber alle Brand-Cards angleichen ──────────────
   Jedes Portal-Logo hat ein anderes Verhaeltnis von Schrift zu Grafik und
   Rand: china-gadgets ist ein randloses SVG (100% Tinte), die uebrigen sind
   Banner-JPEGs mit 51-70% Weissraum (gemessen: dealdoktor 38,1% Tintenhoehe,
   mytopdeals 29,7%, schnaeppchenfuchs 49,0%, kostenlos 44,1%, monsterdealz
   39,6%, reebate 47,0%). Bei gleicher max-height erscheint CGs Wortmarke
   deshalb zwangslaeufig 2-3x groesser als die anderen. Ziel (Mikes Vorgabe):
   die Schrift, NICHT die Grafik, ist ueberall gleich hoch.

   ⚠️ Diese Normalisierung stand bis 06.08.2026 als max-height je Brand im
   @media-Block weiter oben und war damit ab 3 Brands WIRKUNGSLOS: die
   Auto-Fit-Stufen (.is-compact-1/-2/-3) setzen max-height uniform und sind
   spezifischer (2 Klassen am Modal), sie ueberschrieben die Brand-Werte
   restlos. Gemessen bei 3+ Brands: alle Logos auf 42px, CG dadurch mit 156px
   Breite gegen 105px der uebrigen - genau das gemeldete "Logos zu klein im
   Vergleich zu CG, am Seitenabstand zu erkennen".

   Deshalb jetzt ein ZOOM statt einer Hoehe: er wirkt multiplikativ auf die
   jeweils geltende Layoutbox und ueberlebt damit jede Auto-Fit-Stufe, jede
   Card-Breite und den Mobil-Block automatisch. Ein Wert pro Brand statt einer
   Tabelle je Stufe - genau die Vervielfachung war die Fehlerquelle.
   Faktor = alter kalibrierter Wert / 48 (china-gadgets als Referenz, dessen
   Groesse dadurch unveraendert bleibt). Der Zoom aendert die Layoutbox NICHT,
   der herausgeschobene Weissraum wird vom overflow:hidden oben gekappt. */
.checkout-row-banner[data-portal="dealdoktor"]        { --logo-zoom: 1.90; }
.checkout-row-banner[data-portal="mytopdeals"]        { --logo-zoom: 2.35; }
.checkout-row-banner[data-portal="schnaeppchenfuchs"] { --logo-zoom: 2.42; }
.checkout-row-banner[data-portal="chinagadgets"]      { --logo-zoom: 1; }
.checkout-row-banner[data-portal="kostenlos"]         { --logo-zoom: 1.70; }
.checkout-row-banner[data-portal="monsterdealz"]      { --logo-zoom: 2.00; }
.checkout-row-banner[data-portal="reebate"]           { --logo-zoom: 1.35; }

.checkout-row-brand-fallback {
    font-family: var(--font-heading);
    font-size: var(--t-md);
    font-weight: 700;
    color: var(--text);
    text-align: center;
    padding: 18px;
    background: var(--surface);
    border-bottom: 1px solid var(--border-light, #e5e5e5);
    letter-spacing: -0.01em;
}

.checkout-row-body {
    padding: 10px 16px 12px;
}

/* ── Reichweite der Brand in der Warenkorb-Card ───────────────
   KPI-Trio (Aufrufe / Downloads / Newsletter) in derselben Sprache wie die
   Leiste im Portal: Zahl fett, Label klein darunter. Darunter die
   Social-Follower, bewusst dezent. Gilt auch im PDF und im geteilten Link,
   weil beide dieses Markup rendern. */
.checkout-reach {
    margin-bottom: 12px;
}

.checkout-reach-stats {
    display: flex;
    gap: 8px;
    text-align: center;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-light);
}

.checkout-reach-stats > div {
    flex: 1;
    min-width: 0;
}

.checkout-reach-val {
    display: block;
    font-size: var(--t-base);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text);
}

.checkout-reach-lbl {
    display: block;
    margin-top: 1px;
    /* Eine Zeile bleibt ruhiger; die kleinere KPI-Schrift schafft dafür Platz. */
    font-size: 0.6rem;
    line-height: 1.25;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
    color: var(--text-muted);
}

/* KPI-Icon: uebernimmt das Icon aus .kpi-lbl des Portals, aber NICHT dessen
   Akzentfarbe. Im Portal ist es magenta; hier sitzt direkt darunter die
   Social-Zeile mit gedaempften Icons, und ein farbiges KPI-Icon daneben bricht
   den Block auf zwei Tonlagen auf. Der einzige farbige Punkt im Modal bleibt
   die CTA. Groesse in em, damit die Auto-Fit-Stufen (is-compact-1/-3
   verkleinern nur die font-size des Labels) es automatisch mitziehen. */
.checkout-reach-lbl i {
    margin-right: 4px;
    font-size: 0.95em;
    opacity: 0.65;
}

.checkout-reach-social {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 12px;
    margin-top: 8px;
    font-size: var(--t-2xs);
    color: var(--text-muted);
}

.checkout-reach-social span,
.checkout-reach-social a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    color: inherit;
    text-decoration: none;
}

.checkout-reach-social a:hover {
    color: var(--accent);
    text-decoration: underline;
}

/* Brand-Logo im Warenkorb fuehrt zur Portal-Website. */
.checkout-row-banner-link {
    display: block;
    text-decoration: none;
}

.checkout-lines {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.checkout-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: var(--t-sm);
    color: var(--text);
    gap: 12px;
}

.checkout-line-label {
    flex: 1;
    min-width: 0;
    color: var(--text);
    line-height: 1.4;
}

/* Was in einem SM-Paket steckt (labelSub). Eigene Zeile unter dem Namen; der
   Preis bleibt dank align-items:baseline der .checkout-line neben dem Namen. */
.checkout-line-sub {
    display: block;
    margin-top: 2px;
    font-size: var(--t-xs);
    line-height: 1.35;
    color: var(--text-muted);
}

/* Dritte Zeile des SM-Pakets (labelDetails): meist die Reichweiten. Etwas
   kleiner als die Beschreibung, gleiche Optik wie im Portal (.sm-label-details).
   Neutral, weil dort nicht immer Zahlen stehen (teils ein Kanal-Link). */
.checkout-line-details {
    display: block;
    margin-top: 2px;
    font-size: var(--t-2xs);
    line-height: 1.3;
    color: var(--text-muted);
    opacity: 0.85;
}

/* URLs, die im Text stehen (z.B. der Podcast-Kanal), sind anklickbar. Im
   Brand-Akzent statt im Browser-Blau, sonst leuchtet der Link aus der dezenten
   Zeile heraus (und landet so auch im PDF-Bild). */
.checkout-line-sub a,
.checkout-line-details a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.checkout-line-label strong {
    color: var(--text);
    font-weight: 700;
}

.checkout-line-price {
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.checkout-line-price-soft {
    font-weight: 500;
    color: var(--text-muted);
    font-style: italic;
}

/* X pro Add-on-Zeile (Booster/SM) im Checkout-Modal: einzelnes Add-on aus
   dem Warenkorb entfernen. Dezent dauerhaft sichtbar (touch-tauglich),
   Hover rot = destruktiv (Magenta bleibt dem CTA vorbehalten). */
.checkout-line-remove {
    flex: none;
    align-self: center;
    width: 22px;
    height: 22px;
    /* KEIN negativer Rechts-Rand: die entfernbaren SM-/Booster-Zeilen sitzen im
       .checkout-row-details-body-inner (overflow:hidden fuer den Collapse). Ein
       Outdent nach rechts ragte aus dieser Clip-Box und schnitt den X-Button an.
       Kleiner positiver Rand haelt ihn sichtbar innerhalb der Box. */
    margin: -2px 2px -2px 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    font-size: var(--t-2xs);
    line-height: 1;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
}
.checkout-line-remove:hover {
    opacity: 1;
    background: color-mix(in srgb, var(--status-danger) 15%, transparent);
    color: var(--status-danger);
}
.checkout-line-remove:focus-visible {
    opacity: 1;
    outline: 2px solid var(--status-danger);
    outline-offset: 1px;
}

.checkout-line-tier {
    font-size: var(--t-sm);
    padding-bottom: 4px;
}

.checkout-line-tier .checkout-line-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Tier-Name semibold, Preis dominant bold + größer als Decision-Anker. */
.checkout-line-tier .checkout-line-label strong {
    font-weight: 600;
}

/* Kontext-Präfix vor dem Tier-Namen ("Gewähltes Paket: Performance").
   Leiser gesetzt: der Paketname bleibt der Anker, das Präfix erklärt nur. */
/* Gleiche Schriftgroesse wie der Tier-Name daneben: bei 0.92em sass der Prefix
   zwar auf derselben Grundlinie, war aber gut 1px kleiner – der fette Tier-Name
   ragte oben heraus und die Zeile wirkte verrutscht. Dezent bleibt er ueber
   Farbe und Gewicht. */
.checkout-tier-prefix {
    font-weight: 500;
    color: var(--text-muted);
}

/* Icon + Präfix + Name als eine Einheit. Das Label darüber ist flex-wrap:
   ohne diese Gruppe kippt auf schmalen Cards das Icon allein in Zeile 1. */
.checkout-tier-name {
    min-width: 0;
}

.checkout-tier-name .checkout-tier-icon {
    margin-right: 2px;
}

/* Der lebende Card-Preis muss lauter sein als der durchgestrichene, tote
   Preis in der Bank (der lag bei 1.1rem und ueberstimmte ihn). */
.checkout-line-tier .checkout-line-price {
    font-size: var(--t-md);
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Tier-Icon (fa-box-archive / fa-mobile-screen) im Header. Akzent-Farbe
   konsistent zu anderen FA-Icons im Modal. */
.checkout-tier-icon {
    color: var(--text-muted);
    font-size: var(--t-base);
    opacity: 0.9;
}

/* SM/Booster-Zeilen-Icon kleiner + neutral als Section-Detail. */
.checkout-line-icon {
    color: var(--tm-accent, #e94d97);
    font-size: var(--t-xs);
    opacity: 0.8;
    width: 14px;
    text-align: center;
}

/* SM-Only Header – Tier-Slot mit Akzent statt Tier-Preis. */
.checkout-line-tier--sm-only .checkout-line-label strong {
    color: var(--accent, #e94d97);
}
.checkout-line-tier--sm-only .checkout-tier-icon {
    color: var(--accent, #e94d97);
}

.checkout-tier-booster-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: var(--t-2xs);
    font-weight: 700;
    background: color-mix(in srgb, var(--tm-accent) 12%, transparent);
    color: var(--tm-accent);
    letter-spacing: 0.02em;
    line-height: 1.5;
    white-space: nowrap;
}

.checkout-tier-booster-pill i {
    font-size: var(--t-2xs);
    opacity: 0.9;
}

.checkout-row-subtotal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--border-light, #e5e5e5);
    font-size: var(--t-xs);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-muted);
}

.checkout-row-subtotal-price {
    font-variant-numeric: tabular-nums;
    font-size: var(--t-base);
    text-transform: none;
    letter-spacing: 0;
    color: var(--text);
}

.checkout-row-subtotal-price strong {
    color: var(--text);
    font-weight: 700;
}

.checkout-row-subtotal-price .checkout-strike {
    color: var(--text-muted);
    opacity: 0.7;
    margin-right: 4px;
}

.checkout-extras-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0 2px;
    font-size: var(--t-2xs);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-muted);
}

.checkout-extras-divider::before,
.checkout-extras-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: color-mix(in srgb, var(--tm-accent) 18%, var(--border-light, #e5e5e5));
}

.checkout-extras-divider span {
    color: var(--tm-accent);
    white-space: nowrap;
}

/* Expandable placements accordion */
.checkout-placements {
    margin: 4px 0 2px;
    padding: 0;
    border: 0;
}

.checkout-placements summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--text-muted);
    padding: 4px 0;
    transition: color var(--dur-fast);
}

.checkout-placements summary::-webkit-details-marker {
    display: none;
}

.checkout-placements summary:hover {
    color: var(--tm-accent);
}

.checkout-placements-chevron {
    font-size: var(--t-2xs);
    transition: transform var(--dur-base) var(--ease-inout);
}

.checkout-placements[open] .checkout-placements-chevron {
    transform: rotate(90deg);
    color: var(--tm-accent);
}

.checkout-placements-list {
    list-style: none;
    padding: 4px 0 2px 12px;
    margin: 0;
    display: grid;
    /* auto-fit: möglichst viele Tracks à mind. 170px – damit längstes
       Item (z.B. "Top-Deals des Tages" ~150px) ohne Wrap reinpasst.
       Schmaleres Card → automatisch weniger Tracks (2 statt 3) statt
       Truncation oder Zeilenumbruch im Wort. */
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 3px 14px;
    animation: placementsReveal 0.3s var(--ease-out);
}

@keyframes placementsReveal {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.checkout-placements-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--t-xs);
    color: var(--text);
    line-height: 1.3;
    min-width: 0;
}

.checkout-placements-list li span {
    /* Worte werden nicht abgeschnitten und nicht intern getrennt; falls
       Card sehr schmal wird, kollabiert das Grid via auto-fit auf
       weniger Spalten. */
    white-space: nowrap;
    word-break: keep-all;
    min-width: 0;
}

.checkout-placements-list li i {
    color: var(--text-muted);
    font-size: var(--t-xs);
    width: 14px;
    text-align: center;
    flex-shrink: 0;
    opacity: 0.75;
}

/* Hero-Platzierungen: kein visueller Unterschied mehr (User-Feedback). */

@media (max-width: 520px) {
    .checkout-placements-list {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 440px) {
    .checkout-placements-list {
        grid-template-columns: 1fr;
    }
}

/* Compact mode: per-card collapsible details (placements + boosters).
   Custom data-open implementation (kein natives <details>) damit wir
   per CSS grid-template-rows smooth animieren können – natives
   <details> rendert open/close instant. */
.checkout-row-details {
    margin-top: 10px;
    padding: 0;
    border: 0;
}

.checkout-row-details-summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--tm-accent);
    padding: 5px 12px 5px 11px;
    background: color-mix(in srgb, var(--tm-accent) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--tm-accent) 16%, transparent);
    border-radius: 999px;
    font-family: inherit;
    transition: background var(--dur-base) ease,
        border-color var(--dur-base) ease,
        color var(--dur-base) ease;
}

.checkout-row-details-summary:hover {
    background: color-mix(in srgb, var(--tm-accent) 12%, transparent);
    border-color: color-mix(in srgb, var(--tm-accent) 26%, transparent);
}

.checkout-row-details-chevron {
    font-size: var(--t-2xs);
    opacity: 0.85;
    order: 2;  /* rechts vom Label – Standard-Disclosure-Pattern statt Bullet-Look */
    transition: transform var(--dur-base) var(--ease-out),
        color var(--dur-base);
}

.checkout-row-details[data-open="true"] .checkout-row-details-chevron {
    transform: rotate(90deg);
}

/* Open-State: nicht "voll gefüllt" sondern dezent angehoben –
   stärkerer Tint + Border, gleicher Color. Wirkt aktiv aber nicht
   erschlagend. */
.checkout-row-details[data-open="true"] .checkout-row-details-summary {
    background: color-mix(in srgb, var(--tm-accent) 14%, transparent);
    border-color: color-mix(in srgb, var(--tm-accent) 32%, transparent);
}

.checkout-row-details[data-open="true"] .checkout-row-details-summary:hover {
    background: color-mix(in srgb, var(--tm-accent) 18%, transparent);
}

/* 1-Brand-Mode: kein Toggle nötig, Platzierungen sind direkt sichtbar.
   Pill würde nur ungenutzten Click-Affordance schaffen. */
.checkout-row-details--no-toggle .checkout-row-details-summary {
    display: none;
}

/* Label-Text wird jetzt aus JS gerendert (Item-Count im String).
   Closed-State zeigt label-when-closed, Open-State label-when-open. */
.checkout-row-details-label .label-when-open { display: none; }
.checkout-row-details[data-open="true"] .checkout-row-details-label .label-when-closed { display: none; }
.checkout-row-details[data-open="true"] .checkout-row-details-label .label-when-open { display: inline; }

/* Smooth height animation via grid-template-rows 0fr ↔ 1fr.
   .checkout-row-details-body ist Grid-Container mit einer Track-Zeile;
   Inner-Div hat min-height:0 + overflow:hidden damit Content kollabiert. */
.checkout-row-details-body {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows var(--dur-base) var(--ease-out),
        opacity var(--dur-base) ease,
        padding-top var(--dur-base) ease;
}

.checkout-row-details[data-open="true"] .checkout-row-details-body {
    grid-template-rows: 1fr;
    opacity: 1;
    padding-top: 6px;
}

.checkout-row-details-body-inner {
    min-height: 0;
    overflow: hidden;
}

/* Inline addon picker (toggle boosters directly inside the cart card) */
.checkout-addon-picker {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--border-light, #e5e5e5);
}

.checkout-addon-picker-title {
    font-size: var(--t-2xs);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-muted);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.checkout-addon-picker-title i {
    color: var(--tm-accent);
    opacity: 0.7;
    font-size: var(--t-xs);
}

.checkout-addon-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.checkout-addon-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px 6px 8px;
    border-radius: 999px;
    border: 1.5px dashed color-mix(in srgb, var(--tm-accent) 32%, transparent);
    background: transparent;
    color: var(--text);
    font-size: var(--t-xs);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) ease;
    line-height: 1.3;
    font-family: inherit;
}

.checkout-addon-chip:hover {
    border-color: var(--tm-accent);
    background: color-mix(in srgb, var(--tm-accent) 6%, transparent);
    transform: translateY(-1px);
}

.checkout-addon-chip:active {
    transform: translateY(0);
}

.checkout-addon-chip i {
    font-size: var(--t-2xs);
    width: 16px;
    height: 16px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--tm-accent) 15%, transparent);
    color: var(--tm-accent);
    flex-shrink: 0;
}

.checkout-addon-chip.is-selected {
    border-style: solid;
    border-color: var(--tm-accent);
    background: color-mix(in srgb, var(--tm-accent) 12%, transparent);
    color: var(--tm-accent);
}

.checkout-addon-chip.is-selected i {
    background: var(--tm-accent);
    color: #fff;
}

.checkout-addon-chip-name {
    white-space: nowrap;
}

.checkout-addon-chip-price {
    opacity: 0.55;
    font-weight: 500;
    margin-left: 2px;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .checkout-addon-chips {
        gap: 5px;
    }
    .checkout-addon-chip {
        font-size: var(--t-2xs);
        padding: 5px 9px 5px 7px;
    }
}

/* Inline placements section (inside row-details, no nested accordion) */
.checkout-placements-section {
    margin: 8px 0 2px;
    padding: 9px;
    border: 1px solid color-mix(in srgb, var(--text) 12%, var(--border));
    border-radius: var(--radius-md);
    background: linear-gradient(145deg,
        color-mix(in srgb, var(--text) 4%, var(--panel-bg)),
        var(--panel-bg));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.checkout-placements-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: var(--t-2xs);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text);
    margin-bottom: 7px;
}

.checkout-placements-title::after {
    content: '';
    height: 1px;
    flex: 1;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--text) 18%, transparent),
        transparent);
}

.checkout-placements-section .checkout-placements-list {
    padding: 0;
    gap: 6px;
}

.checkout-placements-section .checkout-placements-list li {
    padding: 4px 7px;
    border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--text) 3%, transparent);
}

.checkout-placements-section .checkout-placements-list li i {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    color: var(--text-muted);
    background: color-mix(in srgb, var(--text) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
    opacity: 1;
}

.mockup-lightbox.checkout-mockup-lightbox {
    z-index: 10002;
}

.checkout-placement-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    padding: 4px 7px;
    border: 0;
    color: inherit;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.checkout-placements-section .checkout-placements-list li.has-preview {
    padding: 0;
    transition: border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast);
}

.checkout-placements-section .checkout-placements-list li.has-preview:hover,
.checkout-placements-section .checkout-placements-list li.has-preview:focus-within {
    border-color: color-mix(in srgb, var(--text) 24%, var(--border));
    background: color-mix(in srgb, var(--text) 7%, transparent);
    transform: translateY(-1px);
}

.checkout-placement-trigger:focus-visible {
    outline: 2px solid var(--text-muted);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

.checkout-placements-section .checkout-placements-list li .checkout-placement-preview-icon {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-left: auto;
    border: 0;
    background: none;
    opacity: 0.58;
    transition: opacity var(--dur-fast), transform var(--dur-fast);
}

.checkout-placements-section .checkout-placements-list li.has-preview:hover .checkout-placement-preview-icon,
.checkout-placement-trigger:focus-visible .checkout-placement-preview-icon {
    opacity: 1;
    transform: scale(1.1);
}

.checkout-overlay.pdf-capture-mode .checkout-placement-preview-icon {
    display: none;
}

.checkout-row-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.checkout-row-head strong {
    font-size: var(--t-sm);
    color: var(--text);
    flex: 1;
}

.checkout-row-tier {
    font-size: var(--t-2xs);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    padding: 2px 8px;
    border-radius: var(--radius-xl);
}

.checkout-row-price {
    font-size: var(--t-sm);
    font-weight: 700;
    color: var(--text);
    margin-left: auto;
}

.checkout-extra {
    display: flex;
    justify-content: space-between;
    font-size: var(--t-xs);
    color: var(--text-muted);
    margin-top: 6px;
    padding-left: 4px;
}

.checkout-extra span {
    font-weight: 500;
    color: var(--text);
}

.checkout-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4px 16px;
    flex-wrap: wrap;
    padding: 10px 16px;
    margin: 0;
    border-radius: var(--radius-md);
    background: var(--surface, #f8f8f8);
    border: 1px solid var(--border-light, #e5e5e5);
    min-width: 0;
    box-sizing: border-box;
}

/* Meta nimmt 100% → erzwingt Wrap auf Right-Block in narrow Modal.
   Bei breitem Modal (has-multi) flex: 1 1 auto = meta + right Side-by-Side. */
.checkout-total-meta {
    flex: 1 1 100%;
    min-width: 0;
}

.checkout-total-right {
    flex: 0 0 auto;
}

/* Bei Multibrand-Modal (>= 2 Brands, has-multi → wider) horizontal Layout. */
.checkout-modal.has-multi .checkout-total-meta {
    flex: 1 1 auto;
}

.checkout-total-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.checkout-total-label {
    font-size: var(--t-xs);
    color: var(--text);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.checkout-total-reach {
    font-size: var(--t-xs);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.checkout-total-reach strong,
.checkout-total .checkout-total-reach strong {
    color: var(--text);
    font-weight: 700;
    font-size: var(--t-sm);
    font-family: inherit;
    letter-spacing: 0;
}

.checkout-total-reach i {
    color: var(--tm-accent);
    opacity: 0.85;
}

.checkout-total-right {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

/* Bei multi-modal (wide) Stack column für Price + Once-Hint. */
.checkout-modal.has-multi .checkout-total-right {
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.checkout-total-once {
    font-size: var(--t-2xs);
    color: var(--text-muted);
    opacity: 0.85;
    letter-spacing: 0.01em;
}

/* Tier-Reichweite-Subline unter Paket-Header */
.checkout-line-reach {
    font-size: var(--t-xs);
    color: var(--text-muted);
    margin-top: 2px;
    margin-bottom: 2px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.checkout-line-reach strong {
    color: var(--text);
    font-weight: 700;
}

.checkout-line-reach i {
    color: var(--text-muted);
    opacity: 0.8;
    font-size: var(--t-2xs);
}

/* Bundle-Bonus-Hint zwischen Cards und Gesamtbetrag */
.checkout-bundle-hint {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin: 0 0 10px;
    background: color-mix(in srgb, var(--tm-accent) 8%, var(--surface, #f8f8f8));
    border: 1px dashed color-mix(in srgb, var(--tm-accent) 35%, transparent);
    border-radius: var(--radius-md);
    font-size: var(--t-xs);
    color: var(--text);
}

.checkout-bundle-hint i {
    color: var(--tm-accent);
    font-size: var(--t-base);
    flex-shrink: 0;
}

/* Action-Row: Total-Block links, Submit-Button mittig im Rest-Space. */
.checkout-actions-row {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
}

.checkout-actions-row .checkout-total {
    flex: 0 1 auto;
    min-width: 0;
}

.checkout-actions-buttons {
    display: flex;
    gap: 10px;
    align-items: center;
    flex: 1;
    justify-content: center;
}

@media (max-width: 720px) {
    .checkout-actions-row {
        flex-direction: column;
        align-items: stretch;
    }
    .checkout-actions-row .checkout-total {
        flex: 1 1 auto;
    }
    .checkout-actions-buttons {
        justify-content: center;
    }
}

.checkout-risk-bullets {
    display: flex;
    gap: 16px;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-top: 8px;
    font-size: var(--t-xs);
    color: var(--text-muted);
}

.checkout-risk-bullet {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.checkout-risk-bullet i {
    color: var(--tm-accent);
    font-size: var(--t-2xs);
    opacity: 0.85;
}

.checkout-total span {
    font-size: var(--t-xs);
    color: var(--text);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* ─── HOTFIX: Footer Dark Mode Overrides ─── */
[data-theme="dark"] .footer,
[data-theme="dark"] .footer-bottom,
[data-theme="dark"] .footer-meta {
    background-color: var(--panel-bg) !important;
    border-color: var(--border) !important;
    color: var(--text-muted) !important;
    box-shadow: none !important;
}

[data-theme="dark"] .footer-meta a {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .footer-meta a:hover {
    color: var(--text) !important;
}

.checkout-total strong {
    font-family: var(--font-heading);
    font-size: var(--t-xl);
    font-weight: 700;
    color: var(--tm-accent);
    letter-spacing: -0.02em;
    line-height: 1;
}

.checkout-label {
    display: block;
    font-size: var(--t-xs);
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px;
}

.checkout-label i {
    color: var(--text-muted);
    margin-right: 4px;
}

.checkout-input {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--border-light, #ddd);
    border-radius: var(--radius-md);
    font-size: var(--t-sm);
    background: var(--surface, #f8f8f8);
    color: var(--text);
    outline: none;
    transition: border-color var(--dur-fast);
    box-sizing: border-box;
}

.checkout-input:focus {
    border-color: var(--accent);
}

.checkout-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 24px 16px;
    flex-shrink: 0;
    border-top: 1px solid var(--border-light, #eee);
    background: var(--panel-bg, #fff);
    align-items: center;
}

/* Reichweite-Summary nur bei Multi-Card über CTA. Kompakte Single-Liner. */
.checkout-summary-line {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--t-sm);
    color: var(--text-muted);
}
.checkout-summary-line i {
    color: var(--text-muted);
    opacity: 0.85;
}
.checkout-summary-line strong {
    color: var(--text);
    font-weight: 700;
}

/* Summary-Card: dunkles "Bottom Line"-Panel. Bewusst KEINE Brand-Card-
   Optik, sondern eine eigene Informationsebene: dunkel + solide statt
   blass. Fuellt im Grid die letzte Zelle, liegt also auch im PDF drin. */
.checkout-summary-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    text-align: center;
    padding: 24px 22px;
    border-radius: var(--radius-md);
    background: linear-gradient(155deg, #1b2d49, #0e1a2c);
    border: 1px solid rgba(255, 255, 255, 0.09);
    /* Auf Card-Niveau statt 0 6px 22px: der grosse Drop-Shadow war das
       Signal, das die Bank ueber den Cards schweben statt sitzen liess. */
    box-shadow: var(--shadow-2);
}
/* Der Bank-Grund ist fest kodiert, der Modal-Grund nicht. Im Dark-Mode ist
   --panel-bg #161b22, die Bank-Unterkante #0e1a2c also dunkler als ihr
   Grund: sie verschwindet. Dort muss sie heller aufliegen. Gilt genauso fuer
   die Single-Brand-Box im Footer, die denselben Gradient benutzt. */
[data-theme="dark"] .checkout-summary-card,
[data-theme="dark"] .checkout-share-result--solo-dark {
    background: linear-gradient(155deg, #26324a, #1a2434);
    border-color: rgba(255, 255, 255, 0.14);
}
/* Black-Week: derselbe Navy-Verlauf wie im generischen Dark-Theme kollidiert
   mit dem reinen Schwarz/Gold-Schema (--surface/--bg sind hier neutral warm-
   schwarz, kein Blauton). Neutraler Schwarzverlauf + Gold-Hairline statt
   Blau, damit die Bank Teil derselben Flaechenfamilie bleibt wie die
   Brand-Cards darueber. */
[data-profile="black-week"] .checkout-summary-card,
[data-profile="black-week"] .checkout-share-result--solo-dark {
    background: linear-gradient(155deg, #1a1a1a, #0a0a0a);
    border-color: rgba(255, 215, 0, 0.16);
}
/* Bottom-Line-Band: Summary + Teilen als eigene volle-Breite-Bank UNTER
   dem Brand-Grid (nicht mehr als Grid-Zelle). Vermeidet das Eckzellen-
   Whitespace-Problem bei ungerader Brand-Zahl an der Wurzel: die Card nimmt
   nicht mehr an der Equal-Height-Row teil. Bleibt im .checkout-body, also
   weiterhin im PDF-Export. */
.checkout-bottomline {
    width: 100%;
    margin-top: 10px;
}
/* Bottom-Line als kompakte horizontale Bank: EINE Reihe (Recap | Divider |
   Teilen) statt zweistöckig. Slab volle Breite (Anker zum Grid), Inhalt
   gecapped + zentriert -> niedrige Bar (statt aufgeblähtem Turm), füllt 980px
   fast voll und sitzt bei 1280px als gerahmte Leiste statt leerer Fläche. */
.checkout-bottomline--bar {
    padding: 14px 24px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.checkout-bottomline-inner {
    width: 100%;
    max-width: 940px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: center;
}
.checkout-bottomline-recap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}
.checkout-bottomline-divider {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.13);
}

/* ── Terms-Block in der Gesamtbetrag-Bank ──────────────────────────
   Im Live-Modal belegt die Teilen-Box die rechte Spalte der Bank, dort bleibt
   dieser Block aus (die Zeilen stehen unten im Footer). Sichtbar wird er genau
   dort, wo die Teilen-Box FEHLT: im PDF-Capture (per CSS ausgeblendet) und auf
   der geteilten Seite (aus dem Markup gestrippt). Ohne ihn stuende die groessere
   Haelfte der Bank leer, mit einem Trennstrich, der nichts mehr trennt.
   Helle Schrift: die Bank ist in beiden Themes dunkel, --text-muted waere dort
   unlesbar. */
.checkout-bottomline-terms {
    display: none;
}
.checkout-overlay.pdf-capture-mode .checkout-bottomline-terms,
.offer-static .checkout-bottomline-terms {
    display: block;
}
.checkout-bottomline-terms .checkout-no-obligation {
    color: rgba(255, 255, 255, 0.92);
    justify-content: center;
    margin: 0 0 6px;
}
.checkout-bottomline-terms .checkout-price-basis {
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    margin: 0;
    opacity: 1;
}
/* Der Footer-Streifen unter der Bank traegt dieselben zwei Zeilen. Auf der
   geteilten Seite sind sie jetzt in der Bank -> Streifen weg. Nur wenn das
   gespeicherte Markup den Terms-Block auch wirklich hat (Klasse setzt der
   Server): Shares von vor dieser Aenderung behalten so ihren Hinweistext. */
.offer-bankterms .checkout-actions {
    display: none;
}
.checkout-bottomline--bar .checkout-summary-card-price { gap: 2px; }
.checkout-bottomline--bar .checkout-summary-card-total { font-size: 2rem; }

/* --corner: bei ungerader Brand-Zahl sitzt das Band als dunkle Karte in der
   freien Grid-Ecke neben der letzten Card (statt die Card mittig schweben zu
   lassen). Vertikal gestapelt, Inhalt vertikal zentriert, füllt die
   Equal-Height-Zellenhöhe der Reihe. */
.checkout-bottomline--corner {
    margin-top: 0;
    justify-content: center;
    padding: 24px 24px;
}
.checkout-bottomline--corner .checkout-bottomline-inner {
    max-width: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.checkout-bottomline--corner .checkout-summary-card-total { font-size: 2.4rem; }
.checkout-bottomline--corner .checkout-summary-card-meta {
    width: auto;
    border-top: none;
    padding-top: 0;
}
/* Ab 721px: --bar wird 3-Spalten-Bank (Recap | fading Divider | Teilen).
   Teilen-Spalte bewusst breiter (trägt State b = Input ohne Reflow-Sprung).
   --corner bleibt vertikal gestapelt (geerbte 1fr-Regeln). */
@media (min-width: 721px) {
    /* Die Recap-Spalte darf nicht unter ihre Inhaltsbreite gedrueckt werden.
       Mit minmax(0, 0.85fr) bekam sie bei ZWEI Marken nur 340px, waehrend
       Betrag plus Staffel-Zeilen 407px brauchten: die nowrap-Zeilen liefen aus
       der Spalte, die Fussnote brach mitten im Satz um. min-content nimmt die
       nowrap-Zeilen als Untergrenze, der Teilen-Block rechts gibt den Platz
       ab (er ist Fliesstext und vertraegt es). */
    .checkout-bottomline--bar .checkout-bottomline-inner {
        grid-template-columns: minmax(min-content, 0.85fr) 1px minmax(0, 1.15fr);
        gap: 0 40px;
    }
    .checkout-bottomline--bar .checkout-bottomline-divider {
        width: 1px;
        height: auto;
        align-self: stretch;
        background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0));
    }
    .checkout-bottomline--bar .checkout-bottomline-recap {
        align-items: flex-start;
        text-align: left;
        gap: 3px;
    }
    .checkout-bottomline--bar .checkout-summary-card-price { align-items: flex-start; }
    .checkout-bottomline--bar .checkout-summary-card-meta {
        width: auto;
        border-top: none;
        padding-top: 4px;
    }
    .checkout-bottomline--bar .checkout-bottomline-terms {
        align-self: center;
    }
    .checkout-bottomline--bar .checkout-bottomline-terms .checkout-no-obligation {
        justify-content: flex-start;
    }
    .checkout-bottomline--bar .checkout-bottomline-terms .checkout-price-basis {
        text-align: left;
    }
    .checkout-bottomline--bar .checkout-share-result--in-card {
        border-top: none;
        margin: 0;
        padding: 0;
        align-items: flex-start;
        text-align: left;
    }
    .checkout-bottomline--bar .checkout-share-head { justify-content: flex-start; }
    .checkout-bottomline--bar .checkout-share-row { justify-content: flex-start; }
    .checkout-bottomline--bar .checkout-share-cta-row { justify-content: flex-start; }
    .checkout-bottomline--bar .checkout-share-sub,
    .checkout-bottomline--bar .checkout-share-action,
    .checkout-bottomline--bar .checkout-share-row,
    .checkout-bottomline--bar .checkout-hint--in-card {
        max-width: 480px;
        text-align: left;
    }

    /* ─── Hoehen-Diaet der Bank ───────────────────────────────
       Recap- und Share-Spalte sind fast gleich hoch (gemessen 155px zu
       147px). Nur eine Seite zu kuerzen bringt daher nichts, weil die
       andere die Hoehe weiter diktiert. Beide muessen schrumpfen. Es
       wird kein Text entfernt, nur die Luft dazwischen. */

    /* Recap: die Nebenrechnung neben den Total statt darunter.
       Zeile 1 = Label, Zeile 2 = Total | erste Nebenzeile, weitere
       Nebenzeilen stapeln in Spalte 2, letzte Zeile = Rabatt-Badge.
       Spart gegenueber der reinen Untereinander-Anordnung eine Textzeile.

       Spalte 2 muss JEDE Nebenzeile explizit aufnehmen. Als diese Regel
       entstand, gab es dort nur die Note; die spaeter ergaenzten Staffel-
       Zeilen fielen ins Auto-Placement und landeten neben dem Total in
       der schmalen Spalte, wo sie mitten im Betrag umbrachen ("-650" /
       "€") und die Note aus ihrer Zeile draengten. Sichtbar war das nur
       bei gerader Markenzahl (2, 4), weil nur dort das --bar-Layout
       greift; bei 3 Marken stapelt --corner ohnehin vertikal.
       Wer hier eine neue Zeile ergaenzt, traegt sie mit ein.

       Spaltenbreiten: BEIDE nach Inhalt, und der Betrag bekommt seinen Platz
       zuerst. Mit "auto max-content" bediente sich die Nebenspalte zuerst und
       drueckte den Betrag auf 123px - ein fuenfstelliger Preis brach dann
       dreizeilig um ("13.498 €" ueber "10.123 €"). Das ist ungleich schlimmer
       als eine umgebrochene Fussnote: der Betrag ist die Hauptaussage der
       Karte. Reicht die Breite fuer beide Spalten nicht, gibt der Teilen-Block
       rechts nach (siehe .checkout-bottomline-inner). */
    .checkout-bottomline--bar .checkout-summary-card-price {
        display: grid;
        grid-template-columns: max-content max-content;
        align-items: baseline;
        column-gap: 12px;
        row-gap: 2px;
    }
    .checkout-bottomline--bar .checkout-summary-card-label { grid-column: 1 / -1; }
    /* Streichpreis und Betrag gehoeren in EINE Zeile ("vorher/jetzt"), sonst
       liest man zwei Betraege untereinander.
       Der Betrag ist mit 2rem hoch, die Nebenzeilen sind es nicht: stuende er
       nur in seiner eigenen Zeile, saesse die erste Nebenzeile an seiner
       Grundlinie und die naechste erst darunter - gemessen 92px Luecke
       zwischen "Multibrand-Rabatt" und "1 Brand mehr". Er spannt deshalb ueber
       alle drei Nebenzeilen, die so als kompakter Block zusammenstehen. Fehlt
       eine davon (kein Upsell ab 4 Marken), bleibt die Spur leer und kostet
       keine Hoehe. */
    .checkout-bottomline--bar .checkout-summary-card-total {
        grid-column: 1;
        grid-row: span 3;
        align-self: center;
        white-space: nowrap;
    }
    /* Spalte 2 ist die Abzugsrechnung: Grundrabatt, Staffel und, falls es eine
       hoehere Stufe gibt, der Upsell. */
    .checkout-bottomline--bar .checkout-bundle-line,
    .checkout-bottomline--bar .checkout-bundle-next { grid-column: 2; }
    /* Betrag und Label bleiben in ihrer Zeile beisammen. */
    .checkout-bottomline--bar .checkout-bundle-line,
    .checkout-bottomline--bar .checkout-bundle-next {
        white-space: nowrap;
    }
    /* Die Fussnote gehoert zum Gesamtbetrag, nicht zur Abzugsspalte: in Spalte 2
       stand sie unter der letzten Rabattzeile und las sich, als gaebe es DEN
       RABATT einmalig. Ueber die volle Breite gesetzt sitzt sie unter dem Preis,
       den sie meint, und hat dort Platz genug, um nicht umzubrechen. */
    .checkout-bottomline--bar .checkout-summary-card-note {
        grid-column: 1 / -1;
        margin-top: 2px;
        white-space: nowrap;
    }

    /* Share-Spalte entdichten. */
    .checkout-bottomline--bar .checkout-share-head { margin-bottom: 5px; }
    .checkout-bottomline--bar .checkout-share-sub { margin-bottom: 7px; }
    .checkout-bottomline--bar .checkout-hint--in-card { margin-top: 6px; }
    .checkout-bottomline--bar .checkout-share-create,
    .checkout-bottomline--bar .checkout-pdf-link--onshare {
        padding-block: 8px;
    }
}
/* Anker-Icon oben, parallel zu den Logo-Bannern der Brand-Cards. */
.checkout-summary-card-icon {
    font-size: var(--t-lg);
    color: rgba(255, 255, 255, 0.45);
}
.checkout-summary-card-price {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}
.checkout-summary-card-label {
    font-size: var(--t-2xs);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.55);
}
/* Total = lauteste Zahl im Modal: gross, weiss, hoher Kontrast. */
.checkout-summary-card-total {
    font-family: var(--font-heading);
    font-size: var(--t-3xl);
    font-weight: 700;
    line-height: 1.05;
    color: #fff;
}
.checkout-summary-card-total .checkout-strike {
    font-size: var(--t-base);
    color: rgba(255, 255, 255, 0.5);
}
/* Black-Week: der Gesamtbetrag ist die lauteste Zahl im Modal - dieselbe
   Rolle wie .offer-bar-total-price und .tier-btn.active .tier-price auf der
   Hauptseite, beide gold. Dezenterer Glow als der Tier-Button (dort einzelne
   grosse Zahl in ruhiger Flaeche), weil die Bank zusaetzlich Rabatt-/
   Staffelzeilen direkt daneben traegt. */
[data-profile="black-week"] .checkout-summary-card-total {
    color: #FFD700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.25);
}
.checkout-summary-card-note {
    font-size: var(--t-xs);
    color: rgba(255, 255, 255, 0.6);
}
/* Meta-Block durch Divider abgesetzt, gibt der Card Struktur. */
.checkout-summary-card-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding-top: 13px;
    border-top: 1px solid rgba(255, 255, 255, 0.13);
}
.checkout-summary-card .checkout-summary-line {
    color: rgba(255, 255, 255, 0.62);
}
.checkout-summary-card .checkout-summary-line i {
    color: rgba(255, 255, 255, 0.45);
}
.checkout-summary-card .checkout-summary-line strong {
    color: #fff;
}
/* Next-Step-Hinweis unter den Buttons: macht den Copy-Flow explizit. */
.checkout-hint {
    font-size: var(--t-xs);
    color: var(--text-muted);
    text-align: center;
    margin: 2px 0 0;
    line-height: 1.45;
    max-width: 440px;
}
/* Framing-Headline im Header: Orientierung, was das Modal zeigt. */
.checkout-header h2.checkout-header-title {
    margin-top: 8px;
}

/* Submit-Button: Icon + Label + Arrow. */
.checkout-submit {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* Action-Row mit PDF-Btn (secondary) + Submit (primary) nebeneinander. */
.checkout-actions-btns {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

/* PDF-Link: Premium-Outline-Button. Sekundär zur Primary-CTA aber
   eigenständig wertig (Glass-BG, Accent-Hover-Lift). */
.checkout-pdf-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid color-mix(in srgb, var(--tm-accent) 28%, transparent);
    background: color-mix(in srgb, var(--tm-accent) 5%, var(--panel-bg, #fff));
    color: var(--text);
    font-size: var(--t-sm);
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
    transition: transform var(--dur-fast), box-shadow var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
    text-decoration: none;
    box-shadow: var(--shadow-2);
}
.checkout-pdf-link:hover {
    border-color: var(--tm-accent, #e94d97);
    background: color-mix(in srgb, var(--tm-accent) 10%, var(--panel-bg, #fff));
    color: var(--tm-accent, #e94d97);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--tm-accent) 20%, transparent);
}
.checkout-pdf-link:active {
    transform: translateY(0);
}
.checkout-pdf-link:disabled {
    opacity: 0.55;
    cursor: wait;
    transform: none;
}
.checkout-pdf-link i.fa-file-pdf {
    color: var(--tm-accent, #e94d97);
    font-size: var(--t-base);
}
.checkout-pdf-link .fa-spinner {
    color: var(--tm-accent, #e94d97);
}

/* Aktions-Zeile im Teilen-Block: Primary (Link erstellen) + sekundaerer
   PDF-Button nebeneinander. Wrappt bei Platzmangel; nach dem Link-Erstellen
   waechst die .checkout-share-action (Link-Feld) und schiebt PDF darunter. */
.checkout-share-cta-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    max-width: 480px;
}
/* Hoehere Spezifitaet als .checkout-share-result--in-card .checkout-share-
   action (width:100%), damit die Action VOR dem Link-Erstellen auf
   Button-Breite bleibt und der PDF-Button daneben passt. Nach dem Erstellen
   waechst sie auf die Link-Feld-Breite und PDF wrappt darunter. */
.checkout-share-result .checkout-share-cta-row .checkout-share-action {
    width: auto;
    max-width: none;
    margin: 0;
}
.checkout-share-cta-row .checkout-share-input {
    min-width: 260px;
}
/* PDF-Button auf dunklem Navy-Grund (Teilen-Block): Ghost-Variante statt
   der hellen Footer-Optik. Sekundaer neben dem Magenta-Primary, PDF-Icon
   bleibt im Brand-Accent als Farbtupfer. Hoehe an .checkout-share-create
   angeglichen (9px 16px). */
.checkout-pdf-link.checkout-pdf-link--onshare {
    padding: 9px 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
    box-shadow: none;
}
.checkout-pdf-link.checkout-pdf-link--onshare:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.42);
    color: #fff;
    box-shadow: var(--shadow-2);
}
.checkout-pdf-link.checkout-pdf-link--onshare i.fa-file-pdf {
    color: var(--tm-accent-light, #E84DA3);
}

/* #10 Teilen-Button (sekundaer, wie PDF-Link) + Share-Ergebnis-Box */
.checkout-share-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid color-mix(in srgb, var(--tm-accent) 28%, transparent);
    background: color-mix(in srgb, var(--tm-accent) 5%, var(--panel-bg, #fff));
    color: var(--text);
    font-size: var(--t-sm);
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
    transition: transform var(--dur-fast), box-shadow var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
    box-shadow: var(--shadow-2);
}
.checkout-share-link:hover {
    border-color: var(--tm-accent, #e94d97);
    background: color-mix(in srgb, var(--tm-accent) 10%, var(--panel-bg, #fff));
    color: var(--tm-accent, #e94d97);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--tm-accent) 20%, transparent);
}
.checkout-share-link:active { transform: translateY(0); }
.checkout-share-link:disabled { opacity: 0.55; cursor: wait; transform: none; }
.checkout-share-link i { color: var(--tm-accent, #e94d97); font-size: 1rem; }

.checkout-share-result {
    width: 100%;
    max-width: 460px;
    margin: 0 auto 14px;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--tm-accent) 22%, transparent);
    background: color-mix(in srgb, var(--tm-accent) 6%, var(--panel-bg, #fff));
    border-radius: var(--radius-md);
}
.checkout-share-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: var(--t-sm);
    margin-bottom: 10px;
}
.checkout-share-head i { color: var(--tm-accent); }
.checkout-share-row { display: flex; gap: 8px; }
.checkout-share-input {
    flex: 1;
    min-width: 0;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--input-bg, #fff);
    color: var(--text);
    font-size: var(--t-xs);
}
.checkout-share-copy {
    flex: none;
    padding: 9px 14px;
    border: none;
    border-radius: 8px;
    background: var(--tm-accent);
    color: #fff;
    font-weight: 600;
    font-size: var(--t-xs);
    cursor: pointer;
}
.checkout-share-valid {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--text-muted);
}
.checkout-share-valid i { color: var(--tm-accent); opacity: 0.85; }
/* Pitch-Hinweis nach dem Link-Erstellen: "perfekt fuers Pitch-Deck oder um
   ihn uns zu schicken". Erscheint gestaffelt beim smoothen Ausfahren. */
.checkout-share-pitch {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 8px;
    font-size: var(--t-xs);
    font-weight: 600;
    line-height: 1.35;
    color: var(--text-muted);
    text-align: center;
}
.checkout-share-pitch i { color: var(--tm-accent); opacity: 0.9; flex-shrink: 0; }
.checkout-share-sub {
    margin: 0 0 12px;
    font-size: var(--t-xs);
    color: var(--text-muted);
    line-height: 1.4;
}
.checkout-share-create {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: none;
    border-radius: 9px;
    background: var(--tm-accent);
    color: #fff;
    font-weight: 600;
    font-size: var(--t-sm);
    cursor: pointer;
    transition: transform var(--dur-fast), box-shadow var(--dur-fast), opacity var(--dur-fast);
    box-shadow: var(--shadow-1);
}
.checkout-share-create:hover { transform: translateY(-1px); }
.checkout-share-create:disabled { opacity: 0.6; cursor: wait; transform: none; }

/* Teilen-Block IN der dunklen Summary-Card (2+ Brands): kein eigener Box-
   Chrome mehr, sondern unterster Abschnitt mit Divider. Magenta-Button poppt
   auf dunklem Grund = klarer Primary statt blasser Footer-Insel. width:100% +
   flex:0 0 auto erzwingt volle Breite/Umbruch sowohl im vertikalen (ungerade
   Brands) als auch im horizontalen Card-Layout (gerade Brands). */
.checkout-share-result--in-card {
    width: 100%;
    flex: 0 0 auto;
    max-width: none;
    margin: 0;
    padding: 16px 4px 2px;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 0;
    background: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
/* Einzel-Fall (1 Brand): Teilen-Block als eigenständige dunkle Bottom-Bar
   (gleiche Navy-Slab wie das Multi-Band, ohne Preis). Magenta-Button poppt
   auf dunklem Grund = konsistenter Primary über beide Modi. Die inneren
   Hell-auf-Dunkel-Styles teilt sie sich mit --in-card. */
.checkout-share-result--solo-dark {
    width: 100%;
    max-width: 540px;
    margin: 6px auto 0;
    padding: 20px 22px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--radius-md);
    background: linear-gradient(155deg, #1b2d49, #0e1a2c);
    /* Analog zur Bottom-Line-Bank: sitzen statt schweben. */
    box-shadow: var(--shadow-2);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.checkout-share-result--in-card .checkout-share-head,
.checkout-share-result--solo-dark .checkout-share-head {
    justify-content: center;
    color: #fff;
    margin-bottom: 7px;
}
.checkout-share-result--in-card .checkout-share-sub,
.checkout-share-result--solo-dark .checkout-share-sub {
    color: rgba(255, 255, 255, 0.62);
    max-width: 430px;
}
.checkout-share-result--in-card .checkout-share-action,
.checkout-share-result--solo-dark .checkout-share-action {
    width: 100%;
    max-width: 440px;
}
.checkout-share-result--in-card .checkout-share-row,
.checkout-share-result--solo-dark .checkout-share-row { justify-content: center; }
.checkout-share-result--in-card .checkout-share-input,
.checkout-share-result--solo-dark .checkout-share-input {
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(255, 255, 255, 0.2);
    color: #1b2d49;
}
.checkout-share-result--in-card .checkout-share-pitch,
.checkout-share-result--solo-dark .checkout-share-pitch { color: rgba(255, 255, 255, 0.72); }
.checkout-share-result--in-card .checkout-share-valid,
.checkout-share-result--solo-dark .checkout-share-valid {
    justify-content: center;
    color: rgba(255, 255, 255, 0.72);
}
.checkout-share-result--in-card .checkout-share-valid i,
.checkout-share-result--solo-dark .checkout-share-valid i { opacity: 1; }
.checkout-hint--in-card {
    color: rgba(255, 255, 255, 0.5);
    margin: 11px 0 0;
    max-width: 430px;
}

/* Brand-Export-Mode: Sticky-UI während Portal-Capture ausblenden,
   damit nichts ins gerenderte Brand-PDF rutscht. */
body.pdf-brand-export-active .offer-bar,
body.pdf-brand-export-active .help-fab,
body.pdf-brand-export-active .pdf-export-fab,
body.pdf-brand-export-active .news-ticker,
body.pdf-brand-export-active .sticky-cta-bar,
body.pdf-brand-export-active .scroll-progress,
body.pdf-brand-export-active .tool-bar,
body.pdf-brand-export-active .floating-fab,
body.pdf-brand-export-active .lang-switcher,
body.pdf-brand-export-active .theme-toggle {
    display: none !important;
}

/* PDF-Capture-Mode: Modal für html2canvas-Render aufbereiten.
   Backdrop-Blur + Mask entfernen (canvas rendert sie nicht sauber).
   Modal-Höhe auto + scroll off damit ganzer Content captured wird. */
.checkout-overlay.pdf-capture-mode {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: #ffffff !important;
}
.checkout-overlay.pdf-capture-mode .checkout-modal {
    max-height: none !important;
    overflow: visible !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 0 !important;
}
/* Dark-Mode-Export: der helle Rahmen trennt in Light das weisse Modal von der
   weissen Seite, im Dark-Mode wuerde er als heller Rahmen im dunklen Dokument
   schweben (die Seite ist dann panel-bg). Dort neutralisieren. */
[data-theme="dark"] .checkout-overlay.pdf-capture-mode .checkout-modal,
[data-profile="black-week"] .checkout-overlay.pdf-capture-mode .checkout-modal {
    border-color: transparent !important;
}
.checkout-overlay.pdf-capture-mode .checkout-body {
    overflow: visible !important;
    max-height: none !important;
}
/* Der Inhaltsbereich steht in den dunklen Themes bewusst dunkler als das Panel
   (#0d1117 gegen #161b22, siehe .checkout-body oben), damit die Karten davor
   hervortreten. Auf dem Bildschirm traegt das, im PDF wird daraus ein hartes
   Band quer durchs Dokument: bei so dunklen Werten sind diese 9 Stufen rund
   50 % relativer Helligkeitsunterschied, und es fehlt der abgedunkelte
   Seitenhintergrund, der den Absatz sonst auffaengt. Fuer den Export daher
   derselbe Grund wie Kopf und Fusszeile. Die Karten (.checkout-row, #21262d)
   behalten ihre eigene Flaeche und heben sich weiterhin ab.
   Nur die dunklen Themes: in Light ist der Unterschied dieselben ~10 Stufen,
   aber auf nahezu weissem Grund und damit praktisch unsichtbar. */
[data-theme="dark"] .checkout-overlay.pdf-capture-mode .checkout-body,
[data-profile="black-week"] .checkout-overlay.pdf-capture-mode .checkout-body {
    background: transparent !important;
}
.checkout-overlay.pdf-capture-mode .checkout-actions {
    /* PDF-Btn + Submit aus Print-Output ausblenden – nur Auswahl + Preis. */
    display: none !important;
}
.checkout-overlay.pdf-capture-mode .checkout-share-result {
    /* Teilen-Block sitzt bei 2+ Brands in der Summary-Card (im Grid, nicht im
       Footer) -> explizit aus dem PDF nehmen, sonst landet er im Export. */
    display: none !important;
}
.checkout-overlay.pdf-capture-mode .checkout-close {
    display: none !important;
}
.checkout-overlay.pdf-capture-mode .checkout-hint {
    display: none !important;
}
.checkout-overlay.pdf-capture-mode .checkout-row-remove,
.checkout-overlay.pdf-capture-mode .checkout-line-remove {
    display: none !important;
}

/* ══════════════════════════════════════════════════════════════
   AUTO-FIT: Verdichtungs-Stufen gegen den Scrollbalken
   Gesetzt von _fitCheckoutHeight() (offer-bar.js), NUR wenn der Inhalt sonst
   überhängt. Stufe 2 baut auf Stufe 1 auf. Reine Dichte, kein Inhalt geht
   verloren.
   ══════════════════════════════════════════════════════════════ */

/* ── Stufe 1: Banner niedriger, Kopf/Fuß und Reichweite enger ── */
.checkout-modal.is-compact-1 .checkout-packages--expanded .checkout-row-banner {
    height: 104px;
}
.checkout-modal.is-compact-1 .checkout-packages--expanded .checkout-row-banner img {
    max-height: 74px;
}
.checkout-modal.is-compact-1 .checkout-header {
    padding-top: 10px;
    padding-bottom: 8px;
}
.checkout-modal.is-compact-1 .checkout-actions {
    padding-top: 8px;
    padding-bottom: 8px;
}
.checkout-modal.is-compact-1 .checkout-reach {
    margin-bottom: 8px;
}
.checkout-modal.is-compact-1 .checkout-reach-stats {
    padding-bottom: 6px;
}
.checkout-modal.is-compact-1 .checkout-reach-val {
    font-size: var(--t-sm);
}
.checkout-modal.is-compact-1 .checkout-reach-lbl {
    font-size: var(--t-2xs);
}
.checkout-modal.is-compact-1 .checkout-reach-social {
    margin-top: 6px;
    font-size: var(--t-2xs);
}
.checkout-modal.is-compact-1 .checkout-placements-list {
    gap: 6px 12px;
}

/* ── Stufe 2: zusätzlich Banner klein, Listen und Abstände dicht ── */
.checkout-modal.is-compact-2 .checkout-packages--expanded .checkout-row-banner {
    height: 76px;
}
.checkout-modal.is-compact-2 .checkout-packages--expanded .checkout-row-banner img {
    max-height: 54px;
}
.checkout-modal.is-compact-2 .checkout-header {
    padding-top: 6px;
    padding-bottom: 4px;
}
.checkout-modal.is-compact-2 .checkout-logo {
    height: 26px;
}
.checkout-modal.is-compact-2 .checkout-header-title {
    font-size: var(--t-md);
}
.checkout-modal.is-compact-2 .checkout-placements-list {
    gap: 4px 10px;
}
.checkout-modal.is-compact-2 .checkout-placements-list li {
    font-size: var(--t-xs);
}
.checkout-modal.is-compact-2 .checkout-row-body {
    padding-top: 8px;
    padding-bottom: 8px;
}
.checkout-modal.is-compact-2 .checkout-lines {
    gap: 2px;
}
.checkout-modal.is-compact-2 .checkout-reach-social {
    margin-top: 4px;
}
.checkout-modal.is-compact-2 .checkout-placements-section {
    margin-top: 6px;
    padding: 7px;
}
.checkout-modal.is-compact-2 .checkout-placements-section .checkout-placements-list li {
    padding-block: 3px;
}
.checkout-modal.is-compact-2 .checkout-placements-section .checkout-placements-list li i {
    width: 18px;
    height: 18px;
}
/* ── Stufe 3: letzte Reserve für kleine Bildschirme ── */
.checkout-modal.is-compact-3 {
    /* Der Rahmen darf mehr vom Fenster nehmen, bevor Inhalt gequetscht wird. */
    max-height: 94vh;
}
.checkout-modal.is-compact-3 .checkout-packages--expanded .checkout-row-banner {
    height: 58px;
}
.checkout-modal.is-compact-3 .checkout-packages--expanded .checkout-row-banner img {
    max-height: 42px;
}
.checkout-modal.is-compact-3 .checkout-logo {
    height: 22px;
}
.checkout-modal.is-compact-3 .checkout-header-title {
    font-size: var(--t-base);
}
.checkout-modal.is-compact-3 .checkout-header {
    padding-top: 4px;
    padding-bottom: 3px;
}
.checkout-modal.is-compact-3 .checkout-placements-list li {
    font-size: var(--t-xs);
}
.checkout-modal.is-compact-3 .checkout-placements-list {
    gap: 3px 8px;
}
.checkout-modal.is-compact-3 .checkout-placements-title {
    margin-bottom: 4px;
}
.checkout-modal.is-compact-3 .checkout-reach-val {
    font-size: var(--t-xs);
}
.checkout-modal.is-compact-3 .checkout-reach-lbl {
    font-size: 0.54rem;
}
.checkout-modal.is-compact-3 .checkout-row-body {
    padding-top: 6px;
    padding-bottom: 6px;
}
.checkout-modal.is-compact-3 .checkout-actions {
    padding-top: 5px;
    padding-bottom: 5px;
}
.checkout-modal.is-compact-3 .checkout-bottomline--bar {
    padding-top: 10px;
    padding-bottom: 10px;
}
.checkout-modal.is-compact-3 .checkout-packages--expanded {
    gap: 8px;
    margin-bottom: 6px;
}
.checkout-modal.is-compact-3 .checkout-bottomline {
    margin-top: 6px;
}
.checkout-modal.is-compact-3 .checkout-reach {
    margin-bottom: 6px;
}
.checkout-modal.is-compact-3 .checkout-body {
    padding-top: 8px;
    padding-bottom: 8px;
}

/* Bewusst KEIN display:none in den Stufen: der PDF-Export snapshottet dieses
   Modal samt Klasse – versteckter Inhalt waere sonst auch aus dem Angebot
   verschwunden. Verdichtet wird nur, weggelassen nie. */

/* Preis-Stempel: Erstelldatum + Gültigkeit + Preis-Grundlage. Nur im PDF, weil
   das Modal die Infos im Footer trägt – und der Footer ist im Export aus.
   Befüllt von _fillCheckoutPdfStamp() (offer-bar.js). */
.checkout-pdf-stamp {
    display: none;
}
.checkout-overlay.pdf-capture-mode .checkout-pdf-stamp {
    display: block;
    padding: 16px 26px 20px;
    border-top: 1px solid var(--border-light);
    text-align: center;
}
/* Preishinweis per Admin-Toggle aus -> leerer Stempel. Ohne :empty bliebe ein
   leerer Kasten samt Trennlinie im PDF stehen. */
.checkout-overlay.pdf-capture-mode .checkout-pdf-stamp:empty {
    display: none;
}
.checkout-pdf-stamp-line,
.checkout-pdf-stamp-note {
    display: block;
    font-size: var(--t-xs);
    line-height: 1.5;
    color: var(--text-muted);
}
.checkout-pdf-stamp-line {
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
}

/* ══════════════════════════════════════════════════════════════
   FIRMEN-FUSSZEILE (company.js)
   Erscheint auf allem, was das Kit verlässt: im Checkout-PDF und auf der
   öffentlichen Share-Seite /o/:token. Im Live-Warenkorb bleibt sie aus – der
   ist kein Dokument, dort wäre das Impressum nur Rauschen.
   Farben über die Theme-Variablen, weil der PDF-Export das Theme übernimmt
   (dunkles Modal -> dunkle PDF-Seite).
   ══════════════════════════════════════════════════════════════ */
.company-footer {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    padding: 16px 26px 20px;
    border-top: 1px solid var(--border-light);
    font-size: var(--t-2xs);
    line-height: 1.55;
    color: var(--text-muted);
    text-align: left;
}
.company-footer-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.company-footer-col strong {
    font-weight: 600;
    color: var(--text);
}
.company-footer a {
    color: inherit;
    text-decoration: none;
}
.company-footer a:hover {
    color: var(--tm-accent);
}
/* Im Modal auf dem Bildschirm unsichtbar, nur der PDF-Capture zieht sie hoch
   (analog zum Preis-Stempel darüber). */
.checkout-modal .company-footer {
    display: none;
}
.checkout-overlay.pdf-capture-mode .checkout-modal .company-footer {
    display: grid;
}
/* Schmales Ein-Brand-Modal (540px) und die gleich breite Share-Seite: dort sind
   3 Spalten unlesbar eng, deshalb 2. */
.checkout-modal:not(.has-multi) .company-footer,
.company-footer.cf-single {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 600px) {
    .company-footer {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 14px 18px 18px;
    }
}

/* Render-Fix Capture-Mode: '2026' nutzt background-clip:text +
   text-fill:transparent. html2canvas rendert das als leeren Akzent-
   Block. Im Capture-Mode auf Solid-Color zurück. */
.checkout-overlay.pdf-capture-mode .checkout-mediakit-title .outline {
    background: transparent !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    -webkit-text-fill-color: var(--tm-accent, #e94d97) !important;
    color: var(--tm-accent, #e94d97) !important;
}

.checkout-submit-arrow {
    font-size: 0.85em;
    opacity: 0.9;
    transition: transform var(--dur-fast);
}

.checkout-submit:hover .checkout-submit-arrow {
    transform: translateX(3px);
}

.checkout-submit-sub {
    font-size: var(--t-xs);
    color: var(--text-muted);
    letter-spacing: 0.01em;
    text-align: center;
    line-height: 1.4;
}

.checkout-price-from {
    font-weight: 700;
    color: var(--text);
}

.checkout-submit-sub .checkout-strike {
    opacity: 0.65;
    font-weight: 500;
    margin: 0 4px 0 0;
}

.checkout-cancel {
    padding: 10px 18px;
    border: 1.5px solid var(--border-light, #ddd);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-muted);
    font-size: var(--t-xs);
    font-weight: 500;
    cursor: pointer;
    transition: background var(--dur-fast);
}

.checkout-cancel:hover {
    background: rgba(0, 0, 0, 0.04);
}

.checkout-cancel:active {
    transform: scale(0.96);
    background: rgba(0, 0, 0, 0.08);
    transition: transform var(--dur-fast) var(--ease-out);
}

.checkout-submit {
    position: relative;
    padding: 14px 28px;
    border: none;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--tm-accent), color-mix(in srgb, var(--tm-accent) 80%, #ff4d9d));
    color: #fff;
    font-size: var(--t-sm);
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
    transition: transform var(--dur-fast) var(--ease-out),
        box-shadow var(--dur-base) ease;
    box-shadow:
        0 4px 16px color-mix(in srgb, var(--tm-accent) 35%, transparent),
        0 0 0 0 color-mix(in srgb, var(--tm-accent) 40%, transparent);
}

.checkout-submit::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.25) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform var(--dur-slow) var(--ease-out);
    pointer-events: none;
}

.checkout-submit:hover {
    transform: translateY(-2px);
    box-shadow:
        0 8px 24px color-mix(in srgb, var(--tm-accent) 45%, transparent),
        0 0 0 4px color-mix(in srgb, var(--tm-accent) 18%, transparent);
}

.checkout-submit:hover::before {
    transform: translateX(100%);
}

.checkout-submit:active {
    transform: translateY(0) scale(0.97);
    transition: transform var(--dur-fast) ease;
}

.checkout-submit i {
    font-size: var(--t-base);
}

/* Senior-Polish: Share-Link ist der gefuellte Primary -> unteren Button sekundaer. */
.checkout-submit {
    background: transparent;
    color: var(--tm-accent);
    border: 1.5px solid color-mix(in srgb, var(--tm-accent) 38%, transparent);
    box-shadow: none;
    font-weight: 600;
}
.checkout-submit::before { display: none; }
.checkout-submit i { color: var(--tm-accent); }
.checkout-submit:hover {
    transform: translateY(-1px);
    background: color-mix(in srgb, var(--tm-accent) 8%, transparent);
    box-shadow: none;
}

/* ── Checkout Confirmation ── */
.checkout-confirmation {
    text-align: center;
    padding: 48px 32px 40px;
}

.checkout-confirm-icon {
    width: 96px;
    height: 96px;
    margin: 0 auto 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--tm-accent) 18%, transparent),
        color-mix(in srgb, var(--tm-accent) 6%, transparent));
    box-shadow:
        0 0 0 8px color-mix(in srgb, var(--tm-accent) 8%, transparent),
        0 12px 36px color-mix(in srgb, var(--tm-accent) 25%, transparent);
    animation: checkPop 0.6s var(--ease-out);
}

.checkout-confirm-icon i {
    font-size: var(--t-3xl);
    color: var(--tm-accent);
}

@keyframes checkPop {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    60% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.checkout-confirmation h2 {
    font-family: var(--font-heading);
    font-size: var(--t-lg);
    font-weight: 700;
    color: var(--text);
    margin: 0 0 8px;
}

.checkout-confirmation p {
    font-size: var(--t-sm);
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0 0 24px;
}

.checkout-confirm-close {
    padding: 10px 28px;
    border: none;
    border-radius: var(--radius-md);
    background: var(--accent);
    color: #fff;
    font-size: var(--t-sm);
    font-weight: 700;
    cursor: pointer;
    transition: filter var(--dur-fast);
}

.checkout-confirm-close:hover {
    filter: brightness(1.1);
}

/* Splash-Progress-Bar als 900ms-Auto-Close-Indikator */
.checkout-confirm-progress {
    margin: 4px auto 0;
    width: 140px;
    height: 3px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--tm-accent) 12%, transparent);
    overflow: hidden;
}

.checkout-confirm-progress > span {
    display: block;
    height: 100%;
    background: var(--tm-accent);
    border-radius: 999px;
    transform-origin: left center;
    animation: checkoutConfirmProgress 0.9s var(--ease-inout) forwards;
}

@keyframes checkoutConfirmProgress {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* Overlay-Fade beim Auto-Close */
.checkout-overlay--fading {
    opacity: 0;
    transition: opacity var(--dur-base) ease;
}

.checkout-overlay--fading .checkout-modal {
    transform: scale(0.97) translateY(6px);
    transition: transform var(--dur-base) var(--ease-inout),
        opacity var(--dur-base) ease;
}

/* ── Checkout Discount Styles ── */
.checkout-strike {
    color: var(--text-muted, #999);
    font-size: var(--t-xs);
    font-weight: 400;
    text-decoration: line-through;
    margin-right: 4px;
}

/* ── Multibrand-Staffel im Angebot ─────────────────────────────
   Zwei Zeilen direkt unter dem Gesamtbetrag: der bereits abgezogene
   Mengenrabatt und, falls es eine hoehere Stufe gibt, was sie braechte.
   Bewusst KEINE Pille wie der Rabatt-Badge: der beschreibt, was in den
   Einzelpreisen steckt, diese Zeilen gehoeren zur Rechnung darueber.
   Sie sitzen im .checkout-summary-card-price-Block und folgen dessen
   Ausrichtung (links in der breiten Bar, sonst zentriert). */
.checkout-bundle-line,
.checkout-bundle-next {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 6px;
    font-size: var(--t-xs);
    line-height: 1.35;
    letter-spacing: -0.005em;
}

.checkout-bundle-line {
    color: rgba(255, 255, 255, 0.82);
    font-weight: 500;
}

.checkout-bundle-line i {
    color: var(--tm-accent-light);
    font-size: var(--t-2xs);
    flex-shrink: 0;
}

/* Der gesparte Betrag ist die Aussage der Zeile. */
.checkout-bundle-line strong {
    color: #fff;
    font-weight: 700;
}

.checkout-bundle-next {
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
}

.checkout-bundle-next i {
    color: var(--tm-accent-light);
    font-size: var(--t-2xs);
    flex-shrink: 0;
    opacity: 0.8;
}

/* Einzelne Brand: es gibt keine dunkle Bank, der Hinweis sitzt stattdessen
   direkt unter dem Card-Preis (siehe tierLedgerHtml in offer-bar.js /
   _buildOfferModalHtml in server.js) statt als eigene Pille am Modal-Kopf zu
   schweben - Zahl und Begruendung gehoeren an dieselbe Stelle. Gleiche
   Bausteine wie in der dunklen Gesamtbetrag-Bank oben, hier aber auf dem
   hellen Card-Grund: eigene Farbgebung statt der weiss-auf-navy-Werte. */
.checkout-tier-ledger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--border-light, #e5e5e5);
}

.checkout-tier-ledger .checkout-bundle-line,
.checkout-tier-ledger .checkout-bundle-next {
    margin-top: 0;
    color: var(--text-muted);
}

.checkout-tier-ledger .checkout-bundle-line strong {
    color: var(--text);
}

.checkout-tier-ledger .checkout-bundle-line i,
.checkout-tier-ledger .checkout-bundle-next i {
    color: var(--tm-accent);
}

.checkout-total-prices {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.checkout-total-prices s {
    font-size: var(--t-sm);
}


.udb-header-left h3 {
    margin: 0;
    font-size: inherit;
}

.udb-close {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted, #888);
    font-size: var(--t-base);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--dur-fast);
}

.udb-close:hover {
    background: var(--surface, #f0f0f0);
}



.udb-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: var(--radius-pill);
    font-size: var(--t-2xs);
    font-weight: 700;
}

.udb-action-btn {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--t-xs);
    transition: background var(--dur-fast), color var(--dur-fast);
}

.udb-action-btn:hover {
    background: var(--surface, #f0f0f0);
}

.udb-action-btn.delete:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--status-danger);
}

.request-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--radius-pill);
    font-size: var(--t-2xs);
    font-weight: 700;
    background: var(--status-danger);
    color: #fff;
}

.tab-badge {
    margin-left: 4px;
}

.mc-badge {
    position: absolute;
    top: -4px;
    right: -4px;
}

.udb-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.udb-stat-card {
    background: var(--surface, #f5f7fa);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    text-align: center;
}

.udb-stat-value {
    font-size: var(--t-xl);
    font-weight: 700;
    color: var(--accent, var(--tm-accent));
}

.udb-stat-label {
    font-size: var(--t-2xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted, #888);
    margin-top: 4px;
}

/* Access Request Toggle */
.udb-request-toggle-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: var(--surface, #f5f7fa);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    margin-bottom: 18px;
}

.udb-request-toggle-icon {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-md);
    background: var(--tm-accent-10);
    color: var(--tm-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--t-base);
    flex-shrink: 0;
}

.udb-request-toggle-info {
    flex: 1;
    min-width: 0;
}

.udb-request-toggle-info strong {
    display: block;
    font-size: var(--t-sm);
    color: var(--text, #222);
    margin-bottom: 2px;
}

.udb-request-toggle-info span {
    font-size: var(--t-xs);
    color: var(--text-muted, #888);
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: #ccc;
    border-radius: var(--radius-xl);
    transition: var(--dur-base);
}

.toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: var(--dur-base);
    box-shadow: var(--shadow-1);
}

.toggle-switch input:checked+.toggle-slider {
    background: var(--tm-accent);
}

.toggle-switch input:checked+.toggle-slider::before {
    transform: translateX(20px);
}

/* ================================================================
   Settings Cards (E-Mail Tab - Accordion)
   ================================================================ */
.udb-settings-card {
    border: 1px solid #e8e8e8;
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 16px;
    position: relative;
    background: #fff;
    transition: box-shadow var(--dur-base);
}

.udb-settings-card:hover {
    box-shadow: var(--shadow-2);
}

.udb-settings-card-accent {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.udb-settings-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 24px 18px 26px;
    cursor: pointer;
    user-select: none;
    transition: background var(--dur-fast);
}

.udb-settings-card-header:hover {
    background: rgba(0, 0, 0, 0.015);
}

.udb-settings-card-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--t-base);
    flex-shrink: 0;
}

.udb-settings-card-title {
    flex: 1;
    min-width: 0;
}

.udb-settings-card-title h4 {
    margin: 0;
    font-size: var(--t-base);
    font-weight: 700;
    color: #222;
}

.udb-settings-card-title span {
    font-size: var(--t-xs);
    color: #999;
    display: block;
    margin-top: 3px;
}

.udb-settings-card-title code {
    font-size: var(--t-2xs);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    background: rgba(232, 145, 26, 0.12);
    color: #e8911a;
    font-weight: 500;
}

.udb-settings-chevron {
    color: #bbb;
    font-size: var(--t-xs);
    transition: transform var(--dur-base);
    flex-shrink: 0;
}

.udb-settings-card.open .udb-settings-chevron {
    transform: rotate(180deg);
}

.udb-settings-card-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--dur-base) var(--ease-out), padding var(--dur-base);
    padding: 0 28px;
}

.udb-settings-card.open .udb-settings-card-body {
    max-height: 900px;
    padding: 8px 28px 24px;
}

.udb-settings-card-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

.udb-settings-save {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 28px;
    border-radius: var(--radius-md);
    border: none;
    background: var(--btn-clr, #e8911a);
    color: #fff;
    font-size: var(--t-sm);
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all var(--dur-fast);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--btn-clr, #e8911a) 30%, transparent);
}

.udb-settings-save:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--btn-clr, #e8911a) 40%, transparent);
}

.udb-settings-save:active {
    transform: translateY(0);
}

/* Shared Field Styles */
.udb-email-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 8px;
}

.udb-email-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.udb-email-field label {
    font-size: var(--t-2xs);
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0;
}

.udb-email-placeholder {
    font-size: var(--t-2xs);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    background: rgba(232, 145, 26, 0.12);
    color: #e8911a;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

.udb-email-field input,
.udb-email-field textarea {
    width: 100%;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--input-bg);
    color: var(--text);
    font-size: var(--t-xs);
    font-family: inherit;
    outline: none;
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
    box-sizing: border-box;
}

.udb-email-field input:focus,
.udb-email-field textarea:focus {
    border-color: var(--tm-accent);
    box-shadow: 0 0 0 3px var(--tm-accent-10);
}

.udb-email-field textarea {
    resize: vertical;
    min-height: 80px;
    line-height: 1.5;
}

.udb-email-field-full {
    margin-bottom: 8px;
}

/* Credential Status Badges */
.udb-cred-status {
    font-size: var(--t-2xs);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    margin-left: 6px;
}

.udb-cred-status.set {
    color: #27ae60;
}

.udb-cred-status.unset {
    color: #e74c3c;
}

.udb-cred-status i {
    margin-right: 3px;
}

/* ================================================================
   EMAIL PREVIEW OVERLAY
   ================================================================ */
.email-preview-overlay {
    position: fixed;
    inset: 0;
    z-index: 10010;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(16px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-base) ease;
}

.email-preview-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.email-preview-container {
    background: #1a1a2e;
    border-radius: var(--radius-xl);
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
    width: 90vw;
    max-width: 780px;
    height: 82vh;
    max-height: 860px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(20px) scale(0.97);
    transition: transform var(--dur-base) var(--ease-out);
}

.email-preview-overlay.open .email-preview-container {
    transform: translateY(0) scale(1);
}

/* -- Toolbar -- */
.email-preview-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.email-preview-toolbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #e8911a;
    font-size: var(--t-sm);
    font-weight: 700;
}

.email-preview-toolbar-left i {
    font-size: var(--t-base);
}

.email-preview-toolbar-left span {
    color: #eee;
}

.email-preview-toolbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* -- Device Toggle -- */
.email-preview-device-toggle {
    display: flex;
    background: rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md);
    padding: 3px;
    gap: 2px;
}

.email-preview-device {
    width: 36px;
    height: 32px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: rgba(255, 255, 255, 0.35);
    font-size: var(--t-xs);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--dur-fast);
}

.email-preview-device:hover {
    color: rgba(255, 255, 255, 0.6);
}

.email-preview-device.active {
    background: rgba(232, 145, 26, 0.15);
    color: #e8911a;
    box-shadow: var(--shadow-1);
}

/* -- Close button -- */
.email-preview-close {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.5);
    font-size: var(--t-base);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--dur-fast);
}

.email-preview-close:hover {
    background: rgba(239, 68, 68, 0.15);
    color: var(--status-danger);
}

/* -- Subject line -- */
.email-preview-subject {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    flex-shrink: 0;
}

.email-preview-subject-label {
    font-size: var(--t-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.35);
    flex-shrink: 0;
}

.email-preview-subject-text {
    font-size: var(--t-sm);
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* -- Frame wrapper -- */
.email-preview-frame-wrap {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow-y: auto;
    padding: 24px;
    background: #f4f4f7;
    transition: padding var(--dur-base);
}

.email-preview-frame-wrap.mobile {
    padding: 24px 0;
    background: #2a2a3e;
}

.email-preview-frame {
    width: 100%;
    max-width: 660px;
    height: 100%;
    border: none;
    border-radius: var(--radius-sm);
    background: #f4f4f7;
    transition: max-width var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base);
}

.email-preview-frame-wrap.mobile .email-preview-frame {
    max-width: 375px;
    border-radius: var(--radius-xl);
    box-shadow: 0 0 0 8px #333, 0 0 0 10px #555, 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* ── Darstellung Tab - Display Toggles ── */
/* Intensity Sliders */
.udb-intensity-section {
    margin-top: 12px;
    padding: 14px 16px;
    background: color-mix(in srgb, var(--surface) 90%, var(--tm-accent) 10%);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
}

.udb-intensity-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--t-xs);
    font-weight: 500;
    color: var(--text);
    margin-bottom: 12px;
}

.udb-intensity-heading i {
    color: var(--tm-accent);
    font-size: var(--t-sm);
}

.udb-intensity-slider-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
}

.udb-intensity-slider-row label {
    width: 90px;
    flex-shrink: 0;
    font-size: var(--t-xs);
    font-weight: 500;
    color: var(--text-muted);
}

.udb-range {
    flex: 1;
    height: 6px;
    appearance: none;
    -webkit-appearance: none;
    background: var(--border-light);
    border-radius: var(--radius-sm);
    outline: none;
    cursor: pointer;
}

.udb-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--tm-accent);
    border: 2px solid #fff;
    box-shadow: var(--shadow-1);
    cursor: pointer;
    transition: transform var(--dur-fast);
}

.udb-range::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.udb-range::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--tm-accent);
    border: 2px solid #fff;
    box-shadow: var(--shadow-1);
    cursor: pointer;
}

.udb-range-val {
    width: 36px;
    flex-shrink: 0;
    text-align: right;
    font-size: var(--t-xs);
    font-weight: 500;
    color: var(--tm-accent);
    font-variant-numeric: tabular-nums;
}

.udb-display-toggles {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.udb-display-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--dur-fast);
    user-select: none;
}

.udb-display-toggle:hover {
    background: rgba(0, 0, 0, 0.03);
}

.udb-display-toggle-info {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: var(--t-sm);
    font-weight: 500;
    color: #333;
}

.udb-display-toggle-info i {
    font-size: var(--t-sm);
    width: 20px;
    text-align: center;
    color: #888;
}

.udb-toggle-switch {
    position: relative;
    width: 44px;
    height: 24px;
    background: #d1d5db;
    border-radius: var(--radius-md);
    transition: background var(--dur-fast);
    flex-shrink: 0;
    cursor: pointer;
}

.udb-toggle-switch .mc-toggle-dot {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    transition: transform var(--dur-fast);
    box-shadow: var(--shadow-1);
}

/* Checked state: label wraps checkbox + toggle */
.udb-display-toggle input:checked+.udb-toggle-switch,
.udb-req-toggle-row input:checked+.udb-toggle-switch {
    background: var(--status-success);
}

.udb-display-toggle input:checked+.udb-toggle-switch .mc-toggle-dot,
.udb-req-toggle-row input:checked+.udb-toggle-switch .mc-toggle-dot {
    transform: translateX(20px);
}

/* Inline toggle btn for warenkorb (uses mc-toggle-btn with no text) */
.udb-inline-toggle {
    padding: 0 !important;
    background: none !important;
    border: none !important;
    min-width: unset !important;
    width: auto !important;
}

.udb-inline-toggle .mc-toggle-switch {
    position: relative;
    width: 44px;
    height: 24px;
}

/* Dark mode */
[data-theme="dark"] .udb-display-toggle-info {
    color: #e0e0e0;
}

[data-theme="dark"] .udb-display-toggle:hover {
    background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .udb-display-toggle-info i {
    color: #aaa;
}

/* ── Anfragen Tab – Request Cards ── */
.udb-requests-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}

.udb-requests-empty {
    text-align: center;
    padding: 48px 20px;
    color: #999;
    font-size: var(--t-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.udb-requests-empty i {
    font-size: var(--t-2xl);
    color: #ccc;
}

.udb-req-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 16px;
    background: var(--surface);
    border: 1px solid var(--border-light, #e5e7eb);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-1);
    transition: all var(--dur-fast) ease;
    gap: 12px;
}

.udb-req-card:hover {
    box-shadow: var(--shadow-2);
    border-color: var(--border, #d1d5db);
    transform: translateY(-1px);
}



.udb-req-card.approved {
    border-left: 3px solid var(--status-success);
    background: #f9fafb;
    opacity: 0.8;
}

.udb-req-card.rejected {
    border-left: 3px solid var(--status-danger);
    background: #fdf2f2;
    opacity: 0.6;
}

.udb-req-card-main {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
}

.udb-req-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, color-mix(in srgb, var(--adm-primary) 15%, transparent), color-mix(in srgb, var(--adm-primary) 4%, transparent));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--adm-primary);
    font-size: var(--t-sm);
    font-weight: 700;
    position: relative;
}

.udb-req-avatar::after {
    content: attr(data-initial);
    position: absolute;
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--adm-primary);
}

.udb-req-avatar .udb-req-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
    border-radius: 50%;
    position: relative;
    z-index: 1;
    background: #fff;
    box-shadow: var(--shadow-1);
}



.udb-req-info {
    flex: 1;
    min-width: 0;
}

.udb-req-name {
    font-weight: 500;
    font-size: var(--t-sm);
    color: var(--text);
    margin-bottom: 2px;
    letter-spacing: -0.01em;
}

.udb-req-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    font-size: var(--t-xs);
    color: var(--text-muted);
}

.udb-req-meta a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--dur-fast);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.udb-req-meta a:hover {
    color: var(--adm-primary);
}

.udb-req-meta i {
    font-size: var(--t-2xs);
    opacity: 0.7;
}

.udb-req-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.udb-req-referrer {
    background: #f3f4f6;
    padding: 2px 8px;
    border-radius: var(--radius-md);
    font-size: var(--t-2xs);
    font-weight: 500;
}

.udb-req-referrer:hover {
    background: #e5e7eb;
}

.udb-req-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.udb-req-action-btn {
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--t-xs);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease-out);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.udb-req-action-btn.approve {
    padding: 4px 12px;
    background: var(--adm-primary);
    color: white;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--adm-primary) 25%, transparent);
}

.udb-req-action-btn.approve:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--adm-primary) 35%, transparent);
    filter: brightness(1.05);
}

.udb-req-action-btn.reject {
    width: 27px;
    height: 27px;
    border-radius: var(--radius-sm);
    padding: 0;
    background: #f3f4f6;
    color: #6b7280;
}

.udb-req-action-btn.reject:hover {
    background: #fee2e2;
    color: var(--status-danger);
}

.udb-req-action-btn.delete {
    width: 27px;
    height: 27px;
    border-radius: var(--radius-sm);
    padding: 0;
    background: transparent;
    color: #9ca3af;
}

.udb-req-action-btn.delete:hover {
    background: #fdf2f2;
    color: var(--status-danger);
}

.udb-req-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: var(--radius-xl);
    font-size: var(--t-xs);
    font-weight: 500;
}

.udb-req-badge.approved {
    background: color-mix(in srgb, var(--status-success) 15%, var(--surface));
    color: var(--status-success);
}

.udb-req-badge.rejected {
    background: color-mix(in srgb, var(--status-danger) 15%, var(--surface));
    color: var(--status-danger);
}

.udb-req-badge.pending {
    background: color-mix(in srgb, var(--tm-accent) 12%, var(--surface));
    color: var(--tm-accent, #DA1884);
}

[data-theme="dark"] .udb-requests-empty {
    color: #666;
}

[data-theme="dark"] .udb-requests-empty i {
    color: #444;
}

/* ── Admin Sudo Modal ── */
.sudo-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity var(--dur-base) ease;
}

.sudo-overlay.visible {
    opacity: 1;
}

.sudo-box {
    background: #fff;
    border-radius: var(--radius-xl);
    padding: 32px 36px 28px;
    max-width: 380px;
    width: 90%;
    box-shadow: var(--shadow-modal);
    transform: scale(0.92) translateY(10px);
    transition: transform var(--dur-base) var(--ease-out);
    text-align: center;
}

.sudo-overlay.visible .sudo-box {
    transform: scale(1) translateY(0);
}

.sudo-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--adm-primary) 12%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: var(--t-xl);
    color: var(--adm-primary);
}

.sudo-title {
    font-size: var(--t-md);
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 6px;
    letter-spacing: -0.01em;
}

.sudo-subtitle {
    font-size: var(--t-xs);
    color: #6b7280;
    line-height: 1.5;
    margin-bottom: 20px;
}

.sudo-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: var(--radius-md);
    font-size: var(--t-sm);
    font-family: inherit;
    color: #1f2937;
    background: #f9fafb;
    outline: none;
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
    text-align: center;
    letter-spacing: 2px;
}

.sudo-input:focus {
    border-color: var(--adm-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--adm-primary) 10%, transparent);
    background: #fff;
}

.sudo-error {
    font-size: var(--t-xs);
    color: var(--status-danger);
    min-height: 20px;
    margin-top: 8px;
    font-weight: 500;
}

.sudo-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.sudo-actions button {
    flex: 1;
    padding: 11px 0;
    border-radius: var(--radius-md);
    font-size: var(--t-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--dur-fast);
    border: none;
}

.sudo-cancel {
    background: #f3f4f6;
    color: #4b5563;
}

.sudo-cancel:hover {
    background: #e5e7eb;
}

.sudo-confirm {
    background: var(--adm-primary);
    color: #fff;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--adm-primary) 30%, transparent);
}

.sudo-confirm:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--adm-primary) 40%, transparent);
}

.sudo-confirm:disabled {
    opacity: 0.7;
    cursor: wait;
    transform: none;
}

/* Dark mode */
[data-theme="dark"] .sudo-box {
    background: #1e1e1e;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .sudo-icon {
    background: color-mix(in srgb, var(--adm-primary) 18%, #1e1e1e);
}

[data-theme="dark"] .sudo-title {
    color: #f3f4f6;
}

[data-theme="dark"] .sudo-subtitle {
    color: #9ca3af;
}

[data-theme="dark"] .sudo-input {
    background: #2a2a2a;
    border-color: #444;
    color: #f3f4f6;
}

[data-theme="dark"] .sudo-input:focus {
    border-color: var(--adm-primary);
    background: #333;
}

[data-theme="dark"] .sudo-cancel {
    background: #2a2a2a;
    color: #d1d5db;
}

[data-theme="dark"] .sudo-cancel:hover {
    background: #333;
}

/* ── Custom Confirm Dialog ── */
.mc-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    animation: mcConfirmFadeIn 0.2s ease forwards;
}

@keyframes mcConfirmFadeIn {
    to {
        opacity: 1;
    }
}

.mc-confirm-box {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 28px 32px 24px;
    max-width: 380px;
    width: 90%;
    box-shadow: var(--shadow-modal);
    transform: scale(0.92) translateY(8px);
    animation: mcConfirmSlideIn 0.25s var(--ease-out) forwards;
    text-align: center;
}

@keyframes mcConfirmSlideIn {
    to {
        transform: scale(1) translateY(0);
    }
}

.mc-confirm-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--adm-primary) 12%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: var(--t-lg);
    color: var(--adm-primary);
}

.mc-confirm-title {
    font-size: var(--t-base);
    font-weight: 500;
    color: #1f2937;
    margin-bottom: 6px;
}

.mc-confirm-msg {
    font-size: var(--t-sm);
    color: #6b7280;
    line-height: 1.5;
    margin-bottom: 24px;
}

.mc-confirm-actions {
    display: flex;
    gap: 10px;
}

.mc-confirm-actions button {
    flex: 1;
    padding: 10px 0;
    border-radius: var(--radius-md);
    font-size: var(--t-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--dur-fast);
    border: none;
}

.mc-confirm-cancel {
    background: #f3f4f6;
    color: #4b5563;
}

.mc-confirm-cancel:hover {
    background: #e5e7eb;
}

.mc-confirm-delete {
    background: var(--adm-primary);
    color: #fff;
}

.mc-confirm-delete:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--adm-primary) 35%, transparent);
}

.mc-confirm-accent {
    background: var(--tm-accent);
    color: #fff;
}

.mc-confirm-accent:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--tm-accent) 35%, transparent);
}

.mc-confirm-theme-accent .mc-confirm-icon {
    color: var(--tm-accent);
    background: color-mix(in srgb, var(--tm-accent) 12%, transparent);
}

/* Dark mode */
[data-theme="dark"] .mc-confirm-box {
    background: #1e1e1e;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .mc-confirm-icon {
    background: linear-gradient(135deg, #3b1111, #4a1515);
}

[data-theme="dark"] .mc-confirm-theme-accent .mc-confirm-icon {
    background: linear-gradient(135deg, color-mix(in srgb, var(--tm-accent) 25%, transparent), color-mix(in srgb, var(--tm-accent) 10%, transparent));
}

[data-theme="dark"] .mc-confirm-title {
    color: #f3f4f6;
}

[data-theme="dark"] .mc-confirm-msg {
    color: #9ca3af;
}

[data-theme="dark"] .mc-confirm-cancel {
    background: #2a2a2a;
    color: #d1d5db;
}

[data-theme="dark"] .mc-confirm-cancel:hover {
    background: #333;
}

/* ── Anfragen Toggle Row (compact) ── */
.udb-req-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    margin-bottom: 16px;
    cursor: pointer;
    transition: border-color var(--dur-fast), box-shadow var(--dur-base);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.udb-req-toggle-row:hover {
    border-color: #d1d5db;
}

.udb-req-toggle-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.udb-req-toggle-info>i {
    color: var(--status-success);
    font-size: var(--t-sm);
}

.udb-req-toggle-info>span {
    font-weight: 500;
    font-size: var(--t-sm);
    color: #1f2937;
}

.udb-req-toggle-info>small {
    width: 100%;
    padding-left: 25px;
    font-size: var(--t-xs);
    color: #9ca3af;
    margin-top: -4px;
}

[data-theme="dark"] .udb-req-toggle-row {
    background: linear-gradient(150deg, color-mix(in srgb, var(--surface) 95%, transparent) 0%, color-mix(in srgb, var(--surface-hover) 50%, var(--surface)) 100%);
    border-color: color-mix(in srgb, var(--border-light) 50%, transparent);
}

[data-theme="dark"] .udb-req-toggle-row:hover {
    border-color: color-mix(in srgb, var(--border) 60%, transparent);
}

[data-theme="dark"] .udb-req-toggle-info>span {
    color: var(--text);
}

[data-theme="dark"] .udb-req-toggle-info>small {
    color: var(--text-muted);
}

/* ── Gate Editor ── */
.udb-gate-editor {
    margin: 8px 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--panel-bg);
}

/* Collapsible card behavior */
.udb-card-chevron {
    margin-left: auto;
    font-size: var(--t-2xs);
    opacity: .35;
    transition: transform var(--dur-base);
}

.udb-gate-editor.collapsed .udb-card-chevron {
    transform: rotate(-90deg);
}

.udb-gate-editor .udb-gate-editor-fields,
.udb-gate-editor .udb-gate-preview-wrap {
    transition: max-height var(--dur-base) ease, opacity var(--dur-fast) ease, padding var(--dur-base) ease;
    max-height: 2000px;
    opacity: 1;
    overflow: hidden;
}

.udb-gate-editor.collapsed .udb-gate-editor-fields,
.udb-gate-editor.collapsed .udb-gate-preview-wrap {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.udb-gate-editor-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: transparent;
    border-left: 3px solid var(--status-info);
    margin: 0;
    color: var(--text);
    cursor: pointer;
    border-radius: 0;
}

.udb-gate-editor-header:hover {
    background: var(--surface);
}

.udb-gate-editor-header i {
    font-size: var(--t-sm);
    color: var(--status-info);
    opacity: 0.8;
}

.udb-gate-editor-header strong {
    display: block;
    font-size: var(--t-xs);
    font-weight: 700;
    color: var(--text);
}

.udb-gate-editor-header small {
    font-size: var(--t-2xs);
    color: var(--text-muted);
}

.udb-gate-editor-fields {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: var(--surface);
    border-top: 1px solid var(--border-light);
}

.udb-gate-field label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--t-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.udb-gate-field input,
.udb-gate-field textarea {
    width: 100%;
    padding: 10px 14px !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    background: var(--panel-bg) !important;
    color: var(--text) !important;
    transition: all var(--dur-fast) var(--ease-out) !important;
    box-sizing: border-box;
    font-family: inherit;
}

.udb-gate-field input:focus,
.udb-gate-field textarea:focus {
    outline: none !important;
    border-color: #DA1884 !important;
    background: var(--surface) !important;
    box-shadow: 0 0 0 3px rgba(218, 24, 132, 0.15), 0 2px 6px rgba(0, 0, 0, 0.02) inset !important;
}

.udb-gate-field input::placeholder,
.udb-gate-field textarea::placeholder {
    color: #9ca3af;
    opacity: 0.7;
}

.udb-gate-field-row {
    display: flex;
    gap: 12px;
    max-width: 560px;
}

.udb-gate-field-row .udb-gate-field {
    flex: 1;
}

.udb-gate-save-btn {
    align-self: flex-end;
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #DA1884, #E84DA3);
    color: #fff;
    font-size: var(--t-xs);
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: transform var(--dur-fast), box-shadow var(--dur-base), filter var(--dur-fast);
    margin-top: 8px;
    box-shadow: 0 2px 10px rgba(218, 24, 132, 0.3);
}

.udb-gate-save-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(218, 24, 132, 0.4);
    filter: brightness(1.05);
}

.udb-gate-save-btn:active {
    transform: translateY(1px) scale(0.97);
    box-shadow: 0 2px 5px rgba(218, 24, 132, 0.3);
    filter: brightness(1);
    transition: transform var(--dur-fast);
}

.udb-gate-save-btn.btn-secondary {
    background: var(--surface-hover);
    color: var(--text);
    box-shadow: none;
}

[data-theme="dark"] .udb-gate-editor {
    border-color: var(--border);
}

[data-theme="dark"] .udb-gate-editor-header {
    border-left-color: #64748b;
}

[data-theme="dark"] .udb-gate-editor-header i {
    color: #94a3b8;
}

[data-theme="dark"] .udb-gate-save-btn {
    background: #334155;
}

/* ── Gate Live Preview ── */
.udb-gate-preview-wrap {
    border-top: 1px solid #e5e7eb;
}

.udb-gate-preview-label {
    padding: 10px 16px 6px;
    font-size: var(--t-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #9ca3af;
    display: flex;
    align-items: center;
    gap: 6px;
}

.udb-gate-preview-label i {
    font-size: var(--t-2xs);
}

.udb-gate-preview-viewport {
    margin: 0 16px 16px;
    border-radius: var(--radius-md);
    background: linear-gradient(145deg, #111111 0%, #0a0a0a 100%);
    height: 400px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.3);
}

.udb-gate-preview-scene {
    transform: scale(0.7);
    transform-origin: center center;
    width: 480px;
}

.udb-gate-preview-scene .auth-gate-card {
    position: relative;
    transform: none;
    animation: none;
    opacity: 1;
    margin: 0 auto;
}

.udb-gate-preview-scene .auth-gate-form {
    display: flex !important;
    flex-direction: column;
    gap: 12px;
}

.udb-gate-preview-scene .auth-gate-btn {
    width: 100%;
    margin-top: 2px;
}

[data-theme="dark"] .udb-gate-preview-wrap {
    border-color: #333;
}

/* ── Email Color Pickers ── */
.udb-email-colors {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
    padding: 12px 0 4px;
    border-top: 1px solid #eee;
    margin-top: 8px;
}

.udb-email-color-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.udb-email-color-row label {
    font-size: var(--t-xs);
    font-weight: 500;
    color: #6b7280;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 0;
}

.udb-email-color-row label i {
    font-size: var(--t-2xs);
    opacity: 0.7;
}

.udb-email-color-row input[type="color"] {
    -webkit-appearance: none;
    appearance: none;
    width: 32px;
    height: 26px;
    border: 2px solid #e5e7eb;
    border-radius: var(--radius-sm);
    cursor: pointer;
    padding: 2px;
    background: transparent;
    transition: border-color var(--dur-fast);
}

.udb-email-color-row input[type="color"]:hover {
    border-color: #d1d5db;
}

.udb-email-color-row input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

.udb-email-color-row input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: var(--radius-sm);
}

[data-theme="dark"] .udb-email-colors {
    border-top-color: #333;
}

[data-theme="dark"] .udb-email-color-row label {
    color: #9ca3af;
}

[data-theme="dark"] .udb-email-color-row input[type="color"] {
    border-color: #444;
}

/* Select styling inside gate-editor cards */
.udb-gate-select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-sm);
    font-size: var(--t-xs);
    background: #fff;
    color: #1f2937;
    font-family: inherit;
    cursor: pointer;
    transition: border-color var(--dur-fast);
    box-sizing: border-box;
    appearance: auto;
}

.udb-gate-select:focus {
    outline: none;
    border-color: var(--tm-accent);
    box-shadow: 0 0 0 3px var(--tm-accent-10);
}

[data-theme="dark"] .udb-gate-select {
    background: #111;
    border-color: #333;
    color: #e5e7eb;
}

/* ══════════════════════════════════════════════════════════════
   MATERIAL PREMIUM – Admin UI Design Token Overrides
   Brand: MonsterDealz Corporate Identity
   Primary: #DA1884 (Pantone 219 C)
   Dark:    #222223 (Pantone Neutral Black C)
   Gray:    #D9D9D6 (Pantone Cool Gray 1 C)
   ══════════════════════════════════════════════════════════════ */

:root {
    --adm-primary: #DA1884;
    --adm-dark: #222223;
    --adm-gray: #D9D9D6;
    /* Status-Semantik (Erfolg/Fehler/Info), bisher an rund 30 Stellen als
       rohes Hex dupliziert (Impeccable-Audit 16.08.). Werte unveraendert
       gelassen, nur benannt - kein Farbwechsel. */
    --status-success: #10b981;
    --status-danger: #ef4444;
    --status-info: #3b82f6;
}

/* ── MC Panel: Clean solid surface ───────────────────────── */
.mc-panel {
    background: var(--panel-bg) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-right: 1px solid var(--border) !important;
    box-shadow: var(--shadow-3);
}

[data-theme="dark"] .mc-panel {
    box-shadow: var(--shadow-3);
}

/* ── MC Header: Clean title bar ──────────────────────────── */
.mc-header {
    padding: 14px 20px;
    border-bottom: none !important;
    background: var(--panel-bg);
    position: relative;
}

.mc-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20px;
    right: 20px;
    height: 1px;
    background: var(--border);
}

.mc-header-title {
    font-size: var(--t-sm);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.mc-header-title i {
    font-size: var(--t-sm);
    color: var(--adm-primary) !important;
}

/* ── MC Body: Tighter spacing ──────────────────────────── */
.mc-body {
    padding: 10px 14px 28px;
    gap: 6px;
}

/* ── MC Sections: Clean neutral cards ────────────────────── */
.mc-section {
    background: var(--surface) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: var(--radius-md) !important;
    padding: 12px 14px;
    margin-bottom: 4px;
    box-shadow: var(--shadow-1);
    transition: all var(--dur-base) var(--ease-out) !important;
}

.mc-section:hover {
    box-shadow: var(--shadow-2);
    transform: translateY(-1px);
    background: var(--surface-hover) !important;
}

[data-theme="dark"] .mc-section {
    box-shadow: var(--shadow-2);
}

[data-theme="dark"] .mc-section:hover {
    box-shadow: var(--shadow-2);
}

/* ── MC Section Title: Prominent icon badge ─────────────── */
.mc-section-title {
    font-size: var(--t-2xs);
    font-weight: 700;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    margin-bottom: 10px;
    gap: 8px;
}

.mc-section-title i:first-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--text-muted) 10%, transparent) !important;
    color: var(--text-muted) !important;
    font-size: 0.65rem !important;
    flex-shrink: 0;
}

/* ── MC Toggle: Cleaner toggle rows ───────────────────── */
.mc-toggle-btn {
    border-radius: var(--radius-md);
    padding: 9px 12px;
    font-size: var(--t-xs);
    font-weight: 500;
    border-color: var(--border-light) !important;
}

.mc-toggle-btn:hover {
    border-color: var(--border) !important;
}

/* ── MC Action Buttons: Accent hover ──────────────────── */
.mc-action-btn {
    border-radius: var(--radius-md) !important;
    font-size: var(--t-xs);
    padding: 10px 16px;
    box-shadow: none !important;
}

.mc-action-btn:hover {
    border-color: var(--border) !important;
    box-shadow: var(--shadow-2);
}

/* ── MC Icon Buttons: Sharper appearance ──────────────── */
.mc-icon-btn {
    border-radius: var(--radius-sm);
    transition: all var(--dur-fast) var(--ease-out);
}

.mc-icon-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-2);
}

/* ── MC Close: Cleaner style ─────────────────────────── */
.mc-close {
    border: none !important;
    background: transparent !important;
    border-radius: 50% !important;
    width: 28px !important;
    height: 28px !important;
}

.mc-close:hover {
    background: rgba(239, 68, 68, 0.1) !important;
}


/* ══════════════════════════════════════════════════════════════
   MATERIAL PREMIUM – Verwaltung (UDB Modal) Overrides
   ══════════════════════════════════════════════════════════════ */

/* ── UDB Modal: Solid elevated surface ──────────────────── */
.udb-modal {
    background: var(--panel-bg) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.15), 0 0 0 1px var(--border-light) !important;
    border-radius: var(--radius-xl) !important;
}

[data-theme="dark"] .udb-modal {
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--border) !important;
}

.udb-overlay {
    background: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

[data-theme="dark"] .udb-overlay {
    background: rgba(0, 0, 0, 0.6) !important;
}

/* ── UDB Header: Clean solid background ──────────────── */
.udb-header {
    padding: 16px 24px !important;
    background: var(--panel-bg) !important;
    border-bottom: 1px solid var(--border) !important;
    position: relative;
}

.udb-header::after {
    content: '' !important;
    position: absolute;
    bottom: -1px;
    left: 24px;
    right: 24px;
    height: 1px;
    background: linear-gradient(90deg, var(--adm-primary), color-mix(in srgb, var(--adm-primary) 20%, transparent), transparent) !important;
}

.udb-header-left {
    font-size: var(--t-sm);
    gap: 10px;
}

.udb-header-left i {
    filter: none !important;
    font-size: var(--t-base);
    color: var(--adm-primary);
    background: color-mix(in srgb, var(--adm-primary) 12%, transparent);
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
}

/* ── UDB Tabs: Active tab highlight ──────────────────── */
.udb-tabs {
    padding: 0 20px;
    gap: 0;
    background: var(--panel-bg) !important;
    border-bottom: 1px solid var(--border-light) !important;
}

.udb-tab {
    padding: 11px 14px;
    font-size: var(--t-xs);
    font-weight: 500;
    gap: 6px;
    border-radius: 0;
    transition: all var(--dur-fast) ease;
}

.udb-tab i {
    font-size: var(--t-2xs);
    opacity: 0.6;
}

.udb-tab:hover {
    background: color-mix(in srgb, var(--adm-primary) 4%, transparent) !important;
}

.udb-tab.active {
    background: color-mix(in srgb, var(--adm-primary) 6%, transparent) !important;
    border-radius: 0 !important;
}

.udb-tab.active i {
    color: var(--adm-primary) !important;
    opacity: 1;
}

.udb-tab.active::after {
    height: 2.5px;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    background: var(--adm-primary) !important;
}


/* ── UDB Add Card: Refined ───────────────────────────── */
.udb-add-card {
    margin: 10px 24px 14px;
    background: color-mix(in srgb, var(--adm-primary) 4%, var(--panel-bg)) !important;
    border: 1px solid color-mix(in srgb, var(--adm-primary) 20%, transparent) !important;
    border-left: 3px solid var(--adm-primary) !important;
    border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
}

/* ── Gate Editor: Accent card ────────────────────────── */
.udb-gate-editor {
    margin: 10px 24px;
    border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
    border: 1px solid var(--border) !important;
    border-left: 3px solid var(--adm-primary) !important;
    box-shadow: var(--shadow-1);
    overflow: hidden;
}

.udb-gate-editor-header {
    padding: 12px 16px;
    border-left: none !important;
    gap: 10px;
}

.udb-gate-editor-header i {
    color: var(--adm-primary) !important;
}

.udb-gate-editor-fields {
    padding: 14px 16px;
}

[data-theme="dark"] .udb-gate-editor-header {
    border-left: none !important;
}

/* ── Gate Save Button ────────────────────────────────── */
.udb-gate-save-btn {
    background: var(--adm-primary) !important;
    border-radius: var(--radius-sm);
    padding: 8px 16px;
    font-size: var(--t-xs);
    font-weight: 500;
    transition: all var(--dur-fast);
}

.udb-gate-save-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

[data-theme="dark"] .udb-gate-save-btn {
    background: var(--adm-primary) !important;
}

/* ── UDB Section Title: Accent label ─────────────────── */
.udb-section-title {
    color: var(--adm-primary) !important;
    font-size: var(--t-2xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 12px 24px 6px;
    gap: 6px;
}

/* ── Debug Cards: Accent accent border ──────────────── */
.debug-card {
    border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
    border-left: 3px solid color-mix(in srgb, var(--adm-primary) 35%, transparent) !important;
    box-shadow: var(--shadow-1);
}

.debug-card h4 {
    font-size: var(--t-2xs);
    font-weight: 700;
    letter-spacing: 0.06em;
}

.debug-card h4 i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--adm-primary) 12%, transparent);
    color: var(--adm-primary);
    font-size: var(--t-2xs);
}

/* ── Stats KPI Cards: Better hover ───────────────────── */
.stats-kpi-card {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
    transition: all var(--dur-base) var(--ease-out);
}

.stats-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-3);
}

[data-theme="dark"] .stats-kpi-card:hover {
    box-shadow: var(--shadow-3);
}

/* ── UDB Close Button ───────────────────────────────── */
.udb-close {
    border: none !important;
    background: transparent !important;
    border-radius: 50% !important;
    width: 28px !important;
    height: 28px !important;
}

/* ── Smooth scroll in tab body ──────────────────────── */
.udb-tab-body {
    scroll-behavior: smooth;
}


/* ══════════════════════════════════════════════════
   STATISTICS DASHBOARD
   ══════════════════════════════════════════════════ */

/* Time Range Filter Bar */
.stats-range-bar {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 3px;
    margin-bottom: 14px;
}

.stats-range-btn {
    border: none;
    background: transparent;
    padding: 0 14px;
    height: 27px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: var(--t-xs);
    font-weight: 500;
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--dur-fast) ease;
    white-space: nowrap;
    box-sizing: border-box;
    outline: none !important;
}

.stats-range-btn:hover {
    color: var(--text);
    background: var(--surface-hover);
}

.stats-range-btn.active {
    background: var(--adm-primary, var(--tm-accent));
    color: #fff;
}

.stats-range-btn:focus,
.stats-range-btn:focus-visible,
.stats-range-btn:active {
    outline: none !important;
    box-shadow: none !important;
}

/* Custom Date Range Picker (inline inside the bar) */
.stats-custom-range {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding-left: 10px;
    margin-left: 2px;
    border-left: 1px solid var(--border);
}

.stats-custom-range label {
    font-size: var(--t-xs);
    font-weight: 500;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.stats-date-input {
    border: 1px solid var(--border-light, #e5e7eb);
    border-radius: var(--radius-sm);
    padding: 3px 8px;
    font-size: var(--t-xs);
    font-family: inherit;
    background: var(--surface);
    color: var(--text);
    outline: none;
    height: 27px;
    box-sizing: border-box;
    transition: border-color var(--dur-fast);
}

.stats-date-input:focus {
    border-color: var(--adm-primary);
}

.stats-range-apply-btn {
    border: none;
    background: var(--adm-primary);
    color: #fff;
    padding: 3px 12px;
    border-radius: var(--radius-sm);
    font-size: var(--t-xs);
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 27px;
    box-sizing: border-box;
    transition: all var(--dur-fast);
}

.stats-range-apply-btn:hover {
    filter: brightness(1.1);
}

/* KPI Cards Grid */
.stats-kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.stats-kpi-card {
    background: linear-gradient(150deg, color-mix(in srgb, var(--surface) 95%, transparent) 0%, color-mix(in srgb, var(--surface-hover) 50%, var(--surface)) 100%);
    border: 1px solid color-mix(in srgb, var(--border-light) 50%, transparent);
    border-radius: 16px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: all var(--dur-base) ease;
}

.stats-kpi-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.05);
    border-color: color-mix(in srgb, var(--border) 60%, transparent);
}

.stats-kpi-icon {
    font-size: var(--t-md);
    color: var(--tm-accent);
    background: color-mix(in srgb, var(--tm-accent) 15%, transparent);
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.stats-kpi-icon.pulse-green {
    color: #22c55e;
    animation: kpiPulse 2s ease-in-out infinite;
}

@keyframes kpiPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

.stats-kpi-value {
    font-size: var(--t-xl);
    font-weight: 700;
    color: var(--text);
    font-family: var(--font-heading);
    line-height: 1;
    margin-bottom: 4px;
}

.stats-kpi-label {
    font-size: var(--t-2xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

/* Sekundaerzeile unter dem Label (Aufschluesselung PDF/Links). Bleibt leer,
   wenn es nichts aufzuschluesseln gibt - deshalb :empty statt fester Hoehe.
   Absolut positioniert, weil die Karten ihren Inhalt zentrieren: im Fluss
   wuerde die Zusatzzeile Wert und Label dieser einen Karte nach oben
   schieben, und die Kennzahlen der Reihe fluchten dann nicht mehr. */
.stats-kpi-sub {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 9px;
    font-size: var(--t-2xs);
    font-weight: 500;
    line-height: 1.2;
    /* Kein zusaetzliches opacity: gedaempft auf var(--text-muted) faellt der
       Kontrast auf 2,97:1 (dunkel) bzw. 2,30:1 (hell) und die Zeile ist nicht
       mehr lesbar - gemessen an der gerenderten Flaeche, siehe Pitfall 28.
       Die Unterordnung kommt aus dem Schriftbild (kein Versalsatz, kein
       letter-spacing), nicht aus der Deckkraft. */
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stats-kpi-sub:empty {
    display: none;
}

/* New Partners Badge */
.stats-new-partners {
    margin-top: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border-radius: var(--radius-xl);
    padding: 10px 18px;
    font-size: var(--t-xs);
    font-weight: 700;
    background: color-mix(in srgb, var(--tm-accent) 12%, transparent);
    color: var(--tm-accent);
    border: 1px solid color-mix(in srgb, var(--tm-accent) 25%, transparent);
    letter-spacing: 0.3px;
}

.stats-new-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--radius-xl);
    font-size: var(--t-xs);
    font-weight: 500;
}

.stats-new-badge.week {
    background: var(--tm-accent-10);
    color: var(--tm-accent-light);
    border: 1px solid var(--tm-accent-25);
}

.stats-new-badge.month {
    background: color-mix(in srgb, var(--tm-accent) 10%, transparent);
    color: var(--tm-accent);
    border: 1px solid color-mix(in srgb, var(--tm-accent) 20%, transparent);
}

/* Two Column Layout */
.stats-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}

/* Ranking Medal */
.stats-rank-medal {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--t-2xs);
    font-weight: 700;
    color: #fff;
}

.stats-rank-medal.gold {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.stats-rank-medal.silver {
    background: linear-gradient(135deg, #9ca3af, #6b7280);
}

.stats-rank-medal.bronze {
    background: linear-gradient(135deg, #cd7f32, #a0522d);
}

.stats-rank-medal.default {
    background: #374151;
    font-size: var(--t-2xs);
}

/* Table tweaks inside stats cards */
.stats-table {
    margin: 0;
}

.stats-table th,
.stats-table td {
    font-size: 0.78rem !important;
    padding: 8px 12px !important;
}

/* Online User List */
.stats-online-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stats-online-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transition: transform var(--dur-fast) var(--ease-inout), box-shadow var(--dur-fast) var(--ease-inout);
}

.stats-online-user:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 1);
}

.stats-online-dot-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: rgba(34, 197, 94, 0.1);
    border-radius: 50%;
    flex-shrink: 0;
}

.stats-online-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.8);
    position: relative;
}

.stats-online-dot::after {
    content: '';
    position: absolute;
    top: -4px;
    right: -4px;
    bottom: -4px;
    left: -4px;
    border-radius: 50%;
    border: 2px solid #22c55e;
    animation: kpiPulseRing 2s var(--ease-inout) infinite;
}

@keyframes kpiPulseRing {
    0% {
        transform: scale(0.6);
        opacity: 1;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.stats-online-info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 2px;
}

.stats-online-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stats-online-name {
    font-weight: 700;
    font-size: var(--t-sm);
    color: var(--text);
}

.stats-online-duration {
    font-size: var(--t-2xs);
    color: #16a34a;
    background: rgba(34, 197, 94, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stats-online-total-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.stats-online-company {
    font-size: var(--t-2xs);
    color: #8c8c8c;
}

.stats-online-empty {
    text-align: center;
    padding: 20px;
    color: #6b7280;
    font-size: var(--t-xs);
}

.stats-online-profile {
    font-size: var(--t-2xs);
    padding: 2px 6px;
    background: var(--tm-accent-10);
    color: var(--tm-accent-light);
    border-radius: var(--radius-sm);
    font-weight: 600;
}

.stats-online-badges {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.stats-online-total-time {
    font-size: var(--t-2xs);
    font-weight: 700;
    color: var(--text-muted);
    background: var(--panel-bg);
    border: 1px solid var(--border);
    padding: 3px 8px;
    border-radius: var(--radius-xl);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-shadow: var(--shadow-1);
}

.stats-online-total-time i {
    color: var(--tm-accent);
}

.stats-new-partners span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--radius-xl);
    font-size: var(--t-xs);
    font-weight: 500;
    background: var(--tm-accent-10);
    color: var(--tm-accent-light);
    border: 1px solid var(--tm-accent-25);
}

/* Profile Distribution Bars */
.stats-profile-bars {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.stats-profile-bar-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.stats-profile-bar-label {
    font-size: var(--t-xs);
    font-weight: 500;
    color: var(--text);
    min-width: 100px;
    text-align: right;
}

.stats-profile-bar-track {
    flex: 1;
    height: 22px;
    background: color-mix(in srgb, var(--tm-accent) 8%, transparent);
    border-radius: var(--radius-sm);
    overflow: hidden;
    position: relative;
}

.stats-profile-bar-fill {
    height: 100%;
    background: linear-gradient(135deg, var(--tm-accent), var(--tm-accent));
    border-radius: var(--radius-sm);
    min-width: 24px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 8px;
    font-size: var(--t-2xs);
    font-weight: 700;
    color: #fff;
    transition: width var(--dur-slow) var(--ease-out);
}

/* Dark theme overrides */
[data-theme="dark"] .stats-kpi-card {
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .stats-online-user {
    background: rgba(20, 20, 20, 0.6);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .stats-online-user:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .stats-online-duration {
    color: #4ade80;
    background: rgba(74, 222, 128, 0.15);
}

/* Responsive */

/* Zwischenband: 5 Kacheln nebeneinander werden unter ~1100px zu schmal fuer
   die laengste Beschriftung ("Offene Anfragen"). Feste Spaltenzahl statt
   auto-fit, damit die Aufteilung vorhersagbar bleibt. Die letzte Zeile ist
   dann kuerzer als die erste - die angehaengte Regel unten schliesst sie. */
@media (max-width: 1100px) {
    .stats-kpi-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Bei ungerader Kachelzahl bliebe die letzte schmal stehen und liesse
       eine Luecke daneben - sie fuellt die Restzeile stattdessen aus. Gilt
       fuer beide schmalen Baender (3 und 2 Spalten), nicht fuer die volle
       5er-Reihe, wo sie einen Umbruch ausloesen wuerde. */
    .stats-kpi-grid > .stats-kpi-card:last-child:nth-child(odd) {
        grid-column: span 2;
    }
}

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

    .stats-two-col {
        grid-template-columns: 1fr;
    }
}


/* ────────────────────────────────────────────────────────
   LIGHTBOX / LEGAL MODAL (Impressum)
   ──────────────────────────────────────────────────────── */
.mk-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(4, 9, 20, 0.85);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    backdrop-filter: blur(8px);
    transition: opacity var(--dur-base) var(--ease-out);
}

.mk-lightbox.visible {
    opacity: 1;
    pointer-events: auto;
}

.mk-lightbox-inner {
    transform: scale(0.96) translateY(10px);
    transition: transform var(--dur-base) var(--ease-out);
    box-shadow: var(--shadow-modal);
    max-height: 85vh;
    overflow-y: auto;
}

.mk-lightbox.visible .mk-lightbox-inner {
    transform: scale(1) translateY(0);
}


/* ══════════════════════════════════════════════════
   TESTIMONIALS SECTION
   ══════════════════════════════════════════════════ */

.testimonials-section {
    padding: 0px 5% 8px;
    /* Rueckt an die letzte Brand-Box heran: der Flex-Gap wird herausgerechnet,
       uebrig bleiben konstante 22px. Ein fester Negativwert wuerde die Box
       ueberlappen, sobald der Gap kleiner ist als er (mobil 20px). */
    margin-top: calc(22px - var(--portals-gap, 72px));
    position: relative;
    background: transparent;
    color: var(--text);
    scroll-margin-top: calc(90px + var(--kit-switch-h, 0px));
}

.testimonials-header {
    text-align: center;
    margin-bottom: 18px;
}

.testimonials-overline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--t-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--tm-accent);
    margin-bottom: 12px;
}

.testimonials-title {
    font-family: var(--font-heading);
    font-size: var(--t-xl);
    font-weight: 700;
    color: var(--text);
    margin: 0 0 1px;
    letter-spacing: -0.025em;
}

.testimonials-subtitle {
    font-size: var(--t-sm);
    color: var(--text-muted);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.5;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: stretch;
}

.testimonial-card {
    position: relative;
    background: var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 28px 24px 22px;
    box-shadow: var(--shadow-main);
    overflow: hidden;
    transition: transform var(--dur-base) ease, box-shadow var(--dur-base) ease, border-color var(--dur-base);
    display: flex;
    flex-direction: column;
}

.testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-3);
    border-color: var(--tm-accent-25);
}

.testimonial-quote-icon {
    position: absolute;
    top: 16px;
    right: 18px;
    font-size: var(--t-lg);
    color: var(--tm-accent-10);
}

.testimonial-quote {
    font-size: var(--t-sm);
    line-height: 1.6;
    color: var(--text-muted);
    font-style: italic;
    margin-bottom: 18px;
    position: relative;
    flex: 1;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 14px;
    margin-top: auto;
}

.testimonial-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tm-accent), var(--tm-accent));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--t-base);
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    overflow: hidden;
}

.testimonial-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.testimonial-author-name {
    font-size: var(--t-base);
    font-weight: 700;
    color: var(--text);
}

.testimonial-author-position {
    font-size: var(--t-xs);
    color: var(--text-muted);
    margin-top: 3px;
    line-height: 1.3;
}

.testimonial-author-company {
    font-size: var(--t-2xs);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Empty state */
.testimonials-empty {
    text-align: center;
    padding: 40px;
    color: var(--text-muted);
    font-size: var(--t-sm);
}

/* Admin table overrides */
.tm-quote-preview {
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--t-xs);
    color: var(--text-muted);
    font-style: italic;
}

.tm-toggle {
    cursor: pointer;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    font-size: var(--t-2xs);
    font-weight: 500;
    border: none;
}

.tm-toggle.active {
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
}

.tm-toggle.inactive {
    background: rgba(239, 68, 68, 0.1);
    color: var(--status-danger);
}

/* Responsive */
@media (max-width: 640px) {
    .testimonials-title {
        font-size: var(--t-lg);
    }

    .testimonials-grid {
        grid-template-columns: 1fr;
    }

    .testimonial-card {
        padding: 24px 20px 20px;
    }
}


/* ── Testimonial Photo Upload ── */
.tm-upload-area {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    border: 2px dashed rgba(218, 24, 132, 0.3);
    background: rgba(218, 24, 132, 0.03);
    cursor: pointer;
    overflow: hidden;
    transition: all var(--dur-base) var(--ease-out);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) inset;
    margin-top: 4px;
}

.tm-upload-area:hover {
    border-color: rgba(218, 24, 132, 0.6);
    background: rgba(218, 24, 132, 0.08);
    transform: scale(1.03);
}

.tm-upload-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-size: var(--t-2xs);
    font-weight: 500;
    text-align: center;
    padding: 6px;
    transition: color var(--dur-fast);
}

.tm-upload-area:hover .tm-upload-placeholder {
    color: #DA1884;
}

.tm-upload-placeholder i {
    font-size: var(--t-lg);
    opacity: 0.8;
}

.tm-upload-area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tm-upload-area.has-image {
    border-style: solid;
    border-color: #DA1884;
    border-width: 3px;
    padding: 3px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(218, 24, 132, 0.2);
}

.tm-upload-area.has-image img {
    border-radius: 50%;
}


/* ── Testimonials Admin: Card Layout ── */
.tm-admin-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px;
}

.tm-admin-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px 20px;
    color: var(--text-muted);
    font-size: var(--t-sm);
}

.tm-admin-empty i {
    font-size: var(--t-xl);
    opacity: 0.4;
}

.tm-admin-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    background: var(--surface);
    border: 1px solid transparent;
    transition: background var(--dur-fast), border-color var(--dur-fast), opacity var(--dur-base);
}

.tm-admin-card:hover {
    background: var(--surface-hover, color-mix(in srgb, var(--surface) 90%, var(--text) 10%));
    border-color: var(--border-light);
}

.tm-admin-card.tm-admin-inactive {
    opacity: 0.5;
}

.tm-admin-card.tm-admin-inactive:hover {
    opacity: 0.75;
}

.tm-admin-card-main {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
}

.tm-admin-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--border-light);
}

.tm-admin-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tm-accent);
    color: #fff;
    font-weight: 700;
    font-size: var(--t-sm);
    font-family: var(--font-heading);
    border: none;
}

.tm-admin-card-info {
    flex-shrink: 0;
    min-width: 120px;
    max-width: 180px;
}

.tm-admin-card-name {
    font-weight: 700;
    font-size: var(--t-sm);
    color: var(--text);
    font-family: var(--font-heading);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tm-admin-card-company {
    font-size: var(--t-xs);
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tm-admin-card-quote {
    flex: 1;
    min-width: 0;
    font-size: var(--t-xs);
    color: var(--text-muted);
    font-style: italic;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.tm-admin-card-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* Toggle switch */
.tm-admin-toggle {
    position: relative;
    display: inline-flex;
    cursor: pointer;
}

.tm-admin-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.tm-admin-toggle-track {
    width: 36px;
    height: 20px;
    background: var(--border);
    border-radius: var(--radius-md);
    position: relative;
    transition: background var(--dur-base);
}

.tm-admin-toggle-track::after {
    content: '';
    position: absolute;
    left: 2px;
    top: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--shadow-1);
    transition: transform var(--dur-base) var(--ease-inout);
}

.tm-admin-toggle input:checked+.tm-admin-toggle-track {
    background: var(--tm-accent);
}

.tm-admin-toggle input:checked+.tm-admin-toggle-track::after {
    transform: translateX(16px);
}

/* Action buttons */
.tm-admin-action-btn {
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--t-xs);
    transition: background var(--dur-fast), color var(--dur-fast);
}

.tm-admin-action-btn:hover {
    background: color-mix(in srgb, var(--text) 8%, transparent);
    color: var(--text);
}

.tm-admin-action-danger:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--status-danger);
}


/* ── Testimonials: Dark theme overrides ── */
[data-theme="dark"] .testimonial-card {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

[data-theme="dark"] .testimonial-card:hover {
    box-shadow: var(--shadow-3);
}

[data-theme="dark"] .tm-hero-card {
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: var(--shadow-3);
}

[data-theme="dark"] .tm-hero-avatar-wrap {
    background: linear-gradient(160deg, color-mix(in srgb, var(--tm-accent) 12%, transparent), color-mix(in srgb, var(--tm-accent) 5%, transparent));
    border-right-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .tm-hero-avatar {
    background: rgba(255, 255, 255, 0.1);
    color: var(--tm-accent, var(--tm-accent-light));
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .tm-hero-icon {
    opacity: 0.06;
}

[data-theme="dark"] .tm-hero-quote {
    color: rgba(255, 255, 255, 0.9);
}


/* ── Testimonials Slider ── */
.tm-slider {
    overflow: hidden;
    display: block !important;
    position: relative;
}

.tm-track {
    display: flex;
    will-change: transform;
    align-items: stretch;
}

/* Slider-Arrows am linken/rechten Rand der Slider-Box. */
.tm-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--border-light, rgba(0, 0, 0, 0.08));
    background: var(--panel-bg, #fff);
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    box-shadow: var(--shadow-2);
    transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast);
    font-size: var(--t-base);
}
.tm-slider-arrow:hover {
    background: var(--tm-accent, #e94d97);
    border-color: var(--tm-accent, #e94d97);
    color: #fff;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--tm-accent) 30%, transparent);
    transform: translateY(-50%) scale(1.05);
}
.tm-slider-arrow:active {
    transform: translateY(-50%) scale(0.96);
}
.tm-slider-arrow:focus-visible {
    outline: 2px solid var(--tm-accent, #e94d97);
    outline-offset: 2px;
}
.tm-slider-arrow--prev {
    left: -22px;
}
.tm-slider-arrow--next {
    right: -22px;
}

[data-theme="dark"] .tm-slider-arrow {
    background: rgba(28, 30, 38, 0.92);
    border-color: rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 720px) {
    .tm-slider-arrow {
        width: 36px;
        height: 36px;
        font-size: var(--t-sm);
    }
    .tm-slider-arrow--prev { left: -10px; }
    .tm-slider-arrow--next { right: -10px; }
}

.tm-track .testimonial-card {
    min-width: calc((100% - 48px) / 3);
    max-width: calc((100% - 48px) / 3);
    box-sizing: border-box;
    margin: 0 8px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

@media (max-width: 900px) {
    .tm-track .testimonial-card {
        min-width: 50%;
        max-width: 50%;
    }
}

@media (max-width: 640px) {
    .tm-track .testimonial-card {
        min-width: 100%;
        max-width: 100%;
    }
}

/* ════════════════ TESTIMONIAL DISPLAY MODES ════════════════ */

/* ── Admin: Mode selector cards ── */
.tm-mode-grid {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.tm-mode-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 18px;
    border: 2px solid var(--border-light);
    border-radius: var(--radius-lg);
    cursor: pointer;
    background: var(--panel-bg);
    transition: border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast);
    min-width: 90px;
    text-align: center;
}

.tm-mode-card input[type="radio"] {
    display: none;
}

.tm-mode-card i {
    font-size: var(--t-lg);
    color: var(--text-muted);
    transition: color var(--dur-fast);
}

.tm-mode-card span {
    font-size: var(--t-xs);
    font-weight: 500;
    color: var(--text);
}

.tm-mode-card small {
    font-size: var(--t-2xs);
    color: var(--text-muted);
    line-height: 1.15;
}

.tm-mode-card:hover {
    border-color: var(--tm-accent);
    transform: translateY(-2px);
}

.tm-mode-card.active {
    border-color: var(--tm-accent);
    background: var(--tm-accent-10);
}

.tm-mode-card.active i {
    color: var(--tm-accent);
}

/* ── Mode: GRID (static 3 cards) ── */

/* When hero/spotlight/strips/slider are inside the 3-column grid, span full width */
.testimonials-grid:has(.tm-hero-wrap),
.testimonials-grid:has(.tm-editorial-wrap),
.testimonials-grid:has(.tm-spotlight-wrap),
.testimonials-grid:has(.tm-strips-wrap),
.testimonials-grid:has(.tm-slider) {
    display: block;
}

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

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

@media (max-width: 640px) {
    .tm-grid-layout {
        grid-template-columns: 1fr;
    }
}

/* ── Mode: SLIDER (3-card auto-slider, existing) ── */
.tm-slider {
    overflow: hidden;
    display: block !important;
}

.tm-track {
    display: flex;
    align-items: stretch;
    will-change: transform;
}

.tm-track .testimonial-card {
    min-width: calc((100% - 48px) / 3);
    max-width: calc((100% - 48px) / 3);
    box-sizing: border-box;
    margin: 0 8px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

@media (max-width: 900px) {
    .tm-track .testimonial-card {
        min-width: calc(50% - 16px);
        max-width: calc(50% - 16px);
    }
}

@media (max-width: 640px) {
    .tm-track .testimonial-card {
        min-width: calc(100% - 16px);
        max-width: calc(100% - 16px);
    }
}

/* ── Mode: HERO (fullwidth, photo left, text right) ── */
.tm-hero-wrap {
    position: relative;
    max-width: 920px;
    margin: 0 auto;
    padding: 0 0 28px;
}

/* Hero-Mode Pfeile links/rechts an die Card statt unten. */
.tm-hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--border-light, rgba(0, 0, 0, 0.08));
    background: var(--panel-bg, #fff);
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    box-shadow: var(--shadow-2);
    transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast);
    font-size: var(--t-base);
}
.tm-hero-arrow:hover {
    background: var(--tm-accent, #e94d97);
    border-color: var(--tm-accent, #e94d97);
    color: #fff;
    box-shadow: 0 8px 22px color-mix(in srgb, var(--tm-accent) 32%, transparent);
    transform: translateY(-50%) scale(1.06);
}
.tm-hero-arrow:active {
    transform: translateY(-50%) scale(0.96);
}
.tm-hero-arrow:focus-visible {
    outline: 2px solid var(--tm-accent, #e94d97);
    outline-offset: 2px;
}
.tm-hero-arrow--prev { left: -24px; }
.tm-hero-arrow--next { right: -24px; }

[data-theme="dark"] .tm-hero-arrow {
    background: rgba(28, 30, 38, 0.92);
    border-color: rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 720px) {
    .tm-hero-arrow {
        width: 38px;
        height: 38px;
        font-size: var(--t-sm);
    }
    .tm-hero-arrow--prev { left: -8px; }
    .tm-hero-arrow--next { right: -8px; }
}

.tm-hero-card {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 0;
    align-items: stretch;
    background: var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-3);
    overflow: hidden;
    animation: tmFadeIn 0.6s ease;
    min-height: 280px;
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.tm-hero-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-modal);
}

/* Left panel – avatar + name */
.tm-hero-avatar-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 44px 32px;
    background: linear-gradient(160deg, color-mix(in srgb, var(--tm-accent) 30%, transparent), color-mix(in srgb, var(--tm-accent) 12%, transparent));
    text-align: center;
    align-self: stretch;
    border-right: 1px solid var(--border-light, rgba(0, 0, 0, 0.05));
}

.tm-hero-avatar {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--t-3xl);
    font-weight: 700;
    color: var(--text-muted);
    flex-shrink: 0;
    border: 4px solid #ffffff;
    box-shadow: var(--shadow-2);
}

.tm-hero-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tm-hero-name {
    font-weight: 700;
    font-size: var(--t-base);
    color: var(--text);
    line-height: 1.3;
    margin-bottom: 4px;
}

.tm-hero-position {
    font-size: var(--t-xs);
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.tm-hero-company {
    font-size: var(--t-xs);
    color: var(--text-muted);
    font-weight: 500;
    margin-top: 8px;
}

/* Right panel – quote */
.tm-hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 56px 64px 56px 56px;
    position: relative;
    background: var(--panel-bg);
}

.tm-hero-icon {
    position: absolute;
    top: -10px;
    right: 30px;
    font-size: 160px;
    color: var(--text);
    opacity: 0.04;
    z-index: 0;
    transform: rotate(-5deg);
    pointer-events: none;
}

.tm-hero-quote {
    font-size: var(--t-md);
    font-style: normal;
    font-weight: 400;
    color: var(--text);
    line-height: 1.9;
    position: relative;
    z-index: 1;
    opacity: 0.85;
}

/* Nav row */
.tm-hero-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 20px;
}

.tm-nav-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid var(--border-light, rgba(0, 0, 0, 0.1));
    background: var(--panel-bg);
    color: var(--text-muted);
    cursor: pointer;
    font-size: var(--t-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--dur-base) ease;
    box-shadow: var(--shadow-1);
}

.tm-nav-btn:hover {
    border-color: var(--text-muted);
    color: var(--text);
    background: var(--panel-bg);
    box-shadow: var(--shadow-2);
    transform: scale(1.05);
}

.tm-dots {
    display: flex;
    gap: 8px;
    align-items: center;
}

.tm-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--border, rgba(0, 0, 0, 0.12));
    cursor: pointer;
    transition: all var(--dur-base) ease;
}

.tm-dot.active {
    background: var(--tm-accent, #6b7280);
    transform: scale(1.5);
}

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

    .tm-hero-avatar-wrap {
        padding: 32px 24px;
        flex-direction: row;
        text-align: left;
        border-right: none;
        border-bottom: 1px solid var(--border-light, rgba(0, 0, 0, 0.05));
    }

    .tm-hero-avatar {
        width: 80px;
        height: 80px;
        font-size: var(--t-xl);
    }

    .tm-hero-content {
        padding: 32px 32px 28px;
    }

    .tm-hero-quote {
        font-size: var(--t-base);
    }

    .tm-hero-icon {
        font-size: 100px;
        top: 0;
        left: 20px;
    }
}

/* ── Mode: HERO (Elegant Modern Typography Focus) ── */
.tm-editorial-wrap {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding: 20px 0;
}

.tm-editorial-card {
    position: relative;
    background: var(--panel-bg);
    border: 1px solid var(--border-light, rgba(0, 0, 0, 0.06));
    border-radius: var(--radius-xl);
    padding: 48px 56px;
    box-shadow: var(--shadow-3);
    overflow: hidden;
    animation: tmFadeIn 0.6s ease;
    transition: transform var(--dur-base) ease, box-shadow var(--dur-base) ease;
    border-top: 4px solid var(--tm-accent, #3b82f6);
}

.tm-editorial-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-modal);
}

.tm-editorial-icon {
    position: absolute;
    top: 24px;
    left: 32px;
    font-size: 90px;
    color: var(--tm-accent, #3b82f6);
    opacity: 0.05;
    z-index: 0;
    pointer-events: none;
}

.tm-editorial-content {
    position: relative;
    z-index: 1;
}

.tm-editorial-quote {
    font-size: var(--t-md);
    font-family: var(--font-accent, 'Georgia', serif);
    font-style: italic;
    font-weight: 500;
    color: var(--text);
    line-height: 1.5;
    margin-bottom: 48px;
    opacity: 0.95;
    text-align: left;
}

.tm-editorial-author-row {
    display: flex;
    align-items: center;
    gap: 20px;
}

.tm-editorial-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--tm-accent-10, rgba(59, 130, 246, 0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--t-lg);
    font-weight: bold;
    color: var(--tm-accent, #3b82f6);
    flex-shrink: 0;
    box-shadow: var(--shadow-2);
}

.tm-editorial-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tm-editorial-author-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
}

.tm-editorial-name {
    font-weight: 700;
    font-size: var(--t-md);
    color: var(--text);
    margin-bottom: 2px;
}

.tm-editorial-role {
    font-size: var(--t-sm);
    color: var(--text-muted);
    font-weight: 500;
}

/* Nav row */
.tm-editorial-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 20px;
}

.tm-nav-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid var(--border-light, rgba(0, 0, 0, 0.1));
    background: var(--panel-bg);
    color: var(--text-muted);
    cursor: pointer;
    font-size: var(--t-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--dur-base) ease;
    box-shadow: var(--shadow-1);
}

.tm-nav-btn:hover {
    border-color: var(--text-muted);
    color: var(--text);
    background: var(--panel-bg);
    box-shadow: var(--shadow-2);
    transform: scale(1.05);
}

.tm-dots {
    display: flex;
    gap: 8px;
    align-items: center;
}

.tm-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--border, rgba(0, 0, 0, 0.12));
    cursor: pointer;
    transition: all var(--dur-base) ease;
}

.tm-dot.active {
    background: var(--tm-accent, #6b7280);
    transform: scale(1.5);
}

@media (max-width: 700px) {
    .tm-editorial-card {
        padding: 32px 24px;
    }

    .tm-editorial-quote {
        font-size: var(--t-md);
        margin-bottom: 32px;
    }

    .tm-editorial-icon {
        font-size: 80px;
        top: 10px;
        left: 20px;
    }
}



/* ── Mode: SPOTLIGHT (1 centered large card, fade) ── */
.tm-spotlight-wrap {
    max-width: 640px;
    margin: 0 auto;
}

.tm-spotlight-card {
    background: var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 48px 44px 36px;
    box-shadow: var(--shadow-modal);
    text-align: center;
    animation: tmFadeIn 0.7s ease;
    position: relative;
}

.tm-spotlight-quote-icon {
    font-size: var(--t-3xl);
    color: var(--tm-accent-25);
    margin-bottom: 20px;
    display: block;
}

.tm-spotlight-quote {
    font-size: var(--t-md);
    font-style: italic;
    color: var(--text);
    line-height: 1.8;
    margin-bottom: 32px;
}

.tm-spotlight-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, var(--tm-accent), var(--tm-accent));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--t-xl);
    font-weight: 700;
    color: #fff;
    margin: 0 auto 12px;
    border: 3px solid var(--tm-accent-25);
}

.tm-spotlight-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tm-spotlight-name {
    font-weight: 700;
    font-size: var(--t-base);
    color: var(--text);
}

.tm-spotlight-company {
    font-size: var(--t-xs);
    color: var(--text-muted);
    margin-top: 2px;
}

/* ── Mode: STRIPS (compact horizontal rows) ── */
.tm-strips-wrap {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 800px;
    margin: 0 auto;
}

.tm-strip {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 22px 8px;
    border-bottom: 1px solid var(--border-light);
    animation: tmFadeIn 0.3s ease;
}

.tm-strip:last-child {
    border-bottom: none;
}

.tm-strip-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, var(--tm-accent), var(--tm-accent));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--t-base);
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.tm-strip-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tm-strip-body {
    flex: 1;
}

.tm-strip-quote-icon {
    font-size: var(--t-sm);
    color: var(--tm-accent);
    margin-right: 6px;
    opacity: 0.6;
}

.tm-strip-quote {
    font-size: var(--t-sm);
    font-style: italic;
    color: var(--text);
    line-height: 1.6;
    margin-bottom: 6px;
}

.tm-strip-meta {
    display: flex;
    gap: 8px;
    align-items: center;
}

.tm-strip-name {
    font-weight: 700;
    font-size: var(--t-xs);
    color: var(--text);
}

.tm-strip-sep {
    color: var(--text-muted);
    font-size: var(--t-xs);
}

.tm-strip-company {
    font-size: var(--t-xs);
    color: var(--text-muted);
}

@keyframes tmFadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ═══ PLACEMENT LIGHTBOX ═══ */
.mk-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(6px);
    align-items: center;
    justify-content: center;
    animation: mkLbIn 0.25s ease;
}

.mk-lightbox.open {
    display: flex;
}

@keyframes mkLbIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.mk-lightbox-inner {
    position: relative;
    background: var(--panel-bg);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-modal);
    overflow: hidden;
    max-width: min(900px, 92vw);
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: mkLbSlide 0.3s var(--ease-out);
}

@keyframes mkLbSlide {
    from {
        transform: scale(0.92) translateY(16px);
        opacity: 0;
    }

    to {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

.mk-lightbox-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.12);
    color: var(--text);
    font-size: var(--t-base);
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--dur-fast);
}

.mk-lightbox-close:hover {
    background: rgba(0, 0, 0, 0.25);
}

.mk-lightbox-title {
    padding: 16px 56px 12px 20px;
    font-weight: 700;
    font-size: var(--t-base);
    color: var(--text);
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}

.mk-lightbox-img-wrap {
    position: relative;
    flex: 1;
    overflow: hidden;
    background: #000;
    min-height: 200px;
}

.mk-lightbox-img-wrap img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    opacity: 0;
    transition: opacity var(--dur-base) ease;
}

.mk-lightbox-img-wrap img.mk-active {
    opacity: 1;
}

.mk-lightbox-nav {
    display: flex;
    gap: 7px;
    justify-content: center;
    padding: 10px 0 12px;
    flex-shrink: 0;
}

.mk-lb-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--border);
    cursor: pointer;
    transition: background var(--dur-fast), transform var(--dur-fast);
    border: none;
}

.mk-lb-dot.active {
    background: var(--accent);
    transform: scale(1.5);
}

/* ═══ HOVER-SWAP: hide old overlay completely when not in that mode ═══ */
body:not([data-screenshot-mode="hover-swap"]) .mockup-overlay {
    display: none !important;
}

body[data-screenshot-mode="hover-swap"] .mockup-overlay {
    display: block;
}

/* Tile cursor in lightbox mode.
   `.addon-needs-tier` ist ausgenommen: ein Booster ohne gewaehltes Paket ist
   gesperrt, die Lupe wuerde dort "Bild vergroessern" versprechen und damit
   genau das Gegenteil des Sperrzustands signalisieren. Der Ausschluss steht
   hier statt als zweite Regel mit hoeherer Spezifitaet, damit die Absicht an
   der Stelle sichtbar ist, an der der Cursor vergeben wird. */
body[data-screenshot-mode="lightbox"] .tile:not(.disabled):not(.addon-needs-tier) {
    cursor: zoom-in;
}

/* ═══ CROPPER.JS – Larger resize handles ═══ */
.cropper-point {
    width: 18px !important;
    height: 18px !important;
    background-color: rgba(255, 255, 255, 0.95) !important;
    border: 2.5px solid #3b82f6 !important;
    border-radius: 50% !important;
    opacity: 1 !important;
    box-shadow: var(--shadow-1);
    transition: transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}

.cropper-point:hover {
    transform: scale(1.3);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.5);
    background-color: #3b82f6 !important;
    border-color: #fff !important;
}

/* Corner handles – offset so they sit precisely at the corner */
.cropper-point.point-nw {
    margin-top: -9px !important;
    margin-left: -9px !important;
}

.cropper-point.point-ne {
    margin-top: -9px !important;
    margin-right: -9px !important;
}

.cropper-point.point-sw {
    margin-bottom: -9px !important;
    margin-left: -9px !important;
}

.cropper-point.point-se {
    margin-bottom: -9px !important;
    margin-right: -9px !important;
}

/* Edge handles – wider hit area */
.cropper-point.point-n,
.cropper-point.point-s {
    width: 40px !important;
    border-radius: var(--radius-md) !important;
    margin-left: -20px !important;
}

.cropper-point.point-e,
.cropper-point.point-w {
    height: 40px !important;
    border-radius: var(--radius-md) !important;
    margin-top: -20px !important;
}

/* Cropbox border */
.cropper-view-box {
    outline: 2.5px solid rgba(59, 130, 246, 0.7) !important;
    outline-color: rgba(59, 130, 246, 0.7) !important;
}

/* Dashed guide lines */
.cropper-dashed {
    border-color: rgba(255, 255, 255, 0.4) !important;
}

/* Crop modal – larger, centered */
#cropModal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
}

/* Auto-confirm countdown animation on confirm button */
#cropConfirmBtn.crop-auto-active {
    position: relative;
    overflow: hidden;
}

#cropConfirmBtn.crop-auto-active::before {
    content: attr(data-countdown) 's';
    margin-right: 6px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

#cropConfirmBtn.crop-auto-active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: #fff;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    animation: cropAutoBar 5s linear forwards;
}

@keyframes cropAutoBar {
    from {
        width: 100%;
    }

    to {
        width: 0%;
    }
}

/* Quality warning badge */
.crop-quality-warn {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10002;
    background: rgba(245, 158, 11, 0.95);
    color: #fff;
    font-size: var(--t-xs);
    font-weight: 500;
    padding: 10px 20px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-2);
    animation: cropWarnIn 0.3s ease;
    white-space: nowrap;
}

.crop-quality-warn i {
    margin-right: 6px;
}

@keyframes cropWarnIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* ── Premium Scrollbars for Admin Areas ── */
.mc-body::-webkit-scrollbar,
.udb-tab-body::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.mc-body::-webkit-scrollbar-track,
.udb-tab-body::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: var(--radius-sm);
}

.mc-body::-webkit-scrollbar-thumb,
.udb-tab-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-sm);
}

.mc-body::-webkit-scrollbar-thumb:hover,
.udb-tab-body::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* ═══════════════════════════════════════════════════════════════
   TOAST NOTIFICATIONS
   ═══════════════════════════════════════════════════════════════ */
.tmx-toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 100000;
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    pointer-events: none;
    max-width: 380px;
}

.tmx-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border-radius: var(--radius-md);
    background: rgba(30, 30, 40, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: var(--shadow-3);
    color: #fff;
    font-size: var(--t-xs);
    line-height: 1.45;
    animation: tmx-toast-in 0.35s var(--ease-out) forwards;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: opacity var(--dur-fast);
}

.tmx-toast:hover {
    opacity: 0.85;
}

.tmx-toast.tmx-toast-out {
    animation: tmx-toast-out 0.3s ease-in forwards;
}

.tmx-toast-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--t-sm);
}

.tmx-toast-body {
    flex: 1;
    min-width: 0;
}

.tmx-toast-title {
    font-weight: 700;
    font-size: var(--t-xs);
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 2px;
    opacity: 0.7;
}

.tmx-toast-msg {
    word-break: break-word;
}

/* Progress bar */
.tmx-toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    animation: tmx-toast-progress 3.5s linear forwards;
}

/* Type: Success */
.tmx-toast.tmx-toast-success .tmx-toast-icon {
    background: rgba(76, 175, 80, 0.2);
    color: #66bb6a;
}

.tmx-toast.tmx-toast-success .tmx-toast-progress {
    background: #66bb6a;
}

/* Type: Error */
.tmx-toast.tmx-toast-error .tmx-toast-icon {
    background: rgba(244, 67, 54, 0.2);
    color: #ef5350;
}

.tmx-toast.tmx-toast-error .tmx-toast-progress {
    background: #ef5350;
}

/* Type: Info */
.tmx-toast.tmx-toast-info .tmx-toast-icon {
    background: var(--tm-accent-10);
    color: var(--tm-accent);
}

.tmx-toast.tmx-toast-info .tmx-toast-progress {
    background: var(--tm-accent);
}

/* Type: Warning */
.tmx-toast.tmx-toast-warning .tmx-toast-icon {
    background: rgba(255, 167, 38, 0.2);
    color: #ffa726;
}

.tmx-toast.tmx-toast-warning .tmx-toast-progress {
    background: #ffa726;
}

@keyframes tmx-toast-in {
    from {
        opacity: 0;
        transform: translateX(40px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes tmx-toast-out {
    from {
        opacity: 1;
        transform: translateX(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateX(40px) scale(0.95);
    }
}

@keyframes tmx-toast-progress {
    from {
        width: 100%;
    }

    to {
        width: 0%;
    }
}

@media (max-width: 480px) {
    .tmx-toast-container {
        bottom: 12px;
        right: 12px;
        left: 12px;
        max-width: none;
    }
}

/* ═══════════════════════════════════════════════════════════════
   TAB DESCRIPTIONS
   ═══════════════════════════════════════════════════════════════ */
.udb-tab-desc {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 18px;
    margin: 0 0 16px;
    background: linear-gradient(150deg,
            color-mix(in srgb, var(--surface) 90%, transparent) 0%,
            color-mix(in srgb, var(--surface-hover) 50%, var(--surface)) 100%);
    border: 1px solid color-mix(in srgb, var(--border-light) 40%, transparent);
    border-radius: 16px;
    font-size: var(--t-xs);
    line-height: 1.55;
    color: var(--text-muted);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.udb-tab-desc i {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--tm-accent, #DA1884);
    opacity: 0.7;
    font-size: var(--t-xs);
}

.udb-tab-desc em {
    font-style: normal;
    font-weight: 500;
    color: var(--tm-accent, #DA1884);
}

/* ── Tab Rabattierung ────────────────────────────────
   Karten-Layout: Paket-Rabatte + Zeitraum. Zeilen mit
   gesetztem Rabatt werden per .has-discount markiert
   (Akzentstrich links + Tönung), gesteuert in admin.js. */
/* Eine gemeinsame Breite fuer Banner, Karten und Fussleiste, damit im
   1200px-Modal keine Kante springt. Formularzeilen laufen nicht ueber
   die volle Modalbreite - ab 1000px stehen die zwei Karten stattdessen
   nebeneinander. */
#udbPanelDiscounting {
    max-width: 640px;
}

.dt-layout {
    display: grid;
    gap: 14px;
}

@media (min-width: 1000px) {

    #udbPanelDiscounting {
        max-width: 1000px;
    }

    /* Named areas statt impliziter Grid-Zeilen: eine Grid-Row sizet sich auf
       den HOECHSTEN Eintrag darin, auch wenn die kuerzere Karte per
       align-items:start nicht selbst mitwaechst - die Luecke landet dann
       einfach eine Ebene tiefer, zwischen "Rabatt pro Paket" und "Zeitraum"
       (Bug vom 28.07.2026, Multibrand-Staffel ist die deutlich hoehere Karte).
       Die Staffel spannt hier stattdessen explizit beide Zeilen. */
    .dt-layout {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
        grid-template-areas:
            "rabatt bundle"
            "zeit   bundle";
        align-items: start;
    }

    .dt-card-rabatt { grid-area: rabatt; }
    .dt-card-bundle { grid-area: bundle; }
    .dt-card-zeitraum { grid-area: zeit; }
}

.dt-card {
    padding: 0 18px 16px;
    background: linear-gradient(150deg,
            color-mix(in srgb, var(--surface) 90%, transparent) 0%,
            color-mix(in srgb, var(--surface-hover) 45%, var(--surface)) 100%);
    border: 1px solid color-mix(in srgb, var(--border-light) 55%, transparent);
    border-radius: var(--radius-lg, 16px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.dt-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid color-mix(in srgb, var(--border-light) 60%, transparent);
}

.dt-card-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-size: var(--t-sm);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text);
}

.dt-card-title i {
    font-size: var(--t-xs);
    color: var(--tm-accent, #DA1884);
    opacity: 0.75;
}

.dt-card-hint {
    font-size: var(--t-xs);
    color: var(--text-muted);
    opacity: 0.8;
}

/* Status-Pille: off | active | scheduled | expired */
.dt-status {
    padding: 4px 11px;
    border-radius: 999px;
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: -0.005em;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}

.dt-status[data-state="off"] {
    background: color-mix(in srgb, var(--text-muted) 10%, transparent);
    border-color: color-mix(in srgb, var(--text-muted) 18%, transparent);
    color: var(--text-muted);
}

.dt-status[data-state="active"] {
    background: color-mix(in srgb, #2e9e4f 14%, transparent);
    border-color: color-mix(in srgb, #2e9e4f 32%, transparent);
    color: #2e7d43;
}

.dt-status[data-state="scheduled"] {
    background: color-mix(in srgb, #d98324 14%, transparent);
    border-color: color-mix(in srgb, #d98324 32%, transparent);
    color: #b3701f;
}

.dt-status[data-state="expired"] {
    background: color-mix(in srgb, #d0453d 12%, transparent);
    border-color: color-mix(in srgb, #d0453d 28%, transparent);
    color: #c0453d;
}

/* Eingabe weicht vom gespeicherten Stand ab. Bewusst der Brand-Akzent und
   nicht Gruen/Orange: die anderen drei Zustaende beschreiben, was der Server
   tut, dieser hier, dass er es noch nicht tut. */
.dt-status[data-state="unsaved"] {
    background: color-mix(in srgb, var(--tm-accent) 12%, transparent);
    border-color: color-mix(in srgb, var(--tm-accent) 34%, transparent);
    color: #b31468;
}

[data-theme="dark"] .dt-status[data-state="active"] { color: #6ed48c; }
[data-theme="dark"] .dt-status[data-state="scheduled"] { color: #eab069; }
[data-theme="dark"] .dt-status[data-state="expired"] { color: #f08a83; }
[data-theme="dark"] .dt-status[data-state="unsaved"] { color: #f57ab8; }

/* Der Brand-Magenta liegt auf dunklem Grund knapp unter AA (rund 4,3:1).
   Im Dark-Theme daher aufgehellt, statt die Markenfarbe im Light zu opfern. */
[data-theme="dark"] .dt-row.has-discount .dt-row-name,
[data-theme="dark"] .dt-row.has-discount .dt-select,
[data-theme="dark"] .dt-row.has-discount .dt-select-chevron {
    color: color-mix(in srgb, var(--tm-accent, #DA1884) 62%, #fff);
}

/* Paket-Zeilen */
.dt-grid {
    display: grid;
}

.dt-row {
    position: relative;
    display: grid;
    grid-template-columns: 1fr minmax(0, 200px);
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    margin: 0 -12px;
    border-radius: 10px;
    cursor: pointer;
    transition: background var(--dur-fast) ease;
}

.dt-row + .dt-row {
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--border-light) 45%, transparent);
}

.dt-row:hover {
    background: color-mix(in srgb, var(--surface-hover) 55%, transparent);
}

/* Akzentstrich links, nur bei gesetztem Rabatt */
.dt-row::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 50%;
    width: 3px;
    height: 0;
    border-radius: 999px;
    background: var(--tm-accent, #DA1884);
    transform: translateY(-50%);
    transition: height var(--dur-fast) var(--ease-out, ease);
}

.dt-row.has-discount::before {
    height: 22px;
}

.dt-row.has-discount {
    background: color-mix(in srgb, var(--tm-accent, #DA1884) 5%, transparent);
}

.dt-row-name {
    font-family: var(--font-heading);
    font-size: var(--t-sm);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text);
    transition: color var(--dur-fast);
}

.dt-row.has-discount .dt-row-name {
    color: var(--tm-accent, #DA1884);
}

/* Native Selects, eigener Chevron */
.dt-select-wrap {
    position: relative;
    display: block;
}

.dt-select {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    padding: 9px 34px 9px 13px;
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 12px);
    color: var(--text);
    font-family: var(--font-heading);
    font-size: var(--t-xs);
    font-weight: 500;
    cursor: pointer;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast);
}

.dt-select:hover {
    border-color: color-mix(in srgb, var(--tm-accent, #DA1884) 35%, var(--border));
}

.dt-select:focus-visible {
    outline: none;
    border-color: var(--tm-accent, #DA1884);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tm-accent, #DA1884) 14%, transparent);
}

.dt-row.has-discount .dt-select {
    border-color: color-mix(in srgb, var(--tm-accent, #DA1884) 45%, transparent);
    background: color-mix(in srgb, var(--tm-accent, #DA1884) 7%, var(--input-bg));
    color: var(--tm-accent, #DA1884);
    font-weight: 600;
}

.dt-select-chevron {
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 0.62rem;
    color: var(--text-muted);
    opacity: 0.7;
}

.dt-row.has-discount .dt-select-chevron {
    color: var(--tm-accent, #DA1884);
    opacity: 0.9;
}

/* ── Multibrand-Staffel: Zahleneingabe statt Dropdown ───────────
   Die Staffel laeuft in ganzen Prozentschritten (5/8/12), nicht in den
   groben 5er-Stufen des Paketrabatts. Ein Dropdown mit 25 Eintraegen
   waere dafuer das falsche Werkzeug, deshalb ein Zahlenfeld in derselben
   Optik wie .dt-select. */
.dt-card-sub {
    margin: 0 0 14px;
    font-size: var(--t-xs);
    line-height: 1.5;
    color: var(--text-muted);
}

.dt-num-wrap {
    position: relative;
    display: block;
}

.dt-num {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    padding: 9px 34px 9px 13px;
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 12px);
    color: var(--text);
    font-family: var(--font-heading);
    font-size: var(--t-xs);
    font-weight: 500;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast);
}

/* Spinner weg: die Pfeile sind bei 25 moeglichen Werten reine Fummelei
   und verdecken auf Webkit die Prozent-Einheit rechts. */
.dt-num::-webkit-outer-spin-button,
.dt-num::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.dt-num {
    -moz-appearance: textfield;
}

.dt-num:hover {
    border-color: color-mix(in srgb, var(--tm-accent, #DA1884) 35%, var(--border));
}

.dt-num:focus-visible {
    outline: none;
    border-color: var(--tm-accent, #DA1884);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tm-accent, #DA1884) 14%, transparent);
}

.dt-num-unit {
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: var(--t-xs);
    color: var(--text-muted);
    opacity: 0.7;
}

.dt-row.has-discount .dt-num {
    border-color: color-mix(in srgb, var(--tm-accent, #DA1884) 45%, transparent);
    background: color-mix(in srgb, var(--tm-accent, #DA1884) 7%, var(--input-bg));
    color: var(--tm-accent, #DA1884);
    font-weight: 600;
}

.dt-row.has-discount .dt-num-unit {
    color: var(--tm-accent, #DA1884);
    opacity: 0.9;
}

/* Zeitraum */
.dt-dates {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    padding-top: 12px;
}

.dt-date-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.dt-date-label {
    font-size: var(--t-xs);
    font-weight: 500;
    color: var(--text-muted);
}

.dt-date {
    width: 168px;
    max-width: 100%;
    padding: 9px 12px;
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 12px);
    color: var(--text);
    font-family: var(--font-heading);
    font-size: var(--t-xs);
    font-weight: 500;
    outline: none;
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}

.dt-date:hover {
    border-color: color-mix(in srgb, var(--tm-accent, #DA1884) 35%, var(--border));
}

.dt-date:focus {
    border-color: var(--tm-accent, #DA1884);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tm-accent, #DA1884) 14%, transparent);
}

.dt-date::-webkit-calendar-picker-indicator {
    opacity: 0.45;
    cursor: pointer;
    transition: opacity var(--dur-fast);
}

.dt-date:hover::-webkit-calendar-picker-indicator {
    opacity: 0.8;
}

/* Ohne color-scheme rendert der Browser das native Icon (und den Picker-Popup)
   immer im Hell-Schema, selbst im Dark-Theme: dunkles Icon auf dunklem Grund,
   praktisch unsichtbar. */
[data-theme="dark"] .dt-date {
    color-scheme: dark;
}

.dt-date-arrow {
    padding-bottom: 12px;
    font-size: 0.7rem;
    color: var(--text-muted);
    opacity: 0.45;
}

/* Fussleiste: angedockt statt angehaengt.
   Sie stand als letzte Zeile unter den Karten und war bei ueblicher
   Fensterhoehe nur nach dem Scrollen zu sehen - zusammen mit der
   240px-Bodenreserve des Tab-Bodys (siehe unten) lag "Speichern"
   ausserhalb des Blickfelds, obwohl der Inhalt sonst passte.
   sticky statt fixed: die Leiste gehoert zum Panel, verschwindet mit
   ihm beim Tabwechsel und braucht keine eigene Sichtbarkeitslogik.
   Der Hintergrund muss DECKEND sein (--surface/--panel-bg sind in
   allen drei Themes Hex-Werte), sonst scheinen die Karten beim
   Scrollen durch die Leiste. Optik bewusst die der .dt-card, damit
   sie als Teil der Ansicht liest und nicht als loser Button. */
.dt-actions {
    position: sticky;
    bottom: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-top: 16px;
    padding: 12px 16px;
    border: 1px solid color-mix(in srgb, var(--border-light) 55%, transparent);
    border-radius: var(--radius-lg, 16px);
    background: linear-gradient(150deg,
            color-mix(in srgb, var(--surface) 92%, var(--panel-bg)) 0%,
            color-mix(in srgb, var(--surface-hover) 45%, var(--panel-bg)) 100%);
    box-shadow: 0 -12px 24px -20px rgba(0, 0, 0, 0.55),
        0 2px 8px rgba(0, 0, 0, 0.03),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Sockel unter der Leiste. Sie klebt mit etwas Luft zum Modalrand, und
   durch genau diese Luft schob sich beim Scrollen der naechste Inhalt
   ins Bild - halb angeschnitten, direkt unter einer Leiste, die
   eigentlich abschliesst. Der Sockel deckt den Streifen mit dem
   Modalgrund ab. Panelbreite reicht, links und rechts davon liegt
   ohnehin nichts. */
.dt-actions::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 20px;
    background: var(--panel-bg, #fff);
    pointer-events: none;
}

/* Der Speicher-Button bringt aus .udb-gate-save-btn ein margin-top und
   align-self:flex-end mit (dort sitzt er am Ende einer Formularspalte).
   In der Leiste ist er ein Zeilenelement. */
.dt-actions .udb-gate-save-btn {
    align-self: center;
    margin-top: 0;
    flex-shrink: 0;
}

.dt-actions-note {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-right: auto;
    min-width: 0;
    font-size: var(--t-xs);
    color: var(--text-muted);
}

/* Kein opacity auf den beiden Hinweistexten: gedaempft ueber die Deckkraft
   landen sie bei 2,3:1 bzw. 2,7:1 und sind auf hellem Grund kaum noch zu
   lesen. Der gedaempfte Eindruck kommt stattdessen aus der Farbe selbst
   (gemessen >= 5,3:1 ueber Light, Dark und Black-Week). */
.dt-sum-label {
    font-size: var(--t-2xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--text-muted) 75%, var(--text));
}

/* Ein Paket = eine Pille. Vorher stand alles als kommaseparierte Zeile
   in einem einzigen <strong> und war ab drei Saetzen schlecht zu lesen. */
.dt-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--tm-accent, #DA1884) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--tm-accent, #DA1884) 22%, transparent);
    color: var(--text);
    font-size: var(--t-2xs);
    font-weight: 500;
    white-space: nowrap;
}

/* Markenton beigemischt statt pur: reines --tm-accent auf dem hellen
   Tint liegt bei 4,1:1 und damit unter der Lesbarkeitsschwelle
   (gleicher Fehler wie bei .tier-price, siehe Pitfall 28). */
.dt-chip b {
    font-weight: 700;
    color: color-mix(in srgb, var(--tm-accent, #DA1884) 50%, var(--text));
}

.dt-sum-empty {
    font-size: var(--t-xs);
    color: color-mix(in srgb, var(--text-muted) 70%, var(--text));
}

/* Der Tab-Body haelt unten 240px frei, damit die Overflow-Menues der
   Tabellen-Tabs aufklappen koennen. Im Rabatt-Tab klappt nichts auf
   (die Auswahlfelder sind native <select>), dort schob die Reserve nur
   die Fussleiste aus dem Blick. Die :has-Regel traegt eine ID und
   sticht die !important-Basisregel damit ueber die Spezifitaet. */
.udb-tab-body:has(#udbPanelDiscounting.active) {
    padding-bottom: 16px !important;
}

/* ─── Partner-Tab: Kampagnen-Zeitraum ───
   Erbt Feld-Optik von .dt-date / .dt-status (Rabatt-Tab), damit beide
   Zeitraum-Bedienungen gleich aussehen. Eigen ist nur der Rahmen. */
.ksched {
    margin: 0 0 16px 0;
    padding: 14px 16px;
    border-radius: var(--radius-md, 12px);
    background: color-mix(in srgb, var(--text) 3%, var(--panel-bg, transparent));
    border: 1px solid var(--border-light, #e5e5e5);
}

/* Erklaerung ueber den Feldern. Die Statuszeile darunter sagt, was der aktuell
   eingestellte Zeitraum bewirkt - sie beantwortet aber nicht, wofuer die Box
   ueberhaupt da ist. Beides zusammen macht die Funktion ohne Vorwissen lesbar,
   inklusive der ueberraschenden Regel, dass ausserhalb des Zeitraums auch fest
   zugewiesene Partner den Standard sehen. */
.ksched-lead {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 0 0 12px;
    padding: 0 0 12px;
    border-bottom: 1px solid color-mix(in srgb, var(--border-light) 45%, transparent);
}

.ksched-lead strong {
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: -0.005em;
    color: var(--text);
}

.ksched-lead span {
    font-size: var(--t-xs);
    line-height: 1.55;
    color: var(--text-muted);
}

.ksched-lead em {
    font-style: normal;
    font-weight: 600;
    color: var(--text);
}

.ksched-main {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
}

.ksched-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    margin-bottom: 3px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--tm-accent) 12%, transparent);
    color: var(--tm-accent, #DA1884);
    font-size: var(--t-sm);
}

.ksched-fields {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    /* minmax(0)-Aequivalent: ohne das sprengen die Felder die Leiste nach rechts */
    min-width: 0;
    flex: 1 1 auto;
}

.ksched-select {
    width: 210px;
    /* <select> erbt die Hoehe von .dt-date nicht zuverlaessig ueber Browser */
    height: 38px;
    cursor: pointer;
}

.ksched-save {
    margin-bottom: 1px;
    flex: 0 0 auto;
}

/* Der Haken erbt von .udb-add-btn den vollen Brand-Grund und sah dadurch in
   JEDEM Zustand gleich dringlich aus, also nie dringlich. Umgekehrt herum:
   ohne offene Eingabe gedaempft, erst eine ungespeicherte Aenderung schaltet
   ihn auf den Akzent. Er ist der einzige Weg, den Zeitraum scharf zu stellen. */
.ksched:not([data-dirty]) .ksched-save {
    background: color-mix(in srgb, var(--text-muted) 16%, transparent);
    color: var(--text-muted);
}

.ksched:not([data-dirty]) .ksched-save:hover {
    background: color-mix(in srgb, var(--text-muted) 26%, transparent);
    color: var(--text);
}

.ksched[data-dirty] .ksched-save {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--tm-accent) 20%, transparent);
}

.ksched-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-light, #e5e5e5);
}

.ksched-hint {
    font-size: var(--t-xs);
    color: var(--text-muted);
    opacity: 0.85;
    min-width: 0;
}

/* ── Texte des Umschalt-Banners (aufklappbar) ─────────────────
   Vier Zustandsgruppen mit je vier Feldern. Die Eingaben erben ihr Aussehen
   von .udb-gate-field (Mission-Control-Formulare), nur die Anordnung ist
   eigen: zwei Spalten DE | EN, damit die Gegensprache immer daneben steht
   und beim Ausfuellen nicht vergessen wird. */
.ksched-texts {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-light, #e5e5e5);
}

.ksched-texts-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 4px 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.ksched-texts-toggle > .fa-bullhorn {
    color: var(--tm-accent, #DA1884);
    opacity: 0.8;
    flex-shrink: 0;
}

.ksched-texts-lead {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ksched-texts-lead strong {
    font-size: var(--t-xs);
    font-weight: 700;
    color: var(--text);
}

.ksched-texts-lead small {
    font-size: var(--t-xs);
    color: var(--text-muted);
    opacity: 0.85;
}

.ksched-texts-chevron {
    margin-left: auto;
    flex-shrink: 0;
    color: var(--text-muted);
    transition: transform var(--dur-fast, 0.15s) var(--ease-out, ease);
}

.ksched-texts:not(.collapsed) .ksched-texts-chevron {
    transform: rotate(180deg);
}

.ksched-texts-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 12px;
}

.ksched-text-help {
    font-size: var(--t-xs);
    color: var(--text-muted);
    line-height: 1.5;
}

.ksched-text-help code {
    padding: 1px 5px;
    border-radius: 5px;
    background: color-mix(in srgb, var(--text) 8%, transparent);
    font-size: 0.92em;
}

.ksched-text-group {
    padding: 12px 14px;
    border-radius: var(--radius-md, 12px);
    background: color-mix(in srgb, var(--text) 3%, transparent);
    border: 1px solid color-mix(in srgb, var(--border-light) 60%, transparent);
}

.ksched-text-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.ksched-text-head strong {
    font-size: var(--t-xs);
    color: var(--text);
}

.ksched-text-head span {
    font-size: var(--t-2xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--tm-accent, #DA1884);
    opacity: 0.9;
}

.ksched-text-hint {
    margin: 3px 0 10px;
    font-size: var(--t-xs);
    color: var(--text-muted);
    opacity: 0.85;
}

/* minmax(0,1fr) statt 1fr: sonst blaeht der laengste Beispieltext im
   placeholder die Spalte auf und die Box laeuft seitlich heraus (Pitfall 9). */
.ksched-text-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
}

.ksched-text-fields textarea {
    min-height: 58px;
    resize: vertical;
    line-height: 1.45;
}

@media (max-width: 700px) {
    .ksched-text-fields { grid-template-columns: minmax(0, 1fr); }
}

/* Schmales Panel: das Icon ist reine Dekoration und wuerde eine eigene
   Zeile belegen, sobald die Felder umbrechen. Der Speichern-Knopf rutscht
   dann rechts unter die Felder statt allein links zu stehen. */
@media (max-width: 860px) {
    .ksched-icon { display: none; }
    .ksched-save { margin-left: auto; }
}

@media (max-width: 600px) {
    .ksched-fields { gap: 10px; }
    .ksched-select,
    .ksched-fields .dt-date { width: 100%; }
    .ksched-fields .dt-date-field { flex: 1 1 100%; }
}

/* ─── Rabatt-Tab: Kit-Kontext + Early-Bird-Schalter ─── */
.dt-scope {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px 0;
    padding: 8px 12px;
    border-radius: var(--radius-md, 10px);
    background: color-mix(in srgb, var(--tm-accent) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--tm-accent) 18%, transparent);
    font-size: var(--t-xs);
    color: var(--text-muted);
}

.dt-scope i {
    color: var(--tm-accent, #DA1884);
}

.dt-scope strong {
    font-weight: 700;
    color: var(--text);
}

.dt-eb {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border-light, #e5e5e5);
    cursor: pointer;
}

.dt-eb-check {
    margin-top: 2px;
    width: 16px;
    height: 16px;
    accent-color: var(--tm-accent, #DA1884);
    flex-shrink: 0;
    cursor: pointer;
}

.dt-eb-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.dt-eb-text strong {
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--text);
}

.dt-eb-text small {
    font-size: var(--t-2xs);
    color: var(--text-muted);
    line-height: 1.45;
}

/* Vorschau-Schalter. Steht bewusst UNTER der Trennlinie der Early-Bird-
   Zeile und traegt keinen Speichern-Bezug: er schaltet nichts am Kit,
   sondern laesst die Frist einmal vorlaufen. */
.dt-preview {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--border-light, #e5e5e5);
}

.dt-preview .mc-toggle-btn {
    flex-shrink: 0;
    margin-top: 2px;
}

/* Waehrend die Vorschau laeuft, sagt die Frist selbst, dass sie gerade
   nicht die echte ist. Ohne diesen Hinweis liest sich der rasende
   Countdown wie ein Defekt. */
body.eb-preview .bw-deadline {
    position: relative;
}

body.eb-preview .bw-deadline::after {
    content: 'Vorschau';
    position: absolute;
    top: 0;
    right: 0;
    padding: 3px 8px;
    border: 1px solid rgba(255, 215, 0, 0.35);
    border-radius: 999px;
    font-family: var(--font-heading);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #FFD700;
    background: rgba(255, 215, 0, 0.08);
    pointer-events: none;
}

/* Sitzt in der Fussleiste neben den Satz-Pillen: den eigenen Abstand
   traegt dort das Flex-gap, und der Text bekommt denselben
   beigemischten Markenton wie .dt-chip b (Kontrast, Pitfall 28). */
.dt-eb-flag {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--tm-accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--tm-accent) 26%, transparent);
    color: color-mix(in srgb, var(--tm-accent, #DA1884) 45%, var(--text));
    font-size: var(--t-2xs);
    font-weight: 700;
    white-space: nowrap;
}

/* Collapsible Description */
.udb-tab-desc--collapsible {
    cursor: pointer;
    position: relative;
    transition: max-height var(--dur-base) ease, padding var(--dur-base) ease;
}
.udb-tab-desc--collapsible.collapsed span {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.udb-desc-chevron {
    flex-shrink: 0;
    font-size: var(--t-2xs);
    opacity: 0.4;
    transition: transform var(--dur-base) ease;
    margin-left: auto;
    align-self: center;
}
.udb-tab-desc--collapsible.collapsed .udb-desc-chevron {
    transform: rotate(-90deg);
}

/* ── User Cell: Name + Subline ── */
.udb-user-cell {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.udb-user-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    border-radius: 4px;
    padding: 1px 3px;
    margin: -1px -3px;
}
.udb-user-name:hover,
.udb-user-name:focus-visible {
    background: var(--surface-hover);
    outline: none;
}
.udb-name-edit {
    display: flex;
    gap: 4px;
    margin: -1px -3px 2px;
}
.udb-name-input {
    font-size: var(--t-xs);
    font-weight: 600;
    padding: 2px 6px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    flex: 1 1 50%;
    min-width: 60px;
}
.udb-user-sub {
    font-size: var(--t-2xs);
    color: var(--text-muted);
    opacity: 0.65;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.udb-user-sub-edit {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
}
.udb-sub-input {
    font-size: var(--t-2xs);
    padding: 2px 6px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    flex: 1 1 68px;
    min-width: 60px;
}

/* ── Overflow Menu (ersetzt Action-Icons) ── */
.udb-overflow-wrap {
    position: relative;
}
.udb-overflow-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--t-sm);
    transition: background var(--dur-fast), color var(--dur-fast);
}
.udb-overflow-btn:hover {
    background: var(--surface-hover, rgba(255,255,255,0.08));
    color: var(--text);
}
.udb-overflow-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 4px;
    min-width: 170px;
    background: var(--panel-bg, #1a1c24);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.04) inset;
    z-index: 100;
    padding: 4px;
    backdrop-filter: blur(16px);
}
.udb-overflow-menu.open {
    display: block;
    animation: udbMenuIn 0.15s ease;
}
@keyframes udbMenuIn {
    from { opacity: 0; transform: translateY(-4px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.udb-overflow-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 12px;
    border: none;
    background: transparent;
    color: var(--text, #eee);
    font-size: var(--t-xs);
    font-family: var(--font-body);
    cursor: pointer;
    border-radius: 8px;
    transition: background var(--dur-fast);
    white-space: nowrap;
}
.udb-overflow-item:hover {
    background: var(--surface-hover, rgba(255,255,255,0.06));
}
.udb-overflow-item i {
    width: 16px;
    text-align: center;
    font-size: var(--t-xs);
    opacity: 0.6;
}
.udb-overflow-divider {
    border: none;
    border-top: 1px solid var(--border-light);
    margin: 4px 8px;
}
.udb-overflow-danger {
    color: var(--status-danger);
}
.udb-overflow-danger:hover {
    background: rgba(239, 68, 68, 0.08);
}
[data-theme="light"] .udb-overflow-menu {
    background: #fff;
    box-shadow: var(--shadow-3);
}
/* Black-Week + Light-Theme: Das Menue erbt weissen Grund (Light-Regel oben),
   aber der Item-Text ist var(--text)=#f0e6d2 (hell) -> unlesbar. Zurueck auf
   dunklen Panel-Grund. Compound-Selektor (data-theme UND data-profile am
   selben <html>) schlaegt die Light-Regel. Siehe Offer-Bar-Fix (styles.css)
   und Pitfall in CLAUDE.md (Profile-Sektion). */
[data-theme="light"][data-profile="black-week"] .udb-overflow-menu {
    background: var(--panel-bg, #111111);
    box-shadow: 0 8px 32px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.04) inset;
}

/* ═══════════════════════════════════════════════════════════════
   AUDIT LOG TIMELINE
   ═══════════════════════════════════════════════════════════════ */
.audit-timeline {
    padding: 8px 16px 16px;
}

.audit-date-divider {
    font-size: var(--t-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--tm-accent, #DA1884);
    padding: 12px 0 6px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 8px;
}

.audit-entry {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-light);
    transition: background var(--dur-fast);
}

.audit-entry:last-child {
    border-bottom: none;
}

.audit-entry:hover {
    background: var(--surface-hover);
    border-radius: var(--radius-sm);
}

.audit-entry-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--t-xs);
    color: var(--tm-accent, #DA1884);
}

.audit-entry-body {
    flex: 1;
    min-width: 0;
}

.audit-entry-action {
    font-weight: 500;
    font-size: var(--t-xs);
    color: var(--text);
    margin-bottom: 2px;
}

.audit-entry-detail {
    font-size: var(--t-xs);
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.audit-entry-meta {
    font-size: var(--t-2xs);
    color: var(--text-muted);
    opacity: 0.7;
    margin-top: 2px;
}

.audit-loading,
.audit-empty {
    text-align: center;
    padding: 48px 16px;
    color: var(--text-muted);
    font-size: var(--t-sm);
}

.audit-loading i,
.audit-empty i {
    display: block;
    font-size: var(--t-xl);
    margin-bottom: 10px;
    opacity: 0.5;
}

/* ═══════════════════════════════════════════════════════════════
   ONBOARDING TOUR
   ═══════════════════════════════════════════════════════════════ */
.tour-overlay {
    position: absolute;
    border-radius: var(--radius-md);
    /* Spotlight effect:
       – soft-edged dark mask (40px blur) around the cutout
       – warm inner glow fading inward to make the focus area feel "lit" */
    box-shadow:
        inset 0 0 36px rgba(232, 145, 26, 0.14),
        0 0 40px 9999px rgba(0, 0, 0, 0.72);
    z-index: 99990;
    pointer-events: none;
    opacity: 0;
    transition: top var(--dur-base) var(--ease-inout),
                left var(--dur-base) var(--ease-inout),
                width var(--dur-base) var(--ease-inout),
                height var(--dur-base) var(--ease-inout),
                opacity var(--dur-base) ease;
}

.tour-overlay.visible {
    opacity: 1;
    pointer-events: auto;
    animation: tour-spotlight-pulse 3.4s ease-in-out infinite;
}

@keyframes tour-spotlight-pulse {
    0%, 100% {
        box-shadow:
            inset 0 0 36px rgba(232, 145, 26, 0.14),
            0 0 40px 9999px rgba(0, 0, 0, 0.72);
    }
    50% {
        box-shadow:
            inset 0 0 54px rgba(232, 145, 26, 0.22),
            0 0 48px 9999px rgba(0, 0, 0, 0.74);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tour-overlay.visible { animation: none; }
}

/* Ensure lightbox stays above the tour overlay but below the tooltip */
body.tour-active .mockup-lightbox {
    z-index: 99992 !important;
}

.tour-tooltip {
    position: absolute;
    z-index: 99995;
    min-width: 280px;
    max-width: 350px;
    padding: 20px;
    border-radius: var(--radius-lg);
    background: rgba(24, 24, 32, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: var(--shadow-3);
    color: #fff;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--dur-base), transform var(--dur-base), top var(--dur-base) ease, left var(--dur-base) ease;
    pointer-events: none;
}

.tour-tooltip.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.tour-tooltip-title {
    font-weight: 700;
    font-size: var(--t-base);
    margin-bottom: 6px;
    color: var(--tm-accent, #e8911a);
}

.tour-tooltip-text {
    font-size: var(--t-xs);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 16px;
}

.tour-tooltip-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 12px;
}

.tour-dots {
    display: flex;
    gap: 5px;
}

.tour-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transition: background var(--dur-fast), transform var(--dur-fast);
    cursor: pointer;
}

.tour-dot:hover {
    background: rgba(255, 255, 255, 0.45);
}

.tour-dot.active {
    background: var(--tm-accent, #e8911a);
    transform: scale(1.3);
}

.tour-dot.active:hover {
    background: var(--tm-accent, #e8911a);
}

.tour-tooltip-btns {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

.tour-btn {
    padding: 6px 14px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--t-xs);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--dur-fast);
}

.tour-btn-next {
    background: var(--tm-accent, #e8911a);
    color: #000;
}

.tour-btn-next:hover {
    filter: brightness(1.15);
}

.tour-btn-skip {
    background: transparent;
    color: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.tour-btn-skip:hover {
    color: rgba(255, 255, 255, 0.7);
    border-color: rgba(255, 255, 255, 0.2);
}

.tour-btn-prev {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.6);
    padding: 6px 10px;
}

.tour-btn-prev:hover {
    background: rgba(255, 255, 255, 0.1);
}

.tour-highlight {
    position: relative;
    z-index: 99992 !important;
    /* Ring removed – the dark overlay cutout already isolates the target */
    border-radius: var(--radius-sm);
}

/* #offerBar ist bereits position:fixed. Das generische position:relative
   oben wuerde diese Fixierung brechen und die Bar auf ihre normale
   Dokumentposition am Seitenende zurueckfallen lassen (mehrere tausend
   Pixel unterhalb des sichtbaren Bereichs) - z-index wirkt bei fixed
   genauso wie bei relative, position muss hier also nicht ueberschrieben
   werden. */
#offerBar.tour-highlight {
    position: fixed;
}

@keyframes tour-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 3px var(--tm-accent, #e8911a), 0 0 20px rgba(232, 145, 26, 0.3);
    }

    50% {
        box-shadow: 0 0 0 5px var(--tm-accent, #e8911a), 0 0 30px rgba(232, 145, 26, 0.4);
    }
}

body.tour-active .mission-control {
    z-index: 99991 !important;
}

body.tour-active .udb-overlay {
    z-index: 99991 !important;
}

body.tour-active .udb-overlay .udb-modal {
    z-index: 99993 !important;
}

body.tour-active .udb-overlay .udb-tabs {
    z-index: 99994 !important;
}

/* Tour restart button in Darstellung tab */
.tour-restart-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-md);
    margin: 12px 16px 0;
}

.tour-restart-row span {
    font-size: var(--t-xs);
    color: rgba(255, 255, 255, 0.6);
}

.tour-restart-btn {
    padding: 6px 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--tm-accent, #e8911a);
    font-size: var(--t-xs);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--dur-fast);
}

.tour-restart-btn:hover {
    background: rgba(232, 145, 26, 0.1);
    border-color: var(--tm-accent, #e8911a);
}

/* ── Customer Tour: Welcome Modal ── */
.tour-welcome-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity var(--dur-base) ease;
    pointer-events: none;
}

.tour-welcome-modal.visible {
    opacity: 1;
    pointer-events: auto;
}

.tour-welcome-card {
    background: linear-gradient(135deg, rgba(30, 32, 40, 0.95), rgba(20, 22, 28, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xl);
    padding: 40px 48px;
    text-align: center;
    max-width: 420px;
    box-shadow: var(--shadow-modal);
    transform: scale(0.9) translateY(20px);
    transition: transform var(--dur-base) var(--ease-out);
}

.tour-welcome-modal.visible .tour-welcome-card {
    transform: scale(1) translateY(0);
}

.tour-welcome-emoji {
    font-size: var(--t-3xl);
    margin-bottom: 12px;
    animation: tour-wave 1.2s ease-in-out 0.5s 2;
}

@keyframes tour-wave {

    0%,
    100% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(20deg);
    }

    75% {
        transform: rotate(-15deg);
    }
}

.tour-welcome-card h2 {
    font-size: var(--t-lg);
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px;
    font-family: var(--font-heading);
}

.tour-welcome-card p {
    font-size: var(--t-sm);
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 28px;
}

.tour-welcome-btns {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.tour-welcome-start {
    padding: 10px 24px;
    border: none;
    border-radius: var(--radius-md);
    background: var(--tm-accent, #e8911a);
    color: #fff;
    font-size: var(--t-sm);
    font-weight: 700;
    cursor: pointer;
    transition: all var(--dur-fast);
}

.tour-welcome-start:hover {
    filter: brightness(1.15);
    transform: translateY(-1px);
}

.tour-welcome-skip {
    padding: 10px 20px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-md);
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    font-size: var(--t-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--dur-fast);
}

.tour-welcome-skip:hover {
    color: rgba(255, 255, 255, 0.8);
    border-color: rgba(255, 255, 255, 0.3);
}

/* ── Customer Tour: Step Counter Badge ── */
.tour-tooltip-step {
    display: inline-block;
    background: var(--tm-accent, #e8911a);
    color: #000;
    font-size: var(--t-2xs);
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--radius-xl);
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}

/* ── Customer Tour: Completion Toast ── */
.tour-complete-toast {
    position: fixed;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%) translateY(30px);
    z-index: 100000;
    background: linear-gradient(135deg, rgba(30, 32, 40, 0.95), rgba(20, 22, 28, 0.98));
    border: 1px solid rgba(232, 145, 26, 0.3);
    border-radius: var(--radius-lg);
    padding: 16px 28px;
    color: #fff;
    font-size: var(--t-sm);
    font-weight: 500;
    box-shadow: var(--shadow-3);
    opacity: 0;
    transition: all var(--dur-base) var(--ease-out);
    white-space: nowrap;
}

.tour-complete-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ── Tour: Light-mode overrides ── */
:root:not([data-theme="dark"]) .tour-welcome-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.97), rgba(245, 245, 250, 0.98));
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: var(--shadow-modal);
}

:root:not([data-theme="dark"]) .tour-welcome-card h2 {
    color: #1a1a2e;
}

:root:not([data-theme="dark"]) .tour-welcome-card p {
    color: rgba(0, 0, 0, 0.5);
}

:root:not([data-theme="dark"]) .tour-welcome-skip {
    color: rgba(0, 0, 0, 0.4);
    border-color: rgba(0, 0, 0, 0.12);
}

:root:not([data-theme="dark"]) .tour-welcome-skip:hover {
    color: rgba(0, 0, 0, 0.7);
    border-color: rgba(0, 0, 0, 0.25);
}

:root:not([data-theme="dark"]) .tour-complete-toast {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.97), rgba(245, 245, 250, 0.98));
    color: #1a1a2e;
    border-color: rgba(232, 145, 26, 0.25);
    box-shadow: var(--shadow-3);
}

/* ── Customer Tour: Floating Restart Badge ── */
.cust-tour-floating-badge {
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 9999;
    background: linear-gradient(135deg, rgba(30, 32, 40, 0.85), rgba(20, 22, 28, 0.9));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-pill);
    padding: 10px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--t-sm);
    font-weight: 500;
    cursor: pointer;
    box-shadow: var(--shadow-3);
    transition: all var(--dur-base) var(--ease-out);
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
}

.cust-tour-floating-badge.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.cust-tour-floating-badge:hover {
    color: #fff;
    border-color: rgba(232, 145, 26, 0.4);
    box-shadow: 0 12px 40px rgba(232, 145, 26, 0.15), 0 8px 32px rgba(0, 0, 0, 0.4);
    transform: translateY(-2px);
}

.cust-tour-floating-badge i {
    color: var(--accent);
    font-size: var(--t-md);
    transition: transform var(--dur-base) ease;
}

.cust-tour-floating-badge:hover i {
    transform: scale(1.1);
}

/* Light mode overrides for badge */
:root:not([data-theme="dark"]) .cust-tour-floating-badge {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(245, 245, 250, 0.9));
    border-color: rgba(0, 0, 0, 0.08);
    color: #1a1a2e;
    box-shadow: var(--shadow-3);
}

:root:not([data-theme="dark"]) .cust-tour-floating-badge:hover {
    border-color: rgba(232, 145, 26, 0.4);
    box-shadow: 0 12px 40px rgba(232, 145, 26, 0.15), 0 8px 32px rgba(0, 0, 0, 0.12);
}

/* Hide the badge entirely if the tour overlay is active */
body.tour-active .cust-tour-floating-badge {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(20px) !important;
}

/* ── Dismissed state: subtle icon-only circle ── */
.cust-tour-floating-badge.dismissed {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
    opacity: 0;
    box-shadow: var(--shadow-2);
    gap: 0;
    overflow: hidden;
}

.cust-tour-floating-badge.dismissed.visible {
    opacity: 0.55;
}

.cust-tour-floating-badge.dismissed .tour-badge-label {
    width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: width var(--dur-base) ease, opacity var(--dur-fast) ease;
}

.cust-tour-floating-badge.dismissed:hover {
    width: auto;
    padding: 10px 18px;
    border-radius: var(--radius-pill);
    opacity: 1;
    gap: 10px;
}

.cust-tour-floating-badge.dismissed:hover .tour-badge-label {
    width: auto;
    opacity: 1;
}

/* Admin tour badge sits above the customer one */
.admin-tour-badge {
    bottom: 70px;
}

/* ═══════════════════════════════════════════════════════════════
   STAGING CONFIRM MODAL (delete / publish confirmation dialogs)
   ═══════════════════════════════════════════════════════════════ */
.staging-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 10003;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: stagingConfirmFadeIn 0.2s ease;
}

@keyframes stagingConfirmFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.staging-confirm-card {
    background: var(--panel-bg, #fff);
    border: 1px solid var(--border-light, rgba(0, 0, 0, 0.08));
    border-radius: var(--radius-xl);
    padding: 0;
    width: 90%;
    max-width: 420px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    animation: stagingConfirmSlideUp 0.35s var(--ease-out);
    overflow: hidden;
}

@keyframes stagingConfirmSlideUp {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.staging-confirm-icon-row {
    display: flex;
    justify-content: center;
    padding: 28px 24px 8px 24px;
}

.staging-confirm-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--t-xl);
}

.staging-confirm-icon.publish {
    background: linear-gradient(135deg, #16a34a, #22c55e);
    color: #fff;
    box-shadow: 0 4px 16px rgba(22, 163, 74, 0.35);
}

.staging-confirm-icon.discard {
    background: linear-gradient(135deg, #dc2626, var(--status-danger));
    color: #fff;
    box-shadow: 0 4px 16px rgba(220, 38, 38, 0.35);
}

.staging-confirm-body {
    padding: 12px 28px 6px 28px;
    text-align: center;
}

.staging-confirm-title {
    font-size: var(--t-md);
    font-weight: 700;
    color: var(--text, #1a1a1a);
    margin: 0 0 8px 0;
}

.staging-confirm-desc {
    font-size: var(--t-sm);
    color: var(--text-muted, #6b7280);
    line-height: 1.5;
    margin: 0;
}

.staging-confirm-actions {
    display: flex;
    gap: 10px;
    padding: 20px 28px 24px 28px;
    justify-content: center;
}

.staging-confirm-actions button {
    flex: 1;
    border: none;
    border-radius: var(--radius-md);
    padding: 12px 20px;
    font-size: var(--t-sm);
    font-weight: 650;
    cursor: pointer;
    transition: all var(--dur-fast) ease;
    font-family: inherit;
    letter-spacing: 0.01em;
}

.staging-confirm-cancel {
    background: var(--surface, #f3f4f6);
    color: var(--text, #374151);
    border: 1px solid var(--border, rgba(0, 0, 0, 0.08)) !important;
}

.staging-confirm-cancel:hover {
    background: var(--surface-hover, #e5e7eb);
    transform: translateY(-1px);
}

.staging-confirm-ok.danger {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    color: #fff;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.3);
}

.staging-confirm-ok.danger:hover {
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.45);
    transform: translateY(-1px);
}

.staging-confirm-ok:not(.danger) {
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: #fff;
    box-shadow: 0 4px 14px rgba(22, 163, 74, 0.3);
}

.staging-confirm-ok:not(.danger):hover {
    box-shadow: 0 6px 20px rgba(22, 163, 74, 0.45);
    transform: translateY(-1px);
}

/* Comment input for staging confirm */
.staging-confirm-comment-wrap {
    margin-top: 16px;
    text-align: left;
}

.staging-confirm-comment-label {
    display: block;
    font-size: var(--t-xs);
    font-weight: 500;
    color: var(--text-muted, #6b7280);
    margin-bottom: 6px;
}

.staging-confirm-comment {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--border, rgba(0, 0, 0, 0.12));
    border-radius: var(--radius-md);
    padding: 10px 14px;
    font-size: var(--t-sm);
    font-family: inherit;
    background: var(--input-bg, #f9fafb);
    color: var(--text, #333);
    resize: vertical;
    min-height: 48px;
    max-height: 120px;
    transition: border-color var(--dur-fast);
}

.staging-confirm-comment:focus {
    outline: none;
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}

.staging-confirm-comment::placeholder {
    color: var(--text-muted, #9ca3af);
    opacity: 0.7;
}

/* ═══════════════════════════════════════════════════════════════
   A2 – Back-to-Top
   ═══════════════════════════════════════════════════════════════
   Drei Dinge unterscheiden die Fassung von der ersten (die deshalb
   auch wieder abgeschaltet wurde):

   1. Sie haengt an der Cart-Bar statt an einem festen Pixelwert.
      offer-bar.js meldet die reale Bar-Hoehe als --offer-bar-h; damit
      sitzt der Knopf ueber leerer Bar, gefuellter Bar und dem hoeheren
      Kampagnenband gleich sauber. Vorher: bottom: 100px, geraten.
   2. Sie traegt das Theme. Die alte Flaeche war auf rgba(15,23,42,.65)
      genagelt, also ein dunkler Fleck im Light-Theme.
   3. Der Ton kommt aus --btt-accent, das script.js pro sichtbarer Brand
      nachzieht. Er liegt bewusst nur auf Rand, Glow und Icon-Flaeche,
      nie auf dem Pfeil selbst: Markenfarbe auf Glyphen reisst den
      Kontrast (Pitfall 28, dieselbe Falle wie bei .tier-price).
   ═══════════════════════════════════════════════════════════════ */
.back-to-top {
    --btt-accent: var(--tm-accent, #DA1884);
    --btt-sheen: rgba(255, 255, 255, 0.75);
    --btt-size: 46px;

    position: fixed;
    right: clamp(14px, 2vw, 30px);
    bottom: calc(var(--offer-bar-h, 0px) + 18px);
    z-index: 9990;

    /* Das Ausfahren laeuft ueber max-width am Label, nicht ueber animierte
       Grid-Tracks (0fr -> 1fr). Der Knopf ist position:fixed ohne Breite,
       wird also intrinsisch bemessen - und dabei faellt ein fr-Track auf
       seine Basis zurueck, die das noetige min-width:0 auf null drueckt.
       Nachgemessen: die Breite blieb bei 48px, auch mit direkt gesetztem
       auto 1fr. Der Deckel unten ist bewusst knapp ueber dem echten Bedarf
       (DE 108px / EN 112px), sonst laeuft die Transition ins Leere. */
    display: flex;
    align-items: center;
    height: var(--btt-size);
    padding: 0 5px;
    border: 1px solid color-mix(in srgb, var(--btt-accent) 20%, var(--border));
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--panel-bg) 76%, transparent);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: var(--shadow-3), inset 0 1px 0 var(--btt-sheen);
    color: var(--text);
    cursor: pointer;
    contain: layout;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(16px) scale(0.92);
    transition:
        opacity var(--dur-base) var(--ease-out),
        transform var(--dur-base) var(--ease-out),
        background-color var(--dur-base) var(--ease-out),
        border-color var(--dur-slow) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out),
        visibility 0s linear var(--dur-base);
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    transition-delay: 0s;
}

/* Der Pfeil sitzt auf einem eigenen, sehr leisen Brand-Tint: die Marke
   traegt die Flaeche, nicht den Glyphen. */
.back-to-top .btt-icon {
    display: grid;
    place-items: center;
    width: calc(var(--btt-size) - 10px);
    height: calc(var(--btt-size) - 10px);
    border-radius: 50%;
    font-size: 0.95rem;
    background: color-mix(in srgb, var(--btt-accent) 10%, transparent);
    transition: background var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out);
}

/* max-width ist eine Layout-Property, ihre Animation meldet der
   Impeccable-Detector zu Recht als layout-transition. Bewusst behalten:
   die dort empfohlene Alternative (animierte Grid-Tracks) ist genau die,
   die an einem intrinsisch bemessenen fixed-Element nicht traegt (siehe
   oben), und eine Breitenaenderung laesst sich per transform nicht
   ausdruecken, ohne Schrift zu verzerren. Die Kosten bleiben klein: der
   Knopf ist position:fixed, haengt also an keinem Fluss, laeuft nur bei
   Hover und nicht im Scroll-Pfad. contain begrenzt den Recalc zusaetzlich
   auf den Knopf-Subtree - bewusst nur 'layout', nicht 'size': mit size
   verloere der Knopf die vom Inhalt abgeleitete Breite. */
.back-to-top .btt-label {
    display: flex;
    align-items: center;
    max-width: 0;
    overflow: hidden;
    transition: max-width var(--dur-base) var(--ease-out);
}

.back-to-top .btt-label-text {
    padding: 0 12px 0 8px;
    font-family: var(--font-body);
    font-size: var(--t-sm);
    font-weight: 600;
    letter-spacing: -0.005em;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity var(--dur-fast) var(--ease-out),
                transform var(--dur-base) var(--ease-out);
}

/* Ausfahren nur, wo es echtes Hover gibt. Auf Touch bleibt der runde
   Knopf stehen - dort gibt es keinen Zwischenzustand, in dem ein Label
   gelesen werden koennte, es wuerde nur im Weg stehen. */
@media (hover: hover) {
    .back-to-top.visible:hover {
        transform: translateY(-3px);
        background: color-mix(in srgb, var(--panel-bg) 92%, transparent);
        border-color: color-mix(in srgb, var(--btt-accent) 48%, transparent);
        box-shadow: var(--shadow-3),
                    0 0 0 4px color-mix(in srgb, var(--btt-accent) 12%, transparent),
                    inset 0 1px 0 var(--btt-sheen);
    }

    .back-to-top.visible:hover .btt-icon {
        background: color-mix(in srgb, var(--btt-accent) 20%, transparent);
        transform: translateY(-1px);
    }

    .back-to-top.visible:hover .btt-label {
        max-width: 150px;
    }

    .back-to-top.visible:hover .btt-label-text {
        opacity: 1;
        transform: none;
        transition-delay: 60ms;
    }
}

/* Tastatur: Label immer ausfahren, unabhaengig von der Hover-Faehigkeit
   des Geraets (Tastatur an Touchscreen ist ein realer Fall). */
.back-to-top.visible:focus-visible {
    outline: 2px solid var(--btt-accent);
    outline-offset: 3px;
}

.back-to-top.visible:focus-visible .btt-label {
    max-width: 150px;
}

.back-to-top.visible:focus-visible .btt-label-text {
    opacity: 1;
    transform: none;
}

.back-to-top.visible:active {
    transform: translateY(0) scale(0.97);
    transition-duration: var(--dur-fast);
}

/* Quittung fuer den Klick: der Pfeil schiesst oben raus und kommt von
   unten zurueck, waehrend die Seite hochfaehrt. */
.back-to-top.is-launching .btt-icon i {
    animation: bttLaunch 620ms var(--ease-out);
}

@keyframes bttLaunch {
    0%   { transform: translateY(0);     opacity: 1; }
    38%  { transform: translateY(-15px); opacity: 0; }
    39%  { transform: translateY(11px);  opacity: 0; }
    100% { transform: translateY(0);     opacity: 1; }
}

[data-theme="dark"] .back-to-top {
    /* Ein weisser Lichtrand traegt im Dunkeln nicht, er leuchtet nur. */
    --btt-sheen: rgba(255, 255, 255, 0.07);
    background: color-mix(in srgb, var(--panel-bg) 82%, transparent);
}

/* Zustaende, in denen der Knopf zu schweigen hat: Auth-Gate, Tour
   (eigene Overlays), Edit-Mode (dort sitzen die Save-Badges unten
   rechts) und das mobile Tooltip-Sheet, das von unten einfaehrt. */
body.content-locked .back-to-top,
body.gate-hold .back-to-top,
body.tour-active .back-to-top,
body.edit-mode .back-to-top,
body.tooltip-sheet-open .back-to-top {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(16px) scale(0.92);
}

@media (prefers-reduced-motion: reduce) {
    .back-to-top,
    .back-to-top .btt-icon,
    .back-to-top .btt-label,
    .back-to-top .btt-label-text {
        transition-duration: 1ms;
    }

    .back-to-top.is-launching .btt-icon i {
        animation: none;
    }
}

/* ═══════════════════════════════════════════════════════════════
   A8 – Image Lightbox
   ═══════════════════════════════════════════════════════════════ */
.img-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    opacity: 0;
    transition: opacity var(--dur-base) ease;
}

.img-lightbox.open {
    opacity: 1;
}

.img-lightbox[hidden] {
    display: none !important;
}

.img-lightbox-img {
    max-width: 90vw;
    max-height: 88vh;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-3);
    object-fit: contain;
    cursor: default;
    transform: scale(0.92);
    transition: transform var(--dur-base) ease;
}

.img-lightbox.open .img-lightbox-img {
    transform: scale(1);
}

.img-lightbox-close {
    position: absolute;
    top: 20px;
    right: 24px;
    background: rgba(255, 255, 255, 0.12);
    border: none;
    color: #fff;
    font-size: var(--t-2xl);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--dur-fast);
    line-height: 1;
}

.img-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* ═══════════════════════════════════════════════════════════════
   A16 – FAQ Nav Link (text-only, no logo image)
   ═══════════════════════════════════════════════════════════════ */
.nav-link.nav-link-text {
    gap: 5px;
    font-size: var(--t-xs);
    opacity: 0.7;
    transition: opacity var(--dur-fast);
}

.nav-link.nav-link-text i {
    font-size: var(--t-base);
}

.nav-link.nav-link-text:hover {
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════
   B7 – Partner Add-Row Visual Distinction
   ═══════════════════════════════════════════════════════════════ */
/* Die Zeile steht seit 10.08.2026 UEBER der Liste. Die frueher hier
   gesetzte solide Oberkante war eine Trennlinie zur Tabelle darueber;
   an der neuen Position grenzt oben die Kampagnen-Box an, und eine
   solide Kante an einer sonst gestrichelten Box liest sich dort als
   Fehler statt als Trennung. Die Absetzung tragen jetzt allein Rahmen
   und Fuellung aus der Basisregel, das Padding bleibt darum rundum
   gleich. Bleibt nur der Abstand nach oben. */
.udb-add-partner-bar {
    margin-top: 16px;
}

/* ═══════════════════════════════════════════════════════════════
   B8 – Empty Inbox Illustration (improved layout)
   ═══════════════════════════════════════════════════════════════ */
.udb-requests-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 20px;
    text-align: center;
}

/* ── Team Management Tab ─────────────────────────────────────── */
.udb-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.udb-team-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--radius-md);
    padding: 16px;
    transition: box-shadow var(--dur-fast) ease, transform var(--dur-fast) ease;
}

.udb-team-card:hover {
    box-shadow: var(--shadow-2);
    transform: translateY(-1px);
}

.udb-team-avatar {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    background: #f3f4f6;
}

.udb-team-add-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--adm-primary) 3%, transparent);
    border: 2px dashed color-mix(in srgb, var(--adm-primary) 35%, transparent);
    border-radius: var(--radius-md);
    padding: 16px;
    min-height: 100px;
    cursor: pointer;
    transition: all var(--dur-fast) ease;
    color: var(--adm-primary);
    font-weight: 500;
    gap: 8px;
}

.udb-team-add-card:hover {
    background: color-mix(in srgb, var(--adm-primary) 8%, transparent);
    border-color: var(--adm-primary);
    transform: translateY(-1px);
}

.udb-team-add-card i {
    font-size: var(--t-xl);
}

.udb-team-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.udb-team-info {
    flex: 1;
    min-width: 0;
}

.udb-team-name {
    font-weight: 500;
    font-size: var(--t-base);
    color: var(--text, #1a1a2e);
}

.udb-team-role {
    font-size: var(--t-xs);
    color: var(--text-muted, #6b7280);
    margin-top: 2px;
}

.udb-team-contact {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 6px;
    font-size: var(--t-xs);
    color: var(--text-muted, #6b7280);
}

.udb-team-contact i {
    width: 14px;
    text-align: center;
    margin-right: 4px;
    opacity: 0.6;
}

.udb-team-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}

/* ── Team Editor Modal ───────────────────────────────────────── */
.udb-team-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}

.udb-team-modal {
    background: var(--surface, #fff);
    border-radius: var(--radius-lg);
    width: 90%;
    max-width: 520px;
    box-shadow: var(--shadow-3);
    overflow: hidden;
    animation: slideUp 0.3s var(--ease-out);
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.udb-team-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px 14px;
    border-bottom: 1px solid var(--border, #e5e7eb);
}

.udb-team-modal-header h3 {
    margin: 0;
    font-size: var(--t-md);
    font-weight: 700;
}

.udb-team-modal-header .mc-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: var(--surface-hover, #f3f4f6);
    color: var(--text-secondary, #6b7280);
    font-size: var(--t-base);
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease-out);
}

.udb-team-modal-header .mc-close-btn:hover {
    background: var(--border, #e5e7eb);
    color: var(--text-primary, #1f2937);
    transform: scale(1.08);
}

.udb-team-modal-body {
    padding: 20px 22px;
}

.udb-team-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 22px 18px;
    border-top: 1px solid var(--border, #e5e7eb);
}

/* Premium button styles for team modal */
.udb-team-modal-footer button {
    font-family: var(--font-heading, 'Inter', system-ui, sans-serif);
    font-size: var(--t-sm);
    font-weight: 500;
    padding: 8px 20px;
    border-radius: 10px;
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease-out);
    letter-spacing: 0.01em;
}

.udb-team-modal-footer .mc-confirm-cancel {
    background: transparent;
    border: 1px solid var(--border, #d1d5db);
    color: var(--text-secondary, #6b7280);
}



.udb-team-modal-footer .mc-confirm-cancel:hover {
    background: var(--surface-hover, #f3f4f6);
    border-color: var(--border-strong, #9ca3af);
    color: var(--text-primary, #374151);
}

.udb-team-modal-footer .udb-gate-save-btn {
    border: none;
    border-radius: 10px;
}

/* Exporte-Popup (Users-Tab, Klick auf die Exporte-Zahl) - nutzt das
   udb-team-modal-Geruest, nur die Body-Liste ist eigen. */
.udb-badge-clickable {
    cursor: pointer;
    transition: filter var(--dur-fast) var(--ease-out);
}

.udb-badge-clickable:hover {
    filter: brightness(1.15);
}

.udb-exports-modal {
    max-width: 460px;
}

.udb-team-modal-body.udb-exports-list {
    max-height: 60vh;
    overflow-y: auto;
}

.udb-export-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border, #e5e7eb);
}

.udb-export-row:last-child {
    border-bottom: none;
}

.udb-export-row>i {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--surface-hover, #f3f4f6);
    color: var(--accent);
    font-size: 0.85em;
}

.udb-export-row-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.udb-export-row-label {
    font-weight: 600;
    font-size: var(--t-sm);
}

.udb-export-row-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dashed var(--accent);
    cursor: pointer;
}

.udb-export-row-link:hover {
    color: var(--accent);
}

.udb-export-extra {
    font-size: var(--t-xs);
    opacity: 0.65;
}

.udb-export-extra.is-expired {
    font-style: italic;
}

.udb-export-row-date {
    font-size: var(--t-xs);
    opacity: 0.55;
    white-space: nowrap;
    flex-shrink: 0;
}

.udb-exports-empty {
    text-align: center;
    opacity: 0.6;
    padding: 20px 0;
    font-size: var(--t-sm);
}

.udb-exports-legacy {
    text-align: center;
    opacity: 0.5;
    font-size: var(--t-xs);
    padding-top: 10px;
    margin-top: 6px;
    border-top: 1px dashed var(--border, #e5e7eb);
}

/* Editor layout */
.udb-team-editor {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.udb-team-editor-avatar {
    flex-shrink: 0;
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    background: #f3f4f6;
}

.udb-team-editor-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.udb-team-avatar-upload {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: var(--t-md);
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--dur-fast);
}

.udb-team-editor-avatar:hover .udb-team-avatar-upload {
    opacity: 1;
}

.udb-team-editor-fields {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.udb-team-editor-fields label {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: var(--t-xs);
    font-weight: 500;
    color: var(--text-muted, #6b7280);
}

.udb-team-editor-fields input {
    padding: 8px 12px;
    border: 1px solid var(--border, #d1d5db);
    border-radius: var(--radius-sm);
    font-size: var(--t-sm);
    font-weight: 400;
    color: var(--text, #1a1a2e);
    background: var(--surface, #fff);
    transition: border-color var(--dur-fast);
}

.udb-team-editor-fields input:focus {
    outline: none;
    border-color: var(--primary, #6366f1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

/* Responsive */
@media (max-width: 480px) {
    .udb-team-editor {
        flex-direction: column;
        align-items: center;
    }

    .udb-team-card {
        flex-wrap: wrap;
    }
}

/* Trustpilot Strip for Portals */
.trustpilot-strip {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    margin-bottom: 20px;
    font-family: var(--font-body);
}

.trustpilot-strip .tp-brand {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 700;
    font-size: var(--t-base);
    color: #fff;
    margin-right: 6px;
}

.trustpilot-strip .tp-score {
    font-weight: 800;
    font-size: var(--t-md);
    color: #fff;
    line-height: 1;
}

.trustpilot-strip .tp-text {
    font-weight: 500;
    font-size: var(--t-base);
    color: rgba(255, 255, 255, 0.85);
    margin-right: 4px;
}

.trustpilot-strip .tp-stars {
    display: flex;
    gap: 3px;
    color: #fff;
}

.trustpilot-strip .tp-stars span {
    background: #00b67a;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
}

.trustpilot-strip .tp-stars i {
    font-size: var(--t-sm);
}

/* ─── Scroll Reveal Animations ─── */
.scroll-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--dur-slow) var(--ease-out),
        transform var(--dur-slow) var(--ease-out);
}

.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* stagger children delay */
.scroll-reveal:nth-child(2) {
    transition-delay: 0.08s;
}

.scroll-reveal:nth-child(3) {
    transition-delay: 0.16s;
}

.scroll-reveal:nth-child(4) {
    transition-delay: 0.24s;
}

/* ═══════════════════════════════════════════════════════════
   LEGAL MODALS (Impressum + Datenschutz)
   ═══════════════════════════════════════════════════════════ */
.legal-overlay {
    position: fixed;
    inset: 0;
    z-index: 999998;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-base) ease;
}

.legal-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

.legal-modal {
    position: relative;
    background: #fff;
    border-radius: 20px;
    max-width: 680px;
    width: 92%;
    max-height: 82vh;
    overflow-y: auto;
    box-shadow: var(--shadow-modal);
    transform: scale(0.92) translateY(20px);
    transition: transform var(--dur-base) var(--ease-out);
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
    overscroll-behavior: contain;
}

.legal-overlay.visible .legal-modal {
    transform: scale(1) translateY(0);
}

.legal-close {
    position: sticky;
    top: 12px;
    float: right;
    margin: 12px 12px 0 0;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.06);
    color: #6b7280;
    font-size: var(--t-lg);
    line-height: 1;
    cursor: pointer;
    transition: all var(--dur-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.legal-close:hover {
    background: rgba(0, 0, 0, 0.12);
    color: #1f2937;
    transform: rotate(90deg);
}

.legal-body {
    padding: 40px 44px 44px;
}

.legal-body h2 {
    font-size: var(--t-xl);
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 28px 0;
    padding-bottom: 16px;
    border-bottom: 2px solid #f3f4f6;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 10px;
}

.legal-body h2 i {
    color: var(--tm-accent, #DA1884);
    font-size: var(--t-md);
}

.legal-body h3 {
    font-size: var(--t-base);
    font-weight: 600;
    color: #1f2937;
    margin: 28px 0 10px 0;
    letter-spacing: -0.01em;
}

.legal-body h4 {
    font-size: var(--t-sm);
    font-weight: 600;
    color: #374151;
    margin: 20px 0 8px 0;
}

.legal-body p {
    font-size: var(--t-sm);
    color: #4b5563;
    line-height: 1.7;
    margin: 0 0 12px 0;
}

.legal-body a {
    color: var(--tm-accent, #DA1884);
    text-decoration: none;
    font-weight: 500;
    transition: opacity var(--dur-fast);
}

.legal-body a:hover {
    opacity: 0.75;
    text-decoration: underline;
}

.legal-body ul {
    padding-left: 20px;
    margin: 8px 0 16px;
}

.legal-body ul li {
    font-size: var(--t-sm);
    color: #4b5563;
    line-height: 1.7;
    margin-bottom: 4px;
}

.legal-hint {
    font-size: 12px !important;
    color: #9ca3af !important;
    font-style: italic;
    margin-top: 16px !important;
    padding: 12px 16px;
    background: #f9fafb;
    border-radius: 10px;
    border-left: 3px solid #e5e7eb;
}

/* Dark mode */
[data-theme="dark"] .legal-modal {
    background: #1a1a1a;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .legal-close {
    background: rgba(255, 255, 255, 0.08);
    color: #9ca3af;
}

[data-theme="dark"] .legal-close:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #f3f4f6;
}

[data-theme="dark"] .legal-body h2 {
    color: #f3f4f6;
    border-bottom-color: #333;
}

[data-theme="dark"] .legal-body h3 {
    color: #e5e7eb;
}

[data-theme="dark"] .legal-body h4 {
    color: #d1d5db;
}

[data-theme="dark"] .legal-body p,
[data-theme="dark"] .legal-body ul li {
    color: #9ca3af;
}

[data-theme="dark"] .legal-hint {
    background: #222;
    border-left-color: #444;
    color: #6b7280 !important;
}

/* Mobile */
@media (max-width: 600px) {
    .legal-modal {
        width: 96%;
        max-height: 88vh;
        border-radius: 16px;
    }

    .legal-body {
        padding: 28px 24px 32px;
    }

    .legal-body h2 {
        font-size: var(--t-md);
    }
}

/* ── Settings Group Container ── */
.udb-settings-group {
    margin-top: 28px;
    padding: 16px 0 0 0;
    border-top: 1px solid color-mix(in srgb, var(--border-light) 40%, transparent);
}

.udb-settings-group-label {
    font-size: var(--t-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    opacity: 0.6;
    margin-bottom: 14px;
    padding-left: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.udb-settings-group-label i {
    font-size: var(--t-sm);
    color: var(--tm-accent);
    opacity: 0.7;
}

.udb-settings-group .udb-gate-editor {
    margin-bottom: 10px !important;
}

.udb-settings-group .udb-gate-editor:last-child {
    margin-bottom: 0 !important;
}

/* ── Premium Admin Overrides ── */
.udb-gate-editor {
    background: linear-gradient(150deg, color-mix(in srgb, var(--surface) 95%, transparent) 0%, color-mix(in srgb, var(--surface-hover) 50%, var(--surface)) 100%) !important;
    border: 1px solid color-mix(in srgb, var(--border-light) 50%, transparent) !important;
    border-radius: 12px !important;
    margin-bottom: 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    transition: all var(--dur-base) ease !important;
    overflow: visible !important;
}

.udb-gate-editor:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
    border-color: color-mix(in srgb, var(--border) 60%, transparent) !important;
}

.udb-gate-editor-header {
    border-left: none !important;
    padding: 10px 16px !important;
    background: transparent !important;
    align-items: center !important;
}

.udb-gate-editor-header strong {
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: var(--text-muted) !important;
    display: inline-block !important;
    margin-bottom: 2px !important;
}

.udb-gate-editor-header i {
    font-size: 1.05rem !important;
    color: var(--tm-accent) !important;
    margin-top: 1px !important;
    margin-right: 6px !important;
}

.udb-gate-editor-header small {
    display: block !important;
    font-size: 0.72rem !important;
    color: var(--text-muted) !important;
    opacity: 0.7 !important;
}

.udb-gate-editor-fields {
    background: transparent !important;
    border-top: none !important;
    padding: 8px 16px 14px 16px !important;
}

/* ── Premium Admin Tables Overrides ── */
.udb-tab-body {
    padding-bottom: 240px !important;
}

/* Nur wenn ein Overflow-Menue offen ist: die Basisregel oben (overflow-x/y:
   auto) wuerde .udb-overflow-menu (absolute, ragt unten aus der Zeile
   heraus) abschneiden. Blanket "visible" liess breite Tabellen dagegen
   seitlich aus der Seite laufen (Audit 16.08., Pitfalls 9/13/29) - daher
   :has() statt einer pauschalen Regel. */
.udb-table-wrap:has(.udb-overflow-menu.open) {
    overflow: visible !important;
}

.udb-table {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    background: linear-gradient(150deg, color-mix(in srgb, var(--surface) 95%, transparent) 0%, color-mix(in srgb, var(--surface-hover) 50%, var(--surface)) 100%) !important;
    border: 1px solid color-mix(in srgb, var(--border-light) 50%, transparent) !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

.udb-table th {
    /* Deckend statt transparent: th ist sticky (siehe Basisregel oben) - ohne
       deckenden Hintergrund scheinen beim Scrollen die darunterliegenden
       Zeilen durch den fixierten Header durch ("verschwimmt ineinander"). */
    background: var(--surface) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--border-light) 50%, transparent) !important;
    padding: 16px 16px 12px 16px !important;
}

.udb-table td {
    background: transparent !important;
    border-top: none !important;
    border-bottom: 1px solid color-mix(in srgb, var(--border-light) 30%, transparent) !important;
    padding: 14px 16px !important;
}

.udb-table tr:last-child td {
    border-bottom: none !important;
}

.udb-table td:first-child {
    border-radius: 0 !important;
    border-left: none !important;
}

.udb-table td:last-child {
    border-radius: 0 !important;
    border-right: none !important;
}

.udb-table tr:hover td {
    background: color-mix(in srgb, var(--surface-hover) 40%, transparent) !important;
    box-shadow: none !important;
}

/* ── Dark Mode: Decouple logo sidebar from brand color ── */
[data-theme="dark"] .portal {
    --logo-bg: var(--surface) !important;
    --logo-text: var(--text) !important;
}

/* ── Security Info Icons ── */
.sec-info-icon {
    font-size: 0.7em;
    opacity: 0.35;
    margin-left: 4px;
    cursor: help;
    transition: opacity var(--dur-fast), color var(--dur-fast);
    vertical-align: middle;
}

.sec-info-icon:hover {
    opacity: 0.85;
    color: var(--tm-accent, #e040fb);
}

/* ── Help FAB ─────────────────────────── */
/* Help-FAB komplett raus – FAQ + Kontakt wohnen jetzt fix in der
   Sticky-Cart-Bar unten. Floating-Pills ersetzt durch Bar-Buttons. */
.help-fab-container {
    display: none !important;
}

/* Floating-Tour-Badges (admin + customer) raus – die Helper-Buttons sind
   in der Sticky-Cart-Bar konsolidiert.
   Back-to-Top ist bewusst NICHT mehr Teil dieser Liste: er ist kein
   Helper, sondern Navigation, und ein fuenftes Icon in der Bar zahlt
   direkt auf deren Platzproblem ein (Pitfall 13, Chrome frisst dort
   bereits 521px). Er lebt daher als eigener Knopf ueber der Bar. */
#adminTourBadge,
#custTourBadge {
    display: none !important;
}

.help-fab-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tm-accent, #DA1884), var(--tm-accent-light, #E84DA3));
    color: white;
    border: none;
    box-shadow: var(--shadow-3);
    font-size: var(--t-xl);
    cursor: pointer;
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.help-fab-btn:hover {
    transform: scale(1.08) translateY(-2px);
    box-shadow: var(--shadow-3);
}

.help-fab-btn i {
    transition: transform var(--dur-base);
}

.help-fab-menu {
    position: absolute;
    bottom: 0;
    right: 0;
    display: flex;
    flex-direction: row;
    gap: 0;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    transform-origin: bottom right;
    background: color-mix(in srgb, var(--panel-bg, #fff) 85%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid color-mix(in srgb, var(--border, #e5e7eb) 60%, transparent);
    border-radius: 50px;
    box-shadow: var(--shadow-3);
    overflow: hidden;
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-fast);
}

.help-fab-menu:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-3);
}

.help-fab-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 22px;
    color: var(--text);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--t-base);
    white-space: nowrap;
    transition: background var(--dur-fast);
}

.help-fab-item:first-child {
    border-right: 1px solid color-mix(in srgb, var(--border, #e5e7eb) 60%, transparent);
}

.help-fab-item:hover {
    background: var(--surface-hover);
}

.help-fab-item i {
    color: var(--accent);
    font-size: var(--t-md);
}

/* Adjust position if Admin Editor Badge is present */
/* removed edit-mode override */
#globalSaveBtn {
    bottom: 224px !important;
}

@media (max-width: 860px) {
    .help-fab-container {
        right: 16px;
        bottom: 16px;
    }
}

@media (max-width: 600px) {
    .help-fab-container {
        right: 8px;
        bottom: 8px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Premium Polish – Film-Grain / Noise Overlay (dark mode only)
   Fixed full-viewport SVG noise at ~6% opacity with overlay blend
   gives OLED black an analog, tactile depth (Stripe/Linear feel).
   Light mode stays untouched – noise on white washes out.
   ═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] body::before,
.dark body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.06;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-size: 240px 240px;
}

@media (prefers-reduced-motion: reduce) {
    [data-theme="dark"] body::before,
    .dark body::before {
        opacity: 0.04;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Premium Polish – Tier-Switch Velocity Transition
   When a tier-btn is clicked, JS stamps .tier-switching on the
   portal's .layered-cake-grid for ~220ms. The grid cross-blends
   via brief scale-down + blur, giving the tier change weight.
   Honors prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════ */
/* Kein will-change: der Hint galt hier permanent fuer 7 sehr grosse Grids (eines
   pro Portal, jedes traegt alle Tiles) und promotet damit dauerhaft 7 Compositor-
   Layer inkl. Filter-Slot - der Compositor schleppt sie bei jedem Scroll-Frame mit.
   Gebraucht wuerde er nur waehrend der 120ms .tier-switching-Transition, und die
   animiert ausschliesslich opacity + transform, die der Browser ohnehin automatisch
   auf eine eigene Layer promotet. Gleiche Ursache wie b41f0ed, eine Ebene hoeher. */
.layered-cake-grid {
    transition: filter var(--dur-fast) var(--ease-inout),
        transform var(--dur-fast) var(--ease-inout),
        opacity var(--dur-fast) var(--ease-inout);
    transform-origin: center top;
}

@media (prefers-reduced-motion: no-preference) {
    .layered-cake-grid.tier-switching {
        opacity: 0.55;
        transform: scale(0.985);
    }
}

/* Tier-btn click feedback – subtle press + brand glow during the switch */
.tier-btn {
    transition: background var(--dur-base) ease,
        color var(--dur-base) ease,
        border-color var(--dur-base) ease,
        transform var(--dur-fast) var(--ease-out),
        box-shadow var(--dur-base) ease;
}

.tier-btn.tier-btn-firing {
    transform: scale(0.96);
}

.tier-btn.active {
    box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 28%, transparent);
}

/* ═══════════════════════════════════════════════════════════════
   Tile Micro-Interactions – Anheben statt Kippen
   Der 3D-Tilt (bis 4 Grad, per mousemove aus script.js) ist entfernt: eine
   gekippte Flaeche behauptet, sie sei ein Objekt in einem Raum, den die Seite
   sonst nirgends behauptet. Karten heben sich, sie kippen nicht. Damit
   entfallen auch --tilt-x / --tilt-y, das perspective() und der
   preserve-3d/will-change-Hint (der nur wegen der 3D-Rotation noetig war).
   ═══════════════════════════════════════════════════════════════ */

/* Das Anheben (translateY(-2px)) macht bereits die Basisregel weiter oben
   (.tile:not(.disabled):hover, ~1474) - der Tilt hatte sie nur ueberschrieben.
   Hier bleibt daher nur der Schatten: neutrale Tiefe plus ein farbiger Ring als
   Signal "diese Kachel ist unter dem Zeiger". */
.tile:not(.disabled):hover {
    box-shadow:
        var(--shadow-3),
        0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
}

@media (prefers-reduced-motion: no-preference) {

    .tile:not(.disabled):hover .tile-icon {
        transform: rotate(5deg) scale(1.08);
        background: color-mix(in srgb, var(--accent) 18%, transparent);
        box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 25%, transparent);
    }

    .tile:not(.disabled) .tile-icon {
        transition: transform var(--dur-base) var(--ease-out),
            background var(--dur-base) ease,
            box-shadow var(--dur-base) ease;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tile:not(.disabled) {
        --tilt-x: 0deg !important;
        --tilt-y: 0deg !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE-KONSOLIDIERUNG (max-width: 600px + Feinschliff 400px)
   Ein gebuendelter Block am Datei-Ende: Overflow-Fixes, Density
   (De-Inflation der aufgeblaehten Tablet-Typo), Touch-Targets.
   Gewinnt per Kaskade, ohne die verstreuten 860/720/500-Bloecke
   zu beruehren. Werte 8er-basiert, Dark- + Light-Mode-safe.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 600px) {

    /* ---- Overflow: Content in die schmale Spalte zwingen ---- */
    .browser-mockup { max-width: 100%; }
    .portal-info-content { padding: 14px 16px; }
    /* Portal-Body-Spalte schrumpfbar machen: ein blankes 1fr expandiert
       auf die min-content-Breite der Inhalte (Stats/Tiles) und sprengt so
       den ganzen Portal-Content nach rechts. minmax(0,1fr) + min-width:0
       zwingt Spalte + Kinder auf die echte Viewport-Breite. */
    .portal-body { grid-template-columns: minmax(0, 1fr); }
    .portal-info,
    .portal-pricing { min-width: 0; max-width: 100%; }
    .demo-meta { flex-wrap: wrap; row-gap: 2px; }
    .demo-meta span { padding: 0 8px; }
    .social-strip a,
    .social-strip span { min-width: 0; }

    /* ---- FAQ: dichter + kompakte Sprung-Nav ---- */
    .faq-question { padding: 14px 16px; }
    .faq-answer { padding: 12px 16px 16px 16px; }
    .faq-item:has(.faq-cat-heading) { margin-top: 18px; }
    .faq-nav { gap: 6px; margin: 2px 0 16px; }
    .faq-nav-chip { font-size: 0.75rem; padding: 6px 12px; }

    /* ---- Hero: De-Inflation + sauberer vertikaler Stack ---- */
    .hero { padding: 16px 14px 10px; }
    .hero-desktop-flex { gap: 14px; }
    .hero-brand-row {
        flex-direction: column;
        align-items: center;
        gap: 4px;
        margin-left: 0;
        margin-bottom: 4px;
    }
    .hero-logo { height: 44px; margin-right: 0; }
    .hero-greeting { font-size: 0.9rem; }
    .hero-content h1 {
        font-size: var(--t-xl);
        line-height: 1.1;
        letter-spacing: -0.8px;
        margin-bottom: 0;
    }
    /* Hero-Subline mobil ausblenden: auf kleinem Screen frisst der lange
       Satz zu viel Platz vor den KPIs. Desktop-Text bleibt unveraendert. */
    .hero-sub { display: none; }
    /* Kompakter Hero-Stack: Logo/H1/Slogan enger stapeln. Der Abstand
       H1 -> Slogan war mobil ~16px (h1-margin + stack-gap + slogan-margin). */
    .hero-text-stack { gap: 2px; }
    .hero-left-col .hero-slogan { margin-top: 4px; }
    /* KPIs als gleichwertiges Inline-Trio statt gestapelter Riesenzahlen */
    .hero-kpis {
        flex-direction: row;
        /* einzeilig: 3 KPIs nebeneinander in EINER Reihe (vorher wrap = 2+1) */
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: 8px;
        padding-left: 0;
        padding-top: 12px;
        margin-top: 4px;
        border-left: none;
        border-top: 1px solid var(--border);
    }
    .kpi {
        flex: 1 1 0;
        min-width: 0;
        align-items: center;
        text-align: center;
    }
    /* Divider wuerde die 3 gleichen Drittel sprengen -> auf Mobil raus */
    .kpi-divider { display: none; }
    .kpi-val { font-size: 0.82rem; letter-spacing: -0.3px; white-space: nowrap; }
    .kpi-label { font-size: 0.56rem; line-height: 1.2; }

    /* ---- Portal-Density: Hoehen-Diaet ---- */
    .portals { --portals-gap: 20px; }
    .portal-mockup-container { min-height: 150px; margin: 0 0 10px; }
    .portal-intro h2 { font-size: 1.05rem; }
    .portal-intro p { font-size: 0.86rem; line-height: 1.5; }
    /* Mobil: langen Intro-Text ausblenden, Kurzfassung zeigen. Desktop
       behaelt den vollen Text. .portal-intro-short ist ein <div> (kein <p>),
       damit es die positionale .portal-intro p Zaehlung nicht verschiebt. */
    .portal-intro > p { display: none; }
    .portal-intro-short { display: block; font-size: 0.9rem; line-height: 1.55; }
    /* #4 Verwaister Satz-Punkt: seit .highlight global auf `display:inline`
       steht (siehe .portal-intro h2 .highlight oben), ist diese Regel redundant.
       Bleibt als Sicherung stehen, falls die Desktop-Regel wieder inline-block
       wuerde. */
    .portal-intro h2 .highlight { display: inline; }

    /* #2 KPI-Trio (stats-compact): Labels haben white-space:nowrap + inline-flex
       -> lange Labels ("Newsletter Abonnenten") sprengen die Drittel-Spalte und
       ueberlappen die Nachbarn samt Icon. Column-Stack + Umbruch haelt sie drin. */
    .stats-compact { gap: 8px; }
    .stats-compact .val { font-size: 1.05rem; }
    /* Icon VOR dem Label (row). NUR auf Mobil wird der fuer die schmale
       Drittel-Spalte zu lange Original-Labeltext ausgeblendet (font-size:0)
       und durch eine kurze Variante via ::after ersetzt. Desktop behaelt
       die vollen i18n-Labels unveraendert. Bilingual ueber :lang(en) (gleiche
       Technik wie die bestehenden html[lang]-Content-Regeln, i18n.js:103). */
    .kpi-lbl {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 4px;
        max-width: 100%;
    }
    .kpi-lbl i { flex-shrink: 0; }
    .kpi-tip { font-size: 0; white-space: nowrap; }
    .kpi-tip::after { font-size: 0.55rem; line-height: 1.15; }
    .kpi-lbl[data-kpi="views"] .kpi-tip::after { content: "Aufrufe/Monat"; }
    .kpi-lbl[data-kpi="downloads"] .kpi-tip::after { content: "App-Downloads"; }
    .kpi-lbl[data-kpi="newsletter"] .kpi-tip::after { content: "Newsletter-Abos"; }
    :lang(en) .kpi-lbl[data-kpi="views"] .kpi-tip::after { content: "Views/month"; }
    :lang(en) .kpi-lbl[data-kpi="downloads"] .kpi-tip::after { content: "App downloads"; }
    :lang(en) .kpi-lbl[data-kpi="newsletter"] .kpi-tip::after { content: "Newsletter subs"; }

    /* #3 Tier-Selector: die drei Pakete nebeneinander (3 gleiche Spalten).
       Name ueber Preis gestapelt (column) statt nebeneinander, damit
       "Performance 1.499 EUR" in die schmale Spalte passt statt zu wrappen.
       minmax/min-width:0 haelt die Spalten schrumpfbar (kein Overflow). */
    .tier-selector {
        margin: 12px 0;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;
        justify-content: stretch;
        gap: 6px;
    }
    .tier-btn {
        flex: 1 1 0;
        min-width: 0;
        /* Task 3: kompakter (war 56px / padding 10px) */
        min-height: 44px;
        flex-direction: column;
        justify-content: center;
        gap: 2px;
        padding: 6px 6px;
        text-align: center;
        white-space: normal;
        line-height: 1.12;
    }
    .tier-btn .tier-name {
        font-size: var(--t-2xs);
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        max-width: 100%;
    }
    .tier-btn .tier-price { font-size: 0.78rem; }
    .layered-cake-grid { gap: 8px; }
    .trustpilot-strip { margin: 10px 0 12px; }

    /* Task 4: Partnershipmanager kompakt. Statt 4 vertikaler Cards (Avatar oben)
       -> horizontale Zeilen (Avatar links, Text rechts) als Einspalter. Spart
       viel Hoehe und ist besser scannbar. */
    .team-grid {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .team-card {
        width: 100%;
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        column-gap: 12px;
        row-gap: 1px;
        text-align: left;
        padding: 12px 14px;
    }
    .team-card img {
        grid-column: 1;
        grid-row: 1 / -1;
        width: 52px;
        height: 52px;
        margin: 0;
        align-self: center;
    }
    .team-card .team-name,
    .team-card .team-role,
    .team-card a {
        grid-column: 2;
        text-align: left;
        justify-content: flex-start;
        margin: 0;
    }
    .team-card .team-role {
        margin-bottom: 3px;
    }
    .team-card .team-name {
        font-size: var(--t-base);
    }

    /* #1 SM-Section-Header: Icon + Titel + Preis-Pill + Platform-Icons + Chevron
       quetschen sich in eine Flex-Row -> die "ab X EUR"-Pill ueberlappt den Titel.
       Preis/Icons/Chevron in eine eigene Zeile unter Icon+Titel umbrechen. */
    .sm-section-title-row { flex-wrap: wrap; row-gap: 12px; }
    .sm-section-summary-right {
        flex-basis: 100%;
        width: 100%;
        justify-content: flex-start;
        gap: 12px;
        align-self: auto;
    }
    .sm-section-summary-chev { margin-left: auto; }

    /* ---- News-Ticker: bleibt einzeilige Laufschrift, auch mobil ---- */
    .news-ticker-item { white-space: nowrap; }

    /* ---- Auth-Gate: verdichtet + sauber zentriert ---- */
    .auth-gate { padding: 16px; }
    .auth-gate-card { padding: 24px 22px 22px; max-width: 360px; }
    .auth-gate-lock { width: 44px; height: 44px; }
    .auth-gate-logo img { height: 34px; }
    .auth-gate-title { font-size: 1.2rem; }
    .auth-gate-sub { font-size: 0.82rem; margin-bottom: 18px; }

    /* ══ Warenkorb / Offer-Bar: mobile Summary-Bar ══
       Statt die Einzel-Cards in ~340px zu quetschen (Favicons auf dem Preis),
       kollabiert die Bar mobil zu einer kompakten Zusammenfassung: Avatar-Stack
       + "X Brands · Y Platzierungen" links, Preis rechts, voll-breiter CTA in
       Zeile 2. Desktop-Card-Zeile bleibt unangetastet. Nur befuellter Cart
       (:not(--empty)); leerer Cart behaelt die Corner-Pill mit Help-Icons. */
    #offerBar.offer-bar:not(.offer-bar--empty) {
        left: 8px;
        right: 8px;
        width: auto;
        max-width: none;
        transform: translateY(100%);
        flex-wrap: wrap;
        align-items: center;
        padding: 10px 12px 12px;
        gap: 8px 10px;
        border-radius: 20px 20px 0 0;
    }
    #offerBar.offer-bar.visible:not(.offer-bar--empty) {
        transform: translateY(0);
    }
    #offerBar.offer-bar.visible.offer-bar-checkout-hidden:not(.offer-bar--empty) {
        transform: translateY(120%);
    }
    /* Einzel-Cards + Help-Icons raus, Summary rein. */
    #offerBar.offer-bar:not(.offer-bar--empty) .offer-bar-items,
    #offerBar.offer-bar:not(.offer-bar--empty) .offer-bar-help {
        display: none;
    }
    #offerBar.offer-bar:not(.offer-bar--empty) .offer-bar-summary {
        display: flex;
        flex: 1 1 auto;
        min-width: 0;
        order: 1;
    }
    /* Preis rechts, ohne eigene Pill-Box (nur Label + Zahl). */
    #offerBar.offer-bar:not(.offer-bar--empty) .offer-bar-total {
        order: 2;
        flex: 0 0 auto;
        padding: 0;
        background: none;
        border: none;
        box-shadow: none;
    }
    #offerBar .offer-bar-total-label { font-size: 0.58rem; }
    #offerBar .offer-bar-total-price { font-size: 1.5rem; letter-spacing: -0.5px; }
    /* CTA: eigene Zeile, volle Breite, groessere Tap-Flaeche, zentriert. */
    #offerBar.offer-bar:not(.offer-bar--empty) .offer-bar-checkout-btn {
        order: 3;
        flex: 1 0 100%;
        width: 100%;
        justify-content: center;
        padding: 13px 18px;
        border-radius: 14px;
    }

    /* Modal an die SICHTBARE Viewport-Hoehe binden (dvh statt vh): sonst ragt
       das mittig zentrierte Modal auf Handys mit URL-Leiste oben raus und der
       Logo-Header wird abgeschnitten. vh davor als Fallback. */
    .checkout-modal { max-height: 90vh; max-height: 90dvh; }
    /* Header mobil kompakter (Logo 52->30px, knappere Paddings) – spart Hoehe
       und verhindert zusammen mit dvh das Abschneiden des Logos oben. */
    .checkout-header,
    .checkout-modal.has-multi .checkout-header { padding: 12px 18px 10px; }
    .checkout-logo,
    .checkout-modal.has-multi .checkout-logo { height: 30px; }
    .checkout-header h2.checkout-header-title { font-size: 1.15rem; margin-top: 4px; }

    /* ══ Checkout/Warenkorb: Teilen-CTA als gedockte Bottom-Bar ══
       Die dunkle Bottom-Line-Bank (Preis + Meta + Teilen-Button) wird per JS
       (openCheckoutPopover, Post-Mount) aus dem scrollenden .checkout-body in
       den fixen Footer .checkout-actions umgehaengt. Als Sticky-Slab IM Scroll
       wirkte sie "schwebend" (Card-Content oben + unten sichtbar). Im Footer
       ist sie eine buendige, full-bleed Dock-Bar: die Cards scrollen sauber
       darueber weg, die Bank-Oberkante ist die Trennlinie. Kein ID-Verlust
       (checkoutShareBox, _createShareLink wandern mit). Desktop unberuehrt. */
    .checkout-actions {
        padding: 0;
        gap: 0;
        border-top: none;
        align-items: stretch;
    }
    /* Legal-/Trust-Zeilen mobil ausblenden – schafft Platz (User-Wunsch). */
    .checkout-no-obligation,
    .checkout-price-basis { display: none; }
    /* Falls Submit/PDF-Buttons aktiv sind: eigenes Padding (Bank ist full-bleed). */
    .checkout-actions-btns:not(:empty) { padding: 12px 16px; }
    .checkout-actions .checkout-bottomline {
        width: auto;
        align-self: stretch;
        margin: 0;
        padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
        border-radius: 0;
        box-shadow: none;
        border-top: 1px solid rgba(255, 255, 255, 0.09);
    }
    /* Recap auf eine kompakte Zeile: Preis + Meta nebeneinander, zentriert. */
    .checkout-bottomline .checkout-bottomline-inner { gap: 8px; }
    .checkout-bottomline .checkout-bottomline-recap {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: center;
        gap: 2px 10px;
    }
    .checkout-bottomline .checkout-summary-card-price {
        flex-direction: row;
        align-items: baseline;
        gap: 6px;
    }
    /* Hoehe sparen: Label/Note/Divider/Share-Head/Sub/Hint raus – der Kontext
       lebt im Total, der Meta-Zeile + dem Button-Label. */
    .checkout-bottomline .checkout-summary-card-label,
    .checkout-bottomline .checkout-summary-card-note,
    .checkout-bottomline .checkout-bottomline-divider,
    .checkout-bottomline .checkout-share-head,
    .checkout-bottomline .checkout-share-sub,
    .checkout-bottomline .checkout-hint--in-card { display: none; }
    .checkout-bottomline .checkout-summary-card-total {
        font-size: var(--t-xl);
        /* Nie zwischen Zahl und Waehrungszeichen umbrechen ("2.623" / "€"). */
        white-space: nowrap;
    }
    /* Die Abzugszeilen sind Kinder der Preis-Zeile und quetschten sich mobil
       neben den Total, bis der umbrach. Jede bekommt eine eigene Zeile
       darunter. Galt frueher nur dem Rabatt-Pill; seit der Grundrabatt als
       eigene Zeile mitlaeuft, sind es bis zu drei. */
    .checkout-bottomline .checkout-summary-card-price {
        flex-wrap: wrap;
        justify-content: center;
    }
    .checkout-bottomline .checkout-bundle-line,
    .checkout-bottomline .checkout-bundle-next {
        flex: 0 0 100%;
        justify-content: center;
        margin: 4px 0 0;
    }
    .checkout-bottomline .checkout-summary-card-meta {
        flex-direction: row;
        width: auto;
        border-top: none;
        padding-top: 0;
    }
    .checkout-bottomline .checkout-share-result--in-card {
        border-top: none;
        padding: 0;
    }
    .checkout-bottomline .checkout-share-action { max-width: none; width: 100%; }
    .checkout-bottomline .checkout-share-create {
        width: 100%;
        justify-content: center;
        padding: 13px 16px;
    }

    /* Banner mobil flacher – spart pro Card vertikalen Platz und entlastet
       damit direkt das Scroll-Problem (gilt fuer Single + Multi/expanded). */
    .checkout-row-banner,
    .checkout-packages--expanded .checkout-row-banner {
        height: 92px;
        padding: 12px 16px;
    }
    .checkout-row-banner img,
    .checkout-packages--expanded .checkout-row-banner img {
        max-height: 60px;
    }

    /* ══ Checkout als Bottom-Sheet (Tile-Sheet-Familie, vgl. .tooltip-sheet) ══
       Antwort auf "warum nicht die volle Flaeche": statt mittig zu schweben
       klebt das Panel unten, full-bleed, nur oben gerundet, und faehrt von
       unten ein wie das Tile-Sheet. Desktop (>600px) bleibt unberuehrt das
       zentrierte Floating-Modal. */
    .checkout-overlay {
        align-items: flex-end;
        justify-content: center;
    }
    /* has-multi mitnehmen: der 720px-Block begrenzt es sonst per hoeherer
       Spezifitaet wieder auf 540px (relevant nur bei 541-600px Viewports). */
    .checkout-modal,
    .checkout-modal.has-multi {
        width: 100%;
        max-width: none;
    }
    .checkout-modal {
        border-radius: 22px 22px 0 0;
        /* Sheet-Optik: Glow + Schatten nach OBEN. Untere Rundung + der
           allseitige Accent-Glow des Desktop-Modals entfallen. */
        background:
            radial-gradient(120% 58% at 50% -12%,
                color-mix(in srgb, var(--tm-accent) 11%, transparent) 0%,
                transparent 55%),
            var(--panel-bg, #fff);
        border-top: 1px solid color-mix(in srgb, var(--tm-accent) 30%, var(--border));
        box-shadow:
            0 -1px 0 color-mix(in srgb, #fff 10%, transparent) inset,
            0 -24px 60px -14px rgba(0, 0, 0, 0.5),
            0 -3px 14px color-mix(in srgb, var(--tm-accent) 12%, transparent);
        /* Motion: Slide-up statt scale-from-center. BEIDE transform-Regeln
           muessen mobil neu gesetzt werden, sonst gewinnt der Desktop-
           .visible-Wert (scale(1) translateY(0)) und es springt statt slidet. */
        transform: translateY(100%);
        transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) ease;
    }
    .checkout-overlay.visible .checkout-modal {
        transform: translateY(0);
    }
    /* 3px Accent-Kante an der Oberkante – Signatur der Sheet-Familie. */
    .checkout-modal::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--tm-accent);
        border-radius: 22px 22px 0 0;
        opacity: 0.9;
        z-index: 3;
    }
    /* Grip-Handle: "zieh mich"-Affordance, macht die Sheet-Herkunft lesbar. */
    .checkout-sheet-handle {
        display: block;
        width: 44px;
        height: 5px;
        border-radius: 999px;
        background: color-mix(in srgb, var(--text) 20%, transparent);
        margin: 8px auto 2px;
        flex-shrink: 0;
    }
    /* Single-Brand Teilen-Block: die Navy-Bank wird full-bleed an die
       Unterkante gedockt (gleiche Behandlung wie die Multi-.checkout-bottomline
       darueber). Loest den "eingelegtes zweites Panel"-Bruch auf – aus der
       schwebenden Karte wird eine durchgehende Aktions-Schiene. */
    .checkout-actions .checkout-share-result--solo-dark {
        max-width: none;
        width: auto;
        align-self: stretch;
        margin: 0;
        border: none;
        border-top: 1px solid rgba(255, 255, 255, 0.09);
        border-radius: 0;
        box-shadow: none;
        padding: 16px 18px calc(16px + env(safe-area-inset-bottom, 0px));
    }

    /* ── Teilen-Box startet kollabiert: nur Primaer-Button + Chevron ──
       Head/Sub/PDF/Footer sind eingeklappt und oeffnen per Chevron. Gibt der
       Auswahl-Card die Hoehe zurueck (User-Wunsch). Primaer-Button (Link
       erstellen) bleibt 1 Tap entfernt. */
    .checkout-share-result--solo-dark .checkout-share-cta-row {
        flex-wrap: wrap;
        align-items: stretch;
        max-width: none;
    }
    .checkout-share-result--solo-dark .checkout-share-cta-row .checkout-share-action {
        flex: 1 1 auto;
        min-width: 0;
    }
    .checkout-share-result--solo-dark .checkout-share-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 46px;
        align-self: stretch;
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: var(--radius-sm, 8px);
        background: rgba(255, 255, 255, 0.06);
        color: #fff;
        font-size: var(--t-sm);
        cursor: pointer;
        transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease;
    }
    .checkout-share-result--solo-dark .checkout-share-toggle:active {
        background: rgba(255, 255, 255, 0.12);
    }
    .checkout-share-toggle i {
        transition: transform var(--dur-base) var(--ease-out);
    }
    .checkout-share-result--solo-dark[data-share-collapsed="false"] .checkout-share-toggle i {
        transform: rotate(180deg);
    }
    /* PDF wrappt im expandierten Zustand in eine eigene volle Zeile unter den
       Primaer-Button (statt gequetscht daneben). */
    .checkout-share-result--solo-dark .checkout-share-cta-row .checkout-pdf-link {
        flex: 1 1 100%;
        justify-content: center;
    }
    /* Collapsed: alles ausser Primaer-Button + Chevron ausblenden. */
    .checkout-share-result--solo-dark[data-share-collapsed="true"] .checkout-share-head,
    .checkout-share-result--solo-dark[data-share-collapsed="true"] .checkout-share-sub,
    .checkout-share-result--solo-dark[data-share-collapsed="true"] .checkout-pdf-link,
    .checkout-share-result--solo-dark[data-share-collapsed="true"] .checkout-hint--in-card {
        display: none;
    }
    /* Kollabiert kompakter: weniger vertikaler Platz, damit die Card fuehrt. */
    .checkout-share-result--solo-dark[data-share-collapsed="true"] {
        padding-top: 12px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }
    .kit-switch-banner { flex-wrap: wrap; justify-content: center; text-align: center; }
}

@media (max-width: 400px) {
    .hero-content h1 { font-size: 1.62rem; }
    /* einzeilige 3-KPI-Reihe: auf schmalen Handys kleiner statt groesser */
    .kpi-val { font-size: 0.76rem; }
    .kpi-label { font-size: 0.52rem; }
    /* Social-Follower auch auf schmalen Handys 2x2 (statt 1-spaltig
       gestapelt). minmax(0,1fr) + min-width:0 auf die Kinder (600er-Block)
       verhindert Overflow durch nowrap-Zahlen bei sehr schmalen Viewports. */
    .social-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Offer-Bar Summary auf sehr schmalen Handys noch etwas kompakter. */
    #offerBar .offer-bar-avatar { width: 26px; height: 26px; }
    #offerBar .offer-bar-total-price { font-size: 1.3rem; }
    #offerBar .offer-bar-summary-meta { font-size: 0.68rem; }
}

/* ═══════════════════════════════════════════════════════════════
   Kein GPU-Compositing: backdrop-filter abschalten
   Die Klasse setzt das Inline-Script in index.html, wenn der Browser
   ohne Hardwarebeschleunigung laeuft. Der Blur muesste dann in jedem
   Scroll-Frame auf der CPU ueber die volle Navigationsbreite neu
   berechnet werden und ist nicht cachebar, weil der Hintergrund beim
   Scrollen wandert. Gemessen unter Software-Compositing: 4,9% verpasste
   Frames mit Blur, 0,8% ohne. Die Nav wird deckend, sonst scheint der
   Text darunter durch.
   ═══════════════════════════════════════════════════════════════ */
html.gpu-software .sticky-nav {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--nav-bg-solid, var(--surface));
}

/* Die Offer-Bar war hier bisher nicht erfasst, obwohl sie die groesste
   dauerhaft sichtbare Blur-Flaeche der Seite ist: fixed, immer eingeblendet
   (auch mit leerem Warenkorb), bis zu 1400px breit und mit blur(32px)
   staerker als die Nav. --panel-bg ist theme-aware; der Light+Black-Week-
   Override weiter oben hat hoehere Spezifitaet und behaelt sein #111111. */
html.gpu-software .offer-bar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--panel-bg, #161b22);
}

/* Ohne GPU muesste der Blur in jedem Scroll-Frame auf der CPU neu
   gerechnet werden - der Knopf steht fixed ueber wanderndem Inhalt,
   ist also nicht cachebar. Deckende Flaeche statt Glas. */
html.gpu-software .back-to-top {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--panel-bg, #161b22);
}

html.gpu-software .back-to-top.visible:hover {
    background: var(--surface-hover, #30363d);
}

/* Mobil ist die Portal-Logo-Leiste eine zweite fixed Blur-Flaeche. */
@media (max-width: 1000px) {
    html.gpu-software .nav-links {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: var(--nav-bg-solid, var(--surface));
    }
}

/* ═══════════════════════════════════════════════════════════════
   Public-Link ohne Preise (body.prices-hidden)
   Die Preise kommen serverseitig gar nicht erst an, die .tier-price
   sind daher leer. Hier werden die leeren Huellen entfernt, damit
   keine Luecken im Tier-Button stehenbleiben.
   ═══════════════════════════════════════════════════════════════ */
body.prices-hidden .tier-price {
    display: none;
}

/* Tier-Button ohne Preiszeile: Name mittig statt oben klebend */
body.prices-hidden .tier-btn {
    justify-content: center;
}

/* Rabatt-Reste koennen ohne Basispreis nicht sinnvoll dargestellt werden */
body.prices-hidden .price-original,
body.prices-hidden .checkout-strike,
body.prices-hidden .sm-mega-savings,
body.prices-hidden .sm-price-cell-strike,
body.prices-hidden .checkout-bundle-line {
    display: none !important;
}

/* "Auf Anfrage" statt Betrag: gedaempft, damit es nicht wie ein Preis wirkt */
body.prices-hidden .checkout-line-price-soft,
body.prices-hidden .sm-section-price-badge strong {
    font-weight: 600;
    opacity: 0.75;
    white-space: nowrap;
}

/* ── Mission Control: Checkbox "Preise ausblenden" beim Public-Link ── */
.udb-pub-hideprices {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 4px 0 12px;
    padding: 10px 12px;
    border: 1px solid var(--border-light, rgba(255, 255, 255, 0.12));
    border-radius: 10px;
    background: color-mix(in srgb, var(--tm-accent) 4%, transparent);
    cursor: pointer;
}

.udb-pub-hideprices input {
    margin-top: 2px;
    accent-color: var(--tm-accent);
    cursor: pointer;
    flex-shrink: 0;
}

.udb-pub-hideprices-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.udb-pub-hideprices-text strong {
    font-size: var(--t-sm);
}

.udb-pub-hideprices-text small {
    opacity: 0.65;
    line-height: 1.35;
}

/* Badge in der Public-Link-Liste */
.udb-pub-noprice-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: var(--t-2xs);
    font-weight: 600;
    white-space: nowrap;
    color: var(--tm-accent);
    background: color-mix(in srgb, var(--tm-accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--tm-accent) 28%, transparent);
}

/* ── Tab Rabattierung ─────────────────────────────── */
/* ── Tab Rabattierung: schmale Viewports ─────────────
   Basis-Layout steht bei .dt-layout (Karten). Hier nur
   das Umbrechen: Zeile wird gestapelt, Datums-Pfeil weg. */
@media (max-width: 600px) {

    .dt-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        padding: 12px;
    }

    .dt-dates {
        flex-wrap: wrap;
        gap: 10px;
    }

    .dt-date {
        width: 100%;
    }

    .dt-date-field {
        flex: 1 1 140px;
    }

    .dt-date-arrow {
        display: none;
    }

    .dt-actions {
        flex-wrap: wrap;
        gap: 10px;
        padding: 10px 12px;
    }

    .dt-actions-note {
        flex: 1 1 100%;
        margin-right: 0;
    }

    /* Die Pillen belegen hier die ganze Zeile, der Knopf rutscht darunter.
       Ohne das stuende er linksbuendig unter dem Text statt an der Kante,
       an der er auch auf breiten Fenstern sitzt. */
    .dt-actions .udb-gate-save-btn {
        margin-left: auto;
    }

    /* Frist bleibt gross, aber die Endstufe hat ein Segment mehr und braucht
       bei 360px entsprechend mehr Luft. */
    .bw-deadline {
        margin-top: 14px;
    }

    .bw-dl-eyebrow {
        margin-bottom: 5px;
    }

    /* Angedocktes Band: "Early Bird endet in" plus beide Werte passen bei
       360px nicht in eine Zeile. Statt einen zweiten, kuerzeren Text
       einzufuehren (zweite Quelle fuer dieselbe Aussage) steht das Label
       hier ueber den Werten - die Bar waechst nach oben, nicht zur Seite.
       Die padding-Shorthands im Mobile-Block liegen auf ID-Spezifitaet,
       die Hoehenreserve muss darueber liegen. */
    .offer-bar {
        --eb-rail-h: 60px;
    }

    #offerBar.offer-bar.offer-bar--eb:not(.offer-bar--empty) {
        padding-top: calc(var(--eb-rail-h) + 9px);
    }

    /* WICHTIG: Der leere Warenkorb behaelt AUCH mobil die schmale
       Ecken-Pille (siehe Summary-Bar-Kommentar oben: nur :not(--empty)
       wird full-width). Alle Zeilen-Regeln hier gelten deshalb NUR fuer
       die befuellte, fast bildschirmbreite Bar - die Pille behaelt ihr
       gestapeltes Layout aus dem Basis-Block, ihre Typografie skaliert
       ohnehin per Container-Query mit der echten Breite. */
    .offer-bar:not(.offer-bar--empty) .offer-bar-eb {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 2px 8px;
        padding: 0 12px;
    }

    .offer-bar:not(.offer-bar--empty) .obeb-label {
        display: block;
        flex: 0 0 100%;
        max-width: 100%;
        text-align: center;
    }

    .offer-bar:not(.offer-bar--empty) .obeb-bolt {
        display: none;
    }

    .offer-bar:not(.offer-bar--empty) .obeb-label::before {
        content: '\26A1';
        margin-right: 5px;
        color: #FFD700;
        letter-spacing: 0;
    }

    .offer-bar:not(.offer-bar--empty) .obeb-clock,
    .offer-bar:not(.offer-bar--empty) .obeb-pct {
        font-size: 20px;
    }

    /* Mobil ist der ganze Hero mittig gesetzt (Logo, Headline, Slogan, KPIs).
       Der Frist-Block war als einziges Element linksbuendig und brach die
       Achse. */
    .bw-deadline {
        text-align: center;
    }

    .bw-dl-eyebrow,
    .bw-dl-row {
        justify-content: center;
    }

    .bw-dl-clock {
        /* inline-flex schrumpft auf den Inhalt, dann laeuft justify-content
           ins Leere – mobil daher volle Breite. */
        display: flex;
        justify-content: center;
        font-size: 1.75rem;
    }

    /* Nebeneinander passen Frist und Vorteil bei 360px nicht. Statt sie
       umbrechen zu lassen (die linke Trennlinie stuende dann als Strich ins
       Nichts am Zeilenanfang) stehen sie mobil untereinander, getrennt durch
       eine liegende Haarlinie. */
    .bw-dl-row {
        flex-direction: column;
        align-items: center;
        row-gap: 10px;
    }

    .bw-dl-pct {
        font-size: 1.75rem;
        border-left: none;
        margin-left: 0;
        padding-left: 0;
        border-top: 1px solid rgba(255, 215, 0, 0.3);
        padding-top: 10px;
    }

    /* Die Kit-H1 setzt white-space:nowrap und sticht per Spezifitaet die
       mobile Groesse aus. Bei 360px passt "BLACK MONTH MEDIA-KIT 2026" damit
       nicht in die Zeile und overflow-x:clip schneidet das Jahr ab, statt
       den Fehler zu zeigen. */
    [data-profile="black-week"] .hero-content h1 {
        white-space: normal;
    }
}
/* ══════════════════════════════════════════════════════════════════════
   Kachelfluss über die aktiven Paket-Ebenen hinweg
   ══════════════════════════════════════════════════════════════════════
   Die Merge-Regeln weiter oben lassen die aktiven Ebenen bereits wie EIN
   Panel aussehen: Innenkanten transparent, Radien auf 0, gemeinsamer
   Hintergrund, durchgezogener Balken links. Ihre Kacheln lagen aber
   weiterhin in getrennten Grid-Containern (.layer-tiles je Ebene), und
   zwei Grid-Container können keine gemeinsame Zeile bilden. Beim
   Hochstufen landete die neu hinzukommende Kachel deshalb in einer
   eigenen Reihe, obwohl rechts daneben Platz frei war.

   display:contents löst die aktiven Ebenen auf, sodass ihre Kacheln Items
   EINES Rasters werden. Der Umbruch hängt dann nur noch von der
   Spaltenzahl ab, nicht mehr von der Ebenen-Zugehörigkeit.

   Nur im View-Mode: im Edit-Mode bestimmen genau diese Container, in
   welcher Ebene eine Kachel liegt (SortableJS + der Saver in tour.js
   lesen sie aus dem DOM). Dort bleibt die Struktur unberührt.
   ────────────────────────────────────────────────────────────────────── */

body:not(.edit-mode) .portal .layered-cake-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 6px;
    align-content: start;
    /* Innenabstand des Panels zu seinen Kacheln. Eine Variable, weil derselbe
       Wert an vier Stellen gebraucht wird: hier als padding, in den negativen
       Margins des gesperrten Blocks, in dessen eigenem padding und in den
       calc() von ::after/::before. Der linke Einzug ersetzt das bisherige
       padding der .layer-tiles und haelt zusaetzlich den 29px-Balken frei. */
    --tmx-cake-pad: 16px;
    padding: var(--tmx-cake-pad) var(--tmx-cake-pad) var(--tmx-cake-pad) calc(29px + var(--tmx-cake-pad));
    position: relative;
}

body:not(.edit-mode) .portal .package-layer.active-layer,
body:not(.edit-mode) .portal .package-layer.active-layer>.layer-tiles {
    display: contents;
}

/* Reihenfolge im gemeinsamen Raster. Der Cake ist im View-Mode kein
   column-reverse-Flex mehr, deshalb muss die bisherige Umkehrung
   (Essentials oben, dann Performance, dann Premium) hier explizit stehen. */
body:not(.edit-mode) .portal .package-layer.layer-s>.layer-tiles>.tile {
    order: 1;
}

body:not(.edit-mode) .portal .package-layer.layer-m>.layer-tiles>.tile {
    order: 2;
}

body:not(.edit-mode) .portal .package-layer.layer-l>.layer-tiles>.tile {
    order: 3;
}

/* Die aufgelösten Ebenen dürfen ihren Balken und ihr Stufenlabel nicht
   mehr selbst zeichnen: als Kinder eines display:contents-Elements würden
   beide zu eigenen Rasterzellen und das Layout zerreißen. Beides kommt
   unten einmal für den gesamten aktiven Block. */
body:not(.edit-mode) .portal .package-layer.active-layer::before,
body:not(.edit-mode) .portal .package-layer.active-layer::after,
body:not(.edit-mode) .portal .package-layer.active-layer>.layer-title {
    display: none;
}

/* Eine noch gesperrte Ebene bleibt eine eigene Box: sie ist bewusst
   abgesetzt ("das bekommst du mit dem nächsthöheren Paket") und behält
   Rahmen, Balken und Label. Über die volle Rasterbreite, damit sie unter
   den aktiven Kacheln steht statt neben ihnen. */
body:not(.edit-mode) .portal .package-layer.locked-layer {
    grid-column: 1 / -1;
    order: 9;
    /* Den Einzug des Cake zurücknehmen, damit die gesperrte Ebene ihren
       eigenen Balken wieder ganz links zeichnen kann. */
    margin: 6px calc(-1 * var(--tmx-cake-pad)) calc(-1 * var(--tmx-cake-pad)) calc(-29px - var(--tmx-cake-pad));
    /* Der Innenabstand kommt vollstaendig aus .layer-tiles darunter. Ohne das
       hier kaemen zwei Altbestaende obendrauf und der Block saesse schief:
       .layer-s/-m/-l bringen je 6px padding-top mit, und im Mobilblock hat
       .package-layer zusaetzlich 8px unten. Der einzige weitere Inhalt,
       .layer-title, ist global display:none. */
    padding: 0;
}

/* Im Paket Essentials sind ZWEI Ebenen gleichzeitig gesperrt, Performance und
   Premium. Mit einem gemeinsamen order-Wert entscheidet zwischen ihnen die
   Dokumentreihenfolge, und die ist L vor M (Erbe des frueheren
   column-reverse) - Premium stand dadurch ueber Performance. Die Staffelung
   muss hier also genauso explizit stehen wie oben bei den Kacheln. */
body:not(.edit-mode) .portal .package-layer.layer-m.locked-layer {
    order: 8;
}

body:not(.edit-mode) .portal .package-layer.layer-l.locked-layer {
    order: 9;
}

/* Derselbe Innenabstand wie im aktiven Panel, damit beide Bloecke gleich
   atmen. Vorher stand hier padding-top 0 und die Kacheln klebten an der
   Oberkante ihres Rahmens. */
body:not(.edit-mode) .portal .package-layer.locked-layer>.layer-tiles {
    padding: var(--tmx-cake-pad) var(--tmx-cake-pad) var(--tmx-cake-pad) calc(29px + var(--tmx-cake-pad));
}

/* Rahmen, Hintergrund und Balken des aktiven Blocks.
   Sie liegen NICHT auf dem Cake selbst, denn der enthaelt auch den noch
   gesperrten Block - ein Rahmen um den ganzen Cake liess beide Bereiche
   ineinander uebergehen. Stattdessen zeichnet ::after das Panel und ::before
   den Balken, beide begrenzt auf die Ausdehnung des aktiven Bereichs.
   Diese Ausdehnung ist nur zur Laufzeit bekannt (die Ebenen sind aufgeloest
   und haben keine eigene Box mehr), deshalb liefert _measureActiveCakeSpan in
   admin.js sie als --tmx-active-top / --tmx-active-h. Fehlen die Variablen,
   fallen beide auf die volle Hoehe zurueck.

   Gemessen wird die Kachel-Huelle, also exakt Oberkante erste Kachel bis
   Unterkante letzte Kachel. Ohne Zuschlag saessen Rahmen und Balken damit
   direkt auf den Kacheln - oben und unten null Luft, waehrend links und
   rechts das padding des Rasters wirkt. Der Zuschlag von einem
   --tmx-cake-pad je Seite gibt dem Panel denselben Innenabstand ringsum. */
body:not(.edit-mode) .portal .layered-cake-grid::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    /* Hoehe faellt auf --tmx-active-h zurueck, folgt aber --tmx-stripe-h
       sobald _fitTierStripeLabel den Balken nach unten ueber die Kachelreihe
       hinaus waechst (z.B. Reebate/Performance, siehe ::before-Kommentar
       unten) - sonst ragt der Balken unten sichtbar aus dem Panel-Rahmen
       heraus. Top bleibt immer an --tmx-active-top verankert (der Balken
       waechst nur nach unten, nie nach oben ueber die Kachel-Oberkante
       hinaus - siehe _fitTierStripeLabel). */
    top: calc(var(--tmx-active-top, 0px) - var(--tmx-cake-pad));
    height: calc(var(--tmx-stripe-h, var(--tmx-active-h, 100%)) + 2 * var(--tmx-cake-pad));
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border-light, var(--border)));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    box-shadow: var(--shadow-1);
    pointer-events: none;
    z-index: 0;
}

/* Balken links, ebenfalls nur über den aktiven Bereich.
   Eigene Hoehen-Variable statt --tmx-active-h: hat eine Ebene nur eine
   Kachelzeile, ist sie flacher als der gedrehte Schriftzug, und der Balken
   muss nach unten ueber die Kacheln hinauswachsen, damit die Schrift nicht
   neben ihm steht (_fitTierStripeLabel in admin.js setzt --tmx-stripe-h dann,
   Top bleibt unveraendert an --tmx-active-top). Der Rahmen (::after) folgt
   demselben --tmx-stripe-h (siehe oben) und waechst mit, sonst ragt der
   Balken unten sichtbar aus dem Panel heraus (Reebate/Performance, real
   gemeldet 05.08.2026 - eine fruehere Fassung liess auch die Top-Kante
   wachsen, das ueberlappte dann die Description-Box davor). Ohne Ueberlaenge
   fallen beide auf denselben Wert zurueck. */
body:not(.edit-mode) .portal .layered-cake-grid::before {
    content: '';
    position: absolute;
    left: 0;
    top: calc(var(--tmx-active-top, 0px) - var(--tmx-cake-pad));
    height: calc(var(--tmx-stripe-h, var(--tmx-active-h, 100%)) + 2 * var(--tmx-cake-pad));
    width: 29px;
    background: color-mix(in srgb, var(--accent) 75%, transparent);
    border-top-left-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
    pointer-events: none;
    z-index: 1;
}

/* Der gesperrte Block bleibt sichtbar abgesetzt: eigener Rahmen (kommt aus
   .package-layer) plus Abstand zum aktiven Panel darueber. Das aktive Panel
   reicht jetzt ein --tmx-cake-pad ueber die letzte Kachel hinaus, also muss
   der Abstand um denselben Betrag wachsen - sonst schrumpft die sichtbare
   Trennung zwischen beiden Bloecken auf wenige Pixel. */
body:not(.edit-mode) .portal .package-layer.locked-layer {
    margin-top: calc(12px + var(--tmx-cake-pad));
}

/* Die Kacheln müssen über Balken und Hintergrund liegen. */
body:not(.edit-mode) .portal .layered-cake-grid>.package-layer,
body:not(.edit-mode) .portal .layer-tiles>.tile {
    position: relative;
    z-index: 2;
}

body:not(.edit-mode) .portal .layered-cake-grid>.tier-stripe-label {
    z-index: 3;
}

/* Deko-Elemente, die zwischen den Ebenen sitzen, dürfen im aufgelösten
   Zustand keine Rasterzelle belegen. Der Plus-Verbinder verband zwei
   sichtbar getrennte Ebenen-Boxen; die gibt es im View-Mode nicht mehr,
   und als Grid-Item riss er eine leere Spalte in die erste Reihe. */
body:not(.edit-mode) .portal .layered-cake-grid>.tier-plus-connector {
    display: none;
}

/* Auf schmalen Viewports frisst derselbe Innenabstand einen spuerbaren Teil
   der Kachelbreite (links kommen die 29px des Balken obendrauf). Ein
   kleinerer Wert reicht dort optisch aus; die Regel muss hinter dem Block
   oben stehen, weil beide dieselbe Spezifitaet haben. */
@media (max-width: 600px) {
    body:not(.edit-mode) .portal .layered-cake-grid {
        --tmx-cake-pad: 10px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Paketwahl als durchgehende Segmentleiste (ab 601px)

   Die drei Pakete sind die zentrale Entscheidung der Seite, standen aber
   als schmale, mittig zusammengeschobene Chips in einer fast doppelt so
   breiten Spalte: bei 1440px belegte die Leiste 430px von 679px, der Rest
   war Luft. Jetzt fuellen drei gleich breite Zellen die Spalte und fluchten
   mit der Paketbeschreibung darunter. Name und Preis stehen uebereinander,
   damit die Zelle ihre Groesse auch traegt statt sie nur zu beanspruchen.

   Preisfarbe: der Betrag stand in reinem --accent und lag damit im
   Light-Theme fuer ALLE sieben Brands unter der Lesbarkeitsschwelle
   (1,62:1 DealDoktor bis 3,80:1 Reebate, gefordert sind 4,5:1). Ein
   groesserer Preis in derselben Farbe haette das nur deutlicher gemacht.
   Der Betrag traegt den Markenton jetzt beigemischt: >= 4,66:1 ueber alle
   7 Brands x Light/Dark/Black-Week x aktiv/inaktiv. Die Marke selbst sitzt
   weiter im Tint und im Ring der gewaehlten Zelle, also dort, wo sie keine
   Schrift lesbar halten muss.

   Print bleibt bewusst aussen vor (`screen`): der PDF-Export braucht keine
   Klickflaeche, und die Seitenumbrueche sind auf den kompakten Stand
   gerechnet.
   ═══════════════════════════════════════════════════════════════ */
@media screen and (min-width: 601px) {

    .tier-selector {
        gap: 10px;
        align-items: stretch;
        justify-content: stretch;
        margin-top: 14px;
        margin-bottom: 16px;
        /* Der Query-Container dafuer steht jetzt in der Basisregel (siehe
           `.tier-selector` weiter oben) und gilt damit auch auf Mobil. Die
           Zellbreite haengt nicht an der Fensterbreite allein, sondern daran,
           ob .portal-body ein- oder zweispaltig steht: bei 860px ist eine
           Zelle 246px breit, bei 861px nur noch 108px. Ein Viewport-Band
           muesste diesen Umbruch mitpflegen, die Containerbreite kennt ihn
           von selbst. Gleiches Muster wie `ebrail` weiter oben. */
    }

    /* min-height traegt den Fall ohne Preiszeile (preisfreier Public-Link,
       body.prices-hidden): sonst schrumpft die Leiste dort auf einen
       schmalen Balken zurueck. Bei sichtbarem Preis ist der Wert nicht
       bindend, die Zelle ist von sich aus hoeher. */
    .tier-btn {
        flex: 1 1 0;
        min-width: 0;
        min-height: 56px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 3px;
        padding: 12px 14px;
        text-align: center;
        white-space: normal;
        line-height: 1.25;
    }

    .tier-btn .tier-name {
        font-size: var(--t-sm);
    }

    /* nowrap nur auf dem Betrag: lange, admin-editierte Paketnamen duerfen
       umbrechen (align-items:stretch haelt die drei Zellen gleich hoch),
       ein umgebrochener Preis waere dagegen immer ein Fehler. */
    .tier-btn .tier-price {
        font-size: var(--t-md);
        white-space: nowrap;
        opacity: 1;
        color: color-mix(in srgb, var(--accent) 40%, var(--text));
    }

    .tier-btn.active .tier-price {
        color: color-mix(in srgb, var(--accent) 40%, var(--text));
    }

    /* Der Auswahl-Ring aus der Basisregel ging beim Tier-Switch-Polish
       verloren (box-shadow dort ersetzt statt ergaenzt), seither trug die
       aktive Zelle nur einen Schein. Bei dieser Zellgroesse ist der Ring
       die klarste Auswahl-Anzeige, also zurueck. */
    .tier-btn.active {
        box-shadow: inset 0 0 0 1.5px var(--accent),
            0 4px 16px color-mix(in srgb, var(--accent) 22%, transparent);
    }

    .tier-btn.active:hover {
        box-shadow: inset 0 0 0 1.5px var(--accent),
            0 6px 20px color-mix(in srgb, var(--accent) 28%, transparent);
    }
}

/* Rabattierter Preis in schmalen Zellen.
   `2.400 EUR 1.920 EUR` steht als nowrap in einer Zeile und braucht rund
   126px. Sobald .portal-body zweispaltig wird, faellt die Zelle auf 108px
   und der Preis lief seitlich heraus, wo ihn der Hintergrund des Nachbarn
   ueberdeckte (`2.40` statt `2.400 EUR`). Betroffen war nur der Fall mit
   Streichpreis, also praktisch das Black-Week-Kit. Denselben Defekt hat
   PR #30 unabhaengig gemessen und ueber ein Viewport-Band geloest.
   Gemessen: Ueberlauf ab einer Leistenbreite von 344px bis 397px, sauber
   ab 401px. Schwelle 400px liegt dazwischen. Darunter bekommt der
   Streichpreis eine eigene Zeile, dann ist die breiteste Zeile der
   aktuelle Preis mit rund 70px.

   Der Stapel-Schritt gilt bewusst auf ALLEN Breiten: die Leiste ist auf dem
   Telefon am engsten, dort war der Streichpreis aber gar nicht bemessen und
   der Umbruch fiel zwischen Zahl und Waehrungszeichen. Die uebrigen Regeln
   dieses Blocks (Innenabstand, Flamme, nowrap am Namen) sind auf die
   Desktop-Zellgroesse gerechnet und bleiben deshalb im 601px-Zweig. */
@container tierbar (max-width: 400px) {

    .tier-btn .tier-price .price-original {
        display: block;
        margin-right: 0;
    }
}

@media screen and (min-width: 601px) {

    @container tierbar (max-width: 400px) {

        /* Der Paketname ist an dieser Stelle ein einziges Wort, also gibt es
           genau eine Umbruchstelle: zwischen Flamme und Wort. Damit stand das
           Icon allein ueber "Performance". Es ist reine Dekoration, die
           Auswahl traegt ohnehin Ring und Tint - unter 500px Viewport wird es
           aus dem gleichen Grund seit jeher ausgeblendet. Ohne Icon und mit
           knapperem Innenabstand passt der Name wieder in eine Zeile. */
        .tier-btn {
            padding: 12px 8px;
        }

        .tier-btn.active .tier-name i,
        .tier-btn.active .tier-name .fire {
            display: none;
        }

        .tier-btn .tier-name {
            white-space: nowrap;
        }
    }
}

/* Miniaturleiste der Lightbox auf schmalen Geraeten.
   Auf 360px Breite passen bei 72px Kacheln nur vier Bilder ins Sichtfeld und
   die Leiste frisst Hoehe, die dem Bild fehlt. Kleinere Kacheln zeigen mehr
   Auswahl auf einen Blick; gescrollt wird weiterhin waagerecht. */
@media (max-width: 600px) {

    .mockup-lightbox-thumbs {
        gap: 6px;
        padding: 8px 8px 10px 8px;
        justify-content: flex-start;
    }

    .lightbox-thumb {
        width: 56px;
        height: 38px;
    }
}

/* Back-to-Top auf schmalen Geraeten.
   Kleiner und dichter an der Kante: mobil ist der Knopf das einzige
   schwebende Element ueber der Cart-Bar und darf so wenig Inhalt wie
   moeglich verdecken. Das Label bleibt hier ohnehin eingeklappt, es
   haengt an (hover: hover). */
@media (max-width: 600px) {

    .back-to-top {
        --btt-size: 42px;
        right: 12px;
        bottom: calc(var(--offer-bar-h, 0px) + 12px);
    }

    .back-to-top .btt-icon {
        font-size: 0.88rem;
    }
}

/* ── Wiederherstellung: gesicherte Inhaltsstaende ──────────────
   Liste im Mission-Control-Tab. Bewusst ruhig gehalten: die Zeile ist eine
   Nachschlage-Liste, kein Werbeelement. Ein selbst gemerkter Stand traegt
   einen Akzentstreifen, damit er zwischen den automatischen auffindbar bleibt. */
.snap-toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.snap-label-input {
    flex: 1 1 240px;
    min-width: 0;
    padding: 9px 12px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--radius-md);
    background: var(--surface, #fff);
    color: var(--text);
    font: inherit;
    font-size: 0.92rem;
}

.snap-label-input:focus {
    outline: none;
    border-color: var(--adm-primary, #DA1884);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--adm-primary, #DA1884) 15%, transparent);
}

.snap-count {
    font-size: 0.82rem;
    opacity: 0.6;
    margin-bottom: 10px;
}

.snap-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.snap-item {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-left: 3px solid transparent;
    border-radius: var(--radius-md);
    padding: 12px 14px;
    transition: box-shadow var(--dur-fast) ease;
}

.snap-item:hover {
    box-shadow: var(--shadow-1);
}

.snap-item--manual {
    border-left-color: var(--adm-primary, #DA1884);
}

.snap-item-icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--adm-primary, #DA1884) 8%, transparent);
    color: var(--adm-primary, #DA1884);
    font-size: 0.9rem;
}

.snap-item-main {
    flex: 1 1 auto;
    min-width: 0;
}

.snap-item-title {
    font-weight: 600;
    font-size: 0.93rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.snap-item-meta {
    font-size: 0.78rem;
    opacity: 0.6;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.snap-item-actions {
    flex-shrink: 0;
    display: flex;
    gap: 6px;
}

.snap-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--radius-md);
    background: var(--surface, #fff);
    color: var(--text);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

.snap-btn:hover {
    background: color-mix(in srgb, var(--adm-primary, #DA1884) 8%, var(--surface, #fff));
    border-color: var(--adm-primary, #DA1884);
}

.snap-btn--ghost {
    padding: 7px 10px;
    opacity: 0.55;
}

.snap-btn--ghost:hover {
    opacity: 1;
    color: var(--danger, #dc2626);
    border-color: var(--danger, #dc2626);
    background: color-mix(in srgb, var(--danger, #dc2626) 8%, var(--surface, #fff));
}

@media (max-width: 600px) {
    .snap-item {
        flex-wrap: wrap;
    }

    .snap-item-main {
        flex-basis: calc(100% - 48px);
    }

    .snap-item-actions {
        margin-left: auto;
    }
}

/* Im Review-Modus tragen auch die Preiszahlen mehr Akzent, damit nicht nur
   der Beitragsart-Schalter den Zustandswechsel zeigt. 50% Akzentanteil bleibt
   in Light und Dark ueber 4,5:1 (CLAUDE.md Pitfall 28). */
#chinagadgets.cg-review-active .tier-price {
    color: color-mix(in srgb, var(--accent) 50%, var(--text));
}

/* ── China-Gadgets Beitragsart: sichtbarer Zwei-Wege-Schalter ── */
.cg-mode-switch {
    width: 100%;
    margin: 18px 0 10px;
}
.cg-mode-switch-title {
    display: block;
    margin: 0 0 7px 2px;
    color: color-mix(in srgb, var(--text) 68%, transparent);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}
.cg-mode-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 6px;
    border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--text) 5%, transparent);
}
.cg-mode-option {
    min-width: 0;
    min-height: 68px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    padding: 11px 15px;
    border: 1px solid transparent;
    border-radius: 11px;
    background: transparent;
    color: color-mix(in srgb, var(--text) 62%, transparent);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease,
        color 0.18s ease, transform 0.18s var(--ease-out);
}
.cg-mode-option:hover {
    background: color-mix(in srgb, var(--text) 7%, transparent);
    color: var(--text);
}
.cg-mode-option:active {
    transform: scale(0.985);
}
.cg-mode-option:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.cg-mode-option.active {
    border-color: color-mix(in srgb, var(--accent) 72%, var(--text));
    background: color-mix(in srgb, var(--accent) 18%, var(--panel-bg, #fff));
    color: var(--text);
}
.cg-mode-option > i {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: color-mix(in srgb, var(--text) 8%, transparent);
    color: color-mix(in srgb, var(--text) 60%, transparent);
    font-size: 0.9rem;
}
.cg-mode-option.active > i {
    background: color-mix(in srgb, var(--accent) 24%, transparent);
    color: color-mix(in srgb, var(--accent) 48%, var(--text));
}
.cg-mode-option-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}
.cg-mode-option-copy strong {
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 0.015em;
}
.cg-mode-option-copy small {
    color: color-mix(in srgb, currentColor 68%, transparent);
    font-size: 0.72rem;
    line-height: 1.25;
}
.cg-mode-summary {
    min-height: 1.4em;
    margin: 7px 4px 0;
    color: color-mix(in srgb, var(--text) 62%, transparent);
    font-size: 0.76rem;
    line-height: 1.4;
    text-align: center;
}

@media (max-width: 600px) {
    .cg-mode-option {
        min-height: 72px;
        gap: 8px;
        padding: 10px;
    }
    .cg-mode-option > i {
        width: 30px;
        height: 30px;
    }
    .cg-mode-option-copy strong {
        font-size: 0.78rem;
    }
    .cg-mode-option-copy small {
        font-size: 0.7rem;
    }
}

/* Weiches Ein-/Ausblenden statt hartem display:block/none (User-Feedback
   16.08.2026: das war das eigentlich gemeinte "sexier", nicht der Chip
   selbst). Grid-Height-Trick statt max-height/padding-Transition (impeccable
   detect flaggt Layout-Eigenschaften als Jank-Risiko, siehe
   mediakit-frontend#Rendering-Performance) - .cg-review-note-inner ist das
   EINE Grid-Item, dessen Zeilenspur von 0fr auf 1fr waechst; overflow:hidden
   auf dem Item setzt dessen automatische Mindesthoehe auf 0 (sonst
   verhindert grid-auto-min-content das Kollabieren unter die Textgroesse).
   Der bisherige margin-top wandert als padding-top INS Item, damit er beim
   Kollaps mitversteckt wird statt als Luecke stehenzubleiben. */
.cg-review-note {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    opacity: 0;
    text-align: center;
    color: color-mix(in srgb, var(--text) 65%, transparent);
    transition: grid-template-rows 0.35s var(--ease-out), opacity 0.3s ease;
}
.cg-review-note.cg-note-visible {
    grid-template-rows: 1fr;
    opacity: 1;
}
.cg-review-note-inner {
    min-height: 0;
    overflow: hidden;
    padding-top: 10px;
    font-size: 0.78rem;
    line-height: 1.4;
}
.cg-review-note p {
    margin: 2px 0;
}
/* In Kits ist der Umschalter vorerst nicht Teil des Angebots. JS prueft
   denselben Scope in _cgReviewAvailable(). */
[data-profile] .cg-mode-switch,
[data-profile] .cg-review-note {
    display: none !important;
}