/* Früh geladene Kopie der Regeln, die vorschau-links.js am Seitenende einfügt.
   Liegt im <head>, damit die Navigationsleiste schon beim ersten Bild fertig aussieht
   und beim Laden nicht springt. Bei Änderungen in vorschau-links.js hier mitziehen. */
.site-header .availability.av-home{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;letter-spacing:-.005em;color:rgba(255,255,255,.62);line-height:1}.site-header .availability.av-home i{position:relative;width:8px;height:8px;flex:none;border-radius:50%;background:#03ff68;animation:avh-pulse 1.9s cubic-bezier(.4,0,.2,1) infinite}.site-header .availability.av-home i::after{content:none!important;display:none!important}@keyframes avh-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)}}.site-header .av-home .avh-role{position:relative;display:inline-block;height:1.7em;line-height:1.7em;vertical-align:-.5em;overflow:hidden;color:inherit;transition:width .5s cubic-bezier(.16,1,.3,1)}.site-header .av-home .avh-role>span{display:block;white-space:nowrap;transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .4s ease}.site-header .av-home .avh-role>span:not(.is-on){position:absolute;left:0;top:0;opacity:0;transform:translateY(100%)}.site-header .av-home .avh-role>span.is-off{transform:translateY(-100%)}.site-header .availability.av-home{max-width:var(--sw,340px);overflow:clip;overflow-clip-margin:12px;transition:max-width .8s cubic-bezier(.65,0,.35,1),margin .8s cubic-bezier(.65,0,.35,1),opacity .45s ease .25s}.site-header.is-compact .availability.av-home{max-width:0!important;margin-left:0!important;margin-right:auto!important;opacity:0!important;transition:max-width .8s cubic-bezier(.65,0,.35,1),margin .8s cubic-bezier(.65,0,.35,1),opacity .3s ease}@media (max-width:980px){.site-header .availability.av-home>span{display:inline-flex!important}}@media (max-width:520px){.site-header .availability.av-home .av-text>.i18n{display:none}}@media (prefers-reduced-motion:reduce){.site-header .availability.av-home i{animation:none}}

.case-nav-link img{transition:transform .9s cubic-bezier(.16,1,.3,1)}.case-nav-link:hover img{transform:scale(1.05)}html body .ai-tip{border-radius:16px!important}

@media (min-width:761px) and (max-width:900px){html body .site-header .desktop-nav{display:none!important}html body .site-header .mobile-actions{display:flex!important}html body .site-header .mobile-nav:not([hidden]){display:grid!important}html body .menu-shade:not([hidden]){display:block!important}}html body .site-header{flex-wrap:nowrap!important}

@media (max-width:900px){html body .site-header .mobile-nav{gap:0!important;padding:76px 20px 28px!important;background:#0b0b0b!important;border:0!important}html body .site-header .mobile-nav:not([hidden]){animation:mnav-in .38s cubic-bezier(.2,.8,.2,1) both}html body .site-header .mobile-nav:not([hidden])>*{animation:mnav-items .3s ease .12s both}@keyframes mnav-items{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}html body .site-header .mobile-nav>a{padding:10px 0!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;text-transform:none!important;color:#fff!important}html body .site-header .mobile-nav>a:hover{color:rgba(255,255,255,.7)!important}html body .site-header .mobile-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}html body .site-header .mobile-btns a{display:inline-flex!important;align-items:center;gap:8px;height:40px;padding:0 18px!important;border:0!important;border-radius:999px!important;font-family:var(--font-sans)!important;font-size:15px!important;font-weight:600!important;letter-spacing:0!important;text-transform:none!important;transition:background-color .25s,color .25s,box-shadow .25s}html body .site-header .mobile-btns .mobile-cv{background:#fff;color:#0b0b0b!important}html body .site-header .mobile-btns .mobile-cv:hover{background:transparent;color:#fff!important;box-shadow:inset 0 0 0 1.5px #fff}html body .site-header .mobile-btns .mobile-mail{color:#fff!important;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}html body .site-header .mobile-btns .mobile-mail:hover{background:#fff;color:#0b0b0b!important;box-shadow:none}html body .menu-shade{background:rgba(255,255,255,.18)!important;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}}@keyframes mnav-in{from{clip-path:inset(0 0 calc(100% - 52px) 0 round 26px)}to{clip-path:inset(0 0 0 0 round 24px)}}@media (max-width:600px){html body .site-header .availability.av-home{display:none!important}}@media (min-width:601px) and (max-width:1024px){html body .site-header.is-compact .availability.av-home{max-width:var(--sw,340px)!important;opacity:1!important;margin-left:-10px!important}html body .site-header.is-compact .availability.av-home .av-text,html body .site-header.is-compact .availability.av-home>span{display:inline-flex!important;opacity:1!important;max-width:none!important;visibility:visible!important}}@media (max-width:1024px){html body .site-header.is-compact{height:52px!important;min-height:52px!important;padding-top:0!important;padding-bottom:0!important}}@media (prefers-reduced-motion:reduce){html body .site-header .mobile-nav:not([hidden]){animation:none}}

html.lang-anim .i18n, html.lang-anim [data-only], html.lang-anim .intro .hero-title, html.lang-anim .intro .hero-id { transition: opacity .18s cubic-bezier(.4,0,.2,1) !important; }html.lang-out .i18n, html.lang-out [data-only], html.lang-out .intro .hero-title, html.lang-out .intro .hero-id { transition: opacity .07s linear !important; }html.lang-anim .nav-status, html.lang-anim .availability, html.lang-anim .role, html.lang-anim .avh-role { transition: none !important; }html.lang-out .i18n, html.lang-out [data-only], html.lang-out .intro .hero-title, html.lang-out .intro .hero-id { opacity: 0 !important; }

html body .back-to-top{display:none!important}html body .to-top{position:fixed;z-index:58;right:12px!important;bottom:12px!important;display:grid;place-items:center;width:40px!important;height:40px!important;border:0;border-radius:50%;background:#0b0b0b;color:#fff;cursor:pointer;box-shadow:0 10px 24px -12px rgba(0,0,0,.45);opacity:0;transform:translateY(16px) scale(.9);pointer-events:none;transition:opacity .35s ease,transform .5s cubic-bezier(.16,1,.3,1)}html body .to-top.is-on{opacity:1;transform:none;pointer-events:auto}html body .to-top svg{width:16px;height:16px;transition:transform .3s cubic-bezier(.16,1,.3,1)}html body .to-top:hover svg{transform:translateY(-2px)}@media (max-width:600px){html body .to-top{right:16px!important;bottom:16px!important}}html body .reel-toggle{height:40px;padding:0 18px!important;border:0!important;border-radius:999px!important;background:#0b0b0b!important;color:#fff!important;font-size:14px!important;font-weight:500;box-shadow:0 10px 24px -12px rgba(0,0,0,.45)!important;transition:background-color .25s,color .25s,box-shadow .25s!important}html body .reel-toggle:hover{background:#333!important;color:#fff!important}

@media (min-width:901px){html body .site-header.is-compact{height:52px!important;min-height:52px!important}}

html body .site-header .mobile-nav>a{font-size:28px!important;font-weight:500!important}@media (max-width:900px){html body .nav .nav-links>a:not(.nav-cv):not(.nav-mail){font-size:28px!important;font-weight:500!important}}html body .site-header .mobile-nav.has-current>a{position:relative;padding-left:22px!important}@media (max-width:900px){html body .nav .nav-links.has-current>a:not(.nav-cv):not(.nav-mail){position:relative;padding-left:22px!important}}html body .site-header .mobile-nav>a.is-current::before,html body .nav .nav-links>a.is-current::before{content:'';position:absolute;left:0;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:currentColor}@media (min-width:901px){html body .nav .nav-links>a.is-current::before{content:none}}

@media (min-width:901px){html body .site-header .desktop-nav a:not(.cv-link),html body .nav .nav-links>a:not(.nav-cv):not(.nav-mail){color:#fff!important;opacity:1!important;position:relative}html body .site-header .desktop-nav a:not(.cv-link)::after,html body .nav .nav-links>a:not(.nav-cv):not(.nav-mail)::after{content:'';display:block!important;position:absolute;left:50%;bottom:3px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:#fff;opacity:0;transform:scale(.4);transition:opacity .25s ease,transform .35s cubic-bezier(.2,.8,.2,1)}html body .site-header .desktop-nav a.nav-link-active::after,html body .site-header .desktop-nav a.is-current::after,html body .site-header .desktop-nav a[aria-current='page']::after,html body .nav .nav-links>a:not(.nav-cv):not(.nav-mail)[aria-current='page']::after{opacity:1;transform:none}}

@media (min-width:901px){html body .site-header .desktop-nav a:not(.cv-link),html body .nav .nav-links>a:not(.nav-cv):not(.nav-mail){font-family:var(--font-display)!important;font-feature-settings:'ss02' 1!important;font-weight:600!important;letter-spacing:0!important}}

html body header.nav, html body header.nav *, html body .site-header, html body .site-header *{font-family:var(--font-display)!important;font-feature-settings:'ss02' 1!important}html body header.nav svg, html body header.nav svg *, html body .site-header svg, html body .site-header svg *{font-family:inherit}html body header.nav .av-pre{position:relative;top:-1px}html body header [data-lang-btn]{position:relative;top:.5px}@media (min-width:901px){html body header.nav .nav-links>a,html body header.nav .nav-name,html body header.nav .nav-status,html body .site-header .desktop-nav a,html body .site-header .site-mark,html body .site-header .availability{white-space:nowrap!important}}html body header.nav .nav-status .dot,html body .site-header .availability>i{position:relative;top:-.3px}html body header.nav .nav-status, html body header.nav .nav-status *, html body .site-header .availability, html body .site-header .availability *{font-weight:600!important}@media (min-width:901px){html body header.nav .nav-name,html body header.nav .nav-status,html body header.nav .nav-status *,html body header.nav .nav-links>a:not(.nav-cv):not(.nav-mail),html body header.nav .nav-links>a *,html body header.nav .nav-links>a.nav-cv,html body header.nav [data-lang-btn],html body header.nav .lang span,html body .site-header .site-mark,html body .site-header .availability,html body .site-header .availability *,html body .site-header .desktop-nav a,html body .site-header .desktop-nav a *,html body .site-header [data-lang-btn],html body .site-header .lang span{font-size:15px!important}}

@media (min-width:1100px){html[lang='de'] body header.nav:not(.is-compact),html[lang='de'] body .site-header:not(.is-compact){min-width:899px!important}html[lang='en'] body header.nav:not(.is-compact),html[lang='en'] body .site-header:not(.is-compact){min-width:836px!important}html body header.nav:not(.is-compact) .nav-id,html body .site-header:not(.is-compact) .availability{margin-right:auto!important}html body .site-header{justify-content:flex-start!important;box-sizing:border-box!important}}

@media (min-width:901px){html body header.nav .nav-links>a:not(.nav-cv):not(.nav-mail):hover,html body .site-header .desktop-nav>a:not(.cv-link):hover{background:transparent!important;color:rgba(255,255,255,.7)!important}html body .site-header .desktop-nav>a:not(.cv-link)::after,html body .site-header .desktop-nav>a:not(.cv-link):hover::after{right:auto!important;left:50%!important;width:4px!important;height:4px!important}html body .site-header .desktop-nav>a:not(.cv-link):not(.nav-link-active):not(.is-current):hover::after{opacity:0!important}}

.fr-rot{position:relative;display:inline-block;height:1.4em;line-height:1.4em;overflow:hidden;vertical-align:top;transition:width .5s cubic-bezier(.16,1,.3,1)}.fr-rot>span{display:block;line-height:1.4em;white-space:nowrap;transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .4s}.fr-rot>span:not(.is-on){position:absolute;left:0;top:0;opacity:0;transform:translateY(100%)}.fr-rot>span.is-off{transform:translateY(-100%)}.fr-dot{position:relative;display:inline-block;width:8px;height:8px;margin:0 10px 0 2px;border-radius:50%;background:#03ff68;vertical-align:.08em}.fr-dot::after{content:'';position:absolute;inset:0;border-radius:50%;background:#03ff68;animation:fr-puls 1.9s ease-out infinite}@keyframes fr-puls{0%{transform:scale(1);opacity:.7}100%{transform:scale(3);opacity:0}}@media (prefers-reduced-motion: reduce){.fr-rot>span{transition:none}.fr-dot::after{animation:none}}

@media (max-width:760px){html body .reel-toggle{gap:8px;transition:background-color .25s,color .25s,box-shadow .25s,padding .35s cubic-bezier(.16,1,.3,1),gap .35s cubic-bezier(.16,1,.3,1)!important}html body .reel-toggle .i18n{display:inline-block;max-width:12em;overflow:hidden;white-space:nowrap;transition:max-width .35s cubic-bezier(.16,1,.3,1),opacity .2s ease}html body .reel-controls.is-stuck .reel-toggle{padding:0 13px!important;gap:0}html body .reel-controls.is-stuck .reel-toggle .i18n{max-width:0;opacity:0}}

/* 25.10.: Unterseiten-Leiste deckungsgleich mit der Startseite (andere Bauweise, bis 1,1 px Versatz – beim Seitenwechsel rutschte alles minimal) */
@media (min-width:901px){html body .site-header .site-mark{position:relative;top:-.25px;margin-right:-.68px}html body .site-header .av-home .av-text{gap:3.28px!important}html body .site-header .desktop-nav>a:not(.cv-link){top:.2px}html body .site-header .cv-link{position:relative;top:.25px;padding:0 15.5px 0 16.5px!important}html body .site-header .lang-toggle>span{font-size:15px!important;position:relative;top:.25px}html body .site-header [data-lang-btn]{top:.4px!important}}
/* 25.10.: rechts nach »EN« derselbe Abstand wie links vor »Victoria« (20 px statt 16 px) */
@media (min-width:901px){html body header.nav,html body .site-header{padding-right:12px!important}}
/* 25.10.: kleine Leiste (beim Scrollen) – zwischen »Victoria Schmidt« und dem ersten Link derselbe Abstand wie zwischen den Links (28 px) */
@media (min-width:1025px){html body header.nav .nav-links,html body .site-header .desktop-nav{transition:margin-left .8s cubic-bezier(.65,0,.35,1)}html body header.nav.is-compact .nav-links{margin-left:-9.1px!important}html body .site-header.is-compact .availability.av-home{margin-right:-28px!important}html body .site-header.is-compact .desktop-nav{margin-left:-1.32px}}
/* 25.10.: alle Abstände in der Leiste gleich (28 px von Wort zu Wort, auch »Playground« → CV-Knopf); »Open to roles in« → Rolle etwas luftiger (6 px) */
@media (min-width:901px){html body header.nav .nav-links .nav-cv,html body .site-header .cv-link{margin-left:12px!important}html body header.nav .nav-status .role{margin-left:2.8px}html body .site-header .av-home .av-text{gap:5.98px!important}}
/* 25.10.: Rolle sitzt in jedem Browser auf derselben Grundlinie wie »Offen für Rollen in« (Safari setzte sie tiefer, ein Strich der
   nächsten Rolle blitzte darüber) – abgeschnitten wird per clip-path, das die Grundlinie nicht verändert */
html body .nav .nav-status .role,html body .site-header .av-home .avh-role{overflow:visible!important;clip-path:inset(0);vertical-align:baseline!important}
html body header.nav .av-pre{top:0!important}
/* 25.10.: Handy und Tablet – Inhalt mittig auf der Leiste (Startseite saß 2 px zu hoch), Status wie auf der Startseite,
   Menü-Knopf auch auf den Unterseiten (fehlte zwischen 761 und 900 px) */
@media (max-width:900px){
  html body header.nav .nav-status .role{margin-left:3px}
  html body .site-header .av-home .av-text{gap:5.98px!important}
  html body .site-header .availability.av-home{margin-left:-4.89px!important}
  html body .site-header .menu-toggle{display:block!important}
}
/* 25.10.: Tablet – Leiste nur so breit wie ihr Inhalt, mittig wie auf dem Desktop; mit offenem Menü wieder ganz breit */
@media (min-width:601px) and (max-width:900px){
  html body header.nav:not([data-open]):not(.menu-zu),html body .site-header:not(:has(.menu-toggle[aria-expanded="true"])){left:50%!important;right:auto!important;width:max-content!important;max-width:calc(100vw - 24px)!important;transform:translateX(-50%)!important;justify-content:flex-start!important}
  html body header.nav:not([data-open]):not(.menu-zu) .nav-links{width:0!important;min-width:0!important;flex:0 0 0!important;overflow:hidden}
  html body header.nav.nav .lang-bar{margin-left:23.7px!important;margin-right:10px!important}
  html body .site-header:not(:has(.menu-toggle[aria-expanded="true"])) .availability.av-home{margin-right:9.7px!important}
}
/* 25.10.: Menü-Knopf der Unterseiten wie auf der Startseite (drei Linien 14 × 1,5 px, 4 px Abstand, Knopf 38 px) */
@media (max-width:900px){
  html body .site-header .menu-toggle{width:38px;height:38px;padding:0!important;display:grid!important;place-items:center;top:0!important;color:#fff}
  html body .site-header .menu-toggle svg{display:none}
  html body .site-header .menu-toggle::before{content:'';display:block;width:14px;height:1.5px;background:currentColor;box-shadow:0 -4px 0 currentColor,0 4px 0 currentColor}
}
/* 25.10.: Handy/Tablet – rechter Rand und DE/EN wie auf der Startseite; zusammengezogen bleibt der Inhalt in der Mitte */
@media (max-width:900px){
  html body header.nav,html body .site-header{padding-right:7px!important}
  html body .site-header .mobile-actions .lang-toggle{margin-right:-2px}
}
/* 25.10.: Auf- und Zuziehen beim Scrollen wie auf der Live-Seite – die Mindestbreite der großen Leiste wächst und schrumpft mit
   (sprang vorher sofort auf volle Breite, der Status »schrieb« sich dann in die feste Leiste hinein) */
@media (min-width:1100px){
  html body header.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),min-width .8s cubic-bezier(.65,0,.35,1)!important}
  html body header.nav.is-compact{min-width:0px!important}
}
/* 25.10.: Rollenwechsel ruhiger – die Wörter liegen immer auf einer eigenen Ebene (Safari zeichnete sie während der Bewegung
   anders und »sprang« danach im Buchstabenabstand), und */
html body header.nav .role>span{will-change:transform,opacity;-webkit-backface-visibility:hidden;backface-visibility:hidden}
/* 25.10. (abends): Handy und Tablet – in jedem Zustand (oben, gescrollt, Menü offen) derselbe Innenabstand oben (7 px) und
   dieselbe erste Zeile (38 px, Menü-Knopf), die Zeile sitzt dadurch immer genau in der Mitte; die Leiste wächst und
   schrumpft mit dem Menü (keine feste Höhe – sonst wurde der Inhalt beim Schließen nach oben herausgeschoben) */
@media (max-width:900px){
  html body header.nav.nav,html body header.nav.nav:not([data-open]),html body header.nav.is-compact.nav{height:auto!important;min-height:52px!important;padding-top:7px!important;row-gap:0!important;align-items:center!important;align-content:flex-start!important}
  html body header.nav.nav:not([data-open]),html body header.nav.nav.is-compact:not([data-open]){padding-bottom:7px!important}
  html body header.nav>.nav-id,html body header.nav>.lang-bar,html body header.nav>.nav-menu{max-height:none!important}
}
/* 25.10. (abends): grüner Punkt genau auf der Mitte der Kleinbuchstaben (x-Höhe) – gemessen, Desktop 15 px, Tablet 14 px Schrift */
html body header.nav .nav-status .dot{position:relative;top:.35px!important}
@media (max-width:900px){html body header.nav .nav-status .dot{top:.47px!important}}
/* 25.10. (abends): Tablet – das offene Menü behält die Breite der Leiste und wächst nur nach unten */
@media (min-width:601px) and (max-width:900px){html body header.nav[data-open],html body header.nav.menu-zu{left:50%!important;right:auto!important;transform:translateX(-50%)!important;width:var(--nav-w,calc(100vw - 24px))!important;max-width:calc(100vw - 24px)!important}}
/* 25.10. (abends): Menü auf Handy und Tablet – eine einzige Bewegung (die Leiste wächst weich nach unten, aus c.css),
   etwas ruhiger getaktet; die obere Zeile sitzt offen wie geschlossen genau in der Mitte der ersten 52 px */
@media (max-width:900px){
  html body header.nav .nav-links{transition:max-height .6s cubic-bezier(.33,1,.68,1),opacity .3s ease,visibility 0s linear .6s!important}
  html body header.nav[data-open] .nav-links{transition:max-height .6s cubic-bezier(.33,1,.68,1),opacity .45s ease .1s,visibility 0s!important}
  html body header.nav .nav-links>*{transition:transform .6s cubic-bezier(.33,1,.68,1)!important}
}
/* Handy/Tablet: keine Übergänge auf Höhe und Innenabstand der Leiste (ließen die Zeile nach dem Schließen nachrutschen) */
@media (max-width:900px){html body header.nav{transition:none!important}}
/* 25.10. (abends): beim Ändern der Fenstergröße keine Übergänge in der Leiste (leiste.js setzt is-resizing) */
html body header.nav.is-resizing,html body header.nav.is-resizing *,html body header.nav.is-resizing *::before,html body header.nav.is-resizing *::after{transition:none!important;animation:none!important}
/* 25.10. (abends): Tablet – die Leiste sieht oben, gescrollt und mit offenem Menü gleich aus (vorher rückte der Status gescrollt
   um 5,8 px, die Leiste wurde länger; offen rückten DE/EN und der Menü-Knopf) */
@media (min-width:601px) and (max-width:900px){
  html body header.nav.nav .nav-status,html body header.nav.nav.is-compact .nav-status{margin-left:-5.8px!important;margin-right:0!important;max-width:var(--sw,none)!important;opacity:1!important}
  html body header.nav.nav.is-compact .nav-status>.av{opacity:1!important}
  html body header.nav.nav,html body header.nav.nav[data-open]{justify-content:flex-start!important;padding-left:20px!important;padding-right:7px!important}
}
/* 25.10. (abends, Victoria): grüner Punkt auf der optischen Mitte der Zeile (zwischen Mitte der Kleinbuchstaben und der
   Großbuchstaben) – auf der reinen x-Höhe wirkte er neben »Offen für Rollen … Product Design« zu tief */
html body header.nav .nav-status .dot{top:-.35px!important}
@media (max-width:900px){html body header.nav .nav-status .dot{top:-.24px!important}}
/* 25.10. (abends, Victoria): kein weißer Streifen unter dem Footer – (1) die aufsteigenden Footer-Zeilen verlängern die Seite nicht,
   (2) beim Nachfedern am Seitenende (Safari, iPhone, iPad) ist unten Schwarz wie der Footer, oben bleibt Weiß */
html body .site-footer{overflow:clip}
html body .site-footer{box-shadow:0 100vh 0 100vh #0b0b0b} /* schwarze Fläche unter dem Footer – nur beim Nachfedern sichtbar, verlängert die Seite nicht */
/* bis zum ersten Bild keine Übergänge am Punkt unter den Menüpunkten (leiste.js setzt nav-ready) */
html:not(.nav-ready) body header.nav .nav-links>a::after{transition:none!important}
/* 25.10. (abends, Victoria): Abstand »Offen für neue Rollen …« → »Sag hallo« wächst mit der Größe von »Sag hallo« (Desktop wie bisher,
   iPad und Handy entsprechend kleiner – vorher überall fest 220 px) */
html body .contact-banner>p{margin-bottom:max(64px,min(220px,15.3vw))!important}
/* 25.10. (abends): Handy-Menü – Punkt und Einrückung auch für »Projekte« auf der Startseite (dort als aria-current markiert) */
@media (max-width:900px){
  html body .nav .nav-links:has(>a[aria-current="page"])>a:not(.nav-cv):not(.nav-mail){position:relative;padding-left:22px!important}
  html body .nav .nav-links>a[aria-current="page"]:not(.nav-cv):not(.nav-mail)::before{content:'';position:absolute;left:0;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:currentColor}
}
/* 25.10. (abends, Victoria): kein Nachfedern über die Seite hinaus (Chrome, Safari Mac, iPhone/iPad ab iOS 16) – kein weißer Bereich
   mehr unter dem Footer; ältere Browser: leiste.js färbt den Hintergrund unten schwarz */
html,html body{overscroll-behavior-y:none}
/* 25.10. (Victoria): Footer auf dem Handy – Impressum & Datenschutz und © untereinander, linksbündig */
/* 26.10.: Impressum/© auf dem Handy wieder nebeneinander (Victoria) – frühere Fassung untereinander: */ /* @media (max-width:600px){html body .site-footer .site-footer-legal{flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;gap:10px!important;text-align:left!important}html body .site-footer .site-footer-legal>*{margin-left:0!important;text-align:left!important}} */
/* 25.10. (Victoria): Ecken auf dem Handy einheitlich (abgeglichen mit apple.com: eine Rundung je Elementart) –
   18 px für Bilder und Flächen in voller Breite, 12 px für alles in halber Breite und kleiner. Mockups, Pillen, Kreise bleiben. */
@media (max-width:760px){html:root{--r-xl:18px;--r-lg:18px;--r-md:18px}
html body .pj-chap>.rise-figure>img,html body .pj-chap>.rise-figure>.rise-video{border-radius:16px!important;clip-path:inset(0 round 16px)!important}
html body .or-dec>div{border-radius:16px!important}
html body .ai-tip{border-radius:16px!important}
html body[data-seite="visual-art"] .reel-card,html[data-seite="visual-art"] body .reel-card{border-radius:10px!important;clip-path:inset(0 round 10px)!important}}
@media (max-width:760px){html:root body .pj-chap .or-dec>div,html:root body .long-version .dabei-quote,html:root body .long-version .dabei-learning-grid>li,html:root body .long-version .case-duo>div,html:root body .long-version .open-card{border-radius:16px!important}html body p.ai-line .ai-tip,html body .ai-line>.ai-tip{border-radius:16px!important}}

/* 25.10. (Victoria): auf dem Handy überall derselbe Abschnittsabstand (72 px) – auch vor/nach der Projektnavigation
   und vor dem Kontaktbanner (vorher 96 bzw. 128 px bei Dabei!) */
@media (max-width: 760px) {
  html body .case-nav.case-nav { margin-top: 72px !important; margin-bottom: 72px !important; }
  html body .contact-banner.contact-banner, html body main > .contact-banner.contact-banner { margin-top: 72px !important; }
}

/* 26.10. (Victoria): iPhone-Safari – Großansicht (Lightbox) an der sichtbaren Höhe mit eingeblendeter Adressleiste ausrichten (svh),
   sonst wird das Bild unten abgeschnitten; svh ändert sich beim Scrollen nicht, nichts springt */
html body .zoom-stage img { max-height: calc(100svh - 9rem); }
html body .zoom-panel { max-height: calc(100svh - 8rem); }

/* 26.10. (Victoria): »Über mich« – die Ü-Punkte ragen bei Zeilenhöhe 1 über den Textkasten; Safari schneidet sie beim Einblenden
   (Unschärfe-Filter) am Kasten ab. Etwas Luft oben im Kasten, gleich viel Außenabstand zurück – an der Lage ändert sich nichts. */
html body .section-kicker.section-kicker { padding-top: .16em; margin-top: -.16em; }

/* 26.10. (Victoria): Projektnavigation unten – bei einem zweizeiligen Namen (»Bundesregister Nachhaltigkeit«) rutschte dessen Bild tiefer.
   Kacheln unten bündig ausrichten: die Bilder stehen auf einer Höhe, der kürzere Name sitzt direkt über seinem Bild */
html body .case-nav.case-nav { align-items: flex-start !important; }
/* 26.10. (Victoria): Name unter dem Bild – die Bilder stehen immer in einer Reihe, ein zweizeiliger Name stört dann nicht mehr */
html body .case-nav .case-nav-link .case-nav-thumb { order: -1; }
html body .case-nav .case-nav-link.is-next { align-items: flex-end; text-align: right; }
/* 26.10.: Kacheln der Projektnavigation sind gleich groß – helle Titelbilder (z. B. Jack Rabbit) verschwammen aber mit der Seite und wirkten
   schmaler. Feine Kante, damit jede Kachel als gleich große Fläche lesbar ist */
html body .case-nav .case-nav-thumb { outline: 1px solid rgba(0, 0, 0, .07); outline-offset: -1px; }

/* 26.10.: kein grauer Kasten beim Antippen (iPhone) – überall, nicht nur bei Links und Knöpfen */
html { -webkit-tap-highlight-color: transparent; }

/* 26.10. (Victoria): Abschluss auf dem Handy
   – Pfeil bei »Sag hallo« größer und kräftiger, passend zur Schrift
   – »Sag hallo« etwas Luft zur schwarzen Kante, »Lass uns in Kontakt bleiben« näher an die Kante
   – Impressum & Datenschutz links, © rechts in einer Zeile */
@media (max-width: 760px) {
  html body .contact-banner #say-hello svg { width: .72em !important; height: .72em !important; stroke-width: 1.7 !important; }
  html body .contact-banner { padding-bottom: 24px !important; }
  html body .site-footer.site-footer { padding-top: 24px !important; }
  html body .site-footer.site-footer > p:first-child { margin-top: 0 !important; align-self: start !important; min-height: 0 !important; }
  html body .site-footer.site-footer { grid-template-rows: none !important; grid-auto-rows: auto !important; align-content: start !important; min-height: 0 !important; }
  html body .site-footer .site-footer-legal { display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: baseline !important; gap: 12px !important; }
  html body .site-footer .site-footer-legal > * { font-size: 11px !important; letter-spacing: .05em !important; white-space: nowrap; }
}

/* 26.10. (Victoria: KI-Feld schließt beim zweiten Tippen nicht): auf Touch-Geräten bleibt nach dem Tippen »:hover« hängen –
   dort öffnet nur noch »is-open« das Feld. Auf- und Zuklappen weich: das Feld gleitet ein Stück nach oben und blendet aus */
html body .ai-line .ai-tip { transition: opacity .3s cubic-bezier(.4,0,.2,1), transform .36s cubic-bezier(.16,1,.3,1), visibility 0s linear .36s !important; transform: translateY(-10px) !important; }
html body .ai-line.is-open .ai-tip, html body .ai-note:focus-visible + .ai-tip { transform: none !important; transition: opacity .3s cubic-bezier(.4,0,.2,1), transform .36s cubic-bezier(.16,1,.3,1), visibility 0s !important; }
@media (hover: hover) { html body .ai-line:hover .ai-tip { transform: none !important; transition: opacity .3s cubic-bezier(.4,0,.2,1), transform .36s cubic-bezier(.16,1,.3,1), visibility 0s !important; } }
@media (hover: none) { html body .ai-line:hover:not(.is-open) .ai-tip { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } }
@media (prefers-reduced-motion: reduce) { html body .ai-line .ai-tip { transition: none !important; } }

/* 26.10. (Victoria): Decision Journey passt auf dem Handy wieder in die Breite; Tippen öffnet die Großansicht. Dort liegt sie in
   voller Bildschirmbreite und lässt sich seitlich durchwischen (vorher lief die Fläche rechts aus dem Bildschirm) */
@media (max-width: 760px) {
  html body .zoom-box { padding: 72px 0 40px !important; }
  html body .zoom-box .zoom-stage { width: 100%; min-width: 0; }
  html body .zoom-box .zoom-panel { box-sizing: border-box; width: 100%; max-width: 100% !important; max-height: calc(100svh - 140px) !important; padding: 28px 20px !important; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  html body .zoom-box .zoom-panel svg { width: 1000px !important; }
}

/* 26.10. (Victoria): keine Linie mehr über den zwei Projekten der Projektnavigation (Vor/Zurück) */
html body .case-nav.case-nav { border-top: 0 !important; }

/* 26.10. (Victoria): Zähler »1 / 4« in den Großansichten als Pille, wie die übrigen Labels im System */
html body .lightbox-count { border-radius: 999px !important; padding: 7px 14px !important; }
html body .lightbox-nav { border-radius: 50% !important; } /* Pfeile rund wie der Schließen-Knopf */

/* 26.10. (Victoria): Projekttitel in der Projektnavigation (Vor/Zurück) in der Pangram wie die übrigen Titel */
html body .case-nav .case-nav-link > span { font-family: "Pangram Sans", Inter, sans-serif !important; font-feature-settings: "ss02" 1; font-weight: 500 !important; font-size: var(--fs-card-title, 20px) !important; line-height: var(--lh-card-title, 1.3) !important; letter-spacing: -.01em !important; } /* 26.10.: Größe wie die Titelstufe, Schnitt Medium (Victoria: Semibold war in der Navigation zu kräftig) */

/* 26.10. (Victoria: »KI-Feld schließt noch stockelig«): das Feld zieht sich beim Schließen sanft zum gelben Label zurück
   (leicht kleiner, ein paar Pixel nach oben, ausblenden) statt nur zu verblassen; eigene Grafik-Ebene, damit der große Schatten
   nicht bei jedem Bild neu gezeichnet wird */
html body .ai-line .ai-tip { will-change: opacity, transform; backface-visibility: hidden; transform-origin: 28px 0 !important; transform: translateY(-6px) scale(.96) !important; transition: opacity .28s cubic-bezier(.4,0,.2,1), transform .34s cubic-bezier(.4,0,.2,1), visibility 0s linear .34s !important; }
html body .ai-line.is-open .ai-tip, html body .ai-note:focus-visible + .ai-tip { transform: none !important; transition: opacity .3s cubic-bezier(.16,1,.3,1), transform .42s cubic-bezier(.16,1,.3,1), visibility 0s !important; }
@media (hover: hover) { html body .ai-line:hover .ai-tip { transform: none !important; transition: opacity .3s cubic-bezier(.16,1,.3,1), transform .42s cubic-bezier(.16,1,.3,1), visibility 0s !important; } }
@media (prefers-reduced-motion: reduce) { html body .ai-line .ai-tip { transition: none !important; transform: none !important; } }

/* 26.10. (Victoria: »die Tools im KI-Feld sind sehr groß«): Tool-Zeile kleiner und grau, mit etwas mehr Abstand zum Text darüber */
html body .ai-tip .ai-tip-tools { margin-top: var(--gap-text-extra, 12px) !important; font-size: 13px !important; line-height: 1.45 !important; color: var(--text-secondary, #6b6b6b) !important; }

/* 26.10. (Victoria): feste Abstände für die Überschriften-Hierarchie, überall gleich (Dabei! und alle Projektseiten):
   kleines Label (»Kernlösung«, »Primäre Kennzahl«, »Vorher«) → Überschrift in Pangram → Text */
:root { --gap-label-title: 16px; --gap-title-text: 6px; --gap-text-extra: 12px; --gap-block: 48px; }
@media (min-width: 761px) { :root { --gap-block: 64px; } }
/* 26.10. (Victoria): Schriftstufen dazu, überall gleich – Titel Pangram 20 px Semibold, Text Inter 16 px, Zeile 1,5 (Handy und Desktop) */
:root { --fs-card-title: 20px; --lh-card-title: 1.3; --fs-card-text: 16px; --lh-card-text: 1.5; } /* kleinere Variante: --fs-card-title: 18px */
/* --gap-text-extra: Text → Zusatzzeile (Pfeilzeile »→ …«, Tools) · --gap-block: von Entscheidung zu Entscheidung (Handy 48, Desktop 64) */

/* 26.10. (Victoria: »das Video im Laptop hat runde Ecken«): alles, was im Laptop-Mockup als Bildschirminhalt läuft, bleibt eckig –
   der Bildschirm selbst gibt die Form vor (die runden Ecken gelten nur für freistehende Bilder und Karten) */
html body .laptop-screen :is(img, video, canvas, picture), html body .laptop-screen.laptop-screen > * { border-radius: 0 !important; }
/* 27.10. (Victoria: »Aufsteigezeit wie Apple«): kürzerer Weg und einheitliche Zeit auf allen Unterseiten (Regeln aus Entwurf 1 style.css: 64 / 40 / 24 / 16 px, 1,2 s) */
html.rv body [data-rv]{translate:0 32px}html.rv body [data-rv="pic"]{scale:.97}html.rv body [data-rv="text"]{translate:0 24px}html.rv body [data-rv="title"]{translate:0 16px}html.rv body [data-rv="meta"]{translate:0 12px}html.rv body [data-rv].is-in{translate:0 0;scale:1}html.rv.rv-ready body [data-rv]{transition:opacity .6s cubic-bezier(0,0,.58,1),translate 1s cubic-bezier(.33,1,.68,1),scale 1s cubic-bezier(.33,1,.68,1),filter .8s cubic-bezier(.4,0,.2,1);transition-delay:var(--rvd,0s)}
/* 27.10. (Victoria: Rollenwechsel »sehr hektisch« → »ruhig gleiten, aber minimal schneller«): halber Weg, weich an- und auslaufend, .75 s (vorher ganzer Weg, steile Kurve .6 s) */
html body header.nav .role>span{transition:transform .75s cubic-bezier(.65,0,.35,1),opacity .6s cubic-bezier(.65,0,.35,1)!important}html body header.nav .role>span:not(.is-on){transform:translateY(55%)!important}html body header.nav .role>span.is-off{transform:translateY(-55%)!important}