/* APRYON v5 */
@font-face { font-family: "Source Serif"; src: url("/assets/fonts/SourceSerif4-Variable-latin.woff2") format("woff2"); font-weight: 200 500; font-display: swap }
@font-face { font-family: "Instrument Sans"; src: url("/assets/fonts/InstrumentSans-Variable-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap }
@font-face { font-family: "Serif Fallback"; src: local("Georgia"); size-adjust: 96%; ascent-override: 92%; descent-override: 26%; line-gap-override: 0% }
@font-face { font-family: "Sans Fallback"; src: local("Arial"); size-adjust: 99%; ascent-override: 96%; descent-override: 25%; line-gap-override: 0% }

:root {
  --white: #FFFFFF; --ground: #FBFBFA; --tint: #F2F4F7; --line: #E3E6EB;
  --ink: #15181E; --text: #2A2E36; --soft: #5D6675; --mute: #79849A;
  --deep: #17223A; --b1: #1F2E4F; --b2: #2D4470; --b3: #456496; --b4: #6E8BBC; --b5: #9DB2D6; --b6: #C6D3E7; --b7: #E3DBDF; --b8: #FADDC9;
  --dawn: #FFD8BC;
  --serif: "Source Serif", "Serif Fallback", Georgia, serif;
  --sans: "Instrument Sans", "Sans Fallback", Arial, sans-serif;
  --m: clamp(16px, 3.34vw, 48px); --gap: clamp(12px, 1.4vw, 20px); --r: clamp(20px, 2.1vw, 30px);
  --section: clamp(88px, 10.5vw, 160px);
  --d1: clamp(40px, 5vw, 76px); --d2: clamp(34px, 4.4vw, 64px); --d3: clamp(26px, 2.5vw, 36px);
  --lead: clamp(19px, 1.1rem + .3vw, 22px); --body: 17px; --small: 14px;
  --out: cubic-bezier(.23, 1, .32, 1);
}
* { box-sizing: border-box; margin: 0 }
html { -webkit-text-size-adjust: 100%; background: var(--white) }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth } }
body { background: var(--white); color: var(--text); font: 400 var(--body)/1.55 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip }
::selection { background: var(--b6); color: var(--ink) }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px } img, svg, canvas { display: block } ul { list-style: none; padding: 0 }
:focus-visible { outline: 2px solid var(--b3); outline-offset: 3px; border-radius: 6px }
.skip { position: fixed; left: var(--m); top: -80px; z-index: 40; background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 99px }
.skip:focus { top: 12px }

h1, h2, .d { font-family: var(--serif); font-weight: 300; color: var(--ink); letter-spacing: -.022em; line-height: 1.03; text-wrap: balance; font-optical-sizing: auto }
h1 { font-size: var(--d1) } h2 { font-size: var(--d2) } h2 span, h1 span { display: block } .dim { color: var(--mute) } .nb { white-space: nowrap; display: inline !important }
h3 { font-family: var(--serif); font-weight: 400; font-size: var(--d3); letter-spacing: -.016em; line-height: 1.1; color: var(--ink) }
.lead { font-size: var(--lead); line-height: 1.42; color: var(--ink); letter-spacing: -.004em }
.wrap { padding-inline: var(--m) }
.block, .talk { scroll-margin-top: calc(112px - var(--section)) }

.pill { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 22px; border-radius: 99px; background: var(--ink); color: #fff; font-size: 15px; font-weight: 500; text-decoration: none; transition: background-color 200ms ease-out, transform 160ms ease-out }
.pill svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform 200ms var(--out) }
.pill:active { transform: scale(.97) }
@media (hover: hover) and (pointer: fine) { .pill:hover { background: var(--b2) } .pill:hover svg { transform: translateX(3px) } }

