/* ============================================================
   vorzeigbar.de — extensions on top of cuvir's styles.css
   Adds: accent-color theming, browser mockups, web-check widget,
   metric counters, hero word-by-word reveal, lime period helper.
   ============================================================ */

/* Accent color theming — Lime / Violett / Gold */
body[data-accent="lime"] {
  --accent: #C8F23C;
  --accent-ink: #1A2200;
  --accent-rgb: 200, 242, 60;
}
body[data-accent="violet"] {
  --accent: #8B5CF6;
  --accent-ink: #FAFAFF;
  --accent-rgb: 139, 92, 246;
}
body[data-accent="gold"] {
  --accent: #D4A85B;
  --accent-ink: #221A02;
  --accent-rgb: 212, 168, 91;
}

/* Override the hardcoded lime-rgba blobs in cuvir styles with var()-driven ones */
body[data-accent] .hero::before {
  background:
    radial-gradient(40% 35% at 20% 30%, rgba(var(--accent-rgb), 0.30), transparent 70%),
    radial-gradient(35% 30% at 75% 20%, rgba(var(--accent-rgb), 0.14), transparent 70%),
    radial-gradient(45% 40% at 60% 75%, rgba(var(--accent-rgb), 0.20), transparent 70%),
    radial-gradient(30% 25% at 30% 80%, rgba(var(--accent-rgb), 0.18), transparent 70%);
}
body[data-accent] .hero::after {
  background: radial-gradient(
    640px circle at var(--hero-mx, 50%) var(--hero-my, 50%),
    rgba(var(--accent-rgb), 0.22),
    rgba(var(--accent-rgb), 0.06) 30%,
    transparent 55%
  );
}
body[data-accent] .svc-card::after,
body[data-accent] .price::after,
body[data-accent] .stream-cell::after {
  background: radial-gradient(
    420px circle at var(--mx, 50%) var(--my, 50%),
    rgba(var(--accent-rgb), 0.16),
    rgba(var(--accent-rgb), 0.04) 40%,
    transparent 65%
  );
}
body[data-accent] .price.featured::after {
  background: radial-gradient(
    420px circle at var(--mx, 50%) var(--my, 50%),
    rgba(var(--accent-rgb), 0.22),
    rgba(var(--accent-rgb), 0.06) 40%,
    transparent 65%
  );
}
body[data-accent] .floating-cta {
  box-shadow:
    0 18px 40px -12px rgba(var(--accent-rgb), 0.5),
    0 6px 14px -6px rgba(14, 14, 14, 0.18);
}
body[data-accent] .floating-cta:hover {
  box-shadow:
    0 24px 50px -12px rgba(var(--accent-rgb), 0.65),
    0 10px 18px -6px rgba(14, 14, 14, 0.22);
}
body[data-accent] .scroll-progress {
  box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.55);
}
body[data-accent] .pricing::before {
  background: radial-gradient(
    ellipse 70% 60% at center,
    rgba(var(--accent-rgb), 0.28) 0%,
    rgba(var(--accent-rgb), 0.12) 35%,
    rgba(var(--accent-rgb), 0.02) 60%,
    transparent 75%
  );
}
body[data-accent] .cursor-ring { border-color: rgba(var(--accent-rgb), 0.85); }
body[data-accent] .cursor-ring.on { background: rgba(var(--accent-rgb), 0.18); }

/* Lime period helper — colours the final dot of a phrase */
.dot-accent { color: var(--accent); }

/* Hero — vorzeigbar tweaks
   Make the hero text the dominant element (no media on right, full-width title) */
.vz-hero {
  padding: 132px 32px 0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.vz-hero-inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: 32px 0 80px;
  display: flex;
  flex-direction: column;
  gap: 36px;
  position: relative;
  z-index: 1;
}
.vz-hero h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(56px, 8.5vw, 138px);
  line-height: 0.94;
  letter-spacing: -0.035em;
  margin: 0;
  max-width: 18ch;
  text-wrap: balance;
}
.vz-hero h1 .italic { font-style: italic; font-weight: 500; }
.vz-hero-sub {
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 58ch;
  margin: 0;
}
.vz-hero-cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 8px;
}
.vz-hero-cta-row .small {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.vz-hero-cta-row .small::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(var(--accent-rgb, 200, 242, 60), 0.6);
  animation: vzPulse 2.2s ease-in-out infinite;
}
@keyframes vzPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb, 200, 242, 60), 0.6); }
  50%      { box-shadow: 0 0 0 6px rgba(var(--accent-rgb, 200, 242, 60), 0); }
}
body.no-motion .vz-hero-cta-row .small::before { animation: none; }

/* Sprachwechsel (LangSwitch): im Header vor "Projekt anfragen", mobil im Burger-Menü.
   Die vierte Spalte nur über 720 px: darunter setzt styles.css (@media max-width 720px)
   das Mobil-Raster 1fr auto, eine Regel ohne Media Query hier würde es überschreiben. */
@media (min-width: 721px) {
  .hdr { grid-template-columns: auto 1fr auto auto; }
}
.lang-switch {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em;
  color: var(--ink-2); text-decoration: none;
  padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px;
  transition: color 200ms, border-color 200ms;
}
.lang-switch svg { width: 14px; height: 14px; }
.lang-switch:hover { color: var(--ink); border-color: var(--line-2); }
.lang-switch-mobile { align-self: flex-start; margin-bottom: 16px; }
@media (max-width: 720px) {
  .hdr > .lang-switch { display: none; }
}

/* Hero showcase — premium browser mockup */
.vz-hero-mock {
  position: relative;
  margin-top: 28px;
  perspective: 2400px;
  perspective-origin: 50% 30%;
}
.vz-hero-mock .browser-frame {
  transform: rotateX(8deg) rotateY(-2deg);
  transform-style: preserve-3d;
  box-shadow:
    0 60px 100px -40px rgba(14, 14, 14, 0.45),
    0 30px 50px -20px rgba(14, 14, 14, 0.25);
  transition: transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
}
.vz-hero-mock:hover .browser-frame {
  transform: rotateX(3deg) rotateY(0deg);
}
body.no-motion .vz-hero-mock .browser-frame { transform: none; }

