/* Doorstep Studio — Ridgeline-Struktur, aber mit mehr Punch: dunkle Bookends (Hero, Kontakt,
   Fuß) mit Gold-Glow und 3D-Tilt-Mockups, dazwischen helle, vertrauenswürdige Arbeits-Sektionen.
   Gold ist der eine scharfe Akzent (zurück zur ursprünglichen Doorstep-Studio-Marke); die
   Fake-Demo-Websites bekommen bewusst eine neutrale, andere Farbe, damit klar bleibt: das ist
   nicht die Doorstep-Studio-Marke, sondern ein Platzhalter für den jeweiligen Beispielbetrieb. */

@font-face {
  font-family: 'Instrument Sans';
  src: url('fonts/InstrumentSans-Variable.woff2') format('woff2-variations'), url('fonts/InstrumentSans-Variable.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('fonts/GeistMono-Variable.woff2') format('woff2-variations'), url('fonts/GeistMono-Variable.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brewns-Look: Espresso und Bone im Wechsel, ein gedämpftes Amber als Akzent. Matt, ruhig, ohne Leuchten. */
  --espresso: #070707;
  --espresso-2: #171715;
  --bone: #f1f1ef;
  --bone-2: #e7e5e3;
  --amber: #d58c3d;

  --page: rgba(241, 241, 239, .05);
  --surface: rgba(241, 241, 239, .05);
  --surface-soft: rgba(241, 241, 239, .03);
  --ink: #f1f1ef;
  --muted: rgba(241, 241, 239, .68);
  --line: rgba(241, 241, 239, .14);
  --swirl: #171715;

  --deep: #070707;       /* Preloader, Statuszeile, Fuß */
  --deep-2: #171715;
  --deep-line: rgba(241, 241, 239, .14);

  --accent: #d58c3d;      /* Amber — der eine Akzent */
  --accent-dim: rgba(213, 140, 61, .2);
  --on-accent: #070707;
  --demo-brand: #3b63d4;  /* neutrale Farbe NUR für die Fake-Beispiel-Websites, nie Doorstep-Markenfarbe */

  --live: #3f8f58;

  --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --radius-page: 2rem;
  --radius-lg: 1.5rem;
  --radius-md: 1.25rem;
  --radius-chip: 1.125rem;
  --radius-sm: 1rem;
  --radius-xs: .875rem;
  --radius-pill: 1.75rem;

  --duration-fast: 150ms;
  --duration: 250ms;
  --ease: cubic-bezier(.2, 0, 0, 1);

  --shadow-card: 0 2px 12px rgba(0, 0, 0, .25);
  --shadow-form: 0 16px 48px rgba(0, 0, 0, .34);
  --shadow-pop: 0 8px 24px rgba(0, 0, 0, .32);
  --glow-accent: 0 30px 80px -40px rgba(0, 0, 0, .7);

  --header-h: 5.5rem;
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  margin: 0;
  background-color: var(--espresso);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: 1rem; top: 1rem; z-index: 999; background: var(--accent); color: var(--on-accent); padding: .6rem 1rem; border-radius: var(--radius-xs); }

/* ---------- Text-Reveal-Grundgerüst ---------- */
.te-split .w { display: inline-block; overflow: hidden; vertical-align: top; }
.te-split .w:not(:last-child) { margin-right: .26em; }
.te-split .w.punct { margin-left: -.26em; }
.te-split .w .l { display: inline-block; }
[data-rv] { display: block; }

/* ---------- Typo-Skala (große Sprünge, volle Gewichtsreichweite) ---------- */
.d {
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.02;
}
.h1 { font-size: clamp(2.4rem, min(7.4vw, 11vh), 6.4rem); letter-spacing: -.035em; }
.h2 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); }
.body { font-size: 1.08rem; line-height: 1.6; color: var(--muted); }
.tag {
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ---------- Preloader (ein orchestrierter Reveal statt vieler Mikro-Effekte) ---------- */
#preloader { position: fixed; inset: 0; z-index: 100; overflow: hidden; pointer-events: auto; }
#preloader.is-leaving { pointer-events: none; }
#preloader .pl-hole {
  position: absolute; inset: 0; margin: auto; width: 46px; height: 58px; border-radius: 4px 4px 0 0;
  box-shadow: 0 0 0 200vmax var(--deep); will-change: transform;
}
#preloader .pl-ui { position: absolute; inset: 0; transition: opacity 320ms var(--ease); }
#preloader .pl-ui.is-cleared { opacity: 0; }
#preloader .pl-mark { position: absolute; inset: 0; margin: auto; width: 46px; height: 58px; overflow: visible; }
#preloader .pl-frame { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 1; }
#preloader .pl-knob { fill: var(--accent); opacity: 0; transition: opacity 200ms var(--ease); }
#preloader .pl-word { position: absolute; left: 0; right: 0; top: calc(50% + 58px); text-align: center; font-family: var(--font-mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .7); opacity: 0; }
#preloader .pl-foot { position: absolute; left: 2.5rem; right: 2.5rem; bottom: 2.5rem; display: flex; flex-direction: column; gap: 1.1rem; }
#preloader .pl-bar { height: 1px; background: rgba(255, 255, 255, .12); }
#preloader .pl-fill { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); }
#preloader .pl-count { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; color: rgba(255, 255, 255, .45); }
#preloader .pl-count b { color: var(--accent); font-weight: 500; }
#preloader .pl-count b::after { content: ' %'; }
body.is-loading { overflow: hidden; }
html:not(.js) #preloader { display: none; }
html:not(.js) body.is-loading { overflow: visible; }

/* ---------- Statuszeile ---------- */
.status {
  background: var(--deep);
  border-bottom: 1px solid var(--deep-line);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}
