/* ---------- Kolibri-Animationen ---------- */
.va-box { align-self: flex-start; width: 86%; max-width: 320px; }
.va { display: block; width: 100%; height: auto; border-radius: 16px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); overflow: hidden; }
.va * { transform-box: fill-box; transform-origin: center; }
.va text { font-family: var(--f-sans); font-size: 10px; fill: #fff; }
.va text.m { fill: rgba(255, 255, 255, 0.62); }
.va text.b { font-weight: 600; }
.va text.n { fill: #0b0a2c; }
.va text.c { text-anchor: middle; }
.va text.e { text-anchor: end; }
.va text.s7 { font-size: 7px; } .va text.s8 { font-size: 8px; } .va text.s9 { font-size: 9px; }
.va text.big { font-size: 15px; font-weight: 600; }
.va text.huge { font-size: 26px; font-weight: 600; }
.va [data-t] { transition: opacity .45s ease, transform .6s var(--ease-out), stroke-dashoffset 1s ease; }
.va .f { opacity: 0; } .va .f.on { opacity: 1; }
.va .u { opacity: 0; transform: translateY(7px); } .va .u.on { opacity: 1; transform: none; }
.va .s { opacity: 0; transform: scale(.3); } .va .s.on { opacity: 1; transform: none; }
.va .w { transform: scaleX(0); transform-origin: left center; } .va .w.on { transform: none; }
.va .l { stroke-dasharray: 1; stroke-dashoffset: 1; } .va .l.on { stroke-dashoffset: 0; }
.va .o.on { opacity: .15; }
.va .strip { transition: transform .7s var(--ease-out); }
.va .strip[data-s="1"] { transform: translateY(-134px); } .va .strip[data-s="2"] { transform: translateY(-268px); }
.va .strip.x110[data-s="1"] { transform: translateX(-110px); } .va .strip.x110[data-s="2"] { transform: translateX(-220px); } .va .strip.x110[data-s="3"] { transform: translateX(-330px); }
.va .strip.x10[data-s="1"] { transform: translateX(10px); } .va .strip.x10[data-s="2"] { transform: translateX(20px); } .va .strip.x10[data-s="3"] { transform: translateX(30px); }
.va .mv2 { transition: transform .9s var(--ease-out), opacity .5s ease; }
.va .mv2.a[data-s="1"] { transform: translateX(80px) scale(.7); } .va .mv2.b[data-s="1"] { transform: translateX(-80px) scale(.7); }
.va .mv2[data-s="2"] { opacity: 0; transform: scale(.4); }
.va .mv2.a[data-s="2"] { transform: translateX(84px) scale(.4); } .va .mv2.b[data-s="2"] { transform: translateX(-84px) scale(.4); }
.va .tap { transition: transform .8s var(--ease-out); }
.va .tap[data-s="1"] { transform: translate(-72px, -30px); }
.va .tap[data-s="2"] { transform: translate(-72px, -30px) scale(.7); }
.va .tap[data-s="3"] { transform: translate(-72px, -30px); }
.va .pulse { animation: va-pulse 2.2s ease-out infinite; }
.va .flow { opacity: 0; animation: va-flow 1.8s ease-in-out infinite; }
.va .blink { animation: va-blink 1s steps(2) infinite; }
.va .spin { animation: va-spin 3s linear infinite; }
.va .swipe { animation: va-swipe 1.6s ease-in-out infinite; }
@keyframes va-pulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(2.4); opacity: 0; } }
@keyframes va-flow { 0% { transform: translate(0, 0); opacity: 0; } 15%, 80% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)); opacity: 0; } }
@keyframes va-blink { 50% { opacity: 0; } }
@keyframes va-spin { to { transform: rotate(360deg); } }
@keyframes va-swipe { 0%, 100% { transform: translateX(6px); opacity: .5; } 50% { transform: translateX(-6px); opacity: 1; } }
.kb .va-box { width: 100%; max-width: 360px; margin: 2px 0 16px; }