/* Hero stat strip */
.vz-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-top: 64px;
}
.vz-hero-stat {
  padding: 28px 24px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vz-hero-stat:last-child { border-right: 0; }
.vz-hero-stat .num {
  font-family: var(--font-display);
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1;
}
.vz-hero-stat .num .dot-accent { color: var(--accent); }
.vz-hero-stat .lbl {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
@media (max-width: 900px) {
  .vz-hero-stats { grid-template-columns: 1fr 1fr; }
  .vz-hero-stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .vz-hero-stat:nth-child(2) { border-right: 0; }
}

/* Browser frame mockup */
.browser-frame {
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 -1px 0 rgba(14,14,14,0.04) inset,
    0 30px 60px -20px rgba(14,14,14,0.35),
    0 10px 20px -10px rgba(14,14,14,0.18);
}
body.dark .browser-frame {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 30px 60px -20px rgba(0,0,0,0.6),
    0 10px 20px -10px rgba(0,0,0,0.4);
}
.browser-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px;
  background: linear-gradient(180deg, #EAE8E2 0%, #DFDCD5 100%);
  border-bottom: 1px solid rgba(14,14,14,0.10);
  position: relative;
}
body.dark .browser-bar {
  background: linear-gradient(180deg, #1F1F1F 0%, #161616 100%);
  border-bottom-color: rgba(241,239,236,0.10);
}
.browser-dot {
  width: 11px; height: 11px; border-radius: 50%; flex: 0 0 11px;
}
.browser-dot.r { background: #FF5F57; }
.browser-dot.y { background: #FEBC2E; }
.browser-dot.g { background: var(--accent); }
.browser-url {
  position: absolute; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 11.5px;
  color: var(--ink-3); letter-spacing: 0.02em;
  padding: 3px 14px;
  background: rgba(14,14,14,0.04); border-radius: 6px;
  display: inline-flex; align-items: center; gap: 6px;
}
body.dark .browser-url { background: rgba(241,239,236,0.06); }
.browser-url::before {
  content: "🔒"; font-size: 9px; opacity: 0.6;
  filter: grayscale(1);
}
.browser-canvas { background: var(--bg); position: relative; }

/* Showcase mockup interior — fictional "Maison Aurelis" agency site */
.mock-showcase {
  padding: 0;
  aspect-ratio: 16 / 10;
  display: grid;
  grid-template-rows: 1fr;
  position: relative;
  overflow: hidden;
}
.mock-hero-inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 0;
  height: 100%;
}
.mock-left {
  padding: 6% 5% 5%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--bg);
}
.mock-nav {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3);
}
.mock-nav-brand {
  font-family: var(--font-display); font-weight: 500;
  font-size: 16px; letter-spacing: -0.01em; text-transform: none;
  color: var(--ink);
}
.mock-nav-links { display: flex; gap: 18px; }
.mock-left-mid {
  display: flex; flex-direction: column; gap: 14px;
  margin-top: auto;
}
.mock-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink);
}
.mock-tag::before { content: "//"; color: var(--accent); font-weight: 700; }
.mock-h {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(28px, 3.2vw, 56px); line-height: 0.96;
  letter-spacing: -0.03em; margin: 0;
  color: var(--ink); text-wrap: balance;
}
.mock-h em { font-style: italic; font-weight: 500; }
.mock-sub {
  font-size: 12px; color: var(--ink-2); line-height: 1.5;
  max-width: 36ch; margin: 0;
}
.mock-cta-row { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.mock-pill {
  background: var(--ink); color: var(--bg);
  font-size: 10px; font-weight: 500;
  padding: 7px 14px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer;
  user-select: none;
  transition: transform .14s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.mock-pill:hover { transform: translateY(-1px); }
.mock-pill:active { transform: scale(0.95); transition-duration: .06s; }
.mock-pill .x {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--bg); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; line-height: 1;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.mock-pill:hover .x { background: var(--accent); transform: rotate(45deg); }
.mock-pill.outline {
  background: transparent; color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.mock-pill.outline:hover { background: var(--ink); color: var(--bg); box-shadow: inset 0 0 0 1px var(--ink); }

/* Browser URL bar — loading shimmer when mock "navigates" */
.browser-url { overflow: hidden; transition: background .2s ease; }
.browser-bar.loading .browser-url {
  background: rgba(var(--accent-rgb, 200, 242, 60), 0.18);
}
.browser-bar.loading .browser-url::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.65) 50%, transparent 100%);
  animation: browser-url-shimmer 1s ease infinite;
  pointer-events: none;
}
body.dark .browser-bar.loading .browser-url::after {
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.18) 50%, transparent 100%);
}
@keyframes browser-url-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
body.no-motion .browser-bar.loading .browser-url::after { animation: none; }
.mock-right {
  background: linear-gradient(135deg, #2a1d12 0%, #0a0606 100%);
  position: relative;
  overflow: hidden;
}
.mock-right-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
}
.mock-right::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(50% 50% at 30% 30%, rgba(var(--accent-rgb, 200, 242, 60), 0.18), transparent 60%),
    radial-gradient(40% 40% at 75% 80%, rgba(255, 200, 120, 0.14), transparent 65%);
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0.6;
}
.mock-right::after {
  /* SVG dummy replaced by the video — keep rule but hide. */
  display: none;
}
.mock-stat-strip {
  position: absolute;
  left: 6%; right: 6%; bottom: 6%;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 10px;
  padding: 10px 14px;
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  z-index: 3;
}
.mock-stat-strip > div { display: flex; flex-direction: column; gap: 2px; }
.mock-stat-strip > div + div { border-left: 1px solid var(--line); padding-left: 12px; }
.mock-stat-strip b {
  font-family: var(--font-display); font-size: 18px; font-weight: 500;
  letter-spacing: -0.01em; color: var(--ink); text-transform: none;
}
@media (max-width: 720px) {
  .mock-hero-inner { grid-template-columns: 1fr; }
  .mock-right { display: none; }
}

/* Portfolio — Scroll-Vorschau (PortfolioSection in vorzeigbar-screens.jsx).
   .vz-show ist die Scrollstrecke: Sticky-Block plus 100svh Weg, über den die Screenshots
   in beiden Rahmen nach oben wandern. --hdr-h hält den Block unter dem festen Header:
   Startwert hier, useDeviceScroll setzt die gemessene Höhe. */
.vz-show-list { --hdr-h: 76px; }
.vz-show {
  height: calc(220vh - var(--hdr-h));
  height: calc(220svh - var(--hdr-h));
}
.vz-show-sticky {
  position: sticky; top: var(--hdr-h);
  height: calc(100vh - var(--hdr-h));
  height: calc(100svh - var(--hdr-h));
  padding-block: 20px 36px;
}
.vz-show-link {
  display: flex; flex-direction: column; gap: 24px;
  height: 100%;
  color: inherit; text-decoration: none;
}
.vz-show-meta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.vz-show-num {
  flex-basis: 100%;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3);
}
.vz-show-meta .vz-case-metric { margin-left: auto; }
.vz-show-link:hover .vz-case-arrow { transform: translateX(6px); color: var(--ink); }

/* Bühne: Größenbezug (cqw/cqh), damit Tablet und Handy in jede Bildschirmhöhe passen. */
.vz-show-stage {
  flex: 1; min-height: 0;
  container-type: size;
  display: flex; align-items: center; justify-content: center;
}
/* --lift (0 → 1) setzt useDeviceScroll: 0 = nach hinten gekippt und verkleinert, 1 = aufrecht.
   Ohne JS und bei reduzierter Bewegung gilt 1. */
.vz-show-devices {
  position: relative;
  width: min(84cqw, 116cqh);
  aspect-ratio: 4 / 3;
  perspective: 1200px;
  transition: translate 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.vz-show-link:hover .vz-show-devices { translate: 0 -4px; }
/* Bodenschatten unter den Geräten: dichter und schmaler, sobald sie aufrecht stehen.
   Nur opacity und transform ändern sich beim Scrollen, das rechnet die GPU. */
.vz-show-devices::after {
  content: '';
  position: absolute;
  left: 6%; right: 0; bottom: -10%;
  height: 14%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.3), transparent);
  filter: blur(14px);
  opacity: calc(0.3 + var(--lift, 1) * 0.7);
  transform: scaleX(calc(1.15 - var(--lift, 1) * 0.15));
  z-index: -1;
  pointer-events: none;
}
.vz-dev {
  --r: 24px; --p: 12px; --rim: 2px;
  position: absolute;
  padding: var(--p);
  border: var(--rim) solid #5c5c5c;
  border-radius: var(--r);
  background: #1d1d1d;
  /* Mehrlagiger Schatten, nah und hart bis fern und weich: das Gerät schwebt über der Seite. */
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.16),
    0 10px 22px rgba(0, 0, 0, 0.2),
    0 34px 40px -6px rgba(0, 0, 0, 0.18),
    0 80px 64px -18px rgba(0, 0, 0, 0.12);
  transform: rotateX(calc((1 - var(--lift, 1)) * 18deg)) scale(calc(0.92 + var(--lift, 1) * 0.08));
  will-change: transform;
}
.vz-dev-tab { inset: 0; }
.vz-dev-phone {
  --r: 28px; --p: 6px;
  right: -7%; bottom: -5%;
  height: 76%;
  aspect-ratio: 9 / 19.5;
}
.vz-dev-screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: calc(var(--r) - var(--p) - var(--rim));
  background: #fff;
  transform: translateZ(0); /* Safari schneidet das verschobene Bild sonst nicht an der Rundung ab */
}
.vz-dev-screen img {
  display: block;
  width: 100%; height: auto;
  will-change: transform;
}
@media (max-width: 720px) {
  .vz-show-list { --hdr-h: 64px; }
  .vz-show-devices { width: min(74cqw, 70cqh); aspect-ratio: 3 / 4; }
  .vz-dev { --r: 16px; --p: 7px; }
  .vz-dev-phone { --r: 18px; --p: 4px; height: 60%; right: -14%; bottom: -4%; }
  .vz-show-meta .vz-case-metric { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .vz-show, .vz-show-sticky { height: auto; }
  .vz-show-sticky { position: static; }
  .vz-show-stage { flex: none; height: min(70vh, 640px); }
}
.vz-case-meta {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
}
.vz-case-name {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 500;
  letter-spacing: -0.015em;
  display: inline-flex; align-items: baseline; gap: 8px;
}
.vz-case-arrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 18px;
  color: var(--ink-3);
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1), color 300ms;
}
.vz-case:hover .vz-case-arrow { transform: translateX(6px); color: var(--ink); }
.vz-case-tag {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3);
}
.vz-case-metric {
  display: inline-flex; align-items: center; gap: 8px;
  align-self: flex-start;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  padding: 6px 12px; border-radius: 999px;
}
.vz-case-metric b {
  font-family: var(--font-display); font-size: 14px;
  letter-spacing: -0.01em; color: var(--accent-ink);
  background: var(--accent);
  padding: 1px 8px; border-radius: 4px;
  margin-right: 4px;
}