.status-row {
  max-width: 76rem; margin: 0 auto;
  padding: .55rem var(--gutter);
  display: flex; align-items: center; gap: .5rem;
}
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ---------- Header ---------- */
.hdr {
  position: sticky; top: 0; z-index: 60;
  height: var(--header-h);
  display: flex; align-items: center;
}
.hdr-inner {
  width: 100%; max-width: 76rem; margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.hdr.solid { color: #171715; --ink: #171715; --muted: rgba(23, 23, 21, .66); --line: rgba(23, 23, 21, .14); --page: rgba(23, 23, 21, .07); background: rgba(241, 241, 239, .9); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.hdr.glass .logo svg rect:first-child { fill: rgba(241, 241, 239, .16); }
.hdr.glass .logo svg rect:not(:first-child) { stroke: rgba(241, 241, 239, .55); }
.hdr.glass { background: rgba(7, 7, 7, .4); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255, 255, 255, .12); }
.hdr.glass .hdr-link, .hdr.glass .logo span { color: #fff; }
.hdr.glass .logo span { opacity: .92; }
.logo { display: flex; align-items: center; gap: .55rem; font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; }
.logo svg { width: 24px; height: 30px; }
.hdr-nav { position: relative; display: none; gap: .25rem; }
.hdr-link { position: relative; z-index: 1; padding: .55rem 1rem; font-size: .92rem; font-weight: 500; color: var(--ink); border-radius: var(--radius-pill); }
.hdr-plaque { position: absolute; top: 0; height: 100%; background: var(--page); border-radius: var(--radius-pill); z-index: 0; left: 0; width: 0; }
.hdr.glass .hdr-plaque { background: rgba(255, 255, 255, .14); }
.pill-cta {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .7rem 1.3rem;
  background: var(--accent); color: var(--on-accent);
  border-radius: var(--radius-pill);
  font-size: .9rem; font-weight: 700;
  overflow: hidden; position: relative;
}
.pill-cta .pill-roll { display: inline-block; }
.burger {
  width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center;
  position: relative;
}
.burger span { position: absolute; width: 18px; height: 1.6px; background: var(--ink); border-radius: 2px; }
.hdr.glass .burger span { background: #fff; }
.burger span:first-child { transform: translateY(-4px); }
.burger span:last-child { transform: translateY(4px); }
@media (min-width: 880px) { .hdr-nav { display: flex; } .burger { display: none; } }
@media (max-width: 879px) { .pill-cta { display: none; } }

/* ---------- Mobilmenü ---------- */
.menu {
  position: fixed; inset: 0; z-index: 55;
  background: var(--surface-soft);
  opacity: 0; pointer-events: none;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 var(--gutter);
}
.menu.open { pointer-events: auto; }
.menu-item { font-size: clamp(1.8rem, 6vw, 2.6rem); font-weight: 700; letter-spacing: -.02em; padding: .35rem 0; }
.menu-foot { margin-top: 2rem; display: flex; flex-direction: column; gap: .4rem; }
.menu-foot a { font-family: var(--font-mono); font-size: .85rem; color: var(--muted); }

/* ---------- Abschnitts-Rahmen ---------- */
section { position: relative; }
.wrap { max-width: 76rem; margin: 0 auto; padding: 0 var(--gutter); }
.eyebrow { display: block; margin-bottom: 1rem; }
.section-pad { padding: clamp(4rem, 9vw, 7.5rem) 0; }
.on-soft, .on-surface { position: relative; overflow: hidden; isolation: isolate; }
.on-soft > .wrap, .on-surface > .wrap { position: relative; z-index: 1; }
/* Brewns' Swirl als weiche Textur hinter dem Inhalt */
.on-soft::before, .on-surface::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none; inset: -8% -12% auto -12%; height: 130%;
  background: var(--swirl);
  -webkit-mask: url(swirl-mask.webp) center / cover no-repeat; mask: url(swirl-mask.webp) center / cover no-repeat;
}
.on-soft { background: var(--espresso); --swirl: #171715; }
.on-surface {
  background: var(--bone); --swirl: #e7e5e3;
  --ink: #171715; --muted: rgba(23, 23, 21, .66); --line: rgba(23, 23, 21, .14);
  --surface: #ffffff; --surface-soft: rgba(23, 23, 21, .03); --page: rgba(23, 23, 21, .06);
  --accent: #a45c17; --accent-dim: rgba(164, 92, 23, .18); --on-accent: #f1f1ef;
  --shadow-card: 0 2px 12px rgba(23, 23, 21, .08); --shadow-form: 0 16px 48px rgba(23, 23, 21, .16); --shadow-pop: 0 8px 24px rgba(23, 23, 21, .16);
  color: var(--ink);
}

/* ---------- Hero (dunkles Bookend, Gold-Glow, Tilt-Mockup) ---------- */
#hero { --hero-tint: hsl(20 52% 34%); background: radial-gradient(55% 65% at 68% 38%, color-mix(in srgb, var(--hero-tint) 62%, transparent), transparent 72%), radial-gradient(40% 50% at 12% 90%, color-mix(in srgb, var(--hero-tint) 38%, transparent), transparent 70%), var(--espresso); position: relative; height: 1000svh; margin-top: calc(-1 * var(--header-h)); }
#scene { position: absolute; inset: 0; width: 100lvw; height: 100lvh; display: block; pointer-events: none; transform: translateZ(0); backface-visibility: hidden; }
.hero-grid {
  position: relative; z-index: 1; width: 100%; height: calc(100svh - 2.5rem);
  padding-top: calc(var(--header-h) + .5rem);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  pointer-events: none;
}
.hero-grid .hero-copy { pointer-events: auto; max-width: 42rem; }
.hero-copy { color: #fff; }
.hero-copy .h1 { color: #fff; }
.hero-copy .h1 .accent { color: var(--accent); }
.hero-support { color: rgba(255, 255, 255, .7); max-width: 32rem; margin-top: 1.25rem; font-size: 1.12rem; }
.hero-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.75rem; }
.hero-chips li {
  font-family: var(--font-mono); font-size: .76rem; letter-spacing: .05em; text-transform: uppercase;
  padding: .45rem .9rem; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .82);
}
.hero-cta { margin-top: 2.25rem; }
.cta {
  display: inline-flex; align-items: center; gap: .75rem;
  background: var(--accent); color: var(--on-accent);
  padding: .95rem .5rem .95rem 1.6rem;
  border-radius: var(--radius-pill);
  font-weight: 700; font-size: 1.02rem;
  box-shadow: 0 12px 28px -10px rgba(213, 140, 61, .55);
}
.cta-tile { width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--on-accent); display: flex; align-items: center; justify-content: center; }
.cta-tile svg { width: 18px; height: 18px; }
.cta-tile path { stroke: var(--accent); }

/* Hero-Mockup: "echtes Browserfenster", das in der Dunkelheit schwebt, reagiert auf den Zeiger */
.hero-mock {
  position: relative; container-type: size; aspect-ratio: 4 / 3; border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: var(--shadow-form), var(--glow-accent); overflow: hidden;
  transform: rotateX(0) rotateY(0);
  transition: box-shadow var(--duration) var(--ease);
}
.hero-mock .bar { display: flex; align-items: center; gap: .4rem; padding: .7rem .9rem; border-bottom: 1px solid var(--line); background: var(--surface-soft); }
.hero-mock .bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.hero-mock .bar span { margin-left: .5rem; font-family: var(--font-mono); font-size: .68rem; color: var(--muted); }
.hero-mock .page { padding: 1.4rem; height: calc(100% - 2.6rem); overflow: hidden; }

/* Hotspots zeigen via JS auf die reale Ziel-Element-Mitte (left/top = Punktkoordinaten), weil das
   Mockup DOM-Markup ist, kein Foto — die Cover-Crop-Formeln aus motion/hotspots.js bleiben für
   echtes Fotomaterial reserviert. */
.hotspot { position: absolute; display: flex; align-items: center; gap: .4rem; transform: translate(-4px, -4px); pointer-events: none; opacity: 0; transition: opacity var(--duration) var(--ease); }
.hotspot.is-placed { opacity: 1; }
.hotspot .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-dim); }
.hotspot .leader { flex: none; width: 20px; height: 1px; background: rgba(213, 140, 61, .55); }
.hotspot .label { flex: none; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .03em; white-space: nowrap; background: rgba(255, 255, 255, .97); border: 1px solid var(--line); border-radius: var(--radius-xs); padding: .3rem .55rem; color: var(--on-accent); box-shadow: var(--shadow-card); }

