/* Gemeinsame Basis aller Varianten (vorschau/varianten/). Schriften und Bilder kommen aus zum-hochladen/, nichts kopiert. */
@font-face { font-family: "Pangram Sans"; src: url("../../fonts/PPPangramSans-Light.woff2") format("woff2"); font-weight: 300; font-display: block; }
@font-face { font-family: "Pangram Sans"; src: url("../../fonts/PPPangramSans-Regular.woff2") format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "Pangram Sans"; src: url("../../fonts/PPPangramSans-Medium.woff2") format("woff2"); font-weight: 500; font-display: block; }
@font-face { font-family: "Pangram Sans"; src: url("../../fonts/PPPangramSans-Semibold.woff2") format("woff2"); font-weight: 600; font-display: block; }
@font-face { font-family: "Pangram Sans"; src: url("../../fonts/PPPangramSans-Bold.woff2") format("woff2"); font-weight: 700; font-display: block; }
@font-face { font-family: "Inter"; src: url("../../fonts/InterVariable.woff2") format("woff2"), url("../../fonts/InterVariable.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }

:root {
  --ink: #0b0b0b;
  --ink-2: #5c5c5c;
  --ink-3: #8a8a8a;
  --paper: #ffffff;
  --mist: #f4f4f4;      /* neutrales Hellgrau, ohne Grünstich */
  --mist-2: #ebebeb;
  /* Elektrisches Blau, abgenommen aus Victorias eigenen Playground-Arbeiten (reel-08/-24/-32: #0536FE) */
  --blue: #0a3cff;
  --font-display: "Pangram Sans", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --gutter: clamp(16px, 3vw, 40px);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.display { font-family: var(--font-display); font-feature-settings: "ss02" 1; }
[hidden] { display: none !important; }

/* ---------- Navigation (Grundform: schwarze Pille, Varianten überschreiben Lage und Form) ---------- */
.nav { position: fixed; z-index: 60; top: 16px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; height: 52px; padding: 0 8px 0 20px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 500; letter-spacing: -.005em; white-space: nowrap; box-shadow: 0 10px 30px -14px rgba(0,0,0,.5); transition: height .5s var(--ease-out), padding .5s var(--ease-out), gap .5s var(--ease-out); }
.nav-name { display: inline-flex; align-items: center; font-weight: 600; margin-right: 10px; }
.nav-ava { display: none; }
.nav-status { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,.62); overflow: hidden; max-width: 340px; margin-right: 14px; transition: max-width .6s var(--ease-out), opacity .35s var(--ease-soft), margin .6s var(--ease-out); }
.dot { position: relative; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 0 rgba(10,60,255,.6); animation: dot-pulse 2.4s var(--ease-soft) infinite; }
.nav .dot { background: #03ff68; }
@keyframes dot-pulse { 0% { box-shadow: 0 0 0 0 rgba(3,255,104,.5); } 70%, 100% { box-shadow: 0 0 0 7px rgba(3,255,104,0); } }
.role { position: relative; display: inline-block; height: 1.5em; overflow: hidden; vertical-align: bottom; color: #fff; transition: width .5s var(--ease-out); }
.role > span { display: block; transition: transform .6s var(--ease-out), opacity .4s var(--ease-soft); }
.role > span:not(.is-on) { position: absolute; left: 0; top: 0; opacity: 0; transform: translateY(100%); }
.role > span.is-off { transform: translateY(-100%); }
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links > a { position: relative; padding: 8px 13px; border-radius: 999px; color: rgba(255,255,255,.5); transition: color .25s, background-color .25s; }
.nav-links > a:hover { color: #fff; background: rgba(255,255,255,.1); }
.nav-links > a[aria-current] { color: #fff; }
.nav-links > .nav-cv { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; height: 36px; padding: 0 16px; border-radius: 999px; background: #fff; color: var(--ink); font-weight: 600; transition: transform .35s var(--ease-out), background-color .25s; }
.nav-cv svg { transition: transform .35s var(--ease-out); }
.nav-links > .nav-cv:hover { color: var(--ink); background: #e9edff; }
.nav-cv:hover svg { transform: translateY(2px); }
.lang { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; padding: 0 10px 0 6px; color: rgba(255,255,255,.4); font-size: 13px; }
.lang button { padding: 6px 3px; color: rgba(255,255,255,.45); font-weight: 600; transition: color .25s; }
.lang button[aria-pressed="true"] { color: #fff; }
.lang button:hover { color: #fff; }
.nav-menu { display: none; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.12); place-items: center; }
.nav-menu i { display: block; width: 14px; height: 1.5px; background: #fff; box-shadow: 0 -4px 0 #fff, 0 4px 0 #fff; transition: box-shadow .3s, transform .3s; }
.nav[data-open] .nav-menu i { box-shadow: none; transform: rotate(45deg); }
.nav[data-open] .nav-menu i::after { content: ""; display: block; width: 14px; height: 1.5px; background: #fff; transform: rotate(-90deg); }

/* kompakt beim Scrollen: Verfügbarkeit klappt weg */
.nav.is-compact { height: 46px; gap: 2px; padding-right: 6px; }
.nav.is-compact .nav-cv { height: 34px; }
.nav.is-compact .nav-status { max-width: 18px; margin-right: 6px; }
.nav.is-compact .nav-status > .av { opacity: 0; }

@media (max-width: 900px) {
  .nav { left: 12px; right: 12px; transform: none; justify-content: space-between; padding-left: 18px; }
  .nav-links { display: none; }
  .nav-menu { display: grid; }
  .nav-status { margin-right: auto; }
  .nav[data-open] { height: auto; flex-wrap: wrap; border-radius: 26px; padding: 6px 6px 14px 18px; }
  .nav[data-open] .nav-links { display: flex; flex-direction: column; align-items: stretch; width: 100%; order: 5; padding: 10px 6px 0 0; gap: 0; }
  .nav[data-open] .nav-links > a { padding: 14px 4px; font-size: 22px; font-family: var(--font-display); font-feature-settings: "ss02" 1; border-top: 1px solid rgba(255,255,255,.12); border-radius: 0; }
  .nav[data-open] .nav-links > a:hover { background: none; }
  .nav[data-open] .nav-cv { justify-content: center; margin: 12px 0 0; padding: 14px; font-family: var(--font-sans) !important; font-size: 16px !important; border-radius: 999px !important; border: 0 !important; }
  .nav[data-open] .lang { margin: 14px 0 0; justify-content: center; font-size: 15px; }
  .nav[data-open] .nav-links > a[aria-current]::after { display: none; }
}
@media (max-width: 520px) { .nav-status .av-pre { display: none; } }

/* ---------- Blaue Icon-Familie: feine Linien, Strichstärke wächst mit der Schrift ---------- */
.ico { display: inline-block; vertical-align: -0.04em; height: .74em; width: auto; overflow: visible; color: var(--blue); fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.ico * { vector-effect: non-scaling-stroke; stroke-width: max(1.4px, .034em); }
.ico .hand, .ico .knob, .ico-order circle, .ico-shapes > * { transform-box: fill-box; transform-origin: center; }
/* Hand: winkt beim Einstieg, danach alle paar Sekunden, und bei Hover */
.ico-hand .hand { transform-origin: 40% 95%; }
.ico-hand .waves { opacity: 0; transition: opacity .3s; }
.is-play .ico-hand .hand { animation: wave 7s var(--ease-soft) .6s infinite; }
.is-play .ico-hand .waves { animation: waves 7s var(--ease-soft) .6s infinite; }
.ico-hand:hover .hand { animation: wave 1.6s var(--ease-soft) infinite; }
@keyframes wave { 0%, 26%, 100% { transform: rotate(0); } 4% { transform: rotate(14deg); } 9% { transform: rotate(-7deg); } 14% { transform: rotate(12deg); } 19% { transform: rotate(-3deg); } }
@keyframes waves { 0%, 24%, 100% { opacity: 0; } 4%, 20% { opacity: 1; } }
/* Schalter: geht an, ab und zu wieder aus und an */
.ico-toggle .knob { fill: transparent; transition: transform .6s var(--ease-out), fill .4s var(--ease-soft); }
.is-play .ico-toggle:not(.is-idle-off) .knob { transform: translateX(40px); fill: currentColor; }
/* Komplex → klar: verstreute Kreise ordnen sich */
.ico-order circle { transition: transform 1s var(--ease-out); }
.ico-order:not(.is-sorted) circle:nth-child(1) { transform: translate(14px, 22px); }
.ico-order:not(.is-sorted) circle:nth-child(2) { transform: translate(-18px, 30px); }
.ico-order:not(.is-sorted) circle:nth-child(3) { transform: translate(6px, -14px); }
.ico-order:not(.is-sorted) circle:nth-child(4) { transform: translate(22px, -20px); }
.ico-order:not(.is-sorted) circle:nth-child(5) { transform: translate(-10px, 8px); }
.ico-order:not(.is-sorted) circle:nth-child(6) { transform: translate(-26px, -26px); }
.ico-order circle:nth-child(2) { transition-delay: .06s; } .ico-order circle:nth-child(3) { transition-delay: .12s; }
.ico-order circle:nth-child(4) { transition-delay: .18s; } .ico-order circle:nth-child(5) { transition-delay: .24s; } .ico-order circle:nth-child(6) { transition-delay: .3s; }
/* Visuelle Sprache: Kreis, Quadrat, Dreieck — jede Form dreht oder wandelt sich an ihrem Platz, nichts berührt sich */
.ico-shapes > * { transition: transform .8s var(--ease-out), rx .8s var(--ease-out); }
.is-play .ico-shapes .s1 { animation: morph1 6s var(--ease-soft) 1.4s infinite; }
.is-play .ico-shapes .s2 { animation: turn 6s var(--ease-out) 3.4s infinite; }
.is-play .ico-shapes .s3 { animation: turn3 6s var(--ease-out) 5.4s infinite; transform-origin: 50% 66%; }
@keyframes turn3 { 0%, 20% { transform: rotate(0); } 40%, 100% { transform: rotate(120deg); } }
@keyframes morph1 { 0%, 35% { rx: 14px; } 45%, 80% { rx: 3px; } 90%, 100% { rx: 14px; } }
@keyframes turn { 0%, 20% { transform: rotate(0); } 40%, 100% { transform: rotate(90deg); } }
.ico-shapes:hover > * { animation-play-state: paused; }
.ico-shapes:hover .s1 { transform: scale(.82); }
.ico-shapes:hover .s2 { transform: rotate(45deg) scale(.78); }
.ico-shapes:hover .s3 { transform: rotate(120deg) scale(.85); transform-origin: 50% 66%; }

/* ---------- Scroll-Aufbau ---------- */
/* an die Scrollposition gekoppelt (wie softScroll in Entwurf 1): steigt beim Hineinscrollen von unten auf, nebeneinander leicht versetzt.
   »translate« statt »transform«, damit das Anheben der Karten beim Hover erhalten bleibt */
html.motion [data-r] { opacity: var(--rv, 0); translate: 0 calc((1 - var(--rv, 0)) * 32px); } /* 27.10. Apple-Weg: 32 px (vorher 48) */ /* 25.10. abends: kürzerer Weg (vorher 90 px), sanfter */
/* Wörter der Hero-Zeile steigen gestaffelt auf */
.w { display: inline-block; white-space: pre; }
html.motion [data-split] .w { opacity: 0; transform: translateY(.45em); filter: blur(8px); transition: opacity .8s var(--ease-soft), transform 1s var(--ease-out), filter .8s var(--ease-soft); transition-delay: calc(var(--wi) * 45ms + 150ms); }
html.motion [data-split].is-play .w { opacity: 1; transform: none; filter: blur(0); }

/* ---------- Gemeinsame kleine Bausteine ---------- */
.phone { position: relative; flex: none; aspect-ratio: 804 / 1748; padding: 2.6%; border-radius: 13% / 6%; background: var(--ink); box-shadow: 0 30px 60px -30px rgba(0,0,0,.45); }
.phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 11% / 5%; background: #fff; }
.reel-pause { position: absolute; z-index: 3; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; background: rgba(255,255,255,.9); color: var(--ink); font-size: 12px; font-weight: 600; backdrop-filter: blur(8px); }
.arrow-ico { display: inline-block; transition: transform .45s var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}

/* ---------- Cursor-Punkt wie in Entwurf 1 (grün, wächst über Dabei! zum schwarzen Kreis) ---------- */
.cursor-dot { position: fixed; left: 0; top: 0; z-index: 1000; width: 14px; height: 14px; margin: -7px 0 0 -7px; pointer-events: none; opacity: 0; transition: opacity .15s ease; will-change: transform; overflow: visible; }
html.has-cursor-dot, html.has-cursor-dot * { cursor: none; }
html.has-cursor-dot :is(a, button, [role="button"], summary, label[for], select), html.has-cursor-dot :is(a, button, [role="button"], summary, label[for]) * { cursor: pointer; }
html.is-over-link .cursor-dot { opacity: 0 !important; }
.cursor-dot-in { position: absolute; left: 50%; top: 50%; width: 116px; height: 116px; margin: -58px 0 0 -58px; border-radius: 50%; background: #03ff68; display: grid; place-items: center; transform: scale(.1207); transition: transform .28s cubic-bezier(.4,0,.2,1), background-color .2s ease; }
.cursor-dot-label { color: #fff; font-size: 13px; font-weight: 500; line-height: 1.25; text-align: center; padding: 0 16px; opacity: 0; transition: opacity .1s ease; }
.cursor-dot-arrow { display: block; margin: 6px auto 0; }
html.is-over-case .cursor-dot-in { transform: scale(1); background: #111; transition: transform .42s cubic-bezier(.2,.8,.2,1), background-color .2s ease; }
html.is-over-case .cursor-dot-label { opacity: 1; transition: opacity .22s ease .18s; }
html.has-cursor-dot.is-over-case [data-cursor-en], html.has-cursor-dot.is-over-case [data-cursor-en] * { cursor: none; }

/* ---------- Nach-oben-Knopf: erscheint, wenn man weiter unten wieder nach oben scrollt ---------- */
.to-top { position: fixed; z-index: 58; right: var(--gutter); bottom: var(--gutter); display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--ink); color: #fff; box-shadow: 0 10px 24px -12px rgba(0,0,0,.45); opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none; transition: opacity .35s var(--ease-soft), transform .5s var(--ease-out); }
.to-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover svg { transform: translateY(-2px); }
.to-top svg { transition: transform .35s var(--ease-out); }

/* 22.10. abends: Punkt in der Navi nicht mehr abgeschnitten und deutlicher pulsierend; Unterlängen der Rollen (»g«) sichtbar */
.nav-status { padding: 10px 0 10px 10px; margin: -10px 14px -10px -10px; }
.nav.is-compact .nav-status { max-width: 28px; margin-right: 6px; }
@keyframes dot-pulse { 0% { box-shadow: 0 0 0 0 rgba(3,255,104,.75); } 70%, 100% { box-shadow: 0 0 0 9px rgba(3,255,104,0); } }
.nav .dot { animation-duration: 1.9s; }
.role { height: 1.7em; line-height: 1.7em; vertical-align: -.5em; }

/* 24.10.: mobiles Menü ohne Trennstriche, CV-Button so breit wie sein Text, CV und Sprache linksbündig */
@media (max-width: 900px) {
  .nav[data-open] .nav-links > a { border-top: 0 !important; padding: 10px 4px; }
  .nav[data-open] .nav-links > .nav-cv { align-self: flex-start; width: auto; height: 40px; padding: 0 18px; margin: 14px 0 0 4px !important; }
  .nav[data-open] .lang { justify-content: flex-start; margin: 16px 0 0 4px; }
}
/* 25.10.: bis das Skript läuft, steht die erste Rolle schon da (sonst ist die Rolle kurz 0 breit und die Leiste springt beim Laden) */
.role:not(:has(.is-on)) > span:first-child { position: static; opacity: 1; transform: none; }