/* Tiny portfolio "preview" inside browser frame — pure CSS art */
.preview-canvas {
  aspect-ratio: 16 / 10;
  background: var(--bg);
  position: relative;
  overflow: hidden;
  display: grid;
  padding: 22px;
}
.preview-canvas.v1 {
  background: linear-gradient(180deg, #fbf6ec 0%, #f0e6d3 100%);
  color: #1a1407;
  grid-template-rows: auto 1fr auto;
  gap: 14px;
}
.preview-canvas.v2 {
  background: #0a0a0a;
  color: #f5f5f2;
  grid-template-rows: auto 1fr;
  gap: 12px;
}
.preview-canvas.v3 {
  background: linear-gradient(135deg, #e8eef5 0%, #c7d4e3 100%);
  color: #0a1a2e;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
}
.preview-canvas.v4 {
  background: #f0ede7;
  color: #0e0e0e;
  grid-template-rows: auto 1fr;
  gap: 14px;
}
.preview-canvas.v8 {
  background: linear-gradient(135deg, #014557 0%, #006C82 55%, #0a7f96 100%);
  color: #EAF6F9;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
}
.preview-canvas.v8 .pc-nav-r span { color: #B3E9F4; }
.preview-canvas.v8 .pc-title em { color: #50C3DB; }
.preview-canvas.v8 .pc-row-strip { border-top: 1px solid rgba(179, 233, 244, 0.35); }
.preview-canvas.v8 .pc-row-strip b { color: #ffffff; }

.preview-canvas-img {
  aspect-ratio: 16 / 10;
  background: var(--ink);
  padding: 0;
  display: block;
  overflow: hidden;
  position: relative;
}
.preview-canvas-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
}
.vz-case:hover .preview-canvas-img img,
.vz-case-gallery-item:hover .preview-canvas-img img {
  transform: scale(1.02);
}

/* Live iframe preview — full site, scaled down */
.preview-canvas-iframe {
  aspect-ratio: 16 / 10;
  background: var(--bg);
  padding: 0;
  display: block;
  overflow: hidden;
  position: relative;
}
.preview-iframe-wrap {
  position: absolute;
  top: 0; left: 0;
  width: calc(100% / var(--iframe-scale, 0.45));
  height: calc(100% / var(--iframe-scale, 0.45));
  transform: scale(var(--iframe-scale, 0.45));
  transform-origin: 0 0;
  /* Live previews are a picture, not a second browser: on portfolio cards the card click wins,
     and on case pages a live iframe swallowed all mouse events, so the custom cursor froze at
     the frame edge and the wheel scrolled the client site instead of the page.
     The real site opens via the "Live ansehen" button. */
  pointer-events: none;
}
.preview-iframe-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: var(--bg);
}
.preview-canvas.v5 {
  background: linear-gradient(180deg, #fdf6f3 0%, #f5e6dd 100%);
  color: #2a1818;
  grid-template-rows: auto 1fr auto;
  gap: 12px;
}
.pc-treatment-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.2fr;
  gap: 6px;
}
.pc-treatment {
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(42, 24, 24, 0.10);
  border-radius: 999px;
  padding: 7px 10px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  color: #2a1818;
}
.pc-treatment-cta {
  background: #2a1818;
  color: #fdf6f3;
  border-color: #2a1818;
  font-weight: 600;
}
.pc-treatment-meta {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  border-top: 1px solid rgba(42, 24, 24, 0.15);
  padding-top: 10px;
}
.pc-treatment-meta > div { display: flex; flex-direction: column; gap: 2px; }
.pc-treatment-meta small {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(42, 24, 24, 0.55);
}
.pc-treatment-meta b {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.pc-team-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  align-self: end;
}
.pc-team-avatar {
  aspect-ratio: 3 / 4;
  border-radius: 6px;
  background:
    radial-gradient(60% 50% at 50% 30%, rgba(255, 230, 220, 0.9), transparent 70%),
    linear-gradient(180deg, #d8a89a 0%, #8a5a48 100%);
  position: relative;
}
.pc-team-avatar::after {
  content: "";
  position: absolute;
  left: 30%; right: 30%; top: 18%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 240, 230, 0.85) 0%, rgba(255, 240, 230, 0) 70%);
}
.pc-nav {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.08em; text-transform: uppercase;
  opacity: 0.7;
}
.pc-nav b {
  font-family: var(--font-display); font-weight: 500;
  font-size: 14px; letter-spacing: -0.01em; text-transform: none;
  opacity: 1;
}
.pc-nav-r { display: flex; gap: 14px; }
.pc-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(20px, 2.3vw, 40px);
  line-height: 0.96; letter-spacing: -0.03em;
  align-self: center;
  text-wrap: balance;
}
.pc-title em { font-style: italic; }
.pc-canvas-fig {
  display: grid; gap: 8px;
}
.pc-bar {
  height: 6px; border-radius: 99px; background: currentColor; opacity: 0.7;
}
.pc-bar.long { width: 80%; }
.pc-bar.med { width: 50%; }
.pc-bar.short { width: 30%; }
.pc-row-strip {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  border-top: 1px solid currentColor;
  padding-top: 10px;
  font-family: var(--font-mono); font-size: 8px;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.pc-row-strip > div { display: flex; flex-direction: column; gap: 2px; opacity: 0.85; }
.pc-row-strip b {
  font-family: var(--font-display); font-size: 16px; font-weight: 500;
  letter-spacing: -0.01em; text-transform: none; opacity: 1;
}
.pc-product-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.pc-product {
  aspect-ratio: 3 / 4;
  border-radius: 6px;
  background: rgba(0,0,0,0.08);
  position: relative;
  overflow: hidden;
}
.preview-canvas.v2 .pc-product { background: rgba(255,255,255,0.06); }
.pc-product::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, currentColor 0%, transparent 60%);
  opacity: 0.15;
}
.pc-image-block {
  border-radius: 10px;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(var(--accent-rgb, 200, 242, 60), 0.25), transparent 60%),
    linear-gradient(135deg, currentColor 0%, transparent 70%);
  opacity: 0.9;
  position: relative;
  overflow: hidden;
}
.preview-canvas.v2 .pc-image-block {
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(var(--accent-rgb, 200, 242, 60), 0.35), transparent 60%),
    linear-gradient(135deg, #1f1f1f 0%, #0a0a0a 70%);
}

/* Web-Check section: vertical-center the right-hand input card with the left copy. */
#check > .container > .split-2 { align-items: center; }

/* Web-Check Widget */
.webcheck {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 40px;
  max-width: 920px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.webcheck::before {
  content: "";
  position: absolute;
  inset: -40%;
  background:
    radial-gradient(40% 40% at 30% 50%, rgba(var(--accent-rgb, 200, 242, 60), 0.10), transparent 65%);
  z-index: -1;
  pointer-events: none;
}
.webcheck-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 28px; }
.webcheck-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0;
}
.webcheck-sub {
  font-size: 15px; color: var(--ink-2); line-height: 1.55;
  margin: 0; max-width: 56ch;
}
.webcheck-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  padding: 8px 8px 8px 18px;
  align-items: center;
}
.webcheck-form:focus-within {
  border-color: var(--ink);
}
.webcheck-input {
  background: transparent;
  border: 0; outline: 0;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink);
  padding: 12px 0;
  width: 100%;
}
.webcheck-input::placeholder { color: var(--ink-3); }
.webcheck-btn {
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  border-radius: 10px;
  padding: 12px 22px;
  font-family: var(--font-sans);
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  letter-spacing: -0.005em;
  transition: filter 200ms, transform 200ms, box-shadow 200ms;
  display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 6px 14px -6px rgba(var(--accent-rgb, 200, 242, 60), 0.4);
}
.webcheck-btn:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 10px 20px -6px rgba(var(--accent-rgb, 200, 242, 60), 0.5);
}
.webcheck-btn:disabled { opacity: 0.55; cursor: progress; transform: none; box-shadow: none; }

