/* Variante C · Auswahl: Aufbau von A mit Victorias Auswahl (Outline-Karten mit Pills, Weiß, Dabei! als laufende Spalten).
   Einstieg: großzügiger, zentrierter Satz, Navigation von Anfang an da. Der Satz schreibt sich ein,
   beim Scrollen blendet er aus und die Dabei!-Kachel kommt ohne große Lücke von unten. */
/* a.css wird im HTML vor dieser Datei geladen */

.intro { position: relative; height: 100svh; min-height: 560px; }
.intro-in { position: sticky; top: 0; height: 100svh; min-height: 520px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 72px var(--gutter) 0; text-align: center;
  opacity: calc(1 - var(--fade, 0)); transform: translateY(calc(var(--fade, 0) * -6vh)); }
.intro .hero-title { margin: 0; max-width: 20ch; font-size: clamp(40px, 6.4vw, 112px); font-weight: 400; line-height: 1.07; letter-spacing: -.04em; text-wrap: balance; }
.intro .hl-1 { max-width: none; font-size: inherit; line-height: inherit; letter-spacing: inherit; }
.intro .hero-title .ico { margin: 0 0 0 .14em; }
.intro .ico-shapes { height: .5em; vertical-align: .006em; }
.intro .ico-lines, .intro .ico-knot { height: .62em; vertical-align: -.054em; } /* gemessen: Mitte genau auf halber x-Höhe */
.intro .hero-id { margin-top: clamp(36px, 6vh, 64px); }
main > .work { position: relative; z-index: 2; }

/* Linien und Knoten zeichnen sich nach den Wörtern ein */
.draw { stroke-dasharray: 1000; stroke-dashoffset: 1000; }
.is-play .draw { stroke-dashoffset: 0; transition: stroke-dashoffset var(--dur, .55s) var(--ease-soft) calc(1s + var(--dl, 0s)); }
html:not(.motion) .draw { stroke-dashoffset: 0; }

/* Dabei! kommt erst, wenn der Einstieg ausgeblendet ist (c.js setzt is-in) */
/* erst blendet der Satz aus, dann ist die Seite kurz weiß, dann steigt Dabei! deutlich von unten auf (c.js setzt --rv) */
html.motion [data-after-intro] { opacity: 0; translate: 0 200px; transition: opacity .35s var(--ease-soft), translate 1s cubic-bezier(.16, 1, .3, 1); }
html.motion [data-after-intro].is-in { opacity: 1; translate: 0 0; }

/* Einstieg: der Text steht, nur die Icons zeichnen sich nacheinander ein */
html.motion .intro [data-split] .w { opacity: 1; transform: none; filter: none; transition: none; }
.intro .ico * { stroke-dasharray: 1000; stroke-dashoffset: 1000; }
.intro .is-play .ico * { stroke-dashoffset: 0; transition: stroke-dashoffset 2.6s cubic-bezier(.4, 0, .2, 1) var(--d, .4s), fill .8s var(--ease-soft) 3.2s, transform 1.2s var(--ease-out) 3.2s; }
.intro .ico:nth-of-type(1) { --d: .4s; } .intro .ico:nth-of-type(2) { --d: 1s; } .intro .ico:nth-of-type(3) { --d: 1.6s; }
.intro .ico:nth-of-type(4) { --d: 2.1s; } .intro .ico:nth-of-type(5) { --d: 2.6s; }
.intro .ico .draw { --d: inherit; }
html:not(.motion) .intro .ico * { stroke-dashoffset: 0; }
/* Hand etwas größer, Schalter kleiner und auf die x-Höhe gesetzt */
.intro .hero-title .ico-hand { height: .84em; vertical-align: -.1em; }
.intro .hero-title .ico-toggle { height: .44em; vertical-align: .04em; }
/* die Bewegungen der Icons (Winken, Schalter, Formen) beginnen erst, wenn sie fertig gezeichnet sind */
.intro .is-play .ico-hand .hand { animation-delay: 2.6s; }
.intro .is-play .ico-hand .waves { animation-delay: 2.6s; }
.intro .is-play .ico-shapes .s1 { animation-delay: 3.4s; } .intro .is-play .ico-shapes .s2 { animation-delay: 5.4s; } .intro .is-play .ico-shapes .s3 { animation-delay: 7.4s; }

/* Icons nach dem Einzeichnen: sanfte Schleifen in regelmäßigem Abstand; Hover startet die Bewegung sofort */
.intro .hero-title .ico-toggle { height: .54em; vertical-align: -.014em; }
.intro .ico-lines path, .intro .ico-knot path { transform-box: fill-box; }
.intro .ico-lines path { transform-origin: 0 50%; }
.intro .ico-knot path { transform-origin: 50% 50%; }
/* Schalter: geht alle gut drei Sekunden an und wieder aus */
.intro .is-play .ico-toggle .knob { animation: knob-switch 7s cubic-bezier(.5, 0, .25, 1) 4.5s infinite; }
@keyframes knob-switch { 0%, 12% { transform: translateX(40px); fill: currentColor; } 22%, 58% { transform: translateX(0); fill: transparent; } 68%, 100% { transform: translateX(40px); fill: currentColor; } }
.intro .ico-toggle:hover .knob { animation: knob-switch 2.6s cubic-bezier(.5, 0, .25, 1) 0s infinite !important; }
/* Hand: winkt alle fünf Sekunden, bei Hover sofort */
.intro .is-play .ico-hand .hand { animation: wave 9s var(--ease-soft) 4s infinite; }
.intro .is-play .ico-hand .waves { animation: waves 9s var(--ease-soft) 4s infinite; }
.intro .ico-hand:hover .hand { animation: wave 2.4s var(--ease-soft) 0s infinite !important; }
.intro .ico-hand:hover .waves { animation: waves 2.4s var(--ease-soft) 0s infinite !important; }
/* vereinfache: die fünf Linien ordnen sich wie Textzeilen (mal flatternd, mal bündig) */
.intro .is-play .ico-lines path { animation: lines-align 9s cubic-bezier(.45, 0, .3, 1) 5s infinite; }
.intro .is-play .ico-lines path:nth-child(2) { --s: .62; } .intro .is-play .ico-lines path:nth-child(3) { --s: .84; }
.intro .is-play .ico-lines path:nth-child(4) { --s: .48; } .intro .is-play .ico-lines path:nth-child(5) { --s: .74; }
@keyframes lines-align { 0%, 30%, 100% { transform: scaleX(1); } 45%, 80% { transform: scaleX(var(--s, 1)); } }
.intro .ico-lines:hover path { animation: lines-align 3s cubic-bezier(.45, 0, .3, 1) 0s infinite !important; }
/* Kompliziertes: der Knoten dreht sich langsam um sich selbst */
.intro .is-play .ico-knot path { animation: knot-turn 12s cubic-bezier(.5, 0, .4, 1) 5.5s infinite; }
@keyframes knot-turn { 0%, 20% { transform: rotate(0); } 70%, 100% { transform: rotate(180deg); } }
.intro .ico-knot:hover path { animation: knot-turn 3.2s cubic-bezier(.5, 0, .4, 1) 0s infinite !important; }
/* Formen: wandeln sich nacheinander, bei Hover alle sofort */
.intro .is-play .ico-shapes .s1 { animation: morph1 9s var(--ease-soft) 6s infinite; }
.intro .is-play .ico-shapes .s2 { animation: turn 9s var(--ease-out) 7s infinite; }
.intro .is-play .ico-shapes .s3 { animation: turn3 9s var(--ease-out) 8s infinite; }
.intro .ico-shapes:hover > * { animation-duration: 3s !important; animation-delay: 0s !important; animation-play-state: running !important; }
/* Deutsch hat längere Wörter: etwas kleiner und breiter, damit »Ich gestalte nutzerfreundliche« in eine Zeile passt */
html[lang="de"] .intro .hero-title { font-size: clamp(36px, 5.7vw, 100px); max-width: 23ch; }

