/*
Pixlip Konfigurator — Block Styles
Portiert aus hetzner-demo/public/index.html.
Theme-adaptiv: erbt Farben/Fonts vom aktiven Shopify-Theme über CSS-Variablen
mit Fallback-Kette (Pixlip-Prod-Theme-Vars → sinnvolle Defaults).
*/
/* 2026-05-22 v9: Pixlip *Lumen Editorial* Design-System
Premium, modern, subtile Color-Fields — kein Kitsch.
Display: Geist (Vercel, geometric-modern) + Manrope (Body) + JetBrains Mono. */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');
/* Screen-Reader-Only — visuell unsichtbar, semantisch verfügbar */
.pxl-sr-only {
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;
}
.pixlip-configurator {
/* === Pixlip Design-Tokens (Lumen Editorial v9, 2026-05-22) ===
Cool-neutral Surfaces. Aurora-Gradient als atmosphärischer Container-BG
(nicht auf Cards). Pixlip-Blau Primary + Pixlip-Türkis als Lightbox-
Andeutung. Display: Geist, Body: Manrope, Mono: JetBrains.
Theme-Inheritance bewusst entkoppelt — Konfigurator hat eigenen Look.
Siehe DESIGN.md für die verbindlichen Regeln. */
--pxl-ink: #0E1116; /* deepest, headlines */
--pxl-graphite: #1C2128; /* body */
--pxl-slate: #3D4751; /* secondary text */
--pxl-mist: #6B7785; /* tertiary text */
--pxl-fog: #B4BAC2; /* disabled, dim */
--pxl-canvas: #F5F7FA; /* cool-neutral canvas */
--pxl-paper: #FCFDFE; /* card surface */
--pxl-platinum: #E8ECF1; /* tonal block */
--pxl-hairline: #DDE3EB; /* cool hairline */
--pxl-hairline-soft: #ECF0F5; /* softer hairline */
/* Aurora-Color-Fields — sehr dezente Background-Gradients */
--pxl-aurora-cool: linear-gradient(145deg, #EEF3F9 0%, #F5F7FA 50%, #FAF7F2 100%);
--pxl-aurora-warm: linear-gradient(165deg, #F9F5EF 0%, #FCFDFE 60%, #F0F3F8 100%);
--pxl-aurora-deep: linear-gradient(160deg, #0E1116 0%, #1C2737 100%);
/* Primary Accent — Pixlip-Signalblau (PRODUCT.md offiziell #2a64a6).
Reserviert für TOP-CTA und active states. ≤ 5% Surface. */
--pxl-accent: #2a64a6;
--pxl-accent-deep: #1f4d80;
--pxl-accent-soft: #E2EAF4;
--pxl-accent-ink: #FFFFFF;
/* Secondary Accent — Pixlip-Türkis als Lightbox-Andeutung (Hero-Image-Glow,
Eyebrow für AR/3D-Modi). Niemals auf großen Flächen. */
--pxl-accent-2: #00B4B8;
--pxl-accent-2-deep: #007E81;
--pxl-accent-2-soft: #DFF4F4;
/* ── Accent-Tokenisierung (2026-06-19) ───────────────────────────────
Zentrale Akzent-Kanäle für locale-abhängiges Theming. Die DEFAULTS
bilden 1:1 die bisherigen hardcoded DE-Türkis/Blau-Werte ab — die
deutsche Darstellung bleibt damit pixelgleich. NUR im Scope
[data-locale="en"] (US-Store) werden diese Tokens auf Rot/Blau
umgestellt; :root/Default NIEMALS hier verändern. */
--pxl-acc2-rgb: 0, 180, 184; /* = #00B4B8, Haupt-Türkis-Glow (rgba-Kanäle) */
--pxl-acc2b-rgb: 0, 173, 187; /* = #00ADBB, Render-Screen-Türkis-Variante */
--pxl-acc2b: #00ADBB; /* Hex-Pendant zu acc2b-rgb */
--pxl-acc1-rgb: 42, 100, 166; /* = #2a64a6, Pixlip-Blau (rgba-Kanäle) */
--pxl-accent-lite: #3673BC; /* heller Blau-Gradient-Stopp, Primary-CTA (.pxl-btn--primary) */
--pxl-accent-lite2: #3573bd; /* heller Blau-Stopp, Signal-Tiles/Toast (minimal andere Nuance) */
--pxl-accent-deep2: #1f4e85; /* dunkler Blau-Stopp, active-State (.pxl-btn--signal) */
--pxl-accent-hi: #3d7fcb; /* Blau-Hover hell */
--pxl-accent-hi2: #2d6ab1; /* Blau-Hover dunkel */
--pxl-inverse-bg: #0E0F12;
--pxl-inverse-paper: #17191E;
--pxl-inverse-ink: #F6F4EE;
--pxl-inverse-mist: #8B8F97;
--pxl-inverse-hair: #2A2D34;
--pxl-success: #1F8A5A;
--pxl-warn: #C18A1B;
--pxl-error: #B23A2F;
/* Legacy-Token-Aliases (alte Komponenten weiter laufen lassen) */
--pxl-color-fg: var(--pxl-graphite);
--pxl-color-heading: var(--pxl-ink);
--pxl-color-body: var(--pxl-graphite);
--pxl-color-bg: var(--pxl-canvas);
--pxl-color-muted: var(--pxl-slate);
--pxl-color-muted-soft:var(--pxl-mist);
--pxl-color-surface: var(--pxl-paper);
--pxl-color-surface2: var(--pxl-platinum);
--pxl-color-surface3: var(--pxl-hairline-soft);
--pxl-color-surface-dark: var(--pxl-inverse-bg);
--pxl-color-surface-dark-elevated: var(--pxl-inverse-paper);
--pxl-color-border: var(--pxl-hairline);
--pxl-color-border-strong: var(--pxl-graphite);
--pxl-color-accent: var(--pxl-accent);
--pxl-color-accent-h: var(--pxl-accent-deep);
--pxl-color-accent-fg: var(--pxl-accent-ink);
--pxl-color-on-dark: var(--pxl-inverse-ink);
--pxl-color-on-dark-soft: var(--pxl-inverse-mist);
--pxl-color-success: var(--pxl-success);
--pxl-color-error: var(--pxl-error);
--pxl-color-warning: var(--pxl-warn);
--pxl-color-signal: var(--pxl-accent);
--pxl-color-signal-fg: var(--pxl-accent-ink);
--pxl-glass-bg: rgba(14, 15, 18, 0.03);
--pxl-glass-bg-strong: rgba(14, 15, 18, 0.05);
--pxl-glass-border: rgba(14, 15, 18, 0.10);
--pxl-glass-border-strong: rgba(14, 15, 18, 0.18);
--pxl-glass-shadow: none;
--pxl-glass-blur: none;
--pxl-render-frame-w: min(960px, 100%);
/* Typografie — v9: Geist (Vercel-Font, geometric-modern) als Display */
--pxl-font-display: 'Geist', 'Manrope', system-ui, sans-serif;
--pxl-font-body: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
--pxl-font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
/* Border-Radien (dezent abgerundet) */
--pxl-radius: 10px;
--pxl-radius-sm: 6px;
--pxl-radius-lg: 14px;
--pxl-radius-xl: 20px;
--pxl-radius-pill: 9999px;
/* Aliases für DESIGN.md-konforme Tokens */
--pxl-r-sm: 6px;
--pxl-r-md: 10px;
--pxl-r-lg: 14px;
--pxl-r-xl: 20px;
--pxl-r-pill: 9999px;
/* Spacing-System — 8-step */
--pxl-s-1: 4px;
--pxl-s-2: 8px;
--pxl-s-3: 12px;
--pxl-s-4: 16px;
--pxl-s-5: 24px;
--pxl-s-6: 32px;
--pxl-s-7: 48px;
--pxl-s-8: 64px;
--pxl-s-9: 96px;
--pxl-s-10: 128px;
--pxl-container: 1280px;
--pxl-rail: 1080px;
/* Legacy-Spacing-Aliases */
--pxl-space-xxs: var(--pxl-s-1);
--pxl-space-xs: var(--pxl-s-2);
--pxl-space-sm: var(--pxl-s-3);
--pxl-space-md: var(--pxl-s-4);
--pxl-space-lg: var(--pxl-s-5);
--pxl-space-xl: var(--pxl-s-6);
--pxl-space-xxl: var(--pxl-s-7);
--pxl-space-section: var(--pxl-s-9);
/* Motion */
--pxl-dur-fast: 140ms;
--pxl-dur-base: 220ms;
--pxl-dur-slow: 360ms;
--pxl-dur-stage: 600ms;
--pxl-ease: cubic-bezier(0.22, 1, 0.36, 1);
--pxl-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--pxl-ease-in: cubic-bezier(0.7, 0, 0.84, 0);
--pxl-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
/* Schatten */
--pxl-shadow-1: 0 1px 2px rgba(14, 15, 18, 0.04), 0 1px 1px rgba(14, 15, 18, 0.06);
--pxl-shadow-2: 0 2px 8px rgba(14, 15, 18, 0.06), 0 1px 2px rgba(14, 15, 18, 0.04);
--pxl-shadow-3: 0 8px 32px rgba(14, 15, 18, 0.08), 0 2px 8px rgba(14, 15, 18, 0.04);
--pxl-glow-accent: 0 0 0 1px var(--pxl-accent), 0 0 32px -8px rgba(var(--pxl-acc2-rgb), 0.35);
/* Type-Scale (CSS Custom Properties für JS-Zugriff/Theming) */
--pxl-t-eyebrow-size: 11px;
--pxl-t-caption-size: 12px;
--pxl-t-mono-size: 13px;
--pxl-t-body-sm: 14px;
--pxl-t-body: 16px;
--pxl-t-body-lg: 18px;
--pxl-t-h2: 22px;
--pxl-t-h1: 28px;
--pxl-t-display-md: 32px;
--pxl-t-display-lg: 44px;
--pxl-t-display-xl: 64px;
position: relative;
width: 100%;
font-family: var(--pxl-font-body);
color: var(--pxl-color-fg);
background: var(--pxl-color-bg);
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
/* Anchor-Scroll nicht unter Theme-Sticky-Header (Horizon ~5rem) */
scroll-margin-top: 5rem;
}
.pixlip-configurator * { box-sizing: border-box; }
.pixlip-configurator h1,
.pixlip-configurator h2,
.pixlip-configurator h3 { color: var(--pxl-color-heading); letter-spacing: 0.4px; margin: 0; }
/* ═══════════════════════════════════════════════════════════
Skeleton-Loader während JS-Bundle initialisiert
═══════════════════════════════════════════════════════════ */
.pixlip-configurator__skeleton {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 2rem 1.5rem;
}
.pxl-skel {
background: var(--pxl-color-surface2);
border-radius: var(--pxl-radius);
background-image: linear-gradient(100deg,
var(--pxl-color-surface2) 0%,
var(--pxl-color-surface2) 35%,
rgba(0, 0, 0, 0.06) 50%,
var(--pxl-color-surface2) 65%,
var(--pxl-color-surface2) 100%);
background-size: 200% 100%;
animation: pxl-shimmer 1400ms ease-in-out infinite;
}
.pxl-skel--header { height: 3rem; width: 60%; }
.pxl-skel--main { height: 24rem; width: 100%; }
/* Inline-Skel für Insight-Cards: kleines Block-Element in einer Zeile */
.pxl-skel--inline {
display: inline-block;
border-radius: 4px;
vertical-align: middle;
}
.pxl-skel--dot {
display: inline-block;
width: 1.1rem;
height: 1.1rem;
border-radius: 50%;
}
.pixlip-configurator.is-ready .pixlip-configurator__skeleton { display: none; }
@keyframes pxl-shimmer {
0% { background-position: -150% 0; }
100% { background-position: 150% 0; }
}
/* ═══════════════════════════════════════════════════════════
Animations (UX Pro Max tuning, MD motion)
═══════════════════════════════════════════════════════════ */
@keyframes pxl-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.pxl-fade-up { animation: pxl-fade-up 520ms var(--pxl-ease) both; }
@keyframes pxl-fade-in { from { opacity: 0; } to { opacity: 1; } }
.pxl-fade-in { animation: pxl-fade-in 400ms ease-out both; }
@keyframes pxl-pulse-dot {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.4); opacity: 0.55; }
}
.pxl-pulse-dot { animation: pxl-pulse-dot 1600ms ease-in-out infinite; }
@keyframes pxl-spin-ring { to { transform: rotate(360deg); } }
.pxl-spin-ring {
width: 20px; height: 20px; border-radius: 50%;
border: 2px solid var(--pxl-color-border);
border-top-color: var(--pxl-color-fg);
animation: pxl-spin-ring 800ms linear infinite;
}
/* ═══════════════════════════════════════════════════════════
Screens
═══════════════════════════════════════════════════════════ */
.pixlip-configurator [data-screen] { display: none; }
.pixlip-configurator [data-screen].is-active {
display: block;
min-height: 100vh;
min-height: 100dvh;
}
/* Hero hat eigenes 100vh-Layout — nicht doppelt einrücken */
.pixlip-configurator [data-screen="hero"] { min-height: 0; }
/* ─── Fullscreen-Mode: Block überdeckt die Shop-Page UNTERHALB des Theme-Headers
User-Wunsch (2026-05-07): Theme-Header bleibt sichtbar (Navigation erhalten),
App-Block sitzt darunter. Theme-Header-Höhe schwankt zwischen Themes —
--pxl-host-header-h ist überschreibbar, Default ~5rem (Horizon ~66px + 12px Margin).
*/
.pixlip-configurator[data-fullscreen="1"] {
--pxl-host-header-h: 7rem;
position: fixed;
top: var(--pxl-host-header-h);
left: 0;
right: 0;
bottom: 0;
z-index: 2147483640;
overflow-y: auto;
overflow-x: hidden;
/* Sehr ruhiger Hintergrund — kein fg-Mix (Pixlip-Theme erbt fg als
rgba(0,0,0,0.81), das wirkte als bräunlich-dunkler Verlauf an den Kanten).
Nur ein dezenter Signalblau-Hauch oben links, sonst flat-weiß bis surface. */
background:
radial-gradient(ellipse 60% 80% at 15% 0%, color-mix(in srgb, var(--pxl-color-signal, #2a64a6) 6%, transparent) 0%, transparent 70%),
linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
isolation: isolate;
}
body.pxl-configurator-fullscreen {
/* Page-Scroll sperren, damit User nicht hinter den Block scrollt.
Theme-Header bleibt sichtbar, weil er im normalen Flow steht.
Body-Background überschreiben — sonst scheint der Theme-Body (Pixlip:
warmer Beige) zwischen Header-Bottom und Block-Top als brauner Streifen. */
overflow: hidden;
background-color: var(--pxl-color-bg, #ffffff);
}
/* Cookie-Banner / Announcement-Bar während Fullscreen ausblenden — die sind
meist sticky-bottom und überdecken den Configurator-Footer. */
body.pxl-configurator-fullscreen [class*="announcement-bar"]:not(.pxl-*),
body.pxl-configurator-fullscreen #shopify-section-announcement-bar {
visibility: hidden !important;
pointer-events: none !important;
}
/* Zurück-Button: oben LINKS unterhalb des Theme-Headers — bringt den Nutzer zurück,
wo er herkam (Browser-History). Pille mit Pfeil + "Zurück" statt X. */
.pxl-fullscreen-close {
position: fixed;
top: calc(var(--pxl-host-header-h, 7rem) + max(0.75rem, env(safe-area-inset-top)));
left: max(1rem, env(safe-area-inset-left));
z-index: 100000;
height: 2.5rem;
padding: 0 1rem 0 0.8rem;
border-radius: 999px;
border: 0;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: #000;
display: inline-flex;
align-items: center;
gap: 0.4rem;
font: 600 0.85rem var(--pxl-font-body, system-ui, sans-serif);
cursor: pointer;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
transition: transform 200ms var(--pxl-ease), background 200ms var(--pxl-ease);
}
.pxl-fullscreen-close__label { line-height: 1; }
.pxl-fullscreen-close:hover {
background: #fff;
transform: scale(1.06);
}
.pxl-fullscreen-close svg {
width: 1.15rem;
height: 1.15rem;
}
/* Wenn Hero aktiv: Close-Button heller (auf dunklem Video) */
.pixlip-configurator [data-screen="hero"].is-active ~ .pxl-fullscreen-close,
.pixlip-configurator:has([data-screen="hero"].is-active) .pxl-fullscreen-close {
background: rgba(255, 255, 255, 0.20);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.30);
}
/* ═══════════════════════════════════════════════════════════
Hero (Screen 0) — URL-Input
═══════════════════════════════════════════════════════════ */
.pxl-hero {
position: relative;
overflow: hidden;
min-height: 100vh;
min-height: 100dvh; /* mobile safe-area */
background: #0a0a0a;
}
.pxl-hero__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.pxl-hero__overlay {
position: absolute;
inset: 0;
/* Subtiles Vignette — Film bleibt deutlich sichtbar, aber Card-Lesbarkeit gewahrt */
background:
radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,0.25) 100%),
linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.35) 100%);
}
.pxl-hero__content {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
min-height: 100dvh;
padding: 3rem 1.25rem;
}
/* ─── Glassmorphism-Card: Film schimmert durch ─────────────────────── */
.pxl-hero__card {
width: 100%;
max-width: 640px;
padding: 2.5rem 2rem;
border-radius: 24px;
/* Transluzente Schicht: backdrop-filter blurrt Video dahinter */
background: rgba(255, 255, 255, 0.16);
backdrop-filter: blur(26px) saturate(180%);
-webkit-backdrop-filter: blur(26px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.28);
box-shadow:
0 18px 60px -12px rgba(0, 0, 0, 0.45),
0 2px 0 rgba(255, 255, 255, 0.30) inset,
0 -1px 0 rgba(255, 255, 255, 0.10) inset;
}
/* Fallback für Browser ohne backdrop-filter (alte Edge, manche Mobile) */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.pxl-hero__card { background: rgba(20, 20, 24, 0.62); }
}
.pxl-hero__title,
.pixlip-configurator .pxl-hero__title {
font-size: clamp(1.5rem, 4vw, 2.25rem);
font-weight: 900;
text-align: center;
letter-spacing: -0.02em;
line-height: 1.15;
color: #fff !important;
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
margin: 0;
}
.pxl-hero__subtitle,
.pixlip-configurator .pxl-hero__subtitle {
margin-top: 1.25rem;
font-size: 0.95rem;
text-align: center;
line-height: 1.55;
color: rgba(255, 255, 255, 0.88) !important;
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}
/* Hero-Card setzt color-Default für alle Children damit Theme nicht durchschlägt */
.pxl-hero__card {
color: #fff;
}
.pxl-hero__form { margin-top: 2rem; }
.pxl-hero__error {
margin-top: 0.55rem;
font-size: 0.75rem;
text-align: center;
color: #ffd1d1;
min-height: 0.9rem;
text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
/* 2026-05-28: harmonische Vertikale — Button mit kleinem, ruhigem Abstand unter
dem Eingabefeld (nicht geklebt, nicht zu tief). */
.pxl-hero__cta { margin-top: 0.4rem; display: flex; justify-content: center; }
/* Hero-Tagline: ein ruhiger Satz statt Hero-Metric-Trust-Bar (DESIGN.md-Compliance) */
.pxl-hero__tagline {
margin-top: 2.25rem !important;
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.92) !important;
text-align: center;
font-weight: 400;
letter-spacing: 0.01em;
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7), 0 0 24px rgba(0, 0, 0, 0.45);
max-width: 540px;
margin-left: auto;
margin-right: auto;
}
@media (min-width: 640px) {
.pxl-hero__card { padding: 3.5rem 3rem; }
}
/* ═══════════════════════════════════════════════════════════
URL-Input (Pixlip-Stil — borderless underline)
═══════════════════════════════════════════════════════════ */
.pxl-url-input {
width: 100%;
padding: 1.1rem 0;
font-size: 1.4rem;
text-align: center;
font-family: var(--pxl-font-body);
background: transparent;
border: 0;
border-bottom: 2px solid var(--pxl-color-border);
color: var(--pxl-color-fg);
transition: border-color 200ms var(--pxl-ease);
}
.pxl-url-input:focus { border-bottom-color: var(--pxl-color-fg); }
.pxl-url-input:focus-visible { outline: 2px solid var(--pxl-color-fg); outline-offset: 3px; }
.pxl-url-input::placeholder { color: var(--pxl-color-muted); font-size: 0.95rem; }
/* Hero-Card Input — Hero-Card hat dunklen Glassmorphism-BG, daher
helle Schrift + heller Placeholder. (2026-05-27: war vorher auf dunkel
gesetzt mit Annahme "heller Hintergrund" — falsch).
Auf dunklen Themes invertiert sich das automatisch über die CSS-Variable. */
.pxl-hero__card .pxl-url-input {
color: rgba(255, 255, 255, 0.95);
border-bottom-color: rgba(255, 255, 255, 0.35);
caret-color: rgba(255, 255, 255, 0.95);
}
.pxl-hero__card .pxl-url-input::placeholder {
color: rgba(20, 30, 40, 0.45);
font-weight: 400;
}
.pxl-hero__card .pxl-url-input:focus {
border-bottom-color: var(--pxl-color-fg);
}
.pxl-hero__card .pxl-url-input:-webkit-autofill {
-webkit-text-fill-color: var(--pxl-color-fg);
-webkit-box-shadow: 0 0 0 1000px rgba(255,255,255,0.85) inset;
caret-color: var(--pxl-color-fg);
}
/* CTA-Button auf Glass-Hero — bleibt prominent + bekommt subtilen lift */
.pxl-hero__card .pxl-btn {
box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.5);
}
.pxl-hero__card .pxl-btn:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.55);
}
/* ═══════════════════════════════════════════════════════════
Buttons
═══════════════════════════════════════════════════════════ */
.pxl-btn {
display: inline-flex; align-items: center; justify-content: center;
gap: 0.55rem; padding: 0.95rem 1.8rem;
background: var(--pxl-color-accent); color: var(--pxl-color-accent-fg);
font-family: var(--pxl-font-body);
/* 2026-05-13 UX/UI-Polish: 0.65rem war für CTAs unlesbar.
Standard-CTA jetzt 0.82rem (~13px), letter-spacing reduziert. */
font-weight: 700; font-size: 0.82rem; line-height: 1.1;
letter-spacing: 0.04em; text-transform: uppercase;
border: 1px solid var(--pxl-color-accent);
border-radius: 10px;
cursor: pointer;
transition: all 200ms var(--pxl-ease);
}
.pxl-btn:hover:not(:disabled) {
background: var(--pxl-color-accent-h);
border-color: var(--pxl-color-accent-h);
transform: translateY(-1px);
box-shadow: 0 6px 16px -6px rgba(0,0,0,0.22);
}
.pxl-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pxl-btn--lg { padding: 1.05rem 2.2rem; font-size: 0.95rem; letter-spacing: 0.03em; border-radius: 12px; }
.pxl-btn--sm { padding: 0.65rem 1.2rem; font-size: 0.72rem; letter-spacing: 0.06em; }
.pxl-btn--ghost {
background: transparent;
color: var(--pxl-color-fg);
border-color: var(--pxl-color-border);
}
.pxl-btn--ghost:hover:not(:disabled) {
background: var(--pxl-color-fg);
color: var(--pxl-color-accent-fg);
border-color: var(--pxl-color-fg);
}
.pxl-btn__icon { width: 1rem; height: 1rem; }
/* Primary-Variant — von JS dynamisch gesetzt (z.B. AR-Modal-Select-Button).
War vorher nicht im CSS definiert → Buttons mit dieser Klasse waren visuell broken. */
.pxl-btn--primary {
background: var(--pxl-color-accent);
color: var(--pxl-color-accent-fg);
border-color: var(--pxl-color-accent);
}
.pxl-btn--primary:hover:not(:disabled) {
background: var(--pxl-color-accent-h);
border-color: var(--pxl-color-accent-h);
}
/* Outline variant via block setting button_style="outline" */
.pixlip-configurator[data-button-style="outline"] .pxl-btn {
background: transparent;
color: var(--pxl-color-fg);
}
.pixlip-configurator[data-button-style="outline"] .pxl-btn:hover:not(:disabled) {
background: var(--pxl-color-fg);
color: var(--pxl-color-accent-fg);
}
/* ═══════════════════════════════════════════════════════════
Generic Layout — Main (Screens 1+)
═══════════════════════════════════════════════════════════ */
.pxl-main {
max-width: 1200px;
margin: 0 auto;
/* Non-Fullscreen: normaler Document-Flow, Theme-Header sitzt darüber.
Fullscreen: Top-Padding größer für Close-Button-Freiraum. */
padding: 1.5rem 1.25rem 2rem;
}
.pixlip-configurator[data-fullscreen="1"] .pxl-main {
/* Fullscreen-Block startet bereits 5rem unter Theme-Header — Top-Padding kann
schlanker bleiben, nur etwas Platz für Close-Button (oben rechts, top: 6rem). */
padding: 1.5rem 1.25rem 2rem;
}
@media (min-width: 640px) {
.pxl-main { padding: 1.5rem 2rem 2.5rem; }
.pixlip-configurator[data-fullscreen="1"] .pxl-main {
padding: 1.5rem 2rem 2.5rem;
}
}
.pxl-screen-header { text-align: center; margin-bottom: 1.75rem; }
.pxl-screen-header h2 {
font-size: clamp(1.4rem, 3.2vw, 1.85rem);
font-weight: 800;
letter-spacing: -0.02em;
/* Schutz vor Top-Cut-Off bei kleinen Viewports */
padding-top: 0.25rem;
}
.pxl-screen-header p {
margin-top: 0.65rem;
max-width: 640px;
margin-left: auto;
margin-right: auto;
font-size: 0.875rem;
color: var(--pxl-color-muted);
line-height: 1.5;
}
/* Render-Screen: kompakter Header — Quad braucht den Platz, Subtitle weg, h2 klein */
[data-screen="render"] .pxl-screen-header { margin-bottom: 0.6rem; }
[data-screen="render"] .pxl-screen-header h2 { font-size: clamp(1.1rem, 2.4vw, 1.4rem); padding-top: 0; }
[data-screen="render"] .pxl-screen-header p { display: none; }
/* ═══════════════════════════════════════════════════════════
Progress Bar + Phase Pills
═══════════════════════════════════════════════════════════ */
.pxl-progress-track {
background: var(--pxl-color-border);
height: 3px;
border-radius: 9999px;
overflow: hidden;
position: relative;
}
.pxl-progress-fill {
background: var(--pxl-color-fg);
height: 100%;
width: 100%;
transform-origin: left center;
transform: scaleX(0);
transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
.pxl-phase-pill {
display: inline-flex; align-items: center; gap: 0.5rem;
padding: 0.35rem 0.75rem;
font-size: 0.65rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.08em;
background: var(--pxl-color-surface);
color: var(--pxl-color-muted);
border: 1px solid var(--pxl-color-border);
border-radius: 9999px;
transition: all 300ms var(--pxl-ease);
}
.pxl-phase-pill.is-active {
background: var(--pxl-color-fg);
color: var(--pxl-color-accent-fg);
border-color: var(--pxl-color-fg);
}
.pxl-phase-pill.is-done {
background: transparent;
color: var(--pxl-color-fg);
border-color: var(--pxl-color-fg);
}
.pxl-phase-pill.is-done::before { content: "✓"; font-weight: 900; }
/* ═══════════════════════════════════════════════════════════
Toast (Error / Success)
═══════════════════════════════════════════════════════════ */
@keyframes pxl-toast-in {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
.pxl-toast {
position: fixed;
bottom: 1.5rem; left: 50%;
transform: translateX(-50%);
z-index: 1000;
padding: 1rem 1.5rem;
background: var(--pxl-color-bg);
border: 1px solid var(--pxl-color-error);
border-radius: var(--pxl-radius);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
font-size: 0.85rem;
max-width: 90vw;
animation: pxl-toast-in 320ms var(--pxl-ease) both;
}
.pxl-toast.is-success { border-color: var(--pxl-color-success); }
.pxl-toast__title {
font-weight: 700;
margin-bottom: 0.25rem;
}
.pxl-toast.is-hidden { display: none; }
/* ═══════════════════════════════════════════════════════════
Placeholder-Screens (für Screens die noch kommen)
═══════════════════════════════════════════════════════════ */
.pxl-placeholder {
text-align: center;
padding: 3rem 1.5rem;
border: 1px dashed var(--pxl-color-border);
border-radius: var(--pxl-radius);
background: var(--pxl-color-surface);
}
.pxl-placeholder h2 { font-size: 1.25rem; }
.pxl-placeholder p { color: var(--pxl-color-muted); margin-top: 0.75rem; font-size: 0.9rem; }
/* ═══════════════════════════════════════════════════════════
Analysis-Screen (Screen 2) — Brand-Card mit Logo, Name, Farben
═══════════════════════════════════════════════════════════ */
.pxl-brand-card {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
padding: 2.5rem 1.5rem;
border: 1px solid var(--pxl-color-border);
border-radius: var(--pxl-radius);
background: var(--pxl-color-bg);
}
@media (min-width: 720px) {
.pxl-brand-card { grid-template-columns: 220px 1fr; padding: 3rem; gap: 3rem; }
}
.pxl-brand-card__logo {
display: flex;
align-items: center;
justify-content: center;
background: var(--pxl-color-surface);
border-radius: var(--pxl-radius);
min-height: 200px;
padding: 1.5rem;
}
.pxl-brand-card__logo img {
max-width: 100%;
max-height: 160px;
object-fit: contain;
}
.pxl-brand-card__logo--missing {
color: var(--pxl-color-muted);
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.pxl-brand-card__body { display: flex; flex-direction: column; gap: 1.25rem; }
.pxl-brand-card__source {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.35rem 0.75rem;
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
background: var(--pxl-color-fg);
color: var(--pxl-color-accent-fg);
border-radius: 9999px;
align-self: flex-start;
}
.pxl-brand-card__source--miss {
background: transparent;
color: var(--pxl-color-muted);
border: 1px solid var(--pxl-color-border);
}
.pxl-brand-card__name {
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: 900;
letter-spacing: -0.02em;
}
.pxl-brand-card__description {
font-size: 0.95rem;
line-height: 1.55;
color: var(--pxl-color-fg);
max-width: 60ch;
}
.pxl-brand-card__meta {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
font-size: 0.75rem;
color: var(--pxl-color-muted);
}
.pxl-brand-card__meta strong {
display: block;
margin-bottom: 0.25rem;
font-size: 0.6rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--pxl-color-fg);
}
.pxl-color-swatches { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.pxl-color-swatch {
width: 32px;
height: 32px;
border-radius: 50%;
border: 1px solid var(--pxl-color-border);
position: relative;
cursor: default;
}
.pxl-color-swatch::after {
content: attr(data-hex);
position: absolute;
bottom: -1.5rem;
left: 50%;
transform: translateX(-50%);
font-size: 0.65rem;
color: var(--pxl-color-muted);
font-variant-numeric: tabular-nums;
white-space: nowrap;
opacity: 0;
transition: opacity 200ms var(--pxl-ease);
}
.pxl-color-swatch:hover::after { opacity: 1; }
.pxl-analysis__actions {
margin-top: 2.5rem;
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
.pxl-analysis__loading {
text-align: center;
padding: 3rem 1.5rem;
}
.pxl-analysis__loading-bar {
max-width: 320px;
margin: 1.5rem auto 0;
}
/* ═══════════════════════════════════════════════════════════
AR-Button-Overlay auf Tiles + AR-Modal
═══════════════════════════════════════════════════════════ */
/* (Legacy AR-Button auf Tiles entfernt — ganzer Tile öffnet jetzt das Modal) */
.pxl-ar-modal {
position: fixed;
inset: 0;
z-index: 100001; /* über fullscreen-close */
background: rgba(0, 0, 0, 0.88);
display: none;
align-items: center;
justify-content: center;
padding: 1rem;
animation: pxl-fade-in 280ms ease-out;
}
.pxl-ar-modal.is-open { display: flex; }
.pxl-ar-modal__content {
position: relative;
width: 100%;
max-width: 1200px;
height: min(90vh, 900px);
background: var(--pxl-color-bg);
border-radius: 18px;
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}
@media (max-width: 640px) {
.pxl-ar-modal { padding: 0; }
.pxl-ar-modal__content {
width: 100%;
height: 100vh;
height: 100dvh;
max-width: none;
border-radius: 0;
}
}
.pxl-ar-modal__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.25rem;
/* Glassmorphism über der 3D-Szene — DESIGN.md schreibt das hier explizit vor:
"AR-Modal-Header über echtem dynamischen Content (3D-Szene)". */
background: rgba(255, 255, 255, 0.82);
backdrop-filter: blur(14px) saturate(180%);
-webkit-backdrop-filter: blur(14px) saturate(180%);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
position: relative;
z-index: 1;
}
.pxl-ar-modal__title {
font-size: 1rem;
font-weight: 700;
}
.pxl-ar-modal__close {
width: 2.25rem;
height: 2.25rem;
background: var(--pxl-color-surface);
border: 0;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--pxl-color-fg);
transition: background 200ms var(--pxl-ease);
}
.pxl-ar-modal__close:hover { background: var(--pxl-color-fg); color: var(--pxl-color-accent-fg); }
.pxl-ar-modal__close svg { width: 1.25rem; height: 1.25rem; }
.pxl-ar-modal__body {
flex: 1;
display: flex;
align-items: stretch;
min-height: 0;
}
.pxl-ar-modal__viewer {
flex: 1;
background: var(--pxl-color-surface2);
position: relative;
min-height: 0;
}
.pxl-ar-modal__viewer model-viewer {
width: 100%;
height: 100%;
--poster-color: transparent;
background: radial-gradient(ellipse at 30% 25%, #f9f9fa 0%, #d4d6dc 100%);
}
/* QR-Panel: rechts vom 3D-Viewer auf Desktop, oben/Mobile versteckt */
.pxl-ar-modal__qr {
width: 280px;
flex-shrink: 0;
padding: 1.75rem 1.25rem;
border-left: 1px solid var(--pxl-color-border);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
background: var(--pxl-color-surface);
}
.pxl-ar-modal__qr-title {
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--pxl-color-fg);
margin-bottom: 1rem;
}
.pxl-ar-modal__qr-img {
width: 220px;
height: 220px;
display: flex;
align-items: center;
justify-content: center;
background: white;
border-radius: 14px;
padding: 8px;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
margin-bottom: 1rem;
}
.pxl-ar-modal__qr-img img {
width: 100%;
height: 100%;
display: block;
}
.pxl-ar-modal__qr-hint {
font-size: 0.78rem;
color: var(--pxl-color-muted);
line-height: 1.45;
max-width: 220px;
}
@media (max-width: 900px) {
.pxl-ar-modal__qr { display: none; }
}
.pxl-ar-modal__footer-actions {
display: flex;
gap: 0.6rem;
flex-wrap: wrap;
justify-content: flex-end;
}
.pxl-ar-modal__footer-actions .pxl-btn { min-width: 0; }
/* "In AR ansehen"-Button: nur auf Mobile zeigen — auf Desktop nutzt User QR */
.pxl-ar-modal__ar-btn { display: none; }
@media (max-width: 900px) {
.pxl-ar-modal__ar-btn { display: inline-flex; }
}
/* Pending-Modal-Inhalt: wenn GLB noch nicht fertig */
.pxl-ar-modal__pending {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.6rem;
background: linear-gradient(160deg, #f7f7f8 0%, #ececef 100%);
color: var(--pxl-color-fg);
padding: 2rem;
text-align: center;
}
/* (Spinner-Definition siehe Source-of-Truth ~Z.5200 — alte Variante hier entfernt 2026-05-27) */
.pxl-ar-modal__pending .pxl-pending-label {
font-size: 1rem;
color: var(--pxl-color-fg);
margin-top: 0.5rem;
}
.pxl-ar-modal__pending .pxl-pending-sub {
font-size: 0.8rem;
color: var(--pxl-color-muted);
letter-spacing: 0;
text-transform: none;
max-width: 26rem;
line-height: 1.45;
}
/* Dynamische ETA-Zeile — mono, dezent, 30s-Schwellen statt sekündlich.
2026-05-27: Uppercase + Tracking entfernt → ruhiger, weniger Eyebrow-Charakter. */
.pxl-pending-eta {
margin-top: 0.5rem;
font-family: var(--pxl-font-mono, monospace);
font-size: 13px;
letter-spacing: 0;
color: var(--pxl-mist, #6B7785);
font-variant-numeric: tabular-nums;
transition: color 220ms var(--pxl-ease);
}
.pxl-pending-eta.is-overrun {
color: var(--pxl-accent, #2a64a6);
}
/* Long-wait-Hint nach 30s — erscheint sanft eingeblendet als Pill */
.pxl-pending-extra {
display: none;
align-items: center;
gap: 0.5rem;
margin-top: 1.25rem;
padding: 0.55rem 1rem;
background: rgba(245, 158, 11, 0.08);
color: #92400e;
border: 1px solid rgba(245, 158, 11, 0.3);
border-radius: 9999px;
font-size: 0.72rem;
letter-spacing: 0.02em;
max-width: 28rem;
text-align: left;
animation: pxl-fade-up 520ms var(--pxl-ease) both;
}
.pxl-pending-extra.is-visible { display: inline-flex; }
.pxl-pending-extra svg {
width: 1rem; height: 1rem;
flex-shrink: 0;
}
/* ─── Analysis-Screen: Live Insight-Cards ──────────────────────────── */
.pxl-analysis__loading--live {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
padding: 2.5rem 0;
}
.pxl-analysis__phases {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: center;
}
.pxl-pending-spinner--sm {
width: 0.9rem; height: 0.9rem;
border-radius: 50%;
border: 2px solid rgba(0,0,0,0.18);
border-top-color: currentColor;
animation: pxl-spin 800ms linear infinite;
display: inline-block;
flex-shrink: 0;
}
.pxl-pending-spinner--xs {
width: 0.75rem; height: 0.75rem;
border-radius: 50%;
border: 1.5px solid var(--pxl-color-border);
border-top-color: var(--pxl-color-fg);
animation: pxl-spin 800ms linear infinite;
display: inline-block;
}
.pxl-insight-cards {
display: flex;
flex-direction: column;
gap: 0.75rem;
width: 100%;
max-width: 480px;
}
@keyframes pxl-insight-appear {
from { opacity: 0; transform: translateY(10px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.pxl-insight-card {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 1.25rem;
background: var(--pxl-color-bg);
border: 1px solid var(--pxl-color-border);
border-radius: 12px;
opacity: 0;
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.pxl-insight-card[data-appear="1"] { animation: pxl-insight-appear 480ms var(--pxl-ease) 400ms both; }
.pxl-insight-card[data-appear="2"] { animation: pxl-insight-appear 480ms var(--pxl-ease) 1100ms both; }
.pxl-insight-card[data-appear="3"] { animation: pxl-insight-appear 480ms var(--pxl-ease) 1800ms both; }
.pxl-insight-card__icon {
width: 2.5rem; height: 2.5rem;
flex-shrink: 0;
border-radius: 50%;
background: var(--pxl-color-surface);
border: 1px solid var(--pxl-color-border);
display: flex; align-items: center; justify-content: center;
color: var(--pxl-color-fg);
transition: all 320ms var(--pxl-ease);
}
.pxl-insight-card__icon svg { width: 1rem; height: 1rem; }
.pxl-insight-card__content {
flex: 1; display: flex; flex-direction: column; gap: 0.35rem; min-width: 0;
}
.pxl-insight-card__label {
font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.1em; color: var(--pxl-color-muted);
}
.pxl-insight-card__value {
font-size: 0.9rem; font-weight: 600; color: var(--pxl-color-fg);
min-height: 1.2em; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
}
.pxl-insight-card__value img {
max-height: 28px; max-width: 120px; object-fit: contain;
}
.pxl-color-swatches { gap: 0.4rem; }
/* Insight-Card-spezifischer Override (nur kleinere Variante in Insight-Cards,
sonst kollidiert es mit dem 32px-Swatch in Brand-Cards) */
.pxl-insight-card .pxl-color-swatch {
width: 1.1rem; height: 1.1rem; border-radius: 50%;
border: 1px solid var(--pxl-color-border);
display: inline-block;
box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.pxl-insight-card__status {
flex-shrink: 0; display: flex; align-items: center; justify-content: center;
width: 1.5rem; height: 1.5rem;
}
.pxl-insight-card__status--done {
color: var(--pxl-color-success);
font-size: 1rem;
}
.pxl-insight-card__status--done::after { content: "✓"; font-weight: 900; }
.pxl-insight-card.is-done {
border-color: color-mix(in srgb, var(--pxl-color-fg, #111) 25%, transparent);
background: color-mix(in srgb, var(--pxl-color-fg, #111) 3%, transparent);
}
.pxl-insight-card.is-done .pxl-insight-card__icon {
background: color-mix(in srgb, var(--pxl-color-fg, #111) 8%, transparent);
border-color: color-mix(in srgb, var(--pxl-color-fg, #111) 20%, transparent);
color: var(--pxl-color-success);
}
.pxl-analysis__progress-bar { max-width: 320px; width: 100%; }
.pxl-analysis__progress-fill { width: 100%; transform-origin: left center; transform: scaleX(0); transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1); }
.pxl-analysis__status-text {
font-size: 0.78rem; color: var(--pxl-color-muted);
letter-spacing: 0.02em; margin: 0;
}
@media (max-width: 480px) {
.pxl-insight-cards { max-width: 100%; }
.pxl-insight-card { padding: 0.85rem 1rem; gap: 0.75rem; }
}
/* ─── Stand-Vorschau-Reveal in Render-Tiles ─────────────────────────── */
/* Idee: User wählt Stand → Stand-Foto erscheint geblurred → entblurrt langsam */
.pxl-render__tile-bgreveal {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
filter: blur(28px) brightness(0.7);
opacity: 0;
transform: scale(1.15);
transition: filter 14000ms ease-out, opacity 800ms var(--pxl-ease), transform 14000ms ease-out;
z-index: 0;
}
.pxl-render__tile.is-revealing .pxl-render__tile-bgreveal {
opacity: 1;
}
.pxl-render__tile.is-revealed .pxl-render__tile-bgreveal {
filter: blur(2px) brightness(0.85);
transform: scale(1.02);
}
.pxl-ar-modal__hint {
font-size: 0.72rem;
color: var(--pxl-color-muted);
font-weight: 500;
letter-spacing: 0.02em;
}
.pxl-ar-modal__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.9rem 1.25rem;
border-top: 1px solid var(--pxl-color-border);
background: var(--pxl-color-surface);
flex-wrap: wrap;
}
.pxl-ar-modal__footer .pxl-btn {
min-width: 180px;
}
@media (max-width: 480px) {
.pxl-ar-modal__footer { flex-direction: column-reverse; align-items: stretch; }
.pxl-ar-modal__footer .pxl-btn { min-width: 0; width: 100%; }
}
/* AR-Button im model-viewer wird über CSS-Variablen gestylt */
.pxl-ar-modal__viewer model-viewer::part(default-ar-button) {
background: var(--pxl-color-fg);
color: var(--pxl-color-accent-fg);
}
/* ═══════════════════════════════════════════════════════════
Multi-Select-State for Render-Tiles (max 3 Favoriten)
═══════════════════════════════════════════════════════════ */
.pxl-render__tile.is-loaded { cursor: pointer; }
.pxl-render__tile.is-selected {
box-shadow: 0 0 0 3px var(--pxl-color-fg), 0 18px 40px -12px rgba(0, 0, 0, 0.22);
transform: translateY(-2px);
}
.pxl-render__tile.is-selected::before {
content: "";
position: absolute;
top: 12px; left: 12px;
width: 32px; height: 32px;
border-radius: 50%;
background: var(--pxl-color-fg);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
background-size: 56%;
background-position: center;
background-repeat: no-repeat;
z-index: 4;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
animation: pxl-pop 240ms var(--pxl-ease);
}
@keyframes pxl-pop {
from { transform: scale(0); }
to { transform: scale(1); }
}
.pxl-render__select-counter {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.9rem;
font-size: 0.8rem;
font-weight: 500;
background: var(--pxl-color-surface);
border: 1px solid var(--pxl-color-border);
border-radius: var(--pxl-radius);
}
.pxl-render__select-counter strong { font-variant-numeric: tabular-nums; }
.pxl-render__select-counter.is-ready {
background: color-mix(in srgb, var(--pxl-color-fg, #111) 8%, transparent);
border-color: var(--pxl-color-success);
color: var(--pxl-color-fg, #111);
}
/* ═══════════════════════════════════════════════════════════
Contact-Form (Screen 5)
═══════════════════════════════════════════════════════════ */
.pxl-contact-form {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
max-width: 640px;
margin: 0 auto;
}
@media (min-width: 600px) {
.pxl-contact-form { grid-template-columns: 1fr 1fr; gap: 1.25rem 1.5rem; }
.pxl-contact-field--full { grid-column: 1 / -1; }
}
.pxl-contact-field { display: flex; flex-direction: column; gap: 0.4rem; }
.pxl-contact-field__label {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--pxl-color-fg);
}
.pxl-contact-field__label .req { color: var(--pxl-color-error); margin-left: 0.2rem; }
.pxl-contact-field__input,
.pxl-contact-field__textarea {
width: 100%;
padding: 0.85rem 1rem;
font-family: var(--pxl-font-body);
font-size: 0.95rem;
background: var(--pxl-color-bg);
color: var(--pxl-color-fg);
border: 1px solid var(--pxl-color-border);
border-radius: var(--pxl-radius);
transition: border-color 200ms var(--pxl-ease);
}
.pxl-contact-field__textarea { min-height: 7rem; resize: vertical; font-family: var(--pxl-font-body); }
.pxl-contact-field__input:focus,
.pxl-contact-field__textarea:focus {
border-color: var(--pxl-color-fg);
}
.pxl-contact-field__input:focus-visible,
.pxl-contact-field__textarea:focus-visible {
outline: 2px solid var(--pxl-color-fg);
outline-offset: 3px;
}
.pxl-contact-field--invalid .pxl-contact-field__input,
.pxl-contact-field--invalid .pxl-contact-field__textarea {
border-color: var(--pxl-color-error);
}
.pxl-contact-field__error {
font-size: 0.7rem;
color: var(--pxl-color-error);
min-height: 0.85rem;
}
/* ─── Floating-Label-Variant ────────────────────────────────────────
Pattern: input + label (in dieser Reihenfolge, label schwebt absolute).
placeholder=" " (Leerzeichen) macht :placeholder-shown false sobald
tatsächlich content drin ist => Label springt nach oben.
*/
.pxl-contact-field--float { gap: 0.35rem; }
.pxl-contact-field--float .pxl-contact-field__wrap {
position: relative;
display: block;
}
.pxl-contact-field--float .pxl-contact-field__input,
.pxl-contact-field--float .pxl-contact-field__textarea {
padding: 1.4rem 1rem 0.55rem;
/* Geringerer Border-Radius hier nicht nötig — erbt von Base */
}
.pxl-contact-field--float .pxl-contact-field__textarea {
padding-top: 1.6rem;
min-height: 7.5rem;
}
.pxl-contact-field--float .pxl-contact-field__label {
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
margin: 0;
padding: 0 0.2rem;
font-size: 0.9rem;
font-weight: 400;
text-transform: none;
letter-spacing: 0;
color: var(--pxl-color-muted);
background: transparent;
pointer-events: none;
transition:
top 200ms var(--pxl-ease),
transform 200ms var(--pxl-ease),
font-size 200ms var(--pxl-ease),
letter-spacing 200ms var(--pxl-ease),
color 200ms var(--pxl-ease),
text-transform 200ms var(--pxl-ease);
}
.pxl-contact-field--textarea .pxl-contact-field__label {
/* Bei Textarea: Label fix oben links anker (sonst springt es bei Resize) */
top: 1.05rem;
transform: none;
}
/* Schwebezustand: focused ODER gefüllt (nicht placeholder-shown) */
.pxl-contact-field--float .pxl-contact-field__input:focus ~ .pxl-contact-field__label,
.pxl-contact-field--float .pxl-contact-field__input:not(:placeholder-shown) ~ .pxl-contact-field__label,
.pxl-contact-field--float .pxl-contact-field__textarea:focus ~ .pxl-contact-field__label,
.pxl-contact-field--float .pxl-contact-field__textarea:not(:placeholder-shown) ~ .pxl-contact-field__label {
top: 0.45rem;
transform: none;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--pxl-color-fg);
}
.pxl-contact-field--textarea .pxl-contact-field__textarea:focus ~ .pxl-contact-field__label,
.pxl-contact-field--textarea .pxl-contact-field__textarea:not(:placeholder-shown) ~ .pxl-contact-field__label {
top: 0.45rem;
}
/* Subtle Focus-Ring (kein voller Border-Change — der Border bleibt für visuelle Stabilität) */
.pxl-contact-field--float .pxl-contact-field__input:focus,
.pxl-contact-field--float .pxl-contact-field__textarea:focus {
border-color: var(--pxl-color-fg);
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}
/* Error state: roter Ring */
.pxl-contact-field--float.pxl-contact-field--invalid .pxl-contact-field__input,
.pxl-contact-field--float.pxl-contact-field--invalid .pxl-contact-field__textarea {
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}
.pxl-contact-field--float.pxl-contact-field--invalid .pxl-contact-field__input:focus ~ .pxl-contact-field__label,
.pxl-contact-field--float.pxl-contact-field--invalid .pxl-contact-field__input:not(:placeholder-shown) ~ .pxl-contact-field__label,
.pxl-contact-field--float.pxl-contact-field--invalid .pxl-contact-field__textarea:focus ~ .pxl-contact-field__label,
.pxl-contact-field--float.pxl-contact-field--invalid .pxl-contact-field__textarea:not(:placeholder-shown) ~ .pxl-contact-field__label {
color: var(--pxl-color-error);
}
/* required-Sternchen subtiler im Float-Mode */
.pxl-contact-field--float .pxl-contact-field__label .req {
color: var(--pxl-color-error);
margin-left: 0.15rem;
opacity: 0.85;
}
.pxl-contact-consent {
grid-column: 1 / -1;
display: flex;
align-items: flex-start;
gap: 0.75rem;
font-size: 0.85rem;
color: var(--pxl-color-fg);
cursor: pointer;
}
.pxl-contact-consent input[type="checkbox"] {
margin-top: 0.2rem;
width: 1.1rem; height: 1.1rem;
accent-color: var(--pxl-color-fg);
}
.pxl-contact-consent.is-invalid { color: var(--pxl-color-error); }
.pxl-contact-consent a { color: inherit; text-decoration: underline; }
.pxl-contact-summary {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
padding: 1.25rem;
margin-bottom: 2rem;
background: var(--pxl-color-surface);
border-radius: var(--pxl-radius);
}
@media (min-width: 600px) {
.pxl-contact-summary { grid-template-columns: auto 1fr; gap: 1.5rem; }
}
.pxl-contact-summary__label {
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--pxl-color-muted);
}
.pxl-contact-summary__value { font-size: 0.95rem; margin-top: 0.2rem; }
.pxl-contact-summary__designs {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.pxl-contact-summary__design {
width: 48px;
height: 48px;
border-radius: 4px;
overflow: hidden;
background: var(--pxl-color-surface2);
}
.pxl-contact-summary__design img { width: 100%; height: 100%; object-fit: cover; }
/* ═══════════════════════════════════════════════════════════
Success-Screen (Screen 6) — Confetti, SLA-Pill, AR-Reminder
═══════════════════════════════════════════════════════════ */
.pxl-success {
position: relative;
text-align: center;
padding: 3.5rem 1.5rem 2rem;
/* Container für Confetti-Pieces; overflow:hidden damit Pieces nicht
in den Rest der Page rieseln. Pieces sind position:absolute. */
overflow: hidden;
}
/* ─── Konfetti (CSS-only, einmalig 2.4-3.0s) ─────────────────────── */
.pxl-confetti {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
overflow: hidden;
}
.pxl-confetti__piece {
position: absolute;
top: -20px;
width: 9px;
height: 14px;
border-radius: 2px;
/* Default-Vars (werden inline überschrieben) */
--pxl-confetti-rot: 360deg;
--pxl-confetti-drift: 0px;
/* Easing: schnelles Anfallen, sanfter Abgang */
animation: pxl-confetti-fall 2800ms cubic-bezier(0.42, 0, 0.58, 1) forwards;
opacity: 0.92;
}
/* Jedes 3. Piece in Streifen-Form für visuelle Vielfalt */
.pxl-confetti__piece:nth-child(3n) {
width: 6px;
height: 10px;
border-radius: 50%;
}
.pxl-confetti__piece:nth-child(4n) {
width: 11px;
height: 4px;
}
@keyframes pxl-confetti-fall {
0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 1; }
10% { opacity: 1; }
100% {
transform: translate3d(var(--pxl-confetti-drift), 460px, 0) rotate(var(--pxl-confetti-rot));
opacity: 0;
}
}
/* ─── Check-Icon (bleibt, ggü. Confetti im Vordergrund) ──────────── */
.pxl-success__check {
position: relative;
z-index: 2;
width: 80px;
height: 80px;
margin: 0 auto 1.5rem;
border-radius: 50%;
background: var(--pxl-color-success);
display: flex;
align-items: center;
justify-content: center;
animation: pxl-success-pop 600ms var(--pxl-ease) both;
box-shadow: 0 12px 28px -8px color-mix(in srgb, var(--pxl-color-fg, #111) 45%, transparent);
}
.pxl-success__check svg { width: 40px; height: 40px; color: white; }
@keyframes pxl-success-pop {
0% { transform: scale(0); opacity: 0; }
60% { transform: scale(1.1); opacity: 1; }
100% { transform: scale(1); }
}
.pxl-success__title {
position: relative;
z-index: 2;
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: 900;
letter-spacing: -0.02em;
margin-bottom: 1.25rem;
}
/* ─── SLA-Pill: "Wir melden uns innerhalb 24 Stunden" ────────────── */
.pxl-success__sla {
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 0.55rem 1.1rem;
margin-bottom: 1.5rem;
background: color-mix(in srgb, var(--pxl-color-fg, #111) 8%, transparent);
color: var(--pxl-color-fg, #111);
border: 1px solid color-mix(in srgb, var(--pxl-color-fg, #111) 35%, transparent);
border-radius: 9999px;
font-size: 0.85rem;
font-weight: 500;
animation: pxl-fade-up 520ms var(--pxl-ease) 280ms both;
}
.pxl-success__sla svg {
width: 1.05rem;
height: 1.05rem;
flex-shrink: 0;
}
.pxl-success__sla strong { font-weight: 800; }
.pxl-success__message {
position: relative;
z-index: 2;
max-width: 480px;
margin: 0 auto 1rem;
color: var(--pxl-color-muted);
line-height: 1.55;
}
/* ─── Email-Hint ─────────────────────────────────────────────────── */
.pxl-success__email-hint {
position: relative;
z-index: 2;
font-size: 0.8rem;
color: var(--pxl-color-muted);
margin: 0 auto 2rem;
text-align: center;
}
.pxl-success__email-hint strong {
color: var(--pxl-color-fg);
font-weight: 600;
font-size: 0.8rem;
}
/* ─── AR-Reminder-Panel: kleiner QR + "Ihren Stand in AR ansehen" ── */
.pxl-success__ar-panel {
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 1rem;
padding: 0.85rem 1.25rem 0.85rem 0.85rem;
margin: 0 auto 2rem;
background: var(--pxl-color-surface);
border: 1px solid var(--pxl-color-border);
border-radius: 14px;
text-align: left;
max-width: 420px;
animation: pxl-fade-up 520ms var(--pxl-ease) 480ms both;
}
.pxl-success__ar-qr {
width: 80px;
height: 80px;
flex-shrink: 0;
background: white;
border-radius: 8px;
padding: 4px;
display: flex;
align-items: center;
justify-content: center;
}
.pxl-success__ar-qr img {
width: 100%;
height: 100%;
display: block;
}
.pxl-success__ar-text { flex: 1; min-width: 0; }
.pxl-success__ar-title {
font-size: 0.85rem;
font-weight: 700;
color: var(--pxl-color-fg);
margin-bottom: 0.25rem;
}
.pxl-success__ar-sub {
font-size: 0.72rem;
color: var(--pxl-color-muted);
line-height: 1.45;
}
@media (max-width: 480px) {
.pxl-success__ar-panel {
flex-direction: column;
text-align: center;
padding: 1rem;
}
}
/* ─── Refid (Kontrast reduziert — sekundäre Info) ────────────────── */
.pxl-success__refid {
position: relative;
z-index: 2;
display: inline-block;
padding: 0.5rem 1rem;
font-family: 'Menlo', 'Consolas', monospace;
font-size: 0.72rem;
background: var(--pxl-color-surface);
border: 1px solid var(--pxl-color-border);
border-radius: var(--pxl-radius);
margin: 0 auto 1.5rem;
color: var(--pxl-color-muted);
letter-spacing: 0.04em;
}
.pxl-success__actions {
position: relative;
z-index: 2;
margin-top: 1rem;
display: flex;
justify-content: center;
}
/* ═══════════════════════════════════════════════════════════
Render-Screen (Screen 4) — Live-Progress + Moodboard-Grid
═══════════════════════════════════════════════════════════ */
/* User-Wunsch (2026-05-07 PM): Progress + Quad gemeinsam zentriert auf
gleiche Breite — Status-Bar darf nie breiter sein als das Kleeblatt. */
.pxl-render__loading {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin: 0 auto 0.75rem;
max-width: var(--pxl-render-frame-w);
}
@media (min-width: 1100px) { :root, .pixlip-configurator { --pxl-render-frame-w: min(920px, 100%); } }
@media (min-width: 1500px) { :root, .pixlip-configurator { --pxl-render-frame-w: min(1040px, 100%); } }
/* Progress als kompakter horizontaler Top-Stripe — Pills + Counter + Bar in 1 Zeile */
.pxl-render__progress {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 0.35rem 0.85rem;
padding: 0.4rem 0.85rem;
/* Glassmorphism-Hauch in Pixlip-Blau: dezenter Diagonal-Verlauf + getönter Border */
background: linear-gradient(135deg, rgba(var(--pxl-acc1-rgb), 0.04) 0%, rgba(255, 255, 255, 0.94) 100%);
border: 1px solid rgba(var(--pxl-acc1-rgb), 0.14);
border-radius: 10px;
}
.pxl-render__progress-head {
display: flex; align-items: center; gap: 0.8rem;
justify-content: space-between;
grid-column: 1;
}
.pxl-render__progress-label {
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--pxl-color-muted);
}
.pxl-render__progress-meta {
display: inline-flex;
align-items: baseline;
gap: 0.7rem;
}
.pxl-render__progress-eta {
font-size: 0.78rem;
font-weight: 500;
color: var(--pxl-color-muted);
font-variant-numeric: tabular-nums;
transition: opacity 250ms ease;
}
.pxl-render__progress-eta:empty { display: none; }
.pxl-render__progress-percent {
font-size: 0.95rem;
font-weight: 800;
font-variant-numeric: tabular-nums;
}
.pxl-progress-track {
grid-column: 2;
width: 100%;
}
.pxl-render__phase-pills {
grid-column: 1 / -1;
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
padding-top: 0.35rem;
}
.pxl-render__counter {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0;
font-size: 0.72rem;
font-weight: 500;
color: var(--pxl-color-muted);
background: transparent;
border: 0;
grid-column: 3;
}
.pxl-render__counter strong { font-variant-numeric: tabular-nums; color: var(--pxl-color-fg); font-weight: 700; }
.pxl-render__counter.is-complete {
color: var(--pxl-color-fg);
}
/* Mobile: Counter in eigene Zeile + Bar darunter */
@media (max-width: 559px) {
.pxl-render__progress {
grid-template-columns: 1fr auto;
gap: 0.5rem;
}
.pxl-progress-track { grid-column: 1 / -1; order: 4; }
.pxl-render__phase-pills { order: 5; }
}
.pxl-render__ticker {
font-size: 0.85rem;
color: var(--pxl-color-fg);
min-height: 1.4em;
transition: opacity 280ms ease-out, transform 280ms ease-out;
}
.pxl-render__ticker.is-hidden { opacity: 0; transform: translateY(-6px); }
/* Moodboard-Tiles — 1 large + 4 small (Pixlip-Original-Layout) */
/* ─── Render-Tiles: 3 große Vorschauen ─────────────────────────── */
.pxl-render__tiles {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
margin: 0 auto 2rem;
max-width: 1700px;
width: 100%;
}
/* User-Wunsch (2026-05-07 PM): 4er-Grid als 2x2-KLEEBLATT, mittig, groß.
Layout: Quad + Status-Bar gemeinsam in einem zentrierten Container,
damit Status-Bar nie breiter als das Kleeblatt ist. */
.pxl-render__loading-frame {
max-width: var(--pxl-render-frame-w);
margin: 0 auto;
}
.pxl-render__tiles--quad {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 0.6rem;
min-height: 0;
margin: 0 auto;
/* QUADRATISCH + gleiche Frame-Breite wie Progress-Container + Footer-Bar.
width=height=min(verfügbare Höhe, verfügbare Breite, Frame-Width). */
width: min(calc(100dvh - 470px), calc(100dvw - 80px), var(--pxl-render-frame-w));
height: min(calc(100dvh - 470px), calc(100dvw - 80px), var(--pxl-render-frame-w));
aspect-ratio: 1 / 1;
min-height: 280px;
min-width: 280px;
}
@media (min-width: 1100px) { .pxl-render__tiles--quad { gap: 0.85rem; } }
@media (max-width: 720px) {
.pxl-render__tiles--quad {
width: min(calc(100dvh - 360px), calc(100dvw - 32px));
height: min(calc(100dvh - 360px), calc(100dvw - 32px));
min-height: 240px;
min-width: 240px;
gap: 0.4rem;
}
}
/* Tile darf Container-Höhe nicht sprengen */
.pxl-render__tile {
aspect-ratio: auto !important;
min-height: 0 !important;
height: 100% !important;
}
/* Hero-Bild MUSS einpassen (cover) — sonst überläuft. Plus subtle border. */
.pxl-render__tile--hero img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
/* User-Wunsch (2026-05-07 PM): initial STARK blurred + Pulsieren —
"wird gerade mit Marke gebrandet". Sobald img2img fertig: scharfe
Crossfade-Animation auf den finalen Output. */
filter: blur(28px) saturate(0.7) brightness(0.9);
transform: scale(1.12);
transition: filter 1.6s var(--pxl-ease), transform 1.6s var(--pxl-ease);
animation: pxl-hero-pulse 2.4s ease-in-out infinite;
}
.pxl-render__tile-wrap--hero.is-branded .pxl-render__tile--hero img {
filter: blur(0) saturate(1);
transform: scale(1);
animation: none;
}
@keyframes pxl-hero-pulse {
0%, 100% { opacity: 0.78; }
50% { opacity: 1; }
}
/* Branding-In-Progress Overlay — sichtbar solange noch nicht is-branded */
.pxl-render__tile-wrap--hero::after {
content: "Mit Ihrer Marke wird gerendert …";
position: absolute;
inset: auto 0 0 0;
padding: 0.65rem 0.85rem;
background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0) 100%);
color: #fff;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
text-align: center;
pointer-events: none;
z-index: 4;
opacity: 1;
transition: opacity 0.6s ease-out;
}
.pxl-render__tile-wrap--hero.is-branded::after {
opacity: 0;
}
/* 3er-Grid (Legacy, falls .pxl-render__tiles ohne --quad genutzt wird) */
@media (min-width: 720px) {
.pxl-render__tiles:not(.pxl-render__tiles--quad):not(.pxl-render__tiles--refine-single) {
grid-template-columns: repeat(3, 1fr);
gap: 0.85rem;
}
}
/* Refine-Single: nur 1 große Tile zentriert — User-Wunsch 2026-05-07 */
.pxl-render__tiles--refine-single {
display: grid;
grid-template-columns: 1fr;
justify-items: center;
margin: 0 auto;
width: min(calc(100dvh - 470px), calc(100dvw - 80px), 560px);
max-width: 100%;
}
.pxl-render__tiles--refine-single .pxl-render__tile-wrap {
width: 100%;
aspect-ratio: 1 / 1;
}
.pxl-render__tiles--refine-single .pxl-render__tile {
aspect-ratio: 1 / 1 !important;
height: auto !important;
}
/* Tile-Sizing: quadratisch, kein min-height (passt sich Viewport an) */
.pxl-render__tile {
aspect-ratio: 1 / 1;
min-height: 0;
min-width: 0;
}
.pxl-render__tiles--quad .pxl-render__tile {
aspect-ratio: 1 / 1;
}
/* Container: kein erzwungenes min-height — flex-basierte Höhe vom Aspect-Ratio */
.pxl-render__tiles { min-height: 0; }
/* Hero-Tile (echtes Pixlip-Stand-Bild): dezent abgesetzt mit Theme-Border.
Wrap ist Flex-Column wie .pxl-render__tile-wrap, plus unsichtbarer Spacer
in Pick-Button-Höhe — damit alle vier Quad-Tiles visuell gleich hoch sind.
min-height:0 ist Pflicht im CSS-Grid, sonst sprengt der Content-Min-Size
die 1fr/1fr-Verteilung der Grid-Rows. */
.pxl-render__tile-wrap--hero {
display: flex;
flex-direction: column;
gap: 0.65rem;
position: relative;
min-height: 0;
min-width: 0;
}
.pxl-render__tile-wrap--hero::before {
content: "";
display: block;
/* matcht .pxl-render__tile-pick: padding 0.55rem*2 + 0.7rem font + 1px border */
height: calc(0.55rem * 2 + 0.85rem + 2px);
flex-shrink: 0;
visibility: hidden;
pointer-events: none;
order: 2;
}
.pxl-render__tile-wrap--hero .pxl-render__tile { order: 1; flex: 1 1 0; min-height: 0; }
.pxl-render__tile--hero {
border: 2px solid var(--pxl-color-fg, #111);
background: var(--pxl-color-surface);
}
.pxl-render__tile-hero-label {
position: absolute;
top: 8px;
left: 8px;
background: var(--pxl-color-fg, #111);
color: var(--pxl-color-fg-inv, #fff);
padding: 4px 10px;
font-size: 0.65rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
border-radius: 4px;
z-index: 5;
pointer-events: none;
}
/* (Override entfernt — überschrieb sonst das blur(28px) aus dem Default-State.
Default = Pre-Branded geblurrt + pulsierend, .is-branded entfernt das.) */
/* Stand-Karten Image-Fallback: großer Stand-Code statt "Kein Bild" */
.pxl-stand-card__image-placeholder {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
background: linear-gradient(135deg, var(--pxl-color-surface, #f7f7f8) 0%, var(--pxl-color-surface2, #ececef) 100%);
color: var(--pxl-color-border, #888);
font-size: clamp(1.1rem, 3vw, 1.6rem);
font-weight: 900;
letter-spacing: 0.06em;
text-transform: uppercase;
user-select: none;
}
.pxl-render__tile {
position: relative;
overflow: hidden;
background: linear-gradient(160deg, var(--pxl-color-surface, #f7f7f8) 0%, var(--pxl-color-surface2, #ececef) 100%);
border-radius: 12px;
border: 1px solid rgba(15, 23, 42, 0.08);
cursor: pointer;
isolation: isolate;
transition: transform 280ms var(--pxl-ease), box-shadow 280ms var(--pxl-ease), border-color 280ms var(--pxl-ease);
box-shadow: 0 2px 8px -3px rgba(15, 23, 42, 0.08);
}
.pxl-render__tile:hover {
border-color: rgba(15, 23, 42, 0.18);
box-shadow: 0 8px 22px -8px rgba(15, 23, 42, 0.18);
}
/* Alle 3 Tiles gleich groß (1:1) — User hatte Hero-Tile-Layout für 5 Tiles, bei 3 ist symmetrisch besser */
.pxl-render__tile.is-loaded {
animation: pxl-tile-reveal 480ms var(--pxl-ease) both;
}
.pxl-render__tile.is-loaded:hover {
transform: translateY(-4px);
box-shadow: 0 14px 38px -10px rgba(15, 23, 42, 0.18);
}
@keyframes pxl-tile-reveal {
from { opacity: 0; transform: scale(0.96) translateY(8px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
/* Image-Fallback (zeigt AI-Bild bis GLB geladen) */
.pxl-render__tile img,
.pxl-render__tile model-viewer {
width: 100%;
height: 100%;
display: block;
}
.pxl-render__tile img {
object-fit: cover;
transition: opacity 400ms var(--pxl-ease), transform 6s ease-out;
}
.pxl-render__tile.is-loaded:hover img { transform: scale(1.04); }
/* model-viewer im Tile: dunkler Hintergrund, kein Cursor-Hijack */
.pxl-render__tile model-viewer {
--poster-color: transparent;
background: linear-gradient(160deg, #f7f7f8 0%, #ececef 100%);
pointer-events: none; /* Tile-Click bleibt Selection */
}
.pxl-render__tile.has-3d model-viewer {
background: radial-gradient(circle at 30% 30%, #fafafa 0%, #d8d9de 100%);
}
.pxl-render__tile.has-3d img {
opacity: 0; /* AI-Bild ausblenden wenn 3D ready */
position: absolute;
inset: 0;
}
/* Skeleton (während Loading) — dezenter Shimmer-Background */
.pxl-render__tile-skeleton {
position: absolute;
inset: 0;
background: linear-gradient(135deg, #1a1d24 0%, #2a2e38 100%);
background-image:
linear-gradient(100deg,
transparent 0%,
transparent 40%,
rgba(255, 255, 255, 0.05) 50%,
transparent 60%,
transparent 100%),
linear-gradient(135deg, #1a1d24 0%, #2a2e38 100%);
background-size: 200% 100%, 100% 100%;
animation: pxl-shimmer 1800ms ease-in-out infinite;
}
/* Pending-Overlay: Spinner + "Design X · 3D wird gerendert" */
.pxl-render__tile-pending {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.5rem;
z-index: 2;
color: rgba(255, 255, 255, 0.85);
text-align: center;
pointer-events: none;
}
/* (Spinner-Definition siehe Source-of-Truth ~Z.5200 — alte Variante hier entfernt 2026-05-27) */
.pxl-pending-label {
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.pxl-pending-sub {
font-size: 0.66rem;
color: rgba(255, 255, 255, 0.55);
letter-spacing: 0.04em;
}
@keyframes pxl-spin {
to { transform: rotate(360deg); }
}
/* Label unten (gradient-overlay) */
.pxl-render__tile-label {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: 1.1rem 1rem 0.85rem;
background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0) 100%);
color: white;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
pointer-events: none;
z-index: 2;
}
/* "Diesen wählen"-Button — als BLOCK unter dem Tile (nicht mehr als Overlay) */
/* Wrapper damit Tile + Button als Einheit funktionieren.
min-height:0 + tile flex:1 — sonst sprengen Tile+Button die Grid-Row-Höhe. */
.pxl-render__tile-wrap {
display: flex;
flex-direction: column;
gap: 0.65rem;
min-height: 0;
min-width: 0;
}
.pxl-render__tile-wrap > .pxl-render__tile { flex: 1 1 0; min-height: 0; }
/* Pick-Buttons: Apple-Style minimal. Ein einziger feiner Border, weiß-transparent,
ohne Glas-Blur, ohne mehrere Shadow-Layer. Hover = nur Border + Text in Signal. */
.pxl-render__tile-pick {
display: block;
width: 100%;
padding: 0.65rem 0.95rem;
min-height: 0;
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(15, 23, 42, 0.12);
color: var(--pxl-color-fg, #111);
font-family: var(--pxl-font-body);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: none;
border-radius: 9px;
cursor: pointer;
transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
box-shadow: none;
}
.pxl-render__tile-pick:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.95);
border-color: var(--pxl-color-signal, #2a64a6);
color: var(--pxl-color-signal, #2a64a6);
transform: none;
box-shadow: none;
}
.pxl-render__tile-pick:disabled {
cursor: not-allowed;
opacity: 0.4;
background: transparent;
color: var(--pxl-color-muted);
border-color: var(--pxl-color-border);
backdrop-filter: none;
-webkit-backdrop-filter: none;
box-shadow: none;
}
/* Selected-State: simpler 2-Stop Signal-Gradient, ein sanfter Schatten. */
.pxl-render__tile.is-selected + .pxl-render__tile-pick,
.pxl-render__tile-wrap.is-selected .pxl-render__tile-pick {
background: linear-gradient(180deg, var(--pxl-accent-lite2) 0%, var(--pxl-color-signal, #2a64a6) 100%);
color: var(--pxl-color-signal-fg, #fff);
border-color: transparent;
font-weight: 700;
text-shadow: none;
box-shadow: 0 1px 2px rgba(15,30,55,0.10);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.pxl-render__tile-wrap.is-selected .pxl-render__tile {
outline: 2px solid var(--pxl-color-signal, #2a64a6);
outline-offset: 0;
}
.pxl-render__tile-wrap.is-selected .pxl-render__tile-pick::before { content: "✓ "; font-weight: 900; }
/* "3D"-Badge oben rechts (Indikator dass Modell live ist) */
.pxl-render__tile-3d-badge {
position: absolute;
top: 0.7rem;
right: 0.7rem;
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.32rem 0.58rem;
background: rgba(15, 23, 42, 0.78);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: white;
border-radius: 999px;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
z-index: 3;
opacity: 0;
transform: translateY(-4px);
transition: opacity 320ms var(--pxl-ease), transform 320ms var(--pxl-ease);
pointer-events: none;
}
.pxl-render__tile-3d-badge svg {
width: 0.9rem;
height: 0.9rem;
}
.pxl-render__tile.has-3d .pxl-render__tile-3d-badge {
opacity: 1;
transform: translateY(0);
}
.pxl-render__tile-3d-badge--pending {
background: rgba(15, 23, 42, 0.42);
}
.pxl-render__tile-3d-badge--pending::after {
content: '';
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
background: #fbbf24;
animation: pxl-pulse 1500ms ease-in-out infinite;
}
@keyframes pxl-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.7); }
}
.pxl-render__error {
padding: 2rem 1.5rem;
text-align: center;
color: var(--pxl-color-error);
border: 1px solid var(--pxl-color-error);
border-radius: var(--pxl-radius);
background: rgba(239, 68, 68, 0.05);
}
/* ═══════════════════════════════════════════════════════════
Selection-Screen (Screen 3) — Stand-Galerie mit S/M/L-Filter
═══════════════════════════════════════════════════════════ */
.pxl-selection__filters {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: center;
margin-bottom: 2.5rem;
}
.pxl-cat-filter {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.65rem 1.25rem;
background: transparent;
color: var(--pxl-color-fg);
border: 1px solid var(--pxl-color-border);
border-radius: 9999px;
cursor: pointer;
font-family: var(--pxl-font-body);
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
transition: all 200ms var(--pxl-ease);
}
.pxl-cat-filter:hover { border-color: var(--pxl-color-fg); }
.pxl-cat-filter.is-active {
background: var(--pxl-color-fg);
color: var(--pxl-color-accent-fg);
border-color: var(--pxl-color-fg);
}
.pxl-cat-filter__count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.5rem;
padding: 0 0.4rem;
height: 1.25rem;
background: var(--pxl-color-surface);
color: var(--pxl-color-fg);
border-radius: 9999px;
font-size: 0.65rem;
font-variant-numeric: tabular-nums;
}
.pxl-cat-filter.is-active .pxl-cat-filter__count {
background: rgba(255, 255, 255, 0.2);
color: var(--pxl-color-accent-fg);
}
/* Selection-Screen leicht-grauer Verlauf — Cards heben sich heller ab */
.pixlip-configurator[data-fullscreen="1"] [data-screen="selection"] {
background: linear-gradient(180deg, #e8e8ea 0%, #f0f0f2 60%, #f6f6f8 100%);
}
.pxl-stands-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
padding-bottom: 7rem; /* Platz für Sticky-Footer */
}
@media (min-width: 600px) {
.pxl-stands-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}
@media (min-width: 960px) {
.pxl-stands-grid { grid-template-columns: repeat(3, 1fr); }
}
.pxl-stand-card {
background: linear-gradient(160deg, var(--pxl-color-bg) 0%, color-mix(in srgb, var(--pxl-glass-bg) 50%, var(--pxl-color-bg)) 100%);
border: 1px solid var(--pxl-glass-border);
border-radius: 16px;
overflow: hidden;
cursor: pointer;
transition: all 280ms var(--pxl-ease);
position: relative;
display: flex;
flex-direction: column;
box-shadow: var(--pxl-glass-shadow);
}
.pxl-stand-card:hover {
border-color: rgba(15, 23, 42, 0.2);
transform: none;
box-shadow: 0 2px 6px rgba(15, 30, 55, 0.06);
}
.pxl-stand-card.is-selected {
border: 2px solid var(--pxl-color-signal);
box-shadow: none;
}
.pxl-stand-card.is-selected::after {
content: "";
position: absolute;
top: 12px; right: 12px;
width: 28px; height: 28px;
border-radius: 50%;
background: var(--pxl-color-signal);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
background-size: 60%;
background-position: center;
background-repeat: no-repeat;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.pxl-stand-card__image {
aspect-ratio: 4 / 3;
background: var(--pxl-color-surface2);
overflow: hidden;
}
.pxl-stand-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 500ms var(--pxl-ease);
}
.pxl-stand-card:hover .pxl-stand-card__image img { transform: scale(1.04); }
.pxl-stand-card__body {
padding: 1rem 1.1rem 1.25rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
flex: 1 1 auto;
}
.pxl-stand-card__price {
margin-top: auto;
}
.pxl-stand-card__cat {
display: inline-block;
align-self: flex-start;
padding: 0.15rem 0.5rem;
background: var(--pxl-color-fg);
color: var(--pxl-color-accent-fg);
border-radius: 2px;
font-size: 0.6rem;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.pxl-stand-card__name {
font-size: 1.1rem;
font-weight: 700;
}
.pxl-stand-card__meta {
font-size: 0.75rem;
color: var(--pxl-color-muted);
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1rem;
}
.pxl-stand-card__price {
font-size: 1rem;
font-weight: 700;
margin-top: 0.35rem;
color: var(--pxl-color-signal);
}
.pxl-selection__footer {
position: sticky;
bottom: 0;
left: 0;
right: 0;
margin: 0 -1.5rem -2.5rem; /* nach unten + links/rechts aus pxl-main rausspannen */
padding: 1rem 1.5rem;
background: var(--pxl-color-bg);
border-top: 1px solid var(--pxl-color-border);
box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.04);
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
z-index: 5;
}
@media (min-width: 640px) {
.pxl-selection__footer { margin: 0 -2rem -3.5rem; padding: 1.25rem 2rem; }
}
.pxl-selection__footer-info {
font-size: 0.85rem;
color: var(--pxl-color-muted);
}
.pxl-selection__footer-info strong { color: var(--pxl-color-fg); }
.pxl-selection__empty {
text-align: center;
padding: 4rem 1.5rem;
color: var(--pxl-color-muted);
}
/* ═══════════════════════════════════════════════════════════
Brand-Customize-Screen (Track C)
Logo-Picker, Color-Picker, Pitch-Textarea, Style-Preset-Pills.
Wiederverwendet --pxl-color-fg/--pxl-radius/--pxl-ease etc.
═══════════════════════════════════════════════════════════ */
/* User-Wunsch (2026-05-07 PM): Brand-Customize-Sections in Cards mit subtle
Verlauf — sieht weniger "technisch" aus, mehr Flächigkeit, leichter Glas-Look. */
.pxl-brand-customize {
display: flex;
flex-direction: column;
gap: 0.75rem;
max-width: 880px;
margin: 0 auto;
}
.pxl-bc-section {
display: flex;
flex-direction: column;
gap: 0.85rem;
padding: 1rem 1.2rem;
/* Echtes Glassmorphism in Pixlip-Signalblau — der Fullscreen-Container hat
einen Radial-Gradient-Hintergrund, das macht den Backdrop-Blur sichtbar
und DESIGN.md-konform ("Glassmorphism braucht Bewegung/Material dahinter"). */
background: var(--pxl-glass-bg);
backdrop-filter: var(--pxl-glass-blur);
-webkit-backdrop-filter: var(--pxl-glass-blur);
border: 1px solid var(--pxl-glass-border-strong);
box-shadow: var(--pxl-glass-shadow);
border-radius: 16px;
position: relative;
overflow: hidden;
transition: background 200ms var(--pxl-ease), border-color 200ms var(--pxl-ease);
}
.pxl-bc-section:hover {
background: var(--pxl-glass-bg-strong);
border-color: var(--pxl-glass-border-strong);
}
/* Akzent-Strich links (Pixlip-Blau) — gibt jedem Block eine subtle Identity */
/* Akzent-Strich entfernt (2026-05-13) — Glassmorphism-Tönung übernimmt
die Identity-Funktion, der Strich wirkte redundant. */
.pxl-bc-section__head {
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.pxl-bc-section__label {
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0.01em;
color: var(--pxl-color-fg);
display: flex;
align-items: center;
gap: 0.5rem;
}
.pxl-bc-section__count {
font-size: 0.8rem;
font-weight: 400;
color: var(--pxl-color-muted);
letter-spacing: normal;
}
.pxl-bc-section__hint {
font-size: 0.8rem;
color: var(--pxl-color-muted);
line-height: 1.4;
}
.pxl-bc-section__empty {
padding: 1.25rem 1.5rem;
background: var(--pxl-color-surface);
border: 1px dashed var(--pxl-color-border);
border-radius: var(--pxl-radius);
font-size: 0.85rem;
color: var(--pxl-color-muted);
line-height: 1.5;
}
.pxl-bc-section--empty .pxl-bc-section__label {
color: var(--pxl-color-muted);
}
/* ── Logo-Picker ───────────────────────────────────────────
Mobile: scroll-snap-x carousel — User scrollt horizontal.
Desktop (>=640px): wrap, normaler Flex-Layout.
───────────────────────────────────────────────────────── */
.pxl-logo-picker {
display: flex;
gap: 0.875rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding: 1rem;
padding: 0.25rem 0.25rem 0.5rem;
margin: 0 -0.25rem;
-webkit-overflow-scrolling: touch;
}
@media (min-width: 640px) {
.pxl-logo-picker {
flex-wrap: wrap;
overflow-x: visible;
scroll-snap-type: none;
}
}
.pxl-logo-pick {
flex: 0 0 auto;
scroll-snap-align: start;
display: flex;
flex-direction: column;
gap: 0.5rem;
width: 140px;
padding: 0.5rem;
background: var(--pxl-color-bg);
border: 1.5px solid var(--pxl-color-border);
border-radius: var(--pxl-radius);
cursor: pointer;
text-align: left;
font-family: inherit;
color: inherit;
transition: border-color 200ms var(--pxl-ease), transform 200ms var(--pxl-ease), box-shadow 200ms var(--pxl-ease);
}
.pxl-logo-pick:hover {
border-color: var(--pxl-color-fg);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}
.pxl-logo-pick.is-selected {
border-color: var(--pxl-color-accent);
box-shadow: 0 0 0 2px var(--pxl-color-accent) inset;
}
.pxl-logo-pick__frame {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 88px;
background: var(--pxl-color-surface);
border-radius: calc(var(--pxl-radius) * 0.75);
overflow: hidden;
padding: 0.5rem;
}
.pxl-logo-pick__frame--dark {
background: #1a1a1a;
}
.pxl-logo-pick__frame img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
display: block;
}
.pxl-logo-pick__meta {
display: flex;
flex-direction: column;
gap: 0.125rem;
padding: 0 0.125rem;
}
.pxl-logo-pick__meta-type {
font-size: 0.78rem;
font-weight: 600;
color: var(--pxl-color-fg);
letter-spacing: 0.01em;
}
.pxl-logo-pick__meta-sub {
font-size: 0.7rem;
color: var(--pxl-color-muted);
letter-spacing: 0.02em;
}
@media (min-width: 640px) {
.pxl-logo-pick { width: 160px; }
.pxl-logo-pick__frame { height: 100px; }
}
/* ── Color-Picker ──────────────────────────────────────────
Chips mit Swatch + Hex + X-Indikator. Selected = bordered + X visible.
Hover scaled subtle.
───────────────────────────────────────────────────────── */
.pxl-color-picker {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
/* User-Wunsch (2026-05-07): nur Farbkreis, kein Hex-Text, kein X */
.pxl-color-chip {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
width: 2.5rem;
height: 2.5rem;
background: transparent;
border: 2px solid var(--pxl-color-border);
border-radius: 50%;
cursor: pointer;
transition: all 180ms var(--pxl-ease);
}
.pxl-color-chip:hover {
border-color: var(--pxl-color-fg);
transform: scale(1.08);
}
.pxl-color-chip.is-selected {
border-color: var(--pxl-color-fg);
border-width: 3px;
transform: scale(1.05);
}
.pxl-color-chip__swatch {
width: 100%;
height: 100%;
border-radius: 50%;
border: 2px solid var(--pxl-color-bg);
flex-shrink: 0;
}
.pxl-color-chip__hex,
.pxl-color-chip__x { display: none !important; }
.pxl-color-chip__hex {
font-variant-numeric: tabular-nums;
font-size: 0.74rem;
}
.pxl-color-chip__x {
display: none;
font-size: 1rem;
line-height: 1;
color: var(--pxl-color-muted);
margin-left: 0.125rem;
}
.pxl-color-chip.is-selected .pxl-color-chip__x { display: inline; }
/* Subtle "max reached" Shake-Animation (Hint, dass max 3 erlaubt sind) */
@keyframes pxl-bc-shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-3px); }
75% { transform: translateX(3px); }
}
.pxl-color-chip.is-shake { animation: pxl-bc-shake 360ms ease-in-out; }
/* ── Pitch-Textarea + Counter ─────────────────────────────── */
.pxl-bc-pitch {
position: relative;
display: flex;
flex-direction: column;
gap: 0.375rem;
}
.pxl-bc-textarea {
width: 100%;
min-height: 9rem;
padding: 0.95rem 1rem;
background: var(--pxl-color-bg);
color: var(--pxl-color-fg);
border: 1.5px solid var(--pxl-color-border);
border-radius: var(--pxl-radius);
font-family: var(--pxl-font-body);
font-size: 0.92rem;
line-height: 1.5;
resize: vertical;
transition: border-color 180ms var(--pxl-ease), box-shadow 180ms var(--pxl-ease);
}
.pxl-bc-textarea:focus {
outline: none;
border-color: var(--pxl-color-fg);
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04);
}
.pxl-bc-textarea::placeholder {
color: var(--pxl-color-muted);
opacity: 0.7;
}
.pxl-bc-pitch__counter {
align-self: flex-end;
font-size: 0.72rem;
color: var(--pxl-color-muted);
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
}
/* ── Style-Preset-Pills ──────────────────────────────────── */
.pxl-style-presets {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.pxl-style-pill {
/* System-konsistent zu .pxl-phase-pill / .pxl-pill / .pxl-cat-filter */
padding: 0.5rem 1rem;
min-height: 2.5rem;
display: inline-flex;
align-items: center;
background: var(--pxl-color-bg);
border: 1.5px solid var(--pxl-color-border);
border-radius: 999px;
cursor: pointer;
font-family: inherit;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--pxl-color-fg);
transition: all 200ms var(--pxl-ease);
}
.pxl-style-pill:hover {
border-color: var(--pxl-color-fg);
}
.pxl-style-pill.is-selected {
background: var(--pxl-color-accent);
color: var(--pxl-color-accent-fg);
border-color: var(--pxl-color-accent);
}
/* ── Action-Bar ───────────────────────────────────────────── */
.pxl-bc-actions {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 1rem;
padding-top: 1.5rem;
border-top: 1px solid var(--pxl-color-border);
}
.pxl-bc-actions__right {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
@media (max-width: 480px) {
.pxl-bc-actions { flex-direction: column-reverse; align-items: stretch; }
.pxl-bc-actions__right { flex-direction: column; }
.pxl-bc-actions .pxl-btn { width: 100%; }
}
/* Skip-Btn: subtil — keine Primary-Hierarchie konkurrieren lassen mit dem
Weiter-Button. Erbt pxl-btn--ghost, nur etwas schmaler. */
.pxl-btn--skip {
letter-spacing: 0.06em;
}
/* ═══════════════════════════════════════════════════════════
Refine-UX (Track D) — Pills, Hero-Viewer, Actions, Modal
═══════════════════════════════════════════════════════════ */
.pxl-main--refine {
padding-bottom: 6.5rem; /* Platz fuer fixed Action-Bar auf Mobile */
}
/* ── Hero: 3D-Viewer der aktuellen Refine-Basis ──────────── */
/* Refine-Hero: gleiche Breite wie die Sections darunter (880px max),
subtle Verlauf statt flat-grau für mehr Flächigkeit */
.pxl-refine__hero {
position: relative;
width: 100%;
margin: 0 auto 1.5rem auto;
max-width: 880px;
border-radius: 16px;
overflow: hidden;
background: linear-gradient(135deg, var(--pxl-color-surface, #fff) 0%, var(--pxl-color-surface2, #f4f6fa) 100%);
border: 1px solid rgba(15, 23, 42, 0.08);
}
.pxl-refine__hero-viewer {
width: 100%;
aspect-ratio: 1 / 1;
max-height: min(calc(100dvh - 280px), 520px);
display: flex;
align-items: center;
justify-content: center;
background: #ebeef3;
}
.pxl-refine__hero-viewer model-viewer {
width: 100%;
height: 100%;
--poster-color: transparent;
}
.pxl-refine__hero-fallback {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
filter: blur(12px) saturate(1.05);
transform: scale(1.08);
}
.pxl-refine__hero-label {
position: absolute;
left: 1rem;
bottom: 1rem;
padding: 0.4rem 0.85rem;
background: rgba(15, 23, 42, 0.75);
color: #fff;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.02em;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
@media (min-width: 720px) {
.pxl-refine__hero-viewer {
aspect-ratio: 1 / 1;
max-height: min(calc(100dvh - 280px), 520px);
}
}
/* ── History-Bar (Breadcrumbs) ─────────────────────────── */
.pxl-refine__history {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem;
margin: 0 auto 1.5rem auto;
padding: 0.65rem 0.9rem;
background: var(--pxl-color-surface2, #f4f6fa);
border-radius: 12px;
font-size: 0.82rem;
}
.pxl-refine__history:empty {
display: none;
}
.pxl-refine__crumb {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.35rem 0.75rem;
border: 1px solid transparent;
background: transparent;
border-radius: 999px;
color: var(--pxl-color-muted, #5a6678);
font-size: 0.8rem;
cursor: pointer;
transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.pxl-refine__crumb:hover:not(:disabled) {
background: rgba(15, 23, 42, 0.06);
color: var(--pxl-color-fg, #0f172a);
}
.pxl-refine__crumb:disabled {
cursor: default;
}
.pxl-refine__crumb--done {
color: var(--pxl-color-fg, #0f172a);
font-weight: 500;
}
.pxl-refine__crumb.is-active {
background: var(--pxl-color-fg, #0f172a);
color: #fff;
font-weight: 600;
border-color: var(--pxl-color-fg, #0f172a);
}
.pxl-refine__crumb-sep {
color: var(--pxl-color-muted, #94a3b8);
font-size: 0.95rem;
user-select: none;
}
/* ── Section-Container + Group — subtle Verlauf für Flächigkeit ─── */
.pxl-refine__section {
background: linear-gradient(135deg, rgba(var(--pxl-acc1-rgb), 0.04) 0%, var(--pxl-color-bg, #fff) 60%, var(--pxl-color-surface, #f7f7f8) 100%);
border-radius: 16px;
padding: 1.5rem 1.25rem;
margin: 0 auto 1.5rem auto;
max-width: 880px;
border: 1px solid rgba(var(--pxl-acc1-rgb), 0.14);
box-shadow: 0 2px 10px rgba(var(--pxl-acc1-rgb), 0.04);
}
.pxl-refine__section-title {
display: block;
font-size: 1.05rem;
font-weight: 600;
margin-bottom: 1.1rem;
color: var(--pxl-color-fg, #0f172a);
}
.pxl-refine__group {
margin-bottom: 1.4rem;
}
.pxl-refine__group:last-child {
margin-bottom: 0;
}
.pxl-refine__group-label {
display: block;
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--pxl-color-fg, #0f172a);
margin-bottom: 0.6rem;
}
.pxl-refine__optional {
font-weight: 400;
font-size: 0.78rem;
color: var(--pxl-color-muted, #94a3b8);
margin-left: 0.25rem;
}
/* ── Pill-Grid + Pills ─────────────────────────────────── */
.pxl-pill-grid {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: center;
}
.pxl-pill {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
padding: 0.6rem 1.2rem;
background: var(--pxl-color-bg, #fff);
border: 1.5px solid rgba(15, 23, 42, 0.12);
border-radius: 999px;
color: var(--pxl-color-fg, #0f172a);
/* 2026-05-13 UX-Polish: 0.65rem war unlesbar, jetzt 0.78rem matching Buttons. */
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: none;
line-height: 1.1;
text-align: center;
cursor: pointer;
transition: background 180ms ease, border-color 180ms ease, transform 200ms ease, box-shadow 200ms ease;
user-select: none;
}
.pxl-pill:hover:not(:disabled) {
border-color: rgba(15, 23, 42, 0.2);
background: rgba(15, 23, 42, 0.04);
}
.pxl-pill__check {
display: none;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
font-size: 0.7rem;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
color: #fff;
transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}
.pxl-pill.is-selected .pxl-pill__check {
display: inline-flex;
}
.pxl-pill.is-selected {
background: var(--pxl-color-fg, #0f172a);
border-color: var(--pxl-color-fg, #0f172a);
color: #fff;
box-shadow: 0 4px 12px -4px rgba(15, 23, 42, 0.4);
}
/* duplicate of .pxl-pill.is-selected .pxl-pill__check above — kept for backwards compat */
.pxl-pill.pxl-pill--bounce {
animation: pxl-pill-bounce 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* Smooth Pill-Feedback — kein Bounce, kein Overshoot (DESIGN.md). */
@keyframes pxl-pill-bounce {
0% { transform: scale(1); }
50% { transform: scale(1.06); }
100% { transform: scale(1); }
}
/* ── Free-Text Textarea ────────────────────────────────── */
.pxl-refine__textarea {
width: 100%;
resize: vertical;
min-height: 78px;
padding: 0.85rem 1rem;
border: 1.5px solid rgba(15, 23, 42, 0.1);
border-radius: 12px;
font-family: inherit;
font-size: 0.92rem;
line-height: 1.5;
color: var(--pxl-color-fg, #0f172a);
background: var(--pxl-color-surface, #fff);
transition: border-color 180ms ease, box-shadow 180ms ease;
}
.pxl-refine__textarea:focus {
border-color: var(--pxl-color-fg, #0f172a);
box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}
.pxl-refine__textarea:focus-visible {
outline: 2px solid var(--pxl-color-fg, #0f172a);
outline-offset: 3px;
}
/* ── Action-Bar (Mobile fixed bottom, Desktop inline) ── */
.pxl-refine__actions {
display: flex;
flex-wrap: wrap;
gap: 0.65rem;
justify-content: center;
align-items: center;
margin: 1.75rem auto 0 auto;
max-width: 880px;
}
.pxl-refine__actions .pxl-btn {
flex: 0 0 auto;
}
@media (max-width: 640px) {
.pxl-refine__actions {
position: fixed;
left: 0;
right: 0;
bottom: 0;
margin: 0;
padding: 0.85rem 1rem calc(0.85rem + env(safe-area-inset-bottom, 0)) 1rem;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-top: 1px solid rgba(15, 23, 42, 0.08);
z-index: 50;
flex-direction: row;
flex-wrap: nowrap;
gap: 0.5rem;
}
.pxl-refine__actions .pxl-btn {
flex: 1 1 0;
padding-left: 0.5rem;
padding-right: 0.5rem;
font-size: 0.82rem;
}
.pxl-refine__actions .pxl-btn--skip {
display: none; /* auf Mobile zu eng — Back + Submit reichen */
}
}
/* ── Refine-Tile-Variante ─────────────────────────────── */
.pxl-render__tile--refine {
/* identisch zu den render-Tiles, optional sichtbarer Hint via subtle border */
outline: 1px solid rgba(15, 23, 42, 0.04);
}
.pxl-render__tile--refine.is-selected {
outline-color: var(--pxl-color-fg, #0f172a);
}
/* ── Limit-erreicht-Modal ─────────────────────────────── */
.pxl-refine-max-modal .pxl-ar-modal__body p {
color: var(--pxl-color-fg, #0f172a);
}
.pxl-refine-max-modal.is-open {
/* erbt pxl-ar-modal-Verhalten */
}
/* ═══════════════════════════════════════════════════════════
Focus + Reduced motion
═══════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════
Photoreal-Hero — Auto-Card + Vollbild-Modal
Auto-Card erscheint sobald User ein Design wählt; zeigt
Spinner während ~12s Generation, dann das große Hero-Bild
prominent (klickbar → Fullscreen).
═══════════════════════════════════════════════════════════ */
.pxl-photoreal-card {
margin: 0 auto 1.5rem;
max-width: 1700px;
width: 100%;
background: var(--pxl-color-surface);
border: 1px solid var(--pxl-color-border);
border-radius: 18px;
overflow: hidden;
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
animation: pxl-photoreal-slide 380ms var(--pxl-ease);
}
@keyframes pxl-photoreal-slide {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
.pxl-photoreal-card__loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.85rem;
padding: 3rem 1.5rem;
text-align: center;
}
.pxl-photoreal-card__spinner {
width: 3rem;
height: 3rem;
border: 3px solid var(--pxl-color-border);
border-top-color: var(--pxl-color-fg);
border-radius: 50%;
animation: pxl-photoreal-spin 900ms linear infinite;
}
.pxl-photoreal-card__title {
font-size: 1rem;
font-weight: 700;
letter-spacing: 0.02em;
color: var(--pxl-color-fg);
}
.pxl-photoreal-card__sub {
font-size: 0.78rem;
color: var(--pxl-color-muted);
letter-spacing: 0.04em;
}
.pxl-photoreal-card__title-bar {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.85rem 1.25rem;
background: var(--pxl-color-fg);
color: var(--pxl-color-accent-fg, #fff);
}
.pxl-photoreal-card__badge {
display: inline-block;
background: rgba(255,255,255,0.2);
padding: 0.25rem 0.6rem;
border-radius: 4px;
font-size: 0.65rem;
font-weight: 800;
letter-spacing: 0.12em;
}
.pxl-photoreal-card__label {
flex: 1;
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.04em;
}
.pxl-photoreal-card__expand {
background: transparent;
border: 0;
color: inherit;
cursor: pointer;
padding: 0.4rem;
border-radius: 4px;
transition: background 200ms;
}
.pxl-photoreal-card__expand:hover { background: rgba(255,255,255,0.15); }
.pxl-photoreal-card__img {
width: 100%;
display: block;
cursor: zoom-in;
transition: transform 600ms ease-out;
}
.pxl-photoreal-card__img:hover { transform: scale(1.02); }
.pxl-photoreal-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
min-height: 2.75rem;
}
.pxl-photoreal-btn--ready {
background: var(--pxl-color-fg);
color: var(--pxl-color-bg);
}
.pxl-photoreal-btn__spinner {
display: inline-block;
width: 0.85rem;
height: 0.85rem;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: pxl-photoreal-spin 720ms linear infinite;
}
@keyframes pxl-photoreal-spin {
to { transform: rotate(360deg); }
}
.pxl-photoreal-modal {
position: fixed;
inset: 0;
z-index: 2147483641; /* knapp über fullscreen-mode */
background: rgba(0, 0, 0, 0.92);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2rem;
cursor: zoom-out;
animation: pxl-photoreal-fade 220ms ease-out;
}
@keyframes pxl-photoreal-fade {
from { opacity: 0; }
to { opacity: 1; }
}
.pxl-photoreal-modal img {
max-width: 95%;
max-height: calc(100vh - 7rem);
object-fit: contain;
border-radius: 8px;
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
cursor: default;
}
.pxl-photoreal-modal__caption {
margin-top: 1rem;
color: rgba(255, 255, 255, 0.72);
font-size: 0.8rem;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.pxl-photoreal-modal__close {
position: fixed;
top: max(1rem, env(safe-area-inset-top));
right: max(1rem, env(safe-area-inset-right));
width: 2.75rem;
height: 2.75rem;
border-radius: 50%;
border: 0;
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 200ms var(--pxl-ease);
}
.pxl-photoreal-modal__close:hover {
background: rgba(255, 255, 255, 0.32);
}
.pxl-photoreal-modal__close svg {
width: 1.15rem;
height: 1.15rem;
}
.pixlip-configurator :focus-visible { outline: 2px solid var(--pxl-color-fg); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
.pixlip-configurator *,
.pixlip-configurator *::before,
.pixlip-configurator *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
/* Confetti komplett unterdrücken — fliegende Pieces können bei Vestibular-Issues stören */
.pxl-confetti { display: none !important; }
/* Insight-Cards trotzdem sichtbar machen (sonst opacity:0 ohne Animation) */
.pxl-insight-card { opacity: 1 !important; }
}
/* ═══════════════════════════════════════════════════════════
Desktop ≥1024px — 2-Spalten-Layout für Brand-Customize + Refine
Vorschau / Inhalt links, Anpassungen + Buttons rechts.
Spart Vertikalraum (Footer-Buttons immer in Reichweite) und
wirkt wertiger als endlose Sektionen-Stapelei.
═══════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
/* Brand-Customize: 2×2 Grid mit gleichmäßigen Reihen.
Logo + Pitch in Reihe 1, Colors + Tonalität in Reihe 2.
align-items: stretch (default) sorgt dafür dass Cards
einer Reihe immer dieselbe Höhe haben → kein Asymmetrie-Effekt
mehr durch unterschiedlich lange Inhalte. */
.pxl-brand-customize {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-rows: minmax(0, auto) minmax(0, auto);
gap: 1.25rem;
}
.pxl-brand-customize > .pxl-bc-section[data-bc-section="logo"] { grid-column: 1; grid-row: 1; }
.pxl-brand-customize > .pxl-bc-section[data-bc-section="pitch"] { grid-column: 2; grid-row: 1; }
.pxl-brand-customize > .pxl-bc-section[data-bc-section="colors"] { grid-column: 1; grid-row: 2; }
.pxl-brand-customize > .pxl-bc-section[data-bc-section="style"] { grid-column: 2; grid-row: 2; }
.pxl-brand-customize > .pxl-bc-actions { grid-column: 1 / -1; }
/* Cards füllen ihre Grid-Zelle vollständig aus (gleich hohe Cards
pro Reihe). Inhalt bleibt top-aligned — das ergibt ein ruhiges,
vorhersehbares Raster. */
.pxl-brand-customize > .pxl-bc-section {
display: flex;
flex-direction: column;
height: 100%;
}
/* Refine: Hero-Vorschau links (sticky), Pills + Textarea + Actions rechts */
[data-role="refine-content"] {
display: grid;
grid-template-columns: minmax(320px, 1fr) minmax(380px, 480px);
column-gap: 2rem;
align-items: start;
}
[data-role="refine-content"] > .pxl-refine__hero {
grid-column: 1;
grid-row: 1 / span 2;
position: sticky;
top: 6rem;
}
[data-role="refine-content"] > .pxl-refine__section {
grid-column: 2;
grid-row: 1;
max-width: none;
margin: 0;
}
[data-role="refine-content"] > .pxl-refine__actions {
grid-column: 2;
grid-row: 2;
max-width: none;
margin: 0.75rem 0 0;
justify-content: flex-end;
}
/* Pills bleiben zentriert auch im 2-Spalten-Layout — User-Wunsch */
[data-role="refine-content"] .pxl-pill-grid {
justify-content: center;
}
}
/* ═══════════════════════════════════════════════════════════
Mobile <=480px (iPhone & schmale Android) — gezielte Anpassungen
damit Inhalt in den Viewport passt und Touch-Targets stimmen.
═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
/* Hero-Screen — Mobile-Fix 2026-05-22: URL-Input + Button definitiv
untereinander, Hero-Card hat mehr Top-Padding damit weder Theme-Header
(Suche/Account/Cart) noch Konfigurator-X-Button überlappt werden. */
.pixlip-configurator section[data-screen="hero"] {
/* Top-Space lassen für Theme-Header (~56px) + X-Button (~64px). */
padding-top: 80px !important;
padding-bottom: 16px !important;
}
.pxl-hero__card {
padding: 1.75rem 1.25rem !important;
max-width: calc(100vw - 24px) !important;
border-radius: 18px !important;
}
.pxl-hero__title {
font-size: 1.5rem !important;
line-height: 1.15 !important;
}
.pxl-hero__subtitle {
margin-top: 0.85rem !important;
font-size: 0.88rem !important;
}
.pxl-hero__form {
margin-top: 1.5rem !important;
display: flex;
flex-direction: column;
gap: 14px;
}
.pxl-url-input {
width: 100% !important;
padding: 0.85rem 0 !important;
font-size: 16px !important; /* verhindert iOS-Auto-Zoom */
text-align: left !important;
}
.pxl-hero__cta {
margin-top: 1.25rem !important;
width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 10px;
}
.pxl-hero__cta .pxl-btn {
width: 100% !important;
height: 52px !important;
font-size: 0.92rem !important;
justify-content: center;
}
.pxl-hero__tagline {
margin-top: 1rem !important;
font-size: 0.78rem !important;
}
.pxl-fullscreen-close {
/* X-Button niemals über Hero-Inhalt — wir setzen mit Safe-Area-Top */
top: max(12px, env(safe-area-inset-top)) !important;
right: 12px !important;
}
/* Brand-Analyse / Brand-Customize Cards */
.pxl-brand-card { padding: 1.25rem 1rem; gap: 1rem; }
.pxl-brand-card__logo { min-height: 120px; }
.pxl-bc-section { padding: 1rem 1.1rem; }
/* Selection-Screen (Stand-Auswahl) */
.pxl-stands-grid { padding-bottom: 5rem; gap: 1rem; }
.pxl-stand-card__body { padding: 0.75rem 0.85rem 1rem; }
.pxl-selection__footer {
margin: 0 -1.25rem -2rem;
flex-direction: column;
gap: 0.5rem;
}
.pxl-selection__footer .pxl-btn { width: 100%; }
/* Render-Screen Quad */
.pxl-render__tiles--quad { gap: 0.3rem; }
.pxl-render__tile-pick { font-size: 0.62rem; padding: 0.4rem 0.5rem; }
.pxl-render__loading { margin-bottom: 0.75rem; }
/* Refine-Screen */
.pxl-refine__hero-viewer { height: 38vw; min-height: 160px; }
.pxl-refine__section { padding: 1rem 1rem; }
}
/* ═══════════════════════════════════════════════════════════
Touch-Target-Härtung: Pick-Buttons mind. 44px auf Mobile/Tablet
(PRODUCT.md WCAG-Pflicht für Touch-Devices).
═══════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
.pxl-render__tile-pick {
min-height: 44px;
padding: 0.75rem 0.85rem;
font-size: 0.75rem;
}
}
/* ═══════════════════════════════════════════════════════════
Tile-Click-Expand (Desktop ≥1024px):
Click auf eine Tile expandiert sie zur Hauptansicht (2/3-Spalte links),
die anderen 3 Tiles werden zu einer schmalen Spalte rechts (3 Reihen).
Mobile: Modal-Verhalten via JS-matchMedia (kein CSS-Pendant nötig).
═══════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
/* Container-Geometrie: Height = SH, Width = SH × 4/3.
Grid 3fr 1fr × repeat(3, 1fr) → Hauptansicht (3fr × 3rows) = SH × SH = QUADRAT,
jede Thumb-Cell (1fr × 1row) = SH/3 × SH/3 = QUADRAT.
SH gekappt durch min(verfügbare Höhe, (verfügbare Breite × 3/4), 720px). */
.pxl-render__tiles--quad.is-expanded {
--pxl-expand-h: min(
calc(100dvh - 280px),
calc((100dvw - 60px) * 3 / 4),
720px
);
grid-template-columns: 3fr 1fr;
grid-template-rows: repeat(3, 1fr);
aspect-ratio: auto;
height: var(--pxl-expand-h);
width: calc(var(--pxl-expand-h) * 4 / 3);
transition: width 350ms cubic-bezier(0.16, 1, 0.3, 1),
height 350ms cubic-bezier(0.16, 1, 0.3, 1);
}
.pxl-render__tiles--quad.is-expanded [data-style-wrap].is-tile-expanded {
grid-column: 1 / 2;
grid-row: 1 / 4; /* alle 3 Reihen — Hauptansicht ist Quadrat (3fr breit × 3 Reihen hoch) */
}
.pxl-render__tiles--quad.is-expanded [data-style-wrap]:not(.is-tile-expanded) {
grid-column: 2 / 3;
/* Thumbs werden auto-placed in Reihe 1, 2, 3 — Cell-Größe ist bereits 1/3 × 1/3 = quadrat,
kein aspect-ratio nötig (Grid Math übernimmt). */
cursor: pointer;
}
/* Pick-Button in Thumb-Tiles im Expand ausblenden (Aktiver Pick liegt auf Hauptansicht) */
.pxl-render__tiles--quad.is-expanded [data-style-wrap]:not(.is-tile-expanded) .pxl-render__tile-pick {
display: none;
}
/* Pick-Button der expandierten Tile prominent + erreichbar */
.pxl-render__tiles--quad.is-expanded [data-style-wrap].is-tile-expanded .pxl-render__tile-pick {
display: block;
padding: 0.6rem 1rem;
font-size: 0.7rem;
}
.pxl-render__tiles--quad.is-expanded .pxl-ar-overlay {
display: flex;
}
}
/* AR-Inline-Overlay (sichtbar nur wenn die Tile expandiert ist) */
.pxl-ar-overlay {
display: none;
position: absolute;
bottom: 1rem;
left: 50%;
transform: translateX(-50%);
flex-direction: column;
align-items: center;
gap: 0.5rem;
z-index: 10;
pointer-events: auto;
}
.pxl-ar-overlay__btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 1.2rem;
background: var(--pxl-color-accent, #111);
color: var(--pxl-color-accent-fg, #fff);
border: none;
border-radius: 8px;
font-family: inherit;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
cursor: pointer;
box-shadow: 0 4px 16px -4px rgba(0,0,0,0.28);
transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.pxl-ar-overlay__btn svg { width: 1rem; height: 1rem; }
.pxl-ar-overlay__btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px -6px rgba(0,0,0,0.32);
}
/* ═══════════════════════════════════════════════════════════
Render-Footer-Bar (Integrierte Variante 2026-05-13):
Hint links + 3 Buttons rechts in EINER Glass-Bar, breite-aligned mit
Progress + Quad. Beim Selection bekommt die Bar einen Signal-Verlauf.
═══════════════════════════════════════════════════════════ */
.pxl-render__footer-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
padding: 0.85rem 1.1rem;
max-width: var(--pxl-render-frame-w);
margin: 1rem auto 0;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.72) 0%,
var(--pxl-glass-bg-strong) 100%);
backdrop-filter: var(--pxl-glass-blur);
-webkit-backdrop-filter: var(--pxl-glass-blur);
border: 1px solid var(--pxl-glass-border);
border-radius: 14px;
box-shadow: var(--pxl-glass-shadow);
transition: background 350ms var(--pxl-ease), border-color 350ms var(--pxl-ease);
}
.pxl-render__footer-bar.has-selection {
background: linear-gradient(135deg,
var(--pxl-glass-bg-strong) 0%,
rgba(255, 255, 255, 0.85) 100%);
border-color: var(--pxl-glass-border-strong);
box-shadow: 0 8px 32px rgba(var(--pxl-acc1-rgb), 0.18);
}
.pxl-render__footer-hint {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--pxl-color-muted);
flex: 1 1 auto;
}
.pxl-render__footer-bar.has-selection .pxl-render__footer-hint {
color: var(--pxl-color-signal);
}
.pxl-render__footer-btns {
display: flex;
gap: 0.6rem;
flex-wrap: wrap;
flex-shrink: 0;
}
@media (max-width: 559px) {
.pxl-render__footer-bar { flex-direction: column; align-items: stretch; }
.pxl-render__footer-btns .pxl-btn { flex: 1 1 0; }
}
/* ─────────────────────────────────────────────────────────────────────────
Signal-Button (Pixlip-Blau-CTA) — Apple-Style minimal: einfacher 2-Stop-
Gradient, EIN sanfter Drop-Shadow, kein Inset-Highlight, kein Triple-Glow.
2026-05-13 zurückgenommen: vorherige Version war zu plastisch.
───────────────────────────────────────────────────────────────────────── */
.pxl-btn--signal {
background: linear-gradient(180deg, var(--pxl-accent-lite2) 0%, var(--pxl-color-signal, #2a64a6) 100%);
color: var(--pxl-color-signal-fg, #fff);
border-color: transparent;
box-shadow: 0 1px 2px rgba(15,30,55,0.08);
letter-spacing: 0.04em;
}
.pxl-btn--signal:hover:not(:disabled) {
background: linear-gradient(180deg, var(--pxl-accent-hi) 0%, var(--pxl-accent-hi2) 100%);
box-shadow: 0 2px 6px rgba(var(--pxl-acc1-rgb), 0.18);
transform: none;
}
.pxl-btn--signal:active:not(:disabled) {
background: linear-gradient(180deg, var(--pxl-accent) 0%, var(--pxl-accent-deep2) 100%);
box-shadow: 0 1px 2px rgba(15,30,55,0.10);
}
.pxl-btn--signal:disabled {
opacity: 0.5;
background: linear-gradient(180deg, rgba(28,105,212,0.45) 0%, rgba(6,83,182,0.55) 100%);
box-shadow: none;
color: rgba(255,255,255,0.85);
cursor: not-allowed;
}
/* 2026-05-13 Refine-Tile: einfaches Bild ohne pending-overlay, soll Feld füllen. */
.pxl-render__tile-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
z-index: 1;
}
/* ─────────────────────────────────────────────────────────────────────────
Border-Radius global vereinheitlichen (User-Wunsch 2026-05-13):
alle Cards, Buttons, Inputs, Hero-Frames, Tile-Wraps — einheitlich
`var(--pxl-radius)` (6px, leicht abgerundet). Pills sind die einzige
Ausnahme (Filter-Chips, Refine-Pills): bleiben kreisrund 9999px.
───────────────────────────────────────────────────────────────────────── */
.pixlip-configurator .pxl-btn,
.pixlip-configurator .pxl-btn--primary,
.pixlip-configurator .pxl-btn--signal,
.pixlip-configurator .pxl-btn--secondary,
.pixlip-configurator .pxl-btn--ghost,
.pixlip-configurator .pxl-btn--glass,
.pixlip-configurator .pxl-bc-section,
.pixlip-configurator .pxl-stand-card,
.pixlip-configurator .pxl-stand-card__image,
.pixlip-configurator .pxl-render__tile,
.pixlip-configurator .pxl-render__tile-wrap,
.pixlip-configurator .pxl-render__loading,
.pixlip-configurator .pxl-render__loading-frame,
.pixlip-configurator .pxl-render__footer-bar,
.pixlip-configurator .pxl-render__tile-pick,
.pixlip-configurator .pxl-summary,
.pixlip-configurator .pxl-summary__viewer,
.pixlip-configurator .pxl-summary__hero-img,
.pixlip-configurator .pxl-summary__hero-placeholder,
.pixlip-configurator .pxl-summary__design,
.pixlip-configurator .pxl-summary__brand-logo,
.pixlip-configurator .pxl-summary__stand-media,
.pixlip-configurator .pxl-contact-form,
.pixlip-configurator .pxl-contact-summary,
.pixlip-configurator .pxl-contact-field__input,
.pixlip-configurator .pxl-contact-field__textarea,
.pixlip-configurator .pxl-bc-textarea,
.pixlip-configurator .pxl-form,
.pixlip-configurator .pxl-contact,
.pixlip-configurator input[type="text"],
.pixlip-configurator input[type="email"],
.pixlip-configurator input[type="url"],
.pixlip-configurator input[type="tel"],
.pixlip-configurator textarea,
.pixlip-configurator select {
border-radius: var(--pxl-radius) !important;
}
.pixlip-configurator .pxl-btn--lg {
border-radius: var(--pxl-radius-lg) !important;
}
.pixlip-configurator .pxl-pill,
.pixlip-configurator .pxl-refine-pill,
.pixlip-configurator .pxl-summary__ar-btn,
.pixlip-configurator .pxl-phase-pill {
border-radius: 9999px !important;
}
/* Roboto-Cascade hart erzwingen: alle Kindelemente inkl. Inputs, Buttons,
Headlines, Spans erben var(--pxl-font-body). Inputs/Buttons brauchen die
font-family explizit weil Browser-Defaults sie sonst auf system-ui setzen. */
.pixlip-configurator,
.pixlip-configurator *,
.pixlip-configurator input,
.pixlip-configurator textarea,
.pixlip-configurator select,
.pixlip-configurator button,
.pixlip-configurator h1,
.pixlip-configurator h2,
.pixlip-configurator h3,
.pixlip-configurator h4,
.pixlip-configurator h5,
.pixlip-configurator h6 {
font-family: var(--pxl-font-body) !important;
}
/* Glass-Variant: für sekundäre Premium-Buttons (z.B. "Diese Variation wählen"
auf der Selection unter dem Tile, wenn nicht aktive Primary). */
.pxl-btn--glass {
background:
linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.18) 100%);
color: var(--pxl-color-fg, #0f172a);
border-color: var(--pxl-glass-border-strong, rgba(15,23,42,0.15));
backdrop-filter: var(--pxl-glass-blur, blur(20px) saturate(160%));
-webkit-backdrop-filter: var(--pxl-glass-blur, blur(20px) saturate(160%));
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.6),
0 2px 8px -2px rgba(15,30,55,0.08),
0 10px 24px -10px rgba(15,30,55,0.18);
}
.pxl-btn--glass:hover:not(:disabled) {
background:
linear-gradient(180deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.28) 100%);
border-color: var(--pxl-color-signal, #2a64a6);
color: var(--pxl-color-signal, #2a64a6);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.75),
0 4px 12px -2px rgba(15,30,55,0.12),
0 16px 32px -12px rgba(var(--pxl-acc1-rgb),0.30);
}
/* ─────────────────────────────────────────────────────────────────────────
Contact-Summary (C1): Brand + Stand + Design-Auswahl, oberhalb der Form.
Header: 2 Spalten (Brand-Block | Stand-Block) auf Desktop, gestapelt mobil.
Designs: Grid mit gleichmäßig großen Thumb-Tiles.
───────────────────────────────────────────────────────────────────────── */
.pxl-summary {
margin: 0 0 1.75rem;
padding: 1.25rem;
background: var(--pxl-color-surface, rgba(255,255,255,0.6));
border: 1px solid var(--pxl-glass-border, rgba(0,0,0,0.08));
border-radius: 14px;
display: grid;
gap: 1.25rem;
}
/* Hero: großer AR-Stand-Block oben in der Summary */
.pxl-summary__hero {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
align-items: stretch;
}
@media (min-width: 720px) {
.pxl-summary__hero {
/* Viewer-Spalte dominant (~65%), Meta+QR rechts kompakt (max 230px).
2026-05-13: viewer soll Feld füllen, QR ist 150px breit + Padding =
ca. 200px → 230px lässt Atemraum, ohne dass viewer schrumpft. */
grid-template-columns: minmax(0, 1fr) minmax(200px, 230px);
align-items: stretch;
gap: 1.25rem;
}
}
.pxl-summary__viewer-wrap {
position: relative;
width: 100%;
height: 100%;
min-height: 320px;
/* Deckel gegen Runaway-Höhe: ohne max-height leitet der Browser die Bildhöhe
aus width × Intrinsic-Ratio ab (height:100% in einem höhen-indefiniten
Stretch-Grid). Dadurch wuchs das Hero bei breitem Viewport / Zoom <100%
unbegrenzt in die Höhe und drückte die drei Konzept-Thumbs nach unten →
großer Leerraum / "kleben am unteren Rand". Max-height fixiert die Vorschau. */
max-height: 460px;
display: flex;
}
.pxl-summary__viewer,
.pxl-summary__hero-img {
width: 100%;
height: 100%;
min-height: 320px;
max-height: 460px;
background: var(--pxl-color-surface2, #f2f2f2);
border-radius: var(--pxl-radius);
display: block;
object-fit: cover;
}
@media (min-width: 720px) {
.pxl-summary__viewer-wrap { min-height: 380px; }
.pxl-summary__viewer,
.pxl-summary__hero-img { min-height: 380px; aspect-ratio: auto; }
}
.pxl-summary__fullscreen-btn {
position: absolute;
top: 12px;
right: 12px;
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(15, 23, 42, 0.12);
border-radius: var(--pxl-radius);
color: var(--pxl-color-fg, #111);
cursor: pointer;
box-shadow: 0 2px 8px rgba(15, 30, 55, 0.14);
transition: background 160ms ease, color 160ms ease;
z-index: 2;
}
.pxl-summary__fullscreen-btn:hover {
background: var(--pxl-color-signal, #2a64a6);
color: #fff;
border-color: transparent;
}
/* Pseudo-Fullscreen-Fallback wenn native Fullscreen-API blockt (z.B. iframe). */
.pxl-summary__viewer-wrap.is-pseudo-full {
position: fixed;
inset: 0;
z-index: 9999;
max-height: none; /* 460px-Deckel im Fullscreen aufheben */
background: #000;
}
.pxl-summary__viewer-wrap.is-pseudo-full .pxl-summary__viewer,
.pxl-summary__viewer-wrap.is-pseudo-full .pxl-summary__hero-img {
width: 100%;
height: 100%;
aspect-ratio: auto;
min-height: 0;
max-height: none;
border-radius: 0;
}
/* Native Fullscreen-State */
.pxl-summary__viewer-wrap.is-full .pxl-summary__viewer,
.pxl-summary__viewer-wrap.is-full .pxl-summary__hero-img,
.pxl-summary__viewer-wrap:fullscreen .pxl-summary__viewer,
.pxl-summary__viewer-wrap:fullscreen .pxl-summary__hero-img {
width: 100vw;
height: 100vh;
aspect-ratio: auto;
min-height: 0;
max-height: none;
border-radius: 0;
background: #000;
}
.pxl-summary__viewer { --poster-color: transparent; }
.pxl-summary__hero-placeholder {
width: 100%;
aspect-ratio: 4 / 3;
min-height: 240px;
background: var(--pxl-color-surface2, #f2f2f2);
border-radius: 12px;
}
.pxl-summary__ar-btn {
position: absolute;
bottom: 12px;
right: 12px;
padding: 0.55rem 1rem;
background: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(15, 23, 42, 0.12);
border-radius: 9999px;
font-family: var(--pxl-font-body);
font-size: 0.78rem;
font-weight: 600;
color: var(--pxl-color-fg, #111);
cursor: pointer;
box-shadow: 0 2px 8px rgba(15, 30, 55, 0.12);
}
.pxl-summary__hero-meta {
display: flex;
flex-direction: column;
gap: 0.35rem;
padding: 0 0.25rem;
}
@media (min-width: 720px) {
.pxl-summary__hero-meta { min-width: 200px; padding: 0; }
}
.pxl-summary__brand-name {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--pxl-color-muted);
}
.pxl-summary__stand-name {
font-size: 1.4rem;
font-weight: 700;
line-height: 1.2;
color: var(--pxl-color-fg);
}
.pxl-summary__dims-row {
margin-top: 0.65rem;
padding-top: 0.65rem;
border-top: 1px solid rgba(15,23,42,0.08);
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.pxl-summary__dims-label {
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--pxl-color-muted);
}
.pxl-summary__dims-value {
font-size: 0.95rem;
font-weight: 600;
color: var(--pxl-color-fg);
font-variant-numeric: tabular-nums;
}
.pxl-summary__qr {
margin-top: 0.9rem;
padding-top: 0.85rem;
border-top: 1px solid rgba(15,23,42,0.08);
display: flex;
align-items: center;
gap: 0.85rem;
}
.pxl-summary__qr img {
display: block;
width: 150px;
height: 150px;
background: #fff;
padding: 8px;
border: 1px solid rgba(15,23,42,0.12);
border-radius: 6px;
flex-shrink: 0;
}
.pxl-summary__qr-hint {
font-size: 0.8rem;
font-weight: 500;
color: var(--pxl-color-muted);
line-height: 1.4;
}
/* Mockup-Grid: Bilder des gewählten Designs in ihrem Originalformat (Aspect-Ratio
inline gesetzt). Kleiner als der AR-Hero — Zweck ist Anhängsel/Vorschau, kein Hero. */
.pxl-summary__designs {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(110px, 160px));
gap: 0.6rem;
align-items: start;
justify-content: start;
}
.pxl-summary__design {
border-radius: 8px;
overflow: hidden;
background: var(--pxl-color-surface2, rgba(0,0,0,0.04));
border: 1px solid rgba(15,23,42,0.08);
display: block;
}
.pxl-summary__design img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.pxl-summary__head {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
@media (min-width: 600px) {
.pxl-summary__head { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
}
.pxl-summary__cell {
display: flex;
align-items: center;
gap: 0.85rem;
min-width: 0;
}
.pxl-summary__brand-logo,
.pxl-summary__stand-media {
flex-shrink: 0;
width: 72px;
height: 72px;
border-radius: 10px;
overflow: hidden;
background: var(--pxl-color-surface2, rgba(0,0,0,0.04));
display: flex;
align-items: center;
justify-content: center;
}
.pxl-summary__brand-logo img {
max-width: 80%;
max-height: 80%;
object-fit: contain;
}
.pxl-summary__stand-media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.pxl-summary__cell-text { min-width: 0; }
.pxl-summary__label {
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--pxl-color-muted);
margin-bottom: 0.2rem;
}
.pxl-summary__value {
font-size: 1rem;
font-weight: 600;
color: var(--pxl-color-fg);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pxl-summary__price {
margin-top: 0.15rem;
font-size: 0.95rem;
font-weight: 600;
color: var(--pxl-color-signal);
}
.pxl-summary__designs-wrap {
border-top: 1px solid var(--pxl-glass-border, rgba(0,0,0,0.08));
padding-top: 0.85rem;
}
.pxl-summary__designs {
margin-top: 0.5rem;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.6rem;
}
@media (max-width: 559px) {
.pxl-summary__designs { grid-template-columns: repeat(2, 1fr); }
}
.pxl-summary__design,
.pxl-summary__design-placeholder {
aspect-ratio: 1 / 1;
border-radius: 8px;
overflow: hidden;
background: var(--pxl-color-surface2, rgba(0,0,0,0.04));
}
.pxl-summary__design img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
background: #fff;
}
.pxl-summary__designs-empty {
margin-top: 0.4rem;
font-size: 0.85rem;
color: var(--pxl-color-muted);
}
/* KI-Standdesign: volles Booth-Render über die gesamte Summary-Breite */
.pxl-summary__aishot {
border-top: 1px solid var(--pxl-glass-border, rgba(0,0,0,0.08));
padding-top: 0.85rem;
}
.pxl-summary__aishot-frame {
margin-top: 0.5rem;
width: 100%;
border-radius: 12px;
overflow: hidden;
background: #000;
line-height: 0;
}
.pxl-summary__aishot-img {
width: 100%;
height: auto;
display: block;
}
/* Contact-Action-Row: 3 Buttons (Zurück / Selbst senden / Anfrage senden). */
.pxl-contact-actions {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
justify-content: flex-end;
margin-top: 0.25rem;
}
.pxl-contact-actions .pxl-btn { flex: 0 0 auto; }
@media (max-width: 559px) {
.pxl-contact-actions { flex-direction: column-reverse; }
.pxl-contact-actions .pxl-btn { width: 100%; }
}
.pxl-contact-hint {
margin-top: 0.6rem;
font-size: 0.8rem;
color: var(--pxl-color-muted);
text-align: right;
}
@media (max-width: 559px) {
.pxl-contact-hint { text-align: left; }
}
/* ============================================================
OpenAI Hero-Stage (engine="openai-hero") — neu 2026-05-13
1 großes Hero + 3 Thumbs daneben, WOW-Animation während Wartezeit
============================================================ */
.pxl-render__hero-stage { display: block; width: 100%; margin: 24px 0; }
.pxl-render__hero-stage.is-hidden { display: none; }
.pxl-render__tiles--quad.is-hidden { display: none; }
.pxl-render__hero-frame {
display: flex;
flex-direction: column;
gap: 18px;
align-items: center;
max-width: 920px;
margin: 0 auto;
}
.pxl-render__hero-big-wrap {
width: 100%;
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
}
.pxl-render__hero-big-label {
font-size: 13px;
font-weight: 500;
letter-spacing: 0.04em;
color: rgba(20, 30, 40, 0.65);
text-transform: uppercase;
}
.pxl-render__hero-big {
position: relative;
aspect-ratio: 3 / 2;
width: 100%;
max-width: 880px;
border-radius: 14px;
overflow: hidden;
background: #0f1419;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28), 0 0 60px rgba(var(--pxl-acc2b-rgb), 0.08);
}
/* Verschwommenes Original-Stand-Foto als Background während Wartezeit —
"wir bearbeiten DEINEN Stand" Atmosphäre */
.pxl-render__hero-standphoto {
position: absolute; inset: 0;
background-size: cover;
background-position: center;
filter: blur(22px) saturate(0.85) brightness(0.55);
opacity: 0;
transform: scale(1.12);
animation: pxl-hero-standphoto-pulse 6.5s ease-in-out infinite;
}
.pxl-render__hero-standphoto.has-image { opacity: 1; }
@keyframes pxl-hero-standphoto-pulse {
0%, 100% { opacity: 0.65; transform: scale(1.12); }
50% { opacity: 0.95; transform: scale(1.18); }
}
.pxl-render__hero-img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
transition: opacity 420ms ease;
}
/* Skeleton mit Leuchtkasten-Shimmer (Brand-türkis Glow) */
.pxl-render__hero-skeleton {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
background: radial-gradient(ellipse at center, #1a2632 0%, #0a0e14 75%);
transition: opacity 600ms ease;
}
.pxl-render__hero-skeleton.is-faded { opacity: 0; pointer-events: none; }
.pxl-render__hero-shimmer {
position: absolute; inset: 0;
background: linear-gradient(
100deg,
transparent 30%,
rgba(var(--pxl-acc2b-rgb), 0.18) 45%,
rgba(0, 220, 235, 0.28) 50%,
rgba(var(--pxl-acc2b-rgb), 0.18) 55%,
transparent 70%
);
background-size: 200% 100%;
animation: pxl-hero-shimmer 2200ms ease-in-out infinite;
}
@keyframes pxl-hero-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -100% 0; }
}
.pxl-render__hero-statustext {
position: relative;
z-index: 2;
color: rgba(255, 255, 255, 0.92);
font-size: 15px;
font-weight: 500;
letter-spacing: 0.01em;
padding: 10px 22px;
border-radius: 999px;
background: rgba(0, 0, 0, 0.32);
backdrop-filter: blur(6px);
transition: opacity 280ms ease;
}
/* Thumbs darunter horizontal */
.pxl-render__hero-thumbs {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
width: 100%;
max-width: 880px;
}
@media (max-width: 559px) {
.pxl-render__hero-thumbs { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}
.pxl-render__hero-thumb {
appearance: none;
border: 2px solid transparent;
background: transparent;
border-radius: 10px;
padding: 4px;
cursor: pointer;
text-align: left;
transition: border-color 200ms ease, transform 200ms ease, opacity 400ms ease;
opacity: 0.55;
transform: translateY(8px) scale(0.97);
}
.pxl-render__hero-thumb:disabled { cursor: default; }
.pxl-render__hero-thumb.is-revealed {
opacity: 1;
transform: translateY(0) scale(1);
}
.pxl-render__hero-thumb.is-ready:hover { border-color: rgba(var(--pxl-acc2b-rgb), 0.6); }
.pxl-render__hero-thumb.is-active {
border-color: var(--pxl-acc2b);
box-shadow: 0 0 0 4px rgba(var(--pxl-acc2b-rgb), 0.18);
}
.pxl-render__hero-thumb.is-failed { opacity: 0.4; }
.pxl-render__hero-thumb-inner {
position: relative;
aspect-ratio: 3 / 2;
border-radius: 7px;
overflow: hidden;
background: #0f1419;
width: 100%;
}
.pxl-render__hero-thumb-skeleton {
position: absolute; inset: 0;
background: linear-gradient(135deg, #1a2632, #0a0e14);
overflow: hidden;
}
.pxl-render__hero-thumb-img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
}
.pxl-render__hero-thumb-label {
display: block;
margin-top: 6px;
font-size: 12px;
color: rgba(255, 255, 255, 0.7);
font-weight: 500;
letter-spacing: 0.02em;
}
.pxl-render__hero-thumb-failed {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
color: #e26b6b;
font-size: 12px;
font-weight: 500;
}
/* ============================================================
Style-Options Screen (Sprache + Bildsprache + Logo-Gewicht)
neu 2026-05-14 — zwischen brand-customize und stand-selection
============================================================ */
.pxl-style-options {
display: flex;
flex-direction: column;
gap: 28px;
max-width: 720px;
margin: 0 auto;
padding: 8px 0 24px;
}
.pxl-style-group { display: flex; flex-direction: column; gap: 8px; }
.pxl-style-group__label {
font-size: 1.05rem;
font-weight: 700;
letter-spacing: 0.01em;
color: var(--pxl-color-fg);
}
.pxl-style-group__hint {
font-size: 0.85rem;
color: var(--pxl-color-muted);
margin-bottom: 4px;
}
.pxl-style-group__options {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 10px;
}
.pxl-style-chip {
appearance: none;
background: rgba(0, 0, 0, 0.03);
border: 2px solid rgba(0, 0, 0, 0.12);
border-radius: 10px;
padding: 12px 14px;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
text-align: left;
font-family: inherit;
color: var(--pxl-color-fg);
transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}
.pxl-style-chip:hover {
border-color: rgba(var(--pxl-acc2b-rgb), 0.45);
background: rgba(var(--pxl-acc2b-rgb), 0.04);
}
.pxl-style-chip.is-selected {
border-color: var(--pxl-acc2b);
background: rgba(var(--pxl-acc2b-rgb), 0.10);
box-shadow: 0 0 0 3px rgba(var(--pxl-acc2b-rgb), 0.14);
}
.pxl-style-chip__label {
font-size: 0.95rem;
font-weight: 600;
letter-spacing: 0.01em;
}
.pxl-style-chip__sub {
font-size: 0.75rem;
color: var(--pxl-color-muted);
font-weight: 500;
}
.pxl-style-options__footer {
display: flex;
justify-content: space-between;
gap: 10px;
margin-top: 12px;
}
/* ════════════════════════════════════════════════════════════════
PIXLIP *LUMEN EDITORIAL* v9 — 2026-05-22 nachts
Komplettes Redesign. Hero-Screen (data-screen="hero") NICHT betroffen.
Premium, modern, subtile Aurora-Color-Fields, große Hero-Bilder fluide.
════════════════════════════════════════════════════════════════ */
/* ── Body Baseline ─────────────────────────────────────────────── */
.pixlip-configurator {
font-family: var(--pxl-font-body);
font-weight: 400;
color: var(--pxl-graphite);
background: var(--pxl-canvas);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
letter-spacing: 0;
}
/* ── Aurora-Color-Field als Background (für Non-Hero-Screens) ───── */
.pixlip-configurator section[data-screen]:not([data-screen="hero"]) {
position: relative;
background: var(--pxl-aurora-cool);
min-height: 100vh;
}
.pixlip-configurator section[data-screen]:not([data-screen="hero"])::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 20% 10%, rgba(var(--pxl-acc1-rgb), 0.06) 0%, transparent 45%),
radial-gradient(circle at 80% 80%, rgba(var(--pxl-acc2-rgb), 0.05) 0%, transparent 45%);
pointer-events: none;
z-index: 0;
}
.pixlip-configurator section[data-screen]:not([data-screen="hero"]) > * {
position: relative;
z-index: 1;
}
/* ── Headlines — Geist Display, klar, modern ───────────────────── */
.pixlip-configurator h1,
.pixlip-configurator h2,
.pixlip-configurator h3,
.pixlip-configurator h4 {
font-family: var(--pxl-font-display);
color: var(--pxl-ink);
margin: 0;
letter-spacing: -0.025em;
line-height: 1.04;
}
.pixlip-configurator h1 { font-weight: 700; font-size: clamp(34px, 4.5vw, 60px); }
.pixlip-configurator h2 { font-weight: 700; font-size: clamp(28px, 3.6vw, 44px); }
.pixlip-configurator h3 { font-weight: 600; font-size: clamp(22px, 2.8vw, 30px); letter-spacing: -0.02em; }
.pixlip-configurator h4 { font-weight: 600; font-size: 20px; letter-spacing: -0.015em; }
.pixlip-configurator p {
color: var(--pxl-slate);
line-height: 1.55;
margin: 0;
}
/* Eyebrow */
.pixlip-configurator .pxl-eyebrow,
.pixlip-configurator [data-role="render-phase-label"],
.pixlip-configurator [data-role="render-eta"],
.pixlip-configurator [data-role="hero-phase"],
.pixlip-configurator [data-role="hero-eta"] {
font-family: var(--pxl-font-body);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--pxl-slate);
}
/* Mono */
.pixlip-configurator [data-role="render-percent"],
.pixlip-configurator .pxl-mono {
font-family: var(--pxl-font-mono);
font-weight: 500;
font-feature-settings: "tnum";
letter-spacing: 0.02em;
color: var(--pxl-graphite);
}
/* ── Buttons — modern, glow on hover, subtle gradient ──────────── */
.pixlip-configurator .pxl-btn {
font-family: var(--pxl-font-body);
font-weight: 600;
font-size: 14px;
letter-spacing: 0;
text-transform: none;
height: 48px;
padding: 0 22px;
border-radius: 10px !important;
border: 1px solid transparent;
background: var(--pxl-ink);
color: var(--pxl-canvas);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
cursor: pointer;
text-decoration: none;
white-space: nowrap;
position: relative;
transition:
background var(--pxl-dur-fast) var(--pxl-ease),
color var(--pxl-dur-fast) var(--pxl-ease),
border-color var(--pxl-dur-fast) var(--pxl-ease),
box-shadow var(--pxl-dur-base) var(--pxl-ease),
transform var(--pxl-dur-fast) var(--pxl-ease);
}
.pixlip-configurator .pxl-btn:hover { transform: translateY(-1px); }
.pixlip-configurator .pxl-btn:active { transform: translateY(0); }
.pixlip-configurator .pxl-btn:disabled,
.pixlip-configurator .pxl-btn[disabled] {
opacity: 0.45; cursor: not-allowed; transform: none !important; box-shadow: none !important;
}
/* Primary — Pixlip-Blau mit subtler Tiefe + Glow */
.pixlip-configurator .pxl-btn--primary,
.pixlip-configurator .pxl-btn--signal {
background: linear-gradient(180deg, var(--pxl-accent-lite) 0%, var(--pxl-accent) 100%);
color: #FFFFFF;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.18) inset,
0 1px 2px rgba(14, 17, 22, 0.10),
0 8px 20px -10px rgba(var(--pxl-acc1-rgb), 0.55);
}
.pixlip-configurator .pxl-btn--primary:hover,
.pixlip-configurator .pxl-btn--signal:hover {
background: linear-gradient(180deg, var(--pxl-accent) 0%, var(--pxl-accent-deep) 100%);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.22) inset,
0 2px 4px rgba(14, 17, 22, 0.12),
0 14px 28px -10px rgba(var(--pxl-acc1-rgb), 0.65);
}
/* Secondary — solid Ink */
.pixlip-configurator .pxl-btn--secondary {
background: var(--pxl-ink);
color: var(--pxl-canvas);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.10) inset,
0 6px 16px -8px rgba(14, 17, 22, 0.45);
}
.pixlip-configurator .pxl-btn--secondary:hover {
background: var(--pxl-graphite);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.14) inset,
0 10px 22px -8px rgba(14, 17, 22, 0.55);
}
/* Outlined — transparent mit Pixlip-Blau-Border + Blau-Text.
Für Secondary-CTAs, die thematisch nah am Primary stehen, aber visuell
eine Stufe darunter. Z.B. „AR ansehen" neben „Anfrage senden". */
.pixlip-configurator .pxl-btn--outlined {
background: transparent;
color: var(--pxl-accent);
border: 1.5px solid var(--pxl-accent);
box-shadow: none;
}
.pixlip-configurator .pxl-btn--outlined:hover:not(:disabled) {
background: var(--pxl-accent-soft);
border-color: var(--pxl-accent-deep);
color: var(--pxl-accent-deep);
}
.pixlip-configurator .pxl-btn--outlined:active:not(:disabled) {
background: var(--pxl-accent-soft);
transform: translateY(0);
}
.pixlip-configurator .pxl-btn--outlined:disabled {
opacity: 0.4;
}
/* Ghost — Hairline */
.pixlip-configurator .pxl-btn--ghost {
background: var(--pxl-paper);
color: var(--pxl-graphite);
border: 1px solid var(--pxl-hairline);
}
.pixlip-configurator .pxl-btn--ghost:hover {
border-color: var(--pxl-ink);
color: var(--pxl-ink);
background: #FFFFFF;
}
.pixlip-configurator .pxl-btn--lg { height: 56px; padding: 0 28px; font-size: 15px; }
.pixlip-configurator .pxl-btn--sm { height: 40px; padding: 0 16px; font-size: 13px; }
.pixlip-configurator .pxl-btn:focus-visible {
outline: 2px solid var(--pxl-accent);
outline-offset: 3px;
}
/* ── Stages — fluide Container, generous padding ───────────────── */
.pixlip-configurator section[data-screen]:not([data-screen="hero"]) .pxl-main {
max-width: min(1480px, 96vw);
margin: 0 auto;
padding: clamp(40px, 6vh, 80px) clamp(20px, 4vw, 64px);
}
/* Tight-Rail */
.pixlip-configurator section[data-screen="contact"] .pxl-main,
.pixlip-configurator section[data-screen="success"] .pxl-main,
.pixlip-configurator section[data-screen="style-options"] .pxl-main,
.pixlip-configurator section[data-screen="brand-customize"] .pxl-main {
max-width: min(820px, 94vw);
}
/* Screen-Header */
.pixlip-configurator .pxl-screen-header {
max-width: 100%;
margin: 0 0 clamp(32px, 5vh, 56px) 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.pixlip-configurator .pxl-screen-header h2 {
margin: 0;
font-family: var(--pxl-font-display);
font-weight: 700;
font-size: clamp(30px, 3.8vw, 52px);
letter-spacing: -0.03em;
line-height: 1.0;
color: var(--pxl-ink);
}
.pixlip-configurator .pxl-screen-header p {
font-size: clamp(15px, 1.15vw, 17px);
font-weight: 400;
line-height: 1.55;
color: var(--pxl-slate);
max-width: 62ch;
}
/* ── Inputs ────────────────────────────────────────────────────── */
.pixlip-configurator input[type="text"],
.pixlip-configurator input[type="email"],
.pixlip-configurator input[type="tel"],
.pixlip-configurator input[type="url"],
.pixlip-configurator textarea {
font-family: var(--pxl-font-body);
font-size: 16px;
font-weight: 400;
color: var(--pxl-ink);
background: var(--pxl-paper);
border: 1px solid var(--pxl-hairline);
border-radius: 10px;
padding: 14px 18px;
width: 100%;
outline: none;
transition: border-color var(--pxl-dur-base) var(--pxl-ease), box-shadow var(--pxl-dur-base) var(--pxl-ease);
}
.pixlip-configurator input[type="text"]:focus,
.pixlip-configurator input[type="email"]:focus,
.pixlip-configurator input[type="tel"]:focus,
.pixlip-configurator input[type="url"]:focus,
.pixlip-configurator textarea:focus {
border-color: var(--pxl-accent);
box-shadow: 0 0 0 4px rgba(var(--pxl-acc1-rgb), 0.12);
}
.pixlip-configurator input::placeholder { color: var(--pxl-mist); }
/* ── Card (universal) ──────────────────────────────────────────── */
.pixlip-configurator .pxl-card,
.pixlip-configurator .pxl-stand-card,
.pixlip-configurator .pxl-insight-card {
background: linear-gradient(170deg, #FFFFFF 0%, var(--pxl-paper) 100%);
border: 1px solid var(--pxl-hairline);
border-radius: 16px !important;
box-shadow:
0 1px 2px rgba(14, 17, 22, 0.04),
0 1px 1px rgba(14, 17, 22, 0.04);
overflow: hidden;
transition:
transform var(--pxl-dur-base) var(--pxl-ease),
box-shadow var(--pxl-dur-base) var(--pxl-ease),
border-color var(--pxl-dur-base) var(--pxl-ease);
}
.pixlip-configurator .pxl-card:hover,
.pixlip-configurator .pxl-stand-card:hover {
transform: translateY(-3px);
box-shadow:
0 1px 2px rgba(14, 17, 22, 0.04),
0 8px 24px -8px rgba(14, 17, 22, 0.18);
border-color: rgba(var(--pxl-acc1-rgb), 0.4);
}
/* ── Selection ─────────────────────────────────────────────────── */
.pixlip-configurator section[data-screen="selection"] .pxl-screen-header {
text-align: center;
align-items: center;
}
.pixlip-configurator section[data-screen="selection"] .pxl-screen-header p {
margin: 0 auto;
max-width: 56ch;
}
.pixlip-configurator section[data-screen="selection"] .pxl-stands-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 20px;
}
@media (min-width: 1024px) {
.pixlip-configurator section[data-screen="selection"] .pxl-stands-grid {
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
}
.pixlip-configurator .pxl-stand-card {
padding: 0;
cursor: pointer;
text-align: left;
position: relative;
}
.pixlip-configurator .pxl-stand-card.is-selected {
border-color: var(--pxl-accent) !important;
box-shadow:
0 0 0 1px var(--pxl-accent),
0 1px 2px rgba(14, 17, 22, 0.06),
0 12px 28px -8px rgba(var(--pxl-acc1-rgb), 0.30) !important;
}
.pixlip-configurator .pxl-stand-card__img,
.pixlip-configurator .pxl-stand-card__photo-plate {
width: 100%;
aspect-ratio: 16 / 11;
object-fit: cover;
display: block;
background: var(--pxl-platinum);
border-radius: 16px 16px 0 0;
transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.pixlip-configurator .pxl-stand-card:hover .pxl-stand-card__img,
.pixlip-configurator .pxl-stand-card:hover .pxl-stand-card__photo-plate {
transform: scale(1.03);
}
.pixlip-configurator .pxl-stand-card__body {
padding: 20px 22px 22px;
display: flex;
flex-direction: column;
gap: 6px;
}
.pixlip-configurator .pxl-stand-card__code,
.pixlip-configurator .pxl-stand-card__pretitle {
font-family: var(--pxl-font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.08em;
color: var(--pxl-slate);
text-transform: uppercase;
}
.pixlip-configurator .pxl-stand-card__name,
.pixlip-configurator .pxl-stand-card__title {
font-family: var(--pxl-font-display);
font-weight: 600;
font-size: 22px;
line-height: 1.15;
color: var(--pxl-ink);
letter-spacing: -0.015em;
margin: 0;
}
.pixlip-configurator .pxl-stand-card__meta,
.pixlip-configurator .pxl-stand-card__dim {
font-family: var(--pxl-font-mono);
font-size: 11px;
letter-spacing: 0.04em;
color: var(--pxl-mist);
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: 6px;
}
.pixlip-configurator .pxl-stand-card__price {
font-family: var(--pxl-font-display);
font-weight: 600;
font-size: 16px;
color: var(--pxl-ink);
margin-top: 10px;
padding-top: 12px;
border-top: 1px solid var(--pxl-hairline-soft);
letter-spacing: -0.01em;
}
/* Selection Footer */
.pixlip-configurator .pxl-selection-footer,
.pixlip-configurator .pxl-selection__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: clamp(28px, 4vh, 48px);
padding-top: 20px;
border-top: 1px solid var(--pxl-hairline);
flex-wrap: wrap;
}
.pixlip-configurator .pxl-selection-footer__label,
.pixlip-configurator .pxl-selection__footer-info {
font-family: var(--pxl-font-body);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--pxl-slate);
}
/* ── Render Screen — Hero dominiert, fluide ────────────────────── */
.pixlip-configurator section[data-screen="render"] .pxl-main {
max-width: min(1480px, 96vw);
}
/* alte Progress-Card komplett weg */
.pixlip-configurator .pxl-render__progress {
display: none !important;
}
/* Legacy-Quad weg */
.pixlip-configurator .pxl-render__tiles--quad {
display: none !important;
}
/* Hero-Frame: Grid mit großem Hero + Thumbs rechts (Desktop) */
.pixlip-configurator .pxl-render__hero-stage {
width: 100%;
}
.pixlip-configurator .pxl-render__hero-frame {
display: flex;
flex-direction: column;
gap: 14px;
}
@media (min-width: 980px) {
.pixlip-configurator .pxl-render__hero-frame {
display: grid;
grid-template-columns: minmax(0, 1fr) clamp(240px, 22%, 320px);
gap: clamp(20px, 2.5vw, 36px);
align-items: start;
}
}
/* Meta-Zeile (Phase + ETA) — dezent, oberhalb des Hero */
.pixlip-configurator .pxl-render__hero-meta {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
margin-bottom: 12px;
width: 100%;
}
@media (min-width: 980px) {
.pixlip-configurator .pxl-render__hero-meta {
grid-column: 1 / -1;
}
}
.pixlip-configurator .pxl-render__hero-eyebrow {
font-family: var(--pxl-font-body);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--pxl-slate);
display: inline-flex;
align-items: center;
gap: 10px;
}
.pixlip-configurator .pxl-render__hero-eyebrow::before {
content: "";
display: inline-block;
width: 6px;
height: 6px;
background: var(--pxl-accent);
border-radius: 50%;
box-shadow: 0 0 8px var(--pxl-accent);
animation: pxl-dot-pulse 1.6s ease-in-out infinite;
}
@keyframes pxl-dot-pulse {
0%, 100% { opacity: 0.55; transform: scale(0.85); }
50% { opacity: 1; transform: scale(1.15); }
}
.pixlip-configurator .pxl-render__hero-eta-inline {
font-family: var(--pxl-font-mono);
font-size: 12px;
font-feature-settings: "tnum";
color: var(--pxl-mist);
text-transform: none;
letter-spacing: 0.02em;
}
/* Hero-Big — möglichst groß, fluide */
.pixlip-configurator .pxl-render__hero-big-wrap {
width: 100%;
max-width: 100%;
}
@media (min-width: 980px) {
.pixlip-configurator .pxl-render__hero-big-wrap {
grid-column: 1;
grid-row: 2;
}
}
.pixlip-configurator .pxl-render__hero-big {
position: relative;
aspect-ratio: 16 / 10;
background: linear-gradient(165deg, #1C2737 0%, #0E1116 100%);
border: 1px solid var(--pxl-hairline);
border-radius: 18px !important;
overflow: hidden;
box-shadow:
0 2px 4px rgba(14, 17, 22, 0.06),
0 24px 60px -20px rgba(14, 17, 22, 0.28);
}
.pixlip-configurator .pxl-render__hero-big[role="button"] {
cursor: pointer;
transition: box-shadow var(--pxl-dur-base) var(--pxl-ease), transform var(--pxl-dur-base) var(--pxl-ease);
}
.pixlip-configurator .pxl-render__hero-big[role="button"]:hover {
transform: translateY(-3px);
box-shadow:
0 2px 4px rgba(14, 17, 22, 0.06),
0 32px 80px -20px rgba(14, 17, 22, 0.36);
}
.pixlip-configurator .pxl-render__hero-big[role="button"]:focus { outline: none; }
.pixlip-configurator .pxl-render__hero-big[role="button"]:focus-visible {
outline: none;
box-shadow:
0 2px 4px rgba(14, 17, 22, 0.06),
0 24px 60px -20px rgba(14, 17, 22, 0.28),
0 0 0 2px rgba(var(--pxl-acc1-rgb), 0.55);
}
.pixlip-configurator .pxl-render__hero-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Skeleton + Spinner + Status */
.pixlip-configurator .pxl-render__hero-skeleton {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(165deg, #1C2737 0%, #0E1116 100%);
transition: opacity 0.5s var(--pxl-ease);
}
.pixlip-configurator .pxl-render__hero-skeleton.is-faded { opacity: 0; pointer-events: none; }
.pixlip-configurator .pxl-render__hero-standphoto {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
filter: blur(28px) saturate(0.6) brightness(0.55);
opacity: 0;
transition: opacity 0.6s var(--pxl-ease);
}
.pixlip-configurator .pxl-render__hero-standphoto.has-image { opacity: 0.6; }
.pixlip-configurator .pxl-render__hero-shimmer {
position: absolute;
inset: 0;
background: linear-gradient(100deg,
transparent 0%,
transparent 35%,
rgba(255, 255, 255, 0.08) 50%,
transparent 65%,
transparent 100%);
background-size: 200% 100%;
animation: pxl-shimmer 2.2s ease-in-out infinite;
}
.pixlip-configurator .pxl-render__hero-pulse {
position: relative;
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 24px;
pointer-events: none;
}
/* Spinner — Pixlip-Blau, leuchtend, groß */
.pixlip-configurator .pxl-render__hero-spinner {
display: block;
width: 120px;
height: 120px;
color: var(--pxl-accent);
filter:
drop-shadow(0 0 12px rgba(var(--pxl-acc1-rgb), 0.6))
drop-shadow(0 0 36px rgba(var(--pxl-acc1-rgb), 0.35));
animation: pxl-hero-spin 1.4s cubic-bezier(0.55, 0.05, 0.45, 0.95) infinite;
}
.pixlip-configurator .pxl-render__hero-spinner circle {
stroke: currentColor;
stroke-width: 4;
stroke-linecap: round;
stroke-dasharray: 80 280;
fill: none;
}
@keyframes pxl-hero-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Lightbox-Bars-Spinner deaktiviert (Markup-Backwards-Kompatibilität) */
.pixlip-configurator .pxl-lightbox-spinner { display: none !important; }
/* Status-Text — eine einzelne Pill, klar lesbar */
.pixlip-configurator .pxl-render__hero-statustext {
font-family: var(--pxl-font-display);
font-size: 15px;
font-weight: 500;
letter-spacing: -0.005em;
color: #FFFFFF;
background: rgba(255, 255, 255, 0.10);
backdrop-filter: blur(20px) saturate(140%);
-webkit-backdrop-filter: blur(20px) saturate(140%);
border: 1px solid rgba(255, 255, 255, 0.18);
padding: 10px 22px;
border-radius: 999px;
text-align: center;
max-width: 80%;
transition: opacity 0.4s var(--pxl-ease);
}
/* Hero-Label unter dem Bild */
.pixlip-configurator .pxl-render__hero-big-label {
font-family: var(--pxl-font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--pxl-slate);
margin-top: 14px;
}
@media (min-width: 980px) {
.pixlip-configurator .pxl-render__hero-big-label {
grid-column: 1;
grid-row: 3;
}
}
/* Thumbs — vertikal rechts auf Desktop, horizontal auf Mobile */
.pixlip-configurator .pxl-render__hero-thumbs {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
width: 100%;
margin-top: 8px;
}
@media (min-width: 980px) {
.pixlip-configurator .pxl-render__hero-thumbs {
grid-column: 2;
grid-row: 2 / span 2;
grid-template-columns: 1fr;
gap: 14px;
margin-top: 0;
}
}
.pixlip-configurator .pxl-render__hero-thumb {
position: relative;
background: var(--pxl-paper);
border: 1px solid var(--pxl-hairline);
border-radius: 14px !important;
padding: 0;
cursor: pointer;
display: flex;
flex-direction: column;
text-align: left;
font-family: var(--pxl-font-body);
overflow: hidden;
opacity: 0;
transition:
transform var(--pxl-dur-base) var(--pxl-ease),
border-color var(--pxl-dur-base) var(--pxl-ease),
box-shadow var(--pxl-dur-base) var(--pxl-ease),
opacity var(--pxl-dur-slow) var(--pxl-ease);
}
.pixlip-configurator .pxl-render__hero-thumb.is-revealed { opacity: 1; }
.pixlip-configurator .pxl-render__hero-thumb:not([disabled]):hover {
transform: translateY(-2px);
border-color: rgba(var(--pxl-acc1-rgb), 0.4);
box-shadow: 0 12px 28px -10px rgba(14, 17, 22, 0.20);
}
.pixlip-configurator .pxl-render__hero-thumb.is-active {
border-color: var(--pxl-accent) !important;
box-shadow:
0 0 0 1px var(--pxl-accent),
0 12px 28px -10px rgba(var(--pxl-acc1-rgb), 0.45);
}
.pixlip-configurator .pxl-render__hero-thumb[disabled] {
cursor: not-allowed; opacity: 1;
}
.pixlip-configurator .pxl-render__hero-thumb-inner {
position: relative;
width: 100%;
aspect-ratio: 16 / 10;
background: var(--pxl-platinum);
overflow: hidden;
}
.pixlip-configurator .pxl-render__hero-thumb-skeleton {
position: absolute; inset: 0; background: var(--pxl-platinum);
}
.pixlip-configurator .pxl-render__hero-thumb-img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
.pixlip-configurator .pxl-render__hero-thumb-label {
display: block;
padding: 10px 14px;
font-family: var(--pxl-font-body);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--pxl-slate);
}
.pixlip-configurator .pxl-render__hero-thumb.is-active .pxl-render__hero-thumb-label {
/* Studio-Dark: Label sitzt als Overlay auf dunklem Verlauf — auch im aktiven
Zustand HELL lassen (vorher var(--pxl-ink) = schwarz, unleserlich). */
color: rgba(246, 244, 238, 0.98) !important;
}
.pixlip-configurator .pxl-render__hero-thumb-failed {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
font-family: var(--pxl-font-mono);
font-size: 12px;
color: var(--pxl-error);
}
/* ============================================================
Konzept-Layout 67.jpg (v2): Featured-Karte + 2 kleine Karten mit
Bild-in-Karte-VERLAUF (Maske), dunklem Karten-Gradient, Ergebnis-Divider
und Mobile-Stapelung. Überschreibt das frühere Hero+Thumbs-Grid.
============================================================ */
.pixlip-configurator .pxl-render__hero-frame { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 980px) {
.pixlip-configurator .pxl-render__hero-frame { display: flex; grid-template-columns: none; }
}
/* Ergebnis-Divider ("Sie können die Ergebnisse hier ansehen …") */
.pixlip-configurator .pxl-render__results-divider {
display: flex; align-items: center; gap: 16px; width: 100%; margin: 2px 0 4px;
}
.pixlip-configurator .pxl-render__results-divider-line {
flex: 1; height: 1px;
background: linear-gradient(90deg, transparent, rgba(246, 244, 238, 0.16), transparent);
}
.pixlip-configurator .pxl-render__results-divider-text {
display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0;
font: 400 13.5px var(--pxl-font-body); color: rgba(246, 244, 238, 0.55); text-align: center;
}
.pixlip-configurator .pxl-render__results-divider-text svg { color: rgba(246, 244, 238, 0.42); flex-shrink: 0; }
.pixlip-configurator .pxl-render__results-divider-link { color: rgba(246, 244, 238, 0.8); font-weight: 500; }
@media (max-width: 640px) {
.pixlip-configurator .pxl-render__results-divider { gap: 10px; }
.pixlip-configurator .pxl-render__results-divider-text { font-size: 12px; }
.pixlip-configurator .pxl-render__results-divider-line:first-child { display: none; }
}
/* ---- Featured-Karte: dunkler Verlauf, Bild rechts blendet links in die Karte ---- */
.pixlip-configurator .pxl-render__hero-big-wrap {
position: relative;
display: flex;
flex-direction: column-reverse; /* Mobile: Bild oben, Text unten */
width: 100%; max-width: 100%;
border: 1px solid var(--pxl-hairline);
border-radius: 20px;
overflow: hidden;
padding: 0; gap: 0;
background:
radial-gradient(130% 130% at 14% 22%, rgba(var(--pxl-acc2-rgb), 0.10) 0%, transparent 52%),
linear-gradient(140deg, #1b2433 0%, #0e1117 60%);
}
@media (min-width: 860px) {
.pixlip-configurator .pxl-render__hero-big-wrap { flex-direction: row; align-items: stretch; min-height: 248px; }
}
.pixlip-configurator .pxl-render__feat-panel {
position: relative; z-index: 2;
display: flex; flex-direction: column; justify-content: center; gap: 12px;
min-width: 0;
padding: 24px 22px;
}
@media (min-width: 860px) {
.pixlip-configurator .pxl-render__feat-panel { flex: 0 0 44%; padding: 32px 6px 32px 34px; }
}
.pixlip-configurator .pxl-render__feat-badge {
display: none; align-items: center; gap: 6px; align-self: flex-start;
padding: 5px 12px; border-radius: 999px;
background: rgba(var(--pxl-acc2-rgb), 0.16);
border: 1px solid rgba(var(--pxl-acc2-rgb), 0.34);
color: var(--pxl-accent-2); font: 700 10px var(--pxl-font-body);
text-transform: uppercase; letter-spacing: 0.09em;
}
.pixlip-configurator .pxl-render__feat-badge.is-shown { display: inline-flex; }
.pixlip-configurator .pxl-render__feat-badge svg { flex-shrink: 0; }
.pixlip-configurator .pxl-render__feat-panel .pxl-render__hero-big-label {
display: block !important;
margin: 0; font: 600 27px/1.14 var(--pxl-font-display);
letter-spacing: -0.02em; text-transform: none; color: var(--pxl-inverse-ink);
}
.pixlip-configurator .pxl-render__feat-desc {
margin: 0; font: 400 14.5px/1.5 var(--pxl-font-body); color: rgba(246, 244, 238, 0.64); max-width: 32ch;
}
.pixlip-configurator .pxl-render__feat-go {
align-self: flex-start; margin-top: 6px;
display: inline-flex; align-items: center; gap: 9px;
padding: 11px 20px; border-radius: 999px;
border: 1px solid rgba(246, 244, 238, 0.24);
background: rgba(255, 255, 255, 0.03);
color: var(--pxl-inverse-ink); font: 600 13.5px var(--pxl-font-body); cursor: pointer;
transition: border-color 160ms var(--pxl-ease), background 160ms var(--pxl-ease), transform 160ms var(--pxl-ease);
}
.pixlip-configurator .pxl-render__feat-go svg { flex-shrink: 0; }
.pixlip-configurator .pxl-render__feat-go:hover { border-color: var(--pxl-accent-2); background: rgba(255, 255, 255, 0.08); transform: translateX(2px); }
.pixlip-configurator .pxl-render__feat-go.is-hidden { display: none; }
/* Bild: transparenter Hintergrund + Maske → blendet in den Karten-Gradient */
.pixlip-configurator .pxl-render__hero-big-wrap .pxl-render__hero-big {
position: relative; z-index: 1;
margin: 0; width: 100%;
border: none !important; border-radius: 0 !important;
background: transparent;
aspect-ratio: 16 / 10;
-webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
}
@media (min-width: 860px) {
.pixlip-configurator .pxl-render__hero-big-wrap .pxl-render__hero-big {
flex: 1 1 auto; aspect-ratio: auto; align-self: stretch;
margin-left: -13%; /* schiebt unter das Panel */
-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 28%);
mask-image: linear-gradient(to right, transparent 0%, #000 28%);
}
}
/* ---- Kleine Konzept-Karten (2 nebeneinander), Bild blendet links in die Karte ---- */
.pixlip-configurator .pxl-render__hero-thumbs {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; width: 100%; margin-top: 0;
}
@media (min-width: 980px) {
.pixlip-configurator .pxl-render__hero-thumbs { grid-template-columns: repeat(2, 1fr); grid-column: auto; grid-row: auto; }
}
@media (max-width: 560px) {
.pixlip-configurator .pxl-render__hero-thumbs { grid-template-columns: 1fr; }
}
.pixlip-configurator .pxl-render__hero-thumb.is-active { display: none; }
.pixlip-configurator .pxl-render__hero-thumb {
position: relative;
flex-direction: row; align-items: stretch;
gap: 0; padding: 0;
border: 1px solid var(--pxl-hairline);
border-radius: 14px !important; overflow: hidden;
background: linear-gradient(140deg, #1a2230 0%, #0e1117 64%);
min-height: 132px;
}
.pixlip-configurator .pxl-render__hero-thumb-text {
position: relative; z-index: 2;
display: flex; flex-direction: column; gap: 5px;
flex: 0 0 58%; min-width: 0;
padding: 16px 4px 38px 18px;
}
.pixlip-configurator .pxl-render__hero-thumb .pxl-render__hero-thumb-label {
padding: 0; font: 600 16px var(--pxl-font-display); letter-spacing: -0.01em;
text-transform: none; color: var(--pxl-inverse-ink);
}
.pixlip-configurator .pxl-render__hero-thumb-desc {
font: 400 12px/1.4 var(--pxl-font-body); color: rgba(246, 244, 238, 0.5);
}
.pixlip-configurator .pxl-render__hero-thumb .pxl-render__hero-thumb-inner {
position: relative; z-index: 1;
flex: 1 1 auto; width: auto; aspect-ratio: auto;
margin-left: -12%; border-radius: 0;
-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 32%);
mask-image: linear-gradient(to right, transparent 0%, #000 32%);
}
.pixlip-configurator .pxl-render__hero-thumb-arrow {
position: absolute; left: 18px; bottom: 14px; z-index: 3;
color: rgba(246, 244, 238, 0.75);
}
/* Render-Footer-Bar — solider Paper-Stripe statt Gradient */
.pixlip-configurator .pxl-render__footer-bar {
max-width: min(1480px, 96vw);
margin: clamp(32px, 5vh, 56px) auto 0;
padding: 18px clamp(20px, 4vw, 36px) max(20px, env(safe-area-inset-bottom));
background: var(--pxl-paper);
border: 1px solid var(--pxl-hairline);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
box-shadow:
0 1px 2px rgba(14, 17, 22, 0.04),
0 20px 40px -20px rgba(14, 17, 22, 0.18);
}
.pixlip-configurator .pxl-render__footer-hint {
font-family: var(--pxl-font-display);
font-size: 16px;
font-weight: 500;
letter-spacing: -0.01em;
color: var(--pxl-ink);
}
.pixlip-configurator .pxl-render__footer-hint.is-ready::before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
background: var(--pxl-accent);
border-radius: 50%;
margin-right: 10px;
box-shadow: 0 0 8px var(--pxl-accent);
vertical-align: middle;
}
.pixlip-configurator .pxl-render__footer-btns {
display: flex; gap: 12px;
}
/* ── Detail-Screen — großes Hero, Panel rechts ────────────────── */
.pixlip-configurator section[data-screen="detail"] {
background: var(--pxl-aurora-warm);
}
.pixlip-configurator section[data-screen="detail"] .pxl-detail {
max-width: min(1560px, 97vw);
margin: 0 auto;
padding: clamp(40px, 6vh, 80px) clamp(20px, 4vw, 64px);
display: grid;
grid-template-columns: minmax(0, 2.4fr) minmax(300px, 0.62fr);
gap: clamp(28px, 3vw, 52px);
align-items: start;
}
@media (max-width: 1023px) {
.pixlip-configurator section[data-screen="detail"] .pxl-detail {
grid-template-columns: 1fr;
gap: 28px;
}
}
.pixlip-configurator .pxl-detail__image-wrap {
position: relative;
background: linear-gradient(165deg, #0E1116 0%, #1C2737 100%);
border-radius: 20px !important;
border: 1px solid var(--pxl-hairline);
overflow: hidden;
aspect-ratio: 16 / 10;
box-shadow:
0 2px 4px rgba(14, 17, 22, 0.06),
0 30px 60px -20px rgba(14, 17, 22, 0.32);
}
/* Lightbox-Glow innen — sehr dezent, Türkis */
.pixlip-configurator .pxl-detail__image-wrap::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
box-shadow: inset 0 0 80px -24px rgba(var(--pxl-acc2-rgb), 0.22);
border-radius: inherit;
}
.pixlip-configurator .pxl-detail__image {
display: block; width: 100%; height: 100%; object-fit: contain;
}
.pixlip-configurator .pxl-detail__panel {
display: flex;
flex-direction: column;
gap: 24px;
padding-top: 0;
}
.pixlip-configurator .pxl-detail__eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--pxl-font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--pxl-accent);
}
.pixlip-configurator .pxl-detail__eyebrow::before {
content: "";
display: inline-block;
width: 16px;
height: 1px;
background: var(--pxl-accent);
}
.pixlip-configurator .pxl-detail__headline {
font-family: var(--pxl-font-display);
font-weight: 700;
font-size: clamp(30px, 3.8vw, 52px);
line-height: 1.0;
letter-spacing: -0.035em;
color: var(--pxl-ink);
margin: 8px 0 6px 0;
}
.pixlip-configurator .pxl-detail__sub {
font-family: var(--pxl-font-body);
font-size: 15px;
line-height: 1.55;
color: var(--pxl-slate);
margin: 0;
max-width: 36ch;
}
.pixlip-configurator .pxl-detail__actions {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 8px;
}
.pixlip-configurator .pxl-detail__btn {
display: inline-flex;
align-items: center;
gap: 12px;
height: 56px;
padding: 0 22px;
border-radius: 12px !important;
font-family: var(--pxl-font-body);
font-weight: 600;
font-size: 14px;
letter-spacing: 0;
text-transform: none;
justify-content: flex-start;
}
.pixlip-configurator .pxl-detail__btn[data-role="detail-back"] {
height: 48px; font-size: 13px;
}
.pixlip-configurator .pxl-detail__meta {
margin-top: auto;
font-family: var(--pxl-font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--pxl-mist);
padding-top: 16px;
border-top: 1px solid var(--pxl-hairline);
}
/* ── Contact ───────────────────────────────────────────────────── */
.pixlip-configurator section[data-screen="contact"] .pxl-main {
max-width: min(820px, 94vw);
}
.pixlip-configurator .pxl-contact-form {
display: flex; flex-direction: column; gap: 22px;
margin-top: 28px;
}
.pixlip-configurator .pxl-contact-form label {
display: block;
font-family: var(--pxl-font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--pxl-slate);
margin-bottom: 8px;
}
/* ── Success ───────────────────────────────────────────────────── */
.pixlip-configurator section[data-screen="success"] .pxl-main {
max-width: min(820px, 94vw);
padding-top: clamp(60px, 10vh, 120px) !important;
text-align: left;
}
.pixlip-configurator section[data-screen="success"] h1,
.pixlip-configurator section[data-screen="success"] h2 {
font-family: var(--pxl-font-display);
font-weight: 700;
font-size: clamp(36px, 5vw, 64px);
line-height: 1.0;
letter-spacing: -0.035em;
margin: 0 0 16px 0;
}
.pixlip-configurator section[data-screen="success"] p {
font-size: 17px;
color: var(--pxl-slate);
max-width: 52ch;
}
/* ── AR-Modal + Toast + sonstige Modals ────────────────────────── */
.pixlip-configurator .pxl-ar-modal__content,
.pixlip-configurator .pxl-modal,
.pixlip-configurator .pxl-photoreal-modal,
.pixlip-configurator .pxl-refine-max-modal {
background: linear-gradient(170deg, #FFFFFF 0%, var(--pxl-paper) 100%) !important;
border: 1px solid var(--pxl-hairline) !important;
border-radius: 18px !important;
box-shadow: 0 32px 80px -20px rgba(14, 17, 22, 0.32) !important;
}
.pixlip-configurator .pxl-ar-modal__title {
font-family: var(--pxl-font-display);
font-weight: 600;
font-size: 20px;
color: var(--pxl-ink);
letter-spacing: -0.015em;
}
/* Pixlip-Logo oben rechts im AR-Modal-Header (heller Glas-Header → dunkles
Original-Logo, KEIN Weiß-Invert). Sitzt links neben dem Close-X. */
.pixlip-configurator .pxl-ar-modal__header-right {
display: flex;
align-items: center;
gap: 0.85rem;
}
.pixlip-configurator .pxl-ar-modal__logo {
height: 20px;
width: auto;
display: block;
opacity: 0.9;
}
@media (max-width: 559px) {
.pixlip-configurator .pxl-ar-modal__logo { height: 16px; }
}
.pixlip-configurator .pxl-pending-label {
font-family: var(--pxl-font-display);
font-weight: 600;
font-size: 22px;
letter-spacing: -0.015em;
line-height: 1.15;
color: var(--pxl-ink);
margin-bottom: 10px;
}
.pixlip-configurator .pxl-pending-sub {
font-family: var(--pxl-font-body);
font-size: 14px;
color: var(--pxl-slate);
max-width: 36ch;
text-align: center;
}
/* AR-pending spinner */
.pixlip-configurator .pxl-pending-spinner {
width: 56px;
height: 56px;
border: 3px solid var(--pxl-hairline);
border-top-color: var(--pxl-accent);
border-radius: 50%;
animation: pxl-pending-spin 1s linear infinite;
filter: drop-shadow(0 0 12px rgba(var(--pxl-acc1-rgb), 0.4));
}
@keyframes pxl-pending-spin {
to { transform: rotate(360deg); }
}
/* ── Toast ─────────────────────────────────────────────────────── */
.pixlip-configurator .pxl-toast {
background: var(--pxl-ink);
color: var(--pxl-canvas);
border-radius: 14px !important;
border: none !important;
font-family: var(--pxl-font-body);
font-size: 14px;
box-shadow: 0 24px 60px -16px rgba(14, 17, 22, 0.45);
}
.pixlip-configurator .pxl-toast__title {
font-family: var(--pxl-font-display);
font-weight: 600;
font-size: 14px;
letter-spacing: -0.005em;
margin-bottom: 4px;
}
.pixlip-configurator .pxl-toast.is-success {
background: linear-gradient(180deg, var(--pxl-accent) 0%, var(--pxl-accent-deep) 100%);
color: #FFFFFF;
}
/* ── Refine Pills ──────────────────────────────────────────────── */
.pixlip-configurator .pxl-pill,
.pixlip-configurator .pxl-refine-pill {
height: 38px;
padding: 0 18px;
border-radius: 999px !important;
border: 1px solid var(--pxl-hairline);
background: var(--pxl-paper);
color: var(--pxl-graphite);
font-family: var(--pxl-font-body);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all var(--pxl-dur-fast) var(--pxl-ease);
}
.pixlip-configurator .pxl-pill:hover,
.pixlip-configurator .pxl-refine-pill:hover {
border-color: var(--pxl-graphite);
background: #FFFFFF;
}
.pixlip-configurator .pxl-pill.is-active,
.pixlip-configurator .pxl-refine-pill.is-active {
background: var(--pxl-ink);
border-color: var(--pxl-ink);
color: var(--pxl-canvas);
}
/* ── Photoreal Card ────────────────────────────────────────────── */
.pixlip-configurator .pxl-photoreal-card {
border-radius: 16px !important;
border: 1px solid var(--pxl-hairline) !important;
background: linear-gradient(170deg, #FFFFFF 0%, var(--pxl-paper) 100%) !important;
margin-top: 22px;
overflow: hidden;
}
.pixlip-configurator .pxl-photoreal-card__badge {
font-family: var(--pxl-font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--pxl-accent);
padding: 4px 12px;
border: 1px solid var(--pxl-accent);
border-radius: 999px;
background: rgba(var(--pxl-acc1-rgb), 0.08);
}
/* ── Fullscreen-Close ──────────────────────────────────────────── */
.pixlip-configurator .pxl-fullscreen-close {
background: var(--pxl-paper);
border: 1px solid var(--pxl-hairline);
border-radius: 999px !important;
width: 44px;
height: 44px;
color: var(--pxl-ink);
transition: all var(--pxl-dur-fast) var(--pxl-ease);
box-shadow: 0 8px 24px -8px rgba(14, 17, 22, 0.20);
}
.pixlip-configurator .pxl-fullscreen-close:hover {
background: var(--pxl-ink);
color: var(--pxl-canvas);
border-color: var(--pxl-ink);
}
/* ── Stand-Filter-Bar versteckt (User-Wunsch) ─────────────────── */
.pxl-selection__filters.is-hidden { display: none !important; }
/* ── Skeleton-First-Frame beim Übergang ────────────────────────── */
.pixlip-configurator .pxl-render__skeleton-frame {
display: flex;
align-items: center;
justify-content: center;
min-height: 60vh;
padding: clamp(40px, 8vh, 80px) 0;
}
.pixlip-configurator .pxl-render__skeleton-frame .pxl-render__hero-spinner {
width: 96px; height: 96px;
}
/* ── A11y ──────────────────────────────────────────────────────── */
.pixlip-configurator *:focus-visible {
outline: 2px solid var(--pxl-accent);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.pixlip-configurator *,
.pixlip-configurator *::before,
.pixlip-configurator *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.pixlip-configurator .pxl-render__hero-spinner {
animation-duration: 3s !important;
}
}
/* ════════════════════════════════════════════════════════════════
PIXLIP v10 — 2026-05-22 nachts spät
- Progress-Card definitiv tot
- Mehr sichtbare Farbflächen (Aurora-Splotches + Color-Bands)
- Subtiles Grid-Raster im Background
- Layout-Durchgang: alles fits im Viewport
════════════════════════════════════════════════════════════════ */
/* ── Progress-Card mit maximaler Specificity definitiv weg ──────── */
html body .pixlip-configurator .pxl-render__loading .pxl-render__progress,
html body .pixlip-configurator section[data-screen="render"] .pxl-render__progress,
html body .pixlip-configurator .pxl-render__progress {
display: none !important;
visibility: hidden !important;
height: 0 !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
overflow: hidden !important;
}
/* Legacy-Quad ebenfalls definitiv weg */
html body .pixlip-configurator .pxl-render__tiles--quad {
display: none !important;
}
/* ── Studio-Dark Direction: Page-BG flat hell, keine Aurora, kein Grid.
Bilder + dunkle Hero-Bühne sind die Atmosphäre, UI tritt zurück. ── */
.pixlip-configurator section[data-screen]:not([data-screen="hero"]) {
background:
radial-gradient(ellipse 1200px 700px at 50% -20%, rgba(var(--pxl-acc2-rgb), 0.05) 0%, transparent 70%),
var(--pxl-inverse-bg);
color: var(--pxl-inverse-ink);
}
.pixlip-configurator section[data-screen]:not([data-screen="hero"])::before {
content: none;
}
/* Headlines und Body-Text auf dunklem Theme */
.pixlip-configurator section[data-screen]:not([data-screen="hero"]) h1,
.pixlip-configurator section[data-screen]:not([data-screen="hero"]) h2,
.pixlip-configurator section[data-screen]:not([data-screen="hero"]) h3,
.pixlip-configurator section[data-screen]:not([data-screen="hero"]) h4 {
color: var(--pxl-inverse-ink);
}
.pixlip-configurator section[data-screen]:not([data-screen="hero"]) p,
.pixlip-configurator section[data-screen]:not([data-screen="hero"]) .pxl-screen-header > p,
.pixlip-configurator section[data-screen]:not([data-screen="hero"]) .pxl-stage__lead {
color: rgba(246, 244, 238, 0.65);
}
/* Fullscreen-Background — auch der Container-BG dunkel, damit Theme-Header
nicht auf hellem Streifen kollidiert */
.pixlip-configurator[data-fullscreen="1"] {
background:
radial-gradient(ellipse 1200px 700px at 50% -20%, rgba(var(--pxl-acc2-rgb), 0.05) 0%, transparent 70%),
var(--pxl-inverse-bg) !important;
}
body.pxl-configurator-fullscreen { background-color: var(--pxl-inverse-bg) !important; }
/* Stage-Container: z-index 1 für Layering über evtl. künftigen ::before */
.pixlip-configurator section[data-screen]:not([data-screen="hero"]) > * {
position: relative;
z-index: 1;
}
/* ── Screen-Header: dezenter Hairline-Akzent ───────────────────── */
.pixlip-configurator .pxl-screen-header {
position: relative;
margin-bottom: clamp(28px, 4vh, 48px);
}
.pixlip-configurator .pxl-screen-header::after {
content: "";
display: block;
width: 64px;
height: 2px;
background: linear-gradient(90deg, var(--pxl-accent) 0%, var(--pxl-accent-2) 100%);
margin-top: 16px;
border-radius: 1px;
}
.pixlip-configurator section[data-screen="selection"] .pxl-screen-header::after,
.pixlip-configurator section[data-screen="contact"] .pxl-screen-header::after {
margin-left: auto;
margin-right: auto;
}
/* ── Selection: 3-col strikt, kompakter ────────────────────────── */
.pixlip-configurator section[data-screen="selection"] .pxl-stands-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
@media (max-width: 900px) {
.pixlip-configurator section[data-screen="selection"] .pxl-stands-grid {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
}
@media (max-width: 560px) {
.pixlip-configurator section[data-screen="selection"] .pxl-stands-grid {
grid-template-columns: 1fr;
}
}
.pixlip-configurator .pxl-stand-card__img,
.pixlip-configurator .pxl-stand-card__photo-plate {
aspect-ratio: 4 / 3; /* kompakter — alles passt im Viewport */
}
/* ── Render-Screen Layout v10 — alles im Viewport ─────────────── */
/* Container schmaler damit Footer-Buttons immer sichtbar bleiben */
.pixlip-configurator section[data-screen="render"] .pxl-main {
max-width: min(1320px, 96vw);
padding: clamp(24px, 4vh, 48px) clamp(20px, 4vw, 56px);
}
/* Headline kompakter */
.pixlip-configurator section[data-screen="render"] .pxl-screen-header {
margin-bottom: clamp(20px, 3vh, 32px);
}
.pixlip-configurator section[data-screen="render"] .pxl-screen-header h2 {
font-size: clamp(24px, 2.8vw, 38px);
}
/* Hero-Frame: Hero links + Thumbs rechts auch bei kleineren Screens */
@media (min-width: 880px) {
.pixlip-configurator .pxl-render__hero-frame {
display: grid;
grid-template-columns: minmax(0, 1fr) clamp(220px, 24%, 280px);
gap: clamp(16px, 2vw, 28px);
align-items: start;
}
}
/* Hero-Big — kompakter ratio damit alles fits */
.pixlip-configurator .pxl-render__hero-big {
aspect-ratio: 16 / 10;
}
@media (max-height: 800px) and (min-width: 880px) {
.pixlip-configurator .pxl-render__hero-big {
aspect-ratio: 16 / 9; /* flacher auf kleinerem Vertikalraum */
}
}
/* ── Hero-Skeleton mit Color-Field-Hintergrund ─────────────────── */
.pixlip-configurator .pxl-render__hero-skeleton {
background:
radial-gradient(ellipse 600px 400px at 30% 30%, rgba(var(--pxl-acc1-rgb), 0.45) 0%, transparent 60%),
radial-gradient(ellipse 500px 400px at 80% 80%, rgba(var(--pxl-acc2-rgb), 0.30) 0%, transparent 60%),
linear-gradient(165deg, #1C2737 0%, #0E1116 100%);
}
/* ── Thumb-Hover farblich ──────────────────────────────────────── */
.pixlip-configurator .pxl-render__hero-thumb:not([disabled]):hover {
border-color: var(--pxl-accent);
box-shadow:
0 0 0 3px rgba(var(--pxl-acc1-rgb), 0.10),
0 14px 32px -12px rgba(var(--pxl-acc1-rgb), 0.35);
}
/* ── Footer-Bar Color-Block ────────────────────────────────────── */
.pixlip-configurator .pxl-render__footer-bar {
background: linear-gradient(180deg, #FFFFFF 0%, var(--pxl-paper) 100%);
border: 1px solid var(--pxl-hairline);
border-radius: 14px;
padding: 14px 20px;
}
/* ── Selection-Footer: gleiches Material wie Render-Footer ──────── */
.pixlip-configurator .pxl-selection-footer,
.pixlip-configurator .pxl-selection__footer {
background: linear-gradient(180deg, #FFFFFF 0%, var(--pxl-paper) 100%);
border: 1px solid var(--pxl-hairline);
border-radius: 14px;
padding: 14px 20px;
margin-top: clamp(24px, 4vh, 40px);
}
/* ── Detail-Panel hat eigenen Card-Background ──────────────────── */
.pixlip-configurator .pxl-detail__panel {
background: linear-gradient(170deg, #FFFFFF 0%, var(--pxl-paper) 100%);
border: 1px solid var(--pxl-hairline);
border-radius: 18px;
padding: clamp(20px, 3vw, 32px);
box-shadow: 0 1px 2px rgba(14, 17, 22, 0.04), 0 20px 48px -16px rgba(14, 17, 22, 0.14);
}
/* Auf kleinen Screens: Card-Padding kompakter */
@media (max-width: 1023px) {
.pixlip-configurator .pxl-detail__panel {
padding: 22px;
}
}
/* ── Stand-Filter-Pills sichtbar lassen, aber dezent ────────────── */
.pixlip-configurator .pxl-selection__filters {
display: flex;
gap: 8px;
margin: 0 auto clamp(24px, 4vh, 40px);
justify-content: center;
flex-wrap: wrap;
}
.pixlip-configurator .pxl-selection__filter-pill,
.pixlip-configurator .pxl-selection__filter {
height: 36px;
padding: 0 16px;
border-radius: 999px !important;
border: 1px solid var(--pxl-hairline);
background: var(--pxl-paper);
color: var(--pxl-graphite);
font-family: var(--pxl-font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
cursor: pointer;
transition: all var(--pxl-dur-fast) var(--pxl-ease);
}
.pixlip-configurator .pxl-selection__filter-pill:hover,
.pixlip-configurator .pxl-selection__filter:hover {
border-color: var(--pxl-graphite);
background: #FFFFFF;
}
.pixlip-configurator .pxl-selection__filter-pill.is-active,
.pixlip-configurator .pxl-selection__filter.is-active {
background: var(--pxl-ink);
border-color: var(--pxl-ink);
color: var(--pxl-canvas);
}
/* ── Eyebrow-Pulse vor Hero-Phase-Indikator ────────────────────── */
.pixlip-configurator .pxl-render__hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
}
/* ── Mobile Tweaks — alles fits ─────────────────────────────────── */
@media (max-width: 720px) {
.pixlip-configurator section[data-screen]:not([data-screen="hero"]) .pxl-main {
padding: 24px 16px;
}
.pixlip-configurator .pxl-render__footer-bar {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.pixlip-configurator .pxl-render__footer-btns {
width: 100%;
}
.pixlip-configurator .pxl-render__footer-btns .pxl-btn {
flex: 1;
}
.pixlip-configurator .pxl-selection-footer,
.pixlip-configurator .pxl-selection__footer {
flex-direction: column;
align-items: stretch;
}
}
/* ── Stand-Card etwas kompakter ─────────────────────────────────── */
.pixlip-configurator .pxl-stand-card__body {
padding: 16px 18px 18px;
}
.pixlip-configurator .pxl-stand-card__name {
font-size: 19px;
}
.pixlip-configurator .pxl-stand-card__price {
margin-top: 8px;
padding-top: 10px;
font-size: 15px;
}
/* ── Final Polish: Toast-Position ───────────────────────────────── */
.pixlip-configurator .pxl-toast {
bottom: clamp(20px, 4vh, 40px);
left: clamp(20px, 4vw, 40px);
max-width: 360px;
}
/* ════════════════════════════════════════════════════════════════
PIXLIP v11 — 2026-05-22 Layout-Tightening
Hero so groß wie möglich, aber ALLES in den Viewport.
Unterhalb des Hero sauber strukturiert.
════════════════════════════════════════════════════════════════ */
/* ── Render-Screen: Hero an Viewport-Höhe binden ───────────────── */
.pixlip-configurator section[data-screen="render"] .pxl-main {
max-width: min(1320px, 96vw);
padding: clamp(20px, 3vh, 32px) clamp(20px, 4vw, 56px) clamp(16px, 2vh, 24px);
display: flex;
flex-direction: column;
min-height: 100vh;
min-height: 100dvh;
gap: 0;
}
/* Render-Content nimmt den verfügbaren Raum */
.pixlip-configurator section[data-screen="render"] [data-role="render-content"] {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
.pixlip-configurator section[data-screen="render"] .pxl-render__loading {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
.pixlip-configurator section[data-screen="render"] .pxl-screen-header {
flex-shrink: 0;
margin-bottom: clamp(16px, 2vh, 24px);
}
.pixlip-configurator section[data-screen="render"] .pxl-screen-header h2 {
font-size: clamp(22px, 2.4vw, 32px);
line-height: 1.05;
}
.pixlip-configurator section[data-screen="render"] .pxl-screen-header::after {
margin-top: 10px;
width: 48px;
}
/* Studio-Dark Direction: Hero zentral oben, Thumbs darunter horizontal.
Bilder dominieren, Thumbs sind die untergeordnete Auswahlleiste.
2026-05-27: Layout von side-by-side auf vertikal stack umgebaut. */
.pixlip-configurator .pxl-render__hero-stage {
flex: 1;
display: flex;
flex-direction: column;
width: 100%;
max-width: 1080px;
margin: 0 auto;
min-height: 0;
}
.pixlip-configurator .pxl-render__hero-frame {
flex: 1;
display: flex;
flex-direction: column;
gap: clamp(12px, 1.5vh, 20px);
width: 100%;
min-height: 0;
}
/* Meta-Zeile — schlank, oben über dem Hero */
.pixlip-configurator .pxl-render__hero-meta {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin: 0 0 4px;
padding: 0 2px;
flex-wrap: nowrap;
white-space: nowrap;
}
/* Hero-Big-Wrap: full-width Container für das Bild */
.pixlip-configurator .pxl-render__hero-big-wrap {
width: 100%;
display: flex;
flex-direction: column;
min-height: 0;
}
/* Hero-Big: 16:10 Aspect, voll Breite, dunkler Bühnen-Container */
.pixlip-configurator .pxl-render__hero-big {
width: 100%;
aspect-ratio: 16 / 10;
max-height: calc(100dvh - 320px);
min-height: 280px;
height: auto;
}
/* Hero-Big-Label dezent, NICHT redundant zum Phase-Status */
.pixlip-configurator .pxl-render__hero-big-label {
display: none; /* Studio-Dark: Status sitzt in der Stage, kein doppeltes Label */
}
/* Thumbs — UNTER dem Hero, horizontal 3-Spalten */
.pixlip-configurator .pxl-render__hero-thumbs {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
width: 100%;
margin: 0;
}
.pixlip-configurator .pxl-render__hero-thumb {
display: flex;
flex-direction: column;
height: auto;
}
.pixlip-configurator .pxl-render__hero-thumb-inner {
aspect-ratio: 16 / 10;
width: 100%;
flex: none;
min-height: 0;
}
.pixlip-configurator .pxl-render__hero-thumb-label {
padding: 8px 12px;
font-size: 10px;
letter-spacing: 0.16em;
flex-shrink: 0;
}
/* Sehr schmale Viewports: Thumbs etwas kompakter, Hero behält Aspect */
@media (max-width: 600px) {
.pixlip-configurator .pxl-render__hero-thumbs {
gap: 8px;
}
}
/* Footer-Bar — sticky am Bottom, immer sichtbar */
.pixlip-configurator section[data-screen="render"] .pxl-render__footer-bar {
flex-shrink: 0;
margin-top: clamp(12px, 2vh, 20px);
margin-bottom: 0;
padding: 12px 18px;
background: linear-gradient(180deg, #FFFFFF 0%, var(--pxl-paper) 100%);
border: 1px solid var(--pxl-hairline);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
box-shadow: 0 1px 2px rgba(14, 17, 22, 0.04), 0 12px 28px -12px rgba(14, 17, 22, 0.15);
}
.pixlip-configurator section[data-screen="render"] .pxl-render__footer-hint {
font-size: 14px;
}
.pixlip-configurator section[data-screen="render"] .pxl-render__footer-btns .pxl-btn {
height: 42px;
padding: 0 18px;
font-size: 13px;
}
/* Mobile-Footer-Stack */
@media (max-width: 720px) {
.pixlip-configurator section[data-screen="render"] .pxl-render__footer-bar {
flex-direction: column;
align-items: stretch;
}
.pixlip-configurator section[data-screen="render"] .pxl-render__footer-btns {
width: 100%;
display: flex;
gap: 10px;
}
.pixlip-configurator section[data-screen="render"] .pxl-render__footer-btns .pxl-btn {
flex: 1;
}
}
/* ── Spinner kleiner im Hero damit's nicht zu groß wird ─────────── */
.pixlip-configurator .pxl-render__hero-spinner {
width: clamp(64px, 8vw, 100px);
height: clamp(64px, 8vw, 100px);
}
.pixlip-configurator .pxl-render__hero-statustext {
font-size: clamp(13px, 1.2vw, 15px);
padding: 8px 18px;
}
/* ── Section min-height für Render: definitiv 100vh damit Footer drauf bleibt ── */
.pixlip-configurator section[data-screen="render"] {
min-height: 100vh;
min-height: 100dvh;
}
/* ── Detail-Screen: Hero auch viewport-bound ───────────────────── */
.pixlip-configurator section[data-screen="detail"] .pxl-detail {
/* Top-Padding hält das große Bild unter dem fixierten Pixlip-Logo frei. */
padding-top: clamp(56px, 6vh, 84px);
padding-bottom: clamp(24px, 3vh, 48px);
}
.pixlip-configurator section[data-screen="detail"] .pxl-detail__image-wrap {
aspect-ratio: auto;
max-height: calc(100vh - 150px);
max-height: calc(100dvh - 150px);
min-height: clamp(420px, 64vh, 760px);
height: auto;
}
/* KI-Bild im Detail-Hero: NIE beschneiden — ganzes Design sichtbar (contain). */
.pixlip-configurator section[data-screen="detail"] .pxl-detail__image {
object-fit: contain !important;
object-position: center;
}
.pixlip-configurator section[data-screen="detail"] .pxl-detail__image {
height: 100%;
width: 100%;
}
@media (max-width: 1023px) {
.pixlip-configurator section[data-screen="detail"] .pxl-detail__image-wrap {
aspect-ratio: 16 / 10;
max-height: none;
min-height: 0;
}
}
/* ════════════════════════════════════════════════════════════════
STUDIO-DARK Direction · Render-Screen · 2026-05-27
Page komplett dunkel, Hero gross, kompakte Vertikalen.
Bilder dominieren auf einer dunklen Lightbox-Bühne.
════════════════════════════════════════════════════════════════ */
/* Page-BG dunkel */
.pixlip-configurator section[data-screen="render"] {
background:
radial-gradient(ellipse 1200px 700px at 50% -20%, rgba(var(--pxl-acc2-rgb), 0.06) 0%, transparent 70%),
var(--pxl-inverse-bg) !important;
color: var(--pxl-inverse-ink);
}
.pixlip-configurator section[data-screen="render"]::before {
content: none !important;
}
/* Main-Container voll Breite + No-Scroll-Containment.
pxl-main = 100dvh box; padding kompakt; alles fitting in viewport */
.pixlip-configurator section[data-screen="render"] .pxl-main {
max-width: min(1320px, 96vw) !important;
padding: clamp(12px, 2vh, 22px) clamp(20px, 4vw, 48px) clamp(10px, 1.2vh, 16px) !important;
height: 100%;
min-height: 0 !important;
max-height: 100%;
/* 2026-06-25: war overflow:hidden (fixer 1-Screen-Kasten) — der größere Hero
kann die Viewport-Höhe sprengen und schnitt unten ab (Konzepte/Anfrage
nicht erreichbar). Jetzt vertikal scrollbar: Lade-Spinner passt weiterhin
formatfüllend rein (kein Scroll), die Ergebnis-Ansicht scrollt bei Bedarf. */
overflow-y: auto;
overflow-x: hidden;
gap: 0 !important;
}
.pixlip-configurator section[data-screen="render"] .pxl-render__loading {
max-width: none !important;
width: 100%;
flex: 1 1 0 !important;
min-height: 0 !important;
display: flex !important;
flex-direction: column !important;
}
/* Render-Screen selbst muss volle Höhe füllen ohne overflow */
.pixlip-configurator section[data-screen="render"].is-active {
height: 100%;
min-height: 0 !important;
max-height: 100%;
overflow: hidden;
}
/* Headline + Live-Progress-Hairline — die Türkis-Linie unter der Headline
wird als abstrakte Fortschrittsanzeige genutzt: voll Breite beim Start,
schrumpft über die ETA-Dauer (175s) linear nach 0 von rechts nach links.
2026-05-27: kompakter, mehr Platz für Hero. */
.pixlip-configurator section[data-screen="render"] .pxl-screen-header {
flex-shrink: 0 !important;
margin-bottom: clamp(6px, 0.8vh, 10px) !important;
text-align: center;
position: relative;
--pxl-progress-pct: 100;
--pxl-progress-duration: 175s;
--pxl-progress-start: 1; /* Startanteil des Balkens; <1 beim Wiedereintritt (Restposition) */
}
.pixlip-configurator section[data-screen="render"] .pxl-screen-header h2 {
color: var(--pxl-inverse-ink);
font-weight: 600;
letter-spacing: -0.02em;
font-size: clamp(18px, 1.9vw, 24px) !important;
line-height: 1.15;
margin: 0;
}
/* Ladebalken: zentral mittig sitzend, symmetrisch von beiden Seiten zur
Mitte schrumpfend. transform-origin: center sorgt für „Zusammenziehen". */
.pixlip-configurator section[data-screen="render"] .pxl-screen-header::after {
content: "";
display: block;
height: 2px;
width: min(820px, 80vw);
margin: 5px auto 0;
background: linear-gradient(90deg, var(--pxl-accent-2) 0%, var(--pxl-accent) 50%, var(--pxl-accent-2) 100%);
border-radius: 2px;
transform: scaleX(0);
transform-origin: center center;
box-shadow: 0 0 12px -2px rgba(var(--pxl-acc2-rgb), 0.6);
}
/* Phase 0: Intro — aus der Mitte heraus auf volle Breite wachsen (lebendiger
Auftakt, bevor das zeitbasierte Zusammenziehen startet). */
.pixlip-configurator section[data-screen="render"] .pxl-screen-header.is-progress-intro::after {
transform: scaleX(1);
transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* Phase 1: instant auf Startanteil (volle Breite beim frischen Start, Restposition
beim Wiedereintritt) — vor transition aktiviert */
.pixlip-configurator section[data-screen="render"] .pxl-screen-header.is-progress-init::after {
transform: scaleX(var(--pxl-progress-start, 1));
}
/* Phase 2: 175s linear nach 0 — symmetrisches Zusammenziehen zur Mitte */
.pixlip-configurator section[data-screen="render"] .pxl-screen-header.is-progress-running::after {
transform: scaleX(0);
transition: transform var(--pxl-progress-duration, 175s) linear;
}
/* Phase 3: fertig — kurzer Glow-Puls, dann fade out */
.pixlip-configurator section[data-screen="render"] .pxl-screen-header.is-progress-done::after {
animation: pxl-progress-finish 1.2s var(--pxl-ease) forwards;
}
@keyframes pxl-progress-finish {
0% { transform: scaleX(1); opacity: 1; box-shadow: 0 0 28px -2px rgba(var(--pxl-acc2-rgb), 0.9); }
100% { transform: scaleX(1); opacity: 0; box-shadow: 0 0 12px -2px rgba(var(--pxl-acc2-rgb), 0); }
}
/* Eyebrow + Status + ETA hell */
.pixlip-configurator section[data-screen="render"] .pxl-render__hero-eyebrow,
.pixlip-configurator section[data-screen="render"] [data-role="hero-phase"] {
color: rgba(246, 244, 238, 0.7);
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.pixlip-configurator section[data-screen="render"] [data-role="hero-phase"]::before {
background: var(--pxl-accent-2);
box-shadow: 0 0 12px rgba(var(--pxl-acc2-rgb), 0.6);
}
.pixlip-configurator section[data-screen="render"] .pxl-render__hero-eta-inline,
.pixlip-configurator section[data-screen="render"] [data-role="hero-eta"] {
color: rgba(246, 244, 238, 0.55);
font-family: var(--pxl-font-mono);
font-size: 13px;
letter-spacing: 0.02em;
font-variant-numeric: tabular-nums;
}
/* Hero-Stage füllt Resthöhe, no overflow */
.pixlip-configurator section[data-screen="render"] .pxl-render__hero-stage {
max-width: none;
width: 100%;
margin: 0;
flex: 1 1 0 !important;
min-height: 0 !important;
display: flex !important;
flex-direction: column !important;
}
.pixlip-configurator section[data-screen="render"] .pxl-render__hero-frame {
flex: 1 1 0 !important;
min-height: 0 !important;
gap: clamp(8px, 1.2vh, 14px) !important;
max-width: none !important;
width: 100% !important;
align-items: stretch !important;
}
/* Meta-Zeile kompakt */
.pixlip-configurator section[data-screen="render"] .pxl-render__hero-meta {
flex-shrink: 0;
margin: 0 !important;
}
/* Hero-Big-Wrap füllt vertikalen UND horizontalen Resthalt */
.pixlip-configurator section[data-screen="render"] .pxl-render__hero-big-wrap {
position: relative;
display: flex !important;
flex-direction: column-reverse !important; /* Mobile: Bild oben, Text unten */
flex: 0 0 auto !important;
min-height: 0 !important;
width: 100% !important;
max-width: none !important;
align-self: stretch !important;
border: 1px solid var(--pxl-hairline);
border-radius: 20px;
overflow: hidden;
padding: 0 !important;
gap: 0 !important;
background:
radial-gradient(130% 130% at 14% 22%, rgba(var(--pxl-acc2-rgb), 0.10) 0%, transparent 52%),
linear-gradient(140deg, #1b2433 0%, #0e1117 60%) !important;
}
@media (min-width: 860px) {
.pixlip-configurator section[data-screen="render"] .pxl-render__hero-big-wrap {
flex-direction: row !important;
align-items: stretch !important;
min-height: 440px !important; /* mehr Vertikalraum → contained Bild größer */
}
}
.pixlip-configurator section[data-screen="render"] .pxl-render__hero-thumb {
width: 100%;
}
/* Hero-Big: WOW-Größe — füllt verfügbaren Box, Aspect-Ratio adaptiv.
Statt fixem aspect-ratio nutzen wir width/height auf 100% des Wraps,
damit das Bild den verfügbaren Vertikalraum ausnutzt ohne zu scrollen. */
.pixlip-configurator section[data-screen="render"] .pxl-render__hero-big {
position: relative;
z-index: 1;
width: 100%;
margin: 0;
aspect-ratio: 3 / 2 !important; /* exakt = Bild 1536x1024 → kein Crop, randlos */
height: auto !important;
max-width: none;
max-height: none !important;
min-height: 0 !important;
background: transparent !important;
border-radius: 0 !important;
border: none !important;
box-shadow: none !important;
overflow: hidden;
-webkit-mask-image: linear-gradient(to bottom, #000 56%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 56%, transparent 100%);
}
@media (min-width: 860px) {
.pixlip-configurator section[data-screen="render"] .pxl-render__hero-big {
flex: 1 1 auto !important;
aspect-ratio: auto !important;
height: auto !important;
align-self: stretch !important;
min-height: 440px !important;
margin-left: -13% !important;
-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 30%);
mask-image: linear-gradient(to right, transparent 0%, #000 30%);
}
}
/* KI-Bild im Hero — KEIN Crop, ganzes Bild sichtbar (Letterbox erlaubt).
Container-BG (radial-gradient oben) ist dunkler Letterbox-Bereich. */
.pixlip-configurator section[data-screen="render"] .pxl-render__hero-img {
object-fit: contain !important; /* GANZES Bild, NIE oben/unten beschnitten */
object-position: center;
width: 100%;
height: 100%;
inset: 0;
}
/* Thumbs auch contain — User soll das ganze Design sehen */
.pixlip-configurator section[data-screen="render"] .pxl-render__hero-thumb-inner img {
object-fit: contain !important;
object-position: center;
width: 100%;
height: 100%;
}
/* ── US (data-locale=en): KI-Bilder sind QUADRATISCH (1:1 — Output = Input,
ab 2026-06-25). Bildboxen auf 1:1 stellen, damit das Quadrat die Karte
randlos füllt statt in einer 3:2-Box mit Verlauf-Bändern zu schweben.
contain bleibt → nie Crop. DE (data-locale=de) NICHT betroffen. */
.pixlip-configurator[data-locale^="en"] section[data-screen="render"] .pxl-render__hero-big {
aspect-ratio: 1 / 1 !important;
}
.pixlip-configurator[data-locale^="en"] section[data-screen="render"] .pxl-render__hero-thumb-inner {
aspect-ratio: 1 / 1 !important;
}
/* Spinner-Ring in der dunklen Bühne — Pixlip-Türkis */
.pixlip-configurator section[data-screen="render"] .pxl-render__hero-spinner {
color: var(--pxl-accent-2);
filter: drop-shadow(0 0 16px rgba(var(--pxl-acc2-rgb), 0.7));
}
/* Status-Pill mittig — heller auf dunkel */
.pixlip-configurator section[data-screen="render"] .pxl-render__hero-statustext {
color: rgba(246, 244, 238, 0.95);
background: rgba(14, 17, 22, 0.55);
border: 1px solid rgba(var(--pxl-acc2-rgb), 0.25);
backdrop-filter: blur(8px);
font-weight: 500;
letter-spacing: 0.04em;
padding: 12px 24px;
font-size: 14px;
}
/* Thumb-Buttons in der dunklen Bühne — outlined, kompakt fix-height
damit nicht zu viel Vertikalraum vom Hero gestohlen wird */
.pixlip-configurator section[data-screen="render"] .pxl-render__hero-thumbs {
width: 100%;
/* 2026-05-28: volle Hero-Breite (Basis-Regel kappte auf 880px → Thumbs waren
schmaler als das Hero). max-width:none + fester Abstand zwischen den 3. */
max-width: none !important;
margin-top: 0;
flex-shrink: 0;
/* Höhe NICHT mehr fix-flach — sie ergibt sich aus dem Thumb-Aspect (16:10),
damit die Vorschau dem 3:2-Bildformat nahekommt und die Höhe genutzt wird. */
height: auto;
align-items: start;
gap: 14px;
}
/* Thumbnails 2026-05-28 neu: Bild füllt randlos bis zum Rahmen (kein 4px-Gap
mehr), Label als dezenter Overlay-Chip am unteren Bildrand. */
.pixlip-configurator section[data-screen="render"] .pxl-render__hero-thumb {
position: relative;
display: flex;
flex-direction: row;
align-items: stretch;
gap: 0;
padding: 0 !important;
min-height: 130px;
background: linear-gradient(140deg, #1a2230 0%, #0e1117 64%);
border: 1px solid rgba(246, 244, 238, 0.12);
border-radius: 14px;
overflow: hidden;
transition: border-color 180ms var(--pxl-ease), transform 180ms var(--pxl-ease), box-shadow 180ms var(--pxl-ease);
cursor: pointer;
}
.pixlip-configurator section[data-screen="render"] .pxl-render__hero-thumb.is-active { display: none !important; }
.pixlip-configurator section[data-screen="render"] .pxl-render__hero-thumb:not(:disabled):hover {
border-color: rgba(var(--pxl-acc2-rgb), 0.55);
transform: translateY(-2px);
}
.pixlip-configurator section[data-screen="render"] .pxl-render__hero-thumb.is-active {
border-color: var(--pxl-accent-2);
box-shadow: 0 0 0 2px rgba(var(--pxl-acc2-rgb), 0.35), 0 10px 28px -12px rgba(var(--pxl-acc2-rgb), 0.5);
}
.pixlip-configurator section[data-screen="render"] .pxl-render__hero-thumb-inner {
position: relative;
z-index: 1;
background: transparent;
border-radius: 0 !important;
aspect-ratio: auto !important;
flex: 1 1 auto !important;
width: auto;
min-height: 0 !important;
margin-left: -12%;
-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 32%);
mask-image: linear-gradient(to right, transparent 0%, #000 32%);
}
.pixlip-configurator section[data-screen="render"] .pxl-render__hero-thumb-skeleton {
background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.08) 100%);
}
.pixlip-configurator section[data-screen="render"] .pxl-render__hero-thumb-label {
position: static;
margin: 0;
padding: 0;
z-index: auto;
pointer-events: auto;
font: 600 16px var(--pxl-font-display);
letter-spacing: -0.01em;
text-transform: none;
color: var(--pxl-inverse-ink);
background: none;
}
/* ── Overlay-Aktion unten rechts über dem großen Hero-Bild (Auswählen) ── */
.pixlip-configurator section[data-screen="render"] .pxl-render__hero-overlay {
position: absolute;
bottom: 0; right: 0;
z-index: 4;
display: flex;
justify-content: flex-end;
align-items: flex-end;
padding: clamp(12px, 1.6vh, 18px);
pointer-events: none;
}
.pixlip-configurator section[data-screen="render"] .pxl-render__hero-ovl-btn {
pointer-events: auto;
display: inline-flex;
align-items: center;
gap: 7px;
height: 40px;
padding: 0 18px;
border-radius: 999px;
font: 600 13px var(--pxl-font-body);
letter-spacing: 0.01em;
cursor: pointer;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: background 160ms var(--pxl-ease), border-color 160ms var(--pxl-ease), transform 160ms var(--pxl-ease), box-shadow 160ms var(--pxl-ease);
}
/* chic & glasig: transparenter Türkis→Blau-Verlauf + feiner Innen-Highlight */
.pixlip-configurator section[data-screen="render"] .pxl-render__hero-ovl-go {
background: linear-gradient(135deg, rgba(var(--pxl-acc2-rgb), 0.30) 0%, rgba(var(--pxl-acc1-rgb), 0.20) 100%);
border: 1px solid rgba(255, 255, 255, 0.28);
color: #fff;
letter-spacing: 0.03em;
-webkit-backdrop-filter: blur(14px) saturate(140%);
backdrop-filter: blur(14px) saturate(140%);
box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.pixlip-configurator section[data-screen="render"] .pxl-render__hero-ovl-go:hover {
background: linear-gradient(135deg, rgba(var(--pxl-acc2-rgb), 0.5) 0%, rgba(var(--pxl-acc1-rgb), 0.38) 100%);
border-color: rgba(255, 255, 255, 0.5);
transform: translateY(-1px);
box-shadow: 0 14px 36px -12px rgba(var(--pxl-acc2-rgb), 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.pixlip-configurator section[data-screen="render"] .pxl-render__hero-ovl-go.is-hidden {
display: none;
}
/* Hero-Big 2026-05-28: nicht mehr 100% Höhe — gedeckelt damit Thumbs + Overlay
atmen können (Footer-Bar wurde entfernt, Platz ist jetzt da). */
.pixlip-configurator section[data-screen="render"] .pxl-render__hero-big {
max-height: clamp(360px, 66vh, 720px) !important;
}
/* Footer-Bar dunkel, kompakt, fix-height am Bottom */
.pixlip-configurator section[data-screen="render"] .pxl-render__footer-bar {
background: rgba(14, 17, 22, 0.6);
border-top: 1px solid rgba(246, 244, 238, 0.08);
padding: clamp(10px, 1.3vh, 14px) clamp(20px, 4vw, 32px);
margin-top: clamp(10px, 1.2vh, 14px);
backdrop-filter: blur(8px);
flex-shrink: 0;
}
.pixlip-configurator section[data-screen="render"] .pxl-render__footer-hint {
color: rgba(246, 244, 238, 0.55);
letter-spacing: 0.16em;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
}
/* Ghost-Button "Zurück" für dunkles Theme */
.pixlip-configurator section[data-screen="render"] .pxl-btn--ghost {
background: transparent;
color: rgba(246, 244, 238, 0.85);
border-color: rgba(246, 244, 238, 0.2);
}
.pixlip-configurator section[data-screen="render"] .pxl-btn--ghost:hover {
border-color: rgba(246, 244, 238, 0.5);
background: rgba(255, 255, 255, 0.04);
color: var(--pxl-inverse-ink);
}
/* Close-Button (X oben rechts) hell auf dunklem BG */
.pixlip-configurator[data-fullscreen="1"]:has(section[data-screen="render"].is-active) .pxl-fullscreen-close {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.15);
color: rgba(246, 244, 238, 0.85);
}
/* ETA-Zeile oben unter der Headline (statt unten rechts) */
.pixlip-configurator section[data-screen="render"] .pxl-render__eta-top {
display: block;
margin-top: 2px;
font-family: var(--pxl-font-mono);
font-size: 12px;
letter-spacing: 0.04em;
color: rgba(246, 244, 238, 0.6);
font-variant-numeric: tabular-nums;
min-height: 0;
line-height: 1.2;
}
/* Untere Meta-Zeile (Eyebrow + ETA) entfällt — ETA sitzt jetzt oben */
.pixlip-configurator section[data-screen="render"] .pxl-render__hero-meta {
display: none !important;
}
/* ── Pixlip-Logo (Brand-Mark) oben links — alle Screens außer Hero/Start ── */
.pxl-fullscreen-logo { display: none; }
.pixlip-configurator[data-fullscreen="1"] .pxl-fullscreen-logo {
display: flex;
align-items: center;
position: fixed;
top: calc(var(--pxl-host-header-h, 7rem) + max(0.95rem, env(safe-area-inset-top)));
/* Bündig mit der linken Kante des Hero-/Content-Bereichs: gleiche Rechnung wie
der Render-Container (.pxl-main max-width min(1320px,96vw) zentriert +
padding clamp(20px,4vw,48px)), statt am Viewport-Rand zu kleben. */
left: calc(max((100vw - min(1320px, 96vw)) / 2, 0px) + clamp(20px, 4vw, 48px));
z-index: 100000;
height: 2rem;
pointer-events: none;
}
.pxl-fullscreen-logo img {
height: 22px;
width: auto;
display: block;
opacity: 0.95;
/* Brandfetch-SVG ist dunkel → auf den dunklen Studio-Screens unsichtbar.
brightness(0) invert(1) rendert das Wordmark rein WEISS. */
filter: brightness(0) invert(1) drop-shadow(0 1px 6px rgba(0, 0, 0, 0.55));
}
/* Auf der Start-/Hero-Seite NIEMALS zeigen (User-Wunsch: nur ab Seite 2) */
.pixlip-configurator [data-screen="hero"].is-active ~ .pxl-fullscreen-logo {
display: none;
}
@media (max-width: 559px) {
.pxl-fullscreen-logo img { height: 18px; }
}
/* Mobile-Responsiveness für Studio-Dark Render-Screen.
2026-05-27 v2: Mobile darf scrollen, Hero behält 16:10 Proportion,
kein Quetschen mehr bei niedriger Browserhöhe. */
@media (max-width: 879px) {
/* Container + Section dürfen vertikal scrollen */
.pixlip-configurator section[data-screen="render"].is-active {
overflow: auto !important;
overflow-x: hidden !important;
height: auto !important;
max-height: none !important;
min-height: 100% !important;
}
.pixlip-configurator section[data-screen="render"] .pxl-main {
overflow: visible !important;
height: auto !important;
max-height: none !important;
min-height: 100% !important;
padding: clamp(12px, 2vh, 20px) clamp(14px, 4vw, 22px) max(16px, env(safe-area-inset-bottom)) !important;
gap: clamp(10px, 1.5vh, 16px) !important;
}
.pixlip-configurator section[data-screen="render"] .pxl-render__loading,
.pixlip-configurator section[data-screen="render"] .pxl-render__hero-stage,
.pixlip-configurator section[data-screen="render"] .pxl-render__hero-big-wrap {
flex: 0 1 auto !important;
min-height: 0 !important;
}
/* 2026-05-28 Fix: hero-frame behielt das Desktop-flex:1 und kollabierte auf
Mobile, wodurch sich Thumbs + Overlay über das Hero schoben. Hier auf
natürliches Block-Stacking zwingen — sauberes Untereinander mit Gap. */
.pixlip-configurator section[data-screen="render"] .pxl-render__hero-frame {
flex: 0 1 auto !important;
height: auto !important;
min-height: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
align-items: stretch !important;
}
.pixlip-configurator section[data-screen="render"] .pxl-render__hero-thumbs {
flex: 0 0 auto !important;
}
.pixlip-configurator section[data-screen="render"] .pxl-screen-header h2 {
font-size: clamp(18px, 5vw, 24px) !important;
line-height: 1.15;
}
/* Hero mit feststehender Aspect-Ratio (16:10) — verhindert das
Mobile-Quetschen. Bild bleibt proportional. */
.pixlip-configurator section[data-screen="render"] .pxl-render__hero-big {
aspect-ratio: 3 / 2 !important; /* = Bildformat → ganzes Bild, randlos */
height: auto !important;
min-height: 240px !important;
max-height: 78vh !important;
}
/* Thumbs mit aspect-ratio, keine fixe Container-Höhe */
.pixlip-configurator section[data-screen="render"] .pxl-render__hero-thumbs {
height: auto !important;
gap: 8px;
}
.pixlip-configurator section[data-screen="render"] .pxl-render__hero-thumb-inner {
aspect-ratio: 3 / 2 !important;
flex: 0 1 auto !important;
}
.pixlip-configurator section[data-screen="render"] .pxl-render__hero-thumb-label {
font-size: 9px;
padding: 4px 8px;
letter-spacing: 0.12em;
}
/* Footer-Bar: 2-Zeilen-Stack für Mobile.
Zeile 1: Hint + Notify-Toggle | Zeile 2: Zurück + Anfrage (full-width) */
.pixlip-configurator section[data-screen="render"] .pxl-render__footer-bar {
flex-direction: column !important;
align-items: stretch !important;
gap: 8px;
padding: 10px 14px max(10px, env(safe-area-inset-bottom));
}
.pixlip-configurator section[data-screen="render"] .pxl-render__footer-hint {
text-align: center;
margin: 0;
font-size: 10px;
}
.pixlip-configurator section[data-screen="render"] .pxl-render__footer-btns {
display: grid !important;
grid-template-columns: auto 1fr;
gap: 8px;
width: 100%;
}
.pixlip-configurator section[data-screen="render"] [data-role="notify-toggle"] {
grid-column: 1 / -1;
justify-self: center;
font-size: 11px;
padding: 6px 10px;
}
.pixlip-configurator section[data-screen="render"] [data-role="render-back"] {
min-width: 80px;
}
.pixlip-configurator section[data-screen="render"] [data-role="render-next"] {
width: 100%;
}
}
/* Selection auf Mobile: 1-col, große Cards */
@media (max-width: 879px) {
.pixlip-configurator section[data-screen="selection"] .pxl-stands-grid {
grid-template-columns: 1fr !important;
gap: 12px !important;
}
.pixlip-configurator section[data-screen="selection"] .pxl-main {
padding-bottom: max(80px, env(safe-area-inset-bottom)) !important;
}
}
/* ════════════════════════════════════════════════════════════════
STUDIO-DARK · Detail-Screen · 2026-05-27
Dunkle Bühne fortsetzen, Hero-Bild dominiert, Lightbox-Edge.
════════════════════════════════════════════════════════════════ */
.pixlip-configurator section[data-screen="detail"] {
background:
radial-gradient(ellipse 1200px 700px at 50% -20%, rgba(var(--pxl-acc2-rgb), 0.06) 0%, transparent 70%),
var(--pxl-inverse-bg) !important;
color: var(--pxl-inverse-ink);
}
.pixlip-configurator section[data-screen="detail"]::before {
content: none !important;
}
.pixlip-configurator section[data-screen="detail"] .pxl-detail__eyebrow {
color: var(--pxl-accent-2);
opacity: 1;
}
.pixlip-configurator section[data-screen="detail"] .pxl-detail__headline {
color: var(--pxl-inverse-ink);
}
.pixlip-configurator section[data-screen="detail"] .pxl-detail__sub {
color: rgba(246, 244, 238, 0.65);
}
.pixlip-configurator section[data-screen="detail"] .pxl-detail__meta {
color: rgba(246, 244, 238, 0.45);
border-top-color: rgba(246, 244, 238, 0.1);
}
.pixlip-configurator section[data-screen="detail"] .pxl-detail__image-wrap {
border: 1px solid rgba(var(--pxl-acc2-rgb), 0.18);
box-shadow:
0 24px 60px -20px rgba(0, 0, 0, 0.6),
0 0 80px -30px rgba(var(--pxl-acc2-rgb), 0.35),
inset 0 0 80px -30px rgba(var(--pxl-acc2-rgb), 0.1);
}
.pixlip-configurator section[data-screen="detail"] .pxl-btn--ghost {
background: transparent;
color: rgba(246, 244, 238, 0.85);
border-color: rgba(246, 244, 238, 0.2);
}
.pixlip-configurator section[data-screen="detail"] .pxl-btn--ghost:hover {
border-color: rgba(246, 244, 238, 0.5);
background: rgba(255, 255, 255, 0.04);
color: var(--pxl-inverse-ink);
}
/* Outlined-AR-Button auf dunkler Bühne: Türkis statt Blau für Sichtbarkeit */
.pixlip-configurator section[data-screen="detail"] .pxl-btn--outlined {
color: var(--pxl-accent-2);
border-color: var(--pxl-accent-2);
}
.pixlip-configurator section[data-screen="detail"] .pxl-btn--outlined:hover:not(:disabled) {
background: rgba(var(--pxl-acc2-rgb), 0.1);
border-color: var(--pxl-accent-2-deep);
color: var(--pxl-accent-2-deep);
}
/* Detail-Panel im Studio-Dark: dunkle Card statt weiß */
.pixlip-configurator section[data-screen="detail"] .pxl-detail__panel {
background: linear-gradient(170deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
border: 1px solid rgba(246, 244, 238, 0.1) !important;
box-shadow:
0 24px 48px -16px rgba(0, 0, 0, 0.5),
0 0 40px -16px rgba(var(--pxl-acc2-rgb), 0.15) !important;
}
.pixlip-configurator section[data-screen="detail"] .pxl-detail__panel .pxl-detail__headline {
color: var(--pxl-inverse-ink) !important;
}
.pixlip-configurator section[data-screen="detail"] .pxl-detail__panel .pxl-detail__sub {
color: rgba(246, 244, 238, 0.7) !important;
}
/* ── AR-Fortschritts-Button (Detail-Screen) 2026-05-28 ──────────────
Während der AR-Generierung füllt ein Türkis-Balken den Button + ETA.
Bei fertigem GLB wechselt der Button zu vollem Türkis-CTA "AR ansehen". */
.pixlip-configurator section[data-screen="detail"] .pxl-detail__ar {
position: relative;
overflow: hidden;
justify-content: center;
border: 1px solid rgba(var(--pxl-acc2-rgb), 0.5);
background: rgba(var(--pxl-acc2-rgb), 0.07);
color: var(--pxl-accent-2);
}
.pixlip-configurator section[data-screen="detail"] .pxl-detail__ar-bar {
position: absolute;
left: 0; top: 0; bottom: 0;
width: 100%;
transform: scaleX(0);
transform-origin: left center;
transition: transform 1s linear;
background: linear-gradient(90deg, rgba(var(--pxl-acc2-rgb), 0.34), rgba(var(--pxl-acc1-rgb), 0.34));
z-index: 0;
}
.pixlip-configurator section[data-screen="detail"] .pxl-detail__ar-face {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
gap: 10px;
}
.pixlip-configurator section[data-screen="detail"] .pxl-detail__ar-eta {
font-family: var(--pxl-font-mono);
font-size: 12px;
opacity: 0.78;
letter-spacing: 0.02em;
font-variant-numeric: tabular-nums;
}
.pixlip-configurator section[data-screen="detail"] .pxl-detail__ar.is-generating {
cursor: default;
}
.pixlip-configurator section[data-screen="detail"] .pxl-detail__ar.is-ready {
background: linear-gradient(135deg, var(--pxl-accent-2) 0%, var(--pxl-accent) 100%);
border-color: transparent;
color: #fff;
box-shadow: 0 12px 30px -10px rgba(var(--pxl-acc2-rgb), 0.6);
cursor: pointer;
transition: transform 160ms var(--pxl-ease), box-shadow 160ms var(--pxl-ease);
}
.pixlip-configurator section[data-screen="detail"] .pxl-detail__ar.is-ready .pxl-detail__ar-bar { display: none; }
.pixlip-configurator section[data-screen="detail"] .pxl-detail__ar.is-ready .pxl-detail__ar-eta { display: none; }
.pixlip-configurator section[data-screen="detail"] .pxl-detail__ar.is-ready:hover {
transform: translateY(-1px);
box-shadow: 0 16px 36px -10px rgba(var(--pxl-acc2-rgb), 0.75);
}
/* ── Self-Send-Block (Designs an eigene Mail) ──────────────────────── */
.pixlip-configurator section[data-screen="detail"] .pxl-detail__selfsend {
margin-top: 6px;
display: flex;
flex-direction: column;
gap: 8px;
}
.pixlip-configurator section[data-screen="detail"] .pxl-detail__selfsend-hint {
font-size: 12px;
color: rgba(246, 244, 238, 0.55);
letter-spacing: 0.02em;
}
/* Vertikal gestapelt: Mailfeld volle Breite (war zu schmal im engen Panel). */
.pixlip-configurator section[data-screen="detail"] .pxl-detail__selfsend-form {
display: flex;
flex-direction: column;
gap: 8px;
}
.pixlip-configurator section[data-screen="detail"] .pxl-detail__selfsend-input {
width: 100%;
min-width: 0;
height: 50px;
padding: 0 16px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(246, 244, 238, 0.18);
color: var(--pxl-inverse-ink);
font: 400 16px var(--pxl-font-body);
}
.pixlip-configurator section[data-screen="detail"] .pxl-detail__selfsend-input::placeholder {
color: rgba(246, 244, 238, 0.4);
}
.pixlip-configurator section[data-screen="detail"] .pxl-detail__selfsend-input:focus {
outline: none;
border-color: var(--pxl-accent-2);
box-shadow: 0 0 0 3px rgba(var(--pxl-acc2-rgb), 0.18);
}
.pixlip-configurator section[data-screen="detail"] .pxl-detail__selfsend-submit {
width: 100%;
height: 50px;
padding: 0 16px;
border-radius: 12px;
border: 1px solid rgba(246, 244, 238, 0.2);
background: rgba(255, 255, 255, 0.06);
color: var(--pxl-inverse-ink);
font: 600 14px var(--pxl-font-body);
cursor: pointer;
white-space: nowrap;
transition: background 160ms var(--pxl-ease), border-color 160ms var(--pxl-ease);
}
.pixlip-configurator section[data-screen="detail"] .pxl-detail__selfsend-submit:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(246, 244, 238, 0.4);
}
.pixlip-configurator section[data-screen="detail"] .pxl-detail__selfsend-submit:disabled {
opacity: 0.6;
cursor: default;
}
.pixlip-configurator section[data-screen="detail"] .pxl-detail__selfsend-success {
display: none;
color: var(--pxl-accent-2);
font-size: 12px;
font-weight: 600;
}
.pixlip-configurator section[data-screen="detail"] .pxl-detail__selfsend-error {
display: none;
color: #e7857f;
font-size: 12px;
}
.pixlip-configurator section[data-screen="detail"] .pxl-detail__selfsend-error:not(:empty) {
display: block;
}
.pixlip-configurator section[data-screen="detail"] .pxl-detail__selfsend.is-success .pxl-detail__selfsend-form,
.pixlip-configurator section[data-screen="detail"] .pxl-detail__selfsend.is-success .pxl-detail__selfsend-hint {
display: none;
}
.pixlip-configurator section[data-screen="detail"] .pxl-detail__selfsend.is-success .pxl-detail__selfsend-success {
display: block;
}
/* ════════════════════════════════════════════════════════════════
E-Mail-Notify-Async-Flow · 2026-05-27
"Per E-Mail benachrichtigen" als alternative zur 3-Min-Wartezeit.
Footer-Bar bekommt einen Link, der ein Inline-Form aufklappt.
════════════════════════════════════════════════════════════════ */
.pxl-render__notify-toggle {
background: transparent;
border: none;
color: rgba(246, 244, 238, 0.55);
font: 500 12px var(--pxl-font-body);
letter-spacing: 0.04em;
cursor: pointer;
padding: 8px 12px;
display: inline-flex;
align-items: center;
gap: 8px;
transition: color 180ms var(--pxl-ease);
}
.pxl-render__notify-toggle:hover {
color: var(--pxl-accent-2);
}
.pxl-render__notify-toggle svg {
width: 14px;
height: 14px;
flex-shrink: 0;
}
/* Notify-Inline — horizontale "Keine Zeit zu warten?"-Box über dem Hero (Layout 67.jpg).
Kompakt: links Icon+Text, rechts Mail-Feld+Button, darunter Trust-Badges → drückt
das Herobild nicht mehr. */
.pxl-notify-inline {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 14px;
padding: 18px 22px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(var(--pxl-acc2-rgb), 0.30);
border-radius: 16px;
max-width: 100%;
margin: 0 auto;
width: 100%;
box-shadow: 0 0 48px -30px rgba(var(--pxl-acc2-rgb), 0.5);
transition: opacity 360ms var(--pxl-ease), transform 360ms var(--pxl-ease);
}
.pxl-notify-inline.is-hidden { display: none; }
/* Zeile 1: links Icon + Text, rechts Mail-Feld + Button */
.pxl-notify-inline__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px 24px;
flex-wrap: wrap;
}
.pxl-notify-inline__lead {
display: flex;
align-items: center;
gap: 14px;
flex: 1 1 300px;
min-width: 0;
}
.pxl-notify-inline__icon-circle {
flex-shrink: 0;
width: 46px;
height: 46px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(var(--pxl-acc2-rgb), 0.12);
border: 1px solid rgba(var(--pxl-acc2-rgb), 0.30);
color: var(--pxl-accent-2);
}
.pxl-notify-inline__lead-text { min-width: 0; }
.pxl-notify-inline__title {
margin: 0 0 3px;
font: 600 16px/1.25 var(--pxl-font-display);
color: var(--pxl-inverse-ink);
letter-spacing: -0.01em;
}
.pxl-notify-inline__body {
margin: 0;
font: 400 13px/1.45 var(--pxl-font-body);
color: rgba(246, 244, 238, 0.66);
}
.pxl-notify-inline__form {
display: flex;
gap: 8px;
align-items: center;
flex: 0 1 400px;
min-width: 240px;
}
.pxl-notify-inline__input {
flex: 1;
min-width: 0;
height: 46px;
padding: 0 16px;
background: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(246, 244, 238, 0.14);
border-radius: 12px;
color: var(--pxl-inverse-ink);
font: 400 14px var(--pxl-font-body);
outline: none;
}
.pxl-notify-inline__input::placeholder { color: rgba(246, 244, 238, 0.35); }
.pxl-notify-inline__input:focus {
border-color: var(--pxl-accent-2);
background: rgba(0, 0, 0, 0.42);
}
.pxl-notify-inline__submit {
height: 46px;
flex-shrink: 0;
padding: 0 18px;
border-radius: 12px;
border: none;
background: var(--pxl-accent-2);
color: var(--pxl-inverse-bg);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
font: 700 13.5px var(--pxl-font-body);
white-space: nowrap;
transition: background 180ms var(--pxl-ease), transform 180ms var(--pxl-ease);
}
.pxl-notify-inline__submit svg { flex-shrink: 0; }
.pxl-notify-inline__submit:hover:not(:disabled) {
background: var(--pxl-accent-2-deep);
transform: translateX(1px);
}
.pxl-notify-inline__submit:disabled { opacity: 0.5; cursor: default; }
.pxl-notify-inline__success {
display: none;
font: 500 13px var(--pxl-font-body);
color: var(--pxl-accent-2);
letter-spacing: 0.01em;
text-align: left;
}
.pxl-notify-inline.is-success .pxl-notify-inline__row,
.pxl-notify-inline.is-success .pxl-notify-inline__trust { display: none; }
.pxl-notify-inline.is-success .pxl-notify-inline__success { display: block; }
/* Trust-Badges-Zeile (Kein Spam · Kostenlos & unverbindlich · Zustellung in ca. 3 Minuten) */
.pxl-notify-inline__trust {
display: flex;
flex-wrap: wrap;
gap: 8px 20px;
padding-left: 60px;
}
.pxl-notify-inline__trust-item {
display: inline-flex;
align-items: center;
gap: 6px;
font: 500 11.5px var(--pxl-font-body);
color: rgba(246, 244, 238, 0.5);
}
.pxl-notify-inline__trust-item svg { color: var(--pxl-accent-2); flex-shrink: 0; }
@media (max-width: 760px) {
.pxl-notify-inline__form { flex: 1 1 100%; }
}
@media (max-width: 600px) {
.pxl-notify-inline { padding: 16px; border-radius: 14px; }
.pxl-notify-inline__title { font-size: 15px; }
.pxl-notify-inline__trust { padding-left: 0; gap: 6px 14px; }
}
/* Footer-Hint nur sichtbar wenn Render fertig */
.pixlip-configurator section[data-screen="render"] .pxl-render__footer-hint.is-hidden {
display: none;
}
/* Meta-Zeile (Eyebrow + ETA) verstecken bei Completion */
.pixlip-configurator section[data-screen="render"] .pxl-render__hero-meta.is-hidden {
display: none;
}
/* Zentrales Notify-Modal — Overlay über dem Render-Screen */
.pxl-notify-modal {
position: fixed;
inset: 0;
z-index: 2147483645;
display: none;
align-items: center;
justify-content: center;
padding: 24px;
}
.pxl-notify-modal.is-open {
display: flex;
animation: pxl-fade-in 220ms var(--pxl-ease) both;
}
.pxl-notify-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(8, 10, 14, 0.72);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.pxl-notify-modal__card {
position: relative;
width: min(520px, 100%);
background: linear-gradient(180deg, #1A1E26 0%, #14171E 100%);
border: 1px solid rgba(var(--pxl-acc2-rgb), 0.25);
border-radius: 18px;
padding: clamp(28px, 4vh, 40px) clamp(28px, 4vw, 44px);
color: var(--pxl-inverse-ink);
box-shadow:
0 32px 80px -20px rgba(0, 0, 0, 0.7),
0 0 60px -20px rgba(var(--pxl-acc2-rgb), 0.35);
animation: pxl-fade-up 360ms var(--pxl-ease) both;
}
.pxl-notify-modal__close {
position: absolute;
top: 14px;
right: 14px;
width: 36px;
height: 36px;
background: transparent;
border: 1px solid rgba(246, 244, 238, 0.1);
border-radius: 50%;
color: rgba(246, 244, 238, 0.65);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: color 180ms var(--pxl-ease), border-color 180ms var(--pxl-ease), background 180ms var(--pxl-ease);
}
.pxl-notify-modal__close:hover {
color: var(--pxl-inverse-ink);
border-color: rgba(246, 244, 238, 0.3);
background: rgba(255, 255, 255, 0.04);
}
.pxl-notify-modal__icon {
width: 64px;
height: 64px;
border-radius: 50%;
background: rgba(var(--pxl-acc2-rgb), 0.12);
border: 1px solid rgba(var(--pxl-acc2-rgb), 0.35);
color: var(--pxl-accent-2);
display: flex;
align-items: center;
justify-content: center;
margin: 0 0 18px;
}
.pxl-notify-modal__title {
font: 600 22px var(--pxl-font-display);
color: var(--pxl-inverse-ink);
margin: 0 0 10px;
letter-spacing: -0.015em;
line-height: 1.2;
}
.pxl-notify-modal__body {
font: 400 14px var(--pxl-font-body);
color: rgba(246, 244, 238, 0.7);
margin: 0 0 22px;
line-height: 1.55;
}
.pxl-notify-modal__form {
display: flex;
gap: 10px;
align-items: stretch;
flex-wrap: wrap;
}
.pxl-notify-modal__input {
flex: 1;
min-width: 220px;
height: 50px;
padding: 0 16px;
background: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(246, 244, 238, 0.15);
border-radius: 10px;
color: var(--pxl-inverse-ink);
font: 400 15px var(--pxl-font-body);
transition: border-color 180ms var(--pxl-ease), box-shadow 180ms var(--pxl-ease), background 180ms var(--pxl-ease);
}
.pxl-notify-modal__input::placeholder { color: rgba(246, 244, 238, 0.35); }
.pxl-notify-modal__input:focus {
outline: none;
border-color: var(--pxl-accent-2);
background: rgba(0, 0, 0, 0.45);
box-shadow: 0 0 0 3px rgba(var(--pxl-acc2-rgb), 0.18);
}
.pxl-notify-modal__submit {
height: 50px;
padding: 0 26px;
background: var(--pxl-accent-2);
color: var(--pxl-inverse-bg);
border: none;
border-radius: 10px;
font: 700 13px var(--pxl-font-body);
letter-spacing: 0.04em;
cursor: pointer;
transition: background 180ms var(--pxl-ease), transform 180ms var(--pxl-ease);
}
.pxl-notify-modal__submit:hover:not(:disabled) {
background: var(--pxl-accent-2-deep);
transform: translateY(-1px);
}
.pxl-notify-modal__submit:disabled { opacity: 0.5; cursor: default; transform: none; }
.pxl-notify-modal__legal {
margin-top: 14px;
font: 400 11px var(--pxl-font-body);
color: rgba(246, 244, 238, 0.4);
letter-spacing: 0.02em;
line-height: 1.5;
}
.pxl-notify-modal__success {
display: none;
text-align: center;
}
.pxl-notify-modal__success svg {
color: var(--pxl-accent-2);
background: rgba(var(--pxl-acc2-rgb), 0.12);
border-radius: 50%;
padding: 12px;
margin: 0 auto 16px;
display: block;
width: 72px;
height: 72px;
border: 1px solid rgba(var(--pxl-acc2-rgb), 0.35);
}
.pxl-notify-modal__success-title {
font: 600 20px var(--pxl-font-display);
color: var(--pxl-inverse-ink);
margin-bottom: 10px;
letter-spacing: -0.01em;
}
.pxl-notify-modal__success-body {
font: 400 14px var(--pxl-font-body);
color: rgba(246, 244, 238, 0.7);
margin: 0;
line-height: 1.55;
}
.pxl-notify-modal.is-success .pxl-notify-modal__form,
.pxl-notify-modal.is-success .pxl-notify-modal__legal,
.pxl-notify-modal.is-success .pxl-notify-modal__icon,
.pxl-notify-modal.is-success .pxl-notify-modal__title,
.pxl-notify-modal.is-success .pxl-notify-modal__body { display: none; }
.pxl-notify-modal.is-success .pxl-notify-modal__success { display: block; }
@media (max-width: 600px) {
.pxl-notify-modal { padding: 16px; }
.pxl-notify-modal__card { padding: 28px 22px; }
.pxl-notify-modal__form { flex-direction: column; }
.pxl-notify-modal__submit { width: 100%; }
}
/* ════════════════════════════════════════════════════════════════
STUDIO-DARK · Komponenten-Adapter für alle Non-Hero-Screens
2026-05-27: Selection, Brand, Style, Refine, Contact, Success
════════════════════════════════════════════════════════════════ */
/* Stand-Cards auf dunklem Theme */
.pixlip-configurator section[data-screen="selection"] .pxl-stand-card {
background: rgba(255, 255, 255, 0.03) !important;
border: 1px solid rgba(246, 244, 238, 0.08) !important;
color: var(--pxl-inverse-ink) !important;
}
.pixlip-configurator section[data-screen="selection"] .pxl-stand-card:hover {
border-color: rgba(var(--pxl-acc2-rgb), 0.45) !important;
background: rgba(255, 255, 255, 0.06) !important;
transform: translateY(-3px);
box-shadow:
0 12px 32px -12px rgba(0, 0, 0, 0.5),
0 0 40px -16px rgba(var(--pxl-acc2-rgb), 0.3);
}
.pixlip-configurator section[data-screen="selection"] .pxl-stand-card.is-selected {
border-color: var(--pxl-accent-2) !important;
background: rgba(var(--pxl-acc2-rgb), 0.08) !important;
box-shadow:
0 0 0 2px rgba(var(--pxl-acc2-rgb), 0.4),
0 14px 36px -10px rgba(0, 0, 0, 0.5);
}
.pixlip-configurator section[data-screen="selection"] .pxl-stand-card__cat {
background: rgba(255, 255, 255, 0.08);
color: rgba(246, 244, 238, 0.85);
}
.pixlip-configurator section[data-screen="selection"] .pxl-stand-card__name,
.pixlip-configurator section[data-screen="selection"] .pxl-stand-card__price {
color: var(--pxl-inverse-ink);
}
.pixlip-configurator section[data-screen="selection"] .pxl-stand-card__meta {
color: rgba(246, 244, 238, 0.55);
}
/* Selection-Footer dunkel */
.pixlip-configurator section[data-screen="selection"] .pxl-render__footer-bar,
.pixlip-configurator section[data-screen="selection"] .pxl-selection__footer,
.pixlip-configurator section[data-screen="selection"] [data-role="selection-actions"] {
background: rgba(14, 17, 22, 0.6);
border-top: 1px solid rgba(246, 244, 238, 0.08);
backdrop-filter: blur(8px);
color: rgba(246, 244, 238, 0.85);
}
.pixlip-configurator section[data-screen="selection"] [data-role="selection-counter"],
.pixlip-configurator section[data-screen="selection"] .pxl-selection-counter {
color: rgba(246, 244, 238, 0.55);
}
/* Inputs auf dunklem Theme — Contact, Brand, Notify */
.pixlip-configurator section[data-screen]:not([data-screen="hero"]) input[type="text"],
.pixlip-configurator section[data-screen]:not([data-screen="hero"]) input[type="email"],
.pixlip-configurator section[data-screen]:not([data-screen="hero"]) input[type="url"],
.pixlip-configurator section[data-screen]:not([data-screen="hero"]) input[type="tel"],
.pixlip-configurator section[data-screen]:not([data-screen="hero"]) textarea {
background: rgba(0, 0, 0, 0.25);
border: 1px solid rgba(246, 244, 238, 0.12);
color: var(--pxl-inverse-ink);
}
.pixlip-configurator section[data-screen]:not([data-screen="hero"]) input::placeholder,
.pixlip-configurator section[data-screen]:not([data-screen="hero"]) textarea::placeholder {
color: rgba(246, 244, 238, 0.35);
}
.pixlip-configurator section[data-screen]:not([data-screen="hero"]) input:focus,
.pixlip-configurator section[data-screen]:not([data-screen="hero"]) textarea:focus {
border-color: var(--pxl-accent-2);
background: rgba(0, 0, 0, 0.4);
box-shadow: 0 0 0 3px rgba(var(--pxl-acc2-rgb), 0.16);
}
/* Contact-Field Labels und Helper-Text auf dunklem Theme */
.pixlip-configurator section[data-screen="contact"] .pxl-contact-field__label,
.pixlip-configurator section[data-screen="contact"] label {
color: rgba(246, 244, 238, 0.75);
}
.pixlip-configurator section[data-screen="contact"] .pxl-contact-consent {
color: rgba(246, 244, 238, 0.55);
}
/* Generelle Ghost-Buttons + Footer-Hint auf dunklem Theme */
.pixlip-configurator section[data-screen]:not([data-screen="hero"]):not([data-screen="render"]) .pxl-btn--ghost {
background: transparent;
color: rgba(246, 244, 238, 0.85);
border-color: rgba(246, 244, 238, 0.18);
}
.pixlip-configurator section[data-screen]:not([data-screen="hero"]):not([data-screen="render"]) .pxl-btn--ghost:hover {
border-color: rgba(246, 244, 238, 0.45);
background: rgba(255, 255, 255, 0.04);
color: var(--pxl-inverse-ink);
}
/* Refine: Pills + Refine-Card dunkel */
.pixlip-configurator section[data-screen="refine"] .pxl-pill,
.pixlip-configurator section[data-screen="refine"] .pxl-refine__pill {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(246, 244, 238, 0.15);
color: rgba(246, 244, 238, 0.85);
}
.pixlip-configurator section[data-screen="refine"] .pxl-pill:hover {
border-color: rgba(var(--pxl-acc2-rgb), 0.45);
background: rgba(var(--pxl-acc2-rgb), 0.06);
}
/* Brand-Customize + Style-Options Chips dunkel */
.pixlip-configurator section[data-screen="brand-customize"] .pxl-bc-textarea,
.pixlip-configurator section[data-screen="brand-customize"] .pxl-bc-color-swatch,
.pixlip-configurator section[data-screen="style-options"] .pxl-style-chip {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(246, 244, 238, 0.15);
color: var(--pxl-inverse-ink);
}
.pixlip-configurator section[data-screen="style-options"] .pxl-style-chip:hover {
border-color: rgba(var(--pxl-acc2-rgb), 0.5);
background: rgba(var(--pxl-acc2-rgb), 0.06);
}
.pixlip-configurator section[data-screen="style-options"] .pxl-style-chip__sub {
color: rgba(246, 244, 238, 0.5);
}
/* Success: Confetti-Container bleibt, aber Surface dunkel */
.pixlip-configurator section[data-screen="success"] .pxl-success__sla,
.pixlip-configurator section[data-screen="success"] .pxl-summary__design,
.pixlip-configurator section[data-screen="success"] .pxl-success__check {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(246, 244, 238, 0.1);
}
/* Schließen-Button (X) hell auf dunklem Theme — overall */
.pixlip-configurator .pxl-fullscreen-close {
background: rgba(255, 255, 255, 0.06) !important;
border-color: rgba(255, 255, 255, 0.15) !important;
color: rgba(246, 244, 238, 0.85) !important;
}
.pixlip-configurator .pxl-fullscreen-close:hover {
background: rgba(255, 255, 255, 0.12) !important;
color: var(--pxl-inverse-ink) !important;
}
/* ════ Zurück-Button (vormals X): FINALE Form — überschreibt die diversen Alt-Regeln
(44px-Kreis etc.) vom alten Schließen-Button. Pille RECHTS oben, Pfeil + "Zurück". ══ */
.pixlip-configurator .pxl-fullscreen-close {
left: auto !important;
right: max(1rem, env(safe-area-inset-right)) !important;
width: auto !important;
min-width: 0 !important;
height: 2.5rem !important;
min-height: 2.5rem !important;
padding: 0 1.15rem 0 0.85rem !important;
border-radius: 999px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0.4rem !important;
font: 600 0.85rem var(--pxl-font-body, system-ui, sans-serif) !important;
white-space: nowrap !important;
line-height: 1 !important;
}
.pixlip-configurator .pxl-fullscreen-close svg { width: 1.05rem !important; height: 1.05rem !important; flex-shrink: 0 !important; }
.pixlip-configurator .pxl-fullscreen-close__label { display: inline-block !important; line-height: 1 !important; }
/* Success-Seite: "Bestätigung an: …" zuverlässig zentriert.
Ursache war eine max-width (~539px) am + margin-left:0 → schmaler Block links.
margin:auto zentriert den Block selbst; text-align zentriert den Text darin. */
.pixlip-configurator section[data-screen="success"] .pxl-success__email-hint,
.pixlip-configurator .pxl-success__email-hint { text-align: center !important; display: block !important; margin-left: auto !important; margin-right: auto !important; }
/* "Zur Bestellung" im Kontakt-Summary (Pixlip-Feedback 2026-06-16) */
.pxl-summary__order-btn { margin-top: 0.85rem; align-self: flex-start; text-decoration: none; }
/* Render fertig: Mail-Benachrichtigung sinnlos (Designs sind da) → Mail-Teile raus,
nur der integrierte Zurück-Button bleibt (Pixlip-Feedback 2026-06-16). */
/* Render fertig: reiche Box-Teile aus, zurück auf kompakte Zeile (Zurück + Share). */
.pxl-notify-inline.is-complete {
width: auto;
max-width: none;
flex-direction: row;
align-items: center;
gap: 12px;
padding: 8px 14px;
border-radius: 999px;
box-shadow: none;
}
.pxl-notify-inline.is-complete .pxl-notify-inline__row,
.pxl-notify-inline.is-complete .pxl-notify-inline__trust,
.pxl-notify-inline.is-complete .pxl-notify-inline__success { display: none !important; }
/* S/M/L-Filter-Pills: dezent + lesbar auf dem dunklen Selection-Screen (Pixlip-Feedback
2026-06-17). Vorher Light-Base-Variablen → inaktiv dunkler Text auf dunklem Grund
(unlesbar) + grell-weiße Count-Bubbles. Jetzt zurückhaltend, Akzent nur für "aktiv". */
.pixlip-configurator section[data-screen="selection"] .pxl-cat-filter {
background: rgba(255, 255, 255, 0.035) !important;
color: rgba(246, 244, 238, 0.6) !important;
border: 1px solid rgba(255, 255, 255, 0.10) !important;
font-weight: 500 !important;
}
.pixlip-configurator section[data-screen="selection"] .pxl-cat-filter:hover {
color: rgba(246, 244, 238, 0.92) !important;
border-color: rgba(255, 255, 255, 0.22) !important;
}
.pixlip-configurator section[data-screen="selection"] .pxl-cat-filter.is-active {
background: rgba(var(--pxl-acc2-rgb), 0.12) !important;
color: var(--pxl-inverse-ink, #f6f4ee) !important;
border-color: rgba(var(--pxl-acc2-rgb), 0.45) !important;
}
.pixlip-configurator section[data-screen="selection"] .pxl-cat-filter__count {
background: rgba(255, 255, 255, 0.08) !important;
color: rgba(246, 244, 238, 0.5) !important;
}
.pixlip-configurator section[data-screen="selection"] .pxl-cat-filter.is-active .pxl-cat-filter__count {
background: rgba(var(--pxl-acc2-rgb), 0.22) !important;
color: var(--pxl-inverse-ink, #f6f4ee) !important;
}
/* Original-Stand klein als Referenz unter dem KI-Design (Pixlip-Feedback 2026-06-16) */
.pxl-summary__original { margin-top: 1.4rem; }
.pxl-summary__original-frame {
max-width: 240px;
border-radius: 12px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.09);
background: rgba(255, 255, 255, 0.025);
}
.pxl-summary__original-img { display: block; width: 100%; height: auto; }
/* KI-Render im Kontakt-Summary VOLLSTÄNDIG zeigen (Pixlip-Feedback 2026-06-16):
Die geteilte viewer/hero-img-Regel nutzt object-fit:cover + max-height:460px —
für den 3D-Viewer ok, fürs fertige Bild aber falsch: bei breiten Viewports wurden
bis zu 63% vertikal abgeschnitten. Das Render-IMG bekommt hier seine natürliche
Form (width/height:auto → 3:2), zentriert + gedeckelt; nie beschnitten, responsive. */
.pixlip-configurator .pxl-summary__hero-img {
height: auto !important;
min-height: 0 !important;
max-height: none !important;
width: 100%;
max-width: 760px;
object-fit: contain;
align-self: start;
margin-left: auto;
margin-right: auto;
}
/* Der Container muss sich der natürlichen Bildhöhe anpassen — sonst schnitt seine
max-height:460px + overflow:hidden das height:auto-Bild bei bestimmten Breiten
unten ab (gemessen: 1120px → 48px abgeschnitten). Pixlip-Feedback 2026-06-16. */
.pixlip-configurator .pxl-summary__viewer-wrap:has(.pxl-summary__hero-img) {
height: auto;
min-height: 0;
max-height: none;
}
/* ── Render-Fehler-Card (Studio-Dark, kundenfreundlich) — Pixlip-Feedback 2026-06-16 ── */
.pxl-render__errorcard {
max-width: 460px;
margin: clamp(2rem, 6vh, 4rem) auto;
padding: 2.5rem 2rem 2.25rem;
text-align: center;
background: rgba(255, 255, 255, 0.035);
border: 1px solid rgba(255, 255, 255, 0.09);
border-radius: 20px;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.7rem;
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
animation: pxl-errorcard-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes pxl-errorcard-in {
from { opacity: 0; transform: translateY(10px) scale(0.985); }
to { opacity: 1; transform: none; }
}
.pxl-render__errorcard-icon {
width: 66px;
height: 66px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 0.35rem;
/* Default (busy/Auslastung): türkiser, einladender Akzent statt Alarm */
background: rgba(var(--pxl-acc2-rgb), 0.13);
color: var(--pxl-accent-2, #00b4b8);
}
.pxl-render__errorcard-icon svg { width: 30px; height: 30px; }
.pxl-render__errorcard--error .pxl-render__errorcard-icon {
background: rgba(246, 244, 238, 0.07);
color: rgba(246, 244, 238, 0.78);
}
.pxl-render__errorcard-title {
margin: 0;
font-size: clamp(1.15rem, 2.4vw, 1.35rem);
font-weight: 700;
line-height: 1.25;
color: var(--pxl-inverse-ink, #f6f4ee);
}
.pxl-render__errorcard-body {
margin: 0;
max-width: 40ch;
font-size: 0.95rem;
line-height: 1.6;
color: rgba(246, 244, 238, 0.66);
}
.pxl-render__errorcard-actions {
display: flex;
flex-wrap: wrap;
gap: 0.7rem;
justify-content: center;
margin-top: 1.15rem;
}
.pxl-render__errorcard-retry {
/* primärer CTA leicht hervorgehoben mit dem Akzent */
background: var(--pxl-accent-2, #00b4b8);
border-color: var(--pxl-accent-2, #00b4b8);
color: #04201f;
}
/* ════════════════════════════════════════════════════════════════
Kontakt-Seite · Studio-Dark Redesign · 2026-05-28
AR-Viewer schwarz, Summary-Card dunkel, Code-Anzeige, schlankes
Formular (Name/E-Mail/Firma/Telefon) + Türkis-CTA.
════════════════════════════════════════════════════════════════ */
.pixlip-configurator section[data-screen="contact"] .pxl-summary {
background: linear-gradient(170deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 100%);
border: 1px solid rgba(246, 244, 238, 0.1);
box-shadow: 0 24px 48px -16px rgba(0,0,0,0.5), 0 0 40px -16px rgba(var(--pxl-acc2-rgb),0.12);
}
/* AR-/3D-Viewer-Hintergrund SCHWARZ */
.pixlip-configurator section[data-screen="contact"] .pxl-summary__viewer,
.pixlip-configurator section[data-screen="contact"] .pxl-summary__hero-img,
.pixlip-configurator section[data-screen="contact"] .pxl-summary__hero-placeholder {
background: #000 !important;
}
.pixlip-configurator section[data-screen="contact"] .pxl-summary__viewer-wrap {
border: 1px solid rgba(var(--pxl-acc2-rgb),0.18);
border-radius: var(--pxl-radius);
overflow: hidden;
}
/* Summary-Texte auf dunklem Grund lesbar */
.pixlip-configurator section[data-screen="contact"] .pxl-summary__stand-name,
.pixlip-configurator section[data-screen="contact"] .pxl-summary__dims-value,
.pixlip-configurator section[data-screen="contact"] .pxl-summary__value {
color: var(--pxl-inverse-ink);
}
.pixlip-configurator section[data-screen="contact"] .pxl-summary__brand-name,
.pixlip-configurator section[data-screen="contact"] .pxl-summary__dims-label,
.pixlip-configurator section[data-screen="contact"] .pxl-summary__label,
.pixlip-configurator section[data-screen="contact"] .pxl-summary__qr-hint {
color: rgba(246, 244, 238, 0.55);
}
.pixlip-configurator section[data-screen="contact"] .pxl-summary__price { color: var(--pxl-accent-2); }
.pixlip-configurator section[data-screen="contact"] .pxl-summary__dims-row,
.pixlip-configurator section[data-screen="contact"] .pxl-summary__qr,
.pixlip-configurator section[data-screen="contact"] .pxl-summary__designs-wrap,
.pixlip-configurator section[data-screen="contact"] .pxl-summary__aishot {
border-color: rgba(246, 244, 238, 0.1);
}
.pixlip-configurator section[data-screen="contact"] .pxl-summary__aishot-frame {
border: 1px solid rgba(var(--pxl-acc2-rgb),0.18);
}
.pixlip-configurator section[data-screen="contact"] .pxl-summary__design {
background: rgba(255,255,255,0.04);
border-color: rgba(246, 244, 238, 0.1);
}
/* Code-Anzeige — Türkis-Akzent, Mono */
.pixlip-configurator section[data-screen="contact"] .pxl-contact-code {
display: flex; flex-direction: column; gap: 4px;
margin: 22px 0 4px;
padding: 16px 20px;
background: rgba(var(--pxl-acc2-rgb), 0.06);
border: 1px solid rgba(var(--pxl-acc2-rgb), 0.28);
border-radius: 12px;
}
.pixlip-configurator section[data-screen="contact"] .pxl-contact-code__label {
font: 600 11px var(--pxl-font-body);
letter-spacing: 0.14em; text-transform: uppercase;
color: rgba(246, 244, 238, 0.55);
}
.pixlip-configurator section[data-screen="contact"] .pxl-contact-code__value {
font: 600 22px var(--pxl-font-mono);
letter-spacing: 0.06em; color: var(--pxl-accent-2);
font-variant-numeric: tabular-nums;
}
.pixlip-configurator section[data-screen="contact"] .pxl-contact-code__hint {
font: 400 12px var(--pxl-font-body);
color: rgba(246, 244, 238, 0.45);
}
/* Schlankes Formular: 2-Spalten-Grid, CTA Türkis */
.pixlip-configurator section[data-screen="contact"] .pxl-contact-form--lean {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px 18px;
margin-top: 22px;
}
@media (max-width: 559px) {
.pixlip-configurator section[data-screen="contact"] .pxl-contact-form--lean {
grid-template-columns: 1fr;
}
}
.pixlip-configurator section[data-screen="contact"] .pxl-contact-form--lean .pxl-contact-field--full {
grid-column: 1 / -1;
}
.pixlip-configurator section[data-screen="contact"] .pxl-contact-hint {
color: rgba(246, 244, 238, 0.5);
text-align: left;
}
/* === Miro-Korrekturen 2026-06-10 === */
/* Andreas Müller (Pixlip), Miro-Board. Rein additiv. Nur Sichtbarkeit/Kontrast
auf Studio-Dark + Stile für neu hinzugekommene Hero-/Render-Elemente. */
/* --- A) Screen 06: Footer-Status-Text lesbar auf dunklem BG ----------------
Bestand (Z.4646) setzt var(--pxl-slate) (#3D4751) → auf dunkel unlesbar.
Scope section[data-screen="selection"] gewinnt Specificity gegen Z.4646. */
.pixlip-configurator section[data-screen="selection"] .pxl-selection__footer-info {
color: rgba(255, 255, 255, 0.9);
}
.pixlip-configurator section[data-screen="selection"] .pxl-selection__footer-info strong {
color: var(--pxl-inverse-ink);
}
/* --- B) Screen 06: Footer-Buttons klar erkennbar auf dunklem BG ------------
Ghost-Button braucht sichtbaren Rahmen + helle Schrift; Primary-CTA
(Türkis-Akzent passend zum Studio-Dark) deutlich abheben. */
.pixlip-configurator section[data-screen="selection"] .pxl-selection__footer .pxl-btn--ghost {
color: var(--pxl-inverse-ink);
border-color: rgba(246, 244, 238, 0.45);
background: rgba(255, 255, 255, 0.04);
}
.pixlip-configurator section[data-screen="selection"] .pxl-selection__footer .pxl-btn--ghost:hover:not(:disabled) {
color: var(--pxl-inverse-bg);
background: var(--pxl-inverse-ink);
border-color: var(--pxl-inverse-ink);
}
.pixlip-configurator section[data-screen="selection"] .pxl-selection__footer .pxl-btn:not(.pxl-btn--ghost) {
background: var(--pxl-accent-2);
border-color: var(--pxl-accent-2);
color: var(--pxl-inverse-bg);
box-shadow: 0 0 0 1px rgba(var(--pxl-acc2-rgb), 0.4), 0 8px 24px -10px rgba(var(--pxl-acc2-rgb), 0.6);
}
.pixlip-configurator section[data-screen="selection"] .pxl-selection__footer .pxl-btn:not(.pxl-btn--ghost):hover:not(:disabled) {
background: var(--pxl-accent-2-deep);
border-color: var(--pxl-accent-2-deep);
color: var(--pxl-inverse-ink);
}
/* --- C) Hero-Eyebrow (neu) — kleiner, uppercase, türkis/gedimmt -----------
Für die Hero-Glass-Card (Screen 0). NICHT zu verwechseln mit der
bestehenden .pxl-render__hero-eyebrow (Render-Screen). */
.pixlip-configurator .pxl-hero__eyebrow {
display: block;
margin-bottom: 0.85rem;
font-family: var(--pxl-font-body);
font-size: var(--pxl-t-eyebrow-size, 11px);
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
text-align: center;
color: var(--pxl-accent-2);
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}
/* --- D) Render-Subline (neu) — dezenter Subtext unter der H2 (muted) ------
data-role="render-subline"
. Studio-Dark → gedimmtes Inverse-Ink. */
.pixlip-configurator .pxl-render__subline {
margin-top: 0.4rem;
font-family: var(--pxl-font-body);
font-size: 0.875rem;
font-weight: 400;
line-height: 1.5;
color: rgba(246, 244, 238, 0.6);
}
/* Bestandsregel Z.610 ([data-screen="render"] .pxl-screen-header p {display:none})
blendet ALLE
im Render-Header aus → unsere Subline gezielt wieder einblenden.
Auf sehr niedrigen Viewports (no-scroll 100dvh wird eng) bleibt sie aus, damit
Hero-Stage + Thumbs nicht clippen. max-width:600px schützt schmale Phones,
max-height:720px schützt niedrige Landscape-/kleine Screens. */
.pixlip-configurator [data-screen="render"] .pxl-screen-header p.pxl-render__subline,
.pixlip-configurator [data-screen="render"] .pxl-screen-header p[data-role="render-subline"] {
display: block;
max-width: 56ch;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 600px), (max-height: 720px) {
.pixlip-configurator [data-screen="render"] .pxl-screen-header p[data-role="render-subline"] {
display: none;
}
}
/* --- E) Render-Zurück-Button (neu) — dezent in der Chrome-Zeile oben --------
data-role="render-nav-back". WICHTIG: oben links sitzt ein FIXED .pxl-fullscreen-logo
(PIXLIP-Wordmark, ~104px breit, z-index 100000). Der Button darf NICHT darunter
liegen → absolut positioniert RECHTS neben dem Logo (Desktop) bzw. DARUNTER (Mobile).
absolute statt im Flow, damit die zentrierte Headline nicht nach unten geschoben wird. */
.pixlip-configurator section[data-screen="render"] .pxl-screen-header {
position: relative;
padding-top: 2.75rem; /* reserviert die obere Chrome-Zeile (Logo + Zurück), Headline startet darunter */
}
/* Zurück-Button sitzt oben links in der reichen Notify-Box (Karten-Layout). */
.pixlip-configurator .pxl-notify-inline__back {
display: inline-flex;
align-items: center;
align-self: flex-start;
gap: 5px;
flex-shrink: 0;
padding: 2px 8px 2px 0;
border: none;
background: transparent;
color: rgba(246, 244, 238, 0.6);
font: 600 11px var(--pxl-font-body);
text-transform: uppercase;
letter-spacing: 0.05em;
cursor: pointer;
transition: color var(--pxl-dur-base) var(--pxl-ease);
}
.pixlip-configurator .pxl-notify-inline__back:hover { color: var(--pxl-inverse-ink); }
.pixlip-configurator .pxl-notify-inline__back svg { width: 15px; height: 15px; flex-shrink: 0; }
/* Bei fertiger (kompakter) Zeile: Trenner rechts vom Zurück-Button. */
.pixlip-configurator .pxl-notify-inline.is-complete .pxl-notify-inline__back {
border-right: 1px solid rgba(246, 244, 238, 0.14);
padding-right: 11px;
}
@media (max-width: 600px) {
.pixlip-configurator .pxl-notify-inline.is-complete .pxl-notify-inline__back { border-right: none; padding-right: 6px; }
}
/* Screen 09 — Kontakt-Formular-Kopf ("Wohin dürfen wir dein Angebot senden?") */
.pixlip-configurator .pxl-contact-form__head {
margin: 0 0 1.25rem;
}
.pixlip-configurator .pxl-contact-form__title {
margin: 0 0 0.35rem;
font-size: 1.125rem;
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.01em;
color: var(--pxl-inverse-ink, #F6F4EE);
}
.pixlip-configurator .pxl-contact-form__lead {
margin: 0;
font-size: 0.875rem;
line-height: 1.5;
color: rgba(246, 244, 238, 0.62);
}
@media (max-width: 540px) {
.pixlip-configurator .pxl-contact-form__title { font-size: 1.05rem; }
}
/* Screen 09 — Kontakt-Header: fixes PIXLIP-Logo (oben links, z-index 100000) darf
Headline/Subtitle NICHT überlappen (v.a. Mobile). Header nach unten freistellen +
Subtitle sauber mittig begrenzen. */
.pixlip-configurator section[data-screen="contact"] .pxl-screen-header {
padding-top: 2.25rem;
}
.pixlip-configurator section[data-screen="contact"] .pxl-screen-header > p {
max-width: 640px;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 600px) {
.pixlip-configurator section[data-screen="contact"] .pxl-screen-header {
padding-top: 5rem; /* Headline klar UNTER das fixe PIXLIP-Logo schieben */
}
.pixlip-configurator section[data-screen="contact"] .pxl-screen-header h2 {
font-size: clamp(1.5rem, 6vw, 2rem);
}
}
/* Success ("Vielen Dank") — Dark-Theme-Kontrast. Die Basis nutzt dunkle Tokens
(--pxl-color-fg #111 / --pxl-slate), die auf dem dunklen Success-Screen unsichtbar
bzw. zu kontrastarm waren — v.a. die SLA-Pill "Wir melden uns innerhalb 24 Stunden". */
.pixlip-configurator section[data-screen="success"] .pxl-success__title {
color: var(--pxl-inverse-ink);
}
.pixlip-configurator section[data-screen="success"] .pxl-success__sla {
color: var(--pxl-inverse-ink);
background: rgba(var(--pxl-acc2-rgb), 0.10);
border-color: rgba(var(--pxl-acc2-rgb), 0.40);
}
.pixlip-configurator section[data-screen="success"] .pxl-success__sla svg { color: var(--pxl-accent-2); }
.pixlip-configurator section[data-screen="success"] .pxl-success__sla strong { color: var(--pxl-inverse-ink); }
.pixlip-configurator section[data-screen="success"] p.pxl-success__message {
color: rgba(246, 244, 238, 0.66);
text-align: center;
margin-left: auto;
margin-right: auto;
}
.pixlip-configurator section[data-screen="success"] .pxl-success__email-hint {
color: rgba(246, 244, 238, 0.5);
text-align: center;
}
.pixlip-configurator section[data-screen="success"] .pxl-success__email-hint strong {
color: var(--pxl-inverse-ink);
}
.pixlip-configurator section[data-screen="success"] .pxl-success__refid {
color: rgba(246, 244, 238, 0.7);
background: rgba(255, 255, 255, 0.04);
border-color: rgba(246, 244, 238, 0.12);
}
/* === Ende Miro-Korrekturen 2026-06-10 === */
/* ============================================================
THEME-BLEED-HARDENING (2026-06-11)
Live-Shop-Themes (pixlip.com) bringen globale Form-/Label-/Input-Styles
mit, die in den App-Block durchschlagen (Dev-Test-Shop = Default-Theme →
unauffällig). Hier werden die layout-kritischen Eigenschaften re-asserted,
strikt gescoped auf .pixlip-configurator, defensiv mit !important.
Symptome aus Live-Test (Tobias, 11.06.): Float-Label/Pflicht-Sternchen
verrutscht + Notify-Leiste verschoben.
============================================================ */
/* 1) Box-Model-/Typo-Baseline für unsere Formular-Elemente (Theme-neutral) */
.pixlip-configurator input,
.pixlip-configurator textarea,
.pixlip-configurator select,
.pixlip-configurator button,
.pixlip-configurator label {
box-sizing: border-box;
font-family: inherit;
line-height: normal;
letter-spacing: normal;
}
/* 2) Kontakt-Float-Label härten — absolute Positionierung gegen Theme-Bleed sichern */
.pixlip-configurator .pxl-contact-field__wrap {
position: relative !important;
display: block !important;
overflow: visible !important;
transform: none !important;
}
.pixlip-configurator .pxl-contact-field--float .pxl-contact-field__input,
.pixlip-configurator .pxl-contact-field--float .pxl-contact-field__textarea {
box-sizing: border-box !important;
width: 100% !important;
margin: 0 !important;
min-height: 0 !important;
-webkit-appearance: none !important;
appearance: none !important;
padding: 1.4rem 1rem 0.55rem !important;
/* Theme setzt Input-Hintergrund auf weiß → helles Float-Label wird unsichtbar.
Soll-Design erzwingen, damit das Ruhe-Label lesbar bleibt. */
background: var(--pxl-color-bg) !important;
color: var(--pxl-color-fg) !important;
border: 1px solid var(--pxl-color-border) !important;
}
.pixlip-configurator .pxl-contact-field--float .pxl-contact-field__textarea {
padding-top: 1.6rem !important;
min-height: 7.5rem !important;
}
.pixlip-configurator .pxl-contact-field--float .pxl-contact-field__label {
position: absolute !important;
margin: 0 !important;
box-sizing: border-box !important;
max-width: calc(100% - 2rem);
display: block !important;
}
/* Theme darf keine eigenen Pseudo-Sternchen/Icons an unsere Labels hängen */
.pixlip-configurator .pxl-contact-field__label::before,
.pixlip-configurator .pxl-contact-field__label::after { content: none !important; }
/* Unser echtes Pflicht-Sternchen bleibt inline am Label-Text */
.pixlip-configurator .pxl-contact-field__label .req {
position: static !important;
display: inline !important;
float: none !important;
transform: none !important;
margin-left: 0.15rem !important;
}
/* 2b) Kontaktfelder Studio-Dark erzwingen.
Bug: Soll-Var --pxl-color-bg = --pxl-canvas (WEISS, Light-Base) → Felder weiß,
gleichzeitig Float-Label hell (dunkler Contact-Screen) ⇒ helles Label auf weißem
Feld = unsichtbar. Fix: Felder dunkel wie die Notify-Leiste (inverse-Variablen),
Text/Placeholder/Label hell in BEIDEN Float-Zuständen. Screen-gescoped, damit der
Light-Kontext anderswo unberührt bleibt. */
/* Felder dunkel — ROBUST gegen Theme-Weiß UND Browser-Autofill.
`background` allein schlägt Autofill NICHT; erst der inset-Box-Shadow-Trick
übermalt das helle Autofill-Feld. Sonst wird getippter/autofill-Text hell auf
hellem Autofill-Grund = weiß auf weiß, SOBALD das Feld gefüllt ist. */
.pixlip-configurator section[data-screen="contact"] .pxl-contact-field__input,
.pixlip-configurator section[data-screen="contact"] .pxl-contact-field__textarea,
.pixlip-configurator section[data-screen="contact"] .pxl-contact-field__input:hover,
.pixlip-configurator section[data-screen="contact"] .pxl-contact-field__input:focus,
.pixlip-configurator section[data-screen="contact"] .pxl-contact-field__textarea:focus {
background-color: #15171B !important;
-webkit-box-shadow: 0 0 0 100px #15171B inset !important;
box-shadow: 0 0 0 100px #15171B inset !important;
color: var(--pxl-inverse-ink) !important;
-webkit-text-fill-color: var(--pxl-inverse-ink) !important;
caret-color: var(--pxl-accent-2) !important;
border: 1px solid rgba(246, 244, 238, 0.14) !important;
}
/* Autofill-Zustand separat — falls ein Browser das Pseudo nicht kennt, bleibt
die Hauptregel oben gültig (keine Selector-List-Invalidierung). */
.pixlip-configurator section[data-screen="contact"] .pxl-contact-field__input:-webkit-autofill,
.pixlip-configurator section[data-screen="contact"] .pxl-contact-field__input:-webkit-autofill:hover,
.pixlip-configurator section[data-screen="contact"] .pxl-contact-field__input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 100px #15171B inset !important;
-webkit-text-fill-color: var(--pxl-inverse-ink) !important;
caret-color: var(--pxl-accent-2) !important;
}
.pixlip-configurator section[data-screen="contact"] .pxl-contact-field__input::placeholder,
.pixlip-configurator section[data-screen="contact"] .pxl-contact-field__textarea::placeholder {
color: rgba(246, 244, 238, 0.40) !important;
}
/* Fokus: nur Border-Akzent (Hintergrund bleibt via Box-Shadow dunkel). */
.pixlip-configurator section[data-screen="contact"] .pxl-contact-field__input:focus,
.pixlip-configurator section[data-screen="contact"] .pxl-contact-field__textarea:focus {
border-color: var(--pxl-accent-2) !important;
}
/* Layout erzwingen (NUR input, nicht textarea) — Theme überschreibt im :focus das
padding/line-height, dadurch rutscht der Wert hoch und überlappt das schwebende
Label. Hohe Spezifität + :focus erzwingt: Wert sitzt UNTER dem Label. */
.pixlip-configurator section[data-screen="contact"] .pxl-contact-field--float .pxl-contact-field__input,
.pixlip-configurator section[data-screen="contact"] .pxl-contact-field--float .pxl-contact-field__input:hover,
.pixlip-configurator section[data-screen="contact"] .pxl-contact-field--float .pxl-contact-field__input:focus {
box-sizing: border-box !important;
min-height: 3.4rem !important;
padding: 1.5rem 1rem 0.5rem !important;
line-height: 1.2 !important;
}
/* Schwebendes Label garantiert klein + ganz oben (auch im Fokus, gegen Theme). */
.pixlip-configurator section[data-screen="contact"] .pxl-contact-field--float .pxl-contact-field__input:focus ~ .pxl-contact-field__label,
.pixlip-configurator section[data-screen="contact"] .pxl-contact-field--float .pxl-contact-field__input:not(:placeholder-shown) ~ .pxl-contact-field__label {
top: 0.5rem !important;
transform: none !important;
font-size: 0.62rem !important;
line-height: 1 !important;
}
/* Float-Label in BEIDEN Zuständen hell: Ruhe gedämpft, schwebend kräftig
(überschreibt die Light-Default-Regel color:--pxl-color-fg = graphite). */
.pixlip-configurator section[data-screen="contact"] .pxl-contact-field--float .pxl-contact-field__label {
color: rgba(246, 244, 238, 0.55) !important;
}
.pixlip-configurator section[data-screen="contact"] .pxl-contact-field--float .pxl-contact-field__input:focus ~ .pxl-contact-field__label,
.pixlip-configurator section[data-screen="contact"] .pxl-contact-field--float .pxl-contact-field__input:not(:placeholder-shown) ~ .pxl-contact-field__label,
.pixlip-configurator section[data-screen="contact"] .pxl-contact-field--float .pxl-contact-field__textarea:focus ~ .pxl-contact-field__label,
.pixlip-configurator section[data-screen="contact"] .pxl-contact-field--float .pxl-contact-field__textarea:not(:placeholder-shown) ~ .pxl-contact-field__label {
color: var(--pxl-inverse-ink) !important;
}
/* Pflicht-Sternchen: dezentes Türkis statt Alarm-Rot — passt zum Studio-Dark. */
.pixlip-configurator section[data-screen="contact"] .pxl-contact-field__label .req {
color: var(--pxl-accent-2) !important;
opacity: 0.9 !important;
}
/* 3) Notify-Leiste härten (Flex-Row: Zurück | Hint | Input | Submit) */
.pixlip-configurator .pxl-notify-inline { display: flex !important; align-items: center !important; }
/* margin/padding-Reset: Theme injiziert via generischem form-Selektor eine
margin-bottom → im align-items:center-Flex zieht das den Input+Button nach oben
gegenüber dem Text (sichtbarer Versatz). */
.pixlip-configurator .pxl-notify-inline__form { display: flex !important; align-items: center !important; margin: 0 !important; padding: 0 !important; }
/* is-success: Erfolgsmeldung MUSS Form + Hint verdrängen. Sonst überschreibt das
display:flex !important oben die Basis-is-success-Regel (display:none OHNE !important)
→ nach Eintragung/Resize bleibt das leere Eingabefeld sichtbar statt "Du erhältst in
Kürze eine E-Mail" (besonders bei Mobile-Breite, wo das Form die ganze Zeile nimmt). */
.pixlip-configurator .pxl-notify-inline.is-success .pxl-notify-inline__form,
.pixlip-configurator .pxl-notify-inline.is-success .pxl-notify-inline__hint { display: none !important; }
.pixlip-configurator .pxl-notify-inline.is-success .pxl-notify-inline__success { display: block !important; }
.pixlip-configurator .pxl-notify-inline__input {
box-sizing: border-box !important;
margin: 0 !important;
align-self: center !important; /* gegen vertikalen Versatz (Theme-margin) */
height: 32px !important;
min-height: 0 !important;
line-height: 30px !important;
padding: 0 14px !important;
background: rgba(0, 0, 0, 0.3) !important; /* Theme setzt sonst weiß */
border: 1px solid rgba(246, 244, 238, 0.12) !important;
border-radius: 999px !important;
color: var(--pxl-inverse-ink) !important;
font: 400 13px var(--pxl-font-body) !important;
-webkit-appearance: none !important;
appearance: none !important;
}
.pixlip-configurator .pxl-notify-inline__submit {
box-sizing: border-box !important;
margin: 0 !important;
align-self: center !important;
flex: 0 0 auto !important;
min-width: 0 !important;
}
.pixlip-configurator .pxl-notify-inline__back {
box-sizing: border-box !important;
margin: 0 !important;
align-self: flex-start !important;
flex: 0 0 auto !important;
min-width: 0 !important;
}
.pixlip-configurator .pxl-notify-inline.is-complete .pxl-notify-inline__back { align-self: center !important; }
/* 4) Redundantes In-App-Logo ausblenden — der Shop-Header trägt das PIXLIP-Logo
bereits; im eingebetteten Live-Shop wäre ein zweites Logo doppelt. */
.pixlip-configurator .pxl-fullscreen-logo { display: none !important; }
/* === Ende Theme-Bleed-Hardening === */
/* ============================================================
"Konzepte teilen" — Inline-Bereich in der Notify-Box.
Bleibt sichtbar auch nach is-complete (Teilen ergibt gerade
dann Sinn, wenn die Designs fertig sind). Studio-Dark, dezent.
============================================================ */
.pxl-share {
display: flex;
align-items: center;
gap: 8px;
flex: 0 0 auto;
}
.pxl-share__toggle {
display: inline-flex;
align-items: center;
gap: 7px;
height: 32px;
padding: 0 14px;
border-radius: 999px;
border: 1px solid rgba(var(--pxl-acc2-rgb), 0.4);
background: transparent;
color: var(--pxl-accent-2);
font: 600 12px var(--pxl-font-body);
letter-spacing: 0.01em;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
transition: background 180ms var(--pxl-ease), border-color 180ms var(--pxl-ease);
}
.pxl-share__toggle:hover {
background: rgba(var(--pxl-acc2-rgb), 0.1);
border-color: var(--pxl-accent-2);
}
.pxl-share__toggle svg { flex-shrink: 0; }
.pxl-share__form {
display: none;
gap: 6px;
align-items: center;
flex: 1 1 320px;
min-width: 240px;
flex-wrap: wrap;
}
.pxl-share.is-open .pxl-share__toggle { display: none; }
.pxl-share.is-open .pxl-share__form { display: flex; }
.pxl-share__input {
flex: 1 1 150px;
min-width: 130px;
height: 32px;
padding: 0 12px;
background: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(246, 244, 238, 0.12);
border-radius: 999px;
color: var(--pxl-inverse-ink);
font: 400 13px var(--pxl-font-body);
outline: none;
}
.pxl-share__input::placeholder { color: rgba(246, 244, 238, 0.35); }
.pxl-share__input:focus {
border-color: var(--pxl-accent-2);
background: rgba(0, 0, 0, 0.42);
}
.pxl-share__submit {
height: 32px;
width: 32px;
border-radius: 50%;
border: none;
background: var(--pxl-accent-2);
color: var(--pxl-inverse-bg);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 180ms var(--pxl-ease), transform 180ms var(--pxl-ease);
}
.pxl-share__submit:hover:not(:disabled) {
background: var(--pxl-accent-2-deep);
transform: translateX(1px);
}
.pxl-share__submit:disabled { opacity: 0.5; cursor: default; }
.pxl-share__error {
font: 500 11px var(--pxl-font-body);
color: #ff8a8a;
flex-basis: 100%;
text-align: left;
}
.pxl-share__error:empty { display: none; }
.pxl-share__success {
display: none;
font: 500 12px var(--pxl-font-body);
color: var(--pxl-accent-2);
letter-spacing: 0.01em;
white-space: nowrap;
}
.pxl-share.is-sent .pxl-share__toggle,
.pxl-share.is-sent .pxl-share__form { display: none; }
.pxl-share.is-sent .pxl-share__success { display: inline-block; }
/* Live-Theme-Hardening: gleicher Bedarf wie bei notify-inline — das Theme
injiziert generische form-/input-/button-Regeln, die wir überschreiben. */
/* Share-Box ist WÄHREND des Renders versteckt — Teilen ergibt erst Sinn, wenn
die Konzepte fertig gerechnet sind. Erst is-complete (Bilder fertig, Notify-
Mail-Feld weg) blendet sie ein (Regel weiter unten, höhere Spezifität). */
.pixlip-configurator .pxl-share { display: none !important; align-items: center !important; }
.pixlip-configurator .pxl-share__form { margin: 0 !important; padding: 0 !important; }
.pixlip-configurator .pxl-share__input {
box-sizing: border-box !important;
margin: 0 !important;
align-self: center !important;
height: 32px !important;
min-height: 0 !important;
line-height: 30px !important;
padding: 0 12px !important;
background: rgba(0, 0, 0, 0.3) !important;
border: 1px solid rgba(246, 244, 238, 0.12) !important;
border-radius: 999px !important;
color: var(--pxl-inverse-ink) !important;
font: 400 13px var(--pxl-font-body) !important;
-webkit-appearance: none !important;
appearance: none !important;
}
.pixlip-configurator .pxl-share__toggle,
.pixlip-configurator .pxl-share__submit {
box-sizing: border-box !important;
margin: 0 !important;
align-self: center !important;
flex: 0 0 auto !important;
}
/* is-complete blendet NUR die Mail-Teile aus — die Share-Box bleibt sichtbar.
notify-inline schrumpft bei is-complete auf width:auto → Share-Box mittig. */
.pxl-notify-inline.is-complete { justify-content: center; }
.pxl-notify-inline.is-complete .pxl-share { display: flex !important; }
@media (max-width: 600px) {
.pxl-share { flex-basis: 100%; flex-wrap: wrap; }
.pxl-share__form { width: 100%; flex-basis: 100%; }
.pxl-share__toggle { width: 100%; justify-content: center; }
}
/* ============================================================
KONTAKT-FORMULAR — Split-Layout (Pixlip-Korrektur 2026-06-17, screen 29)
Links: Headline (blauer Akzent) + Vertrauens-Liste · Rechts: Formular-Karte
mit statischen Labels + Beispiel-Placeholdern, vollbreiter CTA, Zurück-Link,
Datenschutz-Hinweis. Ersetzt das alte --lean/Float-Label-Layout.
Strikt auf den Kontakt-Screen gescoped, !important nur gegen Theme-Bleed.
============================================================ */
.pixlip-configurator section[data-screen="contact"] .pxl-contact-form--split {
--cf-blue: #6AA1E0; /* Akzent-Blau, lesbar auf dunkel (Headline/Links/Stern) */
--cf-blue-deep: #2a64a6; /* Marken-Blau (Badge-Füllung) */
display: grid;
grid-template-columns: 1fr;
gap: 1.75rem;
align-items: start;
max-width: 940px;
margin: 1.75rem auto 0;
text-align: left;
}
@media (min-width: 840px) {
.pixlip-configurator section[data-screen="contact"] .pxl-contact-form--split {
grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
gap: 2.75rem;
}
}
/* ── Linke Spalte ─────────────────────────────────────────────── */
.pixlip-configurator section[data-screen="contact"] .pxl-contact-aside {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.pixlip-configurator section[data-screen="contact"] .pxl-contact-kicker {
display: block;
width: 44px;
height: 3px;
border-radius: 2px;
margin-bottom: 1.1rem;
background: linear-gradient(90deg, var(--cf-blue), var(--cf-blue-deep));
}
.pixlip-configurator section[data-screen="contact"] .pxl-contact-form--split .pxl-contact-form__title {
margin: 0 0 0.6rem;
font-size: clamp(1.4rem, 1rem + 1.6vw, 1.85rem);
font-weight: 700;
line-height: 1.18;
letter-spacing: -0.015em;
color: var(--pxl-inverse-ink, #F6F4EE);
}
.pixlip-configurator section[data-screen="contact"] .pxl-contact-accent { color: var(--cf-blue); }
.pixlip-configurator section[data-screen="contact"] .pxl-contact-form--split .pxl-contact-form__lead {
margin: 0;
max-width: 30rem;
font-size: 0.95rem;
line-height: 1.55;
color: rgba(246, 244, 238, 0.62);
}
/* Vertrauens-Liste */
.pixlip-configurator section[data-screen="contact"] .pxl-contact-trust {
list-style: none;
margin: 1.6rem 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 1.05rem;
}
.pixlip-configurator section[data-screen="contact"] .pxl-contact-trust__item {
display: flex;
align-items: flex-start;
gap: 0.8rem;
}
.pixlip-configurator section[data-screen="contact"] .pxl-contact-trust__check {
flex: 0 0 22px;
width: 22px;
height: 22px;
margin-top: 1px;
border-radius: 50%;
display: grid;
place-items: center;
color: #fff;
background: linear-gradient(180deg, var(--pxl-accent-lite2), var(--cf-blue-deep));
box-shadow: 0 0 0 1px rgba(106, 161, 224, 0.25);
}
.pixlip-configurator section[data-screen="contact"] .pxl-contact-trust__text {
display: flex;
flex-direction: column;
gap: 2px;
}
.pixlip-configurator section[data-screen="contact"] .pxl-contact-trust__text strong {
font-size: 0.9rem;
font-weight: 600;
color: var(--pxl-inverse-ink, #F6F4EE);
}
.pixlip-configurator section[data-screen="contact"] .pxl-contact-trust__text span {
font-size: 0.83rem;
line-height: 1.45;
color: rgba(246, 244, 238, 0.55);
}
/* ── Rechte Spalte: Karte ─────────────────────────────────────── */
.pixlip-configurator section[data-screen="contact"] .pxl-contact-card {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1.6rem;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015));
border: 1px solid rgba(246, 244, 238, 0.10);
border-radius: 16px;
box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.75);
}
.pixlip-configurator section[data-screen="contact"] .pxl-contact-card__fields {
display: flex;
flex-direction: column;
gap: 1rem;
}
/* Statische Felder: Label oben, Beispiel-Placeholder im Feld */
.pixlip-configurator section[data-screen="contact"] .pxl-contact-field--static {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.pixlip-configurator section[data-screen="contact"] .pxl-contact-field--static .pxl-contact-field__label {
position: static !important;
transform: none !important;
margin: 0 !important;
padding: 0 !important;
max-width: none !important;
font-size: 0.82rem;
font-weight: 600;
text-transform: none;
letter-spacing: 0;
line-height: 1.2;
color: rgba(246, 244, 238, 0.85);
pointer-events: auto;
background: transparent;
}
.pixlip-configurator section[data-screen="contact"] .pxl-contact-field--static .pxl-contact-field__label .req {
color: var(--cf-blue);
margin-left: 0.25rem;
opacity: 1;
}
.pixlip-configurator section[data-screen="contact"] .pxl-contact-field__opt {
margin-left: 0.4rem;
font-size: 0.78rem;
font-weight: 400;
color: rgba(246, 244, 238, 0.4);
text-transform: none;
letter-spacing: 0;
}
.pixlip-configurator section[data-screen="contact"] .pxl-contact-field--static .pxl-contact-field__wrap {
position: relative;
display: block;
}
.pixlip-configurator section[data-screen="contact"] .pxl-contact-field--static .pxl-contact-field__input {
padding: 0.8rem 1rem !important;
font-size: 0.92rem;
}
/* Submit: vollbreiter CTA mit Pfeil rechts */
.pixlip-configurator section[data-screen="contact"] .pxl-contact-submit {
position: relative;
width: 100%;
justify-content: center;
padding: 0.95rem 1.2rem;
margin-top: 0.35rem;
font-size: 0.9rem;
}
.pixlip-configurator section[data-screen="contact"] .pxl-contact-submit__arrow {
position: absolute;
right: 1.1rem;
top: 50%;
transform: translateY(-50%);
}
/* Zurück als Text-Link */
.pixlip-configurator section[data-screen="contact"] .pxl-contact-backlink {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin: 0.1rem 0 0;
padding: 0.35rem 0.2rem;
background: none;
border: none;
cursor: pointer;
font-family: var(--pxl-font-body);
font-size: 0.85rem;
font-weight: 600;
color: var(--cf-blue);
transition: color 160ms var(--pxl-ease);
}
.pixlip-configurator section[data-screen="contact"] .pxl-contact-backlink:hover {
color: #8fbceb;
text-decoration: underline;
text-underline-offset: 3px;
}
.pixlip-configurator section[data-screen="contact"] .pxl-contact-backlink:focus-visible {
outline: 2px solid var(--cf-blue);
outline-offset: 2px;
border-radius: 6px;
}
/* Sekundäre Kontakt-Buttons (Frage per Mail / Anrufen) */
.pixlip-configurator section[data-screen="contact"] .pxl-contact-help {
display: flex;
gap: 0.6rem;
margin-top: 0.5rem;
}
.pixlip-configurator section[data-screen="contact"] .pxl-contact-help__btn {
flex: 1 1 0;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.7rem 0.8rem;
border: 1px solid rgba(246, 244, 238, 0.16);
border-radius: 0.7rem;
background: rgba(246, 244, 238, 0.03);
font-family: var(--pxl-font-body);
font-size: 0.83rem;
font-weight: 600;
color: rgba(246, 244, 238, 0.82);
text-decoration: none;
cursor: pointer;
transition: border-color 160ms var(--pxl-ease), background 160ms var(--pxl-ease), color 160ms var(--pxl-ease);
}
.pixlip-configurator section[data-screen="contact"] .pxl-contact-help__btn:hover {
border-color: var(--cf-blue);
background: rgba(246, 244, 238, 0.06);
color: #fff;
}
.pixlip-configurator section[data-screen="contact"] .pxl-contact-help__btn:focus-visible {
outline: 2px solid var(--cf-blue);
outline-offset: 2px;
border-radius: 0.7rem;
}
.pixlip-configurator section[data-screen="contact"] .pxl-contact-help__btn svg { flex: 0 0 auto; opacity: 0.82; }
/* Telefon-Button: Nummer auf Desktop, kurzes "Anrufen" auf schmalen Screens. */
.pixlip-configurator section[data-screen="contact"] .pxl-contact-help__num { white-space: nowrap; }
.pixlip-configurator section[data-screen="contact"] .pxl-contact-help__call { display: none; }
@media (max-width: 560px) {
.pixlip-configurator section[data-screen="contact"] .pxl-contact-help__num { display: none; }
.pixlip-configurator section[data-screen="contact"] .pxl-contact-help__call { display: inline; }
}
@media (max-width: 440px) {
.pixlip-configurator section[data-screen="contact"] .pxl-contact-help { flex-direction: column; }
}
/* Datenschutz-Hinweis */
.pixlip-configurator section[data-screen="contact"] .pxl-contact-privacy {
display: flex;
align-items: center;
gap: 0.45rem;
margin-top: 0.3rem;
padding-top: 0.9rem;
border-top: 1px solid rgba(246, 244, 238, 0.08);
font-size: 0.78rem;
line-height: 1.4;
color: rgba(246, 244, 238, 0.42);
}
.pixlip-configurator section[data-screen="contact"] .pxl-contact-privacy svg { flex: 0 0 auto; }
/* ── Responsive-Feinschliff ───────────────────────────────────── */
@media (max-width: 600px) {
.pixlip-configurator section[data-screen="contact"] .pxl-contact-card { padding: 1.25rem; }
.pixlip-configurator section[data-screen="contact"] .pxl-contact-form--split { gap: 1.5rem; }
}
@media (max-width: 400px) {
.pixlip-configurator section[data-screen="contact"] .pxl-contact-card { padding: 1.05rem; }
.pixlip-configurator section[data-screen="contact"] .pxl-contact-submit__arrow { right: 0.85rem; }
}
/* ════════════════════════════════════════════════════════════════════
US-STORE-AKZENTFARBEN — ausschließlich [data-locale="en"] (2026-06-19)
════════════════════════════════════════════════════════════════════
pixlip.us / US-Store: Primär = ROT, Sekundär/Support = BLAU (US-Flag,
knallig-kontrastreich, aber hochwertig). Greift NUR, wenn der Container
data-locale="en" trägt (gesetzt in blocks/configurator.liquid, Zeile 11,
gespiegelt vom i18n-JS-Layer via container.dataset.locale).
Es werden AUSSCHLIESSLICH die zentralen Akzent-Tokens überschrieben, die
oben im .pixlip-configurator-Block mit den türkisen/blauen DE-Defaults
tokenisiert wurden. Dunkler Hintergrund, Layout, Spacing, Typografie
bleiben unangetastet. Der DE-Store (kein/ander data-locale) sieht keine
einzige dieser Regeln und bleibt pixelgleich türkis.
Farbset US:
ROT Primär #E23B3B (deep #B92D2D, lite #EF5A5A, hi #F06A6A/#D83A3A)
BLAU Support #2F6BE0 (deep #1E4FB0) — Glow/Hero-Hauch + Gradient-Partner
─────────────────────────────────────────────────────────────────── */
/* 2026-06-24 (Gerd): US-Shop wieder TÜRKIS wie DE → beide EN-Akzent-Overrides
mit [data-us-redblue] (nie gesetzt) entschärft. US erbt damit exakt die
türkisen DE-Tokens. Werte unten bleiben aufbewahrt, falls je wieder gewünscht. */
.pixlip-configurator[data-locale="en"][data-us-redblue] {
/* Primär-Akzent → ROT (ersetzt das Pixlip-Blau als Top-CTA/active) */
--pxl-accent: #E23B3B;
--pxl-accent-deep: #B92D2D;
--pxl-accent-soft: #F7DEDE;
--pxl-accent-ink: #FFFFFF;
--pxl-accent-lite: #EF5A5A; /* heller CTA-Gradient-Stopp */
--pxl-accent-lite2: #EC5050; /* heller Rot-Stopp (Signal-Tiles/Toast) */
--pxl-accent-deep2: #A82828; /* dunkler Rot-Stopp (active-State) */
--pxl-accent-hi: #F06A6A; /* CTA-Hover hell */
--pxl-accent-hi2: #D83A3A; /* CTA-Hover dunkel */
--pxl-acc1-rgb: 226, 59, 59; /* Primär-rgba-Kanäle → Rot (Glows/Schatten/Fills) */
/* Sekundär-Akzent (ehem. Türkis-Glow/Hero/Pills/Filter/Fokus) → BLAU (US-Support) */
--pxl-accent-2: #2F6BE0;
--pxl-accent-2-deep: #1E4FB0;
--pxl-accent-2-soft: #DCE7FB;
--pxl-acc2-rgb: 47, 107, 224; /* Haupt-Glow-Kanäle → Blau */
--pxl-acc2b-rgb: 47, 107, 224; /* Render-Screen-Variante → Blau (vereinheitlicht) */
--pxl-acc2b: #2F6BE0; /* Hex-Pendant → Blau */
/* Glow-Composite neu zusammensetzen (nutzt die obigen Tokens → Rot-Ring + Blau-Hauch) */
--pxl-glow-accent: 0 0 0 1px var(--pxl-accent), 0 0 32px -8px rgba(var(--pxl-acc2-rgb), 0.35);
}
/* Kontakt-Screen: eigene Blau-Tokens → kräftigeres US-Blau (Headline/Links/Badge).
Bleiben blau (US-Support-Farbe), aber knalliger für den US-Look. */
.pixlip-configurator[data-locale="en"][data-us-redblue] section[data-screen="contact"] .pxl-contact-form--split {
--cf-blue: #5C93EC;
--cf-blue-deep: #2F6BE0;
}