.webcheck-results {
  margin-top: 32px;
  border-top: 1px solid var(--line);
  padding-top: 32px;
}
.webcheck-domain {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  margin-bottom: 24px;
  font-family: var(--font-mono); font-size: 13px;
  color: var(--ink-3); letter-spacing: 0.02em;
}
.webcheck-domain b {
  font-family: var(--font-display);
  font-weight: 500; font-size: 20px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.webcheck-scores {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.webcheck-score {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.webcheck-score-head {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3);
}
.webcheck-gauge {
  position: relative;
  width: 84px; height: 84px;
  align-self: center;
}
.webcheck-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.webcheck-gauge circle {
  fill: none; stroke-width: 6;
}
.webcheck-gauge .track { stroke: var(--line); }
.webcheck-gauge .fill {
  stroke: var(--accent);
  stroke-linecap: round;
  transition: stroke-dashoffset 1400ms cubic-bezier(0.16, 1, 0.3, 1);
}
.webcheck-gauge.bad .fill { stroke: #E0532A; }
.webcheck-gauge.mid .fill { stroke: #E8A53C; }
.webcheck-gauge-val {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 26px; font-weight: 500; letter-spacing: -0.02em;
}
.webcheck-gauge-val small {
  font-family: var(--font-mono);
  font-size: 9px; letter-spacing: 0.06em;
  color: var(--ink-3); font-weight: 400;
  margin-top: 1px;
}
.webcheck-score-note {
  font-size: 12px; color: var(--ink-2);
  line-height: 1.45;
}

.webcheck-findings {
  margin-top: 24px;
  display: flex; flex-direction: column; gap: 0;
  border-top: 1px solid var(--line);
}
.webcheck-finding {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
}
.webcheck-finding-icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  flex: 0 0 28px;
}
.webcheck-finding-icon.warn { background: rgba(232, 165, 60, 0.16); color: #B47A18; }
.webcheck-finding-icon.bad { background: rgba(224, 83, 42, 0.12); color: #B33D1A; }
.webcheck-finding-icon.good { background: rgba(var(--accent-rgb), 0.20); color: var(--ink); }
.webcheck-finding-text { font-size: 14px; color: var(--ink); line-height: 1.45; }
.webcheck-finding-text small { color: var(--ink-3); font-size: 12px; display: block; margin-top: 2px; }
.webcheck-finding-tag {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3); white-space: nowrap;
}

.webcheck-capture {
  margin-top: 28px;
  background: var(--ink);
  color: var(--bg);
  border-radius: 16px;
  padding: 28px 32px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
  align-items: center;
}
.webcheck-capture h4 {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 500;
  letter-spacing: -0.015em; line-height: 1.2;
  margin: 0 0 8px;
}
.webcheck-capture p {
  font-size: 13px; line-height: 1.5;
  opacity: 0.7;
  margin: 0;
  color: var(--bg);
}
.webcheck-capture-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.webcheck-capture-input {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px;
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--bg);
  outline: 0;
}
.webcheck-capture-input::placeholder { color: rgba(255,255,255,0.4); }
.webcheck-capture-input:focus { border-color: var(--accent); }
.webcheck-capture-btn {
  background: var(--accent);
  color: var(--accent-ink);
  border: 0; border-radius: 10px;
  padding: 12px 18px;
  font-family: var(--font-sans);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  letter-spacing: -0.005em;
}
.webcheck-capture-btn:hover { filter: brightness(1.05); }
.webcheck-capture-error {
  grid-column: 1 / -1;
  font-size: 12px; line-height: 1.4;
  color: #ff8a8a;
  margin-top: 2px;
}
.webcheck-capture-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.webcheck-capture-input:disabled { opacity: 0.6; }
.webcheck-capture-sent {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 0;
}
.webcheck-capture-sent::before {
  content: "";
  display: inline-block;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--accent);
  position: relative;
}

.webcheck-loading {
  margin-top: 32px;
  padding: 32px 0;
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-2);
  letter-spacing: 0.02em;
}
.webcheck-loading-line {
  display: flex; align-items: center; gap: 14px;
  opacity: 0.45;
  transition: opacity 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
.webcheck-loading-line.done { opacity: 1; }
.webcheck-loading-line.active { opacity: 1; color: var(--ink); }
.webcheck-loading-line::before {
  content: "○";
  font-size: 14px;
  color: var(--ink-3);
}
.webcheck-loading-line.done::before {
  content: "✓"; color: var(--accent-ink);
  background: var(--accent);
  width: 16px; height: 16px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px;
}
.webcheck-loading-line.active::before {
  content: "";
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  border-top-color: transparent;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  .webcheck { padding: 28px; border-radius: 18px; }
  .webcheck-scores { grid-template-columns: 1fr 1fr; }
  .webcheck-capture { grid-template-columns: 1fr; padding: 22px; }
  .webcheck-finding { grid-template-columns: auto 1fr; }
  .webcheck-finding-tag { display: none; }
}
@media (max-width: 540px) {
  .webcheck { padding: 22px; }
  .webcheck-form { grid-template-columns: 1fr; padding: 10px; }
  .webcheck-btn { width: 100%; justify-content: center; }
}

/* Contact form — slim two-column */
.vz-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 64px;
  align-items: start;
}
.vz-contact-meta { display: flex; flex-direction: column; gap: 24px; }
.vz-contact-meta dl {
  margin: 0; padding: 0;
  display: grid; gap: 18px;
}
.vz-contact-meta dt {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 4px;
}
.vz-contact-meta dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px; font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.vz-contact-meta dd small {
  display: block;
  font-family: var(--font-sans);
  font-size: 14px; font-weight: 400;
  color: var(--ink-2);
  margin-top: 4px;
  letter-spacing: 0;
}
.vz-form {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 32px;
  display: flex; flex-direction: column; gap: 14px;
}
.vz-form-title {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 6px;
}
.vz-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.vz-input, .vz-textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink);
  outline: 0;
  transition: border-color 200ms;
}
.vz-input:focus, .vz-textarea:focus { border-color: var(--ink-2); }
.vz-input::placeholder, .vz-textarea::placeholder { color: var(--ink-3); }
.vz-textarea { min-height: 110px; resize: vertical; }
.vz-select-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.vz-chip-radio {
  position: relative;
  cursor: pointer;
}
.vz-chip-radio input { position: absolute; opacity: 0; pointer-events: none; }
.vz-chip-radio span {
  display: block;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 13px;
  color: var(--ink-2);
  text-align: center;
  letter-spacing: -0.005em;
  transition: all 180ms;
}
.vz-chip-radio:hover span { border-color: var(--line-2); color: var(--ink); }
.vz-chip-radio input:checked + span {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.vz-submit {
  margin-top: 8px;
  padding: 16px 18px;
  background: var(--accent);
  color: var(--accent-ink);
  border: 0; border-radius: 12px;
  font-family: var(--font-sans); font-size: 15px; font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: filter 200ms, transform 200ms;
}
.vz-submit:hover { filter: brightness(1.05); transform: translateY(-1px); }

.vz-form-sent {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 48px 32px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.vz-form-sent-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 28px;
}
.vz-form-sent h4 {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0;
}
.vz-form-sent p {
  font-size: 14px; color: var(--ink-2);
  max-width: 38ch;
  margin: 0;
}

@media (max-width: 900px) {
  .vz-contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .vz-form-row { grid-template-columns: 1fr; }
  .vz-select-row { grid-template-columns: 1fr; }
}

/* Section: System / 3 steps — already uses cuvir's .process, just custom number color */
.vz-process .step .n { color: var(--ink); }
.vz-process .step .n::before { content: "/ "; color: var(--accent); font-weight: 700; }

/* Problem section — big anti-thesis */
.vz-anti {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.vz-anti-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 36px;
  display: flex; flex-direction: column; gap: 18px;
}
.vz-anti-card.bad { background: var(--bg-2); }
.vz-anti-card h3 {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 36px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
}
.vz-anti-card.bad h3 { color: var(--ink-2); text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: var(--ink-3); }
.vz-anti-card ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
  font-size: 14px; line-height: 1.5; color: var(--ink-2);
}
.vz-anti-card ul li { padding-left: 22px; position: relative; }
.vz-anti-card.bad ul li::before {
  content: "✕"; position: absolute; left: 0; top: 0;
  color: var(--ink-3); font-family: var(--font-mono); font-size: 12px;
}
.vz-anti-card.good ul li::before {
  content: "→"; position: absolute; left: 0; top: 0;
  color: var(--accent-ink);
  background: var(--accent);
  width: 16px; height: 16px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px;
  font-weight: 700;
}
.vz-anti-card.good ul li { padding-left: 26px; }
.vz-anti-card-foot {
  margin-top: auto; padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3);
}
.vz-anti-card.good .vz-anti-card-foot { color: var(--ink); }

/* 3D wie im Hero-Rahmen: --lift 0 = nach hinten gekippt und zueinander gedreht, 1 = gerade.
   Perspektive steht in der transform-Funktion, weil zwischen .vz-anti und der Karte noch das
   Reveal-Element liegt; eine perspective am Elternteil würde die Karte nicht erreichen.
   Desktop: Mauszeiger richtet auf. Handy: useCardLift setzt --lift beim Scrollen. */
.vz-anti-card {
  --lift: 0;
  --yaw: 0deg;
  transform:
    perspective(1600px)
    rotateX(calc((1 - var(--lift)) * 8deg))
    rotateY(calc((1 - var(--lift)) * var(--yaw)));
  transform-origin: 50% 80%;
  transition: transform 800ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 800ms cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow:
    0 2px 4px rgba(14, 14, 14, 0.05),
    0 12px 24px -8px rgba(14, 14, 14, 0.12),
    0 40px 60px -30px rgba(14, 14, 14, calc(0.10 + (1 - var(--lift)) * 0.16));
  will-change: transform;
}
.vz-anti-card.bad { --yaw: -3deg; }
.vz-anti-card.good { --yaw: 3deg; }
@media (hover: hover) {
  .vz-anti-card:hover { --lift: 1; }
}
@media (max-width: 720px) {
  /* Der Scrollwert kommt aus dem JS, eine Transition würde ihm hinterherlaufen. */
  .vz-anti-card { transition: box-shadow 400ms linear; }
}
@media (prefers-reduced-motion: reduce) {
  .vz-anti-card { --lift: 1; transition: none; }
}
@media (max-width: 720px) {
  .vz-anti { grid-template-columns: 1fr; }
}

/* Footer override — replace giant cuvir tagline with vorzeigbar's */
.vz-footer .big-reveal { display: inline-block; }

