/* ── LOCAL FONTS ────────────────────────────────────────────────── */ /* font-display:swap — zeigt System-Font sofort + tauscht ein wenn Bebas geladen. Vorher 'block' verursachte bis zu 3s unsichtbare Hero-Headlines auf langsamen Verbindungen (FOIT) → schlechter LCP-Score. Mit Font-Preload im HTML head (siehe alle 10 *.html) ist das Swap meist unmerklich, FOIT war's nicht wert. */ @font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/bebas-neue-400.woff2) format('woff2')} @font-face{font-family:'DM Sans';font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/dm-sans-300.woff2) format('woff2')} @font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/dm-sans-400.woff2) format('woff2')} @font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/dm-sans-500.woff2) format('woff2')} @font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/dm-mono-400.woff2) format('woff2')} @font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/dm-mono-500.woff2) format('woff2')} /* ── RESET & VARS ───────────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} .visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important} /* ── SKIP-LINK (WCAG 2.4.1 — Bypass Blocks) ────────────────────────── Pre-Launch A11y-Fix 2026-05-09 / God Mode Round 5: vorher per JS in main.js (Z. ~6508) injected → bis main.js (398 KB) defer-geparst war, konnte ein bereits in HTML existierendes .vt-skip-link als sichtbarer Text oberhalb der Nav erscheinen (FOUC). Jetzt in style.css am Top — greift sofort beim ersten Render. */ .vt-skip-link{ position:fixed; top:-200px; left:0; z-index:9999; background:#c8a96e; color:#0a0a0a; padding:.7rem 1.2rem; font-family:'DM Sans', sans-serif; font-size:.85rem; font-weight:600; text-decoration:none; border-radius:0 0 6px 0; transition:top .2s cubic-bezier(.2,.8,.2,1); /* Off-screen via clip-path bis :focus — nicht mit display:none, sonst ist der Link auch für Screen-Reader unsichtbar. */ clip:rect(0,0,0,0); clip-path:inset(50%); overflow:hidden; width:1px; height:1px; white-space:nowrap; } .vt-skip-link:focus, .vt-skip-link:focus-visible{ top:0; outline:2px solid #fff; outline-offset:-4px; text-decoration:none; clip:auto; clip-path:none; overflow:visible; width:auto; height:auto; } /* ── PROMO BANNER (top-of-page coupon strip) ───────────────────── */ /* ════════════════════════════════════════════════════════════════════ BANNER-LAYOUT — Sandbox + Promo stapeln ───────────────────────────────────────────────────────────────────── Beide Banner sind position:fixed am oberen Bildschirmrand. Die nav wird per CSS-Variable um die SUMME beider Höhen nach unten geschoben, damit nichts überlappt und alles klickbar bleibt. Reihenfolge (top→bottom): Sandbox (z:260) → Promo (z:250) → Nav. JS pflegt ZWEI Variablen auf : --vt-sandbox-h Höhe der Sandbox-Bar (0px wenn nicht aktiv) --vt-promo-h Höhe des Promo-Banners (0px wenn nicht aktiv) ════════════════════════════════════════════════════════════════════ */ .vt-promo-banner{ position:fixed;top:var(--vt-sandbox-h,0);left:0;right:0;z-index:250; background:#0c0c0c; box-shadow: inset 0 -1px 0 0 rgba(200,169,110,.18); font-family:'DM Sans',system-ui,-apple-system,sans-serif; color:rgba(245,245,240,.78); animation:vtPromoSlide .35s cubic-bezier(.2,.8,.2,1); font-size:13px;letter-spacing:-.005em; transition:top .15s ease; } /* Nav wird um die Summe beider Banner-Höhen nach unten geschoben. Pre-Launch UX-Fix 2026-05-09: -1px Overlap als Belt-and-Suspenders gegen subpixel-rounding zwischen Math.ceil(BCR.height) und render-height. Der Banner hat seinen Bottom-Akzent als inset box-shadow → wird vom Nav-Top überdeckt → keine doppelte Linie sichtbar, kein Lücke möglich. */ nav{top:calc(var(--vt-sandbox-h,0px) + var(--vt-promo-h,0px) - 1px)!important} /* Mobile: Nav bleibt IMMER ganz oben (top:0). Promo-Banner wird UNTER die Nav geschoben. Verhindert dass das Mobile-Dropdown "in der Mitte" des Screens startet. */ @media(max-width:860px){ nav{top:0!important} .vt-promo-banner{top:64px!important;z-index:150!important} .vt-sandbox-bar{top:0!important} .vt-promo-banner ~ nav{top:0!important} body{padding-top:64px!important} } @keyframes vtPromoSlide{from{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}} .vt-promo-inner{ /* Phase A2 UX-Fix 2026-05-08: bündig mit nav (full-width, gleiches Padding-Pattern). Vorher max-width:1280px → ab >1280px Viewport visuell nicht aligned mit der nav. */ max-width:none;margin:0; padding:9px clamp(1.25rem,4vw,4rem); padding-right:calc(clamp(1.25rem,4vw,4rem) + 32px); /* Platz für X-Close-Button */ display:flex;align-items:center;justify-content:center; flex-wrap:wrap;gap:14px; position:relative;line-height:1.45; } .vt-promo-icon{ display:inline-flex;align-items:center;justify-content:center; color:#c8a96e;flex-shrink:0; width:22px;height:22px;border-radius:50%; background:rgba(200,169,110,.08); border:1px solid rgba(200,169,110,.18); } .vt-promo-text{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px;letter-spacing:-.005em} .vt-promo-text strong{color:#fff;font-weight:600} .vt-promo-mid{color:rgba(245,245,240,.65)} .vt-promo-code-wrap{display:inline-flex;align-items:center;gap:5px;padding:0 4px} .vt-promo-code-lbl{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(245,245,240,.38);font-weight:500} .vt-promo-code{ display:inline-block; background:transparent;color:#c8a96e; font-family:'DM Mono',monospace; font-size:12px;font-weight:600; padding:2px 8px;border-radius:4px; letter-spacing:.06em; border:1px dashed rgba(200,169,110,.55); vertical-align:baseline; } .vt-promo-sep{color:rgba(245,245,240,.22);margin:0 2px} .vt-promo-until{color:rgba(245,245,240,.48);font-size:12px} .vt-promo-date{color:rgba(245,245,240,.8);font-weight:500;font-size:12px} .vt-promo-cta{ display:inline-flex;align-items:center;gap:5px; font-family:'DM Sans',sans-serif; font-size:12.5px;font-weight:500;letter-spacing:-.005em; color:#c8a96e;text-decoration:none; border:none;background:transparent; padding:4px 0 4px 6px; white-space:nowrap; transition:color .15s, gap .2s; border-bottom:1px solid transparent; } .vt-promo-cta:hover{color:#d4b87a;border-bottom-color:rgba(212,184,122,.4);gap:8px;text-decoration:none} .vt-promo-cta svg{transition:transform .2s} .vt-promo-cta:hover svg{transform:translateX(2px)} .vt-promo-close{ /* Phase A2 UX-Fix 2026-05-08: right-Position passt jetzt zum nav-Padding (clamp adaptive) */ position:absolute;right:clamp(.6rem,2vw,1rem);top:50%;transform:translateY(-50%); background:transparent;border:none; color:rgba(245,245,240,.35); cursor:pointer;padding:6px;border-radius:4px; display:inline-flex;align-items:center;justify-content:center; transition:color .15s, background .15s; line-height:0; } .vt-promo-close:hover{color:rgba(245,245,240,.8);background:rgba(200,180,140,.06)} @media(max-width:760px){ .vt-promo-inner{font-size:12px;padding:8px 38px 8px 12px;gap:8px;flex-direction:row;text-align:left;justify-content:flex-start} .vt-promo-text{gap:5px} .vt-promo-cta{font-size:11.5px} .vt-promo-close{right:8px} } /* ════════════════════════════════════════════════════════════════════ SANDBOX-TOP-BAR (Stripe-/Vercel-Style „Test Mode"-Banner) Wenn aktiv: ersetzt visuell den Promo-Banner an gleicher Stelle. Stripe & Vercel benutzen dieses Pattern — universell verständlich. ════════════════════════════════════════════════════════════════════ */ .vt-sandbox-bar{ position:fixed;top:0;left:0;right:0;z-index:260; background:linear-gradient(180deg, #2b1d05 0%, #1f1503 100%); border-bottom:1px solid rgba(232,179,0,.45); font-family:'DM Sans',system-ui,-apple-system,sans-serif; color:#f0d27a; animation:vtPromoSlide .35s cubic-bezier(.2,.8,.2,1); font-size:12.5px;letter-spacing:-.005em; } .vt-sandbox-inner{ max-width:1280px;margin:0 auto; padding:8px 16px; display:flex;align-items:center;justify-content:center; gap:14px;flex-wrap:wrap;line-height:1.4; } .vt-sandbox-badge{ display:inline-flex;align-items:center;gap:7px; background:rgba(232,179,0,.12); border:1px solid rgba(232,179,0,.4); color:#fad568; padding:3px 10px;border-radius:5px; font-family:'DM Mono',monospace;font-size:10.5px;font-weight:700; letter-spacing:.13em;text-transform:uppercase; flex-shrink:0; } .vt-sandbox-badge .vt-sandbox-dot{ width:6px;height:6px;border-radius:50%; background:#fad568; box-shadow:0 0 0 3px rgba(250,213,104,.25); animation:vtSandboxPulse 2.4s ease-out infinite; } @keyframes vtSandboxPulse{0%,100%{box-shadow:0 0 0 3px rgba(250,213,104,.25)}50%{box-shadow:0 0 0 5px rgba(250,213,104,.1)}} .vt-sandbox-msg{color:rgba(240,210,122,.92);font-weight:500} .vt-sandbox-msg strong{color:#fad568;font-weight:600} .vt-sandbox-end{ display:inline-flex;align-items:center;gap:5px; background:transparent;border:1px solid rgba(232,179,0,.35); color:#fad568; font-family:'DM Sans',sans-serif; font-size:11.5px;font-weight:500;letter-spacing:-.005em; padding:4px 11px;border-radius:5px;cursor:pointer; transition:background .15s,color .15s,border-color .15s; } .vt-sandbox-end:hover{background:rgba(232,179,0,.12);color:#fff;border-color:rgba(232,179,0,.6)} @media(max-width:760px){ .vt-sandbox-inner{font-size:11.5px;padding:7px 12px;gap:10px} .vt-sandbox-badge{font-size:9.5px;padding:2px 8px} } :root{ /* Render native UI (dropdowns, scrollbars, date pickers) in dark mode to match the dark theme. */ color-scheme: dark; /* ════════════════════════════════════════════════════════════════ LEGACY-FARBEN — bleiben damit existierender Code nicht bricht. Neue Komponenten sollen die SEMANTISCHEN Tokens unten verwenden. ════════════════════════════════════════════════════════════════ */ /* Legacy-Tokens warm-getönt passend zu Gold */ --black:#080807;--dark:#0e0e0c;--card:#161614;--border:#201f1a; --border2:#2a2920;--white:#f5f5f0;--muted:#a09888; --gold:#c8a96e;--gold2:#d4b87a;--glow:rgba(200,169,110,.18); /* ════════════════════════════════════════════════════════════════ STRIPE-STYLE DESIGN-TOKENS (ETAPPE 1) ──────────────────────────────────────────────────────────────── Konsistente Foundation für alle Komponenten. Inspiriert vom Stripe Dashboard Dark Theme: viel Whitespace, dezente Borders, scharfe Typografie, minimalistische Schatten, schnelle Motion. ════════════════════════════════════════════════════════════════ */ /* SURFACES — warm-getönt passend zum Gold-Akzent. Nicht kalt-blau (#0a0a0c), sondern warm-neutral (#0a0a09). Das harmoniert mit dem Gold und wirkt luxuriös. */ --surface-0: #050505; /* Scroll-BG / hinter allem */ --surface-1: #0a0a09; /* Page-BG (Sections) */ --surface-2: #100f0e; /* Container / leichter erhöht */ --surface-3: #171614; /* Card / Panel */ --surface-4: #1d1c19; /* Hover-State auf Cards */ --surface-5: #24231f; /* Active / pressed */ /* TEXT — warm-getönt, harmoniert mit Gold */ --text-1: #f5f5f0; /* Primary headings (warm-weiß) */ --text-2: rgba(245,245,240,.80); /* Body text */ --text-3: rgba(245,245,240,.52); /* Secondary / labels */ --text-4: rgba(245,245,240,.35); /* Muted / placeholders */ --text-5: rgba(245,245,240,.18); /* Disabled / dividers */ /* BORDERS — warm-subtil, passend zum Gesamtton */ --border-subtle: rgba(200,180,140,.06); --border-default: rgba(200,180,140,.10); --border-strong: rgba(200,180,140,.16); --border-focus: var(--gold); /* BRAND — Gold-Akzent in Stufen */ --brand: #c8a96e; --brand-hover: #d4b87a; --brand-soft: rgba(200,169,110,.10); --brand-faint: rgba(200,169,110,.04); --brand-ring: rgba(200,169,110,.22); /* SEMANTIC STATES (warme Palette — kein Regenbogen) */ --success: #c8a96e; --success-soft: rgba(200,169,110,.10); --warning: rgba(200,169,110,.85); --warning-soft: rgba(200,169,110,.08); --danger: #c8907a; --danger-soft: rgba(200,144,122,.10); --info: #c8a96e; --info-soft: rgba(200,169,110,.10); /* SPACING — 4pt-Grid (wie Tailwind/Polaris/Stripe) */ --sp-0: 0; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-14: 56px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; --sp-32: 128px; --sp-40: 160px; --sp-48: 192px; /* TYPE-SCALE — Apple-Style: SF Pro inspiriert, etwas größer als Stripe. Apple nutzt 17px Body, 21px Lead, 28px H3, 40px H2, 56px H1. */ --fs-2xs: 10px; /* meta-labels (rare) */ --fs-xs: 11.5px; /* small chips, captions */ --fs-sm: 13px; /* secondary text */ --fs-base: 14.5px; /* body */ --fs-md: 15.5px; /* emphasized body */ --fs-lg: 17px; /* lead text (Apple body) */ --fs-xl: 21px; /* small headings (H4) */ --fs-2xl: 26px; /* H3 */ --fs-3xl: 34px; /* H2 */ --fs-4xl: 48px; /* H1 medium */ --fs-5xl: 56px; /* Hero headlines mobile */ --fs-6xl: 72px; /* Hero headlines desktop */ --fs-7xl: 96px; /* Display (Bebas Neue) */ /* TYPE-WEIGHTS */ --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; /* LINE-HEIGHTS — kontextual */ --lh-tight: 1.15; /* big display */ --lh-snug: 1.3; /* headings */ --lh-normal: 1.55; /* body */ --lh-relaxed: 1.7; /* long-form reading */ /* LETTER-SPACING — Apple-Style: sehr tight für Headlines (SF Pro Display Eigenschaft) */ --ls-tight: -.03em; /* big display — Apple.com nutzt -.03em */ --ls-snug: -.015em; /* headings */ --ls-normal: -.005em; /* body (subpixel optical) */ --ls-wide: .02em; /* small text */ --ls-wider: .06em; /* eyebrow labels uppercase */ --ls-widest: .12em; /* mono code-style */ /* RADIUS — 4 Stufen statt 7, konsistente Cards */ --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 24px; --r-pill: 999px; /* SHADOWS — Stripe-Style: weich, kein harter Drop */ --shadow-1: 0 1px 2px rgba(0,0,0,.4); --shadow-2: 0 2px 4px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2); --shadow-3: 0 4px 12px rgba(0,0,0,.35), 0 2px 4px rgba(0,0,0,.2); --shadow-4: 0 8px 24px rgba(0,0,0,.45), 0 4px 8px rgba(0,0,0,.25); --shadow-5: 0 16px 48px rgba(0,0,0,.55), 0 8px 16px rgba(0,0,0,.3); --shadow-glow:0 0 0 4px var(--brand-ring); /* MOTION — schnell + natürlich (Stripe nutzt 150-250ms) */ --dur-instant: 80ms; --dur-fast: 150ms; --dur-base: 220ms; --dur-slow: 400ms; --dur-slower: 600ms; /* EASE-CURVES — premium feel (kein "ease" / linear) */ --ease-out: cubic-bezier(.2, .8, .2, 1); /* Standard für UI-Reaktionen */ --ease-in: cubic-bezier(.4, 0, 1, 1); /* Page-Exits */ --ease-in-out: cubic-bezier(.4, 0, .2, 1); /* Two-way Transitions */ --ease-bounce: cubic-bezier(.34, 1.56, .64, 1); /* Subtile Pop-Effekte */ /* Z-INDEX — zentrale Skala damit nichts kollidiert */ --z-base: 1; --z-raised: 10; --z-sticky: 100; --z-nav: 200; --z-banner: 250; --z-overlay: 900; --z-drawer: 1000; --z-modal: 1500; --z-toast: 2000; --z-popover: 3000; } /* ════════════════════════════════════════════════════════════════════ GLOBAL RESETS & MOTION-RESPECT ════════════════════════════════════════════════════════════════════ */ /* Respect User-Setting für reduzierte Animationen (a11y, EU-Pflicht) */ @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* Smooth-Scroll global (außer für reduzierte Motion) */ html{ scroll-behavior: smooth; } /* ════════════════════════════════════════════════════════════════════ REVEAL-ON-SCROLL ANIMATIONS — Stripe-Style staggered fade-in Klassen die in JS via IntersectionObserver getoggelt werden. ════════════════════════════════════════════════════════════════════ */ /* Apple-Style Reveal: subtiler Versatz (12px statt 16px), längere Duration */ [data-reveal]{ opacity: 0; transform: translateY(12px); transition: opacity 500ms cubic-bezier(.32,.72,0,1), transform 500ms cubic-bezier(.32,.72,0,1); will-change: opacity, transform; } [data-reveal].in-view{ opacity: 1; transform: translateY(0); } /* Stagger-Delay-Modifier — auf Children setzen für Cascade-Effect */ [data-reveal-delay="1"]{ transition-delay: 60ms; } [data-reveal-delay="2"]{ transition-delay: 120ms; } [data-reveal-delay="3"]{ transition-delay: 180ms; } [data-reveal-delay="4"]{ transition-delay: 240ms; } [data-reveal-delay="5"]{ transition-delay: 300ms; } [data-reveal-delay="6"]{ transition-delay: 360ms; } /* Variants: Slide-In von links/rechts statt von unten */ [data-reveal="left"]{ transform: translateX(-24px); } [data-reveal="left"].in-view{ transform: translateX(0); } [data-reveal="right"]{ transform: translateX(24px); } [data-reveal="right"].in-view{ transform: translateX(0); } [data-reveal="scale"]{ transform: scale(.96); } [data-reveal="scale"].in-view{ transform: scale(1); } /* ════════════════════════════════════════════════════════════════════ UTILITY-KLASSEN — wiederverwendbar in allen Etappen ════════════════════════════════════════════════════════════════════ */ /* HOVER-LIFT — universeller Lift-Effekt für interactive Cards */ .vt-hover-lift{ transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } .vt-hover-lift:hover{ transform: translateY(-2px); box-shadow: var(--shadow-4); border-color: var(--border-strong); } /* SUBTLE-GLOW — für Premium-CTAs */ .vt-glow-on-hover{ position: relative; transition: all var(--dur-fast) var(--ease-out); } .vt-glow-on-hover:hover{ box-shadow: var(--shadow-glow); } /* SHIMMER — Loading-Skeleton Animation */ @keyframes vtShimmer{ 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .vt-skeleton{ background: linear-gradient(90deg, var(--surface-3) 0%, var(--surface-4) 50%, var(--surface-3) 100%); background-size: 200% 100%; animation: vtShimmer 1.6s linear infinite; border-radius: var(--r-md); } /* PULSE — für Live-Indikatoren / Status-Dots */ @keyframes vtPulseRing{ 0% { box-shadow: 0 0 0 0 currentColor; } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } .vt-pulse{ animation: vtPulseRing 2s var(--ease-out) infinite; } /* FADE-IN-UP — Standalone Animation Klasse (z.B. nach AJAX-Load) */ @keyframes vtFadeInUp{ from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .vt-fade-in-up{ animation: vtFadeInUp var(--dur-base) var(--ease-out) both; } /* SCALE-IN — für Modal/Toast-Entries */ @keyframes vtScaleIn{ from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } } .vt-scale-in{ animation: vtScaleIn var(--dur-base) var(--ease-out) both; } /* STAGGERED-CHILDREN — Cascade-Animation für Listen */ .vt-stagger > * { opacity: 0; animation: vtFadeInUp var(--dur-base) var(--ease-out) forwards; } .vt-stagger > *:nth-child(1){ animation-delay: 0ms; } .vt-stagger > *:nth-child(2){ animation-delay: 60ms; } .vt-stagger > *:nth-child(3){ animation-delay: 120ms; } .vt-stagger > *:nth-child(4){ animation-delay: 180ms; } .vt-stagger > *:nth-child(5){ animation-delay: 240ms; } .vt-stagger > *:nth-child(6){ animation-delay: 300ms; } .vt-stagger > *:nth-child(7){ animation-delay: 360ms; } .vt-stagger > *:nth-child(8){ animation-delay: 420ms; } /* FOCUS-RING — globaler Standard für Tastatur-Navigation (a11y) */ :focus-visible{ outline: 2px solid var(--brand-ring); outline-offset: 2px; border-radius: var(--r-sm); } /* INLINE-SPINNER für Submit-Buttons (statt nur Text-Wechsel) Klasse `.vt-spinner` als 14px-Kreisel; nutzt currentColor. Verwendung: btn.classList.add('vt-loading'); → automatisch wird Inhalt via vtBtnLoading() in JS getauscht. */ .vt-spinner{ display:inline-block; width:14px; height:14px; border:2px solid currentColor; border-top-color:transparent; border-radius:50%; animation:vtSpin .7s linear infinite; vertical-align:-2px; margin-right:6px; } @keyframes vtSpin{ to{ transform: rotate(360deg); } } /* Loading-State für Buttons */ button.vt-loading, .btn.vt-loading, .btn-p.vt-loading, .cart-checkout-btn.vt-loading{ pointer-events:none; opacity:.85; cursor:wait; } /* SECTION-CONTAINER — Stripe-Style: konsistente Section-Padding */ .vt-section{ padding: var(--sp-20) clamp(var(--sp-5), 5vw, var(--sp-16)); position: relative; } .vt-section-narrow{ max-width: 720px; margin: 0 auto; } .vt-section-default{ max-width: 1320px; margin: 0 auto; } .vt-section-wide{ max-width: 1440px; margin: 0 auto; } @media (max-width: 760px){ .vt-section{ padding: var(--sp-14) var(--sp-5); } } /* SECTION-EYEBROW — Premium-Style kleine Label oberhalb von Headings */ .vt-eyebrow{ display: inline-flex; align-items: center; gap: var(--sp-2); font-family: 'DM Mono', monospace; font-size: var(--fs-xs); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--brand); font-weight: var(--fw-medium); margin-bottom: var(--sp-4); } .vt-eyebrow::before{ content: ''; width: 24px; height: 1px; background: currentColor; flex-shrink: 0; opacity: .6; } /* SECTION-HEADLINE — Stripe-Style: groß, kontrastiert, tight letter-spacing */ .vt-headline{ font-family: 'DM Sans', sans-serif; font-size: clamp(var(--fs-3xl), 4vw, var(--fs-4xl)); font-weight: var(--fw-semi); letter-spacing: var(--ls-tight); line-height: var(--lh-snug); color: var(--text-1); margin: 0 0 var(--sp-4); } .vt-headline-display{ font-family: 'Bebas Neue', sans-serif; font-size: clamp(var(--fs-5xl), 8vw, var(--fs-7xl)); font-weight: var(--fw-regular); letter-spacing: var(--ls-snug); line-height: var(--lh-tight); color: var(--text-1); margin: 0 0 var(--sp-5); } .vt-subhead{ font-size: var(--fs-lg); font-weight: var(--fw-regular); line-height: var(--lh-normal); color: var(--text-3); max-width: 64ch; margin: 0 0 var(--sp-8); } /* DIVIDER — Hairline mit Mittel-Akzent (Stripe nutzt Hairlines überall) */ .vt-divider{ height: 1px; background: linear-gradient(90deg, transparent, var(--border-default), transparent); margin: var(--sp-12) 0; border: none; } html{ -webkit-text-size-adjust:100%; overflow-y:scroll; overflow-x:hidden; /* Phase A2 UX-Fix 2026-05-08: garantiert 100% Width — verhindert "schwarzen Rand rechts" wenn child-elements horizontal überlaufen. */ width:100%;max-width:100%;margin:0;padding:0; } body{ background:var(--black);color:var(--white); font-family:'DM Sans',sans-serif;font-weight:400;line-height:1.7; letter-spacing:-.01em; overflow-x:clip;min-height:100vh; /* Phase A2 UX-Fix 2026-05-08: full width + kein margin/padding-right */ width:100%;max-width:100%;margin:0;padding-right:0;padding-left:0; /* prevent subpixel rendering shifts */ -webkit-font-smoothing:antialiased; /* Banner-Stack-Offset: schiebt ALLES (Hero, Sections, etc.) um die Summe beider Banner nach unten, damit nichts überdeckt wird. Fixed-Elemente (Nav) ignorieren das und nutzen ihre eigene calc()-Top. */ padding-top:calc(var(--vt-sandbox-h,0px) + var(--vt-promo-h,0px)); transition:padding-top .15s ease; } body.no-scroll{ overflow:hidden; position:fixed; inset:0; width:100%; overscroll-behavior:none; } /* Selection */ ::selection{background:var(--gold);color:var(--black)} /* Scrollbar: warm-getönt */ ::-webkit-scrollbar{width:5px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:rgba(200,180,140,.1);border-radius:5px} ::-webkit-scrollbar-thumb:hover{background:rgba(200,180,140,.18)} /* Phase A2 UX-Polish 2026-05-08: clean dark — no gold-blob soup. Vorher 3 radial-gradients → wirkten unprofessionell wie "Lichthöfe". Jetzt: ein einzelner extrem subtiler oben-Accent (< 2% opacity) + sanfte langsame Drift-Animation (Aurora-Stil — premium ohne Ablenkung). */ body::before{ content:'';position:fixed;inset:0;z-index:-1;pointer-events:none; background:radial-gradient(ellipse 70% 35% at 50% 0%, rgba(200,169,110,.025) 0%, transparent 70%); animation:vtAuroraDrift 24s ease-in-out infinite; } @keyframes vtAuroraDrift{ 0%, 100%{ transform: translateX(-3%); opacity: 1; } 50% { transform: translateX(3%); opacity: .7; } } @media (prefers-reduced-motion: reduce){ body::before{ animation: none; } } /* ── CUSTOM CURSOR — disabled to keep native OS cursor (prevents click-target mismatch) ── */ .cursor,.cursor-ring{display:none!important} /* ── SCROLL TO TOP ──────────────────────────────────────────────── */ /* Sitzt LINKS UNTEN — Schnell-Kontakt-Bubble sitzt rechts unten. Komplett getrennte horizontale Positionen → kein Überlappen mehr, unabhängig von Bubble-Größe / iPhone-safe-area / Notch / Cookie-Banner. */ #scrollTop{ position:fixed !important; bottom:max(20px, env(safe-area-inset-bottom, 20px)) !important; left:20px !important; right:auto !important; top:auto !important; z-index:400; width:42px;height:42px; background:rgba(22,22,22,.9); border:1px solid rgba(200,169,110,.25); color:var(--gold);font-size:1rem; display:flex;align-items:center;justify-content:center; cursor:pointer;border-radius:50%; opacity:0;pointer-events:none; transition:opacity .25s, transform .15s, background .15s, box-shadow .15s; backdrop-filter:blur(8px); -webkit-tap-highlight-color:transparent; touch-action:manipulation; } #scrollTop.show{opacity:1;pointer-events:all} #scrollTop:hover{background:var(--gold);color:var(--black);transform:translateY(-2px);box-shadow:0 4px 14px rgba(200,169,110,.3)} @media(max-width:600px){ #scrollTop{ bottom:max(16px, env(safe-area-inset-bottom, 16px)) !important; left:16px !important; width:40px;height:40px; } } /* ── CART FAB (floating button right-middle) ──────────────────────── */ #cartFab{ position:fixed;top:50%;right:1.75rem;left:auto;bottom:auto;z-index:400; transform:translateY(-50%); width:54px;height:54px; background:#1a1917; border:1px solid rgba(200,169,110,.45); color:var(--gold); display:flex;align-items:center;justify-content:center; cursor:pointer;border-radius:50%; box-shadow:0 4px 18px rgba(0,0,0,.55), 0 0 0 1px rgba(200,169,110,.08); transition:all .2s ease; padding:0; } #cartFab:hover{background:var(--gold);color:var(--black);transform:translateY(-50%) scale(1.08);box-shadow:0 6px 22px rgba(200,169,110,.45)} #cartFab svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} #cartFabBadge{ position:absolute;top:-4px;right:-4px; background:var(--gold,#c8a96e);color:#0a0a0a; min-width:20px;height:20px;border-radius:10px; display:flex;align-items:center;justify-content:center; font-family:'DM Mono',monospace;font-size:.65rem;font-weight:700; border:2px solid #080808;padding:0 5px;box-sizing:border-box; animation:cartFabPulse .4s ease-out; } #cartFabBadge.hidden{display:none} @keyframes cartFabPulse{0%{transform:scale(.6)}60%{transform:scale(1.2)}100%{transform:scale(1)}} @media(max-width:700px){ #cartFab{right:1rem;width:50px;height:50px} #cartFab svg{width:20px;height:20px} } /* ── NAV ────────────────────────────────────────────────────────── */ nav{ position:fixed;top:0;left:0;right:0;z-index:200; height:64px;min-height:64px;max-height:64px; display:flex;align-items:center;justify-content:space-between; padding:0 clamp(1.25rem,4vw,4rem); background:rgba(8,8,8,.92); backdrop-filter:blur(20px) saturate(1.4); -webkit-backdrop-filter:blur(20px) saturate(1.4); border-bottom:1px solid rgba(200,180,140,.06); overflow:hidden; transition:background var(--dur-fast,.15s) var(--ease-out,ease), box-shadow var(--dur-fast,.15s) var(--ease-out,ease); } nav.scrolled{ background:rgba(8,8,7,.97); box-shadow:0 1px 3px rgba(0,0,0,.3); } /* LOGO */ .nav-logo{text-decoration:none;display:flex;align-items:center;gap:11px;position:relative;flex-shrink:0;height:44px} /* LOGO SVG wrapper */ .logo-svg-wrap{ width:40px;height:36px;flex-shrink:0; display:flex;align-items:center;justify-content:center; position:relative; isolation:isolate; } .logo-svg{width:40px;height:36px;display:block} /* subtle glow ring – stays inside nav due to overflow:hidden */ .logo-svg-wrap::after{ content:''; position:absolute;inset:-4px; border-radius:50%; background:radial-gradient(circle,rgba(200,169,110,.35) 0%,transparent 70%); opacity:0; transition:opacity .25s; pointer-events:none; } .nav-logo:hover .logo-svg-wrap::after{opacity:1} .logo-text{font-family:'Bebas Neue',sans-serif;font-size:1.6rem;letter-spacing:.14em;color:var(--white);line-height:1} .logo-text em{font-style:normal;color:var(--gold)} /* logo-glow removed – was bleeding outside nav */ /* NAV LINKS — Shopify Polaris-Style mit subtilen Pill-Hover */ .nav-links{display:flex;list-style:none;gap:2px;margin:0 auto} .nav-links a{ color:rgba(245,245,240,.6);text-decoration:none; font-family:'DM Sans',sans-serif;font-size:.82rem;font-weight:450; letter-spacing:-.005em; padding:.45rem .9rem;display:block;position:relative; border-radius:var(--r-md,8px); transition:color var(--dur-fast,.15s) var(--ease-out,ease), background var(--dur-fast,.15s) var(--ease-out,ease); } .nav-links a:hover{color:#f5f5f0;background:rgba(200,180,140,.05)} .nav-links a.active{color:#f5f5f0;background:rgba(200,169,110,.08);font-weight:500} /* Subtiler Gold-Dot unter aktivem Link */ .nav-links a.active::after{ content:'';position:absolute;bottom:2px;left:50%;transform:translateX(-50%); width:4px;height:4px;border-radius:50%; background:var(--gold,#c8a96e); box-shadow:0 0 6px rgba(200,169,110,.4); } /* NAV RIGHT */ .nav-right{display:flex;align-items:center;gap:.6rem;flex-shrink:0} /* USER AVATAR + DROPDOWN (public site) */ .nav-user{position:relative;display:flex;align-items:center;gap:.45rem;padding:.25rem;padding-right:.55rem;border-radius:8px;cursor:pointer;transition:background .15s;border:1px solid transparent} .nav-user:hover{background:rgba(200,180,140,.04);border-color:var(--border2)} .nav-user-avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--gold),#a08648);display:flex;align-items:center;justify-content:center;font-family:'DM Sans',sans-serif;font-size:.65rem;font-weight:600;color:var(--black);flex-shrink:0} .nav-user-name{font-size:.78rem;color:var(--white);font-weight:500;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .nav-user-chevron{color:var(--muted);flex-shrink:0;transition:transform .2s} .nav-user.open .nav-user-chevron{transform:rotate(180deg)} .nav-user-menu{position:absolute;top:calc(100% + 6px);right:0;background:var(--card);border:1px solid var(--border2);border-radius:10px;min-width:200px;box-shadow:0 12px 36px rgba(0,0,0,.6);z-index:210;overflow:hidden;display:none} .nav-user-menu.open{display:block;animation:navMenuIn .15s ease} @keyframes navMenuIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}} .nav-user-menu-hd{padding:.7rem 1rem;font-size:.68rem;color:var(--muted);border-bottom:1px solid var(--border)} .nav-user-menu a,.nav-user-menu button{display:block;width:100%;text-align:left;padding:.6rem 1rem;font-size:.8rem;color:var(--white);background:none;border:none;cursor:pointer;font-family:'DM Sans',sans-serif;text-decoration:none;transition:background .12s} .nav-user-menu a:hover,.nav-user-menu button:hover{background:rgba(200,180,140,.04)} .nav-user-menu-sep{height:1px;background:var(--border);margin:.15rem 0} .nav-user-menu .danger{color:var(--danger,#c8907a)} .nav-user-menu .danger:hover{background:rgba(200,144,122,.08)} /* MOBILE HAMBURGER */ .mob-btn{display:none;background:none;border:none;color:var(--white);font-size:1.4rem;cursor:pointer;padding:.4rem;line-height:1;flex-shrink:0} @media(max-width:860px){.nav-user-name{display:none}} /* MOBILE NAV — Dropdown unter der Nav. backdrop-filter auf