/* ---------- Statement ---------- */
#statement { padding: clamp(5rem, 11vw, 9rem) 0; }
.stmt-head { max-width: 48rem; }
.stmt-head .h2 { color: var(--ink); }
.stmt-head .h2 .accent { color: var(--accent); }
.stmt-support { max-width: 34rem; margin-top: 1.5rem; }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; margin-top: 3rem; }
@media (min-width: 760px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat-v { font-size: clamp(2.2rem, 4.4vw, 3.1rem); font-weight: 700; letter-spacing: -.02em; font-family: var(--font-mono); color: var(--accent); }
.stat-l { display: block; margin-top: .4rem; font-size: .85rem; color: var(--muted); }

/* ---------- Branchen (Work-we-do) ---------- */
.niche-grid { display: grid; gap: 1rem; margin-top: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .niche-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .niche-grid { grid-template-columns: repeat(3, 1fr); } }
.niche-card {
  display: block; padding: 1.5rem; border-radius: var(--radius-md);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  transition: transform var(--duration) var(--ease), border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.niche-card:hover, .niche-card:focus-visible { transform: translateY(-4px); border-color: var(--accent); box-shadow: var(--shadow-pop); }
.niche-card strong { display: block; font-size: 1.1rem; font-weight: 700; margin-bottom: .4rem; }
.niche-card span { display: block; font-size: .92rem; color: var(--muted); line-height: 1.5; }

/* ---------- Pakete / Prozess-Accordion ---------- */
.process-grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); margin-top: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 980px) { .process-grid { grid-template-columns: .9fr 1.1fr; } }
.acc-item { border-top: 1px solid var(--line); }
.acc-item:last-child { border-bottom: 1px solid var(--line); }
.acc-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.25rem 0; text-align: left;
}
.acc-q b { font-size: 1.05rem; font-weight: 700; }
.acc-num { font-family: var(--font-mono); font-size: .78rem; color: var(--accent); margin-right: .9rem; }
.acc-icon { width: 1.4rem; height: 1.4rem; flex: none; position: relative; }
.acc-icon::before, .acc-icon::after { content: ''; position: absolute; inset: 0; margin: auto; width: 12px; height: 1.4px; background: var(--ink); border-radius: 1px; transition: transform var(--duration) var(--ease); }
.acc-icon::after { transform: rotate(90deg); }
.acc-item.is-open .acc-icon::after { transform: rotate(0deg); }
.acc-a { height: 0; overflow: hidden; transition: height var(--duration) var(--ease); }
.acc-a p { padding: 0 0 1.25rem; color: var(--muted); max-width: 30rem; line-height: 1.6; }

