/* JetBrains Mono – selbst gehostet (variabel), keine externen Requests. */
@font-face{font-family:'JetBrains Mono';font-style:normal;font-display:swap;font-weight:100 800;src:url('../fonts/jetbrains-mono.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-display:swap;font-weight:100 800;src:url('../fonts/jetbrains-mono-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* WOODNIO – Ergänzungen zum WOODGRID-Designsystem */
:root{--page:#fff;--card:#fff;--header-bg:rgba(255,255,255,.94);--header-bg-s:rgba(255,255,255,.86);color-scheme:light}

/* Hero */
.hero-nio{background:radial-gradient(60% 80% at 85% 10%,rgba(113,59,255,.10),transparent 70%),radial-gradient(50% 70% at 10% 0%,rgba(8,124,255,.10),transparent 70%),linear-gradient(180deg,var(--bg-soft) 0%,var(--page) 100%);padding:clamp(48px,7vw,104px) 0 clamp(40px,5vw,72px)}
.hero-nio__in{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,80px);align-items:center}
.hero-nio h1{margin-bottom:.5em}
.hero-nio .hero__lead{max-width:36rem}
.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-size:13.5px;font-weight:500;color:var(--ink);margin-bottom:1.4em}
.badge i{width:8px;height:8px;border-radius:50%;background:var(--lime);display:inline-block}

/* Terminal-/Code-Karte */
.term{background:#101D3A;color:#E8EBEE;border-radius:16px;box-shadow:var(--wp-shadow-soft);overflow:hidden;font-size:14px}
.term__bar{display:flex;gap:7px;align-items:center;padding:12px 16px;background:#0B1530}
.term__bar i{width:10px;height:10px;border-radius:50%;background:#4A5058;display:block}
.term__bar span{margin-left:10px;font-size:12.5px;color:#9AA2AB}
.term pre{margin:0;padding:20px 22px;overflow-x:auto;font:13.5px/1.7 var(--mono);white-space:pre}
.term .c-u{color:#7CC0F5}.term .c-m{color:#8E97A1}.term .c-k{color:#A98BFF}
pre.code{background:#101D3A;color:#E8EBEE;border-radius:12px;padding:20px 22px;overflow-x:auto;font:13.5px/1.7 var(--mono);margin:0 0 1.4em}

/* Tarife */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.plan{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px;display:flex;flex-direction:column}
.plan--hl{border:2px solid var(--lime);box-shadow:var(--wp-shadow-soft);position:relative}
.plan__tag{position:absolute;top:-13px;left:24px;background:var(--lime);color:var(--ink);font-size:12.5px;font-weight:600;padding:3px 12px;border-radius:999px}
.plan h3{font-size:1.25rem;margin-bottom:.2em}
.plan__for{font-size:.95rem;color:var(--mute);font-weight:400;min-height:3em;margin-bottom:1em}
.plan__price{font-size:2.6rem;font-weight:400;color:var(--ink);line-height:1;letter-spacing:-.02em}
.plan__price small{font-size:.95rem;color:var(--mute);font-weight:400;letter-spacing:0}
.plan__net{font-size:13px;color:var(--mute);margin:.5em 0 1.4em}
.plan .checklist{margin-bottom:1.8em;flex:1;gap:10px;font-size:.97rem}
.plan .btn{width:100%}
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius)}
table.cmp{width:100%;border-collapse:collapse;min-width:680px;background:var(--card)}
table.cmp th,table.cmp td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line);font-size:.97rem;font-weight:400}
table.cmp thead th{background:var(--bg-soft);color:var(--ink);font-weight:600}
table.cmp tbody th{font-weight:500;color:var(--ink)}
table.cmp tbody tr:last-child>*{border-bottom:0}
table.cmp td.y{color:var(--lime-text);font-weight:600}
table.cmp td.n{color:#9AA0A6}

/* Provider-Leiste */
.providers{display:flex;flex-wrap:wrap;gap:12px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:1px solid var(--line);border-radius:999px;background:var(--card);font-weight:500;font-size:.95rem;color:var(--ink)}
.chip--soon{color:var(--mute);font-weight:400;border-style:dashed}
.icon-card .ic{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:var(--lime-50);color:var(--lime-text);margin-bottom:1em}
.icon-card .ic svg{width:24px;height:24px}
.steps .card__no{color:var(--lime-text)}
.fine{font-size:.9rem;color:var(--mute);font-weight:400}

@media (max-width:1100px){.plans{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.plans{grid-template-columns:1fr}}
@media (max-width:900px){.hero-nio__in{grid-template-columns:1fr}}
@media (max-width:640px){.plans{grid-template-columns:1fr}}


/* ===== Markenstil WOODNIO: Navy, Electric Blue, Violett, Inter ===== */
body{font-weight:400;color:var(--ink-2)}
h1,h2{font-weight:700;letter-spacing:-.02em}
h3{font-weight:600}
h1{font-size:clamp(2.25rem,3vw + 1rem,2.25rem)}
h2{font-size:1.75rem}
h3{font-size:1.375rem}
.card h3,.plan h3{font-size:1.125rem}
.hero-nio h1{font-size:clamp(2.4rem,1.8vw + 1.8rem,3.5rem);line-height:1.1}
.hero-nio h1 .lime{white-space:nowrap}
.page-hero h1{font-size:clamp(2rem,2vw + 1.2rem,2.75rem)}
.cta-band h2{font-size:clamp(1.6rem,1.5vw + 1.1rem,2.1rem)}
.eyebrow{font-size:12.5px;font-weight:600;letter-spacing:.08em}
code,pre,.term pre,table .mono{font-family:var(--mono)}
code{background:var(--bg-soft);border:1px solid var(--line);border-radius:6px;padding:1px 6px;font-size:.88em;color:var(--ink)}
.lime{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.brand img{height:40px;width:auto;display:block}
.site-footer .brand img{height:36px}

/* Buttons: blau mit weißer Schrift */
.btn{border-radius:10px;font-weight:500;font-size:15px}
.btn--primary{background:var(--lime);color:#fff;border-color:var(--lime);--fill:var(--ink)}
.btn--primary:hover,.btn--primary:focus-visible{color:#fff;border-color:var(--ink)}
.btn--ghost{background:var(--page);color:var(--ink);border-color:var(--line);font-weight:500;--fill:var(--bg-soft)}
.btn--ghost:hover{color:var(--ink);border-color:#CBD5E1}
.cta-band .btn--primary{--fill:#fff;background:var(--lime);border-color:var(--lime);color:#fff}
.cta-band .btn--primary:hover{color:var(--ink);border-color:#fff}
.cta-band .btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.4);--fill:#fff}
.cta-band .btn--ghost:hover{color:var(--ink);border-color:#fff}
.cta-band{background:linear-gradient(135deg,#101D3A 0%,#16296b 100%)}

/* Karten: dezente Rahmen statt Schatten, 12 px Radius */
.card,.plan{border-radius:12px;border:1px solid var(--line);box-shadow:none}
.plan--hl{border:1px solid transparent;background:linear-gradient(var(--card),var(--card)) padding-box,var(--grad) border-box;border-width:2px;box-shadow:0 18px 48px -24px rgba(8,124,255,.35)}
.plan__tag{background:var(--grad);color:#fff}
.plan__price{font-weight:700;font-family:var(--font)}
.section--soft .card{border-color:var(--line)}
.icon-card .ic{background:linear-gradient(135deg,rgba(8,124,255,.12),rgba(113,59,255,.12));color:var(--lime)}
.card__no{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;font-weight:700}
.steps .card__no{color:transparent}
.checklist li::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4.8 9.4l2.9 2.9 5.5-6.2' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat,var(--grad)}
.badge{background:var(--card);border-color:var(--line)}
.badge i{background:var(--grad)}
.chip{border-radius:999px}
.notice{background:var(--lime-50);border-left-color:var(--lime)}
table.cmp td.y{color:var(--lime)}
.nav a[aria-current]{box-shadow:inset 0 -2px 0 var(--lime)}
:focus-visible{outline-color:var(--lime)}
.check input[type=checkbox]:checked{background-color:var(--lime);border-color:var(--lime)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--lime);outline:3px solid rgba(8,124,255,.2)}
.flash--ok{background:var(--lime-50);color:#0A4FA8;border-color:#BBD5FB}

/* Footer hell */
.site-footer{background:var(--bg-soft);color:var(--mute);border-top:1px solid var(--line)}
.site-footer a{color:var(--ink)}.site-footer a:hover{color:var(--lime)}
.site-footer h3{color:var(--ink)}
.site-footer__bar{border-top-color:var(--line)}
.site-footer__brand img{margin-bottom:16px}

.site-header .theme-toggle{display:inline-grid;place-items:center;width:40px;height:40px;border:1px solid var(--line);border-radius:10px;background:var(--page);color:var(--ink);cursor:pointer;padding:0}
.theme-toggle:hover{border-color:var(--lime)}
.theme-toggle svg{width:20px;height:20px;display:block}
.theme-toggle .i-sun{display:none}
.brand .logo-d{display:none}

/* ===== Dark Mode (System oder Umschalter) ===== */
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){
  --page:#0E0F11; --card:#17181B; --header-bg:rgba(14,15,17,.9); --header-bg-s:rgba(14,15,17,.82);
  --ink:#F4F4F5; --ink-2:#D4D4D8; --mute:#9CA0A8; --line:#2C2E33; --bg-soft:#131417;
  --lime-50:rgba(8,124,255,.12); --lime-text:#6AB0FF; --lime-d:#3D95FF; --grey:#71717A;
  color-scheme:dark;
}
:root:not([data-theme="light"]) body{background:var(--page)}
:root:not([data-theme="light"]) .site-header,:root:not([data-theme="light"]) .site-header.is-scrolled{background:var(--header-bg);border-bottom-color:var(--line)}
:root:not([data-theme="light"]) .site-header.is-scrolled{background:var(--header-bg-s)}
:root:not([data-theme="light"]) .nav__sub{background:var(--card)}
:root:not([data-theme="light"]) .card,:root:not([data-theme="light"]) .plan,:root:not([data-theme="light"]) .tbl-wrap,:root:not([data-theme="light"]) .field input,:root:not([data-theme="light"]) .field select,:root:not([data-theme="light"]) .field textarea,:root:not([data-theme="light"]) .check input[type=checkbox]{background-color:var(--card)}
:root:not([data-theme="light"]) .field input,:root:not([data-theme="light"]) .field select,:root:not([data-theme="light"]) .field textarea{border-color:var(--line);color:var(--ink)}
:root:not([data-theme="light"]) .field input::placeholder,:root:not([data-theme="light"]) .field textarea::placeholder{color:var(--mute)}
:root:not([data-theme="light"]) .cta-band{background:#1B1C20;border:1px solid var(--line)}
:root:not([data-theme="light"]) .cta-band .btn--ghost{color:#fff}
:root:not([data-theme="light"]) code{background:var(--bg-soft)}
:root:not([data-theme="light"]) pre.code,:root:not([data-theme="light"]) .term{border:1px solid var(--line)}
:root:not([data-theme="light"]) .logo-l{display:none}
:root:not([data-theme="light"]) .logo-d{display:block}
:root:not([data-theme="light"]) .theme-toggle .i-moon{display:none}
:root:not([data-theme="light"]) .theme-toggle .i-sun{display:block}
:root:not([data-theme="light"]) .chip--soon{color:var(--mute)}
:root:not([data-theme="light"]) table.cmp thead th{background:var(--bg-soft)}
:root:not([data-theme="light"]) .plan--hl{box-shadow:0 18px 48px -24px rgba(8,124,255,.55)}
:root:not([data-theme="light"]) img{color-scheme:light}
}
:root[data-theme="dark"]{
  --page:#0E0F11; --card:#17181B; --header-bg:rgba(14,15,17,.9); --header-bg-s:rgba(14,15,17,.82);
  --ink:#F4F4F5; --ink-2:#D4D4D8; --mute:#9CA0A8; --line:#2C2E33; --bg-soft:#131417;
  --lime-50:rgba(8,124,255,.12); --lime-text:#6AB0FF; --lime-d:#3D95FF; --grey:#71717A;
  color-scheme:dark;
}
:root[data-theme="dark"] body{background:var(--page)}
:root[data-theme="dark"] .site-header,:root[data-theme="dark"] .site-header.is-scrolled{background:var(--header-bg);border-bottom-color:var(--line)}
:root[data-theme="dark"] .site-header.is-scrolled{background:var(--header-bg-s)}
:root[data-theme="dark"] .nav__sub{background:var(--card)}
:root[data-theme="dark"] .card,:root[data-theme="dark"] .plan,:root[data-theme="dark"] .tbl-wrap,:root[data-theme="dark"] .field input,:root[data-theme="dark"] .field select,:root[data-theme="dark"] .field textarea,:root[data-theme="dark"] .check input[type=checkbox]{background-color:var(--card)}
:root[data-theme="dark"] .field input,:root[data-theme="dark"] .field select,:root[data-theme="dark"] .field textarea{border-color:var(--line);color:var(--ink)}
:root[data-theme="dark"] .field input::placeholder,:root[data-theme="dark"] .field textarea::placeholder{color:var(--mute)}
:root[data-theme="dark"] .cta-band{background:#1B1C20;border:1px solid var(--line)}
:root[data-theme="dark"] .cta-band .btn--ghost{color:#fff}
:root[data-theme="dark"] code{background:var(--bg-soft)}
:root[data-theme="dark"] pre.code,:root[data-theme="dark"] .term{border:1px solid var(--line)}
:root[data-theme="dark"] .logo-l{display:none}
:root[data-theme="dark"] .logo-d{display:block}
:root[data-theme="dark"] .theme-toggle .i-moon{display:none}
:root[data-theme="dark"] .theme-toggle .i-sun{display:block}
:root[data-theme="dark"] .chip--soon{color:var(--mute)}
:root[data-theme="dark"] table.cmp thead th{background:var(--bg-soft)}
:root[data-theme="dark"] .plan--hl{box-shadow:0 18px 48px -24px rgba(8,124,255,.55)}
:root[data-theme="dark"] img{color-scheme:light}

.nav-wrap{background:transparent}
@media (max-width:900px){.nav-wrap{background:var(--card)}}

/* Dark: neutrales Anthrazit statt Blau */
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]) pre.code,:root:not([data-theme="light"]) .term{background:#151619;border:1px solid var(--line)}
:root:not([data-theme="light"]) .term__bar{background:#0E0F11}
:root:not([data-theme="light"]) .hero-nio{background:radial-gradient(60% 80% at 85% 10%,rgba(113,59,255,.07),transparent 70%),linear-gradient(180deg,var(--bg-soft) 0%,var(--page) 100%)}
}
:root[data-theme="dark"] pre.code,:root[data-theme="dark"] .term{background:#151619;border:1px solid var(--line)}
:root[data-theme="dark"] .term__bar{background:#0E0F11}
:root[data-theme="dark"] .hero-nio{background:radial-gradient(60% 80% at 85% 10%,rgba(113,59,255,.07),transparent 70%),linear-gradient(180deg,var(--bg-soft) 0%,var(--page) 100%)}

/* Hero mit Foto */
.hero-nio--img{position:relative;overflow:hidden;isolation:isolate;min-height:clamp(540px,46vw,720px);display:flex;align-items:center;background:var(--page);padding:clamp(48px,6vw,96px) 0}
.hero-nio__bg{position:absolute;inset:0;z-index:-2}
.hero-nio__bg img{width:100%;height:100%;object-fit:cover;object-position:78% 50%;display:block}
.hero-nio--img::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--page) 0%,color-mix(in srgb,var(--page) 94%,transparent) 30%,color-mix(in srgb,var(--page) 55%,transparent) 48%,transparent 68%)}
.hero-nio--img .hero-nio__in{display:block}
.hero-nio__text{max-width:38rem}
.hero-nio--img .badge{background:color-mix(in srgb,var(--card) 88%,transparent);backdrop-filter:blur(6px)}
@media (max-width:900px){
  .hero-nio--img{align-items:flex-end;min-height:640px}
  .hero-nio__bg img{object-position:72% 20%}
  .hero-nio--img::before{background:linear-gradient(180deg,color-mix(in srgb,var(--page) 12%,transparent) 0%,color-mix(in srgb,var(--page) 55%,transparent) 28%,var(--page) 62%)}
}
/* Dark: Foto abdunkeln, damit Text lesbar bleibt und das Bild nicht blendet */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hero-stage picture{filter:brightness(.62) saturate(1.05)}}
:root[data-theme="dark"] .hero-stage picture{filter:brightness(.62) saturate(1.05)}

/* ===== Animationen ===== */
.term .spin{display:inline-block;width:.8em;height:.8em;margin-left:.7em;border:2px solid #4A5160;border-top-color:#7CC0F5;border-radius:50%;vertical-align:-.1em;opacity:0}
.term .caret{display:inline-block;width:.55em;height:1.05em;margin-left:1px;background:#7CC0F5;vertical-align:-.15em;animation:caret 1s steps(1) infinite}
.term .tl{display:block}
@keyframes caret{50%{opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes lineIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes numFlash{0%,100%{color:inherit;text-shadow:none}35%{color:#7CC0F5;text-shadow:0 0 14px rgba(124,192,245,.7)}}
@keyframes heroIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes heroZoom{from{transform:scale(1.07)}to{transform:scale(1)}}
@keyframes breathe{from{transform:scale(1)}to{transform:scale(1.035)}}
@keyframes termIn{from{opacity:0;transform:translateY(22px) scale(.985)}to{opacity:1;transform:none}}
@keyframes dotPulse{0%,100%{box-shadow:0 0 0 0 rgba(8,124,255,.55)}70%{box-shadow:0 0 0 7px rgba(8,124,255,0)}}
@media (prefers-reduced-motion:no-preference){
  .js .term[data-term]:not(.is-static) .tl{visibility:hidden}
  .js .term[data-term]:not(.is-static) .tl.is-on{visibility:visible;animation:lineIn .28s var(--ease-out) both}
  .js .term[data-term]:not(.is-static) .spin.is-on{opacity:1;animation:spin .7s linear infinite}
  .js .term[data-term]:not(.is-static){opacity:0}
  .js .term[data-term].is-in{opacity:1;animation:termIn .8s var(--ease-out) backwards}
  .term .tl--sum.is-done [data-num]{animation:numFlash 1.1s ease .05s both}
  .term__bar i:first-child{animation:dotPulse 2.4s ease-in-out infinite}
  /* Hero */
  .hero-stage{animation:heroZoom 2.4s var(--ease-out) both,breathe 22s ease-in-out 2.4s infinite alternate;transform-origin:70% 50%}
  .hero-nio--img .hero-nio__text>*{animation:heroIn .9s var(--ease-out) both}
  .hero-nio--img .hero-nio__text>:nth-child(1){animation-delay:.1s}
  .hero-nio--img .hero-nio__text>:nth-child(2){animation-delay:.22s}
  .hero-nio--img .hero-nio__text>:nth-child(3){animation-delay:.36s}
  .hero-nio--img .hero-nio__text>:nth-child(4){animation-delay:.5s}
  .hero-nio--img .hero-nio__text>:nth-child(5){animation-delay:.62s}
  .hero-nio--img h1 .lime{background-size:200% 100%;animation:gradShift 6s ease-in-out 1.2s infinite alternate}
  .card.icon-card .ic{transition:transform .35s var(--ease-out)}
  .card.icon-card:hover .ic{transform:translateY(-3px) rotate(-4deg)}
  .card,.plan{transition:transform .3s var(--ease-out),border-color .3s,box-shadow .3s}
  .card:hover,.plan:hover{transform:translateY(-3px);border-color:rgba(8,124,255,.45)}
  .chip{transition:transform .25s var(--ease-out),border-color .25s}
  .chip:hover{transform:translateY(-2px);border-color:var(--lime)}
}
@keyframes gradShift{from{background-position:0 0}to{background-position:100% 0}}
.hero-nio--img h1 .lime{background-image:linear-gradient(135deg,#087CFF 0%,#713BFF 50%,#087CFF 100%)}

.hero-nio--img>.container{width:100%}

/* Hero-Feinschliff: Foto nach rechts rücken, Text bleibt frei */
@media (min-width:901px){
  .hero-nio__bg{left:30%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26%);mask-image:linear-gradient(90deg,transparent 0,#000 26%)}
  .hero-nio__bg img{object-position:70% 50%}
  .hero-nio--img::before{background:linear-gradient(90deg,var(--page) 0%,color-mix(in srgb,var(--page) 96%,transparent) 36%,transparent 52%)}
  .hero-nio--img .hero-nio__text{max-width:35rem}
  .hero-nio--img h1{font-size:clamp(2.2rem,1.3vw + 1.7rem,3.2rem)}
}
@media (min-width:901px) and (max-width:1200px){.hero-nio__bg{left:38%}.hero-nio--img h1{font-size:2.3rem}}
.hero-nio--img>.container{position:relative}

/* Startseite: Hero läuft hinter dem Menü */
body.home{--head-h:78px}
body.home .site-header:not(.is-scrolled){background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:transparent}
body.home .site-header{transition:background-color .3s var(--ease-out),border-color .3s,backdrop-filter .3s}
body.home .hero-nio--img{margin-top:calc(-1 * var(--head-h));padding-top:calc(clamp(48px,6vw,96px) + var(--head-h));min-height:calc(clamp(540px,46vw,720px) + var(--head-h))}
body.home .hero-nio--img::after{content:"";position:absolute;left:0;right:0;top:0;height:150px;z-index:-1;background:linear-gradient(180deg,color-mix(in srgb,var(--page) 82%,transparent) 0%,transparent 100%);pointer-events:none}
@media (max-width:900px){body.home .hero-nio--img{min-height:calc(640px + var(--head-h))}}

/* Hero-Bühne: Bild und Effekte teilen sich dasselbe Koordinatensystem (wie object-fit:cover) */
.hero-nio__bg{container-type:size}
.hero-stage{--w:max(100cqw,calc(100cqh * 1672 / 941));--px:.97;--py:.5;position:absolute;width:var(--w);aspect-ratio:1672/941;left:calc((100cqw - var(--w)) * var(--px));top:calc((100cqh - var(--w) * 941 / 1672) * var(--py))}
.hero-stage picture{display:block;width:100%;height:100%}
.hero-nio__bg .hero-stage img{width:100%;height:100%;object-fit:fill;object-position:center;animation:none}
.hero-fx{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.fx-ic{transform-box:fill-box;transform-origin:center}
.fx-pulse path{stroke-dasharray:70 930;stroke-dashoffset:70;opacity:0}
.fx-breath{opacity:.35}
.fx-node{opacity:.0;transform-box:fill-box;transform-origin:center}
@media (max-width:900px){.hero-stage{--px:.9;--py:.2}}
.fx-link{stroke-dasharray:3 9}
@keyframes fxFloat{0%,100%{transform:translate(0,0) rotate(0) scale(1)}50%{transform:translate(0,-12px) rotate(2deg) scale(1.03)}}
@keyframes fxFloat2{0%,100%{transform:translate(0,0) rotate(0) scale(1)}50%{transform:translate(6px,10px) rotate(-2.2deg) scale(1.025)}}
@keyframes fxRun{0%{stroke-dashoffset:70;opacity:0}8%{opacity:1}88%{opacity:1}100%{stroke-dashoffset:-1000;opacity:0}}
@keyframes fxBreath{0%,100%{opacity:.25}50%{opacity:.7}}
@keyframes fxTwinkle{0%,100%{opacity:0;transform:scale(.4)}45%{opacity:.95;transform:scale(1.6)}}
@keyframes fxLink{to{stroke-dashoffset:-24}}
@keyframes fxTile{0%,100%{stroke-opacity:.5}50%{stroke-opacity:.95}}
@media (prefers-reduced-motion:no-preference){
  .fx-ic{animation:fxFloat 12s ease-in-out infinite;animation-delay:calc(var(--i) * -2.1s)}
  .fx-ic:nth-of-type(2n){animation-name:fxFloat2;animation-duration:14s}
  .fx-ic:nth-of-type(3n){animation-duration:10s}
  .fx-pulse path{animation:fxRun 11s cubic-bezier(.4,.05,.6,.95) infinite;animation-delay:calc(var(--d) * 1.9)}
  .fx-breath{animation:fxBreath 8s ease-in-out infinite}
  .fx-node{animation:fxTwinkle 6s ease-in-out infinite;animation-delay:calc(var(--d) * 1.8)}
  .fx-link{animation:fxLink 3.4s linear infinite;animation-delay:var(--d)}
  .fx-tile{animation:fxTile 6.5s ease-in-out infinite;animation-delay:calc(var(--i,0) * .8s)}
}

/* ===== Buttons mit Markenverlauf ===== */
.btn{transition:background-position .45s var(--ease-out),box-shadow .3s var(--ease-out),border-color .3s,color .3s,transform .16s var(--ease-out)}
.btn.btn--primary,.cta-band .btn.btn--primary{background-image:linear-gradient(135deg,#087CFF 0%,#713BFF 55%,#087CFF 110%);background-size:200% 100%;background-position:0 0;background-color:#087CFF;color:#fff;border-color:transparent;box-shadow:0 10px 24px -12px rgba(8,124,255,.7),inset 0 1px 0 rgba(255,255,255,.28)}
.btn.btn--primary::before{display:none}
.btn.btn--primary:hover,.btn.btn--primary:focus-visible,.cta-band .btn.btn--primary:hover,.cta-band .btn.btn--primary:focus-visible{background-position:100% 0;color:#fff;border-color:transparent;box-shadow:0 14px 30px -12px rgba(113,59,255,.75),inset 0 1px 0 rgba(255,255,255,.35);transform:translateY(-1px)}
.btn.btn--primary:active{transform:scale(.97)}
/* Ghost: dünner Rahmen, beim Hover Verlaufsrahmen */
.btn.btn--ghost::before{display:none}
.btn.btn--ghost:hover,.btn.btn--ghost:focus-visible{border-color:transparent;color:var(--ink);background:linear-gradient(var(--page),var(--page)) padding-box,var(--grad) border-box}
.cta-band .btn.btn--ghost:hover,.cta-band .btn.btn--ghost:focus-visible{background:#fff;color:#101D3A;border-color:#fff}
.theme-toggle:hover{border-color:transparent;background:linear-gradient(var(--page),var(--page)) padding-box,var(--grad) border-box}

/* Menü bleibt einzeilig, bei schmalen Fenstern rückt es zusammen */
.nav a{white-space:nowrap}
.nav{gap:clamp(12px,1.9vw,42px)}
@media (max-width:1240px){.actions .btn--ghost{display:none}}
@media (max-width:1100px){.nav a{font-size:14.5px}.site-header__in{gap:18px}}

/* Foto weich einblenden ohne die Icons auszublenden: Verlauf statt Maske */
@media (min-width:901px){
  .hero-nio__bg{-webkit-mask-image:none;mask-image:none}
  .hero-nio--img::before{background:linear-gradient(90deg,var(--page) 0%,var(--page) 30%,color-mix(in srgb,var(--page) 94%,transparent) 37%,color-mix(in srgb,var(--page) 55%,transparent) 47%,transparent 60%)}
}
@media (min-width:901px) and (max-width:1240px){
  .hero-nio__bg{left:46%}
  .hero-nio--img::before{background:linear-gradient(90deg,var(--page) 0%,var(--page) 44%,color-mix(in srgb,var(--page) 92%,transparent) 50%,transparent 66%)}
  .hero-nio--img .hero-nio__text{max-width:27rem}
}
@media (min-width:901px) and (max-width:1240px){
  .hero-stage{--px:.78}
  .hero-nio--img::before{background:linear-gradient(90deg,var(--page) 0%,var(--page) 44%,color-mix(in srgb,var(--page) 88%,transparent) 49%,transparent 58%)}
}

/* Impulse und Linien laufen in beide Richtungen und kreuzen sich */
@keyframes fxLinkR{to{stroke-dashoffset:24}}
@media (prefers-reduced-motion:no-preference){
  .fx-pulse--rev path{animation-direction:reverse}
  .fx-link--r{animation-name:fxLinkR}
}

/* Steuerung per Skript: Impulse laufen bergauf langsamer, bergab schneller */
.hero-fx.is-js .fx-pulse path{animation:none;opacity:1}
.hero-fx.is-js .fx-pulse{opacity:0}

/* Status-Badges und API-Tabellen */
.st{display:inline-block;vertical-align:middle;margin-left:6px;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;line-height:1.5}
.st--live{background:color-mix(in srgb,var(--lime) 14%,var(--card));color:var(--lime-text);border:1px solid color-mix(in srgb,var(--lime) 35%,var(--line))}
.st--plan{background:var(--bg-soft);color:var(--mute);border:1px dashed var(--line)}
.card h3 .st{font-size:10px}
.api-groups{display:grid;gap:26px}
.api-group h3{font-size:1rem;margin:0 0 10px}
table.api{min-width:560px}
table.api code{white-space:nowrap}
table.api td{vertical-align:top}
.tbl-wrap h3,.grid--2>div>h3{font-size:1rem}

/* Optionale Marken-Logos (nur offizielle Dateien, siehe assets/img/logos/README.md) */
.lg{width:18px;height:18px;object-fit:contain;vertical-align:-3px;margin-right:8px;border-radius:3px}
.lg--big{width:28px;height:28px;margin:0}
.ig-chip--logo::before{display:none}
.icon-card .ic:has(.lg--big){background:#fff;border:1px solid var(--line)}