.nav { position: sticky; top: 0; z-index: 30; background: var(--white); display: flex; justify-content: space-between; align-items: center; gap: 24px; height: 72px; padding-inline: var(--m); border-bottom: 1px solid transparent; transition: border-color 200ms ease-out }
.nav.is-stuck { border-color: var(--line) }
.logo { display: block; width: clamp(116px, 9.2vw, 132px) } .logo svg { width: 100%; height: auto; fill: var(--ink) }
.nav ul { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 34px); font-size: var(--small) }
.nav a:not(.pill):not(.logo) { position: relative; text-decoration: none; color: var(--soft); transition: color 200ms ease-out; padding: 6px 0 }
.nav a[aria-current="true"] { color: var(--ink) }
@media (hover: hover) and (pointer: fine) { .nav a:not(.pill):not(.logo):hover { color: var(--ink) } }
.nav .pill { height: 36px; padding: 0 16px; font-size: var(--small) }
.menu-btn { display: none; background: none; border: 0; color: var(--ink); font: 500 15px var(--sans); padding: 8px 0 8px 12px; cursor: pointer }

.hero { padding: 0 var(--m) }
.panel { position: relative; overflow: hidden; border-radius: var(--r); isolation: isolate }
.hero .panel { height: calc(100svh - 72px - var(--m)); min-height: 520px; background: var(--tint); display: flex; align-items: flex-end }
.panel canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1 }
.fallback { position: absolute; right: 5%; top: 50%; transform: translateY(-50%); width: 40%; height: auto; max-height: 84%; fill: var(--b6); z-index: -2 }
.js .fallback { display: none } .no-gl .fallback { display: block }
.say { padding: clamp(28px, 4.4vw, 64px); max-width: 60% }
@media (max-aspect-ratio: 105/100) {
  .hero .panel { height: auto; min-height: calc(100svh - 72px - var(--m)) }
  .say { max-width: none; padding-top: calc((100vw - 2 * var(--m)) * .78 + 24px) }
  .fallback { top: 6vw; right: 6%; width: 62%; transform: none; max-height: none }
}
.say h1 { margin-bottom: clamp(16px, 1.6vw, 24px) }
.say .lead { max-width: 27em; margin-bottom: clamp(20px, 2vw, 30px) }