/* Tag color: use var-based, not hardcoded lime */
body[data-accent] .tag::before { color: var(--accent); }
body[data-accent] .mock-tag::before { color: var(--accent); }
body[data-accent] .mobile-menu-nav a.active::before,
body[data-accent] .mobile-menu-nav .mobile-menu-item.active::before { color: var(--accent); }
body[data-accent] .svc-card .num { color: var(--accent); }
body[data-accent] .svc-card .bullets li::before { color: var(--accent); }
body[data-accent] .process .step .n { color: var(--ink); }
body[data-accent] .vz-process .step .n::before { color: var(--accent); }
body[data-accent] .price ul li::before { color: var(--accent); }
body[data-accent] .price.featured ul li::before { color: var(--bg); }
body[data-accent] .studio-status.on .studio-status-dot {
  background: var(--accent);
  filter: brightness(0.85);
}

/* Pricing labels */
.price-pre {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3);
}
.price.featured .price-pre { color: rgba(255,255,255,0.6); }
.price-pre .star {
  display: inline-block; margin-left: 6px;
  color: var(--accent);
}
.price h3 {
  font-family: var(--font-display);
  font-size: 26px; font-weight: 500;
  letter-spacing: -0.015em;
  margin: 0;
}
.price.featured h3 { color: var(--bg); }
.price-cta {
  margin-top: 8px;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--bg);
  border: 0; border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 13px; font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  text-align: center;
  display: inline-flex; justify-content: center; gap: 8px;
  transition: filter 200ms;
}
.price-cta:hover { filter: brightness(1.15); }
.price.featured .price-cta {
  background: var(--accent);
  color: var(--accent-ink);
}
.price.featured .price-cta:hover { filter: brightness(1.05); }

/* "Why the name" callout */
.vz-callout {
  background: var(--ink);
  color: var(--bg);
  border-radius: 24px;
  padding: 56px 64px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.vz-callout::before {
  content: "";
  position: absolute;
  inset: -40%;
  background:
    radial-gradient(35% 35% at 20% 30%, rgba(var(--accent-rgb, 200, 242, 60), 0.25), transparent 60%),
    radial-gradient(40% 35% at 80% 70%, rgba(var(--accent-rgb, 200, 242, 60), 0.12), transparent 65%);
  filter: blur(50px);
  z-index: -1;
}
.vz-callout h3 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 48px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0;
  color: var(--bg);
}
.vz-callout h3 em { font-style: italic; font-weight: 500; }
.vz-callout ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 14px;
  font-family: var(--font-display);
  font-size: clamp(18px, 1.7vw, 22px);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.vz-callout ul li {
  padding-left: 22px; position: relative;
  color: rgba(255,255,255,0.88);
}
.vz-callout ul li::before {
  content: ""; position: absolute;
  left: 0; top: 0.55em;
  width: 10px; height: 1.5px;
  background: var(--accent);
}
@media (max-width: 900px) {
  .vz-callout { grid-template-columns: 1fr; padding: 36px 28px; gap: 28px; }
}

/* FAQ adjustments — keep same as cuvir */

/* ───────────────────────────────────────────
   CASE DETAIL PAGE
   ─────────────────────────────────────────── */
.vz-case-page { padding-top: 92px; }

.vz-case-head { padding: 64px 0 48px; }
.vz-case-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 32px;
  cursor: pointer; transition: color 200ms;
}
.vz-case-back:hover { color: var(--ink); }
.vz-case-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(48px, 8vw, 128px);
  letter-spacing: -0.035em; line-height: 0.94;
  margin: 24px 0 28px;
  max-width: 14ch;
  text-wrap: balance;
}
.vz-case-intro {
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 56ch;
  margin: 0;
}

.vz-case-bar {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 28px 0;
}
.vz-case-bar-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 0.7fr 1.4fr 1.2fr;
  gap: 32px;
  align-items: baseline;
}
.vz-case-bar-k {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 6px;
}
.vz-case-bar-v {
  font-size: 15px; font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.vz-case-bar-metric .vz-case-bar-v b {
  font-family: var(--font-display); font-weight: 500;
  font-size: 22px; letter-spacing: -0.015em;
  color: var(--accent-ink);
  background: var(--accent);
  padding: 2px 10px; border-radius: 4px;
  margin-right: 6px;
}

.vz-case-hero-mock-section {
  padding: 48px 0 32px;
}

.vz-case-prose { display: flex; flex-direction: column; gap: 4px; }
.vz-case-body {
  font-size: 16px; line-height: 1.65;
  color: var(--ink-2);
  margin: 0 0 18px;
  max-width: 60ch;
}
.vz-case-body:last-child { margin-bottom: 0; }

.vz-case-gallery {
  padding: 24px 0 64px;
}
.vz-case-gallery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: stretch;
  max-width: 1600px;
  margin: 0 auto;
}
.vz-case-gallery-item {
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}
.vz-case-gallery-item .preview-canvas {
  aspect-ratio: 3 / 2;
  min-height: 0;
}
.vz-case-gallery-item:hover { transform: translateY(-4px); }
@media (max-width: 900px) {
  .vz-case-gallery-grid { grid-template-columns: 1fr; gap: 20px; }
  .vz-case-gallery-item .preview-canvas { aspect-ratio: 16 / 10; }
}

/* Case-gallery section gets wider container so frames feel like real browser windows */
.vz-case-gallery .container {
  max-width: 1600px;
}

.vz-case-result-metric {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 32px;
  padding: 24px;
  background: var(--bg);
  border: 1px solid var(--accent);
  border-radius: 14px;
  max-width: 280px;
}
.vz-case-result-metric-val {
  font-family: var(--font-display);
  font-size: clamp(48px, 6vw, 88px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--ink);
}
.vz-case-result-metric-lbl {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 6px;
}

.vz-case-next {
  border-top: 1px solid var(--line);
  padding: 80px 0 120px;
}
.vz-case-next-link {
  display: block; cursor: pointer;
  text-decoration: none;
}
.vz-case-next-k {
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 18px;
}
.vz-case-next-name {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(48px, 7vw, 96px);
  letter-spacing: -0.035em; line-height: 1;
  margin: 0 0 14px;
  color: var(--ink);
  transition: color 300ms;
}
.vz-case-next-arrow {
  display: inline-block;
  color: var(--accent);
  transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
.vz-case-next-link:hover .vz-case-next-arrow { transform: translateX(12px); }
.vz-case-next-meta {
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3);
}

/* ───────────────────────────────────────────
   LEGAL PAGE — vorzeigbar override on cuvir's styles
   ─────────────────────────────────────────── */
.vz-legal-page { padding-top: 92px; }
.vz-legal-page .legal-toc ol { padding: 0; list-style: none; margin: 0 0 32px; display: flex; flex-direction: column; gap: 4px; position: relative; counter-reset: lt; }
.vz-legal-page .legal-toc ol li { counter-increment: lt; line-height: 1.4; position: relative; padding: 6px 0 6px 14px; transition: padding-left 280ms cubic-bezier(0.22, 0.61, 0.36, 1), color 220ms ease; }
.vz-legal-page .legal-toc ol li::before {
  content: counter(lt, decimal-leading-zero) ".  ";
  color: var(--ink-3); transition: color 220ms ease;
}
.vz-legal-page .legal-toc ol li:hover, .vz-legal-page .legal-toc ol li.active, .vz-legal-page .legal-toc ol li.hover { padding-left: 18px; }
.vz-legal-page .legal-toc ol li.active::before, .vz-legal-page .legal-toc ol li.hover::before { color: var(--ink); }
.vz-legal-page .legal-toc ol li a { color: var(--ink-2); cursor: pointer; transition: color 200ms; }
.vz-legal-page .legal-toc ol li:hover a, .vz-legal-page .legal-toc ol li.active a, .vz-legal-page .legal-toc ol li.hover a { color: var(--ink); }
.vz-legal-page .legal-section h2 {
  font-family: var(--font-display); font-weight: 500;
  letter-spacing: -0.02em;
}