.plans { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .plans { grid-template-columns: repeat(3, 1fr); } }
.plan {
  display: flex; flex-direction: column; gap: .7rem;
  padding: 1.6rem; border-radius: var(--radius-md); background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--shadow-card);
}
.plan.feat { border-color: var(--accent); box-shadow: var(--shadow-pop), 0 0 50px -24px rgba(213, 140, 61, .6); }
.plan h3 { font-size: 1.2rem; font-weight: 700; }
.plan .for { font-size: .88rem; color: var(--muted); }
.plan .price { font-family: var(--font-mono); font-size: 1.7rem; font-weight: 600; color: var(--accent); }
.plan ul { display: flex; flex-direction: column; gap: .45rem; margin: .4rem 0; }
.plan li { font-size: .88rem; color: var(--muted); padding-left: 1rem; position: relative; }
.plan li::before { content: '—'; position: absolute; left: 0; color: var(--line); }
.plan-btn {
  margin-top: .4rem; display: inline-flex; justify-content: center;
  padding: .75rem 1rem; border-radius: var(--radius-pill); background: var(--page);
  font-weight: 700; font-size: .9rem; text-align: center;
  transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.plan.feat .plan-btn { background: var(--accent); color: var(--on-accent); }
.care { margin-top: 1.5rem; font-size: .85rem; color: var(--muted); line-height: 1.6; }
.care strong { color: var(--ink); }

/* ---------- Referenzen (Recent Work) — gleicher Glow + Tilt wie der Hero ---------- */
.ref-grid { display: grid; gap: 2.5rem; margin-top: 2.5rem; grid-template-columns: 1fr; perspective: 1400px; }
@media (min-width: 980px) { .ref-grid { grid-template-columns: 1.3fr .7fr; } }
.ref-feature {
  position: relative; container-type: size; border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: var(--shadow-form), var(--glow-accent); overflow: hidden;
  transform: rotateX(0) rotateY(0);
}
.ref-switch { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.ref-switch button {
  padding: .55rem 1.1rem; border-radius: var(--radius-pill); font-size: .85rem; font-weight: 700;
  background: var(--page); color: var(--muted); transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.ref-switch button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.ref-cap { margin-top: 1rem; font-family: var(--font-mono); font-size: .78rem; color: var(--muted); }
.ref-thumbs { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 980px) { .ref-thumbs { grid-template-columns: 1fr; } }
.ref-thumb { border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); padding: 1rem; box-shadow: var(--shadow-card); }
.ref-thumb b { display: block; font-size: .95rem; margin-bottom: .25rem; }
.ref-thumb span { font-size: .82rem; color: var(--muted); }

/* Fiktive Beispielseiten behalten ihre eigene helle Palette */
.demo-site, .hero-mock { --surface: #ffffff; --surface-soft: #fcfcfc; --ink: #0e2035; --muted: #5e6d7e; --line: #e4e7e5; --page: #f5f6f7; background: #ffffff; color: #0e2035; }

/* Browser-Mockup (geteilt: Hero, Referenzen) — Inhalte der FIKTIVEN Beispielfirmen tragen
   bewusst --demo-brand statt --accent, damit sie nie wie Doorstep Studios eigene Marke wirken. */
.demo-site .bar { display: flex; align-items: center; gap: .4rem; padding: .7rem .9rem; border-bottom: 1px solid var(--line); background: var(--surface-soft); }
.demo-site .bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.demo-site .bar span { margin-left: .5rem; font-family: var(--font-mono); font-size: .7rem; color: var(--muted); }
.page { padding: clamp(1.1rem, 2.4vw, 1.8rem); }
.m-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.m-head b { font-size: 1rem; }
.m-head span { font-size: .75rem; color: var(--muted); }
.m-open { color: var(--live); }
.page h3 { font-size: clamp(1.1rem, 2.4vw, 1.5rem); font-weight: 700; letter-spacing: -.01em; margin-bottom: .9rem; max-width: 20rem; }
.m-btn { display: inline-flex; padding: .6rem 1rem; border-radius: var(--radius-pill); background: var(--demo-brand); color: #fff; font-size: .82rem; font-weight: 600; }
.m-label { font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: .9rem 0 .5rem; }
.m-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.m-chips span { font-size: .72rem; padding: .3rem .6rem; border-radius: var(--radius-pill); background: var(--page); color: var(--muted); }
.m-list { margin-top: .9rem; display: flex; flex-direction: column; gap: .35rem; }
.m-list li { font-size: .82rem; color: var(--muted); padding-left: .9rem; position: relative; }
.m-list li::before { content: '•'; position: absolute; left: 0; color: var(--demo-brand); }
.m-tiles { display: flex; gap: .5rem; margin: .6rem 0; }
.m-tiles i { width: 2.6rem; height: 2.6rem; border-radius: var(--radius-xs); background: var(--page); }
.m-prices { display: flex; flex-direction: column; gap: .4rem; margin: .6rem 0 .9rem; }
.m-prices div { display: flex; justify-content: space-between; gap: 1rem; font-size: .82rem; }
.m-prices dt { color: var(--ink); } .m-prices dd { margin: 0; color: var(--muted); font-family: var(--font-mono); }
.m-steps { display: flex; flex-direction: column; gap: .6rem; margin-bottom: .9rem; counter-reset: mstep; }
.m-steps li { font-size: .82rem; color: var(--muted); padding-left: 1.6rem; position: relative; }
.m-steps li::before { counter-increment: mstep; content: counter(mstep); position: absolute; left: 0; top: 0; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--page); color: var(--demo-brand); font-family: var(--font-mono); font-size: .66rem; display: flex; align-items: center; justify-content: center; }
.m-steps b { display: block; color: var(--ink); font-weight: 600; margin-bottom: .1rem; }

/* ---------- FAQ ---------- */
.faq { margin-top: 2.5rem; max-width: 42rem; }
.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem 0; text-align: left; }
.faq-q span { font-size: 1rem; font-weight: 600; }
.faq-q i { width: 1.2rem; height: 1.2rem; flex: none; position: relative; }
.faq-q i::before, .faq-q i::after { content: ''; position: absolute; inset: 0; margin: auto; width: 11px; height: 1.4px; background: var(--ink); border-radius: 1px; transition: transform var(--duration) var(--ease); }
.faq-q i::after { transform: rotate(90deg); }
.faq-item.is-open .faq-q i::after { transform: rotate(0deg); }
.faq-a { height: 0; overflow: hidden; transition: height var(--duration) var(--ease); }
.faq-a p { padding: 0 0 1.2rem; color: var(--muted); line-height: 1.6; }

/* ---------- Kontakt / Buchungs-CTA (dunkles Bookend) ---------- */
#kontakt-cta { background: var(--espresso); color: #fff; position: relative; overflow: hidden; }
#kontakt-cta::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(55% 60% at 15% 10%, rgba(213, 140, 61, .14), transparent 65%);
}
.assure { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2.5rem; }
.assure li { font-family: var(--font-mono); font-size: .76rem; letter-spacing: .04em; text-transform: uppercase; padding: .5rem 1rem; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .82); border: 1px solid rgba(255, 255, 255, .14); }
.kontakt-grid { position: relative; display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 980px) { .kontakt-grid { grid-template-columns: .85fr 1.15fr; } }
.foot-title { color: #fff; }
.foot-title .accent { color: var(--accent); }
.kontakt-sub { color: rgba(255, 255, 255, .64); margin-top: 1rem; max-width: 26rem; }
.contact { background: rgba(241, 241, 239, .05); color: var(--ink); border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2.25rem); box-shadow: var(--shadow-form); display: flex; flex-direction: column; gap: 1.1rem; }
.hp { position: absolute; left: -9999px; }
.f-row { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .f-row { grid-template-columns: 1fr 1fr; } }
.contact label { display: flex; flex-direction: column; gap: .4rem; font-size: .82rem; color: var(--muted); }
.contact input, .contact select, .contact textarea {
  font: inherit; font-size: .95rem; color: var(--ink); background: var(--page);
  border: 1px solid var(--line); border-radius: var(--radius-xs); padding: .75rem .9rem;
}
.contact textarea { min-height: 6rem; resize: vertical; }
.f-check { flex-direction: row; align-items: flex-start; gap: .6rem; font-size: .8rem; }
.f-check input { margin-top: .2rem; width: auto; }
.f-check a { color: var(--ink); text-decoration: underline; }
.f-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: .4rem; }
.f-submit button { padding: .9rem 1.7rem; border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: .95rem; box-shadow: 0 12px 28px -12px rgba(213, 140, 61, .6); }
.f-mail { font-family: var(--font-mono); font-size: .82rem; color: var(--muted); text-decoration: underline; }