.block { padding: var(--section) var(--m) 0 }
.split { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap) }
.who h2 { grid-column: 1 / 10 }
.who .say-big { grid-column: 1 / 12; margin-top: clamp(36px, 4.4vw, 64px); font: 350 clamp(32px, 3.9vw, 56px)/1.16 var(--serif); letter-spacing: -.02em; color: var(--ink); text-wrap: balance }
.who .more { grid-column: 1 / 13; margin-top: clamp(36px, 4.4vw, 64px); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap) }
.who .more p:first-child { grid-column: 1 / 7 } .who .more p:last-child { grid-column: 7 / 12 }
/* Worte werden beim Scrollen gelesen: voraus blass, am Lesepunkt blau, danach Tinte */
.js .kara .w { color: #DDE2EA; transition: color 180ms ease-out }
.js .kara .w.now { color: #2B5BD7 }
.js .kara .w.lit { color: var(--ink) }

.exp h2 { margin-bottom: clamp(32px, 3.6vw, 52px) }
.strata { display: flex; flex-direction: column; height: clamp(440px, 40vw, 600px); border-radius: var(--r); overflow: hidden }
.strata li { flex: 1 1 0; min-height: 0; display: flex; align-items: center; padding: 0 clamp(20px, 2.8vw, 40px); background: var(--c); color: var(--t, #fff); font-family: var(--serif); font-size: var(--d3); font-weight: 300; letter-spacing: -.016em; transition: flex-grow 300ms var(--out) }
.strata li:nth-child(1) { --c: var(--deep) } .strata li:nth-child(2) { --c: var(--b2) } .strata li:nth-child(3) { --c: var(--b3) } .strata li:nth-child(4) { --c: var(--b4); --t: var(--ink) }
.strata li:nth-child(5) { --c: var(--b5); --t: var(--ink) } .strata li:nth-child(6) { --c: var(--b6); --t: var(--ink) } .strata li:nth-child(7) { --c: var(--b7); --t: var(--ink) } .strata li:nth-child(8) { --c: var(--b8); --t: var(--ink) }
@media (hover: hover) and (pointer: fine) { .strata:hover li { flex-grow: .9 } .strata li:hover { flex-grow: 1.7 } }

.head2 { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: end; margin-bottom: clamp(32px, 3.6vw, 52px) }
.head2 h2 { grid-column: 1 / 8 } .head2 p { grid-column: 8 / 13; max-width: 30em }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap) }
.tile { position: relative; overflow: hidden; display: grid; grid-template-rows: 1fr auto; gap: clamp(24px, 2.6vw, 38px); padding: clamp(22px, 2.5vw, 36px); border-radius: var(--r); background: var(--tint); transition: background-color 200ms ease-out }
.tile > div { display: flex; flex-direction: column; gap: 12px }
.tile p { font-size: 16px; color: var(--soft); line-height: 1.5 }
.tile svg { width: 100%; height: auto; aspect-ratio: 300 / 200; color: var(--b3) }
.tile .k rect { transition: transform 300ms var(--out) }
@media (hover: hover) and (pointer: fine) {
  .tile:hover { background: #ECEFF4 }
  .tile:hover .k rect:nth-child(3n) { transform: translateX(6px) } .tile:hover .k rect:nth-child(3n+1) { transform: translateX(-6px) }
}

.how .panel { background: var(--tint); padding: clamp(28px, 4.4vw, 64px) }
.how .split h2 { grid-column: 1 / 8 }
.how .text { grid-column: 8 / 13; display: grid; gap: 1em; align-content: start }
.how .text h3 { margin-bottom: .1em }
.rules { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: var(--gap); margin-top: clamp(44px, 5.6vw, 80px) }
.rules li { font-family: var(--serif); font-weight: 300; font-size: var(--d3); color: var(--ink); letter-spacing: -.016em; padding-top: 14px; border-top: 1px solid #D3D8E0 }

.opp .panel { background: var(--deep); color: #E8EDF5; padding: clamp(28px, 4.4vw, 64px); min-height: clamp(460px, 42vw, 620px); display: flex; flex-direction: column; justify-content: space-between; gap: 48px }
.opp h2 { color: #fff; max-width: 13em } .opp .dim { color: var(--b5) }
.opp .lead { color: #fff }
.opp .cols { max-width: min(36rem, 52%); display: grid; gap: 12px }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px }
.tags li { height: 34px; display: flex; align-items: center; padding: 0 14px; border-radius: 99px; background: rgba(255, 255, 255, .1); color: #fff; font-size: var(--small) }

.talk { padding: var(--section) var(--m) var(--m) }
.talk .panel { min-height: clamp(420px, 40vw, 580px); padding: clamp(28px, 4.4vw, 64px); background: linear-gradient(100deg, var(--b4) 0%, var(--b5) 38%, var(--b7) 72%, var(--dawn) 100%); display: flex; flex-direction: column; justify-content: space-between; gap: 40px }
.talk h2 { color: var(--ink) } .talk .dim { color: var(--b1) }
.mail { position: relative; overflow: hidden; isolation: isolate; align-self: flex-start; font-family: var(--serif); font-weight: 300; font-size: min(var(--d2), 9vw); line-height: 1.15; letter-spacing: -.02em; color: var(--ink); text-decoration: none; padding: .04em .2em .1em; margin-left: -.2em; border-radius: .16em; transition: color 200ms ease-out }
.mail::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: translateY(101%); transition: transform 300ms var(--out) }
@media (hover: hover) and (pointer: fine) { .mail:hover::before { transform: none } .mail:hover { color: #fff } }
.mail:focus-visible::before { transform: none } .mail:focus-visible { color: #fff }

footer { padding: 32px var(--m); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: center; font-size: var(--small); color: var(--soft) }
footer svg { grid-column: 1 / 3; width: 104px; height: auto; fill: var(--ink) }
footer .about { grid-column: 3 / 8 } footer .links { grid-column: 8 / 13; display: flex; justify-content: flex-end; gap: 20px; flex-wrap: wrap }

.doc { max-width: 44rem; min-height: calc(100svh - 170px); padding: 88px var(--m) 110px; margin: 0 auto }
.doc h1 { font-size: var(--d2); margin-bottom: 36px } .doc h2 { font-size: var(--d3); font-weight: 400; margin: 36px 0 8px } .doc p { margin-bottom: 12px }
.doc mark { background: var(--b6); color: var(--ink); padding: 0 .25em; border-radius: 4px }

.person { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: end; padding-top: var(--section) }
.person .plate { grid-column: 1 / 6; aspect-ratio: 4 / 5; border-radius: var(--r); background: var(--tint); object-fit: cover; width: 100% }
.person .bio { grid-column: 7 / 13 } .person .role { color: var(--soft); margin: 8px 0 18px } .person h3 { font-size: var(--d2); font-weight: 300 }

/* Einstieg: einmal, kurz, aus sichtbarer Nähe */
.ready .rv { opacity: 0; transform: translateY(14px); filter: blur(3px) }
.ready .rv.on { opacity: 1; transform: none; filter: none; transition: opacity 500ms ease-out, transform 600ms var(--out), filter 500ms ease-out; transition-delay: calc(var(--i, 0) * 60ms) }
.ready .strata.rv li { transform: translateY(12px); opacity: 0 }
.ready .strata.rv.on li { transform: none; opacity: 1; transition: transform 500ms var(--out), opacity 400ms ease-out, flex-grow 300ms var(--out); transition-delay: calc(var(--n) * 40ms), calc(var(--n) * 40ms), 0ms }
.strata li { --n: 0 }
.strata li:nth-child(2) { --n: 1 } .strata li:nth-child(3) { --n: 2 } .strata li:nth-child(4) { --n: 3 } .strata li:nth-child(5) { --n: 4 } .strata li:nth-child(6) { --n: 5 } .strata li:nth-child(7) { --n: 6 } .strata li:nth-child(8) { --n: 7 }
.rv:nth-child(2) { --i: 1 } .rv:nth-child(3) { --i: 2 } .rv:nth-child(4) { --i: 3 }

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto }
  ::view-transition-old(root) { animation: fade-out 160ms ease-out both }
  ::view-transition-new(root) { animation: fade-in 260ms ease-out both }
}
@keyframes fade-out { to { opacity: 0 } } @keyframes fade-in { from { opacity: 0 } }

@media (max-width: 860px) {
  .nav ul { display: none } .nav > nav { position: absolute; width: 0 } .js .menu-btn { display: block }
  html:not(.js) .nav { height: auto; flex-wrap: wrap; padding-block: 12px } html:not(.js) .nav > nav { position: static; width: auto } html:not(.js) .nav ul { display: flex }
  .nav.is-open ul { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; position: fixed; inset: 72px 0 0; z-index: 29; padding: 24px var(--m); background: var(--white); animation: fade-in 160ms ease-out both }
  .nav.is-open ul a:not(.pill) { font: 300 36px/1.15 var(--serif); letter-spacing: -.02em; color: var(--ink) } .nav.is-open .pill { height: 46px; padding: 0 22px; font-size: 15px; margin-top: 10px }
  .who h2, .who .say-big, .who .more, .who .more p:first-child, .who .more p:last-child, .head2 h2, .head2 p, .how .split h2, .how .text { grid-column: 1 / 13 }
  .opp .cols { max-width: none }
  .who .more { margin-top: 24px; display: grid; gap: 1em } .who .say-big { font-size: min(8.4vw, 44px) } .head2 p { margin-top: 14px } .how .text { margin-top: 24px }
  .tiles { grid-template-columns: 1fr } .tile { grid-template-columns: 1fr 1fr; grid-template-rows: auto; align-items: center } .rules { grid-template-columns: 1fr 1fr; row-gap: 20px } .rules li { font-size: min(6vw, 30px) }
  .talk .panel { justify-content: flex-start; padding-bottom: calc((100vw - 2 * var(--m)) * .53 + 20px) }
  .strata { height: 480px } footer { display: block } footer .about { margin: 14px 0 } footer .links { justify-content: flex-start }
  .person { display: block } .person .bio { margin-top: 20px }
}
@media (max-height: 520px) and (min-aspect-ratio: 1051/1000) { .hero .panel { height: auto; min-height: 0 } .say { padding-top: 40px } }
@media (max-width: 360px) { .rules { grid-template-columns: 1fr } }
@media (max-width: 520px) { .tile { grid-template-columns: 1fr } }
@media (prefers-reduced-motion: reduce) {
  .ready .rv, .ready .strata.rv li { opacity: 1; transform: none; filter: none }
  .js .kara .w { color: inherit }
  *, ::before, ::after { transition-duration: .01ms !important; animation-duration: .01ms !important; transition-delay: 0s !important }
}