/* ───────────────────────────────────────────
   MOBILE OPTIMIZATIONS — desktop unchanged
   ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Hero stats: 2x2 instead of 1x4 */
  .vz-hero-stats { grid-template-columns: 1fr 1fr; }
  .vz-hero-stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .vz-hero-stat:nth-child(2n) { border-right: 0; }

  /* Case bar */
  .vz-case-bar-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
    row-gap: 24px;
  }
  .vz-case-bar-grid > div:nth-child(4),
  .vz-case-bar-grid > div:nth-child(5) {
    grid-column: span 1;
  }

  .vz-case-gallery-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (max-width: 720px) {
  /* HERO: tighter top spacing, smaller stats */
  .vz-hero { padding: 100px 18px 0; }
  .vz-hero-inner { padding: 24px 0 56px; gap: 24px; }
  .vz-hero h1 { font-size: clamp(40px, 11vw, 64px); line-height: 0.98; }
  .vz-hero-sub { font-size: 16px; }
  .vz-hero-cta-row { gap: 10px; }
  .vz-hero-cta-row .small {
    margin-left: 0; width: 100%;
    padding-top: 4px;
    text-align: left;
  }
  .vz-hero-cta-row .btn { width: 100%; justify-content: space-between; }

  /* Hero stats compact */
  .vz-hero-stats {
    grid-template-columns: 1fr 1fr;
    margin-top: 40px;
  }
  .vz-hero-stat { padding: 18px 14px; }
  .vz-hero-stat .num { font-size: 32px; }
  .vz-hero-stat .lbl { font-size: 10px; letter-spacing: 0.06em; }

  /* Mockup: kill 3D tilt on mobile (looks weird, hurts perf) */
  .vz-hero-mock { perspective: none; }
  .vz-hero-mock .browser-frame { transform: none !important; }
  .browser-url { font-size: 9px; padding: 2px 8px; }
  .mock-hero-inner { grid-template-columns: 1fr; }
  .mock-right { display: none; }
  .mock-left { padding: 18px; }
  .mock-h { font-size: clamp(22px, 6vw, 32px); }

  /* Sections tighter */
  .section { padding: 56px 0; }
  .split-2 { gap: 28px; }
  .split-2 .l { position: static; }

  /* Pricing — column stack, dehighlight */
  .pricing { grid-template-columns: 1fr; gap: 14px; }
  .pricing::before { display: none; }
  .price { padding: 26px; }
  .price-tag { font-size: 44px !important; }

  /* Anti-thesis stack */
  .vz-anti { grid-template-columns: 1fr; gap: 14px; }
  .vz-anti-card { padding: 24px; }

  /* Process: cuvir has it covered — single col */
  .process .step { padding: 24px 18px; }
  .process .step h4 { font-size: 22px; }

  /* Portfolio */
  .vz-case-name { font-size: 19px; }
  .preview-canvas { padding: 14px; }
  .pc-title { font-size: 16px !important; }
  .pc-row-strip { font-size: 7px; }
  .pc-row-strip b { font-size: 12px; }

  /* Web-Check */
  .webcheck { padding: 22px; border-radius: 16px; }
  .webcheck-title { font-size: 26px; }
  .webcheck-form { grid-template-columns: 1fr; padding: 8px; gap: 8px; }
  .webcheck-input { padding: 12px; font-size: 13px; }
  .webcheck-btn { width: 100%; justify-content: center; padding: 14px; }
  .webcheck-scores { grid-template-columns: 1fr 1fr; gap: 12px; }
  .webcheck-score { padding: 16px; }
  .webcheck-gauge { width: 64px; height: 64px; }
  .webcheck-gauge-val { font-size: 19px; }
  .webcheck-finding { grid-template-columns: auto 1fr; gap: 12px; padding: 12px 0; }
  .webcheck-finding-tag { display: none; }
  .webcheck-finding-text { font-size: 13px; }
  .webcheck-capture { grid-template-columns: 1fr; padding: 20px; gap: 16px; }
  .webcheck-capture h4 { font-size: 19px; }
  .webcheck-loading { font-size: 12px; gap: 12px; }

  /* Callout */
  .vz-callout { padding: 32px 24px; gap: 24px; border-radius: 18px; }
  .vz-callout h3 { font-size: 26px; }
  .vz-callout ul { font-size: 17px; }

  /* Contact */
  .vz-contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .vz-form { padding: 22px; border-radius: 16px; }
  .vz-form-row { grid-template-columns: 1fr; }
  .vz-select-row { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
  .vz-chip-radio span { padding: 10px 6px; font-size: 12px; }
  .vz-contact-meta dd { font-size: 18px; }

  /* Case detail */
  .vz-case-page { padding-top: 72px; }
  .vz-case-head { padding: 40px 0 32px; }
  .vz-case-back { margin-bottom: 20px; }
  .vz-case-title { font-size: clamp(34px, 9.5vw, 56px); margin: 18px 0 20px; max-width: 14ch; }
  .vz-case-intro { font-size: 16px; }
  .vz-case-bar { padding: 20px 0; }
  .vz-case-bar-grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    row-gap: 18px;
  }
  .vz-case-bar-grid > div:nth-child(4),
  .vz-case-bar-grid > div:nth-child(5) {
    grid-column: span 2;
  }
  .vz-case-hero-mock-section { padding: 24px 0; }
  .vz-case-result-metric { padding: 18px; max-width: none; }
  .vz-case-result-metric-val { font-size: 56px; }
  .vz-case-next { padding: 56px 0 80px; }
  .vz-case-next-name { font-size: clamp(36px, 11vw, 56px); }

  /* Legal page */
  .vz-legal-page { padding-top: 72px; }
  .vz-legal-page .legal-tabs { padding: 4px; gap: 4px; }
  .vz-legal-page .legal-tab { padding: 8px 14px; font-size: 12px; }
  .legal-grid { grid-template-columns: 1fr; gap: 28px; }
  .legal-toc { position: static; padding-top: 18px; }
  .legal-body { font-size: 15px; }
  .legal-section { padding: 28px 0; }
  .legal-section h2 { font-size: 22px; }

  /* Header simplification */
  .hdr { padding: 12px 18px; }
  .hdr .brand { font-size: 18px; }
  .hdr-burger { transform: translateY(-3px); }
  .floating-cta { bottom: 14px; left: 14px; padding: 11px 16px; font-size: 12px; }
  .floating-cta-arrow { font-size: 14px; }

  /* Section anchors and dots */
  .tag { font-size: 11px; }
  h2.h-2, .h-2 { font-size: clamp(32px, 9vw, 48px) !important; line-height: 1.04; }

  /* Footer */
  .footer { padding: 56px 18px 24px; }
  .footer .big { font-size: clamp(36px, 11vw, 56px); }
  .footer .grid { gap: 24px; }
}

@media (max-width: 420px) {
  .vz-select-row { grid-template-columns: 1fr; }
  .vz-hero h1 { font-size: clamp(36px, 12vw, 56px); }
  .price-tag { font-size: 36px !important; }
}

/* ═══════════════════════════════════════════════════════════
   DEMO PAGE — Maison Aurélis (fictional client showcase)
   This is a self-contained mini-site to show what we deliver.
   Editorial type, warm paper palette, generous whitespace.
   ═══════════════════════════════════════════════════════════ */

/* Demo banner — stays at top, signals this is a sample */
.demo-banner {
  position: sticky; top: 0; z-index: 50;
  background: var(--ink);
  color: var(--bg);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.demo-banner-inner {
  max-width: 1320px; margin: 0 auto;
  padding: 11px 32px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px;
}
.demo-banner-tag {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  opacity: 0.85;
}
.demo-banner-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(var(--accent-rgb, 200, 242, 60), 0.6);
  animation: vzPulse 2.2s ease-in-out infinite;
}
.demo-banner-back {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--bg); opacity: 0.7;
  cursor: pointer; transition: opacity 200ms;
}
.demo-banner-back:hover { opacity: 1; }

/* The Aurelis "site" itself — warm paper, editorial */
.demo-aurelis {
  background: #F3EFE7;
  color: #1F1812;
  font-family: 'Geist', system-ui, sans-serif;
  /* Override the global noise overlay tone for this page only */
  position: relative;
  min-height: 100vh;
}
.demo-aurelis * { letter-spacing: -0.005em; }