:root { --navy: #0b0a2c; --text: #fff; --text-2: rgba(255,255,255,.78); --text-3: rgba(255,255,255,.56); --f-sans: 'Geist', 'Helvetica Neue', Arial, system-ui, sans-serif; --f-serif: 'Instrument Serif', Georgia, serif; --ease-out: cubic-bezier(.16, 1, .3, 1); --line: rgba(255,255,255,.14); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 20px; }
body { margin: 0; color: var(--text); font: 400 16px/1.6 var(--f-sans); -webkit-font-smoothing: antialiased; background: #3f74dd linear-gradient(160deg, #2b58c9 0%, #3f74dd 40%, #6d9ae8 75%, #a9c3f2 100%) fixed; min-height: 100vh; }
a { color: inherit; }
.wrap { width: min(1080px, 100%); margin: 0 auto; padding: 0 20px; }
.top { display: flex; align-items: center; gap: 16px; padding: 22px 0 10px; flex-wrap: wrap; }
.top .logo img { height: 42px; width: auto; display: block; }
.top nav { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: rgba(11,10,44,.35); border: 1px solid var(--line); text-decoration: none; font-size: .88rem; white-space: nowrap; }
.pill:hover { background: rgba(255,255,255,.14); }
.pill.pri { background: #fff; color: var(--navy); border-color: #fff; }
.pill.pri svg { width: 12px; height: 12px; }
.crumbs { font-size: .8rem; color: var(--text-3); margin: 18px 0 0; }
.crumbs a { color: var(--text-2); text-decoration: none; } .crumbs a:hover { color: #fff; }
.card { margin: 14px 0 26px; padding: clamp(22px, 4vw, 48px); border-radius: 28px; background: rgba(11,10,44,.42); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 50px 100px -50px rgba(0,0,30,.75), inset 0 1px 0 rgba(255,255,255,.12); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.eyebrow { font-size: .74rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--text-2); }
h1 { margin: 10px 0 0; font-weight: 400; font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.05; letter-spacing: -.02em; }
h1 em { font-family: var(--f-serif); font-style: italic; }
.lead { margin: 18px 0 0; color: var(--text-2); font-size: 1.06rem; max-width: 62ch; }
.toc { margin: 26px 0 0; padding: 0; list-style: none; columns: 2 300px; column-gap: 28px; }
.toc li { break-inside: avoid; padding: 5px 0; border-top: 1px solid rgba(255,255,255,.08); font-size: .92rem; }
.toc a { text-decoration: none; color: var(--text-2); } .toc a:hover { color: #fff; }
.qa { padding: 26px 0 8px; border-top: 1px solid rgba(255,255,255,.12); }
.qa:first-of-type { margin-top: 30px; }
.qa h2 { margin: 0; font-size: 1.24rem; font-weight: 500; letter-spacing: -.01em; }
.qa h2 a { text-decoration: none; } .qa h2 a:hover::after { content: ' #'; color: var(--text-3); }
.qa p { margin: 10px 0 0; color: var(--text-2); max-width: 70ch; }
.qa .anim { margin-top: 14px; max-width: 360px; }
.qa .anim .va-box { width: 100%; max-width: none; }
.cta { margin: 34px 0 6px; padding: 22px 24px; border-radius: 20px; background: rgba(255,255,255,.08); border: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }
.cta b { font-weight: 500; font-size: 1.08rem; display: block; } .cta span { color: var(--text-2); font-size: .92rem; }
.cta .btns { display: flex; gap: 8px; flex-wrap: wrap; }
.rel h3, .foot h3 { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); font-weight: 500; margin: 0 0 10px; }
.rel { margin-top: 30px; } .rel .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.foot { padding: 10px 0 40px; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px 24px; font-size: .86rem; }
.foot ul { list-style: none; margin: 0; padding: 0; } .foot li { padding: 2px 0; } .foot a { color: var(--text-2); text-decoration: none; } .foot a:hover { color: #fff; }
.legal { padding: 0 0 30px; font-size: .78rem; color: var(--text-3); }
.hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-top: 26px; }
.hub a.t { display: block; padding: 18px; border-radius: 18px; background: rgba(255,255,255,.06); border: 1px solid var(--line); text-decoration: none; transition: background .25s, transform .3s var(--ease-out); }
.hub a.t:hover { background: rgba(255,255,255,.12); transform: translateY(-2px); }
.hub a.t b { display: block; font-weight: 500; font-size: 1.05rem; } .hub a.t span { display: block; color: var(--text-3); font-size: .84rem; margin-top: 4px; }
.hub h2 { grid-column: 1 / -1; margin: 18px 0 0; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); font-weight: 500; }
@media (max-width: 640px) { .top nav { margin-left: 0; width: 100%; } .toc { columns: 1; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- Gleicher Look wie die Startseite: bewegter Himmel, Koernung, Keimling ---------- */
body { position: relative; background: #3f74dd; }
body::before { content: ''; position: fixed; inset: 0; z-index: -3; background: linear-gradient(160deg, #2b58c9 0%, #3f74dd 40%, #6d9ae8 75%, #a9c3f2 100%); }
.sky { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.sky i { position: absolute; left: -20%; top: -20%; width: 140%; height: 140%; will-change: transform; }
.sky i:nth-child(1) { background: radial-gradient(ellipse 34% 40% at 30% 30%, rgba(30, 70, 190, .9), rgba(30, 70, 190, 0) 70%); animation: drift-a 26s ease-in-out infinite alternate; }
.sky i:nth-child(2) { background: radial-gradient(ellipse 32% 38% at 72% 24%, rgba(190, 215, 255, .85), rgba(190, 215, 255, 0) 70%); animation: drift-b 31s ease-in-out infinite alternate; }
.sky i:nth-child(3) { background: radial-gradient(ellipse 40% 34% at 62% 80%, rgba(120, 165, 240, .8), rgba(120, 165, 240, 0) 70%); animation: drift-c 36s ease-in-out infinite alternate; }
.sky i:nth-child(4) { background: radial-gradient(ellipse 26% 30% at 18% 78%, rgba(220, 235, 255, .55), rgba(220, 235, 255, 0) 70%); animation: drift-b 40s ease-in-out infinite alternate-reverse; }
@keyframes drift-a { from { transform: translate(-3%, -2%) scale(1); } to { transform: translate(4%, 3%) scale(1.08); } }
@keyframes drift-b { from { transform: translate(3%, 2%) scale(1.06); } to { transform: translate(-4%, -3%) scale(1); } }
@keyframes drift-c { from { transform: translate(2%, 3%) scale(1.08); } to { transform: translate(-3%, -2%) scale(1.02); } }
.sky::after { content: ''; position: absolute; right: -4vw; bottom: -6vh; width: min(52vw, 760px); aspect-ratio: 1; background: url("../media/keimling.webp") no-repeat center bottom / contain; opacity: .55; filter: drop-shadow(0 30px 40px rgba(0, 30, 60, .3)); transform-origin: 50% 92%; animation: breathe 7s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: rotate(-.7deg) translateY(0); } 50% { transform: rotate(.8deg) translateY(-4px); } }
body::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* Menue als eine Glasleiste wie auf der Startseite */
.top { padding: 26px 0 10px; }
.top .logo img { filter: drop-shadow(0 2px 14px rgba(5, 5, 30, .25)); }
.top nav { gap: 2px; padding: 6px; border-radius: 999px; background: rgba(12, 24, 80, .5); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(18px) saturate(130%); -webkit-backdrop-filter: blur(18px) saturate(130%); box-shadow: 0 20px 50px -24px rgba(0, 0, 20, .7); }
.pill { background: transparent; border: 0; padding: 9px 14px; font-size: .83rem; font-weight: 500; color: rgba(255, 255, 255, .84); }
.pill:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.pill[aria-current="page"], .pill.pri { background: #fff; color: var(--navy); }
.pill.pri:hover { background: #fff; }
/* Karte wie die Glaskarten der Startseite */
.card { background: rgba(20, 40, 120, .42); border-color: rgba(255, 255, 255, .16); backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%); }
h1 { font-weight: 500; letter-spacing: -.035em; }
h1 em { font-weight: 400; font-size: 1.08em; }
.qa h2 { font-weight: 500; }
.hub a.t, .cta { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); }
.foot, .legal { position: relative; }
@media (max-width: 760px) { .sky::after { width: 70vw; right: -14vw; opacity: .4; } .top nav { overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; max-width: 100%; } .top nav::-webkit-scrollbar { display: none; } }
@media (prefers-reduced-motion: reduce) { .sky i, .sky::after { animation: none; } }