/* ---------- Fuß ---------- */
.foot { background: var(--deep); color: rgba(255, 255, 255, .72); padding: clamp(3rem, 7vw, 5rem) 0 clamp(1.75rem, 4vw, 2.5rem); }
.foot-rule { height: 1px; background: var(--deep-line); margin: clamp(2.5rem, 5vw, 4rem) 0 2rem; }
.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2.5rem; }
.foot-brand .logo { color: #fff; }
.foot-brand .tag { color: rgba(255, 255, 255, .5); margin-top: .75rem; max-width: 20rem; }
.foot-cols { display: flex; gap: clamp(2rem, 5vw, 4rem); flex-wrap: wrap; }
.foot-cols h3 { color: rgba(255, 255, 255, .42); margin-bottom: .75rem; }
.foot-cols a { display: block; font-size: .9rem; padding: .25rem 0; color: rgba(255, 255, 255, .8); }
.foot-small { margin-top: 1.5rem; font-size: .76rem; color: rgba(255, 255, 255, .42); }

/* ---------- Fokus ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* ---------- Einfache Rechtsseiten (Impressum, Datenschutz, Danke) ---------- */
body.plain { background-color: var(--bone); --ink: #171715; --muted: rgba(23, 23, 21, .66); --line: rgba(23, 23, 21, .14); color: var(--ink); }
.pill {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem var(--gutter);
  background: rgba(241, 241, 239, .92); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(23, 23, 21, .14);
}
.pill-cta.plain-back { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .9rem; background: none; color: var(--ink); padding: 0; }
.pill-cta.plain-back i { width: .5rem; height: .5rem; border-right: 1.4px solid var(--ink); border-top: 1.4px solid var(--ink); transform: rotate(45deg); }
.doc { max-width: 42rem; margin: 0 auto; padding: clamp(2.5rem, 6vw, 4.5rem) var(--gutter) clamp(4rem, 8vw, 6rem); }
.doc h1 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); font-weight: 700; letter-spacing: -.02em; margin-bottom: 1.5rem; }
.doc h2 { font-size: 1.15rem; font-weight: 700; margin: 2rem 0 .6rem; }
.doc p { color: var(--muted); line-height: 1.7; margin: 0 0 .9rem; }
.doc a { color: var(--ink); text-decoration: underline; }
.btn { display: inline-flex; margin-top: .5rem; padding: .75rem 1.3rem; border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: .9rem; }
.plain-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding: 1.5rem var(--gutter); border-top: 1px solid var(--line); font-size: .82rem; color: var(--muted); }
.plain-foot nav { display: flex; gap: 1rem; }
.plain-foot a { color: var(--muted); }

/* ---------- Scroll-Bühne (Hero-Reise) ---------- */
.frame { position: sticky; top: 0; height: 100svh; overflow: hidden; color: #fff; }
/* Ruhige Vignette über der Szene: Ränder und linke Spalte bleiben dunkel, damit Text lesbar bleibt */
.frame::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 75% 85% at 62% 46%, transparent 38%, rgba(7, 7, 7, .72) 100%), linear-gradient(90deg, rgba(7, 7, 7, .72) 0%, rgba(7, 7, 7, .25) 38%, transparent 62%), linear-gradient(0deg, rgba(7, 7, 7, .6) 0%, transparent 28%); }
.screen { position: absolute; inset: 0; opacity: 0; z-index: 1; pointer-events: none; will-change: opacity, transform; }
.screen[data-screen="opening"] { opacity: 1; }
.screen > * { pointer-events: var(--screen-hit, none); }
.hero-grid .hero-copy { pointer-events: var(--screen-hit, auto); }

/* Ohne JS: normale Höhe, alle Screens untereinander lesbar */
html:not(.js) #hero { height: auto; }
html:not(.js) .frame { position: relative; height: auto; overflow: visible; }
html:not(.js) .screen { position: relative; inset: auto; opacity: 1; padding: 3rem var(--gutter); }
html:not(.js) #scene, html:not(.js) .mig-stack, html:not(.js) .cc-deck { display: none; }
html:not(.js) .mig-col, html:not(.js) .mig-col span { opacity: 1; position: static; }
html:not(.js) .con-h, html:not(.js) .con-side, html:not(.js) .con-foot, html:not(.js) .int-caption, html:not(.js) .panel, html:not(.js) .wheel-line, html:not(.js) .mig, html:not(.js) .mig-col { position: static; transform: none; }