/* Porträt verlinkt zur About-Seite: beim Hover wird das Bild etwas größer und die zweite Zeile wechselt zu »Mehr über mich →« */
.intro .hero-id { color: var(--ink-2); }
.ava { position: relative; display: block; flex: none; width: 56px; height: 56px; }
.ava img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; transition: transform .5s var(--ease-out); }
.ava i { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: #fff; font-size: 20px; opacity: 0; transform: scale(.6); transition: opacity .3s var(--ease-soft), transform .45s var(--ease-out); }
/* 26.10.: Hover am Namen/Porträt nur mit Maus – auf dem Handy blieb nach dem Antippen kurz die graue Fläche stehen */
@media (hover: hover) { html:not([data-portrait="2"]) .intro .hero-id:hover .ava img { transform: scale(1.08); } }
/* Variante 2: das Bild wird zum schwarzen Kreis mit Pfeil, die Zeile bleibt */
@media (hover: hover) { html[data-portrait="2"] .intro .hero-id:hover .ava i { opacity: 1; transform: none; } }
@media (hover: hover) { html[data-portrait="2"] .intro .hero-id:hover .who-role > span { transform: none; } }
@media (hover: hover) { html[data-portrait="2"] .intro .hero-id:hover b { text-decoration: underline; text-underline-offset: 3px; } }
.who-role { display: block; height: 1.35em; overflow: hidden; }
.who-role > span { display: block; transition: transform .45s var(--ease-out); }
@media (hover: hover) { .intro .hero-id:hover .who-role > span { transform: translateY(-100%); } }
.who-role > span:last-child { color: var(--ink); font-weight: 400; } /* »Mehr über mich →« unterstrichen statt fett, damit es sich vom Namen absetzt */
.who-role > span:last-child .i18n { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* Scroll-Hinweis: kleiner Pfeil, der sanft nach unten wippt */
.intro-cue { display: grid; place-items: center; width: 52px; height: 52px; margin-top: clamp(26px, 5vh, 48px); border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); transition: background-color .3s, color .3s; }
.intro-cue:hover { background: var(--ink); color: #fff; }
html.motion .intro-cue { animation: cue 1.8s var(--ease-soft) 3s infinite; }
@keyframes cue { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(12px); } 65% { transform: translateY(0); } 80% { transform: translateY(4px); } }

/* Scroll-Pfeil wieder verworfen; Satz wieder groß, Block mittig unterhalb der Navigation */
.intro-in { padding: 84px var(--gutter) 24px; }
.intro .hero-title { font-size: clamp(36px, min(6.6vw, 10.4vh), 116px); }
html[lang="de"] .intro .hero-title { font-size: clamp(34px, min(5.9vw, 9.4vh), 104px); }
/* Rückkehr nach oben: Satz blendet an Ort und Stelle sanft wieder ein (ohne von oben hereinzurutschen) */
.intro-in.is-back { transform: none !important; transition: opacity 1s var(--ease-soft); }
/* Ausstieg: zügig nach oben weg, leicht unscharf, beschleunigend; Dabei! folgt mit kurzer weißer Pause */
.intro-in { opacity: 1; transform: none; }
.intro-in.is-out { opacity: 0; transform: translateY(-60px) scale(.98); transition: opacity .6s cubic-bezier(.4, 0, .2, 1), transform .7s cubic-bezier(.4, 0, .2, 1); } /* zügig, aber weich, ohne Unschärfe */
.intro-in.is-back { transition: opacity 1s var(--ease-soft); }
html.motion [data-after-intro].is-in { transition-delay: .15s; }

/* schneller: jedes Icon zeichnet sich in gut einer Sekunde ein (kurz versetzt) und bewegt sich direkt danach,
   unabhängig davon, ob die übrigen schon fertig sind */
.intro .is-play .ico * { transition: stroke-dashoffset 1.1s cubic-bezier(.4, 0, .2, 1) var(--d, .15s), fill .5s var(--ease-soft) 1.4s, transform .8s var(--ease-out) 1.4s; }
.intro .ico:nth-of-type(1) { --d: .15s; } .intro .ico:nth-of-type(2) { --d: .35s; } .intro .ico:nth-of-type(3) { --d: .55s; }
.intro .ico:nth-of-type(4) { --d: .75s; } .intro .ico:nth-of-type(5) { --d: .95s; }
.intro .is-play .ico-hand .hand, .intro .is-play .ico-hand .waves { animation-delay: 1.2s; }
.intro .is-play .ico-toggle .knob { animation-delay: 1.5s; }
.intro .is-play .ico-lines path { animation-delay: 1.7s; }
.intro .is-play .ico-knot path { animation-delay: 1.9s; }
.intro .is-play .ico-shapes .s1 { animation-delay: 2.1s; } .intro .is-play .ico-shapes .s2 { animation-delay: 2.6s; } .intro .is-play .ico-shapes .s3 { animation-delay: 3.1s; }
/* Schleifen mit kurzem Anlauf, damit die erste Bewegung gleich nach dem Einzeichnen kommt */
@keyframes lines-align { 0%, 4%, 100% { transform: scaleX(1); } 18%, 52% { transform: scaleX(var(--s, 1)); } 66% { transform: scaleX(1); } }
@keyframes knot-turn { 0%, 4% { transform: rotate(0); } 46%, 100% { transform: rotate(180deg); } }
@keyframes morph1c { 0%, 4% { rx: 14px; } 14%, 50% { rx: 3px; } 60%, 100% { rx: 14px; } }
@keyframes turnc { 0%, 4% { transform: rotate(0); } 22%, 100% { transform: rotate(90deg); } }
@keyframes turn3c { 0%, 4% { transform: rotate(0); } 22%, 100% { transform: rotate(120deg); } }
.intro .is-play .ico-shapes .s1 { animation-name: morph1c; } .intro .is-play .ico-shapes .s2 { animation-name: turnc; } .intro .is-play .ico-shapes .s3 { animation-name: turn3c; }

/* Einzeichnen wieder ruhiger: knapp 2 s je Icon, 0,3 s versetzt, weiche Kurve; Bewegung direkt nach dem eigenen Einzeichnen */
.intro .is-play .ico * { transition: stroke-dashoffset 1.8s cubic-bezier(.45, 0, .25, 1) var(--d, .2s), fill .6s var(--ease-soft) 2.2s, transform .9s var(--ease-out) 2.2s; }
.intro .ico:nth-of-type(1) { --d: .2s; } .intro .ico:nth-of-type(2) { --d: .5s; } .intro .ico:nth-of-type(3) { --d: .8s; }
.intro .ico:nth-of-type(4) { --d: 1.1s; } .intro .ico:nth-of-type(5) { --d: 1.4s; }
.intro .is-play .ico-hand .hand, .intro .is-play .ico-hand .waves { animation-delay: 2s; }
.intro .is-play .ico-toggle .knob { animation-delay: 2.3s; }
.intro .is-play .ico-lines path { animation-delay: 2.6s; }
.intro .is-play .ico-knot path { animation-delay: 2.9s; }
.intro .is-play .ico-shapes .s1 { animation-delay: 3.2s; } .intro .is-play .ico-shapes .s2 { animation-delay: 3.7s; } .intro .is-play .ico-shapes .s3 { animation-delay: 4.2s; }

/* Ausblenden: alles gleichzeitig und schnell (linear, damit die feinen Icon-Linien nicht vor dem Text verschwinden) */
.intro-in.is-out { transition: opacity .32s linear, transform .45s cubic-bezier(.4, 0, .2, 1); }
/* danach kurz weiß, dann fährt Dabei! bewusst von unten herein */
html.motion [data-after-intro] { translate: 0 240px; transition: opacity .3s var(--ease-soft), translate 1.1s cubic-bezier(.16, 1, .3, 1); }
html.motion [data-after-intro].is-in { transition-delay: .4s; }

/* Footer wie Entwurf 1 (live), übernommen am 23.10. – Werte aus zum-hochladen/style.css */
.contact-banner { display: flex; flex-direction: column; justify-content: space-between; min-height: 46vh; padding: 2rem 1.5rem 4rem; background: linear-gradient(rgba(38,38,38,.28), rgba(38,38,38,.28)) 1.5rem 0 / calc(100% - 3rem) 1px no-repeat, #fff; color: var(--ink); }
.contact-banner p { margin: 0; text-transform: uppercase; font-size: .75rem; letter-spacing: .06em; line-height: 1.4; }
.contact-banner a { display: flex; justify-content: space-between; align-items: flex-end; font-family: var(--font-display); font-feature-settings: "ss02" 1; font-size: clamp(4.5rem, 15vw, 14rem); letter-spacing: -.045em; line-height: .85; color: var(--ink); text-decoration: none; }
.contact-banner svg { width: .55em; height: .55em; stroke-width: 1.2; transition: transform .3s; }
.contact-banner a:hover svg { transform: translate(8px, -8px); }
.site-footer { display: grid; grid-template-columns: 1fr 1fr auto; align-items: last baseline; min-height: 260px; padding: 3rem 1.5rem; background: var(--ink); color: #fff; }
.site-footer > p { margin: 0; font-family: var(--font-display); font-feature-settings: "ss02" 1; font-size: clamp(1.75rem, 3vw, 2.75rem); letter-spacing: -.02em; line-height: 1.1; }
.site-footer > div { display: flex; gap: 2rem; align-items: baseline; }
.site-footer a { display: flex; gap: .25rem; align-items: center; color: inherit; text-decoration: none; }
.site-footer > .site-footer-legal { grid-column: 1 / -1; justify-content: space-between; margin-top: 2.5rem; flex-wrap: wrap; row-gap: .5rem; }
.site-footer-legal a { font-size: .75rem; text-transform: uppercase; text-decoration: underline; text-underline-offset: .18em; letter-spacing: .06em; line-height: 1.4; }
.site-footer-legal a:hover { opacity: .55; }
.site-footer-legal span { margin-left: auto; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; line-height: 1.4; }
@media (max-width: 760px) { .contact-banner { padding: 1rem; min-height: 34vh; } .site-footer { grid-template-columns: 1fr; gap: 2rem; min-height: 300px; padding: 2rem 1rem; } .site-footer > div { flex-direction: column; gap: .75rem; } .site-footer > .site-footer-legal { flex-direction: row; gap: .5rem; } }
/* Navigation: Links mittig zwischen Name/Status und CV (gleicher Abstand, 23.10.) */
.nav .nav-links .nav-cv { margin-left: 15px !important; }

/* 23.10.: Dabei!-Fläche im Lila der Case Study */
.feat { background: #ebe5ff !important; }
/* Navigation wie in der Case Study: zugeklappt ohne grünen Punkt, Abstände links und rechts der Links je 36 px */
.nav.is-compact .nav-status { display: none !important; }
.nav .nav-links .nav-cv { margin-left: 21px !important; }
.nav .nav-links { margin-left: 5px; }
.nav.is-compact .nav-links { margin-left: 11px; }
/* Dabei!-Teaser: erste Spalte beginnt mit »Lese-Pate in der Stadtbücherei« ganz sichtbar; die Bewegung startet erst, wenn die Karte im Bild ist */
.feat .stage-cols .col:nth-child(1) { transform: translateY(3%) !important; }
.feat:not(.is-in) .drift { animation-play-state: paused !important; }
/* 04.11.: je eine Kopie über und unter der Spalte, sonst verschwindet beim Neustart der Schleife ein Handy an der Kante, statt rauszufahren (siehe c.js) */
.feat .drift, .feat .dh-drift { position: relative; }
html body .feat :is(.drift, .dh-drift) > .drift-vor { position: absolute; left: 0; right: 0; bottom: 100%; margin-bottom: var(--dg, 18px); }
html body .feat :is(.drift, .dh-drift) > .drift-nach { position: absolute; left: 0; right: 0; top: 100%; margin-top: var(--dg, 18px); }

/* ===== Rand überall wie im Styleguide (24.10.): 3,9 % links und rechts, Inhalt höchstens 1680 px ===== */
:root { --gutter: max(16px, 3.89vw); }
main, .legal { max-width: calc(1680px + 2 * var(--gutter)); }
.social { max-width: 1680px; }
/* Footer: keine Linie darüber, weil direkt davor das Playground-Element steht (24.10.) */
.contact-banner { background: #fff !important; border-top: 0 !important; }
/* Übergang Intro → Dabei! ohne weiße Pause (24.10.): der Satz geht, gleichzeitig rutscht Dabei! von unten herein */
html.motion [data-after-intro] { translate: 0 120px; }
html.motion [data-after-intro].is-in { transition-delay: 0s !important; transition: opacity .45s var(--ease-soft), translate .8s cubic-bezier(.16, 1, .3, 1); }
/* Knoten-Icon (24.10.): mittig zwischen »Kompliziertes« und »&« (vorher links 11 px, rechts 7 px) und eine Spur größer */
.intro .hero-title .ico-knot { height: .66em; vertical-align: -.07em; margin-left: .07em; margin-right: .07em; }
/* Playground-Teaser (24.10.): beim Überfahren der Karte wird der Button zur weißen Kontur, Schrift und Pfeil weiß */
.play .btn-light { transition: background-color .25s, color .25s, box-shadow .25s; }
@media (hover: hover) { /* 26.10.: nur mit Maus */ .play:hover .btn-light { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px #fff; }
.play:hover .btn-light svg, .play:hover .btn-light .arrow-ico { color: #fff; stroke: currentColor; } }

/* ===== 24.10. Runde Startseite ===== */
/* Footer (»Sag hallo«, »Lass uns in Kontakt bleiben«, Impressum) auf dem gleichen Rand wie der Inhalt */
.contact-banner, .site-footer { padding-left: max(var(--gutter), calc((100vw - 1680px) / 2)) !important; padding-right: max(var(--gutter), calc((100vw - 1680px) / 2)) !important; }
/* Projektkarten: kein Pfeil in der Ecke beim Überfahren */
.card-go { display: none !important; }
/* Navigation: Status zieht sich weich zusammen statt abrupt zu verschwinden */
.nav .nav-status { transition: max-width .6s cubic-bezier(.16, 1, .3, 1), margin .6s cubic-bezier(.16, 1, .3, 1), opacity .3s; }
.nav.is-compact .nav-status { display: inline-flex !important; max-width: 0 !important; margin-right: 0 !important; opacity: 0; overflow: hidden; }
/* Dabei!-Teaser: klare Hierarchie – Titel, Unterzeile als Aussage, Beschreibung leiser, Pillen mit Luft */
.feat h2 { margin: 0 0 16px -.05em; } /* wie »Dabei!« auf der Case-Study-Seite optisch bündig */
.feat-line { margin: 0 0 24px; max-width: 16em; font-family: var(--font-display); font-feature-settings: "ss02" 1; font-size: clamp(20px, 1.9vw, 28px); font-weight: 500; line-height: 1.2; letter-spacing: -.015em; }
.feat-desc { margin: 0 0 40px; max-width: 30em; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.feat .pills { gap: 8px; margin-bottom: 0; }
.feat .pill-break { display: none; }
/* Formen-Icon am Ende des Einstiegs: kein Kreis→Quadrat mehr, Dreieck gerade, Bewegung beim Überfahren und in Abständen */
.intro .ico-shapes > * { animation: none !important; transform-box: fill-box; }
.intro .ico-shapes .s3 { transform-origin: 50% 66.7%; }
.intro .ico-shapes .s2, .intro .ico-shapes .s1 { transform-origin: 50% 50%; }
.intro .ico-shapes.go .s3 { animation: sh-tri 1.1s cubic-bezier(.65, 0, .35, 1) both !important; }
.intro .ico-shapes.go .s2 { animation: sh-quad 1.1s cubic-bezier(.65, 0, .35, 1) .15s both !important; }
.intro .ico-shapes.go .s1 { animation: sh-kreis 1.1s cubic-bezier(.65, 0, .35, 1) .3s both !important; }
@keyframes sh-tri { to { transform: rotate(120deg); } }
@keyframes sh-quad { to { transform: rotate(90deg); } }
@keyframes sh-kreis { 0%, 100% { transform: scale(1); } 45% { transform: scale(.7); } }
.intro .ico-shapes { cursor: pointer; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .intro .ico-shapes.go > * { animation: none !important; } }
/* Handy: Dabei!-Teaser wie die Projektkarten – Bild oben in der Kachel, Text darunter, weiter lila */
@media (max-width: 760px) {
  .feat { display: flex !important; flex-direction: column; }
  .feat .feat-stage { order: -1; height: 320px !important; min-height: 0 !important; }
  .feat-text { padding: 24px 20px 28px !important; }
  .feat h2 { font-size: 56px; }
}

/* 24.10.: Icons nur noch per JavaScript bewegt (Klasse .go): Bewegung beginnt und endet im Ruhezustand, dadurch kein Springen beim Überfahren.
   Schalter: Knopf fährt hin und zurück. Knoten: halbe Drehung. Formen: immer nur eine Form, abwechselnd (Dreieck dreht, Quadrat kippt, Kreis atmet). */
.intro .ico-shapes { overflow: visible; }
.intro .ico-toggle .knob, .intro .ico-knot path, .intro .ico-toggle:hover .knob, .intro .ico-knot:hover path { animation: none !important; }
.intro .ico-shapes:hover > * { transform: none; }
.intro .ico-toggle { cursor: pointer; pointer-events: auto; }
.intro .ico-knot { cursor: pointer; pointer-events: auto; }
html .intro .ico-toggle.go .knob { animation: knob-go 1.7s cubic-bezier(.45, 0, .25, 1) both !important; }
@keyframes knob-go { 0% { transform: translateX(40px); fill: currentColor; } 38%, 58% { transform: translateX(0); fill: transparent; } 100% { transform: translateX(40px); fill: currentColor; } }
html .intro .ico-knot.go path { animation: knot-go 1.6s cubic-bezier(.5, 0, .35, 1) both !important; }
@keyframes knot-go { from { transform: rotate(0); } to { transform: rotate(180deg); } }
.intro .ico-shapes .s3 { transform-origin: 50% 64%; }
html .intro .ico-shapes.go-1 .s3 { animation: sh-tri 1.1s cubic-bezier(.65, 0, .35, 1) both !important; }
html .intro .ico-shapes.go-2 .s2 { animation: sh-kipp 1.1s cubic-bezier(.65, 0, .35, 1) both !important; }
html .intro .ico-shapes.go-3 .s1 { animation: sh-kreis 1.1s cubic-bezier(.65, 0, .35, 1) both !important; }
@keyframes sh-kipp { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(45deg) scale(.86); } }
@keyframes sh-kreis { 0%, 100% { transform: scale(1); } 45% { transform: scale(.72); } }
.intro .ico-shapes.go > * { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .intro .ico.go *, .intro .ico-shapes[class*="go-"] > * { animation: none !important; } }

/* Handy: Dabei!-Teaser bekommt den Button (kein Hover-Kreis auf dem Handy), Playground mit Video oben */
.feat-mbtn { display: none !important; }
@media (max-width: 760px) {
  .feat .feat-mbtn { display: inline-flex !important; margin-top: 24px; }
  .play .play-media { order: -1; }
}

/* 24.10. (2): Formen als Kettenreaktion – Dreieck dreht sich, stößt das Quadrat an, das den Kreis. Weiche Kurven, Dreieck dreht um seinen Schwerpunkt (kein Sprung) */
html .intro .ico-shapes .s3 { transform-origin: 50% 66.667%; }
html .intro .ico-shapes.go .s3 { animation: kette-tri 1.1s cubic-bezier(.45, 0, .2, 1) both !important; }
html .intro .ico-shapes.go .s2 { animation: kette-quad 1.1s cubic-bezier(.45, 0, .2, 1) .28s both !important; }
html .intro .ico-shapes.go .s1 { animation: kette-kreis 1.1s cubic-bezier(.45, 0, .2, 1) .56s both !important; }
@keyframes kette-tri { from { transform: rotate(0); } to { transform: rotate(120deg); } }
@keyframes kette-quad { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(45deg) scale(.86); } 100% { transform: rotate(90deg) scale(1); } }
@keyframes kette-kreis { 0%, 100% { transform: scale(1); } 45% { transform: scale(.74); } }

/* Pause-Knopf: SVG-Symbol, bricht nie um; wird die Videofläche schmal, bleibt nur das Symbol im runden Knopf */
.play .play-media { container-type: inline-size; }
.reel-pause { white-space: nowrap; flex: none; }
.reel-pause .ic { display: inline-flex; width: 11px; height: 11px; }
.reel-pause .ic svg { display: block; }
/* (kein Umschalten auf ein reines Symbol mehr – der Knopf bleibt immer gleich, 24.10.) */

/* 24.10. (3): Hand winkt weich – nur per JavaScript (.go), Bewegung startet und endet in Ruhe, jede Teilbewegung mit weicher Kurve statt Zickzack */
.intro .ico-hand .hand, .intro .ico-hand .waves, .intro .ico-hand:hover .hand, .intro .ico-hand:hover .waves { animation: none !important; }
.intro .ico-hand { cursor: pointer; pointer-events: auto; }
html .intro .ico-hand.go .hand { animation: hand-go 1.9s both !important; }
html .intro .ico-hand.go .waves { animation: hand-wellen 1.9s ease both !important; }
@keyframes hand-go {
  0% { transform: rotate(0); animation-timing-function: cubic-bezier(.4, 0, .6, 1); }
  20% { transform: rotate(14deg); animation-timing-function: cubic-bezier(.4, 0, .6, 1); }
  42% { transform: rotate(-7deg); animation-timing-function: cubic-bezier(.4, 0, .6, 1); }
  64% { transform: rotate(10deg); animation-timing-function: cubic-bezier(.4, 0, .6, 1); }
  84% { transform: rotate(-2deg); animation-timing-function: cubic-bezier(.4, 0, .4, 1); }
  100% { transform: rotate(0); }
}
@keyframes hand-wellen { 0%, 100% { opacity: 0; } 18%, 75% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { html .intro .ico-hand.go .hand, html .intro .ico-hand.go .waves { animation: none !important; } }

/* Navigation (24.10.): Zusammenziehen weicher – gleiche Dauer und Kurve für alles, Breite startet bei der echten Breite (kein toter Anlauf), Text blendet zuerst aus */
.nav { transition: height .8s cubic-bezier(.65, 0, .35, 1), padding .8s cubic-bezier(.65, 0, .35, 1), gap .8s cubic-bezier(.65, 0, .35, 1) !important; }
.nav .nav-status { max-width: var(--sw, none); transition: max-width .8s cubic-bezier(.65, 0, .35, 1), margin .8s cubic-bezier(.65, 0, .35, 1), opacity .45s ease .25s !important; }
.nav.is-compact .nav-status { transition: max-width .8s cubic-bezier(.65, 0, .35, 1), margin .8s cubic-bezier(.65, 0, .35, 1), opacity .3s ease !important; }
.nav .nav-links { transition: margin .8s cubic-bezier(.65, 0, .35, 1); }

/* 24.10.: »Sag hallo« auf allen Seiten gleich – mehr Luft wie in Entwurf 1, bündig mit dem Seitenrand
   Abstand zum Inhalt darüber 160 px (Handy 96), »Offen für neue Rollen« → »Sag hallo« 220 px (Handy 120) */
html body .contact-banner { min-height: 0 !important; justify-content: flex-start !important; }
html body .contact-banner > p { margin-bottom: max(64px, min(220px, 15.3vw)) !important; } /* 25.10. abends: wächst mit »Sag hallo« */
@media (max-width: 760px) { html body .contact-banner > p { margin-bottom: 120px !important; } }
/* Startseite: main hat schon den Seitenrand, das Banner selbst nicht noch einmal einrücken */
html body main > .contact-banner { padding-left: 0 !important; padding-right: 0 !important; }

/* 24.10. (4): Kette weicher – jede Form macht genau eine durchgehende Bewegung (keine Zwischenstopps):
   Dreieck dreht 120°, Quadrat dreht 90° (ohne Größenänderung), Kreis atmet einmal; gleiche Kurve, überlappend gestaffelt */
html .intro .ico-shapes.go .s3 { animation: kette-tri 1.2s cubic-bezier(.65, 0, .35, 1) both !important; }
html .intro .ico-shapes.go .s2 { animation: kette-quad2 1.2s cubic-bezier(.65, 0, .35, 1) .2s both !important; }
html .intro .ico-shapes.go .s1 { animation: kette-kreis2 1.2s ease-in-out .4s both !important; }
@keyframes kette-quad2 { from { transform: rotate(0); } to { transform: rotate(90deg); } }
@keyframes kette-kreis2 { 0%, 100% { transform: scale(1); } 50% { transform: scale(.76); } }

/* Punkt nach der Hand so nah wie nach den Formen: die Hand-Grafik hat rechts Leerraum (für die Wellen oben), den gleicht ein negativer Abstand aus */
.intro .hero-title .ico-hand { margin-right: -.2em; }

/* 24.10. (5): Einstieg → Dabei! ruhiger – der Teaser fährt nicht mehr zusätzlich von unten herein (die Seite gleitet ja schon), er blendet nur weich ein */
html.motion [data-after-intro] { translate: none !important; transition: opacity .6s cubic-bezier(.4, 0, .2, 1) !important; }
html.motion [data-after-intro].is-in { transition-delay: 0s !important; }

/* Navigation: Rolle im selben Grau wie »Offen für Rollen in« (nicht weiß) */
.nav .nav-status .role { color: inherit !important; }

/* 24.10. (6) Einstieg → Dabei! neu: Werte kommen aus der Scrollposition (c.js), daher keine eigenen Übergänge; kein Einrasten, ganz natürliches Scrollen */
.intro-in, .intro-in.is-out, .intro-in.is-back { transition: none !important; }

/* 24.10.: Navigation der Startseite exakt wie auf allen Unterseiten (Entwurf-1-Kopf), damit beim Seitenwechsel nichts springt:
   Name in Pangram 600, Links Inter 600 mit 8/12 px Innenabstand und 4 px Lücke, CV 16 px Innenabstand und 20 px Abstand, Sprache DE / EN */
html body .nav .nav-name { font-family: var(--font-display) !important; font-feature-settings: "ss02" 1 !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: normal !important; }
html body .nav .nav-links { gap: 4px !important; margin-left: 0 !important; }
html body .nav .nav-links > a:not(.nav-cv) { font-family: var(--font-sans) !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: -.07px !important; padding: 8px 12px !important; line-height: 19.6px !important; }
html body .nav .nav-links .nav-cv { height: 36px !important; padding: 0 16px !important; margin-left: 20px !important; font-weight: 600 !important; letter-spacing: -.07px !important; gap: 8px !important; }
html body .nav .lang { gap: 4px !important; margin: 0 8px 0 6px !important; font-size: 13px !important; font-weight: 600 !important; }
html body .nav .lang button { padding: 0 !important; height: auto !important; line-height: 18.2px !important; }
html body .nav .nav-status { margin-left: -5.8px !important; margin-right: 20px !important; }
html body .nav .lang { padding: 0 !important; }
html body .nav .nav-links .nav-cv { padding: 0 16.5px !important; }
html body .nav.is-compact .nav-status { margin-left: 0 !important; margin-right: 0 !important; }
@media (max-width: 900px) { html body .nav { padding-left: 20px !important; } }
html body .nav.is-compact .nav-links { margin-left: -17.6px !important; } /* zusammengezogen: Abstand Name → Projekte 8 px wie auf den Unterseiten */

/* Schalter-Icon (24.10.): der Knopf ist immer voll blau – keine durchsichtige Zwischenfläche, weder beim Einzeichnen noch beim Umschalten */
html body .intro .ico-toggle .knob { fill: currentColor !important; transition: transform .6s cubic-bezier(.16, 1, .3, 1) !important; }
@keyframes knob-go { 0% { transform: translateX(40px); } 40%, 58% { transform: translateX(0); } 100% { transform: translateX(40px); } }

/* Playground-Teaser: »Playground« ohne Pill – klein, kräftig, in Versalien */
html body .play .chip { padding: 0 !important; height: auto !important; background: none !important; box-shadow: none !important; border-radius: 0 !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: #fff !important; line-height: 1.3 !important; }

/* Dabei!-Teaser: »Dabei!« und Unterzeile gehören zusammen (8 px), dann Luft zum Text (28 px), dann gleiche Luft zu den Pillen (28 px) */
html body .feat h2 { margin-bottom: 8px !important; }
html body .feat .feat-line { margin: 0 0 28px !important; }
html body .feat .feat-desc { margin: 0 0 28px !important; }

/* Variante »ohne Kacheln« (?kacheln=offen): Projekte ohne Kontur und weiße Fläche – Bild mit runden Ecken, Text frei darunter */
html[data-kacheln="offen"] body .card { padding: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; }
html[data-kacheln="offen"] body .card .card-img { border-radius: 20px !important; }
html[data-kacheln="offen"] body .grid-5 .card .card-img { border-radius: 16px !important; }
html[data-kacheln="offen"] body .card .card-text { padding: 16px 0 0 !important; }
html[data-kacheln="offen"] body .grid-5 .card .card-text { padding: 12px 0 0 !important; }

/* ===== 24.10. Projekt-Varianten zum Umschalten (Leiste unten links, nur Vorschau) =====
   data-kacheln: kachel (Standard, Kontur) · rund (offen, Bild 20 px rund) · eckig (offen, Bild eckig, Pillen rund)
                 klein (offen, überall nur 6 px Rundung) · mix (große Bilder 20 px rund, kleine eckig)
   data-hover:   heben (Standard) · zoom (nur das Bild zoomt) · ruhig (nichts bewegt sich, Titel unterstrichen) */
html[data-kacheln]:not([data-kacheln="kachel"]) body .card { padding: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; }
html[data-kacheln]:not([data-kacheln="kachel"]) body .card .card-text { padding: 16px 0 0 !important; }
html[data-kacheln]:not([data-kacheln="kachel"]) body .grid-5 .card .card-text { padding: 12px 0 0 !important; }
html[data-kacheln="rund"] body .card .card-img { border-radius: 20px !important; }
html[data-kacheln="rund"] body .grid-5 .card .card-img { border-radius: 16px !important; }
html[data-kacheln="eckig"] body .card .card-img { border-radius: 0 !important; }
html[data-kacheln="klein"] body .card .card-img { border-radius: 6px !important; }
html[data-kacheln="klein"] body .card .card-tags > span { border-radius: 6px !important; }
html[data-kacheln="mix"] body .grid-3 .card .card-img { border-radius: 20px !important; }
html[data-kacheln="mix"] body .grid-5 .card .card-img { border-radius: 0 !important; }

/* Hover */
@media (hover: hover) { /* 26.10.: Kachel-Hover nur mit Maus */ html[data-kacheln]:not([data-kacheln="kachel"]) body .card:hover, html[data-hover] body .card:hover { box-shadow: none !important; }
html[data-kacheln="kachel"]:not([data-hover]) body .card:hover, html[data-kacheln="kachel"][data-hover="heben"] body .card:hover { box-shadow: inset 0 0 0 1px var(--card-border), 0 22px 44px -26px rgba(0,0,0,.22) !important; }
html[data-hover="zoom"] body .card:hover, html[data-hover="ruhig"] body .card:hover { transform: none !important; background: transparent; }
html[data-kacheln="kachel"][data-hover="zoom"] body .card:hover, html[data-kacheln="kachel"][data-hover="ruhig"] body .card:hover { background: var(--card-bg) !important; box-shadow: inset 0 0 0 1px var(--card-border) !important; }
html[data-hover="zoom"] body .card:hover .card-img img { transform: scale(1.07) !important; }
html[data-hover="ruhig"] body .card:hover .card-img img { transform: none !important; }
html[data-hover="ruhig"] body .card h3 { text-decoration: underline transparent; text-decoration-thickness: 1.5px; text-underline-offset: 4px; transition: text-decoration-color .25s; }
html[data-hover="ruhig"] body .card:hover h3 { text-decoration-color: currentColor; } }

/* Umschalter */
.vx-switch { position: fixed; z-index: 9999; left: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 14px; background: rgba(11,11,11,.9); color: #fff; font: 500 12px/1.2 var(--font-sans); box-shadow: 0 10px 30px -10px rgba(0,0,0,.5); }
.vx-switch .vx-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.vx-switch .vx-label { width: 64px; color: rgba(255,255,255,.55); }
.vx-switch button { padding: 5px 9px; border: 0; border-radius: 999px; background: rgba(255,255,255,.1); color: #fff; font: inherit; cursor: pointer; }
.vx-switch button[aria-pressed="true"] { background: #fff; color: #0b0b0b; }
.vx-switch .vx-hide { margin-left: auto; background: none; color: rgba(255,255,255,.55); }
.vx-switch.is-min .vx-row:not(:first-child) { display: none; }
/* »Fein« (wie im Apple Store): Rundung im Verhältnis zur Bildgröße, ca. 2,5 % der Breite – große Bilder 10 px, kleine 6 px, Pillen bleiben rund */
html[data-kacheln="fein"] body .grid-3 .card .card-img { border-radius: 10px !important; }
html[data-kacheln="fein"] body .grid-5 .card .card-img { border-radius: 6px !important; }

/* »Stufen wie Apple« (24.10., Standard): wenige, eng beieinanderliegende Rundungen je nach Größe – nichts wirkt gemischt
   Große Fläche (Dabei!, Playground) 28 px · Projektbild 18 px · kleines Bild (Weitere Arbeiten) 12 px · Handy: Flächen und Bilder 18 px */
html[data-kacheln="apple"] body .feat, html[data-kacheln="apple"] body .play { border-radius: 22px !important; } /* 26.10.: Rundung A (vorher 28 / 18 / 12, Handy 18) */
html[data-kacheln="apple"] body .grid-3 .card .card-img { border-radius: 16px !important; }
html[data-kacheln="apple"] body .grid-5 .card .card-img { border-radius: 10px !important; }
@media (max-width: 760px) { html[data-kacheln="apple"] body .feat, html[data-kacheln="apple"] body .play { border-radius: 16px !important; } }

/* Teaser (Dabei!, Playground) sind keine Karten mehr: beim Überfahren kein Hochspringen, kein Schatten */
html body :is(.feat, .play):hover { transform: none !important; box-shadow: none !important; }

/* ===== Handy-Menü (24.10.) – gleitet weich auf statt zu springen; Links groß und kräftig, bündig mit »Victoria Schmidt« ===== */
@media (max-width: 900px) {
  html body .nav { height: auto !important; min-height: 52px; flex-wrap: wrap; align-items: center; border-radius: 26px !important; padding: 7px 7px 7px 20px !important; transition: padding .5s cubic-bezier(.2, .8, .2, 1), min-height .5s cubic-bezier(.2, .8, .2, 1) !important; }
  html body .nav.is-compact { min-height: 46px; padding-top: 4px !important; padding-bottom: 4px !important; }
  html body .nav[data-open] { padding-bottom: 20px !important; }
  html body .nav .nav-links { display: flex !important; flex-direction: column; align-items: flex-start; order: 5; width: 100%; max-height: 0; overflow: hidden; opacity: 0; visibility: hidden; margin: 0 !important; padding: 0 !important; gap: 0 !important;
    transition: max-height .55s cubic-bezier(.2, .8, .2, 1), opacity .35s ease, visibility 0s linear .55s; }
  html body .nav[data-open] .nav-links { max-height: 480px; opacity: 1; visibility: visible; transition: max-height .55s cubic-bezier(.2, .8, .2, 1), opacity .4s ease .08s, visibility 0s; }
  html body .nav .nav-links > a:not(.nav-cv) { display: block; padding: 6px 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; font-family: var(--font-display) !important; font-feature-settings: "ss02" 1 !important; font-size: 34px !important; font-weight: 600 !important; letter-spacing: -.02em !important; line-height: 1.12 !important; color: rgba(255,255,255,.5) !important; }
  html body .nav .nav-links > a:not(.nav-cv):first-child { margin-top: 22px; }
  html body .nav .nav-links > a[aria-current], html body .nav .nav-links > a:not(.nav-cv):hover { color: #fff !important; }
  html body .nav .nav-links > a[aria-current]::after { display: none !important; }
  html body .nav .nav-links .nav-cv { align-self: flex-start; width: auto; height: 40px !important; padding: 0 18px !important; margin: 28px 0 0 !important; font-size: 15px !important; }
  html body .nav .lang { margin: 20px 0 0 !important; padding: 0 !important; gap: 6px !important; font-size: 15px !important; justify-content: flex-start; }
  /* die Einträge rücken beim Öffnen leicht nach, statt alle gleichzeitig dazustehen */
  html body .nav .nav-links > * { transform: translateY(-6px); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
  html body .nav[data-open] .nav-links > * { transform: none; }
}
@media (prefers-reduced-motion: reduce) { html body .nav .nav-links, html body .nav .nav-links > * { transition: none !important; } }
@media (max-width: 900px) { html body .nav[data-open] .nav-links > .nav-cv { margin: 28px 0 0 !important; } }

/* Umschalter »Weitere Arbeiten« (data-weitere): Größen aus der Dabei!-Seite und About */
html[data-weitere="fett"] body .more-title { font-size: 22px !important; font-weight: 600 !important; }
html[data-weitere="karte"] body .more-title { font-size: 20px !important; font-weight: 600 !important; letter-spacing: -.01em !important; }
html[data-weitere="mittel"] body .more-title { font-size: 32px !important; font-weight: 500 !important; letter-spacing: -.02em !important; line-height: 1.12 !important; }
html[data-weitere="gross"] body .more-title { font-size: 44px !important; font-weight: 500 !important; letter-spacing: -.025em !important; line-height: 1.08 !important; }
html[data-weitere="label"] body .more-title { font-family: var(--font-sans) !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: .08em !important; text-transform: uppercase !important; }
@media (max-width: 760px) { html[data-weitere="gross"] body .more-title { font-size: 32px !important; } html[data-weitere="mittel"] body .more-title { font-size: 26px !important; } }
@media (max-width: 900px) { html body .nav.is-compact .nav-links { margin-left: 0 !important; } } /* Handy-Menü auch beim Scrollen bündig mit dem Namen */

/* Handy-Menü (24.10., 2): Links weiß mit mehr Luft, CV heißt dort »Lebenslauf«, Hover sichtbar, Seite dahinter weichgezeichnet */
.nav-cv .cv-long { display: none; }
@media (max-width: 900px) {
  html body .nav .nav-links > a:not(.nav-cv) { color: #fff !important; padding: 10px 0 !important; }
  html body .nav .nav-links > a:not(.nav-cv):hover { color: rgba(255,255,255,.7) !important; }
  html body .nav .nav-links > a:not(.nav-cv):first-child { margin-top: 26px; }
  html body .nav .nav-links .nav-cv { margin-top: 32px !important; transition: background-color .25s, color .25s, box-shadow .25s !important; }
  html body .nav[data-open] .nav-links > .nav-cv { margin: 32px 0 0 !important; }
  html body .nav .nav-links .nav-cv:hover, html body .nav .nav-links .nav-cv:focus-visible { background: transparent !important; color: #fff !important; box-shadow: inset 0 0 0 1.5px #fff !important; }
  html body .nav .nav-cv .cv-short { display: none; }
  html body .nav .nav-cv .cv-long { display: inline; }
  html body .nav .lang { margin-top: 22px !important; }
}
.nav-veil { position: fixed; inset: 0; z-index: 55; background: rgba(255,255,255,.35); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); opacity: 0; pointer-events: none; transition: opacity .45s cubic-bezier(.2, .8, .2, 1); }
.nav-veil.is-on { opacity: 1; pointer-events: auto; }
@media (min-width: 901px) { .nav-veil { display: none; } }

/* Umschalter »Weitere Arbeiten«: 22 fett, näher an den Kacheln */
html[data-weitere="eng"] body .more-title { font-size: 22px !important; font-weight: 600 !important; margin-bottom: 10px !important; }

/* Umschalter Playground-Teaser (data-play): jetzt · a (Satz als Fließtext) · c (nur Video, Label und Knopf) · b (ohne Teaser) */
html[data-play="a"] body .play-text h2 { font-family: var(--font-sans) !important; font-size: 18px !important; font-weight: 400 !important; line-height: 1.5 !important; letter-spacing: 0 !important; max-width: 28em; }
html[data-play="c"] body .play-text h2 { display: none !important; }
html[data-play="c"] body .play-text .btn { margin-top: 20px; }
html[data-play="b"] body .play { display: none !important; }
html[data-play="c"] body .play-text { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center; gap: 18px; }
html[data-play="c"] body .play-text .btn { margin-top: 0; }
/* Handy-Menü: Weichzeichner deutlich schwächer; DE / EN optisch bündig mit den großen Begriffen und dem runden Lebenslauf-Knopf (deren sichtbare Kante liegt durch Vorbreite und Rundung ca. 3 px weiter rechts) */
.nav-veil { background: rgba(255,255,255,.18) !important; -webkit-backdrop-filter: blur(4px) !important; backdrop-filter: blur(4px) !important; }
@media (max-width: 900px) { html body .nav .lang { margin-left: 7px !important; } } /* optisch: unter der Rundung des Lebenslauf-Knopfs */

/* Playground A (24.10., 2): Satz in Pangram statt Fließtextschrift, etwas größer (24 px, Handy 21 px); A2 zusätzlich ohne »Playground«-Label */
html[data-play="a"] body .play-text h2, html[data-play="a2"] body .play-text h2 { font-family: var(--font-display) !important; font-feature-settings: "ss02" 1 !important; font-size: 24px !important; font-weight: 500 !important; line-height: 1.3 !important; letter-spacing: -.01em !important; max-width: 22em; }
html[data-play="a2"] body .play-text .chip { display: none !important; }
@media (max-width: 760px) { html[data-play="a"] body .play-text h2, html[data-play="a2"] body .play-text h2 { font-size: 21px !important; } }

/* Handy-Menü (24.10., 3): DE / EN steht in der Leiste neben dem Menü-Symbol; im Menü zwei Knöpfe nebeneinander – »Lebenslauf ↓« (weiß) und »Sag hallo« mit Brief (Kontur) */
.nav-mail, .nav .lang-bar { display: none !important; }
@media (max-width: 900px) {
  html body .nav .lang-bar { display: inline-flex !important; order: 2; margin: 0 10px 0 auto !important; padding: 0 !important; gap: 4px !important; font-size: 13px !important; }
  html body .nav .nav-status { margin-right: 0 !important; }
  html body .nav .nav-menu { order: 3; }
  html body .nav .nav-links .lang { display: none !important; }
  html body .nav .nav-links { flex-direction: row !important; flex-wrap: wrap; align-items: center !important; column-gap: 10px !important; }
  html body .nav .nav-links > a:not(.nav-cv):not(.nav-mail) { flex-basis: 100%; }
  html body .nav[data-open] .nav-links > .nav-cv, html body .nav .nav-links > .nav-cv { margin: 30px 0 0 !important; }
  html body .nav .nav-links > .nav-mail { display: inline-flex !important; align-items: center; gap: 8px; height: 40px; margin-top: 30px; padding: 0 18px; border-radius: 999px; color: #fff; font-size: 15px; font-weight: 600; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55); transition: box-shadow .25s, background-color .25s, color .25s; }
  html body .nav .nav-links > .nav-mail:hover, html body .nav .nav-links > .nav-mail:focus-visible { background: #fff; color: #0b0b0b; box-shadow: none; }
}
@media (max-width: 420px) { html body .nav .nav-status .av { display: none !important; } } /* schmales Handy: nur der grüne Punkt, damit DE / EN und das Menü-Symbol Platz haben */
@media (max-width: 900px) {
  html body .nav .nav-links > a.nav-mail { display: inline-flex !important; flex-basis: auto !important; align-items: center; gap: 8px; height: 40px; margin: 30px 0 0 !important; padding: 0 18px !important; border-radius: 999px !important; background: transparent !important; font-family: var(--font-sans) !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: 0 !important; line-height: 1 !important; color: #fff !important; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55) !important; }
  html body .nav .nav-links > a.nav-mail:hover, html body .nav .nav-links > a.nav-mail:focus-visible { background: #fff !important; color: #0b0b0b !important; box-shadow: none !important; }
}

/* ===== Intro als eigener Bildschirm (24.10., dritte Fassung) – Werte nicht mehr an die Scrollposition gekoppelt ===== */
html body .intro-in { opacity: 1 !important; transform: none !important; transition: opacity .32s ease, filter .32s ease !important; }
html body .intro-in.is-gone { opacity: 0 !important; filter: blur(4px); pointer-events: none; }
html.motion body [data-after-intro], html.motion body [data-after-intro].is-in, html body [data-after-intro] { opacity: 1 !important; translate: 0 0 !important; transition: translate .8s cubic-bezier(.16, 1, .3, 1), opacity .5s ease !important; }
html.motion body [data-after-intro].is-in.is-enter, html.motion body [data-after-intro].is-enter, html body [data-after-intro].is-enter { translate: 0 140px !important; opacity: 0 !important; transition: none !important; }
html.motion body [data-after-intro].is-in.is-leave, html.motion body [data-after-intro].is-leave, html body [data-after-intro].is-leave { translate: 0 60px !important; opacity: 0 !important; transition: translate .28s ease, opacity .28s ease !important; }
#work { scroll-margin-top: 108px; }
@media (max-width: 760px) { #work { scroll-margin-top: 96px; } }
@media (prefers-reduced-motion: reduce) { html body .intro-in, html body [data-after-intro] { transition: none !important; } }

/* ===== Navigation nach Gerät (24.10.) =====
   Handy (≤ 600 px): kein Punkt, kein Status. Tablet (601–1024 px): Punkt + »Offen für Rollen in …« bleibt immer, auch beim Scrollen.
   Handy und Tablet: Leiste behält beim Scrollen Größe und Form (kein Verkleinern). Menü-Symbol ohne graue Kreisfläche wie auf den Unterseiten. */
@media (max-width: 1024px) {
  html body .nav.is-compact { height: 52px !important; min-height: 52px !important; padding-top: 0 !important; padding-bottom: 0 !important; gap: 4px !important; }
  html body .nav.is-compact .nav-status { max-width: var(--sw, none) !important; opacity: 1 !important; margin-left: -5.8px !important; margin-right: 20px !important; }
  html body .nav.is-compact .nav-status > .av { opacity: 1 !important; }
  html body .nav.is-compact .nav-links { margin-left: 0 !important; }
  html body .nav.is-compact .nav-cv { height: 36px !important; }
}
@media (max-width: 900px) {
  html body .nav, html body .nav.is-compact { height: auto !important; min-height: 52px !important; padding: 7px 7px 7px 20px !important; border-radius: 26px !important; }
  html body .nav[data-open] { padding-bottom: 20px !important; }
  html body .nav .nav-menu { background: transparent !important; }
  html body .nav.is-compact .nav-status { margin-left: 0 !important; margin-right: 0 !important; }
}
@media (max-width: 600px) { html body .nav .nav-status, html body .nav.is-compact .nav-status { display: none !important; } }
/* Tablet/Handy: Leiste genau 52 px hoch wie auf den Unterseiten, damit die 26-px-Rundung eine runde Pille ergibt (bei 56 px wirkte sie kantig) */
@media (max-width: 900px) {
  html body .nav:not([data-open]), html body .nav.is-compact:not([data-open]) { padding-top: 5px !important; padding-bottom: 5px !important; min-height: 52px !important; }
  html body .nav > .nav-id, html body .nav > .lang-bar, html body .nav > .nav-menu { max-height: 42px; }
}
/* Intro-Wechsel symmetrisch: Satz geht nach oben weg und kommt von oben zurück, Teaser kommt von unten und geht nach unten weg */
html body .intro-in { translate: 0 0 !important; transition: opacity .36s ease, translate .6s cubic-bezier(.16, 1, .3, 1), filter .36s ease !important; }
html body .intro-in.is-gone { translate: 0 -56px !important; transition: opacity .24s ease, translate .26s cubic-bezier(.5, 0, .75, 0), filter .24s ease !important; /* 25.10.: schneller, passend zum Sprung nach 0,25 s */ }
html.motion body [data-after-intro].is-in.is-leave, html.motion body [data-after-intro].is-leave, html body [data-after-intro].is-leave { translate: 0 140px !important; opacity: 0 !important; transition: translate .34s cubic-bezier(.5, 0, .75, 0), opacity .3s ease !important; }
/* Projektbereich (#work) gleitet als ein Block: Dabei! und die Projekte darunter gemeinsam */
html body #work { translate: 0 0; transition: translate .8s cubic-bezier(.16, 1, .3, 1), opacity .5s ease; }
html body #work.is-enter { translate: 0 140px !important; opacity: 0 !important; transition: none !important; }
html body #work.is-leave { translate: 0 140px !important; opacity: 0 !important; transition: translate .34s cubic-bezier(.5, 0, .75, 0), opacity .3s ease !important; }
@media (prefers-reduced-motion: reduce) { html body #work { transition: none !important; } }

/* Teaser auf Tablet und Handy (bis 900 px – seit 25.10. abends; darüber, z. B. iPad Pro hochkant, Text neben dem Bild): immer Bild oben, Text unten – Text mit gleichem Innenabstand wie die Karten (32 px, Handy 24 px), ohne zusätzliche Einrückung */
@media (max-width: 900px) {
  html body .feat { display: flex !important; flex-direction: column !important; }
  html body .feat .feat-stage { order: -1; height: clamp(320px, 52vw, 460px) !important; min-height: 0 !important; }
  html body .feat .feat-text { padding: 32px !important; margin: 0 !important; max-width: none !important; width: auto !important; }
  html body .play { display: flex !important; flex-direction: column !important; }
  html body .play .play-media { order: -1; }
  html body .play .play-text { padding: 32px !important; margin: 0 !important; max-width: none !important; }
}
@media (max-width: 760px) { html body .feat .feat-text, html body .play .play-text { padding: 24px !important; } }
@media (max-width: 900px) { html body .feat .feat-text { align-self: stretch !important; text-align: left !important; } html body .feat .feat-text > * { margin-left: 0 !important; } html body .feat .feat-text h2 { margin-left: -.05em !important; } }
/* Tablet hat keinen Mauszeiger: Knopf »Case Study lesen« bis 1100 px und auf allen Touch-Geräten */
@media (max-width: 900px), (hover: none) { html body .feat .feat-mbtn { display: inline-flex !important; margin-top: 28px; } }
@media (max-width: 900px) { html body .play .play-text { align-self: stretch !important; align-items: flex-start !important; text-align: left !important; width: auto !important; } html body .play .play-text > * { margin-left: 0 !important; } }
/* Gestapelt (bis 1100 px): Unterzeile ohne künstlichen Umbruch, Absatz mit Lesebreite statt Spaltenbreite */
@media (max-width: 900px) {
  html body .feat .feat-line { max-width: none !important; }
  html body .feat .feat-desc { max-width: 40em !important; }
  html body .play .play-text h2 { max-width: 36em !important; }
}

/* Umschalter »Subline« der Projektkarten (data-sub): jetzt · naeher (wie jetzt, Unterzeile dicht am Titel) · live (wie die Live-Seite: beide 20 px, Titel Inter Medium, Unterzeile Pangram grau, ohne Abstand) */
html[data-sub="naeher"] body .card h3 { line-height: 1.2 !important; }
html[data-sub="naeher"] body .card .card-line { margin-top: 2px !important; }
html[data-sub="live"] body .grid-3 .card h3 { font-family: var(--font-sans) !important; font-feature-settings: normal !important; font-size: 20px !important; font-weight: 500 !important; line-height: 1.3 !important; letter-spacing: -.01em !important; }
html[data-sub="live"] body .grid-3 .card .card-line { margin-top: 0 !important; font-family: var(--font-display) !important; font-feature-settings: "ss02" 1 !important; font-size: 20px !important; font-weight: 400 !important; line-height: 1.3 !important; letter-spacing: -.01em !important; color: #545454 !important; }

/* Startseite (24.10.): Schriftgrößen der Projektkarten im 4er-Raster – große Karten Titel 20 / Unterzeile 16 / Pillen 12, kleine Karten Titel 16 / Pillen 12 */
html body .grid-3 .card h3 { font-size: 20px !important; }
html body .grid-3 .card .card-line { font-size: 16px !important; }
html body .card .card-tags > span { font-size: 12px !important; }
html body .grid-5 .card h3 { font-size: 16px !important; }
/* »Weitere Arbeiten« wie die Projekttitel: 20 px fett, auch auf dem Handy */
html[data-weitere="karte"] body .more-title { font-size: 20px !important; font-weight: 600 !important; }

/* Umschalter »Leistungen« (data-leist): pills (jetzt) · text (wie früher: »UX · Webdesign · UI Design« als ruhige Zeile) */
html[data-leist="text"] body .card .card-tags { display: none !important; }
html[data-leist="text"] body .card .card-meta { display: block !important; margin: 8px 0 0 !important; font-size: 12px !important; letter-spacing: .02em; color: var(--ink-3, #6b6b6b) !important; }
html[data-leist="text"] body .grid-5 .card .card-meta { margin-top: 4px !important; }
html[data-leist="pills"] body .card .card-meta { display: none !important; }

/* Dabei!-Teaser: »Product Design Case Study« für sich, darunter »10 Min. Lesezeit« und »Kurzversion · 3 Min.« zusammen in einer Zeile; Pillen brechen nie um */
html body .feat .pills { display: flex !important; flex-wrap: wrap; }
html body .feat .pills .pill { white-space: nowrap !important; }
html body .feat .pills .pill-break { display: block !important; flex-basis: 100%; height: 0; }

/* Umschalter »Einordnung« (data-einordnung): pill (jetzt) · label (»PRODUCT DESIGN CASE STUDY« klein in Versalien über »Dabei!«, darunter nur die zwei Lese-Optionen als Pillen) */
.feat-kicker-c { display: none; margin: 0 0 14px; font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3, #6b6b6b); }
html[data-einordnung="label"] body .feat .feat-kicker-c { display: block; }
html[data-einordnung="label"] body .feat .pills .pill:first-child, html[data-einordnung="label"] body .feat .pills .pill-break { display: none !important; }
/* Knopf »Case Study lesen«: Hover wie »Zum Playground« – beim Überfahren der Fläche wird er durchsichtig mit Kontur, der Pfeil rückt nach rechts */
html body .feat .feat-mbtn { transition: background-color .25s, color .25s, box-shadow .25s !important; }
@media (hover: hover) { /* 26.10.: nur mit Maus – auf dem Handy blieb »Case Study lesen« nach dem Antippen als Kontur stehen */ html body .feat:hover .feat-mbtn, html body .feat:focus-visible .feat-mbtn { background: transparent !important; color: var(--ink, #0b0b0b) !important; box-shadow: inset 0 0 0 1.5px var(--ink, #0b0b0b) !important; }
html body .feat:hover .feat-mbtn .arrow-ico { transform: translateX(4px); } }
/* Pillen: Abstand zwischen den Zeilen gleich dem zwischen den Pillen (8 px) – der unsichtbare Umbruch zählte sonst als eigene Zeile */
html body .feat .pills { column-gap: 8px !important; row-gap: 8px !important; }
html body .feat .pills .pill-break { display: none !important; }
html body .feat .pills .pill:first-child { margin-right: 100% !important; } /* erzwingt den Umbruch nach der ersten Pille ohne zusätzliche Zeile */

/* Variante Dabei!-Teaser »Wie Live (Karte)« (data-teaser="karte"): große Projektkarte – oben die lila Fläche mit den Handys, darunter Titel, Unterzeile und Infos wie bei den anderen Projekten */
.feat-meta-c { display: none; }
html[data-teaser="karte"] body .feat { display: flex !important; flex-direction: column !important; background: transparent !important; border-radius: 0 !important; padding: 0 !important; box-shadow: none !important; overflow: visible !important; }
html[data-teaser="karte"] body .feat .feat-stage { order: -1; background: #ebe5ff; border-radius: 28px; overflow: hidden; height: clamp(360px, 42vw, 600px) !important; min-height: 0 !important; }
html[data-teaser="karte"] body .feat .feat-text { padding: 16px 0 0 !important; margin: 0 !important; max-width: none !important; }
html[data-teaser="karte"] body .feat h2 { margin: 0 !important; font-size: 20px !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: -.01em !important; }
html[data-teaser="karte"] body .feat .feat-line { margin: 2px 0 0 !important; max-width: none !important; font-family: var(--font-sans) !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1.4 !important; letter-spacing: 0 !important; }
html[data-teaser="karte"] body .feat .feat-desc, html[data-teaser="karte"] body .feat .pills, html[data-teaser="karte"] body .feat .feat-mbtn { display: none !important; }
html[data-teaser="karte"] body .feat .feat-meta-c { display: block; margin: 8px 0 0; font-size: 12px; letter-spacing: .02em; color: var(--ink-3, #6b6b6b); }
@media (max-width: 760px) { html[data-teaser="karte"] body .feat .feat-stage { border-radius: 18px; height: 320px !important; } }
/* Umschalter (25.10.): nur noch die offene Frage – der Dabei!-Teaser; alles Entschiedene ist ausgeblendet */
.vx-switch .vx-row:not(.is-keep) { display: none !important; }

/* Playground-Video (data-pvideo): cover45 (jetzt, 4:5 füllt die Fläche) · hoch45 / hoch916 (Video hochkant und ganz neben dem Text) · quer916 (9:16 um 90° gedreht = 16:9, füllt die Fläche ohne Anschnitt) */
html[data-pvideo="hoch45"] body .play, html[data-pvideo="hoch916"] body .play { align-items: stretch; }
html[data-pvideo^="hoch"] body .play .play-media { display: flex; align-items: center; justify-content: center; background: #0b0b0b; padding: 32px; }
html[data-pvideo^="hoch"] body .play .reel { height: min(560px, 70vh); width: auto; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; position: relative; }
html[data-pvideo="hoch916"] body .play .reel { aspect-ratio: 9 / 16; }
html[data-pvideo^="hoch"] body .play .reel video { width: 100% !important; height: 100% !important; object-fit: cover; }
html[data-pvideo="quer916"] body .play .reel { position: relative; width: 100%; aspect-ratio: 16 / 9; height: auto !important; overflow: hidden; container-type: size; }
html[data-pvideo="quer916"] body .play .reel video { position: absolute !important; left: 50%; top: 50%; width: 100cqh !important; height: 100cqw !important; max-width: none !important; object-fit: cover; transform: translate(-50%, -50%) rotate(-90deg); }
@media (max-width: 900px) { html[data-pvideo^="hoch"] body .play .reel { height: min(480px, 110vw); } }
/* Karten-Variante: kleinere Handys im feineren Raster statt drei großer Spalten; Text bündig unter dem Bild */
html[data-teaser="karte"] body .feat .feat-stage.stage-cols { display: none !important; }
html[data-teaser="karte"] body .feat .feat-stage.stage-raster { display: block !important; order: -1; position: relative; background: #ebe5ff; border-radius: 28px; overflow: hidden; height: clamp(360px, 40vw, 560px) !important; min-height: 0 !important; }
html[data-teaser="karte"] body .feat .feat-text { align-self: stretch !important; width: 100% !important; text-align: left !important; }
html[data-teaser="karte"] body .feat .feat-text > * { margin-left: 0 !important; margin-right: 0 !important; }
@media (max-width: 760px) { html[data-teaser="karte"] body .feat .feat-stage.stage-raster { border-radius: 18px; height: 320px !important; } }
html[data-teaser="karte"] body .feat .feat-stage.stage-raster { width: 100% !important; container-type: size; }
html[data-teaser="karte"] body .feat .raster-track { width: 112cqw !important; gap: 2.4cqw !important; transform: translate(-50%, -50%) !important; } /* gerade, nicht gekippt: sieben schmale Spalten mit kleineren Handys */
html[data-teaser="karte"] body .feat .rcol { --dg: 2.4cqw; }
html[data-teaser="karte"] body .feat .rcol:nth-child(odd) { transform: translateY(6cqw); }
/* 25.10.: Fläche bleibt wie sie ist (16:9, randlos) – nur der Bildausschnitt des Videos wechselt */
html[data-pvideo="oben45"] body .play .reel video { object-position: 50% 12% !important; }
html[data-pvideo="unten45"] body .play .reel video { object-position: 50% 88% !important; }
html[data-pvideo="mitte916"] body .play .reel video { object-position: 50% 50% !important; }
/* 25.10.: EN etwas näher an DE (vorher 6,6 vw gegen 5,9 vw), damit der Größensprung beim Sprachwechsel klein bleibt */
html[lang="en"] .intro .hero-title { font-size: clamp(35px, min(6.2vw, 9.9vh), 110px); }
/* 25.10.: Porträt unter dem Intro größer, mit mehr Luft zum Satz */
.intro .ava { width: 72px; height: 72px; }
.intro .hero-id { margin-top: clamp(48px, 8vh, 88px); font-size: 16px; }
.intro .hero-id b { font-size: 16px; }
@media (max-width: 760px) { .intro .ava { width: 76px; height: 76px; } .intro .hero-id { margin-top: 40px; gap: 16px; } } /* 26.10.: Porträt größer, im Verhältnis zu Name und Rolle (Victoria) */
/* 25.10.: alle Varianten entschieden – Auswahlleiste unten links ausgeblendet (Standardwerte in c.js sind ihre Wahl) */
.vx-switch { display: none !important; }
/* 25.10.: Intro-Satz gleich in der gespeicherten Sprache zeigen (die Sprache wird im <head> gesetzt, der Text-Tausch per Skript kommt sonst erst nach dem ersten Bild) */
html[lang="en"] .intro [data-only="de"] { display: none !important; }
html[lang="en"] .intro [data-only="en"][hidden] { display: inline !important; }
/* 25.10.: Playground-Teaser – hinter dem 16:9-Video lag noch das Blau des alten Reels und blitzte an den Kanten als Linie durch */
html body .play .play-media { background: #f6f7fc !important; }
html body .play .reel video { transform: scale(1.01); transform-origin: center; }
/* 25.10.: Icons mit fester Breite (aus der viewBox) – Safari machte sie vor dem Skriptstart kurz 300 px breit, der Satz brach dann in schmale Zeilen um */
.intro .hero-title .ico-hand { width: .887em; }
.intro .hero-title .ico-toggle { width: .955em; }
.intro .hero-title .ico-knot { width: .866em; }
.intro .hero-title .ico-shapes { width: 1.714em; }
/* 25.10.: Leiste behält beim Zusammenziehen ihre Höhe (vorher 52 → 46 px) – nur die Breite ändert sich */
@media (min-width: 901px) { html body .nav.is-compact { height: 52px !important; min-height: 52px !important; } }
/* 25.10.: Pangram ohne Ersatzschrift anzeigen (statt »swap«: erst Ersatzschrift, dann Umbruch-Sprung). Gleiche Dateien wie in style.css */
@font-face { font-family: "Pangram Sans"; src: url("../../fonts/PPPangramSans-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: "Pangram Sans"; src: url("../../fonts/PPPangramSans-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: block; }
/* 25.10.: Breite des Intro-Satzes in em statt ch – »ch« hängt an der Schrift und war beim Laden kurz kleiner (»Hi,« stand dann allein
   in der ersten Zeile). Werte entsprechen genau den bisherigen 20ch (EN) und 23ch (DE). Erste Zeile bricht ab Tablet nie um. */
html .intro .hero-title { max-width: 12.42em !important; }
html[lang="de"] .intro .hero-title { max-width: 14.28em !important; }
@media (min-width: 600px) { html .intro .hero-title .hl-1 { white-space: nowrap; } }
/* 25.10.: Wort + Icon + Punkt bleiben in einer Zeile */
.intro .hero-title .nb { white-space: nowrap; }
/* 25.10.: Hochformat (Handy, Tablet hochkant) – eigene, feste Zeilen statt nur kleiner skaliert: kurze Sinnzeilen, größere Schrift */
.intro .hero-title .pb { display: none; }
@media (max-width: 600px), (max-width: 1100px) and (orientation: portrait) {
  .intro .hero-title .pb { display: inline; }
  html .intro .hero-title { max-width: none !important; font-size: 9.4vw !important; line-height: 1.1 !important; }
  html[lang="de"] .intro .hero-title { font-size: 8.6vw !important; }
}

/* 25.10.: Intro-Satz in DE und EN gleich groß – beim Sprachwechsel blenden nur die Wörter über, nichts skaliert oder rückt */
html[lang] .intro .hero-title { font-size: clamp(34px, min(5.9vw, 9.4vh), 104px); }
@media (max-width: 600px), (max-width: 1100px) and (orientation: portrait) {
  html[lang] .intro .hero-title { font-size: 8.6vw !important; }
}

/* 25.10.: kein »balance« beim Intro-Satz – Safari verteilte die Wörter nach dem Sprachwechsel sekundenlang auf zu kurze Zeilen.
   Die Umbrüche stehen fest: max. Breite, span.nb (Wort + Icon bleiben zusammen) und br.pb fürs Hochformat */
.intro .hero-title { text-wrap: wrap !important; }

/* 25.10. (abends, Victoria): Tablet und Handy (Teaser gestapelt, Text unter dem Bild) – dieselbe Collage wie im Kopf der Dabei!-Seite:
   iPhones mit Rahmen und Schatten in wandernden Spalten, mehr Luft, mehr Handys zu sehen (Regeln aus c-dabei/case.css übernommen) */
.feat .feat-stage.stage-dh { display: none; }
@media (max-width: 900px) {
  html body a.feat.feat .feat-stage.feat-stage:not(.stage-dh) { display: none !important; }
  html body a.feat.feat .feat-stage.stage-dh { display: grid !important; order: -1; grid-template-columns: repeat(5, 1fr); gap: clamp(14px, 1.8vw, 26px); height: clamp(420px, 56vw, 560px) !important; min-height: 0 !important; padding: 0 clamp(20px, 3vw, 40px) !important; overflow: hidden; background: #ebe5ff; }
  .feat .stage-dh .dh-col { --dg: clamp(14px, 1.8vw, 26px); min-width: 0; }
  .feat .stage-dh .dh-col:nth-child(1) { transform: translateY(-6%); --dur: 34s; }
  .feat .stage-dh .dh-col:nth-child(2) { transform: translateY(-16%); --dur: 40s; }
  .feat .stage-dh .dh-col:nth-child(3) { transform: translateY(-2%); --dur: 37s; }
  .feat .stage-dh .dh-col:nth-child(4) { transform: translateY(-10%); --dur: 38s; }
  .feat .stage-dh .dh-col:nth-child(5) { transform: translateY(-4%); --dur: 35s; }
  .feat .stage-dh .dh-drift { display: flex; flex-direction: column; gap: var(--dg); animation: feat-dh-drift var(--dur, 36s) linear infinite; }
  .feat .stage-dh .dh-col:nth-child(2n) .dh-drift { animation-direction: reverse; }
  .feat .stage-dh .dh-pp { position: relative; display: block; padding: 5.111% 5.333%; filter: drop-shadow(0 8px 10px rgba(0,0,0,.14)); }
  .feat .stage-dh .dh-pp::after { content: ""; position: absolute; inset: 0; background: url("../../assets/dabei/iphone-17-black.png") center / 100% 100% no-repeat; pointer-events: none; }
  .feat .stage-dh .dh-pp img { display: block; width: 100%; height: auto; aspect-ratio: 1206 / 2622; object-fit: cover; object-position: top; border-radius: 12% / 5.5%; background: #fff; }
}
@media (max-width: 760px) {
  html body a.feat.feat .feat-stage.stage-dh { grid-template-columns: repeat(3, 1fr); height: 440px !important; padding: 0 22px !important; }
  .feat .stage-dh .dh-col:nth-child(n+4) { display: none; }
}
@keyframes feat-dh-drift { to { transform: translateY(calc(-50% - var(--dg) / 2)); } }
@media (prefers-reduced-motion: reduce) { .feat .stage-dh .dh-drift { animation: none; } }

/* 25.10. (abends, Victoria): Handy – Intro-Satz nicht mittig im Bildschirm, sondern oben (rund 56 px unter der Leiste);
   unten bleibt Platz für den Hinweis zum Runterscrollen */
/* (Handy oben ausgerichtet – ersetzt am 25.10. abends durch »mittig zwischen Leiste und Pfeil«, siehe unten) */

/* 25.10. (abends, Test): Hinweis zum Runterscrollen – kleiner Pfeil unten im Intro, wippt sanft; auf allen Geräten */
.intro .intro-hint { position: absolute; left: 50%; bottom: max(28px, env(safe-area-inset-bottom)); width: 48px; height: 48px; margin-left: -24px; display: grid; place-items: center; border-radius: 50%; color: #0b0b0b; opacity: .7; cursor: pointer; animation: intro-hint 2.4s cubic-bezier(.45, 0, .55, 1) infinite; transition: opacity .25s; }
.intro .intro-hint:hover { opacity: 1; }
@keyframes intro-hint { 0%, 100% { transform: translateY(0); opacity: .35; } 50% { transform: translateY(8px); opacity: .85; } }
@media (prefers-reduced-motion: reduce) { .intro .intro-hint { animation: none; } }

/* 25.10. (abends, Victoria): ohne Maus (Handy, Tablet) gibt es kein Überfahren – »Mehr über mich →« steht deshalb fest unter der Rolle */
@media (hover: none), (max-width: 900px) {
  html body .intro .hero-id .who-role { height: auto; overflow: visible; }
  html body .intro .hero-id .who-role > span { transform: none !important; }
  html body .intro .hero-id .who-role > span:last-child { margin-top: 6px; }
}

/* 25.10. (abends, Victoria): Hochformat – Hand hinter »Hi,« (erste Zeile »Hi, ✋«), sonst wie bisher hinter »Victoria« */
.intro .hero-title .ico-m-nb { display: none; }
@media (max-width: 600px), (max-width: 1100px) and (orientation: portrait) {
  .intro .hero-title .ico-m-nb { display: inline; }
  .intro .hero-title .ico-d { display: none; }
}
/* 25.10. (abends, Victoria): Handy – Intro-Satz größer (gleich in DE und EN, »nutzerfreundliche« passt mit Luft), mehr Umbrüche */
@media (max-width: 600px) {
  html[lang] .intro .hero-title { font-size: min(11.6vw, 5.2vh) !important; line-height: 1.08 !important; } /* auch nach der Höhe – passt auf kleine Handys */
}
/* Hand hinter »Hi,« näher am Wort (ohne Leerzeichen, nur ein kleiner Abstand) */
.intro .hero-title .ico-m-nb .ico-hand { margin-left: .2em !important; }
/* 25.10. (abends, Victoria): Hand hinter »Hi,« jetzt auf allen Formaten gleich (Desktop: »Hi, ✋ ich bin Victoria.«) */
html body .intro .hero-title .ico-m-nb { display: inline !important; }
html body .intro .hero-title .ico-d { display: none !important; }
/* Hand hinter »Hi«: rechts kein negativer Abstand (der galt für die alte Stelle hinter »Victoria«), Komma direkt an der Hand */
html body .intro .hero-title .ico-m-nb .ico-hand { margin-right: -.21em !important; } /* Komma so nah an der sichtbaren Hand wie der Punkt an den Formen (Grafik hat rechts Leerraum für die Winke-Striche) */

/* 25.10. (abends, Victoria): Satz und Profil auf allen Geräten genau mittig zwischen Leiste und Pfeil-Hinweis */
html body .intro-in { justify-content: center !important; padding-top: 105px !important; padding-bottom: 75px !important; } /* Pfeil sitzt tiefer – Block bleibt mittig zwischen Leiste und Pfeil */
/* Pfeil-Hinweis tiefer (Victoria: unten wirkte mehr Platz als oben über dem Text) */
html body .intro .intro-hint { bottom: max(10px, env(safe-area-inset-bottom)) !important; }

/* 25.10. (abends, Victoria): alle iPads hochkant (bis 1100 px, auch iPad Pro) mit der Handy-Anordnung; Schrift so groß, dass
   der Satz in die Höhe passt */
@media (min-width: 601px) and (max-width: 1100px) and (orientation: portrait) {
  html[lang] .intro .hero-title { font-size: min(10vw, 5.8vh) !important; line-height: 1.08 !important; }
}
/* 25.10. (abends, Victoria): Satz und Profil als Einheit – der Abstand dazwischen ist deutlich kleiner als die Luft oben und unten */
html body .intro .hero-id { margin-top: clamp(24px, 3.2vh, 46px) !important; }
/* 25.10. (abends, Victoria): 901–1100 px (z. B. iPad Pro hochkant, iPads quer) – Teaser wie am Desktop, Text neben dem Bild
   (die Grunddatei a.css stapelt bis 1100 px; hier für die Startseite zurückgestellt) */
@media (min-width: 901px) and (max-width: 1100px) {
  html body a.feat { grid-template-columns: 5fr 7fr !important; }
  html body .play { grid-template-columns: 4fr 7fr !important; }
  html body .grid-3 { grid-template-columns: repeat(3, 1fr) !important; } /* drei Projekte nebeneinander wie am Desktop (sonst 2 + 1) */
}
/* 25.10. (abends, Victoria): Playground-Kasten – oben so viel Luft wie unten (die Überschrift hatte oben zusätzlich 22 px) */
html body .play .play-text h2 { margin-top: 0 !important; }
/* 25.10. (abends, Victoria): Teaser nebeneinander – der Bildbereich füllt immer die volle Höhe der Karte (bei hohem Textteil,
   z. B. 912 px Breite, blieb oben und unten ein Streifen ohne Handys) */
@media (min-width: 901px) {
  html body a.feat.feat .feat-stage.feat-stage { align-self: stretch !important; height: auto !important; min-height: 0 !important; contain: size; } /* Höhe kommt von Karte/Text, nicht von den Handys */
}

/* 25.10. (Victoria): Handy – Dabei!-Teaser kompakter: Bild im Querformat (4:3, vier Handy-Spalten statt drei hoher),
   die beschreibende Zeile »Viele Menschen können …« entfällt */
@media (max-width: 760px) {
  html body a.feat.feat .feat-stage.stage-dh { grid-template-columns: repeat(4, 1fr); gap: 12px; height: auto !important; aspect-ratio: 4 / 3; padding: 0 18px !important; }
  .feat .stage-dh .dh-col { --dg: 12px; }
  .feat .stage-dh .dh-col:nth-child(4) { display: block; }
  html body a.feat.feat .feat-desc { display: none !important; }
}

/* 26.10. (Victoria, Variante A): Menü-Symbol – die drei Linien gleiten zur Mitte, erst dann drehen sie zum Kreuz (und zurück in
   umgekehrter Reihenfolge). Vorher sprang die zweite Kreuzlinie ohne Übergang dazu. Wird per leiste_bauen.py auf alle Seiten übertragen. */
html body .nav .nav-menu i { position: relative; width: 16px; height: 1.5px; border-radius: 1px; background: #fff; box-shadow: none !important; transform: none !important; transition: background-color .01s .18s !important; }
html body .nav .nav-menu i::before, html body .nav .nav-menu i::after { content: ""; position: absolute; left: 0; display: block; width: 16px; height: 1.5px; border-radius: 1px; background: #fff; transition: top .18s .18s, transform .18s 0s; }
html body .nav .nav-menu i::before { top: -5px; transform: none; }
html body .nav .nav-menu i::after { top: 5px; transform: none; }
html body .nav[data-open] .nav-menu i { background: transparent; transition: background-color .01s .18s !important; }
html body .nav[data-open] .nav-menu i::before, html body .nav[data-open] .nav-menu i::after { top: 0; transition: top .18s 0s, transform .18s .18s; }
html body .nav[data-open] .nav-menu i::before { transform: rotate(45deg); }
html body .nav[data-open] .nav-menu i::after { transform: rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { html body .nav .nav-menu i, html body .nav .nav-menu i::before, html body .nav .nav-menu i::after { transition: none !important; } }

/* 26.10. (Victoria: »auf dem Handy bewegen sich die Handys ein bisschen«): wie im Kopf der Dabei!-Seite die wandernden Spalten
   als eigene Ebene, damit Safari nicht auf ganze Pixel rastet und die Schatten nicht ständig neu zeichnet */
.feat .stage-dh .dh-drift { will-change: transform; backface-visibility: hidden; }
.feat .stage-dh .dh-pp { transform: translateZ(0); }
@keyframes feat-dh-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, calc(-50% - var(--dg) / 2), 0); } }

/* 26.10. (Victoria: »Menü beim Aufklappen wirkt verzerrt«): dieselbe Bewegung (zur Mitte, dann drehen), aber ruhiger gebaut –
   die Linien bewegen sich per »translate« statt »top« (keine Zwischenpixel, kein Ruckeln auf dem iPhone), drehen sich um ihre
   Mitte, und das Kreuz ist etwas länger, damit es optisch so groß wirkt wie die drei Striche */
html body .nav .nav-menu i { width: 18px; height: 1.6px; }
html body .nav .nav-menu i::before, html body .nav .nav-menu i::after { top: 0 !important; left: 0; width: 18px; height: 1.6px; transform: none !important; transform-origin: 50% 50%; will-change: translate, rotate; transition: translate .2s cubic-bezier(.4,0,.2,1) .16s, rotate .2s cubic-bezier(.4,0,.2,1) 0s !important; }
html body .nav .nav-menu i::before { translate: 0 -5.5px; rotate: 0deg; }
html body .nav .nav-menu i::after { translate: 0 5.5px; rotate: 0deg; }
html body .nav[data-open] .nav-menu i::before, html body .nav[data-open] .nav-menu i::after { translate: 0 0; transition: translate .2s cubic-bezier(.4,0,.2,1) 0s, rotate .24s cubic-bezier(.3,0,.2,1) .18s !important; }
html body .nav[data-open] .nav-menu i::before { rotate: 45deg; }
html body .nav[data-open] .nav-menu i::after { rotate: -45deg; }
@media (prefers-reduced-motion: reduce) { html body .nav .nav-menu i::before, html body .nav .nav-menu i::after { transition: none !important; } }

/* 26.10. (Victoria: »du hast das Close-Icon nicht ausgetauscht«): offen steht jetzt dasselbe Schließen-Symbol wie in den Großansichten
   (gezeichnetes X, Strich 1,6, runde Enden) statt zwei gedrehter Balken. Die drei Striche laufen zur Mitte und blenden aus,
   das X dreht sich dabei leicht herein */
html body .nav .nav-menu { position: relative; }
html body .nav .nav-menu::after { content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'%3E%3Cline x1='5' y1='5' x2='19' y2='19'/%3E%3Cline x1='19' y1='5' x2='5' y2='19'/%3E%3C/svg%3E") center / 20px 20px no-repeat; opacity: 0; rotate: -45deg; transition: opacity .16s ease 0s, rotate .2s cubic-bezier(.4,0,.2,1) 0s; pointer-events: none; }
html body .nav[data-open] .nav-menu::after { opacity: 1; rotate: 0deg; transition: opacity .2s ease .16s, rotate .3s cubic-bezier(.16,1,.3,1) .16s; }
html body .nav .nav-menu i::before, html body .nav .nav-menu i::after { rotate: 0deg !important; opacity: 1; transition: translate .2s cubic-bezier(.4,0,.2,1) .12s, opacity .12s ease .1s !important; }
html body .nav[data-open] .nav-menu i::before, html body .nav[data-open] .nav-menu i::after { translate: 0 0; opacity: 0; transition: translate .18s cubic-bezier(.4,0,.2,1) 0s, opacity .1s ease .16s !important; }
html body .nav[data-open] .nav-menu i { background: transparent; transition: background-color .01s .16s !important; }
@media (prefers-reduced-motion: reduce) { html body .nav .nav-menu::after { transition: none !important; } }

/* 26.10. (Victoria: »der Pfeil hängt zu sehr an Bild und Text«): auf dem Handy sitzt der Hinweis-Pfeil ganz unten am Bildschirmrand
   (beim Wippen bleiben ein paar Pixel Luft zur Kante); Satz und Profil bleiben, wo sie sind – so wächst der Abstand zum Pfeil */
@media (max-width: 760px) {
  html body .intro .intro-hint { bottom: max(10px, calc(env(safe-area-inset-bottom) - 6px)) !important; height: 36px !important; margin-left: -24px; } /* 26.10. später: etwas höher, mit sichtbarer Safari-Leiste wirkte es zu knapp */
}

/* 26.10. (Victoria: »Bild und Text sitzen zu nah am Intro-Satz«): am Desktop mehr Luft zwischen Satz und Profil (vorher 26–35 px) */
@media (min-width: 761px) { html body .intro .hero-id { margin-top: clamp(48px, 6.5vh, 80px) !important; } }
/* 26.10. (Victoria: »der ganze Block soll mittig stehen«): mit dem größeren Abstand saß der Block 7–8 px unter der Mitte zwischen
   Leiste und Pfeil – jetzt einen Hauch über der Mitte (optische Mitte) */
@media (min-width: 761px) { html body .intro-in { padding-bottom: 51px !important; } }
/* 26.10. später (Victoria, Variante B): gemessen wird bis zum Bildschirmrand, nicht bis zum Pfeil – der Block steht mittig
   zwischen Leiste und unterem Rand (rund 20 px tiefer als vorher) */

/* 26.10.: Abstände Startseite, Variante A »Enger« (Vergleich: vorschau/varianten/startseite-abstaende-vorschlaege.html).
   Teaser: Zeile → Leistungen 16 (vorher 28). Karten: Name → Beschreibung 2, Beschreibung grau, → Leistungen 6 (vorher 8). Zurück: Block löschen. */
html[lang]:root body .feat .feat-line { margin-bottom: 16px !important; }
html[lang]:root body .feat .feat-desc { margin-bottom: 20px !important; }
html[lang]:root body .feat .feat-mbtn { margin-top: 24px !important; }
html[lang]:root body .card .card-line { margin-top: 2px !important; color: #5c5c5c !important; }
html[lang]:root body .card .card-meta { margin-top: 6px !important; }
html[lang]:root body .grid-5 .card .card-meta { margin-top: 2px !important; }

/* 26.10. (Victoria, Variante C): Dreieck, Quadrat und Kreis bei »visuelle Sprache« auf dem Handy kräftiger (1,8 statt 1,4 px),
   die anderen Intro-Icons bleiben. Am Desktop unverändert (.034em ≈ 2,6 px). Vergleich: vorschau/varianten/icons-strich-vorschlaege.html */
.intro .ico-shapes * { stroke-width: max(1.8px, .034em); }

/* 26.10. (Victoria, Screenshot vom Handy): Pausieren-Knopf lief rechts aus der Playground-Kachel. In Chrome passt er,
   in Safari kann die Videofläche breiter werden als die Kachel (Video hat 1920 px Eigenbreite). Videofläche, Reel und Video
   daher fest auf die Kachelbreite begrenzen; der Knopf bleibt immer 14 px vom Rand und darf nie breiter als die Fläche sein. */
html body .play .play-media { position: relative; min-width: 0; width: 100%; max-width: 100%; }
html body .play .reel, html body .play .reel video { max-width: 100%; }
html body .play .reel-pause { max-width: calc(100% - 28px); }
/* 27.10. Blitzer an den Handy-Ecken im Dabei!-Teaser (Safari): Screenbild zusätzlich per clip-path runden, wie in c-dabei/case.css */
html body .feat .stage-dh .dh-pp img { clip-path: inset(.3% round 12% / 5.5%); -webkit-clip-path: inset(.3% round 12% / 5.5%); }
/* 27.10. (Victoria: »Dabei ist schon kurz positioniert und bewegt sich dann nochmal ein Stück nach oben«): Der Block kam mit
   sehr steiler Kurve – nach 0,12 s fast da, dann 0,65 s Nachkriechen der letzten ~40 px. Jetzt gleichmäßig auslaufend, kürzerer Weg,
   Einblenden im selben Takt (vorher 140 px, .8s cubic-bezier(.16,1,.3,1), Deckkraft .5s ease) */
html body #work { transition: translate .8s cubic-bezier(.33, 1, .68, 1), opacity .45s cubic-bezier(0, 0, .58, 1); }
html body #work.is-enter { translate: 0 96px !important; }
/* 27.10. (Victoria: »es blitzt immer noch weiß«): clip-path allein reicht in Safari nicht. Jetzt schneidet eine Maske in Rahmenform
   das Screenbild fest zu (Masken hält Safari auch auf bewegten, eigenen Ebenen ein); dazu wird das Bild nicht mehr weiß hinterlegt. */
html body .feat .stage-dh .dh-pp img { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Crect x='.4' y='.2' width='99.2' height='99.6' rx='12' ry='5.5' fill='%23000'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Crect x='.4' y='.2' width='99.2' height='99.6' rx='12' ry='5.5' fill='%23000'/%3E%3C/svg%3E"); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: transparent !important; }
/* 27.10. (Victoria: weiße Flächen hinter den Rahmen-Ecken, Screenshot): Ursache war die eigene Grafikebene je Handy (translateZ, 26.10.)
   zusammen mit dem Schatten-Filter – Safari hinterlegt diese Ebene weiß, an den runden Rahmen-Ecken sieht man das. Jetzt: keine Ebene
   je Handy (die wandernde Spalte bleibt als Ganzes eine Ebene, gegen das Zittern). */
html body .feat .stage-dh .dh-pp { transform: none !important; } /* Schatten wieder als drop-shadow (folgt genau der Rahmenform); eine Ersatzfläche stand als grauer Rand ums Handy */

.vx-switch{display:none!important}