/* Aurelis header */
.aurelis-hdr {
  position: relative;
  border-bottom: 1px solid rgba(31, 24, 18, 0.10);
  padding: 22px 32px;
}
.aurelis-hdr-inner {
  max-width: 1320px; margin: 0 auto;
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 32px;
}
.aurelis-brand {
  font-family: 'Geist', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: #1F1812;
}
.aurelis-nav {
  display: flex; justify-content: center; gap: 28px;
  font-size: 13px;
  color: rgba(31, 24, 18, 0.65);
}
.aurelis-nav a {
  cursor: pointer; transition: color 200ms;
  letter-spacing: 0.02em;
}
.aurelis-nav a.active, .aurelis-nav a:hover { color: #1F1812; }
.aurelis-cta {
  background: #1F1812;
  color: #F3EFE7;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: filter 200ms, transform 200ms;
}
.aurelis-cta:hover { filter: brightness(1.15); transform: translateY(-1px); }

/* Aurelis hero */
.aurelis-hero {
  max-width: 1320px; margin: 0 auto;
  padding: 80px 32px 96px;
  display: grid;
  grid-template-columns: 1fr 0.95fr;
  gap: 64px;
  align-items: center;
}
.aurelis-hero-l { display: flex; flex-direction: column; gap: 22px; }
.aurelis-tag {
  font-family: 'Geist Mono', monospace;
  font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(31, 24, 18, 0.55);
}
.aurelis-tag-inline {
  font-family: 'Geist Mono', monospace;
  font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(31, 24, 18, 0.55);
  margin-bottom: 14px;
  display: inline-block;
}
.aurelis-h1 {
  font-family: 'Geist', serif;
  font-weight: 400;
  font-size: clamp(48px, 7vw, 104px);
  line-height: 0.96;
  letter-spacing: -0.04em;
  margin: 0;
  color: #1F1812;
  text-wrap: balance;
}
.aurelis-h1 em {
  font-style: italic;
  font-weight: 400;
  color: #6B4A2A;
}
.aurelis-h2 {
  font-family: 'Geist', serif;
  font-weight: 400;
  font-size: clamp(34px, 4.4vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0;
  color: #1F1812;
}
.aurelis-h2 em { font-style: italic; color: #6B4A2A; }
.aurelis-sub {
  font-size: 17px; line-height: 1.6;
  color: rgba(31, 24, 18, 0.75);
  max-width: 48ch;
  margin: 0;
}
.aurelis-body {
  font-size: 16px; line-height: 1.7;
  color: rgba(31, 24, 18, 0.78);
  max-width: 52ch;
  margin: 0;
}
.aurelis-body strong { color: #1F1812; font-weight: 500; }
.aurelis-meta-row {
  display: grid; grid-template-columns: repeat(3, auto);
  gap: 36px;
  margin-top: 18px;
  padding-top: 28px;
  border-top: 1px solid rgba(31, 24, 18, 0.12);
}
.aurelis-meta-row > div { display: flex; flex-direction: column; gap: 2px; }
.aurelis-meta-row b {
  font-family: 'Geist', serif;
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: #1F1812;
}
.aurelis-meta-row small {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(31, 24, 18, 0.5);
}

/* Aurelis hero image */
.aurelis-hero-r {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 8px;
  overflow: hidden;
  background: #1F1812;
}
.aurelis-hero-r image-slot {
  display: block;
  width: 100%;
  height: 100%;
}
.founder-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.aurelis-hero-img {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 40% at 50% 30%, rgba(220, 190, 150, 0.7), transparent 70%),
    linear-gradient(160deg, #3a2d22 0%, #1f1812 50%, #6b4a2a 100%);
}
.aurelis-hero-img::after {
  content: "";
  position: absolute; inset: 18%;
  background:
    radial-gradient(40% 30% at 50% 25%, rgba(245, 230, 210, 0.95) 0%, rgba(245, 230, 210, 0) 100%),
    repeating-linear-gradient(
      45deg,
      rgba(245, 230, 210, 0.18) 0px,
      rgba(245, 230, 210, 0.18) 1px,
      transparent 1px,
      transparent 4px
    );
  border-radius: 4px;
  mix-blend-mode: screen;
  opacity: 0.85;
  filter: blur(0.5px);
}
.aurelis-hero-tag {
  position: absolute; left: 18px; bottom: 18px;
  font-family: 'Geist Mono', monospace;
  font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(243, 239, 231, 0.9);
  padding: 7px 12px;
  background: rgba(31, 24, 18, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 4px;
}

/* Quote / Editorial */
.aurelis-quote-sec {
  border-top: 1px solid rgba(31, 24, 18, 0.10);
  border-bottom: 1px solid rgba(31, 24, 18, 0.10);
  background: rgba(31, 24, 18, 0.03);
  padding: 88px 32px;
}
.aurelis-quote-inner {
  max-width: 920px; margin: 0 auto;
  text-align: center;
  position: relative;
}
.aurelis-quote-mark {
  font-family: 'Geist', serif;
  font-style: italic;
  font-size: 120px;
  color: #6B4A2A;
  line-height: 0.6;
  display: block;
  margin-bottom: 18px;
}
.aurelis-quote {
  font-family: 'Geist', serif;
  font-style: italic;
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: #1F1812;
  margin: 0 0 28px;
  text-wrap: balance;
}
.aurelis-quote-who {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(31, 24, 18, 0.6);
}

/* Collection */
.aurelis-coll {
  max-width: 1320px; margin: 0 auto;
  padding: 96px 32px;
}
.aurelis-coll-head { margin-bottom: 56px; max-width: 760px; }
.aurelis-coll-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.aurelis-card {
  position: relative;
  display: flex; flex-direction: column;
  gap: 18px;
  cursor: pointer;
}
.aurelis-card-img {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 6px;
  overflow: hidden;
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.aurelis-card:hover .aurelis-card-img { transform: scale(1.02); }
/* Color variants for cards — abstract fabric textures */
.aurelis-card-cream .aurelis-card-img { background: linear-gradient(135deg, #efe2cc 0%, #d4c5a8 100%); }
.aurelis-card-rust .aurelis-card-img { background: linear-gradient(135deg, #b87648 0%, #7a4a2a 100%); }
.aurelis-card-umber .aurelis-card-img { background: linear-gradient(135deg, #5e3a22 0%, #2d1a0e 100%); }
.aurelis-card-pearl .aurelis-card-img { background: linear-gradient(135deg, #e8e4dc 0%, #b8b2a4 100%); }
.aurelis-card-ivory .aurelis-card-img { background: linear-gradient(135deg, #f4ecda 0%, #d8c8a8 100%); }
.aurelis-card-amber .aurelis-card-img { background: linear-gradient(135deg, #d99e4e 0%, #8a5a1e 100%); }
.aurelis-card-img::after {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(
      35deg,
      rgba(255,255,255,0.08) 0,
      rgba(255,255,255,0.08) 1px,
      transparent 1px,
      transparent 6px
    ),
    repeating-linear-gradient(
      125deg,
      rgba(0,0,0,0.06) 0,
      rgba(0,0,0,0.06) 1px,
      transparent 1px,
      transparent 9px
    );
  opacity: 0.7;
}
.aurelis-card-num {
  position: absolute; top: 14px; right: 14px;
  font-family: 'Geist Mono', monospace;
  font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(243, 239, 231, 0.92);
  padding: 5px 10px;
  background: rgba(31, 24, 18, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 999px;
  z-index: 2;
}
.aurelis-card-body { display: flex; flex-direction: column; gap: 14px; }
.aurelis-card-body h3 {
  font-family: 'Geist', serif;
  font-weight: 400;
  font-size: 30px;
  letter-spacing: -0.025em;
  margin: 0;
  color: #1F1812;
}
.aurelis-card-meta {
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid rgba(31, 24, 18, 0.10);
  border-bottom: 1px solid rgba(31, 24, 18, 0.10);
}
.aurelis-card-meta small {
  display: block;
  font-family: 'Geist Mono', monospace;
  font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(31, 24, 18, 0.5);
  margin-bottom: 4px;
}
.aurelis-card-meta span {
  font-size: 14px;
  color: rgba(31, 24, 18, 0.85);
}
.aurelis-card-foot {
  display: flex; justify-content: space-between; align-items: center;
}
.aurelis-card-price {
  font-family: 'Geist', serif;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.015em;
  color: #1F1812;
}
.aurelis-card-cta {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6B4A2A;
  cursor: pointer;
  transition: gap 200ms;
}
.aurelis-card:hover .aurelis-card-cta { color: #1F1812; }

/* Atelier */
.aurelis-atelier {
  max-width: 1320px; margin: 0 auto;
  padding: 80px 32px 112px;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 64px;
  align-items: center;
}
.aurelis-atelier-l { display: flex; flex-direction: column; gap: 20px; max-width: 460px; }
.aurelis-atelier-cta {
  margin-top: 14px;
  display: flex; gap: 12px; flex-wrap: wrap;
}
.aurelis-cta-main {
  background: #1F1812;
  color: #F3EFE7;
  padding: 13px 22px;
  border-radius: 999px;
  font-size: 14px; font-weight: 500;
  cursor: pointer;
  transition: filter 200ms, transform 200ms;
}
.aurelis-cta-main:hover { filter: brightness(1.15); transform: translateY(-1px); }
.aurelis-cta-second {
  background: transparent;
  color: #1F1812;
  border: 1px solid rgba(31, 24, 18, 0.20);
  padding: 13px 22px;
  border-radius: 999px;
  font-size: 14px; font-weight: 500;
  cursor: pointer;
  transition: background 200ms, border-color 200ms;
}
.aurelis-cta-second:hover {
  background: rgba(31, 24, 18, 0.05);
  border-color: rgba(31, 24, 18, 0.35);
}
.aurelis-atelier-r {
  display: grid;
  grid-template-columns: 1.2fr 0.9fr;
  gap: 16px;
  height: 540px;
}
.aurelis-atelier-r image-slot {
  display: block;
  border-radius: 6px;
  overflow: hidden;
}
.aurelis-atelier-img {
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}
.aurelis-atelier-img.a {
  background: linear-gradient(135deg, #6b4a2a 0%, #2d1a0e 100%);
}
.aurelis-atelier-img.b {
  background: linear-gradient(135deg, #d4c5a8 0%, #8a7048 100%);
  align-self: end;
  height: 70%;
}
.aurelis-atelier-img::after {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.06) 0, rgba(255,255,255,0.06) 1px, transparent 1px, transparent 5px);
  opacity: 0.6;
}

/* Aurelis footer */
.aurelis-footer {
  background: #1F1812;
  color: #E8DDC9;
  padding: 80px 32px 32px;
}
.aurelis-footer-grid {
  max-width: 1320px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.aurelis-footer-brand {
  font-family: 'Geist', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(36px, 4.5vw, 64px);
  letter-spacing: -0.03em;
  color: #F3EFE7;
  margin-bottom: 14px;
}
.aurelis-footer-sub {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(232, 221, 201, 0.55);
}
.aurelis-footer-grid > div small {
  display: block;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(232, 221, 201, 0.5);
  margin-bottom: 10px;
}
.aurelis-footer-grid > div span {
  display: block;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(232, 221, 201, 0.85);
}
.aurelis-footer-bottom {
  max-width: 1320px; margin: 56px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(232, 221, 201, 0.12);
  display: flex; justify-content: space-between;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(232, 221, 201, 0.45);
}

/* Vorzeigbar attribution strip — last section, hard cut from demo design */
.demo-attribution {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  border-top: 4px solid var(--accent);
  padding: 48px 32px;
}
.demo-attribution-inner {
  max-width: 1320px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
}
.demo-attribution small {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.demo-attribution p {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0;
  max-width: 50ch;
}
.demo-attribution-cta {
  display: inline-flex; align-items: center;
  background: var(--ink);
  color: var(--bg);
  padding: 14px 24px;
  border-radius: 999px;
  font-size: 14px; font-weight: 500;
  cursor: pointer;
  transition: filter 200ms, transform 200ms;
}
.demo-attribution-cta:hover { filter: brightness(1.15); transform: translateY(-1px); }

/* Demo mobile */
@media (max-width: 1024px) {
  .aurelis-hdr-inner { grid-template-columns: auto 1fr auto; gap: 18px; }
  .aurelis-nav { display: none; }
  .aurelis-hero { grid-template-columns: 1fr; gap: 48px; padding: 56px 24px 72px; }
  .aurelis-hero-r { max-width: 480px; }
  .aurelis-coll { padding: 72px 24px; }
  .aurelis-coll-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .aurelis-atelier { grid-template-columns: 1fr; gap: 40px; padding: 64px 24px 96px; }
  .aurelis-atelier-r { height: 380px; max-width: 600px; }
  .aurelis-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 720px) {
  .demo-banner-inner { padding: 10px 18px; gap: 10px; }
  .demo-banner-tag { font-size: 10px; }
  .demo-banner-back { font-size: 10px; }
  .aurelis-hdr { padding: 16px 18px; }
  .aurelis-brand { font-size: 19px; }
  .aurelis-cta { padding: 9px 16px; font-size: 12px; }
  .aurelis-hero { padding: 48px 18px 64px; gap: 36px; }
  .aurelis-h1 { font-size: clamp(40px, 12vw, 64px); }
  .aurelis-sub { font-size: 16px; }
  .aurelis-meta-row { gap: 18px; padding-top: 22px; }
  .aurelis-meta-row b { font-size: 15px; }
  .aurelis-meta-row small { font-size: 9px; }
  .aurelis-quote-sec { padding: 56px 18px; }
  .aurelis-quote-mark { font-size: 80px; margin-bottom: 8px; }
  .aurelis-coll { padding: 56px 18px; }
  .aurelis-coll-head { margin-bottom: 36px; }
  .aurelis-coll-grid { grid-template-columns: 1fr; gap: 28px; }
  .aurelis-card-body h3 { font-size: 24px; }
  .aurelis-atelier { padding: 48px 18px 72px; }
  .aurelis-atelier-r { height: 320px; grid-template-columns: 1fr; gap: 12px; }
  .aurelis-atelier-img.b { height: 100%; align-self: stretch; }
  .aurelis-footer { padding: 56px 18px 24px; }
  .aurelis-footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .aurelis-footer-bottom { flex-direction: column; gap: 8px; margin-top: 36px; }
  .demo-attribution { padding: 36px 18px; }
  .demo-attribution-inner { grid-template-columns: 1fr; gap: 20px; }
  .demo-attribution p { font-size: 22px; }
}
.reveal {
  will-change: opacity, transform;
  /* Always visible by default — JS will reset .reveal:not(.in) for subtle entry */
  opacity: 1 !important;
  transform: none !important;
}
/* When JS adds [data-reveal-ready] to <html>, we let the original styles.css
   reveal logic take over (initial opacity 0 → .in opacity 1) */
html[data-reveal-ready] .reveal {
  opacity: 0 !important;
  transform: translateY(20px) !important;
}
html[data-reveal-ready] .reveal.in {
  opacity: 1 !important;
  transform: none !important;
}


/* ─────────────── Case Detail Pages ─────────────── */
.vz-case-page .vz-hero { padding-top: 132px; padding-bottom: 0; }
.vz-case-back {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3); cursor: pointer;
  margin-bottom: 8px;
  transition: color 200ms;
}
.vz-case-back:hover { color: var(--ink); }

.vz-case-bar {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-top: 24px;
}
.vz-case-bar > div {
  padding: 22px 18px;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 6px;
}
.vz-case-bar > div:last-child { border-right: 0; }
.vz-case-bar dt {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3); margin: 0;
}
.vz-case-bar dd {
  font-family: var(--font-sans);
  font-size: 13px; font-weight: 500;
  color: var(--ink); margin: 0;
  line-height: 1.35;
  letter-spacing: -0.005em;
}
@media (max-width: 1024px) {
  .vz-case-bar { grid-template-columns: 1fr 1fr 1fr; }
  .vz-case-bar > div:nth-child(3n) { border-right: 0; }
  .vz-case-bar > div:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 540px) {
  .vz-case-bar { grid-template-columns: 1fr 1fr; }
  .vz-case-bar > div:nth-child(2n) { border-right: 0; }
  .vz-case-bar > div:nth-child(2n+1) { border-right: 1px solid var(--line); }
  .vz-case-bar > div:nth-child(-n+4) { border-bottom: 1px solid var(--line); }
}

.vz-case-cover {
  margin-top: 32px;
  perspective: 2400px;
  perspective-origin: 50% 30%;
}
.vz-case-cover .browser-frame {
  transform: rotateX(6deg) rotateY(-1deg);
  transform-style: preserve-3d;
  transition: transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
}
.vz-case-cover:hover .browser-frame { transform: rotateX(2deg) rotateY(0deg); }
body.no-motion .vz-case-cover .browser-frame { transform: none; }

/* Quote */
.vz-case-quote {
  max-width: 920px;
  margin: 0 auto;
  padding: 56px 64px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 24px;
  position: relative;
  text-align: left;
}
.vz-case-quote-mark {
  position: absolute;
  top: 24px; left: 64px;
  font-family: var(--font-display);
  font-size: 96px; line-height: 1;
  color: var(--accent);
  opacity: 0.7;
  pointer-events: none;
}
.vz-case-quote p {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.3;
  margin: 0 0 24px;
  position: relative;
  max-width: 60ch;
  padding-top: 40px;
}
.vz-case-quote footer {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-sans);
}
.vz-case-quote footer b {
  font-size: 15px; font-weight: 500;
  color: var(--ink);
}
.vz-case-quote footer span {
  font-size: 13px;
  color: var(--ink-3);
}
.vz-case-quote footer b::after {
  content: " ·";
  margin-left: 2px;
  color: var(--ink-3);
}
@media (max-width: 720px) {
  .vz-case-quote { padding: 36px 28px; }
  .vz-case-quote-mark { left: 28px; top: 14px; font-size: 64px; }
}

/* Gallery */
.vz-case-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.vz-case-gallery-item {
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.vz-case-gallery-item:hover { transform: translateY(-4px); }
@media (max-width: 720px) {
  .vz-case-gallery { grid-template-columns: 1fr; }
}

/* Next case section */
.vz-case-next {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
}
.vz-case-next-cta {
  padding: 48px 48px 48px 0;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
}
.vz-case-next-link {
  padding: 48px 0 48px 48px;
  cursor: pointer;
  display: flex; flex-direction: column;
  justify-content: center;
  transition: padding-left 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
.vz-case-next-link:hover { padding-left: 64px; }
.vz-case-next-k {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 18px;
}
.vz-case-next-name {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.5vw, 64px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1;
  margin-bottom: 12px;
  transition: color 300ms;
}
.vz-case-next-link:hover .vz-case-next-name { color: var(--accent); }
.vz-case-next-tag {
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3);
}
@media (max-width: 720px) {
  .vz-case-next { grid-template-columns: 1fr; }
  .vz-case-next-cta { border-right: 0; border-bottom: 1px solid var(--line); padding: 32px 0; }
  .vz-case-next-link { padding: 32px 0; }
  .vz-case-next-link:hover { padding-left: 0; }
}

/* Legal page tabs adjust for vorzeigbar hero */
.legal-page .vz-hero { padding-bottom: 32px; }
.legal-page .vz-hero-inner > .legal-tabs { margin-top: 16px; }