/* Glas-Panel */
.panel {
  position: absolute; right: var(--gutter); bottom: 2.5rem; width: min(26rem, calc(100% - 2 * var(--gutter)));
  padding: 1.1rem 1.4rem 1.2rem 1.6rem; border-radius: .5rem; overflow: hidden;
  background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); backdrop-filter: blur(4px);
}
.panel-edge { position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--accent); transform-origin: top; transform: scaleY(var(--edge, 1)); }
.panel-title { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .92); }
.panel-tag { position: absolute; top: 1.1rem; right: 1.4rem; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.panel-rule { display: block; height: 1px; background: rgba(255, 255, 255, .16); margin: .9rem 0 1rem; transform-origin: left; transform: scaleX(var(--rule, 1)); }
.panel-track { position: relative; padding-top: .35rem; }
.track-base, .track-run { position: absolute; left: 0; top: 6px; height: 1px; transform-origin: left; }
.track-base { right: 0; background: rgba(255, 255, 255, .22); transform: scaleX(var(--track, 1)); }
.track-run { width: 66%; background: rgba(213, 140, 61, .85); transform: scaleX(var(--run, 1)); }
.panel-steps { position: relative; display: flex; justify-content: space-between; list-style: none; margin: 0; padding: 0; }
.panel-steps li { display: flex; flex-direction: column; gap: .7rem; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .7); opacity: var(--on, 1); transform: scale(calc(.3 + var(--on, 1) * .7)); transform-origin: left top; }
.panel-steps li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.panel-steps li:last-child::before { background: rgba(255, 255, 255, .35); }
.panel-foot { margin-top: 1rem; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em; color: rgba(255, 255, 255, .6); }

