/* Schriften liegen auf dem eigenen Server (kein Abruf bei Google) */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:100 1000;font-display:swap;src:url(/assets/fonts/dm-sans.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/plex-mono-400.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/plex-mono-500.woff2) format('woff2')}
/* Überschriften in DM Sans, alles andere in der Systemschrift */
h1,h2{font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif}
/* Navigation: Logo links, Menüpunkte verteilt, Symbolreihe klappt auf */
.nav,.nav *,.nav *::before,.nav *::after{box-sizing:border-box}
.nav{position:sticky;top:0;z-index:20;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display','Helvetica Neue',Helvetica,Arial,sans-serif;background:rgba(0,0,0,.8);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid #1D1D1F;transition:background .3s ease}
.nav.is-open,.nav.is-closing{background:#0B0B0D}
.nav-in{max-width:1104px;margin:0 auto;padding:4px clamp(16px,5vw,48px);display:flex;align-items:center;justify-content:space-between;gap:12px}
.nav-brand{display:flex;align-items:center;gap:11px;min-height:44px;font-size:15px;font-weight:800;letter-spacing:.1em;color:#F5F5F7;text-decoration:none}
.nav-brand:hover{color:#FFFFFF}
.nav-logo{flex:none;height:30px;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:clamp(12px,5vw,72px)}
.nav-item{all:unset;box-sizing:border-box;display:flex;align-items:center;min-height:44px;padding:0 10px;font:400 14px/1 -apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display','Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:-.01em;color:#D2D2D7;cursor:pointer;border-radius:8px;transition:color .2s ease}
.nav-item:hover,.nav-item[aria-expanded="true"]{color:#FFFFFF}
.nav-item:focus-visible,.nav-menu:focus-visible,.nav a:focus-visible{outline:2px solid #FF7A1A;outline-offset:2px}
.nav-right{display:flex;align-items:center;gap:6px}
.nav-cta{display:flex;align-items:center;justify-content:center;min-height:40px;padding:0 18px;background:#F5F5F7;color:#1D1D1F;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;letter-spacing:-.01em;text-decoration:none;border-radius:999px;white-space:nowrap;box-shadow:none;transition:background .2s ease}
.nav-cta:hover{background:#FFFFFF;color:#1D1D1F}
.nav-login{display:flex;align-items:center;justify-content:center;min-height:40px;padding:0 16px;border:1px solid rgba(255,255,255,.24);border-radius:999px;color:#F5F5F7;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;letter-spacing:-.01em;text-decoration:none;white-space:nowrap;transition:border-color .2s ease,background .2s ease}
.nav-login:hover{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.06);color:#FFFFFF}
.nav-menu{all:unset;box-sizing:border-box;display:none;position:relative;flex:none;width:44px;height:44px;cursor:pointer;border-radius:50%}
.nav-menu span{position:absolute;left:13px;top:21px;width:18px;height:2px;border-radius:2px;background:#F5F5F7;transition:rotate .18s cubic-bezier(.04,.04,.12,.96),translate .16s cubic-bezier(.52,.16,.52,.84) .1s}
.nav-menu span:first-child{translate:0 -4px}
.nav-menu span:last-child{translate:0 4px}
.nav.is-open .nav-menu span{translate:0 0;transition:rotate .32s cubic-bezier(.04,.04,.12,.96) .1s,translate .16s cubic-bezier(.52,.16,.52,.84)}
.nav.is-open .nav-menu span:first-child{rotate:45deg}
.nav.is-open .nav-menu span:last-child{rotate:-45deg}
/* Vorhang wie bei Apple: Die Einträge blenden gestaffelt ein. Beim Schließen gehen sie zuerst (von unten nach oben), dann fährt der Vorhang hoch. JS setzt Höhe, --i und --n. */
.nav-fly{position:absolute;left:0;right:0;top:100%;height:0;overflow:hidden;background:#0B0B0D;box-shadow:0 1px 0 #1D1D1F;visibility:hidden;transition:height .38s cubic-bezier(.4,0,.6,1) .09s,visibility 0s linear .5s}
.nav.is-open .nav-fly{visibility:visible;transition:height .44s cubic-bezier(.4,0,.6,1),visibility 0s}
.nav-fly-clip{max-height:calc(100vh - 50px);max-height:calc(100dvh - 50px);overflow-y:auto;overscroll-behavior:contain}
.nav-fly-in{max-width:1104px;margin:0 auto;padding:30px clamp(16px,5vw,48px) 38px}
.nav-panel{display:none}
.nav[data-open="ind"] .nav-panel[data-panel="ind"],.nav[data-open="sup"] .nav-panel[data-panel="sup"],.nav[data-open="all"] .nav-panel{display:block}
.nav.is-open .nav-tile,.nav.is-open .nav-label{animation:navin .36s cubic-bezier(.4,0,.6,1) both;animation-delay:calc(70ms + var(--i,0) * 32ms)}
.nav.is-closing .nav-tile,.nav.is-closing .nav-label{animation:navout .2s cubic-bezier(.4,0,.6,1) both;animation-delay:calc((var(--n,1) - var(--i,0)) * 14ms)}
.nav-label{display:none;font-size:12px;font-weight:500;color:#86868B;margin-bottom:10px}
.nav-tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:8px clamp(20px,5vw,64px)}
.nav-tile{display:flex;flex-direction:column;align-items:center;gap:12px;min-width:96px;padding:8px 6px;font-size:14px;line-height:1.2;color:#F5F5F7;text-decoration:none;border-radius:12px;transition:color .2s ease}
.nav-tile svg{width:44px;height:44px;flex:none}
.nav-tile:hover{color:#FF7A1A}
@keyframes navin{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes navout{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-6px)}}
.nav-scrim{position:fixed;inset:0;z-index:15;background:rgba(0,0,0,.42);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);opacity:0;visibility:hidden;transition:opacity .38s cubic-bezier(.4,0,.6,1) .09s,visibility 0s linear .5s}
.nav-scrim.is-open{opacity:1;visibility:visible;transition:opacity .44s cubic-bezier(.4,0,.6,1),visibility 0s}
@media (max-width:760px){
.nav-links{display:none}
.nav-menu{display:block}
.nav-in{padding-top:3px;padding-bottom:3px}
.nav-brand{font-size:14px;letter-spacing:.08em}
.nav-logo{height:26px}
/* Kleine Pillen wie bei Apple; die Tippfläche bleibt über ::after 44px hoch */
.nav-cta,.nav-login{position:relative;min-height:32px;font-size:13px}
.nav-cta{padding:0 13px}
.nav-login{padding:0 11px}
.nav-cta::after,.nav-login::after{content:"";position:absolute;left:-2px;right:-2px;top:-6px;bottom:-6px}
.nav-right{gap:8px}
.nav-menu{margin-left:-2px}
/* Am Handy füllt das Menü den ganzen Bildschirm, die Seite dahinter scrollt nicht mit */
.nav-fly-clip{height:100%}
.nav.is-open .nav-fly{transition:height .52s cubic-bezier(.4,0,.6,1),visibility 0s}
.nav.is-open .nav-tile,.nav.is-open .nav-label{animation-delay:calc(130ms + var(--i,0) * 26ms)}
html.nav-lock{overflow:hidden}
.nav-fly-in{display:flex;flex-direction:column;gap:26px;padding:26px clamp(16px,5vw,48px) 40px}
.nav-label{display:block}
.nav-tiles{flex-direction:column;align-items:stretch;gap:2px}
.nav-tile{flex-direction:row;gap:14px;min-height:48px;padding:6px 0;font-size:22px;font-weight:600;letter-spacing:-.02em}
.nav-tile svg{width:28px;height:28px}
}
@media (max-width:350px){
.nav-in{padding-left:12px;padding-right:8px;gap:6px}
.nav-cta{padding:0 11px;font-size:12.5px}
.nav-login{display:none}
}
@media (prefers-reduced-motion:reduce){
.nav,.nav-fly,.nav.is-open .nav-fly,.nav-scrim,.nav-scrim.is-open,.nav-menu span{transition:none}
.nav-panel,.nav-tile,.nav-label{animation:none !important}
}

/* Leiste: Zahlen und "Läuft mit" */
.band,.band *{box-sizing:border-box}
.band{background:#0B0B0D;border-top:1px solid #1D1D1F;border-bottom:1px solid #1D1D1F;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display','Helvetica Neue',Helvetica,Arial,sans-serif;color:#F5F5F7}
.band-in{max-width:1200px;margin:0 auto;padding:clamp(22px,2.6vw,30px) clamp(20px,5vw,48px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px clamp(28px,4vw,48px)}
.band-stats{display:flex;flex-wrap:wrap;gap:18px clamp(28px,4vw,56px)}
.band-stat{display:flex;flex-direction:column;gap:6px}
.band-stat b{font:500 clamp(22px,2.2vw,28px)/1.1 -apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display','Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:-.01em;color:#F5F5F7}
.band-stat span{font-size:14px;line-height:1.3;color:#A1A1A6}
.band-works{display:flex;flex-wrap:wrap;align-items:center;gap:8px clamp(18px,2.2vw,28px);font-size:clamp(16px,1.4vw,18px);font-weight:600;color:#A1A1A6}
.band-label{font-size:13.5px;font-weight:400;letter-spacing:0;color:#86868B}
@media (min-width:1100px){.band-in{flex-wrap:nowrap}.band-works{flex-wrap:nowrap;white-space:nowrap}}
@media (max-width:760px){.band-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%}.band-stat b{font-size:19px;white-space:nowrap}.band-works{width:100%;padding-top:16px;border-top:1px solid #1D1D1F}}

/* Scroll-Animationen und Parallax */
.sr{opacity:0;transform:translate3d(0,28px,0);transition:opacity .8s ease var(--sd,0ms),transform .9s cubic-bezier(.2,.7,.2,1) var(--sd,0ms) !important;will-change:opacity,transform}
.sr.sr-zoom{transform:translate3d(0,20px,0) scale(.95)}
.sr.sr-in{opacity:1;transform:none}
[data-plx]{transform:translate3d(0,var(--py,0px),0);will-change:transform}
[data-plx-fade]{opacity:var(--po,1)}
@media (prefers-reduced-motion:reduce){.sr{opacity:1;transform:none;transition:none !important}[data-plx]{transform:none}[data-plx-fade]{opacity:1}}

/* Text färbt sich beim Scrollen von links nach rechts orange (JS setzt --p) */
.wipe-i{color:transparent !important;text-shadow:none;background:linear-gradient(90deg,#FF8A33 calc(var(--p,0%) - 14%),#FFFFFF var(--p,0%));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.wipe-x{display:table !important;margin-left:auto;margin-right:auto;color:transparent !important;background:linear-gradient(90deg,#FF8A33 calc(var(--p,0%) - 14%),#FFFFFF var(--p,0%));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* Hinweis-Karte: gleitet auf der Startseite nach ein paar Sekunden herein (Glas-Optik) */
.czn{position:fixed;z-index:12;right:24px;bottom:24px;width:min(430px,calc(100vw - 24px));box-sizing:border-box;padding:16px 16px 14px;border-radius:26px;background:linear-gradient(135deg,rgba(120,120,126,.42),rgba(60,60,64,.36));border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(28px) saturate(170%);backdrop-filter:blur(28px) saturate(170%);box-shadow:0 30px 70px -20px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.22);font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display','Helvetica Neue',Helvetica,Arial,sans-serif;color:#F5F5F7;opacity:0;transform:translate3d(0,28px,0) scale(.97);visibility:hidden;transition:opacity .5s cubic-bezier(.4,0,.6,1),transform .6s cubic-bezier(.2,.8,.2,1),visibility 0s linear .6s}
.czn.is-in{opacity:1;transform:none;visibility:visible;transition:opacity .5s cubic-bezier(.4,0,.6,1),transform .6s cubic-bezier(.2,.8,.2,1),visibility 0s}
.czn-top{display:grid;grid-template-columns:84px minmax(0,1fr);gap:14px;align-items:center;padding-right:22px}
.czn-img{width:84px;height:84px;border-radius:18px;overflow:hidden;background:#0B0B0D;box-shadow:0 0 0 1px rgba(255,255,255,.14)}
.czn-img img{display:block;width:100%;height:100%;object-fit:cover;object-position:88% 60%}
.czn-t{margin:0;font-size:15px;font-weight:600;letter-spacing:-.012em;line-height:1.25;color:#FFFFFF}
.czn-t b{font-weight:600;color:#FF8A33}
.czn-p{margin:5px 0 0;font-size:12.5px;line-height:1.42;color:rgba(245,245,247,.82)}
.czn-row{display:flex;align-items:center;gap:6px;margin-top:13px}
.czn-chip{display:inline-flex;align-items:center;min-height:34px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);font-size:12.5px;color:#F5F5F7;text-decoration:none;white-space:nowrap;transition:background .2s ease}
.czn-chip:hover{background:rgba(255,255,255,.26);color:#FFFFFF}
.czn-cta{margin-left:auto;display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 16px;border-radius:999px;background:rgba(10,10,12,.86);font-size:13px;font-weight:500;color:#FFFFFF;text-decoration:none;white-space:nowrap;transition:background .2s ease}
.czn-cta:hover{background:#000000;color:#FFFFFF}
.czn-cta::before{content:"+";font-weight:400;opacity:.7}
.czn-x{all:unset;box-sizing:border-box;position:absolute;right:10px;top:10px;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:rgba(255,255,255,.7);font-size:18px;line-height:1;transition:background .2s ease,color .2s ease}
.czn-x:hover{background:rgba(255,255,255,.16);color:#FFFFFF}
.czn-x:focus-visible,.czn a:focus-visible{outline:2px solid #FF7A1A;outline-offset:2px}
html.nav-lock .czn{opacity:0;visibility:hidden}
@media (max-width:520px){.czn{right:12px;bottom:calc(12px + env(safe-area-inset-bottom));padding:14px 14px 12px;border-radius:22px}.czn-top{grid-template-columns:64px minmax(0,1fr);gap:12px}.czn-img{width:64px;height:64px;border-radius:14px}.czn-t{font-size:14.5px}.czn-chip{padding:0 10px;font-size:12px}.czn-cta{padding:0 13px}}
@media (prefers-reduced-motion:reduce){.czn,.czn.is-in{transition:none;transform:none}}