/* Migration: ein Satz, zwei Orte */
.mig { position: absolute; inset: 0; font-family: var(--font-sans); font-weight: 600; }
.mig-col { position: absolute; top: calc(var(--header-h) + 3rem); left: var(--gutter); width: min(20rem, 70vw); font-size: clamp(1.1rem, 1.7vw, 1.5rem); line-height: 1.15; letter-spacing: -.02em; color: #fff; -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.82), rgba(0,0,0,.6)); mask-image: linear-gradient(to bottom, rgba(0,0,0,.82), rgba(0,0,0,.6)); }
.mig-col span { opacity: 0; }
.mig-stack { position: absolute; right: var(--gutter); bottom: 2.5rem; width: min(36rem, 90vw); text-align: right; font-size: clamp(1.9rem, 3.8vw, 3rem); line-height: 1; letter-spacing: -.03em; color: #fff; -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.6), #000); mask-image: linear-gradient(to bottom, rgba(0,0,0,.6), #000); }
.mig-stack span { display: block; transform-origin: top right; }

/* Kundenreise (Problem-Screen): Such-Oberfläche links unter der Spalte, matt, wie ein Handy-Ausschnitt */
.jr { position: absolute; left: var(--gutter); top: 36%; width: min(23rem, 86vw); padding: 1.1rem; border-radius: 1.25rem; background: rgba(241,241,239,.07); border: 1px solid rgba(241,241,239,.16); display: grid; gap: .8rem; }
.jr-tag { font: 500 .66rem var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(241,241,239,.55); }
.jr-search { display: flex; align-items: center; min-height: 2.8rem; padding: 0 1rem; border-radius: 999px; background: var(--bone); color: var(--espresso); font-weight: 600; letter-spacing: -.01em; }
.jr-caret { width: 2px; height: 1.1em; margin-left: 2px; background: currentColor; opacity: 0; }
.jr.is-typing .jr-caret { opacity: 1; }
.jr-list { display: grid; gap: .5rem; }
.jr-hit { display: grid; gap: .1rem; padding: .7rem .9rem; border-radius: .8rem; background: rgba(241,241,239,.06); opacity: 0; transition: background .3s, box-shadow .3s; }
.jr-hit b { font-weight: 600; font-size: .95rem; } .jr-hit small { font-size: .78rem; color: rgba(241,241,239,.6); }
.jr-hit.is-picked { background: rgba(213,140,61,.22); box-shadow: inset 0 0 0 1px var(--amber); }
.jr-call { display: grid; gap: .1rem; padding: .8rem 1rem; border-radius: .9rem; background: var(--amber); color: var(--espresso); opacity: 0; }
.jr-call span { font: 500 .66rem var(--font-mono); letter-spacing: .14em; text-transform: uppercase; } .jr-call b { font-size: 1.05rem; font-weight: 700; }
html:not(.js) .jr, html:not(.js) .ba { display: none; }

/* Vorher/Nachher (Lösung-Screen): die klare Seite wird von links über die alte gezogen */
.ba { position: absolute; left: var(--gutter); top: 26%; width: min(31rem, 86vw); padding: 1.1rem; border-radius: 1.25rem; background: rgba(241,241,239,.07); border: 1px solid rgba(241,241,239,.16); display: grid; gap: .8rem; --wipe: 0; }
.ba-tag { font: 500 .66rem var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(241,241,239,.55); }
.ba-view { position: relative; height: 21rem; border-radius: .9rem; overflow: hidden; }
.ba-old, .ba-new { position: absolute; inset: 0; padding: 1.2rem; display: grid; align-content: start; gap: .5rem; }
.ba-old { background: #c9c4a8; color: #3b3a2a; font: 400 .95rem/1.25 serif; filter: grayscale(calc(var(--wipe) * .8)) brightness(calc(1 - var(--wipe) * .25)); } .ba-old s { color: #7a1e1e; font: 600 .7rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; margin-top: 1.4rem; }
.ba-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: auto; padding-bottom: 1rem; } .ba-nav strong { font-size: .9rem; font-weight: 700; } .ba-nav span { padding: .3rem .8rem; border-radius: 999px; background: var(--espresso); color: var(--bone); font-size: .72rem; font-weight: 600; }
.ba-chip { position: absolute; bottom: .8rem; right: .8rem; z-index: 3; padding: .3rem .75rem; border-radius: 999px; font: 600 .7rem var(--font-mono); letter-spacing: .14em; text-transform: uppercase; font-style: normal; }
.ba-chip-old { background: #7a1e1e; color: #f6e9e9; opacity: calc(1 - var(--wipe) * 2.5 + .5); }
.ba-chip-new { background: var(--amber); color: var(--espresso); opacity: calc(var(--wipe) * 2.5 - 1.2); } .ba-old i { font-style: normal; font-weight: 700; color: #7a1e1e; } .ba-old u { color: #1a3fa0; } .ba-old em { font-style: normal; background: #ffe600; width: max-content; padding: 0 .3rem; }
.ba-new { background: var(--bone); color: var(--espresso); align-content: end; clip-path: inset(0 calc((1 - var(--wipe)) * 100%) 0 0); }
.ba-new { grid-template-rows: auto auto auto auto; align-content: stretch; } .ba-new b { font-size: 2.6rem; line-height: .92; letter-spacing: -.04em; font-weight: 800; } .ba-new small { font-size: .95rem; opacity: .75; } .ba-new .ba-cta { width: max-content; margin-top: .6rem; padding: .7rem 1.4rem; border-radius: 999px; background: var(--amber); font-weight: 700; font-size: 1rem; }
.ba-bar { position: absolute; top: 0; bottom: 0; left: calc(var(--wipe) * 100%); width: 2px; background: var(--amber); opacity: calc(1 - var(--wipe) * var(--wipe) * var(--wipe)); }
@media (max-width: 760px) { .jr, .ba { top: auto; bottom: 1rem; width: calc(100% - 2 * var(--gutter)); } .jr .jr-list li:nth-child(3), .ba-view { } .ba-view { height: 14rem; } .ba-new b { font-size: 1.8rem; } .ba-old { font-size: .8rem; } }

/* Branchen-Rad */
.wheel { position: absolute; inset: 0; overflow: hidden; }
.wheel-col { position: absolute; top: 0; }
.wheel-col[data-side="left"] { right: 50%; text-align: right; }
.wheel-col[data-side="right"] { left: 50%; }
.wheel-col p { position: absolute; top: 0; margin: 0; white-space: nowrap; font-size: clamp(1.25rem, 2.6vw, 2.4rem); line-height: 1.1; font-weight: 600; letter-spacing: -.02em; color: #fff; will-change: transform, opacity, filter; }
.wheel-col[data-side="left"] p { right: 0; }
.wheel-line { position: absolute; left: var(--gutter); top: calc(var(--header-h) + 3rem); width: min(20rem, 70vw); text-align: left; color: #fff; font-size: clamp(1.1rem, 1.7vw, 1.5rem); line-height: 1.15; letter-spacing: -.02em; font-weight: 600; }

/* Branchen-Karten (Cards Cascade): schräger Stapel in CSS-3D links der Smartphone-Bühne */
.cc-deck { position: absolute; left: 34%; top: 52%; width: min(21rem, 62vw); aspect-ratio: 1 / 1.16; margin: calc(min(21rem, 62vw) * -.58) 0 0 calc(min(21rem, 62vw) * -.5); perspective: 1500px; perspective-origin: 50% 40%; transform-style: preserve-3d; }
.cc-card { position: absolute; inset: 0; border-radius: 1.4rem; overflow: hidden; display: grid; align-content: end; padding: 1.1rem; background: var(--bone) var(--img, none) center top / cover no-repeat; color: var(--espresso); box-shadow: 0 30px 60px -28px rgba(0,0,0,.7); backface-visibility: hidden; will-change: transform, opacity; transform-origin: 50% 100%; opacity: 0; }
.cc-card span { justify-self: start; padding: .35rem .8rem; border-radius: 999px; background: var(--bone); font: 500 .72rem var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.cc-type { background: var(--espresso); color: var(--bone); border: 1px solid rgba(241,241,239,.2); align-content: space-between; }
.cc-type b { font-size: clamp(2rem, 3.4vw, 2.8rem); line-height: .95; letter-spacing: -.04em; font-weight: 700; }
.cc-type span { background: transparent; padding: 0; color: rgba(241,241,239,.65); }
.cc-you { background: var(--amber); color: var(--espresso); border-color: transparent; } .cc-you span { color: rgba(7,7,7,.7); }
@media (max-width: 760px) { .cc-deck { left: 50%; top: 56%; } }

/* Integration */
.int-caption { position: absolute; left: var(--gutter); right: var(--gutter); top: 50%; transform: translateY(-50%); max-width: 46rem; margin: 0 auto; text-align: center; font-size: clamp(1.9rem, 4.4vw, 3.8rem); line-height: 1.05; font-weight: 700; letter-spacing: -.03em; }
.int-caption .l { display: inline-block; white-space: pre; will-change: filter, transform; }

/* Connect */
.con-h { position: absolute; top: calc(var(--header-h) + 2rem); left: var(--gutter); font-size: clamp(2.6rem, 7vw, 5.5rem); line-height: .92; letter-spacing: -.04em; font-weight: 700; color: #fff; max-width: 32rem; }
.con-h .accent { color: var(--accent); }
.con-side { position: absolute; top: calc(var(--header-h) + 2.5rem); right: var(--gutter); width: min(22rem, 90vw); display: flex; flex-direction: column; align-items: flex-end; gap: 2.5rem; }
.con-aside { text-align: right; font-size: 1.05rem; line-height: 1.3; font-weight: 500; color: rgba(255, 255, 255, .88); }
.con-foot { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 1.75rem; display: flex; flex-wrap: wrap; gap: 1.25rem 2.25rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .12); font-family: var(--font-mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; }

/* Zwei Hovers der Seite: Gold läuft durch die Buchstaben (.ink-fill) bzw. über die Fläche (.plate) */
.ink-fill {
  --ink-from: rgba(255, 255, 255, .62);
  background-image: linear-gradient(90deg, var(--accent) 50%, var(--ink-from) 50%);
  background-size: 200% 100%; background-position: 100% 0; background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  transition: background-position var(--duration) var(--ease);
}
.ink-fill:hover, .ink-fill:focus-visible { background-position: 0 0; }
.cta { background: none; box-shadow: none; padding: 0; gap: 2px; align-items: stretch; }
.cta .plate {
  display: inline-flex; align-items: center; padding: 0 1.5rem; height: 3rem; border-radius: .25rem;
  background-image: linear-gradient(90deg, var(--accent) 50%, #fff 50%); background-size: 200% 100%; background-position: 100% 0;
  color: var(--on-accent); font-family: var(--font-mono); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 500;
  transition: background-position var(--duration) var(--ease);
}
.cta:hover .plate, .cta:focus-visible .plate { background-position: 0 0; }
.cta .cta-tile { width: 3rem; height: 3rem; border-radius: .25rem; background: none; }
.cta-tile svg { width: 100%; height: 100%; }
.tile-bg { fill: var(--accent); }
.tile-d1 { fill: var(--on-accent); opacity: calc(.32 + var(--d1, 0) * .68); }
.tile-d2 { fill: var(--on-accent); opacity: calc(.32 + var(--d2, 0) * .68); }
.tile-arrow { fill: none; stroke: var(--on-accent); opacity: var(--arrow-o, 1); transform: translateX(calc(var(--sent, 0) * 10px + var(--poised, 0) * 3px)); }

@media (max-width: 760px) {
  .wheel-col p { font-size: 1rem; }
  .panel { display: none; }
  .con-side { top: auto; bottom: 6rem; right: auto; left: var(--gutter); align-items: flex-start; }
  .con-aside { text-align: left; }
  .mig-col { width: 80vw; }
}
@media (max-height: 720px) {
  .hero-chips { display: none; }
  .hero-cta { margin-top: 1.5rem; }
  .hero-support { margin-top: .75rem; font-size: 1rem; }
}
@media (max-height: 560px) {
  .panel, .hero-support, .con-aside { display: none; }
  .con-side { top: auto; bottom: 4.25rem; left: var(--gutter); right: auto; align-items: flex-start; }
  .con-h { font-size: 2.2rem; top: calc(var(--header-h) + .5rem); }
  .con-foot { bottom: .75rem; padding-top: .6rem; }
}

@media (max-width: 760px) { #hero { height: 1800svh; } }
@media (prefers-reduced-motion: reduce) {
  #hero { height: 300svh; }
  * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}

/* Referenzen-Rad: Karten auf einem großen Kreis, Mittelpunkt weit unterhalb */
.rw { position: relative; height: clamp(22rem, 62vh, 32rem); margin-top: 2rem; overflow: hidden; border-radius: 1.4rem; background: var(--espresso); cursor: grab; touch-action: pan-y; user-select: none; }
.rw.is-drag { cursor: grabbing; }
.rw-wheel { position: absolute; left: 50%; top: var(--cy, 140%); width: 0; height: 0; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)); will-change: transform; }
.rw-card { position: absolute; left: 0; top: 0; width: var(--cw, 210px); height: var(--ch, 340px); margin: calc(var(--ch, 340px) / -2) 0 0 calc(var(--cw, 210px) / -2); border-radius: 1rem; overflow: hidden; background: #0a0a0a; box-shadow: 0 22px 46px -16px rgba(0,0,0,.6); transform: rotate(var(--a)) translateY(calc(var(--r, 620px) * -1)); }
.rw-card img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; pointer-events: none; }
.rw-card span { position: absolute; left: .7rem; bottom: .7rem; padding: .3rem .7rem; border-radius: 999px; background: var(--bone); color: var(--espresso); font: 500 .68rem var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.rw-hint { position: absolute; left: 0; right: 0; bottom: 1rem; text-align: center; font: 500 .72rem var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(241,241,239,.55); pointer-events: none; }
.ref-grid .ref-thumbs { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
html:not(.js) .rw-wheel { display: none; }
@media (max-width: 760px) { .mig-stack { display: none; } }
@media (max-width: 760px) { .int-caption { top: 34%; } }

/* Branchen-Screen: links die Such-Anzeige zum gezeigten Gerät, Karten in der Mitte, Gerät rechts */
.cc-deck { left: 52%; }
.jr2 { position: absolute; left: var(--gutter); top: 36%; width: min(23rem, 86vw); padding: 1.1rem; border-radius: 1.25rem; background: rgba(241,241,239,.07); border: 1px solid rgba(241,241,239,.16); display: grid; gap: .8rem; opacity: 0; }
.jr2-hit { display: grid; gap: .1rem; padding: .7rem .9rem; border-radius: .8rem; background: rgba(241,241,239,.06); }
.jr2-hit b { font-weight: 600; font-size: .95rem; } .jr2-hit small { font-size: .78rem; color: rgba(241,241,239,.6); }
.jr2-hit.is-picked { background: rgba(213,140,61,.22); box-shadow: inset 0 0 0 1px var(--amber); }
.jr2-call { opacity: 1; }
.jr2-open { justify-self: start; padding: .55rem 1rem; border-radius: 999px; background: var(--bone); color: var(--espresso); font-weight: 600; font-size: .88rem; pointer-events: none; }
.jr2.is-live, .jr2.is-live .jr2-open { pointer-events: auto; }
.jr2.is-live .jr2-open:hover { background: var(--amber); }
html:not(.js) .jr2 { display: none; }
@media (max-width: 760px) { .jr2 { display: none; } .cc-deck { left: 50%; } }

/* große Wanderschrift im Problem-/Lösung-Screen: unten mittig, damit sie weder Karte noch Gerät berührt */
@media (min-width: 761px) { .mig-stack { right: auto; left: 50%; transform: translateX(-50%); text-align: center; width: min(34rem, 44vw); } .mig-stack span { transform-origin: top center; } }